[Dashboard] - Refactor linter

packages/apps/dashboard/client/eslint.config.js

@@ -0,0 +1,99 @@
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import prettierPlugin from 'eslint-plugin-prettier';
+import importPlugin from 'eslint-plugin-import';
+import globals from 'globals';
+
+export default tseslint.config(
+  {
+    ignores: ['dist/', 'tsconfig.json'],
+  },
+  eslint.configs.recommended,
+  tseslint.configs.recommended,
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      parser: tseslint.parser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+        projectService: true,
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.es2022,
+      },
+    },
+    plugins: {
+      react: reactPlugin,
+      'react-hooks': reactHooksPlugin,
+      prettier: prettierPlugin,
+      import: importPlugin,
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+      'import/resolver': {
+        typescript: {
+          alwaysTryTypes: true,
+        },
+      },
+    },
+    rules: {
+      'react/prop-types': 'off',
+      'react/display-name': 'off',
+      'react/react-in-jsx-scope': 'off',
+      'react-hooks/exhaustive-deps': 'warn',
+      'react-hooks/rules-of-hooks': 'error',
+      'import/order': [
+        'error',
+        {
+          'groups': ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
+          'pathGroups': [
+            {
+              'pattern': 'react',
+              'group': 'external',
+              'position': 'before'
+            }
+          ],
+          'pathGroupsExcludedImportTypes': ['react'],
+          'newlines-between': 'always',
+          'alphabetize': {
+            'order': 'asc',
+            'caseInsensitive': true
+          }
+        }
+      ],
+      'import/no-duplicates': 'error',
+      'import/no-unresolved': 'error',
+      '@typescript-eslint/no-unused-vars': ['error', { 'argsIgnorePattern': '^_' }],
+      '@typescript-eslint/no-explicit-any': 'error',
+      'no-console': ['error', { allow: ['warn', 'error'] }],
+      quotes: [
+        'error',
+        'single',
+        {
+          avoidEscape: true,
+        },
+      ],
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: 'lodash',
+              message:
+                'Please import only specific modules from lodash to reduce bundle size. Instead of import {compact} from `lodash`, import compact from lodash/compact',
+            },
+          ],
+        },
+      ],
+    },
+  }
+);

packages/apps/dashboard/client/package.json

@@ -9,7 +9,8 @@
     "clean": "tsc --build --clean && rm -rf dist",
     "start": "vite",
     "build": "tsc --build && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint . --fix",
     "preview": "vite preview",
     "vercel-build": "yarn workspace human-protocol build:libs && yarn build",
     "test": "exit 0"
@@ -44,18 +45,30 @@
     "zustand": "^4.5.4"
   },
   "devDependencies": {
+    "@eslint/js": "^9.27.0",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint": "^9.27.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-prettier": "^5.4.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.11",
+    "globals": "^16.2.0",
     "prettier": "^3.4.2",
     "sass": "^1.85.0",
     "typescript": "^5.6.3",
+    "typescript-eslint": "^8.33.0",
     "vite": "^6.2.4",
     "vite-plugin-svgr": "^4.2.0"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "prettier --write",
+      "eslint --fix"
+    ]
   }
 }

packages/apps/dashboard/client/src/App.tsx

