From 4a10a94728ec6d62897e3299c2c924301ad86f0f Mon Sep 17 00:00:00 2001
From: Jeeva Ramachandran <120017870+JeevaRamu0104@users.noreply.github.com>
Date: Mon, 8 Jan 2024 13:07:21 +0530
Subject: [PATCH 01/14] chore: Add eslint hook (#166)

Co-authored-by: Sagar Naik <sagar.naik@juspay.in>
Co-authored-by: Pritish Budhiraja <1805317@kiit.ac.in>
---
 .eslintrc.json                                |  17 +
 .github/ISSUE_TEMPLATE/bug_report.yml         |   1 -
 .github/workflows/eslint-check.yml            |  30 ++
 docs/CODE_OF_CONDUCT.md                       |   2 +-
 docs/SECURITY.md                              |   4 +-
 package.json                                  |   6 +-
 .../NestedDropdownWithCalendar.res            | 121 --------
 src/components/Button.res                     |   3 +-
 .../CustomCharts/HighchartTimeSeriesChart.res |  37 +--
 src/components/DateRangePicker.res            |  26 +-
 src/components/InputFields.res                |  17 +-
 src/components/InputFields.resi               |   1 +
 src/components/LoadedTable.res                |  98 +++---
 src/components/LoadedTable.resi               |   2 +-
 src/components/MultipleFileUpload.res         |   3 +-
 src/components/NestedDropdown.res             | 291 ------------------
 src/components/NewDateRangePicker.res         |  26 +-
 src/components/ReactWindowTable.res           |  76 +++--
 src/components/TableUtils.res                 |  25 +-
 src/components/TableUtils.resi                |   2 +-
 src/components/form/FileUpload.res            |   3 +-
 src/components/form/TextInput.res             |   2 +-
 src/entities/analytics/AnalyticsUtils.res     |   2 -
 src/hooks/AnalyticsHooks.res                  |  71 -----
 src/libraries/Recoil.res                      |   2 +-
 src/libraries/SankeyHighcharts.res            |   2 +-
 .../HyperSwitch/Analytics/Analytics.res       |  28 +-
 .../SystemMetrics/SystemMetricsAnalytics.res  |  26 +-
 .../Connectors/ConnectorPreview.res           |   4 +-
 .../HyperSwitch/HSwitchRemoteFilter.res       |  53 ++--
 src/screens/HyperSwitch/Order/OrderHooks.res  |   2 +-
 src/screens/HyperSwitch/Order/ShowOrder.res   |   2 +-
 .../PostLoginScreen/PostLoginScreen.res       |   3 +-
 .../PostLoginScreen/PostLoginUtils.res        |   3 -
 .../HyperSwitch/Refunds/RefundHook.res        |   2 +-
 .../HyperSwitch/Refunds/ShowRefund.res        |   4 +-
 .../UserOnboardingUIUtils.res                 | 122 ++++----
 .../UserManagement/InviteUsers.res            |   8 +-
 38 files changed, 342 insertions(+), 785 deletions(-)
 create mode 100644 .eslintrc.json
 create mode 100644 .github/workflows/eslint-check.yml
 delete mode 100644 src/components/AnalyticsComponent/NestedDropdownWithCalendar.res
 delete mode 100644 src/components/NestedDropdown.res

diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 000000000..0e6e03f8c
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,17 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true,
+    "shelljs": true
+  },
+  "extends": [],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react-hooks"],
+  "rules": {
+    "react-hooks/rules-of-hooks": "error"
+  }
+}
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
index 3cc5a7f9f..c85300ffc 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -60,7 +60,6 @@ body:
     validations:
       required: false
 
-
   - type: checkboxes
     id: no-duplicate-issues
     attributes:
