fix(frontend): fix linter/typecheck warnings

Author: Genyus

frontend/eslint.config.js

@@ -1,13 +1,28 @@
+import { FlatCompat } from '@eslint/eslintrc';
 import js from '@eslint/js';
+import tseslint from '@typescript-eslint/eslint-plugin';
+import parser from '@typescript-eslint/parser';
 import react from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
-import { FlatCompat } from '@eslint/eslintrc';
-import parser from '@typescript-eslint/parser';
-import tseslint from '@typescript-eslint/eslint-plugin';
 
 const compat = new FlatCompat();
 
 export default [
+  // Global ignores
+  {
+    ignores: [
+      'node_modules/**',
+      'dist/**',
+      'build/**',
+      'coverage/**',
+      '*.config.js',
+      '*.config.ts',
+      'vite.config.ts',
+      'tailwind.config.ts',
+      'postcss.ts',
+    ],
+  },
+  // Base configuration
   js.configs.recommended,
   ...compat.extends('plugin:react/recommended'),
   ...compat.extends('plugin:@typescript-eslint/recommended'),
@@ -21,19 +36,58 @@ export default [
         sourceType: 'module',
         ecmaFeatures: { jsx: true },
       },
+      globals: {
+        // Browser globals
+        window: 'readonly',
+        document: 'readonly',
+        console: 'readonly',
+        setTimeout: 'readonly',
+        clearTimeout: 'readonly',
+        setInterval: 'readonly',
+        clearInterval: 'readonly',
+        localStorage: 'readonly',
+        sessionStorage: 'readonly',
+        fetch: 'readonly',
+        // Node globals (for build tools)
+        process: 'readonly',
+        Buffer: 'readonly',
+        __dirname: 'readonly',
+        __filename: 'readonly',
+        global: 'readonly',
+        module: 'readonly',
+        require: 'readonly',
+        exports: 'readonly',
+      },
     },
     plugins: {
       '@typescript-eslint': tseslint,
       react,
       'react-hooks': reactHooks,
     },
     rules: {
+      // React rules
       'react/react-in-jsx-scope': 'off',
       'react/prop-types': 'off',
+      'react/jsx-uses-react': 'off',
+      'react/jsx-uses-vars': 'error',
+      
+      // TypeScript rules
       '@typescript-eslint/no-unused-vars': 'warn',
       '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-unused-expressions': 'off', // Too strict for modern React
+      '@typescript-eslint/no-non-null-assertion': 'warn',
+      
+      // React Hooks rules
       'react-hooks/rules-of-hooks': 'error',
       'react-hooks/exhaustive-deps': 'warn',
+      
+      // General rules
+      'no-undef': 'off', // TypeScript handles this
+      'no-unused-vars': 'off', // Use @typescript-eslint/no-unused-vars instead
+      'no-prototype-builtins': 'warn',
+      'prefer-const': 'warn',
+      'no-var': 'error',
     },
     settings: {
       react: {

frontend/package.json

@@ -21,9 +21,7 @@
     "ag-grid-react": "^33.3.2",
     "axios": "^1.9.0",
     "mobx": "^6.13.7",
-    "mobx-react": "^9.2.0",
     "mobx-react-lite": "^4.1.0",
-    "playwright": "^1.52.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.6.2",
@@ -42,8 +40,6 @@
     "eslint": "^9.25.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "globals": "^16.0.0",
     "jsdom": "^26.1.0",
     "postcss": "^8.5.4",
     "tailwindcss": "^4.1.8",

frontend/pnpm-lock.yaml

@@ -1,22 +1,22 @@
+import { observer } from 'mobx-react-lite';
 import React from 'react';
-import {BrowserRouter, Navigate, Route, Routes} from 'react-router-dom';
-import {observer} from 'mobx-react-lite';
-import SignIn from './pages/SignIn';
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+import Admin from "./pages/Admin";
 import Main from './pages/Main';
-import userStore from './stores/userStore';
-import TraderSales from "./pages/TraderSales";
 import MiddleOffice from "./pages/MiddleOffice";
+import SignIn from './pages/SignIn';
 import Support from "./pages/Support";
-import Admin from "./pages/Admin";
+import TraderSales from "./pages/TraderSales";
 import PrivateRoute from "./PrivateRoute";
+import userStore from './stores/userStore';
 
 const AppRouter = observer(() => (
 
     <BrowserRouter>
         <Routes>
             <Route path="/signin" element={<SignIn/>}/>
             <Route path="/home" element={<PrivateRoute><Main/></PrivateRoute>}/>
-            <Route path="/trade" element={<PrivateRoute> <TraderSales/> </PrivateRoute>}/>
+            <Route path="/trade" element={<PrivateRoute><TraderSales/></PrivateRoute>}/>
             <Route path="/middle-office" element={<PrivateRoute><MiddleOffice/></PrivateRoute>}/>
             <Route path="/support" element={<PrivateRoute><Support/></PrivateRoute>}/>
             <Route path="/admin" element={<PrivateRoute><Admin/></PrivateRoute>}/>

frontend/src/AppRouter.tsx

@@ -1,18 +1,18 @@
 import React from "react";
-import Input from "./Input";
 import Dropdown from "./Dropdown";
+import Input from "./Input";
 
 /**
  * Props for the FieldRenderer component
  */
-export interface FieldRendererProps {
+interface FieldRendererProps {
     field: {
         key: string;
         label: string;
         type: string;
         options?: (() => { value: string; label: string }[] | string[]) | { value: string; label: string }[] | string[]
     };
-    value: string | number | undefined | null;
+    value: unknown | string | number | undefined | null;
     disabled: boolean;
     onChange: (e: React.ChangeEvent<HTMLInputElement> | string) => void;
 }

frontend/src/components/FieldRenderer.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import {useNavigate} from 'react-router-dom';
-//@ts-expect-error - Logo might not be found
-import logo from '../assets/trading-logo.svg'
-import Button from './Button';
+import { useNavigate } from 'react-router-dom';
+import logo from '../assets/trading-logo.svg';
 import userStore from "../stores/userStore";
+import Button from './Button';
 
 const navItems = [
     {label: 'Home', aria: 'home', path: '/home', profile: ['default', 'TRADER_SALES', 'MO', 'SUPPORT', 'ADMIN', 'SUPER_USER']},

frontend/src/components/Navbar.tsx

@@ -1,9 +1,9 @@
-import React, {ReactNode} from 'react';
-import {Navigate} from 'react-router-dom';
+import React, { ReactNode } from 'react';
+import { Navigate } from 'react-router-dom';
 
 interface ProtectedRouteProps {
     isAllowed: boolean;
-    redirectPath: string;
+    redirectPath?: string;
     children: ReactNode;
 }
 

frontend/src/components/ProtectedRoute.tsx

@@ -1,5 +1,5 @@
-import React, {useState} from 'react';
-import {useLocation, useSearchParams} from 'react-router-dom';
+import React, { useState } from 'react';
+import { useLocation, useSearchParams } from 'react-router-dom';
 import Button from './Button';
 
 const navItems = [
@@ -14,7 +14,7 @@ const navItems = [
 
 const Sidebar = () => {
     const [collapsed, setCollapsed] = useState(false);
-    const [searchParams, setSearchParams] = useSearchParams();
+    const [, setSearchParams] = useSearchParams();
 
     const handleSideBarClick = (param: string) => {
         setSearchParams({view: param});

frontend/src/components/Sidebar.tsx

@@ -1,13 +1,13 @@
 import React from "react";
-import Label from "./Label";
-import FieldRenderer from "./FieldRenderer";
+import { DISABLED_FIELDS, TRADE_FIELDS } from "../utils/tradeFormFields";
 import { Trade } from "../utils/tradeTypes";
-import { TRADE_FIELDS, DISABLED_FIELDS } from "../utils/tradeFormFields";
+import FieldRenderer from "./FieldRenderer";
+import Label from "./Label";
 
 /**
  * Props for the TradeDetails component
  */
-export interface TradeDetailsProps {
+interface TradeDetailsProps {
     trade?: Trade;
     mode: "view" | "edit";
     onFieldChange?: (key: keyof Trade, value: unknown) => void;