@@ -2,10 +2,10 @@ import { FC } from 'react';
 
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 
-import Graph from '@pages/Graph';
-import Home from '@pages/Home';
-import LeaderBoard from '@pages/Leaderboard';
-import SearchResults from '@pages/SearchResults';
+import Graph from '@/pages/Graph';
+import Home from '@/pages/Home';
+import LeaderBoard from '@/pages/Leaderboard';
+import SearchResults from '@/pages/SearchResults';
 
 const App: FC = () => {
   return (

packages/apps/dashboard/client/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,11 +1,10 @@
 import { FC } from 'react';
 
-import { Link as RouterLink } from 'react-router-dom';
-import Link from '@mui/material/Link';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
-
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import { Link as RouterLink } from 'react-router-dom';
 
 const Breadcrumbs: FC<{ title?: string }> = ({ title }) => {
   return (

packages/apps/dashboard/client/src/components/Charts/AreaChart.tsx

@@ -1,3 +1,9 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { Typography } from '@mui/material';
+import Card from '@mui/material/Card';
+import Stack from '@mui/material/Stack';
+import dayjs, { Dayjs } from 'dayjs';
 import {
   CartesianGrid,
   Tooltip,
@@ -7,26 +13,23 @@ import {
   Area,
   ResponsiveContainer,
 } from 'recharts';
-import CustomChartTooltip from './CustomChartTooltip';
-import { useEffect, useRef, useState } from 'react';
-import Card from '@mui/material/Card';
-import { Typography } from '@mui/material';
-import Stack from '@mui/material/Stack';
-import { colorPalette } from '@assets/styles/color-palette';
-import CustomXAxisTick from '@components/Charts/CustomXAxisTick';
-import DatePicker from '@components/DataEntry/DatePicker';
-import ToggleButtons from '@components/DataEntry/ToggleButtons';
-import dayjs, { Dayjs } from 'dayjs';
-import ToggleCharts from '@components/Charts/ToggleCharts';
-import { formatNumber } from '@helpers/formatNumber';
+
+import { colorPalette } from '@/assets/styles/color-palette';
+import CustomXAxisTick from '@/components/Charts/CustomXAxisTick';
+import ToggleCharts from '@/components/Charts/ToggleCharts';
+import DatePicker from '@/components/DataEntry/DatePicker';
+import ToggleButtons from '@/components/DataEntry/ToggleButtons';
+import { formatNumber } from '@/helpers/formatNumber';
 import {
   GraphPageChartData,
   useGraphPageChartData,
-} from '@services/api/use-graph-page-chart-data';
+} from '@/services/api/use-graph-page-chart-data';
 import {
   initialAllTime,
   useGraphPageChartParams,
-} from '@utils/hooks/use-graph-page-chart-params';
+} from '@/utils/hooks/use-graph-page-chart-params';
+
+import CustomChartTooltip from './CustomChartTooltip';
 
 export type GraphPageChartDataConfigObject<T> = Partial<
   Record<keyof GraphPageChartData[number], T>

packages/apps/dashboard/client/src/components/Charts/CustomChartTooltip.tsx

@@ -1,13 +1,15 @@
-import { TooltipProps } from 'recharts';
-import Card from '@mui/material/Card';
-import Box from '@mui/material/Box';
+import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
 import { Grid, Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
 import Stack from '@mui/material/Stack';
-import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
-import { colorPalette } from '@assets/styles/color-palette';
-import { formatDate } from '@helpers/formatDate';
-import { GraphPageChartDataConfigObject } from '@components/Charts/AreaChart';
 import { NumericFormat } from 'react-number-format';
+import { TooltipProps } from 'recharts';
+
+import { colorPalette } from '@/assets/styles/color-palette';
+import { GraphPageChartDataConfigObject } from '@/components/Charts/AreaChart';
+import { formatDate } from '@/helpers/formatDate';
+
 
 const renderTitle = (title: string) => {
   const currentTitle: GraphPageChartDataConfigObject<string> = {

packages/apps/dashboard/client/src/components/Charts/CustomXAxisTick.tsx

@@ -1,7 +1,8 @@
-import { colorPalette } from '@assets/styles/color-palette';
 // @ts-expect-error -- import error, but this type work property
 import { ContentRenderer } from 'recharts';
-import { formatDate } from '@helpers/formatDate';
+
+import { colorPalette } from '@/assets/styles/color-palette';
+import { formatDate } from '@/helpers/formatDate';
 
 const CustomXAxisTick = ({ x, y, payload }: ContentRenderer<string>) => {
   return (

packages/apps/dashboard/client/src/components/Charts/ToggleCharts.tsx

@@ -1,7 +1,8 @@
 import { FormControlLabel, FormGroup, Typography } from '@mui/material';
-import Stack from '@mui/material/Stack';
 import Checkbox from '@mui/material/Checkbox';
-import { FormatNumber } from '@components/Home/FormatNumber';
+import Stack from '@mui/material/Stack';
+
+import { FormatNumber } from '@/components/Home/FormatNumber';
 
 interface ToggleChartsProps {
   handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;

packages/apps/dashboard/client/src/components/Clipboard/Clipboard.tsx

@@ -1,11 +1,12 @@
 import { useState } from 'react';
 
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import Card from '@mui/material/Card';
+import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-import IconButton from '@mui/material/IconButton';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import CustomTooltip from '@components/CustomTooltip';
+
+import CustomTooltip from '@/components/CustomTooltip';
 
 interface ClipboardProps {
   value: string;

packages/apps/dashboard/client/src/components/DataEntry/DatePicker.tsx

@@ -1,19 +1,21 @@
+import { Dispatch, SetStateAction, useState } from 'react';
+
+import Typography from '@mui/material/Typography';
 import {
   DatePickerProps,
   LocalizationProvider,
   UseDateFieldProps,
 } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DatePicker as DatePickerMui } from '@mui/x-date-pickers/DatePicker';
-import type { Dayjs } from 'dayjs';
-import { Dispatch, SetStateAction, useState } from 'react';
-import Typography from '@mui/material/Typography';
 import {
   BaseSingleInputFieldProps,
   DateValidationError,
   FieldSection,
 } from '@mui/x-date-pickers/models';
-import { colorPalette } from '@assets/styles/color-palette';
+import type { Dayjs } from 'dayjs';
+
+import { colorPalette } from '@/assets/styles/color-palette';
 
 interface CustomDateFieldProps
   extends UseDateFieldProps<Dayjs, false>,

packages/apps/dashboard/client/src/components/DataEntry/ToggleButtons.tsx

@@ -1,13 +1,14 @@
-import ToggleButton from '@mui/material/ToggleButton';
-import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material';
+import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Typography from '@mui/material/Typography';
+import dayjs from 'dayjs';
+
 import {
   TIME_PERIOD_OPTIONS,
   TimePeriod,
   useGraphPageChartParams,
-} from '@utils/hooks/use-graph-page-chart-params';
-import dayjs from 'dayjs';
+} from '@/utils/hooks/use-graph-page-chart-params';
 
 export const StyledToggleButtonGroup = styled(ToggleButtonGroup)(
   ({ theme }) => ({

packages/apps/dashboard/client/src/components/Footer/Footer.tsx

@@ -1,16 +1,16 @@
 import { FC } from 'react';
 
+import GitHubIcon from '@mui/icons-material/GitHub';
+import LinkedInIcon from '@mui/icons-material/LinkedIn';
+import TelegramIcon from '@mui/icons-material/Telegram';
+import TwitterIcon from '@mui/icons-material/Twitter';
+import { IconButton, styled } from '@mui/material';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
-import { IconButton, styled } from '@mui/material';
 import Typography from '@mui/material/Typography';
-import TwitterIcon from '@mui/icons-material/Twitter';
-import LinkedInIcon from '@mui/icons-material/LinkedIn';
-import GitHubIcon from '@mui/icons-material/GitHub';
-import TelegramIcon from '@mui/icons-material/Telegram';
 
-import DiscordIcon from '@components/Icons/DiscordIcon';
-import { env } from '@helpers/env';
+import DiscordIcon from '@/components/Icons/DiscordIcon';
+import { env } from '@/helpers/env';
 
 const StyledLink = styled(Link)(({ theme }) => ({
   textDecoration: 'none',

packages/apps/dashboard/client/src/components/Header/Header.tsx

@@ -1,20 +1,20 @@
 import { FC, useState } from 'react';
 
+import CloseIcon from '@mui/icons-material/Close';
+import MenuIcon from '@mui/icons-material/Menu';
+import { Link as MuiLink } from '@mui/material';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import IconButton from '@mui/material/IconButton';
-import { Link as MuiLink } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-import MenuIcon from '@mui/icons-material/Menu';
 import Drawer from '@mui/material/Drawer';
-import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
 import styled from '@mui/material/styles/styled';
+import Toolbar from '@mui/material/Toolbar';
 import { Link } from 'react-router-dom';
 
-import { LogoBlockIcon } from '@components/Icons/LogoBlockIcon';
-import { LogoBlockIconMobile } from '@components/Icons/LogoBlockIconMobile';
-import { env } from '@helpers/env';
+import { LogoBlockIcon } from '@/components/Icons/LogoBlockIcon';
+import { LogoBlockIconMobile } from '@/components/Icons/LogoBlockIconMobile';
+import { env } from '@/helpers/env';
 
 const NavLink = styled(MuiLink)(({ theme }) => ({
   color: theme.palette.primary.main,