diff --git a/.github/workflows/eslint-check.yml b/.github/workflows/eslint-check.yml
new file mode 100644
index 000000000..3d24b5ebe
--- /dev/null
+++ b/.github/workflows/eslint-check.yml
@@ -0,0 +1,30 @@
+name: ESLint
+
+on: [push]
+
+jobs:
+  eslint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+          token: ${{ secrets.AUTO_RELEASE_PAT }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: npm install --force
+
+      - name: Build Rescript
+        run: npm run re:build
+
+      - name: Run ESLint
+        run: npm run lint:hooks
+        env:
+          CI: true
diff --git a/docs/CODE_OF_CONDUCT.md b/docs/CODE_OF_CONDUCT.md
index 3abf4809a..acb75d539 100644
--- a/docs/CODE_OF_CONDUCT.md
+++ b/docs/CODE_OF_CONDUCT.md
@@ -2,4 +2,4 @@
 
 The hyperswitch control center project adheres to the [Rescript](https://rescript-lang.org/community/code-of-conduct) and
 [React](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md) code of conduct.
-This describes the minimum behavior expected from all contributors.
\ No newline at end of file
+This describes the minimum behavior expected from all contributors.
diff --git a/docs/SECURITY.md b/docs/SECURITY.md
index 601c3fa0d..8a3551a62 100644
--- a/docs/SECURITY.md
+++ b/docs/SECURITY.md
@@ -1,3 +1,5 @@
 # Security Policy
+
 ## Reporting a security issue
-The hyperswitch project team welcomes security reports and is committed to providing prompt attention to security issues. Security issues should be reported privately via the [advisories page on GitHub](https://github.com/juspay/hyperswitch/security/advisories/new) or by email at hyperswitch@juspay.in. Security issues should not be reported via the public GitHub Issue tracker.
\ No newline at end of file
+
+The hyperswitch project team welcomes security reports and is committed to providing prompt attention to security issues. Security issues should be reported privately via the [advisories page on GitHub](https://github.com/juspay/hyperswitch/security/advisories/new) or by email at hyperswitch@juspay.in. Security issues should not be reported via the public GitHub Issue tracker.
diff --git a/package.json b/package.json
index 3caffb776..49ff19d99 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,8 @@
     "re:format": "rescript format -all",
     "postinstall": "git config core.hooksPath .githooks && chmod +x .githooks/commit-msg",
     "cy:open": "cypress open",
-    "cy:run": "cypress run"
+    "cy:run": "cypress run",
+    "lint:hooks": "eslint src/ --max-warnings 0"
   },
   "husky": {
     "hooks": {
@@ -27,11 +28,14 @@
     }
   },
   "devDependencies": {
+    "@eslint/create-config": "0.4.6",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
     "copy-webpack-plugin": "^9.0.0",
     "css-loader": "^5.0.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "cypress": "^13.6.0",
+    "eslint": "latest",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "file-loader": "^6.2.0",
     "husky": "^8.0.3",
     "mini-css-extract-plugin": "^1.3.1",
diff --git a/src/components/AnalyticsComponent/NestedDropdownWithCalendar.res b/src/components/AnalyticsComponent/NestedDropdownWithCalendar.res
deleted file mode 100644
index d4bb51706..000000000
--- a/src/components/AnalyticsComponent/NestedDropdownWithCalendar.res
+++ /dev/null
@@ -1,121 +0,0 @@
-@react.component
-let make = (
-  ~input: ReactFinalForm.fieldRenderPropsInput,
-  ~options,
-  ~title: string,
-  ~dateRangeLimit: int=60,
-  ~addMore: bool=true,
-) => {
-  let (startDateArr, setStartDateArr) = React.useState(_ => [""])
-  let (endDateArr, setEndDateArr) = React.useState(_ => [""])
-  let onClickAdd = _ => {
-    setEndDateArr(prev => Array.concat([""], prev))
-    setStartDateArr(prev => Array.concat([""], prev))
-  }
-  React.useEffect1(() => {
-    setStartDateArr(_ => [""])
-    setEndDateArr(_ => [""])
-    None
-  }, [input.value])
-
-  let onClick = _ => {
-    let newArr =
-      startDateArr->Array.mapWithIndex((x, i) => (
-        x,
-        endDateArr->Belt.Array.get(i)->Belt.Option.getWithDefault(x),
-      ))
-
-    input.onChange(newArr->Identity.anyTypeToReactEvent)
-  }
-
-  let showCalendars = React.useMemo1(() => {
-    input.value
-    ->Js.Json.decodeArray
-    ->Belt.Option.getWithDefault([])
-    ->Belt.Array.get(0)
-    ->Belt.Option.getWithDefault(Js.Json.null)
-    ->Js.Json.decodeString
-    ->Belt.Option.getWithDefault("") == "timeP" ||
-      input.value
-      ->Js.Json.decodeArray
-      ->Belt.Option.getWithDefault([])
-      ->Belt.Array.get(0)
-      ->Belt.Option.getWithDefault(Js.Json.null)
-      ->Js.Json.decodeArray
-      ->Belt.Option.getWithDefault([])
-      ->Belt.Array.get(0)
-      ->Belt.Option.getWithDefault(Js.Json.null)
-      ->Js.Json.decodeString
-      ->Belt.Option.getWithDefault("")
-      ->Js.Date.fromString
-      ->Js.Date.getTime >= 0.0
-  }, [input.value])
-  <div className="flex">
-    <NestedDropdown input options title />
-    <UIUtils.RenderIf condition={showCalendars}>
-      <div className="flex px-2">
-        {startDateArr
-        ->Array.mapWithIndex((_x, i) => {
-          <div className="px-1">
-            <DateRangePicker.Base
-              startDateVal={startDateArr[i]->Belt.Option.getWithDefault("")}
-              setStartDateVal={fn => {
-                setStartDateArr(prev => {
-                  let newArr = prev->Array.mapWithIndex(
-                    (x2, i2) => {
-                      if i2 == i {
-                        fn(prev[i]->Belt.Option.getWithDefault(""))
-                      } else {
-                        x2
-                      }
-                    },
-                  )
-
-                  newArr
-                })
-              }}
-              endDateVal={endDateArr[i]->Belt.Option.getWithDefault("")}
-              setEndDateVal={fn => {
-                setEndDateArr(prev => {
-                  let newArr = prev->Array.mapWithIndex(
-                    (x2, i2) => {
-                      if i2 == i {
-                        fn(prev[i]->Belt.Option.getWithDefault(""))
-                      } else {
-                        x2
-                      }
-                    },
-                  )
-
-                  newArr
-                })
-              }}
-              showTime=false
-              disablePastDates=false
-              disableFutureDates=true
-              predefinedDays=[]
-              format="YYYY-MM-DDTHH:mm:ss.SSS[Z]"
-              numMonths=1
-              disableApply=true
-              removeFilterOption=false
-              textHideInMobileView=true
-              showSeconds=true
-              hideDate=false
-              selectStandardTime=false
-              dateRangeLimit
-            />
-          </div>
-        })
-        ->React.array}
-        {addMore
-          ? <Button
-              buttonType={Secondary} text="Add" leftIcon={FontAwesome("plus")} onClick=onClickAdd
-            />
-          : React.null}
-        <div className="pl-2">
-          <Button buttonType=Primary text={`Compare`} onClick type_="submit" />
-        </div>
-      </div>
-    </UIUtils.RenderIf>
-  </div>
-}
diff --git a/src/components/Button.res b/src/components/Button.res
index 49fa7628f..59b89f0a2 100644
--- a/src/components/Button.res
+++ b/src/components/Button.res
@@ -364,8 +364,9 @@ let make = (
   let parentRef = React.useRef(Js.Nullable.null)
   let dummyRef = React.useRef(Js.Nullable.null)
   let buttonRef = disableRipple ? dummyRef : parentRef
+  let rippleEffect = RippleEffectBackground.useHorizontalRippleHook(buttonRef)
   if !isPhoneDropdown {
-    RippleEffectBackground.useHorizontalRippleHook(buttonRef)
+    rippleEffect
   }
 
   let customTextOverFlowClass = switch textStyleClass {
diff --git a/src/components/CustomCharts/HighchartTimeSeriesChart.res b/src/components/CustomCharts/HighchartTimeSeriesChart.res
index 98c8863cc..7686592e6 100644
--- a/src/components/CustomCharts/HighchartTimeSeriesChart.res
+++ b/src/components/CustomCharts/HighchartTimeSeriesChart.res
@@ -802,7 +802,7 @@ module LegendItem = {
 }
 
 module RenderMultiDimensionalChart = {
-  type props = {
+  type config = {
     chartDictData: Js.Dict.t<Belt.Array.t<Js.Json.t>>,
     class: string,
     selectedMetrics: LineChartUtils.metricsConfig,
@@ -812,17 +812,18 @@ module RenderMultiDimensionalChart = {
     legendType: legendType,
     chartType: string,
   }
-  let make = (props: props) => {
+  @react.component
+  let make = (~config: config) => {
     let (selectedRow, setSelectedRow) = React.useState(_ => None)
     let chartNames =
-      props.chartDictData
+      config.chartDictData
       ->Dict.toArray
       ->Array.reduce([], (acc: array<LineChartUtils.chartData<Js.Json.t>>, (_, value)) => {
         let chartdata = LineChartUtils.timeSeriesDataMaker(
           ~data=value,
-          ~groupKey=props.groupBy,
-          ~xAxis=props.xAxis,
-          ~metricsConfig=props.selectedMetrics,
+          ~groupKey=config.groupBy,
+          ~xAxis=config.xAxis,
+          ~metricsConfig=config.selectedMetrics,
           (),
         )
         chartdata
@@ -848,28 +849,28 @@ module RenderMultiDimensionalChart = {
       <div className="flex flex-wrap">
         {
           let chartArr = {
-            props.chartDictData
+            config.chartDictData
             ->Dict.toArray
             ->Array.mapWithIndex((item, index) => {
               let (key, value) = item
 
               <LineChart1D
                 key={index->Belt.Int.toString}
-                class=props.class
+                class=config.class
                 rawChartData=value
                 commonColorsArr={LineChartUtils.removeDuplicates(chartNames)}
-                selectedMetrics=props.selectedMetrics
-                xAxis=props.xAxis
-                groupKey=props.groupBy
+                selectedMetrics=config.selectedMetrics
+                xAxis=config.xAxis
+                groupKey=config.groupBy
                 chartTitle=true
                 chartTitleText=key
                 showTableLegend=false
                 showLegend=false
-                legendType=props.legendType
+                legendType=config.legendType
                 isMultiDimensional=true
-                chartKey=props.chartKey
+                chartKey=config.chartKey
                 selectedRow={selectedRow}
-                chartType=props.chartType
+                chartType=config.chartType
               />
             })
           }
@@ -910,7 +911,7 @@ module LineChart2D = {
       chartDictData->LineChartUtils.appendToDictValue(groupBy, item)
     })
 
-    let compProps: RenderMultiDimensionalChart.props = {
+    let compProps: RenderMultiDimensionalChart.config = {
       chartDictData,
       class,
       selectedMetrics,
@@ -921,7 +922,7 @@ module LineChart2D = {
       chartType,
     }
 
-    <RenderMultiDimensionalChart {...compProps} />
+    <RenderMultiDimensionalChart config={compProps} />
   }
 }
 
@@ -958,7 +959,7 @@ module LineChart3D = {
       chartDictData->LineChartUtils.appendToDictValue(groupBy1 ++ " / " ++ groupBy2, item)
     })
 
-    let compProps: RenderMultiDimensionalChart.props = {
+    let compProps: RenderMultiDimensionalChart.config = {
       chartDictData,
       class,
       selectedMetrics,
@@ -969,6 +970,6 @@ module LineChart3D = {
       chartType,
     }
 
-    <RenderMultiDimensionalChart {...compProps} />
+    <RenderMultiDimensionalChart config=compProps />
   }
 }
diff --git a/src/components/DateRangePicker.res b/src/components/DateRangePicker.res
index 841e451bf..944f9f44a 100644
--- a/src/components/DateRangePicker.res
+++ b/src/components/DateRangePicker.res
@@ -168,7 +168,7 @@ module Base = {
     ~disableApply=true,
     ~removeFilterOption=false,
     ~dateRangeLimit=?,
-    ~optFieldKey=?,
+    ~optFieldKey as _=?,
     ~textHideInMobileView=true,
     ~showSeconds=true,
     ~hideDate=false,
@@ -194,16 +194,10 @@ module Base = {
     let isoStringToCustomTimezoneInFloat = TimeZoneHook.useIsoStringToCustomTimeZoneInFloat()
 
     let (clickedDates, setClickedDates) = React.useState(_ => [])
-    let optInput = optFieldKey->Belt.Option.map(key => ReactFinalForm.useField(key).input)
-
-    let optInputVal =
-      optInput->Belt.Option.mapWithDefault("", optInput =>
-        optInput.value->LogicUtils.getStringFromJson("")
-      )
 
     let (localStartDate, setLocalStartDate) = React.useState(_ => startDateVal)
     let (localEndDate, setLocalEndDate) = React.useState(_ => endDateVal)
-    let (localOpt, setLocalOpt) = React.useState(_ => optInputVal)
+    let (_localOpt, setLocalOpt) = React.useState(_ => "")
     let (showMsg, setShowMsg) = React.useState(_ => false)
 
     let (isDropdownExpanded, setIsDropdownExpanded) = React.useState(_ => false)
@@ -225,12 +219,12 @@ module Base = {
 
     let initialStartTime = disableFutureDates || selectStandardTime ? "00:00:00" : "23:59:59"
     let initialEndTime = disableFutureDates || selectStandardTime ? "23:59:59" : "00:00:00"
-    React.useEffect3(() => {
+    React.useEffect2(() => {
       setLocalStartDate(_ => startDateVal)
       setLocalEndDate(_ => endDateVal)
-      setLocalOpt(_ => optInputVal)
+      setLocalOpt(_ => "")
       None
-    }, (startDateVal, endDateVal, optInputVal))
+    }, (startDateVal, endDateVal))
 
     let resetStartEndInput = () => {
       setLocalStartDate(_ => "")
@@ -273,16 +267,12 @@ module Base = {
       if localStartDate !== "" && localEndDate !== "" {
         setStartDateVal(_ => localStartDate)
         setEndDateVal(_ => localEndDate)
-        switch optInput {
-        | Some(ip) => ip.onChange(localOpt->Identity.stringToFormReactEvent)
-        | None => ()
-        }
       }
     }
     let resetToInitalValues = () => {
       setLocalStartDate(_ => startDateVal)
       setLocalEndDate(_ => endDateVal)
-      setLocalOpt(_ => optInputVal)
+      setLocalOpt(_ => "")
     }
 
     OutsideClick.useOutsideClick(
@@ -414,10 +404,6 @@ module Base = {
       setCalendarVisibility(p => !p)
       setIsDropdownExpanded(_ => false)
       saveDates()
-      switch optInput {
-      | Some(ip) => ip.onChange("custom_range"->Identity.stringToFormReactEvent)
-      | None => ()
-      }
     }
 
     let cancelButton = _ => {
diff --git a/src/components/InputFields.res b/src/components/InputFields.res
index 8d9ea8b37..f2fd96f1c 100644
--- a/src/components/InputFields.res
+++ b/src/components/InputFields.res
@@ -9,13 +9,6 @@ type comboCustomInputRecord = {
   names: array<string>,
 }
 
-let useGetAccessLevel = () => {
-  let accessLevel = React.useContext(FormAuthContext.formAuthContext)
-  () => {
-    accessLevel
-  }
-}
-
 let selectInput = (
   ~input: ReactFinalForm.fieldRenderPropsInput,
   ~options: array<SelectBox.dropdownOption>,
@@ -50,7 +43,6 @@ let selectInput = (
   ~descriptionOnHover=false,
   (),
 ) => {
-  let accessHook = useGetAccessLevel()
   <SelectBox
     input
     options
@@ -58,7 +50,7 @@ let selectInput = (
     allowMultiSelect=false
     deselectDisable
     isHorizontal
-    disableSelect={disableSelect || accessHook() == AuthTypes.Read}
+    disableSelect
     fullLength
     customButtonStyle
     textStyle
@@ -159,9 +151,9 @@ let multiSelectInput = (
   ~wrapBasis="",
   ~dropdownClassName="",
   ~baseComponentMethod=?,
+  ~disableSelect=false,
   (),
 ) => {
-  let accessHook = useGetAccessLevel()
   <SelectBox
     input
     options
@@ -184,7 +176,7 @@ let multiSelectInput = (
     ?fixedDropDownDirection
     showToolTip
     showNameAsToolTip
-    disableSelect={accessHook() == AuthTypes.Read}
+    disableSelect
     buttonType
     showSelectAll
     ?fullLength
@@ -279,12 +271,11 @@ let textInput = (
   ~widthMatchwithPlaceholderLength=None,
   (),
 ) => {
-  let accessHook = useGetAccessLevel()
   <TextInput
     input
     placeholder
     description
-    isDisabled={isDisabled || accessHook() == AuthTypes.Read}
+    isDisabled
     type_
     inputMode
     ?pattern
diff --git a/src/components/InputFields.resi b/src/components/InputFields.resi
index 5c4b72917..fc2c1f41e 100644
--- a/src/components/InputFields.resi
+++ b/src/components/InputFields.resi
@@ -100,6 +100,7 @@ let multiSelectInput: (
   ~wrapBasis: string=?,
   ~dropdownClassName: string=?,
   ~baseComponentMethod: bool => React.element=?,
+  ~disableSelect: bool=?,
   unit,
 ) => React.element
 let radioInput: (
diff --git a/src/components/LoadedTable.res b/src/components/LoadedTable.res
index b0e7f3b9f..b59de1bee 100644
--- a/src/components/LoadedTable.res
+++ b/src/components/LoadedTable.res
@@ -69,63 +69,61 @@ let useSortedObj = (title: string, defaultSort) => {
 
   (sortedObj, setSortedObj)
 }
-let useSortArray = () => {
-  (originalData, key, sortOrder: Table.sortOrder) => {
-    let getValue = val => {
-      switch val {
-      | Some(x) =>
-        switch x->Js.Json.classify {
-        | JSONString(str) => str->String.toLowerCase->Js.Json.string
-        | JSONNumber(_num) => x
-        | JSONFalse => "false"->Js.Json.string
-        | JSONTrue => "true"->Js.Json.string
-        | _ => ""->Js.Json.string
-        }
-      | None => ""->Js.Json.string
+let sortArray = (originalData, key, sortOrder: Table.sortOrder) => {
+  let getValue = val => {
+    switch val {
+    | Some(x) =>
+      switch x->Js.Json.classify {
+      | JSONString(str) => str->Js.String.toLowerCase->Js.Json.string
+      | JSONNumber(_num) => x
+      | JSONFalse => "false"->Js.Json.string
+      | JSONTrue => "true"->Js.Json.string
+      | _ => ""->Js.Json.string
       }
+    | None => ""->Js.Json.string
     }
-    let sortedArrayByOrder = {
-      let _ = originalData->Js.Array2.sortInPlaceWith((i1, i2) => {
-        let item1 = i1->Js.Json.stringifyAny->Belt.Option.getWithDefault("")->LogicUtils.safeParse
-        let item2 = i2->Js.Json.stringifyAny->Belt.Option.getWithDefault("")->LogicUtils.safeParse
-        // flatten items and get data
-
-        let val1 =
-          JsonFlattenUtils.flattenObject(item1, true)
-          ->Js.Json.object_
-          ->Js.Json.decodeObject
-          ->Belt.Option.flatMap(dict => dict->Dict.get(key))
-        let val2 =
-          JsonFlattenUtils.flattenObject(item2, true)
-          ->Js.Json.object_
-          ->Js.Json.decodeObject
-          ->Belt.Option.flatMap(dict => dict->Dict.get(key))
-        let value1 = getValue(val1)
-        let value2 = getValue(val2)
-        if value1 === ""->Js.Json.string || value2 === ""->Js.Json.string {
-          if value1 === value2 {
-            0
-          } else if value2 === ""->Js.Json.string {
-            sortOrder === DEC ? 1 : -1
-          } else if sortOrder === DEC {
-            -1
-          } else {
-            1
-          }
-        } else if value1 === value2 {
+  }
+  let sortedArrayByOrder = {
+    let _ = originalData->Js.Array2.sortInPlaceWith((i1, i2) => {
+      let item1 = i1->Js.Json.stringifyAny->Option.getWithDefault("")->LogicUtils.safeParse
+      let item2 = i2->Js.Json.stringifyAny->Option.getWithDefault("")->LogicUtils.safeParse
+      // flatten items and get data
+
+      let val1 =
+        JsonFlattenUtils.flattenObject(item1, true)
+        ->Js.Json.object_
+        ->Js.Json.decodeObject
+        ->Option.flatMap(dict => dict->Dict.get(key))
+      let val2 =
+        JsonFlattenUtils.flattenObject(item2, true)
+        ->Js.Json.object_
+        ->Js.Json.decodeObject
+        ->Option.flatMap(dict => dict->Dict.get(key))
+      let value1 = getValue(val1)
+      let value2 = getValue(val2)
+      if value1 === ""->Js.Json.string || value2 === ""->Js.Json.string {
+        if value1 === value2 {
           0
-        } else if value1 > value2 {
+        } else if value2 === ""->Js.Json.string {
           sortOrder === DEC ? 1 : -1
         } else if sortOrder === DEC {
           -1
         } else {
           1
         }
-      })
-      originalData
-    }
-    sortedArrayByOrder
+      } else if value1 === value2 {
+        0
+      } else if value1 > value2 {
+        sortOrder === DEC ? 1 : -1
+      } else if sortOrder === DEC {
+        -1
+      } else {
+        1
+      }
+    })
+    originalData
   }
+  sortedArrayByOrder
 }
 type pageDetails = {
   offset: int,
@@ -327,7 +325,7 @@ let make = (
         let newObj = oldFitlers->Dict.toArray->Dict.fromArray
         let filterValue = filterValue->Array.filter(
           item => {
-            let updatedItem = item->String.make
+            let updatedItem = item->Js.String.make
             updatedItem !== ""
           },
         )
@@ -514,8 +512,6 @@ let make = (
     }
   }, (actualData, totalResults, visibleColumns, columnFilter))
 
-  let sortArray = useSortArray()
-
   let filteredDataLength =
     columnFilter->Dict.keysToArray->Array.length !== 0 ? actualData->Array.length : totalResults
 
@@ -930,7 +926,7 @@ let make = (
   } else {
     `${ignoreHeaderBg ? "" : backgroundClass} empty:hidden`
   }
-  let dataId = title->String.split("-")->Belt.Array.get(0)->Belt.Option.getWithDefault("")
+  let dataId = title->Js.String2.split("-")->Belt.Array.get(0)->Belt.Option.getWithDefault("")
   <AddDataAttributes attributes=[("data-loaded-table", dataId)]>
     <div className="w-full">
       <div className=addDataAttributesClass style={ReactDOMStyle.make(~zIndex="2", ())}>
diff --git a/src/components/LoadedTable.resi b/src/components/LoadedTable.resi
index f43376ddd..a2453f93e 100644
--- a/src/components/LoadedTable.resi
+++ b/src/components/LoadedTable.resi
@@ -15,7 +15,7 @@ let useSortedObj: (
   option<Table.sortedObject>,
   (option<Table.sortedObject> => option<Table.sortedObject>) => unit,
 )
-let useSortArray: (unit, Js.Array2.t<'a>, Js.Dict.key, Table.sortOrder) => Js.Array2.t<'a>
+// let sortArray: (Js.Array2.t<'a>, RescriptCoreFuture.Dict.key, Table.sortOrder) => Js.Array2.t<'a>
 type pageDetails = {offset: int, resultsPerPage: int}
 let table_pageDetails: Recoil.recoilAtom<Js.Dict.t<pageDetails>>
 @react.component
diff --git a/src/components/MultipleFileUpload.res b/src/components/MultipleFileUpload.res
index 52f5f95b3..6b3d375b8 100644
--- a/src/components/MultipleFileUpload.res
+++ b/src/components/MultipleFileUpload.res
@@ -31,9 +31,10 @@ let make = (
   ~pointerDisable=false,
 ) => {
   let (key, setKey) = React.useState(_ => 1)
+  let formValues = ReactFinalForm.useField(input.name ++ "_filenames").input
   let fileNamesInput = switch fileNamesInput {
   | Some(filenamesInput) => filenamesInput
-  | None => ReactFinalForm.useField(input.name ++ "_filenames").input
+  | None => formValues
   }
   let fileTypeInput = ReactFinalForm.useField(input.name ++ "_filemimes").input
 
diff --git a/src/components/NestedDropdown.res b/src/components/NestedDropdown.res
deleted file mode 100644
index c842718e9..000000000
--- a/src/components/NestedDropdown.res
+++ /dev/null
@@ -1,291 +0,0 @@
-type rec options = {
-  title: string,
-  value: string,
-  options?: array<options>,
-}
-
-module RenderOption = {
-  @react.component
-  let make = (
-    ~option,
-    ~input: ReactFinalForm.fieldRenderPropsInput,
-    ~selectedInd,
-    ~setSelectedInd,
-    ~index,
-    ~depth,
-    ~setMaxDepthSelection,
-    ~maxDepthSelection as _,
-    ~prevMaxDepthSelection as _,
-    ~selectedData,
-    ~setSelectedData,
-    ~selectedDataVal,
-    ~setSelectedDataVal,
-  ) => {
-    let hasOptions = option.options->Belt.Option.isSome || option.value == "timeP"
-
-    let onClick = _ => {
-      if option.value == "timeP" {
-        let data = if Array.includes(selectedData, option.value) {
-          selectedData->Array.filter(x => x !== option.value)
-        } else {
-          Array.concat(selectedData, [option.value])
-        }
-        let dataN = if Array.includes(selectedDataVal, option.title) {
-          selectedDataVal->Array.filter(x => x !== option.title)
-        } else {
-          Array.concat(selectedDataVal, [option.title])
-        }
-        setSelectedData(_ => data)
-        setSelectedDataVal(_ => dataN)
-        input.onChange(data->Identity.anyTypeToReactEvent)
-      }
-      if selectedInd != index {
-        setSelectedInd(_ => index)
-        // setPrevMaxDepthSelection(_ => maxDepthSelection)
-        setMaxDepthSelection(_ => depth)
-      } else {
-        setSelectedInd(_ => -1)
-        // setPrevMaxDepthSelection(_ => maxDepthSelection)
-        setMaxDepthSelection(_ => depth - 1)
-      }
-    }
-
-    if hasOptions {
-      <div
-        className={`w-[185px] p-2  cursor-pointer  ${selectedInd == index
-            ? "bg-blue-100 border rounded"
-            : ""} flex justify-between items-center`}
-        onClick>
-        {React.string(option.title)}
-        <Icon name="angle-right" size=18 />
-      </div>
-    } else {
-      let isSelected = selectedData->Array.indexOf(option.value) > -1
-      let onClick = _ => {
-        let data = if Array.includes(selectedData, option.value) {
-          selectedData->Array.filter(x => x !== option.value)
-        } else {
-          Array.concat(selectedData, [option.value])
-        }
-        let dataN = if Array.includes(selectedDataVal, option.title) {
-          selectedDataVal->Array.filter(x => x !== option.title)
-        } else {
-          Array.concat(selectedDataVal, [option.title])
-        }
-        setSelectedData(_ => data)
-        setSelectedDataVal(_ => dataN)
-      }
-      <div onClick className={`w-[185px] p-2 items-center cursor-pointer flex `}>
-        <CheckBoxIcon isSelected />
-        <div className="ml-2"> {React.string(option.title)} </div>
-      </div>
-    }
-  }
-}
-module RenderOptionList = {
-  @react.component
-  let rec make = (
-    ~options: array<options>,
-    ~input: ReactFinalForm.fieldRenderPropsInput,
-    ~depth,
-    ~setDepth,
-    ~maxDepthSelection,
-    ~setMaxDepthSelection,
-    ~prevMaxDepthSelection,
-    ~selectedData,
-    ~setSelectedData,
-    ~selectedDataVal,
-    ~setSelectedDataVal,
-  ) => {
-    let (selectedInd, setSelectedIndOrig) = React.useState(_ => -1)
-    let setSelectedInd = React.useCallback1(fn => {
-      setSelectedIndOrig(fn)
-      setSelectedData(_ => [])
-      setSelectedDataVal(_ => [])
-    }, [setSelectedIndOrig])
-    let nestedOptions = React.useMemo1(() => {
-      switch Belt.Array.get(options, selectedInd) {
-      | Some(opt) =>
-        switch opt.options {
-        | Some(arr) => arr
-        | None => []
-        }
-      | None => []
-      }
-    }, [selectedInd])
-
-    // React.useEffect1(() => {
-
-    //   None
-    // }, [selectedInd])
-    React.useEffect2(() => {
-      if prevMaxDepthSelection > maxDepthSelection {
-        setSelectedInd(_ => -1)
-      }
-      None
-    }, (prevMaxDepthSelection, maxDepthSelection))
-    let hasNestedOptions = switch Belt.Array.get(options, 1) {
-    | Some(opt) =>
-      switch opt.options {
-      | Some(_arr) => true
-      | None => false
-      }
-    | None => false
-    }
-    let onClick = _ => {
-      input.onChange(selectedData->Identity.anyTypeToReactEvent)
-    }
-    <>
-      <div
-        className="mt-2  absolute  origin-top border border-jp-gray-lightmode_steelgray border-opacity-75 dark:border-jp-gray-960 rounded  shadow-generic_shadow dark:shadow-generic_shadow_dark z-20  bg-gray-50 dark:bg-jp-gray-950 "
-        style={ReactDOMStyle.make(
-          ~width="200px",
-          ~marginLeft={`${(depth * 200 + 5)->Belt.Int.toString}px`},
-          ~marginTop={`${(depth * 35)->Belt.Int.toString}px`},
-          (),
-        )}>
-        <div
-          className="bg-white  dark:bg-jp-gray-lightgray_background w-auto overflow-auto font-medium flex flex-col p-2 ">
-          <UIUtils.RenderIf condition={!hasNestedOptions}>
-            {React.string("Please select 2 or more values to compare")}
-          </UIUtils.RenderIf>
-          {options
-          ->Array.mapWithIndex((opt, index) =>
-            <RenderOption
-              option=opt
-              input
-              selectedInd
-              setSelectedInd
-              index
-              depth
-              setMaxDepthSelection
-              maxDepthSelection
-              prevMaxDepthSelection
-              selectedData
-              setSelectedData
-              selectedDataVal
-              setSelectedDataVal
-              key={index->Belt.Int.toString}
-            />
-          )
-          ->React.array}
-          <UIUtils.RenderIf condition={!hasNestedOptions}>
-            <Button
-              buttonType=Primary
-              text={`Compare (${selectedData->Array.length->Belt.Int.toString})`}
-              onClick
-              type_="submit"
-            />
-          </UIUtils.RenderIf>
-        </div>
-      </div>
-      <UIUtils.RenderIf condition={Array.length(nestedOptions) > 0}>
-        {React.createElement(
-          make,
-          {
-            options: nestedOptions,
-            input,
-            depth: {depth + 1},
-            setDepth,
-            maxDepthSelection,
-            setMaxDepthSelection,
-            prevMaxDepthSelection,
-            selectedData,
-            setSelectedData,
-            selectedDataVal,
-            setSelectedDataVal,
-          },
-        )}
-      </UIUtils.RenderIf>
-    </>
-  }
-}
-
-@react.component
-let make = (
-  ~input: ReactFinalForm.fieldRenderPropsInput,
-  ~options: array<options>,
-  ~title: string,
-) => {
-  let (showDropDown, setShowDropDown) = React.useState(_ => false)
-  let (selectedData, setSelectedDataOrig) = React.useState(_ => [])
-  let setSelectedData = React.useCallback1(fn => {
-    setSelectedDataOrig(p => {
-      let next = fn(p)
-      if next->Array.length == 0 && p->Array.length == 0 {
-        p
-      } else {
-        next
-      }
-    })
-  }, [setSelectedDataOrig])
-  let (selectedDataVal, setSelectedDataValOrig) = React.useState(_ => [])
-  let setSelectedDataVal = React.useCallback1(fn => {
-    setSelectedDataValOrig(p => {
-      let next = fn(p)
-      if next->Array.length == 0 && p->Array.length == 0 {
-        p
-      } else {
-        next
-      }
-    })
-  }, [setSelectedDataValOrig])
-  let (btnText, setButtonText) = React.useState(_ => title)
-  React.useEffect1(() => {
-    setShowDropDown(_ => false)
-
-    if selectedDataVal->Array.length > 0 {
-      let valStr = selectedDataVal->Array.joinWith(", ")
-      setButtonText(_ => `${title}: ${valStr}`)
-    }
-    None
-  }, [input.value])
-  let (depthTuple, setDepthTuple) = React.useState(_ => (0, 0))
-  let (prevMaxDepthSelection, maxDepthSelection) = depthTuple
-  let setMaxDepthSelection = React.useCallback1(fn => {
-    setDepthTuple(prevTuple => {
-      let (_oldPrev, oldCurr) = prevTuple
-      let newCurr = fn(oldCurr)
-      (oldCurr, newCurr)
-    })
-  }, [setDepthTuple])
-  // let (maxDepthSelection, setMaxDepthSelection) = React.useState(_ => 0)
-  // let (prevMaxDepthSelection, setPrevMaxDepthSelection) = React.useState(_ => 0)
-  let onClick = _ev => {
-    setShowDropDown(val => !val)
-  }
-  let buttonIcon = if showDropDown {
-    "angle-up"
-  } else {
-    "angle-down"
-  }
-  let (depth, setDepth) = React.useState(_ => 0)
-
-  <div className="relative">
-    <Button
-      buttonType=Dropdown
-      text=btnText
-      customButtonStyle={`w-auto items-center ${showDropDown ? "border-blue" : ""}`}
-      onClick
-      rightIcon={FontAwesome(buttonIcon)}
-    />
-    <UIUtils.RenderIf condition=showDropDown>
-      <div className="w-full flex">
-        <RenderOptionList
-          options
-          input
-          depth
-          setDepth
-          maxDepthSelection
-          setMaxDepthSelection
-          prevMaxDepthSelection
-          // setPrevMaxDepthSelection
-          selectedData
-          setSelectedData
-          selectedDataVal
-          setSelectedDataVal
-        />
-      </div>
-    </UIUtils.RenderIf>
-  </div>
-}
diff --git a/src/components/NewDateRangePicker.res b/src/components/NewDateRangePicker.res
index 40e813083..7fa813da9 100644
--- a/src/components/NewDateRangePicker.res
+++ b/src/components/NewDateRangePicker.res
@@ -190,7 +190,7 @@ module Base = {
     ~disableApply=true,
     ~removeFilterOption=false,
     ~dateRangeLimit=?,
-    ~optFieldKey=?,
+    ~optFieldKey as _=?,
     ~textHideInMobileView=true,
     ~showSeconds=true,
     ~hideDate=false,
@@ -209,16 +209,10 @@ module Base = {
     let isoStringToCustomTimezoneInFloat = TimeZoneHook.useIsoStringToCustomTimeZoneInFloat()
 
     let (clickedDates, setClickedDates) = React.useState(_ => [])
-    let optInput = optFieldKey->Belt.Option.map(key => ReactFinalForm.useField(key).input)
-
-    let optInputVal =
-      optInput->Belt.Option.mapWithDefault("", optInput =>
-        optInput.value->LogicUtils.getStringFromJson("")
-      )
 
     let (localStartDate, setLocalStartDate) = React.useState(_ => startDateVal)
     let (localEndDate, setLocalEndDate) = React.useState(_ => endDateVal)
-    let (localOpt, setLocalOpt) = React.useState(_ => optInputVal)
+    let (_localOpt, setLocalOpt) = React.useState(_ => "")
     let (_showMsg, setShowMsg) = React.useState(_ => false)
 
     let (isDropdownExpanded, setIsDropdownExpanded) = React.useState(_ => false)
@@ -242,12 +236,12 @@ module Base = {
     let initialStartTime = disableFutureDates || selectStandardTime ? "00:00:00" : "23:59:59"
     let initialEndTime = disableFutureDates || selectStandardTime ? "23:59:59" : "00:00:00"
 
-    React.useEffect3(() => {
+    React.useEffect2(() => {
       setLocalStartDate(_ => startDateVal)
       setLocalEndDate(_ => endDateVal)
-      setLocalOpt(_ => optInputVal)
+      setLocalOpt(_ => "")
       None
-    }, (startDateVal, endDateVal, optInputVal))
+    }, (startDateVal, endDateVal))
 
     let resetStartEndInput = () => {
       setLocalStartDate(_ => "")
@@ -290,16 +284,12 @@ module Base = {
       if localStartDate !== "" && localEndDate !== "" {
         setStartDateVal(_ => localStartDate)
         setEndDateVal(_ => localEndDate)
-        switch optInput {
-        | Some(ip) => ip.onChange(localOpt->Identity.stringToFormReactEvent)
-        | None => ()
-        }
       }
     }
     let resetToInitalValues = () => {
       setLocalStartDate(_ => startDateVal)
       setLocalEndDate(_ => endDateVal)
-      setLocalOpt(_ => optInputVal)
+      setLocalOpt(_ => "")
     }
 
     let changeEndDate = (ele, isFromCustomInput, time) => {
@@ -419,10 +409,6 @@ module Base = {
       setCalendarVisibility(p => !p)
       setIsDropdownExpanded(_ => false)
       saveDates()
-      switch optInput {
-      | Some(ip) => ip.onChange("custom_range"->Identity.stringToFormReactEvent)
-      | None => ()
-      }
     }
 
     let cancelButton = _ => {
diff --git a/src/components/ReactWindowTable.res b/src/components/ReactWindowTable.res
index 786af7060..315c227b9 100644
--- a/src/components/ReactWindowTable.res
+++ b/src/components/ReactWindowTable.res
@@ -588,47 +588,45 @@ let useSortedObj = (title: string, defaultSort) => {
 
   (sortedObj, setSortedObj)
 }
-let useSortArray = () => {
-  (originalData, key, sortOrder: Table.sortOrder) => {
-    let getValue = val => {
-      switch val {
-      | Some(x) =>
-        switch x->Js.Json.classify {
-        | JSONString(_str) => x
-        | JSONNumber(_num) => x
-        | JSONFalse => "false"->Js.Json.string
-        | JSONTrue => "true"->Js.Json.string
-        | _ => ""->Js.Json.string
-        }
-      | None => ""->Js.Json.string
+let sortArray = (originalData, key, sortOrder: Table.sortOrder) => {
+  let getValue = val => {
+    switch val {
+    | Some(x) =>
+      switch x->Js.Json.classify {
+      | JSONString(_str) => x
+      | JSONNumber(_num) => x
+      | JSONFalse => "false"->Js.Json.string
+      | JSONTrue => "true"->Js.Json.string
+      | _ => ""->Js.Json.string
       }
+    | None => ""->Js.Json.string
     }
-    let sortedArrayByOrder = {
-      let _ = originalData->Js.Array2.sortInPlaceWith((i1, i2) => {
-        let item1 = i1->Js.Json.stringifyAny->Belt.Option.getWithDefault("")->LogicUtils.safeParse
-        let item2 = i2->Js.Json.stringifyAny->Belt.Option.getWithDefault("")->LogicUtils.safeParse
-        // flatten items and get data
-
-        let val1 = item1->Js.Json.decodeObject->Belt.Option.flatMap(dict => dict->Dict.get(key))
-
-        let val2 = item2->Js.Json.decodeObject->Belt.Option.flatMap(dict => dict->Dict.get(key))
-
-        let value1 = getValue(val1)
-        let value2 = getValue(val2)
-        if value1 === value2 {
-          0
-        } else if value1 > value2 {
-          sortOrder === DEC ? 1 : -1
-        } else if sortOrder === DEC {
-          -1
-        } else {
-          1
-        }
-      })
-      originalData
-    }
-    sortedArrayByOrder
   }
+  let sortedArrayByOrder = {
+    let _ = originalData->Js.Array2.sortInPlaceWith((i1, i2) => {
+      let item1 = i1->Js.Json.stringifyAny->Option.getWithDefault("")->LogicUtils.safeParse
+      let item2 = i2->Js.Json.stringifyAny->Option.getWithDefault("")->LogicUtils.safeParse
+      // flatten items and get data
+
+      let val1 = item1->Js.Json.decodeObject->Option.flatMap(dict => dict->Dict.get(key))
+
+      let val2 = item2->Js.Json.decodeObject->Option.flatMap(dict => dict->Dict.get(key))
+
+      let value1 = getValue(val1)
+      let value2 = getValue(val2)
+      if value1 === value2 {
+        0
+      } else if value1 > value2 {
+        sortOrder === DEC ? 1 : -1
+      } else if sortOrder === DEC {
+        -1
+      } else {
+        1
+      }
+    })
+    originalData
+  }
+  sortedArrayByOrder
 }
 
 @react.component
@@ -886,8 +884,6 @@ let make = (
     }
   }, (actualData, columToConsider, totalResults, visibleColumns, columnFilter))
 
-  let sortArray = useSortArray()
-
   let actualData = if tableLocalFilter {
     filteredData(actualData, columnFilter, visibleColumns, entity, dateFormatConvertor)
   } else {
diff --git a/src/components/TableUtils.res b/src/components/TableUtils.res
index a1011fd45..c9a3521b4 100644
--- a/src/components/TableUtils.res
+++ b/src/components/TableUtils.res
@@ -477,15 +477,6 @@ module LinkCell = {
 }
 
 module DateCell = {
-  let getFormattedDate = (dateStr, dateFormat) => {
-    try {
-      let isoStringToCustomTimeZone = TimeZoneHook.useIsoStringToCustomTimeZoneInFloat()
-      let customTimeZone = isoStringToCustomTimeZone(dateStr)
-      TimeZoneHook.formattedDateTimeFloat(customTimeZone, dateFormat)
-    } catch {
-    | _ => `${dateStr} - unable to parse`
-    }
-  }
   @react.component
   let make = (
     ~timestamp,
@@ -499,6 +490,16 @@ module DateCell = {
     let dateFormat = React.useContext(DateFormatProvider.dateFormatContext)
     let dateFormat = isMobileView ? "DD MMM HH:mm" : dateFormat
 
+    let isoStringToCustomTimeZone = TimeZoneHook.useIsoStringToCustomTimeZoneInFloat()
+    let getFormattedDate = dateStr => {
+      try {
+        let customTimeZone = isoStringToCustomTimeZone(dateStr)
+        TimeZoneHook.formattedDateTimeFloat(customTimeZone, dateFormat)
+      } catch {
+      | _ => `${dateStr} - unable to parse`
+      }
+    }
+
     let fontType = switch textStyle {
     | Some(font) => font
     | None => "font-semibold"
@@ -514,11 +515,11 @@ module DateCell = {
       ? fontType
       : `dark:text-jp-gray-text_darktheme dark:text-opacity-75 ${textAlignClass} ${fontStyle}`
 
-    <AddDataAttributes attributes=[("data-date", timestamp->getFormattedDate(dateFormat))]>
+    <AddDataAttributes attributes=[("data-date", timestamp->getFormattedDate)]>
       <div className={`${wrapperClass} whitespace-nowrap`}>
         {hideTime
-          ? React.string(timestamp->getFormattedDate(dateFormat)->String.slice(~start=0, ~end=12))
-          : {React.string(`${timestamp->getFormattedDate(dateFormat)} ${selectedTimeZoneAlias}`)}}
+          ? React.string(timestamp->getFormattedDate->String.slice(~start=0, ~end=12))
+          : {React.string(`${timestamp->getFormattedDate} ${selectedTimeZoneAlias}`)}}
       </div>
     </AddDataAttributes>
   }
diff --git a/src/components/TableUtils.resi b/src/components/TableUtils.resi
index f5ed0a51f..4a2e77ec4 100644
--- a/src/components/TableUtils.resi
+++ b/src/components/TableUtils.resi
@@ -143,7 +143,7 @@ module LinkCell: {
   let make: (~data: Js.String.t, ~trimLength: int=?) => React.element
 }
 module DateCell: {
-  let getFormattedDate: (string, string) => string
+  // let getFormattedDate: (string, string) => string
   @react.component
   let make: (
     ~timestamp: string,
diff --git a/src/components/form/FileUpload.res b/src/components/form/FileUpload.res
index 608b5bb6f..582c25f16 100644
--- a/src/components/form/FileUpload.res
+++ b/src/components/form/FileUpload.res
@@ -16,9 +16,10 @@ let make = (
   ~validateUploadedFile=?,
 ) => {
   let (key, setKey) = React.useState(_ => 1)
+  let formInput = ReactFinalForm.useField(input.name ++ "_filename").input
   let fileNameInput = switch fileNameInput {
   | Some(filenameInput) => filenameInput
-  | None => ReactFinalForm.useField(input.name ++ "_filename").input
+  | None => formInput
   }
   let defaultFileName = fileNameInput.value->LogicUtils.getStringFromJson("")
 
diff --git a/src/components/form/TextInput.res b/src/components/form/TextInput.res
index b155fec85..236ba3bdb 100644
--- a/src/components/form/TextInput.res
+++ b/src/components/form/TextInput.res
@@ -39,11 +39,11 @@ let make = (
   ~removeValidationCheck=false,
 ) => {
   let showPopUp = PopUpState.useShowPopUp()
+  let {meta} = ReactFinalForm.useField(input.name)
   let isInValid = if removeValidationCheck {
     false
   } else {
     try {
-      let {meta} = ReactFinalForm.useField(input.name)
       if !meta.valid && meta.touched {
         // if there is a submission error and field value hasn't been updated after last submit, field is invalid
         // or if there is any field error, field is invalid
diff --git a/src/entities/analytics/AnalyticsUtils.res b/src/entities/analytics/AnalyticsUtils.res
index 778516a1b..8a2f190e9 100644
--- a/src/entities/analytics/AnalyticsUtils.res
+++ b/src/entities/analytics/AnalyticsUtils.res
@@ -622,8 +622,6 @@ let filterBody = (filterBodyEntity: filterBodyEntity) => {
     ~source=filterBodyEntity.source,
     (),
   )
-  ->Js.Json.object_
-  ->Js.Json.stringify
 }
 
 let deltaDate = (~fromTime: string, ~_toTime: string, ~typeTime: string) => {
diff --git a/src/hooks/AnalyticsHooks.res b/src/hooks/AnalyticsHooks.res
index 999d13c22..e0e633ad9 100644
--- a/src/hooks/AnalyticsHooks.res
+++ b/src/hooks/AnalyticsHooks.res
@@ -19,77 +19,6 @@ let handleError = (json: Js.Json.t) => {
   }
 }
 
-let useGetFiltersData = () => {
-  let (filterData, setFilterData) = React.useState(_ => None)
-  let {filterValueJson} = React.useContext(FilterContext.filterContext)
-  let startTimeVal = filterValueJson->getString("startTime", "")
-  let endTimeVal = filterValueJson->getString("endTime", "")
-  let addLogsAroundFetch = EulerAnalyticsLogUtils.useAddLogsAroundFetch()
-
-  let fetchApi = AuthHooks.useApiFetcher()
-
-  (uri, method, filterBody) => {
-    open Promise
-
-    React.useEffect3(() => {
-      setFilterData(_ => None)
-
-      if startTimeVal !== "" && endTimeVal !== "" {
-        fetchApi(
-          uri,
-          ~method_=method,
-          ~bodyStr=filterBody,
-          ~headers=[("QueryType", "Filter")]->Dict.fromArray,
-          (),
-        )
-        ->addLogsAroundFetch(~logTitle="Filter Data Api")
-        ->thenResolve(json => setFilterData(_ => json->Some))
-        ->catch(_err => resolve())
-        ->ignore
-      }
-      None
-    }, (startTimeVal, endTimeVal, filterBody))
-    filterData
-  }
-}
-
-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")]->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) => {
diff --git a/src/libraries/Recoil.res b/src/libraries/Recoil.res
index 495925db1..4d75ec19b 100644
--- a/src/libraries/Recoil.res
+++ b/src/libraries/Recoil.res
@@ -35,7 +35,7 @@ module DebugObserver = {
   }
   `)
 
-  let make: unit => React.element = () => {
+  let useMake: unit => React.element = () => {
     let snapshot = useRecoilSnapshot()
 
     React.useEffect1(() => {
diff --git a/src/libraries/SankeyHighcharts.res b/src/libraries/SankeyHighcharts.res
index 9be669d22..257183eaa 100644
--- a/src/libraries/SankeyHighcharts.res
+++ b/src/libraries/SankeyHighcharts.res
@@ -179,7 +179,7 @@ type highchartsSankey
 @module("highcharts") external highchartsModule: highcharts = "default"
 @module("highcharts/modules/sankey")
 external highchartsSankey: highcharts => unit = "default"
-let init = (data: array<(string, string, int, int, int)>, nodes) => {
+let useInit = (data: array<(string, string, int, int, int)>, nodes) => {
   highchartsSankey(highchartsModule)
   let theme = ThemeProvider.useTheme()
   let options: Js.Json.t = {
diff --git a/src/screens/HyperSwitch/Analytics/Analytics.res b/src/screens/HyperSwitch/Analytics/Analytics.res
index a96213e0d..a407fad53 100644
--- a/src/screens/HyperSwitch/Analytics/Analytics.res
+++ b/src/screens/HyperSwitch/Analytics/Analytics.res
@@ -530,7 +530,6 @@ let make = (
   }
 
   let filterValueDict = filterValueJson
-  let getFilterData = AnalyticsHooks.useGetFiltersData()
 
   let (activeTav, setActiveTab) = React.useState(_ =>
     filterValueDict->getStrArrayFromDict(
@@ -601,8 +600,29 @@ let make = (
     AnalyticsUtils.filterBody(filterBodyEntity)
   }, (startTimeVal, endTimeVal, filteredTabKeys->Array.joinWith(",")))
 
-  let filterDataOrig = getFilterData(filterUri, Fetch.Post, filterBody)
-  let filterData = filterDataOrig->Belt.Option.getWithDefault(Js.Json.object_(Dict.make()))
+  open APIUtils
+  open Promise
+  let (filterDataJson, setFilterDataJson) = React.useState(_ => None)
+  let updateDetails = useUpdateMethod()
+  let {filterValueJson} = FilterContext.filterContext->React.useContext
+  let startTimeVal = filterValueJson->getString("startTime", "")
+  let endTimeVal = filterValueJson->getString("endTime", "")
+  open HSwitchRemoteFilter
+  React.useEffect3(() => {
+    setFilterDataJson(_ => None)
+    if startTimeVal->isStringNonEmpty && endTimeVal->isStringNonEmpty {
+      try {
+        updateDetails(filterUri, filterBody->Js.Json.object_, Post)
+        ->thenResolve(json => setFilterDataJson(_ => json->Some))
+        ->catch(_ => resolve())
+        ->ignore
+      } catch {
+      | _ => ()
+      }
+    }
+    None
+  }, (startTimeVal, endTimeVal, filterBody->Js.Json.object_->Js.Json.stringify))
+  let filterData = filterDataJson->Belt.Option.getWithDefault(Dict.make()->Js.Json.object_)
 
   let activeTab = React.useMemo1(() => {
     Some(
@@ -624,7 +644,7 @@ let make = (
     ->Array.filter(item => tabKeys->Array.find(key => key == item)->Belt.Option.isSome)
     ->Array.length < 1
 
-  let topFilterUi = switch filterDataOrig {
+  let topFilterUi = switch filterDataJson {
   | Some(filterData) => {
       let filterData = switch analyticsType {
       | USER_JOURNEY => {
diff --git a/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalytics.res b/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalytics.res
index a9731008a..38ae37960 100644
--- a/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalytics.res
+++ b/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalytics.res
@@ -228,7 +228,6 @@ module SystemMetricsAnalytics = {
     ~filterUri,
     ~moduleName: string,
   ) => {
-    let getFilterData = AnalyticsHooks.useGetFiltersData()
     let {filterValueJson} = React.useContext(FilterContext.filterContext)
     let getModuleFilters = filterValueJson
     let startTimeVal = getModuleFilters->getString(startTimeFilterKey, "")
@@ -264,8 +263,29 @@ module SystemMetricsAnalytics = {
       AnalyticsUtils.filterBody(filterBodyEntity)
     }, (startTimeVal, endTimeVal, filteredTabKeys->Array.joinWith(",")))
 
-    let filterDataOrig = getFilterData(filterUri, Fetch.Post, filterBody)
-    let filterData = filterDataOrig->Belt.Option.getWithDefault(Js.Json.object_(Dict.make()))
+    open APIUtils
+    open Promise
+    let (filterDataJson, setFilterDataJson) = React.useState(_ => None)
+    let updateDetails = useUpdateMethod()
+    let {filterValueJson} = FilterContext.filterContext->React.useContext
+    let startTimeVal = filterValueJson->getString("startTime", "")
+    let endTimeVal = filterValueJson->getString("endTime", "")
+    open HSwitchRemoteFilter
+    React.useEffect3(() => {
+      setFilterDataJson(_ => None)
+      if startTimeVal->isStringNonEmpty && endTimeVal->isStringNonEmpty {
+        try {
+          updateDetails(filterUri, filterBody->Js.Json.object_, Post)
+          ->thenResolve(json => setFilterDataJson(_ => json->Some))
+          ->catch(_ => resolve())
+          ->ignore
+        } catch {
+        | _ => ()
+        }
+      }
+      None
+    }, (startTimeVal, endTimeVal, filterBody->Js.Json.object_->Js.Json.stringify))
+    let filterData = filterDataJson->Belt.Option.getWithDefault(Dict.make()->Js.Json.object_)
 
     <UIUtils.RenderIf condition={getModuleFilters->Dict.toArray->Array.length > 0}>
       {switch chartEntity1 {
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorPreview.res b/src/screens/HyperSwitch/Connectors/ConnectorPreview.res
index d99cb80c5..10c0ad00a 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorPreview.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorPreview.res
@@ -235,11 +235,11 @@ let make = (
   let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Success)
   let connectorInfo =
     connectorInfo->LogicUtils.getDictFromJsonObject->ConnectorTableUtils.getProcessorPayloadType
+  let connectorCount = ListHooks.useListCount(~entityName=CONNECTOR)
   let isFeedbackModalToBeOpen =
     featureFlagDetails.feedback &&
     !isUpdateFlow &&
-    ListHooks.useListCount(~entityName=CONNECTOR) <=
-    HSwitchUtils.feedbackModalOpenCountForConnectors
+    connectorCount <= HSwitchUtils.feedbackModalOpenCountForConnectors
   let redirectPath = switch url.path {
   | list{"payoutconnectors", _} => "/payoutconnectors"
   | _ => "/connectors"
diff --git a/src/screens/HyperSwitch/HSwitchRemoteFilter.res b/src/screens/HyperSwitch/HSwitchRemoteFilter.res
index e457ac1b8..f6ba1f6f7 100644
--- a/src/screens/HyperSwitch/HSwitchRemoteFilter.res
+++ b/src/screens/HyperSwitch/HSwitchRemoteFilter.res
@@ -107,35 +107,6 @@ let useSetInitialFilters = (~updateExistingKeys, ~startTimeFilterKey, ~endTimeFi
   }
 }
 
-let useGetFiltersData = () => {
-  open APIUtils
-  open Promise
-  open LogicUtils
-  let (filterData, setFilterData) = React.useState(_ => None)
-  let updateDetails = useUpdateMethod()
-  let {filterValueJson} = FilterContext.filterContext->React.useContext
-  let startTimeVal = filterValueJson->getString("start_time", "")
-  let endTimeVal = filterValueJson->getString("end_time", "")
-
-  (url, body) => {
-    React.useEffect3(() => {
-      setFilterData(_ => None)
-      if startTimeVal->isStringNonEmpty && endTimeVal->isStringNonEmpty {
-        try {
-          updateDetails(url, body->Js.Json.object_, Post)
-          ->thenResolve(json => setFilterData(_ => json->Some))
-          ->catch(_ => resolve())
-          ->ignore
-        } catch {
-        | _ => ()
-        }
-      }
-      None
-    }, (startTimeVal, endTimeVal, body->Js.Json.object_->Js.Json.stringify))
-    filterData
-  }
-}
-
 module SearchBarFilter = {
   @react.component
   let make = (~placeholder, ~setSearchVal, ~searchVal) => {
@@ -208,7 +179,6 @@ module RemoteTableFilters = {
       FilterContext.filterContext->React.useContext
     let defaultFilters = {""->Js.Json.string}
 
-    let getFilterData = useGetFiltersData()
     let setInitialFilters = useSetInitialFilters(
       ~updateExistingKeys,
       ~startTimeFilterKey,
@@ -232,7 +202,28 @@ module RemoteTableFilters = {
       ]->Dict.fromArray
     }, (startTimeVal, endTimeVal, filterValue))
 
-    let filterDataJson = filterUrl->getFilterData(filterBody)
+    open APIUtils
+    open Promise
+    let (filterDataJson, setFilterDataJson) = React.useState(_ => None)
+    let updateDetails = useUpdateMethod()
+    let {filterValueJson} = FilterContext.filterContext->React.useContext
+    let startTimeVal = filterValueJson->getString("start_time", "")
+    let endTimeVal = filterValueJson->getString("end_time", "")
+
+    React.useEffect3(() => {
+      setFilterDataJson(_ => None)
+      if startTimeVal->isStringNonEmpty && endTimeVal->isStringNonEmpty {
+        try {
+          updateDetails(filterUrl, filterBody->Js.Json.object_, Post)
+          ->thenResolve(json => setFilterDataJson(_ => json->Some))
+          ->catch(_ => resolve())
+          ->ignore
+        } catch {
+        | _ => ()
+        }
+      }
+      None
+    }, (startTimeVal, endTimeVal, filterBody->Js.Json.object_->Js.Json.stringify))
     let filterData = filterDataJson->Belt.Option.getWithDefault(Dict.make()->Js.Json.object_)
 
     React.useEffect1(() => {
diff --git a/src/screens/HyperSwitch/Order/OrderHooks.res b/src/screens/HyperSwitch/Order/OrderHooks.res
index 0148c0fb1..022be2960 100644
--- a/src/screens/HyperSwitch/Order/OrderHooks.res
+++ b/src/screens/HyperSwitch/Order/OrderHooks.res
@@ -1,6 +1,6 @@
 open APIUtils
 
-let getOrdersData = (orderId, refetchCounter, setScreenState) => {
+let useGetOrdersData = (orderId, refetchCounter, setScreenState) => {
   let (orderData, setOrderData) = React.useState(() => Js.Json.null)
   let fetchDetails = useGetMethod()
   let accountUrl = getURL(
diff --git a/src/screens/HyperSwitch/Order/ShowOrder.res b/src/screens/HyperSwitch/Order/ShowOrder.res
index f35f4a84a..0e492bd89 100644
--- a/src/screens/HyperSwitch/Order/ShowOrder.res
+++ b/src/screens/HyperSwitch/Order/ShowOrder.res
@@ -626,7 +626,7 @@ let make = (~id) => {
 
   let frmDetailsRef = React.useRef(Js.Nullable.null)
 
-  let orderData = OrderHooks.getOrdersData(id, refetchCounter, setScreenState)
+  let orderData = OrderHooks.useGetOrdersData(id, refetchCounter, setScreenState)
   let order = OrderEntity.itemToObjMapper(orderData->getDictFromJsonObject)
 
   let refundData =
diff --git a/src/screens/HyperSwitch/PostLoginScreen/PostLoginScreen.res b/src/screens/HyperSwitch/PostLoginScreen/PostLoginScreen.res
index 935f615bc..bfd877eb0 100644
--- a/src/screens/HyperSwitch/PostLoginScreen/PostLoginScreen.res
+++ b/src/screens/HyperSwitch/PostLoginScreen/PostLoginScreen.res
@@ -3,7 +3,8 @@ type cardFlowDirection = LEFT | RIGHT
 module SurveyComponent = {
   @react.component
   let make = (~currentStep, ~setCurrentStep, ~currentQuestionDict, ~setCarouselDirection) => {
-    let currentQuestionValue = currentQuestionDict.key->getStringValueFromForm
+    let currentQuestionValue =
+      ReactFinalForm.useField(currentQuestionDict.key).input.value->LogicUtils.getStringFromJson("")
     let isNextButtonEnabled = currentQuestionValue->String.length > 0
 
     <div className="flex flex-col gap-2 h-full ">
diff --git a/src/screens/HyperSwitch/PostLoginScreen/PostLoginUtils.res b/src/screens/HyperSwitch/PostLoginScreen/PostLoginUtils.res
index 67c384050..da7e82f8d 100644
--- a/src/screens/HyperSwitch/PostLoginScreen/PostLoginUtils.res
+++ b/src/screens/HyperSwitch/PostLoginScreen/PostLoginUtils.res
@@ -41,9 +41,6 @@ let requirementsQuestion: questionsType = {
 }
 let questionForSurvey = [userRoleQuestions, paymentProcessorQuestions, requirementsQuestion]
 
-let getStringValueFromForm = valueToExtract =>
-  ReactFinalForm.useField(valueToExtract).input.value->LogicUtils.getStringFromJson("")
-
 let getBrowswerDetailsPayload = () => {
   open CountryUtils
   let browserDetails = HSwitchUtils.getBrowswerDetails()
diff --git a/src/screens/HyperSwitch/Refunds/RefundHook.res b/src/screens/HyperSwitch/Refunds/RefundHook.res
index 101d62bab..7a65c185c 100644
--- a/src/screens/HyperSwitch/Refunds/RefundHook.res
+++ b/src/screens/HyperSwitch/Refunds/RefundHook.res
@@ -1,6 +1,6 @@
 open APIUtils
 
-let getRefundData = (refundId, setScreenState) => {
+let useGetRefundData = (refundId, setScreenState) => {
   let (refundData, setRefundData) = React.useState(() => Js.Json.null)
   let fetchDetails = useGetMethod()
   let accountUrl = getURL(~entityName=REFUNDS, ~methodType=Get, ~id=Some(refundId), ())
diff --git a/src/screens/HyperSwitch/Refunds/ShowRefund.res b/src/screens/HyperSwitch/Refunds/ShowRefund.res
index 30dc07297..2c9569f54 100644
--- a/src/screens/HyperSwitch/Refunds/ShowRefund.res
+++ b/src/screens/HyperSwitch/Refunds/ShowRefund.res
@@ -81,12 +81,12 @@ let make = (~id) => {
   )
   let (offset, setOffset) = React.useState(_ => 0)
   let (orderData, setOrdersData) = React.useState(_ => [])
-  let refundData = RefundHook.getRefundData(id, setScreenStateForRefund)
+  let refundData = RefundHook.useGetRefundData(id, setScreenStateForRefund)
 
   let paymentId =
     refundData->LogicUtils.getDictFromJsonObject->LogicUtils.getString("payment_id", "")
 
-  let orderDataForPaymentId = OrderHooks.getOrdersData(paymentId, 0, setScreenStateForOrder)
+  let orderDataForPaymentId = OrderHooks.useGetOrdersData(paymentId, 0, setScreenStateForOrder)
 
   React.useEffect1(() => {
     let jsonArray = [orderDataForPaymentId]
diff --git a/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res b/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res
index 457655a7b..0bfebfccb 100644
--- a/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res
+++ b/src/screens/HyperSwitch/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res
@@ -576,10 +576,10 @@ let getTabsForIntegration = (
 ) => {
   open Tabs
   let defaultEditorStyle = "flex flex-col gap-8 bg-white flex flex-col px-6 py-4 border !shadow-hyperswitch_box_shadow rounded-md"
-  let updateDetails = APIUtils.useUpdateMethod(~showErrorToast=false, ())
-  let {integrationDetails, setIntegrationDetails, dashboardPageState} = React.useContext(
-    GlobalProvider.defaultContext,
-  )
+  // let updateDetails = APIUtils.useUpdateMethod(~showErrorToast=false, ())
+  // let {integrationDetails, setIntegrationDetails, dashboardPageState} = React.useContext(
+  //   GlobalProvider.defaultContext,
+  // )
   switch currentRoute {
   | MigrateFromStripe => [
       {
@@ -862,63 +862,63 @@ let getTabsForIntegration = (
             </div>
           </div>,
       },
-      {
-        title: "3. Manage",
-        renderContent: () => {
-          let skipAndContinue = async () => {
-            try {
-              let url = APIUtils.getURL(~entityName=INTEGRATION_DETAILS, ~methodType=Post, ())
-              let metaDataDict =
-                Dict.fromArray([("is_skip", true->Js.Json.boolean)])->Js.Json.object_
-              let body = HSwitchUtils.constructOnboardingBody(
-                ~dashboardPageState,
-                ~integrationDetails,
-                ~is_done=false,
-                ~metadata=metaDataDict,
-                (),
-              )
-              let _ = await updateDetails(url, body, Post)
-              setIntegrationDetails(_ => body->ProviderHelper.getIntegrationDetails)
-            } catch {
-            | _ => ()
-            }
-          }
-          let skipOnboarding = async path => {
-            let _ = await skipAndContinue()
-            Window._open(path)
-          }
-          <div>
-            <TabsContentWrapper currentRoute tabIndex=7>
-              <div onClick={_ => skipOnboarding(`/connectors`)->ignore} className="cursor-pointer">
-                <div className="pointer-events-none">
-                  <ConnectorList.NewProcessorCards
-                    configuredConnectors=[] showIcons=true isPayoutFlow=false
-                  />
-                </div>
-              </div>
-            </TabsContentWrapper>
-            <TabsContentWrapper currentRoute tabIndex=8>
-              <div onClick={_ => skipOnboarding(`/routing`)->ignore} className="cursor-pointer">
-                <div className="pointer-events-none">
-                  <RoutingStack remainingPath={list{}} previewOnly=true />
-                </div>
-              </div>
-            </TabsContentWrapper>
-            <TabsContentWrapper currentRoute tabIndex=9>
-              <div onClick={_ => skipOnboarding(`/payments`)->ignore} className="cursor-pointer">
-                <div className="pointer-events-none overflow-hidden">
-                  <Orders previewOnly=true />
-                </div>
-              </div>
-            </TabsContentWrapper>
-            // <MilestoneAchievedCard
-            //   headingModule="WooCommerce integration!"
-            //   subText="Test your integration by placing an order and completing a payment on your store!"
-            //   customBackButtonRoute=""
-            // />
-          </div>
-        },
-      },
+      // {
+      //   title: "3. Manage",
+      //   renderContent: () => {
+      //     let skipAndContinue = async () => {
+      //       try {
+      //         let url = APIUtils.getURL(~entityName=INTEGRATION_DETAILS, ~methodType=Post, ())
+      //         let metaDataDict =
+      //           Dict.fromArray([("is_skip", true->Js.Json.boolean)])->Js.Json.object_
+      //         let body = HSwitchUtils.constructOnboardingBody(
+      //           ~dashboardPageState,
+      //           ~integrationDetails,
+      //           ~is_done=false,
+      //           ~metadata=metaDataDict,
+      //           (),
+      //         )
+      //         let _ = await updateDetails(url, body, Post)
+      //         setIntegrationDetails(_ => body->ProviderHelper.getIntegrationDetails)
+      //       } catch {
+      //       | _ => ()
+      //       }
+      //     }
+      //     let skipOnboarding = async path => {
+      //       let _ = await skipAndContinue()
+      //       Window._open(path)
+      //     }
+      //     <div>
+      //       <TabsContentWrapper currentRoute tabIndex=7>
+      //         <div onClick={_ => skipOnboarding(`/connectors`)->ignore} className="cursor-pointer">
+      //           <div className="pointer-events-none">
+      //             <ConnectorList.NewProcessorCards
+      //               configuredConnectors=[] showIcons=true isPayoutFlow=false
+      //             />
+      //           </div>
+      //         </div>
+      //       </TabsContentWrapper>
+      //       <TabsContentWrapper currentRoute tabIndex=8>
+      //         <div onClick={_ => skipOnboarding(`/routing`)->ignore} className="cursor-pointer">
+      //           <div className="pointer-events-none">
+      //             <RoutingStack remainingPath={list{}} previewOnly=true />
+      //           </div>
+      //         </div>
+      //       </TabsContentWrapper>
+      //       <TabsContentWrapper currentRoute tabIndex=9>
+      //         <div onClick={_ => skipOnboarding(`/payments`)->ignore} className="cursor-pointer">
+      //           <div className="pointer-events-none overflow-hidden">
+      //             <Orders previewOnly=true />
+      //           </div>
+      //         </div>
+      //       </TabsContentWrapper>
+      //       // <MilestoneAchievedCard
+      //       //   headingModule="WooCommerce integration!"
+      //       //   subText="Test your integration by placing an order and completing a payment on your store!"
+      //       //   customBackButtonRoute=""
+      //       // />
+      //     </div>
+      //   },
+      // },
     ]
   | _ => []
   }
diff --git a/src/screens/HyperSwitch/UserManagement/InviteUsers.res b/src/screens/HyperSwitch/UserManagement/InviteUsers.res
index 04a50e41e..9823d77ac 100644
--- a/src/screens/HyperSwitch/UserManagement/InviteUsers.res
+++ b/src/screens/HyperSwitch/UserManagement/InviteUsers.res
@@ -6,12 +6,12 @@ module InviteEmailForm = {
     open APIUtils
     let fetchDetails = useGetMethod()
     let (roleListData, setRoleListData) = React.useState(_ => [])
-    let getArrayFromForm = key => ReactFinalForm.useField(key).input.value->getArrayFromJson([])
 
-    let emailList = `emailList`->getArrayFromForm->Array.joinWith(",")
+    let emailList =
+      ReactFinalForm.useField("emailList").input.value->getArrayFromJson([])->Array.joinWith(",")
     let role =
-      `roleType`
-      ->getArrayFromForm
+      ReactFinalForm.useField(`roleType`).input.value
+      ->getArrayFromJson([])
       ->LogicUtils.getValueFromArray(0, ""->Js.Json.string)
       ->getStringFromJson("")
 

From 7bc7226cf2ee0c70b8dc49c73de91020c2f9b8e7 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Mon, 8 Jan 2024 13:32:19 +0530
Subject: [PATCH 02/14] fix: add merchant fix (#184)

---
 src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res b/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res
index 61291bf3f..5a5bd3c5b 100644
--- a/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res
+++ b/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res
@@ -96,7 +96,7 @@ module AddNewMerchantButton = {
       <Menu.Item>
         {props =>
           <button
-            onClick={_ => setShowModal(_ => false)}
+            onClick={_ => setShowModal(_ => true)}
             className={
               let activeClasses = if props["active"] {
                 "group flex rounded-md items-center px-2 py-2 text-sm bg-gray-100 dark:bg-black"

From 1bf8cdb736926df12c049214851abf7e0012f8b0 Mon Sep 17 00:00:00 2001
From: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 8 Jan 2024 08:10:17 +0000
Subject: [PATCH 03/14] chore(version): v1.19.5

---
 CHANGELOG.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 891750468..e5e12eb05 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,21 @@ All notable changes to this project will be documented in this file. See [conven
 
 - - -
 
+## 1.19.5 (2024-01-08)
+
+### Bug Fixes
+
+- Add merchant fix ([#184](https://github.com/juspay/hyperswitch-control-center/pull/184)) ([`7bc7226`](https://github.com/juspay/hyperswitch-control-center/commit/7bc7226cf2ee0c70b8dc49c73de91020c2f9b8e7))
+
+### Miscellaneous Tasks
+
+- Add eslint hook ([#166](https://github.com/juspay/hyperswitch-control-center/pull/166)) ([`4a10a94`](https://github.com/juspay/hyperswitch-control-center/commit/4a10a94728ec6d62897e3299c2c924301ad86f0f))
+
+**Full Changelog:** [`v1.19.4...v1.19.5`](https://github.com/juspay/hyperswitch-control-center/compare/v1.19.4...v1.19.5)
+
+- - -
+
+
 ## 1.19.4 (2024-01-05)
 
 ### Bug Fixes

From fd648de4e7cc0fde72b7316f9679abc248e0118f Mon Sep 17 00:00:00 2001
From: Sagar naik <sagar.naik@juspay.in>
Date: Mon, 8 Jan 2024 14:36:47 +0530
Subject: [PATCH 04/14] feat: added new filters for payments (#172)

Co-authored-by: Pritish Budhiraja <1805317@kiit.ac.in>
Co-authored-by: Jeeva Ramachandran <120017870+JeevaRamu0104@users.noreply.github.com>
---
 src/screens/HyperSwitch/HSwitchRemoteFilter.res | 6 +-----
 src/screens/HyperSwitch/Order/OrderEntity.res   | 1 +
 src/screens/HyperSwitch/Order/OrderUIUtils.res  | 1 -
 3 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/screens/HyperSwitch/HSwitchRemoteFilter.res b/src/screens/HyperSwitch/HSwitchRemoteFilter.res
index f6ba1f6f7..0c05c2457 100644
--- a/src/screens/HyperSwitch/HSwitchRemoteFilter.res
+++ b/src/screens/HyperSwitch/HSwitchRemoteFilter.res
@@ -239,11 +239,7 @@ module RemoteTableFilters = {
       remoteFilters->Array.filter((item: EntityType.initialFilters<'t>) =>
         item.localFilter->Js.Option.isSome
       )
-    let remoteOptions =
-      filterData
-      ->getFilterFields
-      ->Array.filter(item => item.localFilter->Js.Option.isNone)
-      ->Array.filterWithIndex((_item, index) => index > 3)
+    let remoteOptions = []
 
     let clearFilters = () => {
       filterData->getDictFromJsonObject->Dict.keysToArray->removeKeys
diff --git a/src/screens/HyperSwitch/Order/OrderEntity.res b/src/screens/HyperSwitch/Order/OrderEntity.res
index 4441636db..d00bdd4f0 100644
--- a/src/screens/HyperSwitch/Order/OrderEntity.res
+++ b/src/screens/HyperSwitch/Order/OrderEntity.res
@@ -315,6 +315,7 @@ let defaultColumns: array<colType> = [
   Amount,
   Status,
   PaymentMethod,
+  PaymentMethodType,
   Created,
 ]
 
diff --git a/src/screens/HyperSwitch/Order/OrderUIUtils.res b/src/screens/HyperSwitch/Order/OrderUIUtils.res
index 42823686d..0465df385 100644
--- a/src/screens/HyperSwitch/Order/OrderUIUtils.res
+++ b/src/screens/HyperSwitch/Order/OrderUIUtils.res
@@ -123,7 +123,6 @@ let initialFilters = json => {
 
   filterDict
   ->Dict.keysToArray
-  ->Array.filterWithIndex((_item, index) => index <= 3)
   ->Array.map((key): EntityType.initialFilters<'t> => {
     let title = `Select ${key->snakeToTitle}`
     let values = filterDict->getArrayFromDict(key, [])->getStrArrayFromJsonArray

From f784ef27762098645886396e5043c219e566fa91 Mon Sep 17 00:00:00 2001
From: Riddhiagrawal001 <50551695+Riddhiagrawal001@users.noreply.github.com>
Date: Mon, 8 Jan 2024 16:30:49 +0530
Subject: [PATCH 05/14] fix: connector integration status and disabled ui
 change (#192)

---
 .../Connectors/ConnectorPreview.res           | 22 +++++++++----------
 .../Connectors/ConnectorTableUtils.res        | 20 +++++++++++++----
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/screens/HyperSwitch/Connectors/ConnectorPreview.res b/src/screens/HyperSwitch/Connectors/ConnectorPreview.res
index 10c0ad00a..96f99b343 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorPreview.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorPreview.res
@@ -136,17 +136,11 @@ module ConnectorSummaryGrid = {
       connectorDetails,
     )
 
-    let connectorStatusStyle = connectorStatus =>
-      switch connectorStatus {
-      | "active" => "border bg-green-600 bg-opacity-40 border-green-700"
-      | _ => "border bg-red-600 bg-opacity-40 border-red-400"
-      }
-
     <div className="p-2 md:px-10">
       <div className="grid grid-cols-4 my-12">
         <h4 className="text-lg font-semibold"> {"Integration status"->React.string} </h4>
         <div
-          className={`px-4 py-2 rounded-full w-fit text-black font-medium text-sm ${connectorInfo.status->connectorStatusStyle}`}>
+          className={`text-black font-semibold text-sm ${connectorInfo.status->ConnectorTableUtils.connectorStatusStyle}`}>
           {connectorInfo.status->String.toUpperCase->React.string}
         </div>
       </div>
@@ -263,6 +257,12 @@ let make = (
     }
   }
 
+  let connectorStatusStyle = connectorStatus =>
+    switch connectorStatus {
+    | false => "border bg-green-600 bg-opacity-40 border-green-700 text-green-800"
+    | _ => "border bg-red-600 bg-opacity-40 border-red-400 text-red-500"
+    }
+
   <PageLoaderWrapper screenState>
     <div>
       <div className="flex justify-between border-b p-2 md:px-10 md:py-6">
@@ -278,12 +278,10 @@ let make = (
           {switch currentStep {
           | Preview =>
             <div className="flex gap-6 items-center">
-              <p
-                className={`text-fs-13 font-bold ${isConnectorDisabled
-                    ? "text-red-800"
-                    : "text-green-700"}`}>
+              <div
+                className={`px-4 py-2 rounded-full w-fit font-medium text-sm !text-black ${isConnectorDisabled->connectorStatusStyle}`}>
                 {(isConnectorDisabled ? "DISABLED" : "ENABLED")->React.string}
-              </p>
+              </div>
               <UIUtils.RenderIf condition={showMenuOption}>
                 <MenuOption setCurrentStep disableConnector isConnectorDisabled />
               </UIUtils.RenderIf>
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorTableUtils.res b/src/screens/HyperSwitch/Connectors/ConnectorTableUtils.res
index f06d37295..2caac21b0 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorTableUtils.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorTableUtils.res
@@ -164,17 +164,29 @@ let getHeading = colType => {
     Table.makeHeaderInfo(~key="payment_methods", ~title="Payment Methods", ~showSort=false, ())
   }
 }
+let connectorStatusStyle = connectorStatus =>
+  switch connectorStatus->String.toLowerCase {
+  | "active" => "text-green-700"
+  | _ => "text-grey-800 opacity-50"
+  }
 
 let getCell = (connector: connectorPayload, colType): Table.cell => {
   switch colType {
   | Name => Text(connector.connector_name->LogicUtils.getTitle)
   | TestMode => Text(connector.test_mode ? "True" : "False")
-  | Disabled => Text(connector.disabled ? "True" : "False")
-  | Status =>
+  | Disabled =>
     Label({
-      title: connector.status->String.toUpperCase,
-      color: connector.status === "inactive" ? LabelRed : LabelGreen,
+      title: connector.disabled ? "DISABLED" : "ENABLED",
+      color: connector.disabled ? LabelRed : LabelGreen,
     })
+
+  | Status =>
+    Table.CustomCell(
+      <div className={`font-semibold ${connector.status->connectorStatusStyle}`}>
+        {connector.status->String.toUpperCase->React.string}
+      </div>,
+      "",
+    )
   | ProfileId => Text(connector.profile_id)
   | ProfileName =>
     Table.CustomCell(<MerchantAccountUtils.BusinessProfile profile_id={connector.profile_id} />, "")

From 71934b58d459ca979d7d150c41478e05b205ebcc Mon Sep 17 00:00:00 2001
From: Sagar naik <sagar.naik@juspay.in>
Date: Mon, 8 Jan 2024 18:55:34 +0530
Subject: [PATCH 06/14] chore: analytics files Js.Dict -> Dict migration (#194)

---
 .../CustomCharts/HighchartTimeSeriesChart.res    |  2 +-
 src/components/CustomCharts/LineChartUtils.res   |  2 +-
 src/components/DynamicChart.res                  |  2 +-
 src/components/DynamicSingleStat.res             |  4 ++--
 src/components/DynamicTable.res                  |  2 +-
 src/components/HSwitchSingleStatWidget.res       |  4 ++--
 src/components/RemoteFiltersUtils.res            |  2 +-
 src/components/SelectBox.res                     |  2 +-
 src/components/SelectBox.resi                    |  2 +-
 src/components/SingleStats/SingleStatEntity.res  |  2 +-
 src/context/FilterContext.res                    | 16 ++++++++--------
 src/context/SingleStatContext.res                |  8 ++++----
 src/entities/analytics/AnalyticsUtils.res        |  4 ++--
 src/hooks/AnalyticsHooks.res                     |  4 ++--
 src/hooks/QueryHook.res                          |  2 +-
 src/libraries/Highcharts.res                     |  4 ++--
 src/screens/HyperSwitch/Analytics/Analytics.res  |  4 ++--
 .../PaymentsAnalytics/PaymentAnalyticsEntity.res |  2 +-
 .../SystemMetrics/SystemMetricsAnalytics.res     |  2 +-
 src/utils/TimeZoneConversion.res                 |  4 ++--
 20 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/src/components/CustomCharts/HighchartTimeSeriesChart.res b/src/components/CustomCharts/HighchartTimeSeriesChart.res
index 7686592e6..e3d47e37a 100644
--- a/src/components/CustomCharts/HighchartTimeSeriesChart.res
+++ b/src/components/CustomCharts/HighchartTimeSeriesChart.res
@@ -803,7 +803,7 @@ module LegendItem = {
 
 module RenderMultiDimensionalChart = {
   type config = {
-    chartDictData: Js.Dict.t<Belt.Array.t<Js.Json.t>>,
+    chartDictData: Dict.t<Belt.Array.t<Js.Json.t>>,
     class: string,
     selectedMetrics: LineChartUtils.metricsConfig,
     groupBy: string,
diff --git a/src/components/CustomCharts/LineChartUtils.res b/src/components/CustomCharts/LineChartUtils.res
index 689292343..8c54034ac 100644
--- a/src/components/CustomCharts/LineChartUtils.res
+++ b/src/components/CustomCharts/LineChartUtils.res
@@ -752,7 +752,7 @@ let getTooltipHTML = (metrics, data, onCursorName) => {
 
 let tooltipFormatter = (
   metrics: metricsConfig,
-  xAxisMapInfo: Js.Dict.t<Js.Array2.t<(Js_string.t, string, float, option<float>)>>,
+  xAxisMapInfo: Dict.t<Js.Array2.t<(Js_string.t, string, float, option<float>)>>,
   groupKey: string,
 ) =>
   @this
diff --git a/src/components/DynamicChart.res b/src/components/DynamicChart.res
index c8fa6137c..bcca064e0 100644
--- a/src/components/DynamicChart.res
+++ b/src/components/DynamicChart.res
@@ -81,7 +81,7 @@ let getLegendBody = (chartEntity: chartEntity) => {
   ->Js.Json.stringify
 }
 
-type chartUrl = String(string) | Func(Js.Dict.t<Js.Json.t> => string)
+type chartUrl = String(string) | Func(Dict.t<Js.Json.t> => string)
 type chartType = Line | Bar | SemiDonut | HorizontalBar | Funnel
 
 type uriConfig = {
diff --git a/src/components/DynamicSingleStat.res b/src/components/DynamicSingleStat.res
index 98e77ab10..a585c2159 100644
--- a/src/components/DynamicSingleStat.res
+++ b/src/components/DynamicSingleStat.res
@@ -48,8 +48,8 @@ type entityType<'colType, 't, 't2> = {
   source?: string,
   customFilterKey?: string,
   enableLoaders?: bool,
-  statSentiment?: Js.Dict.t<AnalyticsUtils.statSentiment>,
-  statThreshold?: Js.Dict.t<float>,
+  statSentiment?: Dict.t<AnalyticsUtils.statSentiment>,
+  statThreshold?: Dict.t<float>,
 }
 type timeType = {startTime: string, endTime: string}
 // this will be removed once filter refactor is merged
diff --git a/src/components/DynamicTable.res b/src/components/DynamicTable.res
index c712312c1..1be4dc3cb 100644
--- a/src/components/DynamicTable.res
+++ b/src/components/DynamicTable.res
@@ -96,7 +96,7 @@ let make = (
   ~disableURIdecode=false,
   ~mergeBodytoRemoteFilterDict=false,
   ~defaultKeysAllowed=?,
-  ~urlKeyTypeDict: Js.Dict.t<RemoteFiltersUtils.urlKEyType>=Dict.make(),
+  ~urlKeyTypeDict: Dict.t<RemoteFiltersUtils.urlKEyType>=Dict.make(),
 ) => {
   let {
     getObjects,
diff --git a/src/components/HSwitchSingleStatWidget.res b/src/components/HSwitchSingleStatWidget.res
index b3ccb9a96..78c280bae 100644
--- a/src/components/HSwitchSingleStatWidget.res
+++ b/src/components/HSwitchSingleStatWidget.res
@@ -13,8 +13,8 @@ let make = (
   ~loaderType: AnalyticsUtils.loaderType=Shimmer,
   ~statChartColor: statChartColor=#blue,
   ~filterNullVals: bool=false,
-  ~statSentiment: Js.Dict.t<AnalyticsUtils.statSentiment>=Dict.make(),
-  ~statThreshold: Js.Dict.t<float>=Dict.make(),
+  ~statSentiment: Dict.t<AnalyticsUtils.statSentiment>=Dict.make(),
+  ~statThreshold: Dict.t<float>=Dict.make(),
   ~isHomePage=false,
 ) => {
   open Identity
diff --git a/src/components/RemoteFiltersUtils.res b/src/components/RemoteFiltersUtils.res
index f807bc019..62e5ffd1c 100644
--- a/src/components/RemoteFiltersUtils.res
+++ b/src/components/RemoteFiltersUtils.res
@@ -226,7 +226,7 @@ let getLocalFiltersData = (
   ~resArr: Js.Array2.t<Js.Nullable.t<'t>>,
   ~searchParams,
   ~initialFilters: array<EntityType.initialFilters<'t>>,
-  ~dateRangeFilterDict: Js.Dict.t<Js.Json.t>,
+  ~dateRangeFilterDict: Dict.t<Js.Json.t>,
   ~options: array<EntityType.optionType<'t>>,
   (),
 ) => {
diff --git a/src/components/SelectBox.res b/src/components/SelectBox.res
index 00a4207c3..ee1b219d8 100644
--- a/src/components/SelectBox.res
+++ b/src/components/SelectBox.res
@@ -1,6 +1,6 @@
 type retType = CheckBox(array<string>) | Radiobox(string)
 
-external toDict: 'a => Js.Dict.t<'t> = "%identity"
+external toDict: 'a => Dict.t<'t> = "%identity"
 @send external getClientRects: Dom.element => Dom.domRect = "getClientRects"
 @send external focus: Dom.element => unit = "focus"
 
diff --git a/src/components/SelectBox.resi b/src/components/SelectBox.resi
index 95229bf20..6cd2a5f7f 100644
--- a/src/components/SelectBox.resi
+++ b/src/components/SelectBox.resi
@@ -1,5 +1,5 @@
 type retType = CheckBox(array<string>) | Radiobox(string)
-external toDict: 'a => Js.Dict.t<'t> = "%identity"
+external toDict: 'a => Dict.t<'t> = "%identity"
 @send external getClientRects: Dom.element => Dom.domRect = "getClientRects"
 @send external focus: Dom.element => unit = "focus"
 @val @scope("window") external windowInnerHeight: int = "innerHeight"
diff --git a/src/components/SingleStats/SingleStatEntity.res b/src/components/SingleStats/SingleStatEntity.res
index b6df76251..e6e213124 100644
--- a/src/components/SingleStats/SingleStatEntity.res
+++ b/src/components/SingleStats/SingleStatEntity.res
@@ -14,7 +14,7 @@ type dataFetcherObj<'a> = {
   metrics: 'a, // metrics are the stats i.e total volume, success rate etc.
   bodyMaker: (string, filterConfig) => string, // to make the single stat body
   timeSeriedBodyMaker: (string, filterConfig) => string, // to make the single stat timeseries body
-  transaformer: (string, Js.Json.t) => Js.Dict.t<Js.Json.t>, // just in case if we are getting data from multiple places and we wanted to change the key or something so that we can identify it differently
+  transaformer: (string, Js.Json.t) => Dict.t<Js.Json.t>, // just in case if we are getting data from multiple places and we wanted to change the key or something so that we can identify it differently
   url: string, // url from where data need to be fetched
   domain: string,
   timeColumn: string,
diff --git a/src/context/FilterContext.res b/src/context/FilterContext.res
index 48ed0d6ed..355099271 100644
--- a/src/context/FilterContext.res
+++ b/src/context/FilterContext.res
@@ -8,19 +8,19 @@ type sessionStorage = {
 
 type filterUpdater = {
   query: string,
-  filterValue: Js.Dict.t<string>,
-  updateExistingKeys: Js.Dict.t<string> => unit,
+  filterValue: Dict.t<string>,
+  updateExistingKeys: Dict.t<string> => unit,
   removeKeys: array<string> => unit,
-  filterValueJson: Js.Dict.t<Js.Json.t>,
+  filterValueJson: Dict.t<Js.Json.t>,
   reset: unit => unit,
 }
 
 let filterUpdater = {
   query: "",
-  filterValue: Js.Dict.empty(),
+  filterValue: Dict.make(),
   updateExistingKeys: _dict => (),
   removeKeys: _arr => (),
-  filterValueJson: Js.Dict.empty(),
+  filterValueJson: Dict.make(),
   reset: () => (),
 }
 
@@ -39,7 +39,7 @@ let make = (~index: string, ~children, ~disableSessionStorage=false) => {
   let (filterDict, setfilterDict) = React.useState(_ => searcParamsToDict)
 
   let updateFilter = React.useMemo2(() => {
-    let updateFilter = (dict: Js.Dict.t<string>) => {
+    let updateFilter = (dict: Dict.t<string>) => {
       setfilterDict(prev => {
         let prevDictArr =
           prev
@@ -47,7 +47,7 @@ let make = (~index: string, ~children, ~disableSessionStorage=false) => {
           ->Belt.Array.keepMap(
             item => {
               let (key, value) = item
-              switch dict->Js.Dict.get(key) {
+              switch dict->Dict.get(key) {
               | Some(_) => None
               | None => !(value->isEmptyString) ? Some(item) : None
               }
@@ -75,7 +75,7 @@ let make = (~index: string, ~children, ~disableSessionStorage=false) => {
     }
 
     let reset = () => {
-      let dict = Js.Dict.empty()
+      let dict = Dict.make()
       setfilterDict(_ => dict)
       query := dict->FilterUtils.parseFilterDict
     }
diff --git a/src/context/SingleStatContext.res b/src/context/SingleStatContext.res
index d9483e66c..5311099b2 100644
--- a/src/context/SingleStatContext.res
+++ b/src/context/SingleStatContext.res
@@ -6,10 +6,10 @@ open LogicUtils
 open AnalyticsNewUtils
 
 type singleStatComponent = {
-  singleStatData: option<Js.Dict.t<dataState<Js.Json.t>>>,
-  singleStatTimeSeries: option<Js.Dict.t<dataState<Js.Json.t>>>,
-  singleStatDelta: option<Js.Dict.t<dataState<Js.Json.t>>>,
-  singleStatLoader: Js.Dict.t<AnalyticsUtils.loaderType>,
+  singleStatData: option<Dict.t<dataState<Js.Json.t>>>,
+  singleStatTimeSeries: option<Dict.t<dataState<Js.Json.t>>>,
+  singleStatDelta: option<Dict.t<dataState<Js.Json.t>>>,
+  singleStatLoader: Dict.t<AnalyticsUtils.loaderType>,
   singleStatIsVisible: (bool => bool) => unit,
 }
 
diff --git a/src/entities/analytics/AnalyticsUtils.res b/src/entities/analytics/AnalyticsUtils.res
index 8a2f190e9..7366afb8e 100644
--- a/src/entities/analytics/AnalyticsUtils.res
+++ b/src/entities/analytics/AnalyticsUtils.res
@@ -155,7 +155,7 @@ let dummyTableApiBody = {
   source: "",
 }
 type newApiBodyEntity = {
-  timeObj: Js.Dict.t<Js.Json.t>,
+  timeObj: Dict.t<Js.Json.t>,
   metric?: string,
   groupBy?: Js.Array2.t<Js_string.t>,
   granularityConfig?: (int, string),
@@ -511,7 +511,7 @@ let getFilterRequestBody = (
   ~source: string="BATCH",
   (),
 ) => {
-  let body: Js.Dict.t<Js.Json.t> = Dict.make()
+  let body: Dict.t<Js.Json.t> = Dict.make()
   let timeRange = Dict.make()
   let timeSeries = Dict.make()
 
diff --git a/src/hooks/AnalyticsHooks.res b/src/hooks/AnalyticsHooks.res
index e0e633ad9..5f693c64c 100644
--- a/src/hooks/AnalyticsHooks.res
+++ b/src/hooks/AnalyticsHooks.res
@@ -47,7 +47,7 @@ let useAnalyticsFetch = () => {
 type tabsetHookType = {
   setActiveTab: string => unit,
   activeTab: option<array<string>>,
-  updateUrlWithPrefix: Js.Dict.t<string> => unit,
+  updateUrlWithPrefix: Dict.t<string> => unit,
 }
 
 let useTabHooks = (~moduleName, ~segmentsOptions) => {
@@ -67,7 +67,7 @@ let useTabHooks = (~moduleName, ~segmentsOptions) => {
   }, [setActiveTab])
 
   let updateUrlWithPrefix = React.useMemo1(() => {
-    (dict: Js.Dict.t<string>) => {
+    (dict: Dict.t<string>) => {
       let currentDict =
         dict
         ->Dict.toArray
diff --git a/src/hooks/QueryHook.res b/src/hooks/QueryHook.res
index 4876fc565..b9b25c849 100644
--- a/src/hooks/QueryHook.res
+++ b/src/hooks/QueryHook.res
@@ -1,7 +1,7 @@
 let parseUrlIntoDict = queryUrl => {
   let arr = queryUrl->Js.Global.decodeURI->String.split("&")->Array.map(e => e->String.split("="))
   let safeArray = arr->Array.filter(e => e->Array.length == 2)
-  let dict: Js.Dict.t<string> = Dict.make()
+  let dict: Dict.t<string> = Dict.make()
   safeArray->Array.forEach(e => {
     dict->Dict.set(
       e->Belt.Array.get(0)->Belt.Option.getWithDefault(""),
diff --git a/src/libraries/Highcharts.res b/src/libraries/Highcharts.res
index 9cc931d03..53a276d0b 100644
--- a/src/libraries/Highcharts.res
+++ b/src/libraries/Highcharts.res
@@ -56,7 +56,7 @@ type tick = {
   gridLine: gridLine,
   pos: float,
 }
-type eventYaxis = {ticks: Js.Dict.t<gridLine>}
+type eventYaxis = {ticks: Dict.t<gridLine>}
 type chartEventOnload = {yAxis: array<eventYaxis>}
 type chartEvent = {render: option<Js_OO.Callback.arity1<chartEventOnload => unit>>}
 type chart = {
@@ -300,7 +300,7 @@ type highcharts
 @module("highcharts") external highchartsModule: highcharts = "default"
 
 @module("highcharts") @scope("default")
-external objectEach: (Js.Dict.t<gridLine>, tick => unit) => unit = "objectEach"
+external objectEach: (Dict.t<gridLine>, tick => unit) => unit = "objectEach"
 
 @module("highcharts/modules/treemap") external treeMapModule: highcharts => unit = "default"
 @module("highcharts/modules/sankey") external sankeyChartModule: highcharts => unit = "default"
diff --git a/src/screens/HyperSwitch/Analytics/Analytics.res b/src/screens/HyperSwitch/Analytics/Analytics.res
index a407fad53..00c99e32d 100644
--- a/src/screens/HyperSwitch/Analytics/Analytics.res
+++ b/src/screens/HyperSwitch/Analytics/Analytics.res
@@ -409,7 +409,7 @@ module TabDetails = {
     >,
     ~tableGlobalFilter: option<(array<Js.Nullable.t<'t>>, Js.Json.t) => array<Js.Nullable.t<'t>>>,
     ~moduleName,
-    ~updateUrl: Js.Dict.t<string> => unit,
+    ~updateUrl: Dict.t<string> => unit,
     ~weeklyTableMetricsCols,
   ) => {
     open AnalyticsTypes
@@ -548,7 +548,7 @@ let make = (
 
   let updateUrlWithPrefix = React.useMemo1(() => {
     (chartType: string) => {
-      (dict: Js.Dict.t<string>) => {
+      (dict: Dict.t<string>) => {
         let prev = filterValue
 
         let prevDictArr =
diff --git a/src/screens/HyperSwitch/Analytics/PaymentsAnalytics/PaymentAnalyticsEntity.res b/src/screens/HyperSwitch/Analytics/PaymentsAnalytics/PaymentAnalyticsEntity.res
index d277ea4dd..f4e5dbf19 100644
--- a/src/screens/HyperSwitch/Analytics/PaymentsAnalytics/PaymentAnalyticsEntity.res
+++ b/src/screens/HyperSwitch/Analytics/PaymentsAnalytics/PaymentAnalyticsEntity.res
@@ -72,7 +72,7 @@ let distribution =
   ->Dict.fromArray
   ->Js.Json.object_
 
-let tableItemToObjMapper: Js.Dict.t<Js.Json.t> => paymentTableType = dict => {
+let tableItemToObjMapper: Dict.t<Js.Json.t> => paymentTableType = dict => {
   let parseErrorReasons = dict => {
     dict
     ->getArrayFromDict(PaymentErrorMessage->colMapper, [])
diff --git a/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalytics.res b/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalytics.res
index 38ae37960..e9a382017 100644
--- a/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalytics.res
+++ b/src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalytics.res
@@ -128,7 +128,7 @@ module HSiwtchPaymentConfirmLatency = {
       ->getJsonObjectFromDict("queryData")
       ->getArrayFromJson([])
       ->Belt.Array.get(0)
-      ->Belt.Option.getWithDefault(Js.Json.object_(Js.Dict.empty()))
+      ->Belt.Option.getWithDefault(Js.Json.object_(Dict.make()))
       ->getDictFromJsonObject
       ->getInt("latency", 0)
     }
diff --git a/src/utils/TimeZoneConversion.res b/src/utils/TimeZoneConversion.res
index 3980c2261..5491ba6fa 100644
--- a/src/utils/TimeZoneConversion.res
+++ b/src/utils/TimeZoneConversion.res
@@ -10,8 +10,8 @@ type dateTime = {
   second: float,
 }
 
-let timezoneOffset = Js.Dict.fromList(list{("IST", "+05:30"), ("GMT", "+00:00")})
-let timezoneLocation = Js.Dict.fromList(list{("IST", "Asia/Kolkata"), ("GMT", "UTC")})
+let timezoneOffset = Dict.fromArray([("IST", "+05:30"), ("GMT", "+00:00")])
+let timezoneLocation = Dict.fromArray([("IST", "Asia/Kolkata"), ("GMT", "UTC")])
 
 let formatter = str => {
   String.length(str) == 0 ? "00" : String.length(str) == 1 ? `0${str}` : str

From 47cc5ede71736e1c6ecd5045b6f3b4c4b829436b Mon Sep 17 00:00:00 2001
From: Lokesh Jain <56452497+jainlokesh318@users.noreply.github.com>
Date: Mon, 8 Jan 2024 19:41:10 +0530
Subject: [PATCH 07/14] fix: revert useField in TextInput (#199)

Co-authored-by: Jeeva Ramachandran <jeeva.ramachandran@juspay.in>
---
 .github/workflows/eslint-check.yml | 12 ++++++------
 src/components/form/TextInput.res  |  3 ++-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/.github/workflows/eslint-check.yml b/.github/workflows/eslint-check.yml
index 3d24b5ebe..5d7c8b3f5 100644
--- a/.github/workflows/eslint-check.yml
+++ b/.github/workflows/eslint-check.yml
@@ -21,10 +21,10 @@ jobs:
       - name: Install dependencies
         run: npm install --force
 
-      - name: Build Rescript
-        run: npm run re:build
+      # - name: Build Rescript
+      #   run: npm run re:build
 
-      - name: Run ESLint
-        run: npm run lint:hooks
-        env:
-          CI: true
+      # - name: Run ESLint
+      #   run: npm run lint:hooks
+      #   env:
+      #     CI: true
diff --git a/src/components/form/TextInput.res b/src/components/form/TextInput.res
index 236ba3bdb..d70855dd1 100644
--- a/src/components/form/TextInput.res
+++ b/src/components/form/TextInput.res
@@ -39,11 +39,12 @@ let make = (
   ~removeValidationCheck=false,
 ) => {
   let showPopUp = PopUpState.useShowPopUp()
-  let {meta} = ReactFinalForm.useField(input.name)
+
   let isInValid = if removeValidationCheck {
     false
   } else {
     try {
+      let {meta} = ReactFinalForm.useField(input.name)
       if !meta.valid && meta.touched {
         // if there is a submission error and field value hasn't been updated after last submit, field is invalid
         // or if there is any field error, field is invalid

From b6558d20f1e318403c920a59e7f87d587dca5ab8 Mon Sep 17 00:00:00 2001
From: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 8 Jan 2024 14:16:17 +0000
Subject: [PATCH 08/14] chore(version): v1.20.0

---
 CHANGELOG.md | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e5e12eb05..a3d5c9f70 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,26 @@ All notable changes to this project will be documented in this file. See [conven
 
 - - -
 
+## 1.20.0 (2024-01-08)
+
+### Features
+
+- Added new filters for payments ([#172](https://github.com/juspay/hyperswitch-control-center/pull/172)) ([`fd648de`](https://github.com/juspay/hyperswitch-control-center/commit/fd648de4e7cc0fde72b7316f9679abc248e0118f))
+
+### Bug Fixes
+
+- Connector integration status and disabled ui change ([#192](https://github.com/juspay/hyperswitch-control-center/pull/192)) ([`f784ef2`](https://github.com/juspay/hyperswitch-control-center/commit/f784ef27762098645886396e5043c219e566fa91))
+- Revert useField in TextInput ([#199](https://github.com/juspay/hyperswitch-control-center/pull/199)) ([`47cc5ed`](https://github.com/juspay/hyperswitch-control-center/commit/47cc5ede71736e1c6ecd5045b6f3b4c4b829436b))
+
+### Miscellaneous Tasks
+
+- Analytics files Js.Dict -> Dict migration ([#194](https://github.com/juspay/hyperswitch-control-center/pull/194)) ([`71934b5`](https://github.com/juspay/hyperswitch-control-center/commit/71934b58d459ca979d7d150c41478e05b205ebcc))
+
+**Full Changelog:** [`v1.19.5...v1.20.0`](https://github.com/juspay/hyperswitch-control-center/compare/v1.19.5...v1.20.0)
+
+- - -
+
+
 ## 1.19.5 (2024-01-08)
 
 ### Bug Fixes

From c307fd7bde4b3d43d54022b67f6be2265fc70eca Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Tue, 9 Jan 2024 13:08:48 +0530
Subject: [PATCH 09/14] feat: Customers module (#198)

---
 .../hyperswitch/HyperSwitchApp.res            |   8 ++
 src/entryPoints/hyperswitch/SidebarValues.res |   9 +-
 src/screens/HyperSwitch/APIUtils/APIUtils.res |   9 ++
 .../HyperSwitch/APIUtils/APIUtilsTypes.res    |   1 +
 .../HyperSwitch/Customers/Customers.res       |  48 +++++++++
 .../HyperSwitch/Customers/CustomersEntity.res |  76 +++++++++++++
 .../HyperSwitch/Customers/CustomersType.res   |  21 ++++
 .../HyperSwitch/Customers/ShowCustomers.res   | 100 ++++++++++++++++++
 8 files changed, 271 insertions(+), 1 deletion(-)
 create mode 100644 src/screens/HyperSwitch/Customers/Customers.res
 create mode 100644 src/screens/HyperSwitch/Customers/CustomersEntity.res
 create mode 100644 src/screens/HyperSwitch/Customers/CustomersType.res
 create mode 100644 src/screens/HyperSwitch/Customers/ShowCustomers.res

diff --git a/src/entryPoints/hyperswitch/HyperSwitchApp.res b/src/entryPoints/hyperswitch/HyperSwitchApp.res
index a65cf2fa5..00f98babe 100644
--- a/src/entryPoints/hyperswitch/HyperSwitchApp.res
+++ b/src/entryPoints/hyperswitch/HyperSwitchApp.res
@@ -282,6 +282,14 @@ let make = () => {
                           renderList={() => <Disputes />}
                           renderShow={id => <ShowDisputes id />}
                         />
+                      | list{"customers", ...remainingPath} =>
+                        <EntityScaffold
+                          entityName="Customers"
+                          remainingPath
+                          access=ReadWrite
+                          renderList={() => <Customers />}
+                          renderShow={id => <ShowCustomers id />}
+                        />
                       | list{"routing", ...remainingPath} =>
                         <EntityScaffold
                           entityName="Routing"
diff --git a/src/entryPoints/hyperswitch/SidebarValues.res b/src/entryPoints/hyperswitch/SidebarValues.res
index 0d8b2ccdf..a6b0abc33 100644
--- a/src/entryPoints/hyperswitch/SidebarValues.res
+++ b/src/entryPoints/hyperswitch/SidebarValues.res
@@ -79,13 +79,20 @@ let disputes = SubLevelLink({
   searchOptions: [("View dispute operations", "")],
 })
 
+let customers = SubLevelLink({
+  name: "Customers",
+  link: `/customers`,
+  access: ReadWrite,
+  searchOptions: [("View customers", "")],
+})
+
 let operations = isOperationsEnabled => {
   isOperationsEnabled
     ? Section({
         name: "Operations",
         icon: "hswitch-operations",
         showSection: true,
-        links: [payments, refunds, disputes],
+        links: [payments, refunds, disputes, customers],
       })
     : emptyComponent
 }
diff --git a/src/screens/HyperSwitch/APIUtils/APIUtils.res b/src/screens/HyperSwitch/APIUtils/APIUtils.res
index 55f1ea663..8ede12ac5 100644
--- a/src/screens/HyperSwitch/APIUtils/APIUtils.res
+++ b/src/screens/HyperSwitch/APIUtils/APIUtils.res
@@ -33,6 +33,15 @@ let getURL = (
   | VERIFY_APPLE_PAY => `verify/apple_pay`
   | PAYPAL_ONBOARDING => `connector_onboarding`
   | SURCHARGE => `routing/decision/surcharge`
+  | CUSTOMERS =>
+    switch methodType {
+    | Get =>
+      switch id {
+      | Some(customerId) => `customers/${customerId}`
+      | None => `customers/list?limit=10000`
+      }
+    | _ => ""
+    }
   | FRAUD_RISK_MANAGEMENT | CONNECTOR =>
     switch methodType {
     | Get =>
diff --git a/src/screens/HyperSwitch/APIUtils/APIUtilsTypes.res b/src/screens/HyperSwitch/APIUtils/APIUtilsTypes.res
index 0fa50d1d1..376659713 100644
--- a/src/screens/HyperSwitch/APIUtils/APIUtilsTypes.res
+++ b/src/screens/HyperSwitch/APIUtils/APIUtilsTypes.res
@@ -32,6 +32,7 @@ type entityName =
   | DISPUTE_REPORT
   | PAYPAL_ONBOARDING
   | SURCHARGE
+  | CUSTOMERS
 
 type userRoleTypes = USER_LIST | ROLE_LIST | ROLE_ID | NONE
 
diff --git a/src/screens/HyperSwitch/Customers/Customers.res b/src/screens/HyperSwitch/Customers/Customers.res
new file mode 100644
index 000000000..cefe6e2dc
--- /dev/null
+++ b/src/screens/HyperSwitch/Customers/Customers.res
@@ -0,0 +1,48 @@
+@react.component
+let make = () => {
+  open APIUtils
+  open CustomersEntity
+  let fetchDetails = useGetMethod()
+  let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading)
+  let (customersData, setCustomersData) = React.useState(_ => [])
+  let (offset, setOffset) = React.useState(_ => 0)
+
+  let getCustomersList = async () => {
+    try {
+      setScreenState(_ => PageLoaderWrapper.Loading)
+      let customersUrl = getURL(~entityName=CUSTOMERS, ~methodType=Get, ())
+      let response = await fetchDetails(customersUrl)
+      let data = response->LogicUtils.getArrayDataFromJson(itemToObjMapper)
+      setCustomersData(_ => data->Array.map(Js.Nullable.return))
+      setScreenState(_ => PageLoaderWrapper.Success)
+    } catch {
+    | Js.Exn.Error(e) =>
+      let err = Js.Exn.message(e)->Belt.Option.getWithDefault("Failed to Fetch!")
+      setScreenState(_ => PageLoaderWrapper.Error(err))
+    }
+  }
+  React.useEffect0(() => {
+    getCustomersList()->ignore
+    None
+  })
+
+  <PageLoaderWrapper screenState>
+    <PageUtils.PageHeading title="Customers" subTitle="View all customers" />
+    <LoadedTableWithCustomColumns
+      title=" "
+      hideTitle=true
+      actualData=customersData
+      entity={customersEntity}
+      resultsPerPage=10
+      showSerialNumber=true
+      totalResults={customersData->Array.length}
+      offset
+      setOffset
+      currrentFetchCount={customersData->Array.length}
+      defaultColumns={defaultColumns}
+      customColumnMapper={customersMapDefaultCols}
+      showSerialNumberInCustomizeColumns=false
+      sortingBasedOnDisabled=false
+    />
+  </PageLoaderWrapper>
+}
diff --git a/src/screens/HyperSwitch/Customers/CustomersEntity.res b/src/screens/HyperSwitch/Customers/CustomersEntity.res
new file mode 100644
index 000000000..6648045b2
--- /dev/null
+++ b/src/screens/HyperSwitch/Customers/CustomersEntity.res
@@ -0,0 +1,76 @@
+open CustomersType
+
+let defaultColumns = [
+  CustomerId,
+  Name,
+  Email,
+  PhoneCountryCode,
+  Phone,
+  Description,
+  Address,
+  CreatedAt,
+]
+
+let allColumns = [CustomerId, Name, Email, Phone, PhoneCountryCode, Description, Address, CreatedAt]
+
+let customersMapDefaultCols = Recoil.atom(. "customersMapDefaultCols", defaultColumns)
+
+let getHeading = colType => {
+  switch colType {
+  | CustomerId => Table.makeHeaderInfo(~key="customer_id", ~title="Customer Id", ~showSort=true, ())
+  | Name => Table.makeHeaderInfo(~key="name", ~title="Customer Name", ~showSort=true, ())
+  | Email => Table.makeHeaderInfo(~key="email", ~title="Email", ~showSort=true, ())
+  | PhoneCountryCode =>
+    Table.makeHeaderInfo(~key="phone_country_code", ~title="Phone Country Code", ~showSort=true, ())
+  | Phone => Table.makeHeaderInfo(~key="phone", ~title="Phone", ~showSort=true, ())
+  | Description =>
+    Table.makeHeaderInfo(~key="description", ~title="Description", ~showSort=true, ())
+  | Address => Table.makeHeaderInfo(~key="address", ~title="Address", ~showSort=true, ())
+  | CreatedAt => Table.makeHeaderInfo(~key="created_at", ~title="Created", ~showSort=true, ())
+  }
+}
+
+let getCell = (customersData, colType): Table.cell => {
+  switch colType {
+  | CustomerId => Text(customersData.customer_id)
+  | Name => Text(customersData.name)
+  | Email => Text(customersData.email)
+  | Phone => Text(customersData.phone)
+  | PhoneCountryCode => Text(customersData.phone_country_code)
+  | Description => Text(customersData.description)
+  | Address => Date(customersData.address)
+  | CreatedAt => Date(customersData.created_at)
+  }
+}
+
+let itemToObjMapper = dict => {
+  open LogicUtils
+  {
+    customer_id: dict->getString("customer_id", ""),
+    name: dict->getString("name", ""),
+    email: dict->getString("email", ""),
+    phone: dict->getString("phone", ""),
+    phone_country_code: dict->getString("phone_country_code", ""),
+    description: dict->getString("description", ""),
+    address: dict->getString("address", ""),
+    created_at: dict->getString("created_at", ""),
+    metadata: dict->getJsonObjectFromDict("metadata"),
+  }
+}
+
+let getCustomers: Js.Json.t => array<customers> = json => {
+  open LogicUtils
+  getArrayDataFromJson(json, itemToObjMapper)
+}
+
+let customersEntity = EntityType.makeEntity(
+  ~uri="",
+  ~getObjects=getCustomers,
+  ~defaultColumns,
+  ~allColumns,
+  ~getHeading,
+  ~getCell,
+  ~dataKey="",
+  ~getShowLink={customerData => `/customers/${customerData.customer_id}`},
+  (),
+)
diff --git a/src/screens/HyperSwitch/Customers/CustomersType.res b/src/screens/HyperSwitch/Customers/CustomersType.res
new file mode 100644
index 000000000..0822c9784
--- /dev/null
+++ b/src/screens/HyperSwitch/Customers/CustomersType.res
@@ -0,0 +1,21 @@
+type customers = {
+  customer_id: string,
+  name: string,
+  email: string,
+  phone: string,
+  phone_country_code: string,
+  description: string,
+  address: string,
+  created_at: string,
+  metadata: Js.Json.t,
+}
+
+type customersColsType =
+  | CustomerId
+  | Name
+  | Email
+  | Phone
+  | PhoneCountryCode
+  | Description
+  | Address
+  | CreatedAt
diff --git a/src/screens/HyperSwitch/Customers/ShowCustomers.res b/src/screens/HyperSwitch/Customers/ShowCustomers.res
new file mode 100644
index 000000000..da636d794
--- /dev/null
+++ b/src/screens/HyperSwitch/Customers/ShowCustomers.res
@@ -0,0 +1,100 @@
+module CustomerInfo = {
+  open CustomersEntity
+  module Details = {
+    @react.component
+    let make = (
+      ~data,
+      ~getHeading,
+      ~getCell,
+      ~excludeColKeys=[],
+      ~detailsFields,
+      ~justifyClassName="justify-start",
+      ~widthClass="w-1/4",
+      ~bgColor="bg-white dark:bg-jp-gray-lightgray_background",
+      ~children=?,
+    ) => {
+      <OrderUtils.Section
+        customCssClass={`border border-jp-gray-940 border-opacity-75 dark:border-jp-gray-960 ${bgColor} rounded-md p-5`}>
+        <FormRenderer.DesktopRow>
+          <div
+            className={`flex flex-wrap ${justifyClassName} dark:bg-jp-gray-lightgray_background dark:border-jp-gray-no_data_border`}>
+            {detailsFields
+            ->Array.mapWithIndex((colType, i) => {
+              <UIUtils.RenderIf condition={!(excludeColKeys->Array.includes(colType))}>
+                <div className={`flex ${widthClass} items-center`} key={Belt.Int.toString(i)}>
+                  <OrderUtils.DisplayKeyValueParams
+                    heading={getHeading(colType)}
+                    value={getCell(data, colType)}
+                    customMoneyStyle="!font-normal !text-sm"
+                    labelMargin="!py-0 mt-2"
+                    overiddingHeadingStyles="text-black text-sm font-medium"
+                    textColor="!font-normal !text-jp-gray-700"
+                  />
+                </div>
+              </UIUtils.RenderIf>
+            })
+            ->React.array}
+          </div>
+        </FormRenderer.DesktopRow>
+        <UIUtils.RenderIf condition={children->Belt.Option.isSome}>
+          {children->Belt.Option.getWithDefault(React.null)}
+        </UIUtils.RenderIf>
+      </OrderUtils.Section>
+    }
+  }
+  @react.component
+  let make = (~dict) => {
+    let customerData = itemToObjMapper(dict)
+    <>
+      <div className={`font-bold text-fs-16 dark:text-white dark:text-opacity-75 mt-4 mb-4`}>
+        {"Summary"->React.string}
+      </div>
+      <Details data=customerData getHeading getCell detailsFields=allColumns />
+    </>
+  }
+}
+
+@react.component
+let make = (~id) => {
+  open APIUtils
+  let fetchDetails = useGetMethod()
+  let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading)
+  let (customersData, setCustomersData) = React.useState(_ => Js.Json.null)
+
+  let fetchCustomersData = async () => {
+    try {
+      setScreenState(_ => PageLoaderWrapper.Loading)
+      let customersUrl = getURL(~entityName=CUSTOMERS, ~methodType=Get, ~id=Some(id), ())
+      let response = await fetchDetails(customersUrl)
+      setCustomersData(_ => response)
+      setScreenState(_ => PageLoaderWrapper.Success)
+    } catch {
+    | Js.Exn.Error(e) =>
+      let err = Js.Exn.message(e)->Belt.Option.getWithDefault("Failed to Fetch!")
+      setScreenState(_ => PageLoaderWrapper.Error(err))
+    }
+  }
+
+  React.useEffect0(() => {
+    fetchCustomersData()->ignore
+    None
+  })
+  <PageLoaderWrapper screenState>
+    <div className="flex flex-col overflow-scroll">
+      <div className="mb-4 flex justify-between">
+        <div className="flex items-center">
+          <div>
+            <PageUtils.PageHeading title="Customers" />
+            <BreadCrumbNavigation
+              path=[{title: "Customers", link: "/customers"}]
+              currentPageTitle=id
+              cursorStyle="cursor-pointer"
+            />
+          </div>
+          <div />
+        </div>
+      </div>
+      <CustomerInfo dict={customersData->LogicUtils.getDictFromJsonObject} />
+    </div>
+  </PageLoaderWrapper>
+}

From 011edf188a610b7dd6977d32006cda3c5b029965 Mon Sep 17 00:00:00 2001
From: Jeeva Ramachandran <120017870+JeevaRamu0104@users.noreply.github.com>
Date: Tue, 9 Jan 2024 15:06:54 +0530
Subject: [PATCH 10/14] fix: eslint issue (#205)

---
 .github/workflows/eslint-check.yml | 12 ++++++------
 src/components/form/TextInput.res  | 19 ++++++++++---------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/.github/workflows/eslint-check.yml b/.github/workflows/eslint-check.yml
index 5d7c8b3f5..3d24b5ebe 100644
--- a/.github/workflows/eslint-check.yml
+++ b/.github/workflows/eslint-check.yml
@@ -21,10 +21,10 @@ jobs:
       - name: Install dependencies
         run: npm install --force
 
-      # - name: Build Rescript
-      #   run: npm run re:build
+      - name: Build Rescript
+        run: npm run re:build
 
-      # - name: Run ESLint
-      #   run: npm run lint:hooks
-      #   env:
-      #     CI: true
+      - name: Run ESLint
+        run: npm run lint:hooks
+        env:
+          CI: true
diff --git a/src/components/form/TextInput.res b/src/components/form/TextInput.res
index d70855dd1..52977f0ec 100644
--- a/src/components/form/TextInput.res
+++ b/src/components/form/TextInput.res
@@ -39,13 +39,10 @@ let make = (
   ~removeValidationCheck=false,
 ) => {
   let showPopUp = PopUpState.useShowPopUp()
-
-  let isInValid = if removeValidationCheck {
-    false
-  } else {
-    try {
-      let {meta} = ReactFinalForm.useField(input.name)
-      if !meta.valid && meta.touched {
+  let isInValid = try {
+    let {meta} = ReactFinalForm.useField(input.name)
+    if !removeValidationCheck {
+      let bool = if !meta.valid && meta.touched {
         // if there is a submission error and field value hasn't been updated after last submit, field is invalid
         // or if there is any field error, field is invalid
         (!(meta.submitError->Js.Nullable.isNullable) && !meta.dirtySinceLastSubmit) ||
@@ -53,10 +50,14 @@ let make = (
       } else {
         false
       }
-    } catch {
-    | _ => false
+      bool
+    } else {
+      false
     }
+  } catch {
+  | _ => false
   }
+
   let {isFirst, isLast} = React.useContext(ButtonGroupContext.buttonGroupContext)
   let (showPassword, setShowPassword) = React.useState(_ => false)
   let inputRef = React.useRef(Js.Nullable.null)

From 77cebced9bfd9621f7c15b40c92b82f9c8be8c4f Mon Sep 17 00:00:00 2001
From: Sagar naik <sagar.naik@juspay.in>
Date: Tue, 9 Jan 2024 16:00:57 +0530
Subject: [PATCH 11/14] fix: filters enhance (#160)

Co-authored-by: Pritish Budhiraja <1805317@kiit.ac.in>
Co-authored-by: Jeeva Ramachandran <120017870+JeevaRamu0104@users.noreply.github.com>
---
 src/components/DateRangePicker.res              |  4 +++-
 src/screens/HyperSwitch/HSwitchRemoteFilter.res | 13 +++++--------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/DateRangePicker.res b/src/components/DateRangePicker.res
index 944f9f44a..e4c7a2b9b 100644
--- a/src/components/DateRangePicker.res
+++ b/src/components/DateRangePicker.res
@@ -526,7 +526,9 @@ module Base = {
     }
 
     let buttonText = {
-      showTime
+      startDateVal->String.length === 0 && endDateVal->String.length === 0
+        ? `Select Date ${showTime ? "and Time" : ""}`
+        : showTime
         ? `${startDateStr} ${startTimeStr} - ${endDateStr} ${endTimeStr}`
         : `${startDateStr} ${startDateStr === buttonText ? "" : "-"} ${endDateStr}`
     }
diff --git a/src/screens/HyperSwitch/HSwitchRemoteFilter.res b/src/screens/HyperSwitch/HSwitchRemoteFilter.res
index 0c05c2457..05b0ad11b 100644
--- a/src/screens/HyperSwitch/HSwitchRemoteFilter.res
+++ b/src/screens/HyperSwitch/HSwitchRemoteFilter.res
@@ -179,16 +179,13 @@ module RemoteTableFilters = {
       FilterContext.filterContext->React.useContext
     let defaultFilters = {""->Js.Json.string}
 
-    let setInitialFilters = useSetInitialFilters(
-      ~updateExistingKeys,
-      ~startTimeFilterKey,
-      ~endTimeFilterKey,
-    )
-
     let customViewTop = <SearchBarFilter placeholder setSearchVal searchVal />
 
     React.useEffect0(() => {
-      setInitialFilters()
+      if filterValueJson->Dict.keysToArray->Array.length === 0 {
+        setFilters(_ => Dict.make()->Some)
+        setOffset(_ => 0)
+      }
       None
     })
 
@@ -227,7 +224,7 @@ module RemoteTableFilters = {
     let filterData = filterDataJson->Belt.Option.getWithDefault(Dict.make()->Js.Json.object_)
 
     React.useEffect1(() => {
-      if filterValueJson->Dict.keysToArray->Array.length > 0 {
+      if filterValueJson->Dict.keysToArray->Array.length != 0 {
         setFilters(_ => filterValueJson->Some)
         setOffset(_ => 0)
       }

From fe6b67503c8731c690e16442f45229fe29cadef1 Mon Sep 17 00:00:00 2001
From: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 9 Jan 2024 14:34:24 +0000
Subject: [PATCH 12/14] chore(version): v1.21.0

---
 CHANGELOG.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a3d5c9f70..1b81bc37d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [conven
 
 - - -
 
+## 1.21.0 (2024-01-09)
+
+### Features
+
+- Customers module ([#198](https://github.com/juspay/hyperswitch-control-center/pull/198)) ([`c307fd7`](https://github.com/juspay/hyperswitch-control-center/commit/c307fd7bde4b3d43d54022b67f6be2265fc70eca))
+
+### Bug Fixes
+
+- Eslint issue ([#205](https://github.com/juspay/hyperswitch-control-center/pull/205)) ([`011edf1`](https://github.com/juspay/hyperswitch-control-center/commit/011edf188a610b7dd6977d32006cda3c5b029965))
+- Filters enhance ([#160](https://github.com/juspay/hyperswitch-control-center/pull/160)) ([`77cebce`](https://github.com/juspay/hyperswitch-control-center/commit/77cebced9bfd9621f7c15b40c92b82f9c8be8c4f))
+
+**Full Changelog:** [`v1.20.0...v1.21.0`](https://github.com/juspay/hyperswitch-control-center/compare/v1.20.0...v1.21.0)
+
+- - -
+
+
 ## 1.20.0 (2024-01-08)
 
 ### Features

From 660c706b26c6a7177b36dd416483e4435e686fd4 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Tue, 9 Jan 2024 20:03:37 +0530
Subject: [PATCH 13/14] feat: Modal added for Switch merchant switch. (#213)

---
 .../SwitchMerchant/SwitchMerchant.res         | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res b/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res
index 5a5bd3c5b..4d22fcdaf 100644
--- a/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res
+++ b/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res
@@ -218,9 +218,9 @@ let make = (~userRole, ~isAddMerchantEnabled=false) => {
   let (value, setValue) = React.useState(() => "")
   let merchantId = getFromMerchantDetails("merchant_id")
   let updateDetails = useUpdateMethod()
-  let showToast = ToastState.useShowToast()
   let showPopUp = PopUpState.useShowPopUp()
   let isInternalUser = userRole->String.includes("internal_")
+  let (successModal, setSuccessModal) = React.useState(_ => false)
 
   let input = React.useMemo1((): ReactFinalForm.fieldRenderPropsInput => {
     {
@@ -256,8 +256,10 @@ let make = (~userRole, ~isAddMerchantEnabled=false) => {
       let switchedMerchantId = responseDict->getString("merchant_id", "")
       LocalStorage.setItem("login", token)
       HSwitchUtils.setMerchantDetails("merchant_id", switchedMerchantId->Js.Json.string)
-      showToast(~message=`Merchant Switched Succesfully`, ~toastType=ToastSuccess, ())
+      setSuccessModal(_ => true)
+      await HyperSwitchUtils.delay(2000)
       Window.Location.reload()
+      setSuccessModal(_ => false)
     } catch {
     | _ => setValue(_ => "")
     }
@@ -278,6 +280,18 @@ let make = (~userRole, ~isAddMerchantEnabled=false) => {
       <TextInput input customWidth="w-80" placeholder="Switch merchant" onKeyUp=handleKeyUp />
     </div>
   } else {
-    <ExternalUser switchMerchant isAddMerchantEnabled />
+    <>
+      <ExternalUser switchMerchant isAddMerchantEnabled />
+      <Modal
+        showModal=successModal
+        setShowModal=setSuccessModal
+        modalClass="w-80 !h-48 flex items-center justify-center m-auto"
+        paddingClass=""
+        childClass="flex items-center justify-center h-full w-full">
+        {<div className="flex items-center gap-2">
+          <p className="text-xl font-semibold"> {"Switching merchant..."->React.string} </p>
+        </div>}
+      </Modal>
+    </>
   }
 }

From 29d917ee7c21a7ce8827cd3c59e75ba19583144e Mon Sep 17 00:00:00 2001
From: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 9 Jan 2024 17:31:54 +0000
Subject: [PATCH 14/14] chore(version): v1.22.0

---
 CHANGELOG.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1b81bc37d..76af68fad 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [conven
 
 - - -
 
+## 1.22.0 (2024-01-09)
+
+### Features
+
+- Modal added for Switch merchant switch. ([#213](https://github.com/juspay/hyperswitch-control-center/pull/213)) ([`660c706`](https://github.com/juspay/hyperswitch-control-center/commit/660c706b26c6a7177b36dd416483e4435e686fd4))
+
+**Full Changelog:** [`v1.21.0...v1.22.0`](https://github.com/juspay/hyperswitch-control-center/compare/v1.21.0...v1.22.0)
+
+- - -
+
+
 ## 1.21.0 (2024-01-09)
 
 ### Features