diff --git a/.github/workflows/lint-and-test.yml b/.github/workflows/lint-and-test.yml
index 4afa00a76b..815b286d17 100644
--- a/.github/workflows/lint-and-test.yml
+++ b/.github/workflows/lint-and-test.yml
@@ -152,17 +152,20 @@ jobs:
         run: |
           cat << 'EOF' > knip-reporter.js
           const reporter = function (options) {
-            const totalIssues = Object.values(options.issues).reduce(
-              (acc, issueRecords) =>
-                acc + Object.values(issueRecords).reduce(
-                  (acc2, issuesInFile) => acc2 + Object.keys(issuesInFile).length,
-                  0
-                ),
+            const totalIssues = Object.entries(options.counters).reduce(
+              (acc, [key, value]) => {
+                if (options.report[key]) {
+                  return acc + value
+                }
+
+                return acc
+              },
               0
-            );
-            console.log(JSON.stringify({ totalIssues }));
-          };
-          export default reporter;
+            )
+
+            console.log(JSON.stringify({ totalIssues }))
+          }
+          export default reporter
           EOF
       - name: Run knip on base branch
         id: knip_base
@@ -170,9 +173,9 @@ jobs:
           OUTPUT=$(npx knip --no-exit-code --exports --reporter=./knip-reporter.js)
           JSON=$(echo "$OUTPUT" | grep -o '{.*}')
           total_issues=$(echo "$JSON" | jq '.totalIssues')
-          echo "Total Issues: $total_issues"
+          echo "Found $total_issues issue(s) on base branch."
+          echo "Setting $total_issues issue(s) as max limit for PR branch."
           echo "maxIssues=${total_issues}" >> $GITHUB_OUTPUT
-          echo "Max issues = $maxIssues"
 
       - name: Checkout the PR branch
         uses: actions/checkout@v2
@@ -185,18 +188,20 @@ jobs:
         run: |
           cat << 'EOF' > knip-reporter.js
           const reporter = function (options) {
-            const totalIssues = Object.values(options.issues).reduce(
-              (acc, issueRecords) =>
-                acc + Object.values(issueRecords).reduce(
-                  (acc2, issuesInFile) => acc2 + Object.keys(issuesInFile).length,
-                  0
-                ),
+            const totalIssues = Object.entries(options.counters).reduce(
+              (acc, [key, value]) => {
+                if (options.report[key]) {
+                  return acc + value
+                }
+
+                return acc
+              },
               0
-            );
-            console.log(JSON.stringify({ totalIssues }));
-          };
-          export default reporter;
+            )
+
+            console.log(JSON.stringify({ totalIssues }))
+          }
+          export default reporter
           EOF
       - name: Run knip on PR branch
-        run: |
-          npx knip --max-issues=${{ steps.knip_base.outputs.maxIssues }} --exports --reporter=./knip-reporter.js
+        run: npx knip --max-issues=${{ steps.knip_base.outputs.maxIssues }} --exports --reporter=./knip-reporter.js
diff --git a/packages/client/src/components/charts/RegRatesLineChart.tsx b/packages/client/src/components/charts/RegRatesLineChart.tsx
index e9fcd79d36..eebfb98b04 100644
--- a/packages/client/src/components/charts/RegRatesLineChart.tsx
+++ b/packages/client/src/components/charts/RegRatesLineChart.tsx
@@ -12,7 +12,7 @@ import { Event } from '@client/utils/gateway'
 import { constantsMessages } from '@client/i18n/messages'
 import { LineChart } from '@opencrvs/components/lib/LineChart'
 import { ITheme } from '@opencrvs/components/lib/theme'
-import * as React from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import { injectIntl, WrappedComponentProps } from 'react-intl'
 import styled, { withTheme } from 'styled-components'
 import { CompletenessRateTime } from '@client/views/SysAdmin/Performance/utils'
@@ -131,24 +131,10 @@ function LegendDot(props: React.HTMLAttributes<SVGElement>) {
   )
 }
 
-class RegRatesLineChartComponent extends React.Component<IProps, IState> {
-  constructor(props: IProps) {
-    super(props)
-    this.state = {
-      ...this.getStatePropertiesForChart(),
-      ...this.getLatestData()
-    }
-  }
-
-  getStatePropertiesForChart = () => {
-    if (window.innerWidth > this.props.theme.grid.breakpoints.md) {
-      return this.getStatePropertiesForLargeWindowChart()
-    } else {
-      return this.getStatePropertiesForSmallWindowChart()
-    }
-  }
+const RegRatesLineChartComponent = (props: IProps) => {
+  const { theme, data, intl, eventType, completenessRateTime } = props
 
-  getStatePropertiesForSmallWindowChart = () => {
+  const getStatePropertiesForSmallWindowChart = () => {
     return {
       legendMarginTop: -16,
       legendMarginLeft: 0,
@@ -160,7 +146,7 @@ class RegRatesLineChartComponent extends React.Component<IProps, IState> {
       legendLayout: 'horizontal' as const
     }
   }
-  getStatePropertiesForLargeWindowChart = () => {
+  const getStatePropertiesForLargeWindowChart = () => {
     return {
       legendMarginTop: -16,
       legendMarginLeft: 54,
@@ -172,23 +158,15 @@ class RegRatesLineChartComponent extends React.Component<IProps, IState> {
       legendLayout: 'vertical' as const
     }
   }
-  componentDidMount() {
-    window.addEventListener('resize', this.recordWindowWidth)
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.recordWindowWidth)
-  }
 
-  recordWindowWidth = () => {
-    this.setState({
-      ...this.state,
-      ...this.getStatePropertiesForChart()
-    })
-  }
+  const getStatePropertiesForChart = useCallback(() => {
+    if (window.innerWidth > theme.grid.breakpoints.md) {
+      return getStatePropertiesForLargeWindowChart()
+    }
+    return getStatePropertiesForSmallWindowChart()
+  }, [theme])
 
-  getLatestData() {
-    const { data, theme } = this.props
+  const getLatestData = () => {
     const latestData = data && data[data.length - 1]
     return {
       activeLabel: (latestData && latestData.label) || '',
@@ -206,18 +184,48 @@ class RegRatesLineChartComponent extends React.Component<IProps, IState> {
       }
     }
   }
-  customizedLegend = () => {
+
+  const [state, setState] = useState<IState>(() => ({
+    ...getStatePropertiesForChart(),
+    ...getLatestData()
+  }))
+  const {
+    chartTop,
+    chartRight,
+    chartBottom,
+    chartLeft,
+    maximizeXAxisInterval,
+    legendLayout,
+    legendMarginLeft,
+    legendMarginTop
+  } = state
+
+  useEffect(() => {
+    const recordWindowWidth = () => {
+      const latesProperties = getStatePropertiesForChart()
+      setState((prev) => ({
+        ...prev,
+        ...latesProperties
+      }))
+    }
+
+    window.addEventListener('resize', recordWindowWidth)
+    return () => {
+      window.removeEventListener('resize', recordWindowWidth)
+    }
+  }, [getStatePropertiesForChart])
+
+  const customizedLegend = () => {
     const {
       activeLabel,
       activeRegisteredInTargetDays,
       activeTotalRegistered,
       activeTotalEstimate
-    } = this.state.activeLabel ? this.state : this.getLatestData()
-    const { intl, eventType, completenessRateTime } = this.props
+    } = state.activeLabel ? state : getLatestData()
     return (
       <CustomLegendContainer
-        marginLeft={this.state.legendMarginLeft}
-        marginTop={this.state.legendMarginTop}
+        marginLeft={legendMarginLeft}
+        marginTop={legendMarginTop}
       >
         <LegendHeader>{activeLabel}</LegendHeader>
         <LegendDetails>
@@ -284,7 +292,7 @@ class RegRatesLineChartComponent extends React.Component<IProps, IState> {
     )
   }
 
-  customizedTooltip = (dataPoint: any) => {
+  const customizedTooltip = (dataPoint: any) => {
     const wrapperPayload = dataPoint.payload[0]
 
     return (
@@ -295,11 +303,11 @@ class RegRatesLineChartComponent extends React.Component<IProps, IState> {
       </TooltipContent>
     )
   }
-  mouseMoveHandler = (data: any) => {
-    const { theme } = this.props
 
+  const mouseMoveHandler = (data: any) => {
     if (data && data.activePayload) {
-      this.setState({
+      setState({
+        ...state,
         activeLabel: data.activeLabel || '',
         activeRegisteredInTargetDays: {
           value: data.activePayload[2].value || 0,
@@ -316,135 +324,127 @@ class RegRatesLineChartComponent extends React.Component<IProps, IState> {
       })
     }
   }
-  mouseLeaveHandler = () => {
-    this.setState(this.getLatestData())
+  const mouseLeaveHandler = () => {
+    const latestState = getLatestData()
+    setState((prev) => ({ ...prev, ...latestState }))
   }
-  getLoadingIndicatorForMobileView() {
-    return (
-      <LoadingIndicator id="reg-rates-line-chart-loader" flexDirection="column">
-        <LegendLoadingIndicator>
-          <CustomLegendContainer
-            marginLeft={this.state.legendMarginLeft}
-            marginTop={this.state.legendMarginTop}
-          >
-            <LegendHeader>
-              <LoaderBox width={40} />
-            </LegendHeader>
-            <LegendDetails>
-              <div>
-                <LegendDot color={this.props.theme.colors.grey300} />
-              </div>
-              <LegendData>
+
+  const getLoadingIndicatorForMobileView = () => (
+    <LoadingIndicator id="reg-rates-line-chart-loader" flexDirection="column">
+      <LegendLoadingIndicator>
+        <CustomLegendContainer
+          marginLeft={legendMarginLeft}
+          marginTop={legendMarginTop}
+        >
+          <LegendHeader>
+            <LoaderBox width={40} />
+          </LegendHeader>
+          <LegendDetails>
+            <div>
+              <LegendDot color={theme.colors.grey300} />
+            </div>
+            <LegendData>
+              <LoaderBox width={60} />
+              <br />
+              <LoaderBox width={20} />
+            </LegendData>
+          </LegendDetails>
+          <LegendDetails>
+            <div>
+              <LegendDot color={theme.colors.grey300} />
+            </div>
+            <LegendData>
+              <LegendDataLabel>
                 <LoaderBox width={60} />
-                <br />
+              </LegendDataLabel>
+              <br />
+              <LegendDataValue>
                 <LoaderBox width={20} />
-              </LegendData>
-            </LegendDetails>
-            <LegendDetails>
-              <div>
-                <LegendDot color={this.props.theme.colors.grey300} />
-              </div>
-              <LegendData>
-                <LegendDataLabel>
-                  <LoaderBox width={60} />
-                </LegendDataLabel>
-                <br />
-                <LegendDataValue>
-                  <LoaderBox width={20} />
-                </LegendDataValue>
-              </LegendData>
-            </LegendDetails>
-            <LegendDetails>
-              <div>
-                <LegendDot color={this.props.theme.colors.grey300} />
-              </div>
-              <LegendData>
-                <LegendDataLabel>
-                  <LoaderBox width={60} />
-                </LegendDataLabel>
-                <br />
-                <LegendDataValue>
-                  <LoaderBox width={20} />
-                </LegendDataValue>
-              </LegendData>
-            </LegendDetails>
-          </CustomLegendContainer>
-        </LegendLoadingIndicator>
-        <MobileChartLoadingIndicator />
-      </LoadingIndicator>
-    )
-  }
-  getLoadingIndicatorForDesktopView() {
-    return (
-      <LoadingIndicator id="reg-rates-line-chart-loader" flexDirection="row">
-        <DesktopChartLoadingIndicator />
-        <LegendLoadingIndicator>
-          <CustomLegendContainer
-            marginLeft={this.state.legendMarginLeft}
-            marginTop={this.state.legendMarginTop}
-          >
-            <LegendHeader>
-              <LoaderBox width={60} />
-            </LegendHeader>
-            <LegendDetails>
-              <div>
-                <LegendDot color={this.props.theme.colors.grey300} />
-              </div>
-              <LegendData>
+              </LegendDataValue>
+            </LegendData>
+          </LegendDetails>
+          <LegendDetails>
+            <div>
+              <LegendDot color={theme.colors.grey300} />
+            </div>
+            <LegendData>
+              <LegendDataLabel>
+                <LoaderBox width={60} />
+              </LegendDataLabel>
+              <br />
+              <LegendDataValue>
+                <LoaderBox width={20} />
+              </LegendDataValue>
+            </LegendData>
+          </LegendDetails>
+        </CustomLegendContainer>
+      </LegendLoadingIndicator>
+      <MobileChartLoadingIndicator />
+    </LoadingIndicator>
+  )
+
+  const getLoadingIndicatorForDesktopView = () => (
+    <LoadingIndicator id="reg-rates-line-chart-loader" flexDirection="row">
+      <DesktopChartLoadingIndicator />
+      <LegendLoadingIndicator>
+        <CustomLegendContainer
+          marginLeft={legendMarginLeft}
+          marginTop={legendMarginTop}
+        >
+          <LegendHeader>
+            <LoaderBox width={60} />
+          </LegendHeader>
+          <LegendDetails>
+            <div>
+              <LegendDot color={theme.colors.grey300} />
+            </div>
+            <LegendData>
+              <LoaderBox width={80} />
+              <br />
+              <LoaderBox width={40} />
+            </LegendData>
+          </LegendDetails>
+          <LegendDetails>
+            <div>
+              <LegendDot color={theme.colors.grey300} />
+            </div>
+            <LegendData>
+              <LegendDataLabel>
                 <LoaderBox width={80} />
-                <br />
+              </LegendDataLabel>
+              <br />
+              <LegendDataValue>
                 <LoaderBox width={40} />
-              </LegendData>
-            </LegendDetails>
-            <LegendDetails>
-              <div>
-                <LegendDot color={this.props.theme.colors.grey300} />
-              </div>
-              <LegendData>
-                <LegendDataLabel>
-                  <LoaderBox width={80} />
-                </LegendDataLabel>
-                <br />
-                <LegendDataValue>
-                  <LoaderBox width={40} />
-                </LegendDataValue>
-              </LegendData>
-            </LegendDetails>
-            <LegendDetails>
-              <div>
-                <LegendDot color={this.props.theme.colors.grey300} />
-              </div>
-              <LegendData>
-                <LegendDataLabel>
-                  <LoaderBox width={80} />
-                </LegendDataLabel>
-                <br />
-                <LegendDataValue>
-                  <LoaderBox width={40} />
-                </LegendDataValue>
-              </LegendData>
-            </LegendDetails>
-          </CustomLegendContainer>
-        </LegendLoadingIndicator>
-      </LoadingIndicator>
-    )
-  }
-  getLoadingIndicator = () => {
-    if (window.innerWidth > this.props.theme.grid.breakpoints.md) {
-      return this.getLoadingIndicatorForDesktopView()
-    } else {
-      return this.getLoadingIndicatorForMobileView()
+              </LegendDataValue>
+            </LegendData>
+          </LegendDetails>
+          <LegendDetails>
+            <div>
+              <LegendDot color={theme.colors.grey300} />
+            </div>
+            <LegendData>
+              <LegendDataLabel>
+                <LoaderBox width={80} />
+              </LegendDataLabel>
+              <br />
+              <LegendDataValue>
+                <LoaderBox width={40} />
+              </LegendDataValue>
+            </LegendData>
+          </LegendDetails>
+        </CustomLegendContainer>
+      </LegendLoadingIndicator>
+    </LoadingIndicator>
+  )
+
+  const getLoadingIndicator = () => {
+    if (window.innerWidth > theme.grid.breakpoints.md) {
+      return getLoadingIndicatorForDesktopView()
     }
+    return getLoadingIndicatorForMobileView()
   }
-  getChart(data: ILineDataPoint[]) {
-    const {
-      chartTop,
-      chartRight,
-      chartBottom,
-      chartLeft,
-      maximizeXAxisInterval,
-      legendLayout
-    } = this.state
+
+  if (data) {
     return (
       <LineChart
         data={data}
@@ -453,10 +453,10 @@ class RegRatesLineChartComponent extends React.Component<IProps, IState> {
           'totalRegistered',
           'registeredInTargetDays'
         ]}
-        mouseMoveHandler={this.mouseMoveHandler}
-        mouseLeaveHandler={this.mouseLeaveHandler}
-        tooltipContent={this.customizedTooltip}
-        legendContent={this.customizedLegend}
+        mouseMoveHandler={mouseMoveHandler}
+        mouseLeaveHandler={mouseLeaveHandler}
+        tooltipContent={customizedTooltip}
+        legendContent={customizedLegend}
         chartTop={chartTop}
         chartRight={chartRight}
         chartBottom={chartBottom}
@@ -466,12 +466,7 @@ class RegRatesLineChartComponent extends React.Component<IProps, IState> {
       />
     )
   }
-  render() {
-    const { data } = this.props
-
-    if (data) return this.getChart(data)
-    else return this.getLoadingIndicator()
-  }
+  return getLoadingIndicator()
 }
 
 export const RegRatesLineChart = withTheme(
diff --git a/packages/gateway/package.json b/packages/gateway/package.json
index e5bddb313d..c0a733f844 100644
--- a/packages/gateway/package.json
+++ b/packages/gateway/package.json
@@ -17,7 +17,7 @@
     "gen:schema:watch": "nodemon --quiet --on-change-only -e graphql -i src/graphql/schema.graphql -x 'yarn gen:schema'",
     "gen:types:watch": "nodemon --quiet --on-change-only -w src/graphql/schema.graphql -x 'yarn gen:types'",
     "open:cov": "yarn test && opener coverage/index.html",
-    "lint": "eslint -c .eslintrc.js --fix ./src"
+    "lint": "eslint -c .eslintrc.js --fix ./src --max-warnings=0"
   },
   "dependencies": {
     "@elastic/elasticsearch": "8.13.1",
diff --git a/packages/login/src/views/ResetCredentialsForm/ForgottenItemForm.tsx b/packages/login/src/views/ResetCredentialsForm/ForgottenItemForm.tsx
index d871327894..83f7524c91 100644
--- a/packages/login/src/views/ResetCredentialsForm/ForgottenItemForm.tsx
+++ b/packages/login/src/views/ResetCredentialsForm/ForgottenItemForm.tsx
@@ -152,7 +152,6 @@ const ForgottenItemComponent = ({
     </>
   )
 }
-
 export const ForgottenItem = connect(null, {
   goToHome,
   goToPhoneNumberVerificationForm
diff --git a/packages/login/src/views/ResetCredentialsForm/SecurityQuestionForm.tsx b/packages/login/src/views/ResetCredentialsForm/SecurityQuestionForm.tsx
index a11160c50b..003dcd430f 100644
--- a/packages/login/src/views/ResetCredentialsForm/SecurityQuestionForm.tsx
+++ b/packages/login/src/views/ResetCredentialsForm/SecurityQuestionForm.tsx
@@ -141,6 +141,7 @@ const SecurityQuestionComponent = ({
         await authApi.sendUserName(location.state.nonce)
         return goToSuccessPage(location.state.forgottenItem)
       }
+
       goToUpdatePasswordForm(result.nonce)
     } catch (error) {
       // @todo error handling