fix: eslint warnings (#252)

2025-07-20 10:59:57 +09:00
parent e6be84b67e
commit 9ae67fd303
118 changed files with 423 additions and 511 deletions
--- a/frontend/src/app/[locale]/DropdownAccount.tsx
+++ b/frontend/src/app/[locale]/DropdownAccount.tsx
@@ -78,7 +78,7 @@ export default function DropdownAccount({ messages, locale, onItemPress }: Props
          startContent={<UserAvatar context={context} />}
          endContent={<ChevronDown size={16} />}
        >
-          {context.isSignedIn() ? context.token!.user!.username : messages.signIn}
+          {context.isSignedIn() ? context.token?.user?.username : messages.signIn}
        </Button>
      </DropdownTrigger>
      {context.isSignedIn() ? (
--- a/frontend/src/app/[locale]/HeaderNavbarMenu.tsx
+++ b/frontend/src/app/[locale]/HeaderNavbarMenu.tsx
@@ -1,7 +1,5 @@
 'use client';
 import { useState, useContext } from 'react';
-import { TokenContext } from '@/utils/TokenProvider';
-import { Link, useRouter } from '@/src/i18n/routing';
 import { usePathname } from 'next/navigation';
 import Image from 'next/image';
 import {
@@ -12,16 +10,17 @@ import {
  NavbarBrand,
  NavbarItem,
  Link as NextUiLink,
-  Chip,
  ListboxItem,
  Listbox,
 } from '@heroui/react';
 import { ArrowRightFromLine, ArrowRightToLine, File, Globe, MoveUpRight, PenTool } from 'lucide-react';
+import DropdownAccount from './DropdownAccount';
+import DropdownLanguage from './DropdownLanguage';
 import { ThemeSwitch } from '@/components/ThemeSwitch';
 import { GithubIcon } from '@/components/icons';
 import { locales } from '@/config/selection';
-import DropdownAccount from './DropdownAccount';
-import DropdownLanguage from './DropdownLanguage';
+import { Link, useRouter } from '@/src/i18n/routing';
+import { TokenContext } from '@/utils/TokenProvider';
 import UserAvatar from '@/components/UserAvatar';
 import { LocaleCodeType } from '@/types/locale';
 import Config from '@/config/config';
--- a/frontend/src/app/[locale]/account/AccountPage.tsx
+++ b/frontend/src/app/[locale]/account/AccountPage.tsx
@@ -1,14 +1,15 @@
 'use client';
 import { useState, useEffect, useContext } from 'react';
-import { Link, NextUiLinkClasses } from '@/src/i18n/routing';
 import { Button, Card, CardHeader, CardFooter } from '@heroui/react';
-import { TokenContext } from '@/utils/TokenProvider';
 import Avatar from 'boring-avatars';
+import { ArrowRight } from 'lucide-react';
+import { Link, NextUiLinkClasses } from '@/src/i18n/routing';
+import { TokenContext } from '@/utils/TokenProvider';
 import { fetchMyProjects } from '@/utils/projectsControl';
 import { ProjectType } from '@/types/project';
 import PublicityChip from '@/components/PublicityChip';
 import { LocaleCodeType } from '@/types/locale';
-import { ArrowRight } from 'lucide-react';
+import { logError } from '@/utils/errorHandler';

 type AccountPageMessages = {
  yourProjects: string;
@@ -36,8 +37,8 @@ export default function AccountPage({ messages, locale }: Props) {
      try {
        const data = await fetchMyProjects(context.token.access_token);
        setMyProjects(data);
-      } catch (error: any) {
-        console.error('Error in effect:', error.message);
+      } catch (error: unknown) {
+        logError('Error fetching data:', error);
      }
    }

@@ -53,13 +54,13 @@ export default function AccountPage({ messages, locale }: Props) {
              <CardHeader className="flex gap-6">
                <Avatar
                  size={48}
-                  name={context.token!.user!.username}
+                  name={context.token?.user?.username}
                  variant="beam"
                  colors={['#0A0310', '#49007E', '#FF005B', '#FF7D10', '#FFB238']}
                />
                <div className="flex flex-col">
-                  <p className="text-xl font-bold">{context.token!.user!.username}</p>
-                  <p className="text-lg text-default-500">{context.token!.user!.email}</p>
+                  <p className="text-xl font-bold">{context.token?.user?.username}</p>
+                  <p className="text-lg text-default-500">{context.token?.user?.email}</p>
                </div>
              </CardHeader>
            </Card>
--- a/frontend/src/app/[locale]/account/authControl.ts
+++ b/frontend/src/app/[locale]/account/authControl.ts
@@ -1,6 +1,7 @@
 import { UserType } from '@/types/user';
 import Config from '@/config/config';
 import { roles } from '@/config/selection';
+import { logError } from '@/utils/errorHandler';
 const apiServer = Config.apiServer;

 async function signUp(newUser: UserType) {
@@ -21,8 +22,8 @@ async function signUp(newUser: UserType) {
    }
    const token = await response.json();
    return token;
-  } catch (error: any) {
-    console.error('Error sign up:', error);
+  } catch (error: unknown) {
+    logError('Error sign up:', error);
    throw error;
  }
 }
@@ -45,8 +46,8 @@ async function signIn(signInUser: UserType) {
    }
    const token = await response.json();
    return token;
-  } catch (error: any) {
-    console.error('Error sign in:', error);
+  } catch (error: unknown) {
+    logError('Error sign in:', error);
    throw error;
  }
 }
--- a/frontend/src/app/[locale]/account/authPage.tsx
+++ b/frontend/src/app/[locale]/account/authPage.tsx
@@ -1,13 +1,12 @@
 'use client';
-import React from 'react';
 import { useState, useContext } from 'react';
 import { Input, Button, Card, CardHeader, CardBody } from '@heroui/react';
-import { Link } from '@/src/i18n/routing';
 import { ChevronRight, Eye, EyeOff } from 'lucide-react';
-import { UserType, AuthMessages } from '@/types/user';
-import { roles } from '@/config/selection';
 import { signUp, signIn, signInAsGuest } from './authControl';
 import { isValidEmail, isValidPassword } from './validate';
+import { Link } from '@/src/i18n/routing';
+import { UserType, AuthMessages } from '@/types/user';
+import { roles } from '@/config/selection';
 import { TokenContext } from '@/utils/TokenProvider';
 import { useRouter } from '@/src/i18n/routing';
 import Config from '@/config/config';
--- a/frontend/src/app/[locale]/account/layout.tsx
+++ b/frontend/src/app/[locale]/account/layout.tsx
@@ -1,5 +1,5 @@
-import { LocaleCodeType } from '@/types/locale';
 import { getTranslations } from 'next-intl/server';
+import { LocaleCodeType } from '@/types/locale';

 export async function generateMetadata({ params: { locale } }: { params: { locale: LocaleCodeType } }) {
  const t = await getTranslations({ locale, namespace: 'Auth' });
--- a/frontend/src/app/[locale]/account/signin/page.tsx
+++ b/frontend/src/app/[locale]/account/signin/page.tsx
@@ -1,7 +1,7 @@
-import { PageType } from '@/types/base';
-import AuthPage from '../authPage';
 import { getTranslations } from 'next-intl/server';
 import { useTranslations } from 'next-intl';
+import AuthPage from '../authPage';
+import { PageType } from '@/types/base';
 import { LocaleCodeType } from '@/types/locale';

 export async function generateMetadata({ params: { locale } }: { params: { locale: LocaleCodeType } }) {
--- a/frontend/src/app/[locale]/account/signup/page.tsx
+++ b/frontend/src/app/[locale]/account/signup/page.tsx
@@ -1,7 +1,7 @@
-import { PageType } from '@/types/base';
-import AuthPage from '../authPage';
 import { getTranslations } from 'next-intl/server';
 import { useTranslations } from 'next-intl';
+import AuthPage from '../authPage';
+import { PageType } from '@/types/base';
 import { LocaleCodeType } from '@/types/locale';

 export async function generateMetadata({ params: { locale } }: { params: { locale: LocaleCodeType } }) {
--- a/frontend/src/app/[locale]/admin/AdminPage.tsx
+++ b/frontend/src/app/[locale]/admin/AdminPage.tsx
@@ -1,16 +1,16 @@
 'use client';
-import React from 'react';
 import { useState, useEffect, useContext } from 'react';
+import { Button, addToast } from '@heroui/react';
+import UsersTable from './UsersTable';
 import { UserType, AdminMessages } from '@/types/user';
 import { TokenContext } from '@/utils/TokenProvider';
 import { useRouter } from '@/src/i18n/routing';
-import UsersTable from './UsersTable';
 import Config from '@/config/config';
 import { LocaleCodeType } from '@/types/locale';
 import { updateUserRole } from '@/utils/usersControl';
-import { Button, addToast } from '@heroui/react';
 import { roles } from '@/config/selection';
 import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
+import { logError } from '@/utils/errorHandler';
 const apiServer = Config.apiServer;

 type Props = {
@@ -36,8 +36,8 @@ async function fetchUsers(jwt: string) {
    }
    const data = await response.json();
    return data;
-  } catch (error: any) {
-    console.error('Error fetching data:', error.message);
+  } catch (error: unknown) {
+    logError('Error fetching data:', error);
  }
 }

@@ -66,8 +66,8 @@ export default function AdminPage({ messages, locale }: Props) {
        if (tokenContext.token.user) {
          setMyself(tokenContext.token.user);
        }
-      } catch (error: any) {
-        console.error('Error in effect:', error.message);
+      } catch (error: unknown) {
+        logError('Error fetching users:', error);
      }
    }

--- a/frontend/src/app/[locale]/admin/UsersTable.tsx
+++ b/frontend/src/app/[locale]/admin/UsersTable.tsx
@@ -14,9 +14,9 @@ import {
  DropdownItem,
 } from '@heroui/react';
 import { ChevronDown } from 'lucide-react';
+import Avatar from 'boring-avatars';
 import { UserType, AdminMessages } from '@/types/user';
 import { roles } from '@/config/selection';
-import Avatar from 'boring-avatars';

 type Props = {
  users: UserType[];
--- a/frontend/src/app/[locale]/health/HealthPage.tsx
+++ b/frontend/src/app/[locale]/health/HealthPage.tsx
@@ -4,6 +4,7 @@ import { Table, TableBody, TableRow, TableHeader, TableCell, Chip, TableColumn }
 import { LocaleCodeType } from '@/types/locale';
 import { HealthMessages } from '@/types/health';
 import Config from '@/config/config';
+import { logError } from '@/utils/errorHandler';
 const apiServer = Config.apiServer;

 type Props = {
@@ -21,8 +22,8 @@ async function fetchHealth() {
    }
    const data = await response.json();
    return data;
-  } catch (error: any) {
-    console.log('Error fetching health data:', error);
+  } catch (error: unknown) {
+    logError('Error fetching health data:', error);
  }
 }

@@ -38,8 +39,8 @@ export default function HealthPage({ messages, locale }: Props) {
        const data = await fetchHealth();
        setStatus(data.status);
        setIsFetching(false);
-      } catch (error: any) {
-        console.error('Error in effect:', error.message);
+      } catch (error: unknown) {
+        logError('Error in effect:', error);
      }
    }

--- a/frontend/src/app/[locale]/layout.tsx
+++ b/frontend/src/app/[locale]/layout.tsx
@@ -1,12 +1,12 @@
 import '@/styles/globals.css';
-import { fontSans } from '@/config/fonts';
-import { Providers } from './providers';
-import Header from './Header';
 import clsx from 'clsx';
 import { getTranslations } from 'next-intl/server';
 import { useTranslations } from 'next-intl';
-import { LocaleCodeType } from '@/types/locale';
 import { headers } from 'next/headers';
+import Header from './Header';
+import { Providers } from './providers';
+import { LocaleCodeType } from '@/types/locale';
+import { fontSans } from '@/config/fonts';

 export async function generateMetadata({ params: { locale } }: { params: { locale: LocaleCodeType } }) {
  const headersList = headers();
--- a/frontend/src/app/[locale]/projects/ProjectsPage.tsx
+++ b/frontend/src/app/[locale]/projects/ProjectsPage.tsx
@@ -2,12 +2,13 @@
 import { useEffect, useState, useContext } from 'react';
 import { Button } from '@heroui/react';
 import { Plus } from 'lucide-react';
+import ProjectsTable from './ProjectsTable';
 import { TokenContext } from '@/utils/TokenProvider';
 import { ProjectDialogMessages, ProjectType, ProjectsMessages } from '@/types/project';
-import ProjectsTable from './ProjectsTable';
 import ProjectDialog from '@/components/ProjectDialog';
 import { fetchProjects, createProject } from '@/utils/projectsControl';
 import { LocaleCodeType } from '@/types/locale';
+import { logError } from '@/utils/errorHandler';

 export type Props = {
  messages: ProjectsMessages;
@@ -27,8 +28,8 @@ export default function ProjectsPage({ messages, projectDialogMessages, locale }
      try {
        const data = await fetchProjects(context.token.access_token);
        setProjects(data);
-      } catch (error: any) {
-        console.error('Error in effect:', error.message);
+      } catch (error: unknown) {
+        logError('Error fetching data:', error);
      }
    }

--- a/frontend/src/app/[locale]/projects/ProjectsTable.tsx
+++ b/frontend/src/app/[locale]/projects/ProjectsTable.tsx
@@ -1,8 +1,8 @@
 import { useState, useMemo, useCallback, ReactNode } from 'react';
 import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, SortDescriptor } from '@heroui/react';
+import dayjs from 'dayjs';
 import { Link, NextUiLinkClasses } from '@/src/i18n/routing';
 import { ProjectType, ProjectsMessages } from '@/types/project';
-import dayjs from 'dayjs';
 import PublicityChip from '@/components/PublicityChip';
 import { LocaleCodeType } from '@/types/locale';

@@ -39,35 +39,43 @@ export default function ProjectsTable({ projects, messages, locale }: Props) {
    return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
  };

-  const renderCell = useCallback((project: ProjectType, columnKey: string): ReactNode => {
-    const cellValue = project[columnKey as keyof ProjectType];
+  const renderCell = useCallback(
+    (project: ProjectType, columnKey: string): ReactNode => {
+      const cellValue = project[columnKey as keyof ProjectType];

-    switch (columnKey) {
-      case 'id':
-        return <span>{cellValue as number}</span>;
-      case 'isPublic':
-        return (
-          <PublicityChip isPublic={cellValue as boolean} publicText={messages.public} privateText={messages.private} />
-        );
-      case 'name':
-        const maxLength = 30;
-        const truncatedDetail = truncateText(project.detail, maxLength);
-        return (
-          <div>
-            <Link href={`/projects/${project.id}/home`} locale={locale} className={NextUiLinkClasses}>
-              {cellValue as string}
-            </Link>
-            <div className="text-xs text-default-500">
-              <div>{truncatedDetail}</div>
+      switch (columnKey) {
+        case 'id':
+          return <span>{cellValue as number}</span>;
+        case 'isPublic':
+          return (
+            <PublicityChip
+              isPublic={cellValue as boolean}
+              publicText={messages.public}
+              privateText={messages.private}
+            />
+          );
+        case 'name': {
+          const maxLength = 30;
+          const truncatedDetail = truncateText(project.detail, maxLength);
+          return (
+            <div>
+              <Link href={`/projects/${project.id}/home`} locale={locale} className={NextUiLinkClasses}>
+                {cellValue as string}
+              </Link>
+              <div className="text-xs text-default-500">
+                <div>{truncatedDetail}</div>
+              </div>
            </div>
-          </div>
-        );
-      case 'updatedAt':
-        return <span>{dayjs(cellValue as number).format('YYYY/MM/DD HH:mm')}</span>;
-      default:
-        return cellValue as string;
-    }
-  }, []);
+          );
+        }
+        case 'updatedAt':
+          return <span>{dayjs(cellValue as number).format('YYYY/MM/DD HH:mm')}</span>;
+        default:
+          return cellValue as string;
+      }
+    },
+    [locale, messages.private, messages.public]
+  );

  const classNames = useMemo(
    () => ({
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/FolderDialog.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/FolderDialog.tsx
@@ -1,5 +1,4 @@
 'use client';
-import React from 'react';
 import { useState, useEffect } from 'react';
 import { Button, Input, Textarea, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@heroui/react';
 import { FolderType, FoldersMessages } from '@/types/folder';
@@ -47,7 +46,7 @@ export default function FolderDialog({ isOpen, editingFolder, onCancel, onSubmit
        text: '',
      });
    }
-  }, [editingFolder]);
+  }, [editingFolder, folderDetail, folderName]);

  const clear = () => {
    setFolderName({
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/FoldersPane.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/FoldersPane.tsx
@@ -1,15 +1,16 @@
 'use client';
-import { FolderType, FoldersMessages } from '@/types/folder';
 import { useState, useEffect, useContext } from 'react';
 import { Button, Listbox, ListboxItem } from '@heroui/react';
 import { Folder, Plus } from 'lucide-react';
+import FolderDialog from './FolderDialog';
+import FolderEditMenu from './FolderEditMenu';
+import { fetchFolders, createFolder, updateFolder, deleteFolder } from './foldersControl';
 import { usePathname, useRouter } from '@/src/i18n/routing';
 import { TokenContext } from '@/utils/TokenProvider';
 import useGetCurrentIds from '@/utils/useGetCurrentIds';
-import FolderDialog from './FolderDialog';
-import FolderEditMenu from './FolderEditMenu';
 import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
-import { fetchFolders, createFolder, updateFolder, deleteFolder } from './foldersControl';
+import { FolderType, FoldersMessages } from '@/types/folder';
+import { logError } from '@/utils/errorHandler';

 type Props = {
  projectId: string;
@@ -49,13 +50,13 @@ export default function FoldersPane({ projectId, messages, locale }: Props) {
          const smallestFolderId = Math.min(...folders.map((folder) => folder.id));
          router.push(`/projects/${projectId}/folders/${smallestFolderId}/cases`, { locale: locale });
        }
-      } catch (error: any) {
-        console.error('Error in effect:', error.message);
+      } catch (error: unknown) {
+        logError('Error fetching folders:', error);
      }
    }

    fetchDataEffect();
-  }, [context, folderId]);
+  }, [context, folderId, locale, pathname, projectId, router]);

  const openDialogForCreate = () => {
    setIsFolderDialogOpen(true);
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CaseDialog.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CaseDialog.tsx
@@ -1,6 +1,5 @@
 'use client';
-import React from 'react';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { Button, Input, Textarea, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@heroui/react';
 import { CasesMessages } from '@/types/case';

--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx
@@ -8,6 +8,7 @@ import { CaseType, CasesMessages } from '@/types/case';
 import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
 import { PriorityMessages } from '@/types/priority';
 import { LocaleCodeType } from '@/types/locale';
+import { logError } from '@/utils/errorHandler';

 type Props = {
  projectId: string;
@@ -30,8 +31,8 @@ export default function CasesPane({ projectId, folderId, messages, priorityMessa
      try {
        const data = await fetchCases(context.token.access_token, Number(folderId));
        setCases(data);
-      } catch (error: any) {
-        console.error('Error in effect:', error.message);
+      } catch (error: unknown) {
+        logError('Error fetching cases:', error);
      }
    }

--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx
@@ -15,7 +15,7 @@ import {
  SortDescriptor,
  ButtonGroup,
 } from '@heroui/react';
-import { Plus, MoreVertical, Trash, Download, FileDown, ChevronDown, FileJson, FileSpreadsheet } from 'lucide-react';
+import { Plus, MoreVertical, Trash, FileDown, ChevronDown, FileJson, FileSpreadsheet } from 'lucide-react';
 import { Link } from '@/src/i18n/routing';
 import { CaseType, CasesMessages } from '@/types/case';
 import { PriorityMessages } from '@/types/priority';
@@ -122,6 +122,7 @@ export default function TestCaseTable({
      default:
        return cellValue as string;
    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const handleDeleteCases = () => {
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx
@@ -1,19 +1,20 @@
 'use client';
 import { useState, useEffect, useContext, ChangeEvent, DragEvent } from 'react';
 import { Input, Textarea, Select, SelectItem, Button, Divider, Tooltip, addToast, Badge } from '@heroui/react';
-import { useRouter } from '@/src/i18n/routing';
 import { Save, Plus, ArrowLeft, Circle } from 'lucide-react';
-import { priorities, testTypes, templates } from '@/config/selection';
 import CaseStepsEditor from './CaseStepsEditor';
 import CaseAttachmentsEditor from './CaseAttachmentsEditor';
-import { fetchCase, updateCase } from '@/utils/caseControl';
 import { updateSteps } from './stepControl';
 import { fetchCreateAttachments, fetchDownloadAttachment, fetchDeleteAttachment } from './attachmentControl';
+import { fetchCase, updateCase } from '@/utils/caseControl';
+import { priorities, testTypes, templates } from '@/config/selection';
+import { useRouter } from '@/src/i18n/routing';
 import { TokenContext } from '@/utils/TokenProvider';
 import { useFormGuard } from '@/utils/formGuard';
 import { CaseType, AttachmentType, CaseMessages, StepType } from '@/types/case';
 import { PriorityMessages } from '@/types/priority';
 import { TestTypeMessages } from '@/types/testType';
+import { logError } from '@/utils/errorHandler';

 const defaultTestCase = {
  id: 0,
@@ -220,13 +221,13 @@ export default function CaseEditor({
          step.editState = 'notChanged';
        });
        setTestCase(data);
-      } catch (error: any) {
-        console.error('Error in effect:', error.message);
+      } catch (error: unknown) {
+        logError('Error fetching case data', error);
      }
    }

    fetchDataEffect();
-  }, [tokenContext]);
+  }, [caseId, tokenContext]);

  return (
    <>
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseStepsEditor.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseStepsEditor.tsx
@@ -1,6 +1,6 @@
 import { Textarea, Button, Tooltip, Avatar } from '@heroui/react';
-import { CaseMessages, StepType } from '@/types/case';
 import { Plus, Trash } from 'lucide-react';
+import { CaseMessages, StepType } from '@/types/case';

 type Props = {
  isDisabled: boolean;
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/attachmentControl.ts
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/attachmentControl.ts
@@ -1,4 +1,5 @@
 import Config from '@/config/config';
+import { logError } from '@/utils/errorHandler';
 const apiServer = Config.apiServer;

 async function fetchDownloadAttachment(attachmentId: number, downloadFileName: string) {
@@ -26,8 +27,8 @@ async function fetchDownloadAttachment(attachmentId: number, downloadFileName: s
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
-  } catch (error: any) {
-    console.error('Error downloading file:', error);
+  } catch (error: unknown) {
+    logError('Error downloading attachment', error);
    throw error;
  }
 }
@@ -51,8 +52,8 @@ async function fetchCreateAttachments(caseId: number, files: File[]) {

    const responseData = await response.json();
    return responseData;
-  } catch (error: any) {
-    console.error('Error uploading files:', error);
+  } catch (error: unknown) {
+    logError('Error uploading files', error);
  }
 }

@@ -71,8 +72,8 @@ async function fetchDeleteAttachment(attachmentId: number) {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
-  } catch (error: any) {
-    console.error('Error deleting file:', error);
+  } catch (error: unknown) {
+    logError('Error deleting file:', error);
    throw error;
  }
 }
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx
@@ -1,6 +1,6 @@
-import { PriorityMessages } from '@/types/priority';
-import CaseEditor from './CaseEditor';
 import { useTranslations } from 'next-intl';
+import CaseEditor from './CaseEditor';
+import { PriorityMessages } from '@/types/priority';
 import { TestTypeMessages } from '@/types/testType';

 export default function Page({
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/stepControl.ts
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/stepControl.ts
@@ -1,5 +1,6 @@
 import Config from '@/config/config';
 import { StepType } from '@/types/case';
+import { logError } from '@/utils/errorHandler';
 const apiServer = Config.apiServer;

 async function updateSteps(jwt: string, caseId: number, steps: StepType[]) {
@@ -20,8 +21,8 @@ async function updateSteps(jwt: string, caseId: number, steps: StepType[]) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return await response.json();
-  } catch (error: any) {
-    console.error('Error deleting project:', error);
+  } catch (error: unknown) {
+    logError('Error updating steps', error);
    throw error;
  }
 }
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/foldersControl.ts
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/foldersControl.ts
@@ -1,4 +1,5 @@
 import Config from '@/config/config';
+import { logError } from '@/utils/errorHandler';
 const apiServer = Config.apiServer;

 /**
@@ -21,8 +22,8 @@ async function fetchFolders(jwt: string, projectId: number) {

    const data = await response.json();
    return data;
-  } catch (error: any) {
-    console.error('Error fetching data:', error.message);
+  } catch (error: unknown) {
+    logError('Error fetching data:', error);
  }
 }

@@ -60,8 +61,8 @@ async function createFolder(
    }
    const data = await response.json();
    return data;
-  } catch (error: any) {
-    console.error('Error creating new project:', error);
+  } catch (error: unknown) {
+    logError('Error creating new folder:', error);
    throw error;
  }
 }
@@ -102,8 +103,8 @@ async function updateFolder(
    }
    const data = await response.json();
    return data;
-  } catch (error: any) {
-    console.error('Error updating project:', error);
+  } catch (error: unknown) {
+    logError('Error updating folder:', error);
    throw error;
  }
 }
@@ -127,8 +128,8 @@ async function deleteFolder(jwt: string, folderId: number) {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
-  } catch (error: any) {
-    console.error('Error deleting project:', error);
+  } catch (error: unknown) {
+    logError('Error deleting folder:', error);
    throw error;
  }
 }
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/layout.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/layout.tsx
@@ -1,5 +1,5 @@
-import FoldersPane from './FoldersPane';
 import { useTranslations } from 'next-intl';
+import FoldersPane from './FoldersPane';

 export default function FoldersLayout({
  children,
--- a/frontend/src/app/[locale]/projects/[projectId]/home/ProjectHome.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/home/ProjectHome.tsx
@@ -1,22 +1,23 @@
 'use client';
 import { useState, useEffect, useContext } from 'react';
-import { title, subtitle } from '@/components/primitives';
 import { Card, CardBody, Chip, Divider } from '@heroui/react';
 import { Folder, Clipboard, FlaskConical } from 'lucide-react';
-import { ProgressSeriesType } from '@/types/run';
-import { HomeMessages } from './page';
-import { TokenContext } from '@/utils/TokenProvider';
-import { aggregateBasicInfo, aggregateTestPriority, aggregateTestType, aggregateProgress } from './aggregate';
-import Config from '@/config/config';
 import { useTheme } from 'next-themes';
+import { aggregateBasicInfo, aggregateTestPriority, aggregateTestType, aggregateProgress } from './aggregate';
+import { HomeMessages } from './page';
 import TestTypesChart from './TestTypesDonutChart';
 import TestPriorityChart from './TestPriorityDonutChart';
 import TestProgressBarChart from './TestProgressColumnChart';
+import Config from '@/config/config';
+import { TokenContext } from '@/utils/TokenProvider';
+import { ProgressSeriesType } from '@/types/run';
+import { title, subtitle } from '@/components/primitives';
 import { TestRunCaseStatusMessages } from '@/types/status';
 import { TestTypeMessages } from '@/types/testType';
 import { PriorityMessages } from '@/types/priority';
 import { ProjectType } from '@/types/project';
 import { CasePriorityCountType, CaseTypeCountType } from '@/types/chart';
+import { logError } from '@/utils/errorHandler';

 const apiServer = Config.apiServer;

@@ -38,8 +39,8 @@ async function fetchProject(jwt: string, projectId: number) {
    }
    const data = await response.json();
    return data;
-  } catch (error: any) {
-    console.error('Error fetching data:', error.message);
+  } catch (error: unknown) {
+    logError('Error fetching data:', error);
  }
 }

@@ -59,7 +60,7 @@ export function ProjectHome({
  priorityMessages,
 }: Props) {
  const context = useContext(TokenContext);
-  const { theme, setTheme } = useTheme();
+  const { theme } = useTheme();
  const [project, setProject] = useState<ProjectType>({
    id: 0,
    name: '',
@@ -88,13 +89,13 @@ export function ProjectHome({
      try {
        const data = await fetchProject(context.token.access_token, Number(projectId));
        setProject(data);
-      } catch (error: any) {
-        console.error('Error in effect:', error.message);
+      } catch (error: unknown) {
+        logError('Error in effect:', error);
      }
    }

    fetchDataEffect();
-  }, [context]);
+  }, [context, projectId]);

  useEffect(() => {
    async function aggregate() {
@@ -118,7 +119,7 @@ export function ProjectHome({
    }

    aggregate();
-  }, [project]);
+  }, [project, testRunCaseStatusMessages]);

  return (
    <div className="container mx-auto max-w-5xl pt-6 px-6 flex-grow">
--- a/frontend/src/app/[locale]/projects/[projectId]/home/TestPriorityDonutChart.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/home/TestPriorityDonutChart.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useState, useEffect } from 'react';
 import dynamic from 'next/dynamic';
 import { priorities } from '@/config/selection';
@@ -34,7 +33,7 @@ export default function TestPriorityDonutChart({ priorityCounts, priorityMessage
        const colors = priorities.map((entry) => entry.chartColor);
        const legend = {
          labels: {
-            colors: priorities.map((entry) => {
+            colors: priorities.map(() => {
              if (theme === 'light') {
                return 'black';
              } else {
@@ -52,7 +51,7 @@ export default function TestPriorityDonutChart({ priorityCounts, priorityMessage
    };

    updateChartDate();
-  }, [priorityCounts, theme]);
+  }, [priorityCounts, priorityMessages, theme]);

  return <Chart options={chartData.options} series={chartData.series} type="donut" width={'100%'} height={'100%'} />;
 }
--- a/frontend/src/app/[locale]/projects/[projectId]/home/TestProgressColumnChart.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/home/TestProgressColumnChart.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useState, useEffect } from 'react';
 import dynamic from 'next/dynamic';
 import { ProgressSeriesType } from '@/types/run';
@@ -24,7 +23,7 @@ export default function TestProgressBarChart({ progressSeries, progressCategorie
  useEffect(() => {
    const updateChartDate = () => {
      if (progressSeries) {
-        const legendsLabelColors = testRunCaseStatus.map((itr) => {
+        const legendsLabelColors = testRunCaseStatus.map(() => {
          if (theme === 'light') {
            return 'black';
          } else {
--- a/frontend/src/app/[locale]/projects/[projectId]/home/TestTypesDonutChart.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/home/TestTypesDonutChart.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useState, useEffect } from 'react';
 import dynamic from 'next/dynamic';
 import { testTypes } from '@/config/selection';
@@ -33,7 +32,7 @@ export default function TestTypesDonutChart({ typesCounts, testTypeMessages, the
        const colors = testTypes.map((entry) => entry.chartColor);
        const legend = {
          labels: {
-            colors: testTypes.map((entry) => {
+            colors: testTypes.map(() => {
              if (theme === 'light') {
                return 'black';
              } else {
@@ -51,7 +50,7 @@ export default function TestTypesDonutChart({ typesCounts, testTypeMessages, the
    };

    updateChartDate();
-  }, [typesCounts, theme]);
+  }, [typesCounts, theme, testTypeMessages]);

  return <Chart options={chartData.options} series={chartData.series} type="donut" width={'100%'} height={'100%'} />;
 }
--- a/frontend/src/app/[locale]/projects/[projectId]/home/aggregate.ts
+++ b/frontend/src/app/[locale]/projects/[projectId]/home/aggregate.ts
@@ -18,7 +18,7 @@ function aggregateBasicInfo(project: ProjectType) {

 function aggregateTestType(project: ProjectType): CaseTypeCountType[] {
  // count how many test cases are for each type
-  const typesCounts: number[] = testTypes.map((entry) => {
+  const typesCounts: number[] = testTypes.map(() => {
    return 0;
  });
  project.Folders.forEach((folder) => {
@@ -38,7 +38,7 @@ function aggregateTestType(project: ProjectType): CaseTypeCountType[] {

 function aggregateTestPriority(project: ProjectType) {
  // count how many test cases are for each priority
-  const priorityCounts: number[] = priorities.map((entry) => {
+  const priorityCounts: number[] = priorities.map(() => {
    return 0;
  });
  project.Folders.forEach((folder) => {
@@ -58,10 +58,10 @@ function aggregateTestPriority(project: ProjectType) {

 function aggregateProgress(project: ProjectType, testRunCaseStatusMessages: TestRunCaseStatusMessages) {
  type ChartSeries = { name: string; data: number[] };
-  let series: ChartSeries[] = testRunCaseStatus.map((status) => {
+  const series: ChartSeries[] = testRunCaseStatus.map((status) => {
    return { name: testRunCaseStatusMessages[status.uid], data: [] };
  });
-  let categories: string[] = [];
+  const categories: string[] = [];

  project.Runs.forEach((run) => {
    if (!run.RunCases) {
--- a/frontend/src/app/[locale]/projects/[projectId]/home/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/home/page.tsx
@@ -1,7 +1,7 @@
-import { LocaleCodeType } from '@/types/locale';
-import { ProjectHome } from './ProjectHome';
 import { getTranslations } from 'next-intl/server';
 import { useTranslations } from 'next-intl';
+import { ProjectHome } from './ProjectHome';
+import { LocaleCodeType } from '@/types/locale';
 import { PriorityMessages } from '@/types/priority';
 import { TestTypeMessages } from '@/types/testType';
 import { TestRunCaseStatusMessages } from '@/types/status';
--- a/frontend/src/app/[locale]/projects/[projectId]/layout.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/layout.tsx
@@ -1,6 +1,6 @@
-import { ProjectMessages } from '@/types/project';
-import Sidebar from './Sidebar';
 import { useTranslations } from 'next-intl';
+import Sidebar from './Sidebar';
+import { ProjectMessages } from '@/types/project';

 export default function SidebarLayout({
  children,
--- a/frontend/src/app/[locale]/projects/[projectId]/members/AddMemberDialog.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/members/AddMemberDialog.tsx
@@ -1,12 +1,12 @@
 'use client';
-import React from 'react';
 import { useState, useEffect, useContext } from 'react';
 import { Button, Input, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@heroui/react';
+import CandidatesTable from './CandidatesTable';
 import { TokenContext } from '@/utils/TokenProvider';
 import { UserType } from '@/types/user';
 import { searchUsers } from '@/utils/usersControl';
-import CandidatesTable from './CandidatesTable';
 import { MembersMessages } from '@/types/member';
+import { logError } from '@/utils/errorHandler';

 type Props = {
  isOpen: boolean;
@@ -34,13 +34,13 @@ export default function AddMemberDialog({ isOpen, projectId, onCancel, onAddMemb
      try {
        const data = await searchUsers(context.token.access_token, Number(projectId), searchText);
        setCandidates(data);
-      } catch (error: any) {
-        console.error('Error in effect:', error.message);
+      } catch (error: unknown) {
+        logError('Error fetching data:', error);
      }
    }

    fetchDataEffect();
-  }, [searchText]);
+  }, [context, projectId, searchText]);

  const handleExit = () => {
    setSearchText('');
--- a/frontend/src/app/[locale]/projects/[projectId]/members/CandidatesTable.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/members/CandidatesTable.tsx
@@ -1,7 +1,7 @@
 import { useMemo, useCallback } from 'react';
 import { Button, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell } from '@heroui/react';
-import { UserType } from '@/types/user';
 import Avatar from 'boring-avatars';
+import { UserType } from '@/types/user';
 import { MembersMessages } from '@/types/member';

 type Props = {
@@ -18,33 +18,36 @@ export default function MembersTable({ candidates, onAddPress, messages }: Props
    { name: messages.add, uid: 'add', sortable: false },
  ];

-  const renderCell = useCallback((candidate: UserType, columnKey: string) => {
-    const cellValue = candidate[columnKey as keyof UserType];
+  const renderCell = useCallback(
+    (candidate: UserType, columnKey: string) => {
+      const cellValue = candidate[columnKey as keyof UserType];

-    switch (columnKey) {
-      case 'avatar':
-        return (
-          <Avatar
-            size={16}
-            name={candidate.username}
-            variant="beam"
-            colors={['#0A0310', '#49007E', '#FF005B', '#FF7D10', '#FFB238']}
-          />
-        );
-      case 'email':
-        return cellValue;
-      case 'username':
-        return cellValue;
-      case 'add':
-        return (
-          <Button color="primary" variant="faded" size="sm" onPress={() => onAddPress(candidate)}>
-            {messages.add}
-          </Button>
-        );
-      default:
-        return cellValue;
-    }
-  }, []);
+      switch (columnKey) {
+        case 'avatar':
+          return (
+            <Avatar
+              size={16}
+              name={candidate.username}
+              variant="beam"
+              colors={['#0A0310', '#49007E', '#FF005B', '#FF7D10', '#FFB238']}
+            />
+          );
+        case 'email':
+          return cellValue;
+        case 'username':
+          return cellValue;
+        case 'add':
+          return (
+            <Button color="primary" variant="faded" size="sm" onPress={() => onAddPress(candidate)}>
+              {messages.add}
+            </Button>
+          );
+        default:
+          return cellValue;
+      }
+    },
+    [messages.add, onAddPress]
+  );

  const classNames = useMemo(
    () => ({
--- a/frontend/src/app/[locale]/projects/[projectId]/members/MembersPage.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/members/MembersPage.tsx
@@ -1,23 +1,22 @@
 'use client';
-import React from 'react';
 import { useState, useEffect, useContext } from 'react';
 import { Button } from '@heroui/react';
 import { Plus } from 'lucide-react';
-import { MemberType, UserType } from '@/types/user';
-import { MembersMessages } from '@/types/member';
-import { TokenContext } from '@/utils/TokenProvider';
 import MembersTable from './MembersTable';
 import AddMemberDialog from './AddMemberDialog';
 import { fetchProjectMembers, addMember, deleteMember, updateMember } from './membersControl';
+import { MemberType, UserType } from '@/types/user';
+import { MembersMessages } from '@/types/member';
+import { TokenContext } from '@/utils/TokenProvider';
 import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
+import { logError } from '@/utils/errorHandler';

 type Props = {
  projectId: string;
  messages: MembersMessages;
-  locale: string;
 };

-export default function MembersPage({ projectId, messages, locale }: Props) {
+export default function MembersPage({ projectId, messages }: Props) {
  const context = useContext(TokenContext);
  const [members, setMembers] = useState<MemberType[]>([]);
  const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -31,13 +30,13 @@ export default function MembersPage({ projectId, messages, locale }: Props) {
      try {
        const data = await fetchProjectMembers(context.token.access_token, projectId);
        setMembers(data);
-      } catch (error: any) {
-        console.error('Error in effect:', error.message);
+      } catch (error: unknown) {
+        logError('Error fetching members:', error);
      }
    }

    fetchDataEffect();
-  }, [context]);
+  }, [context, projectId]);

  const handleAddMember = async (userAdded: UserType) => {
    if (userAdded.id) {
--- a/frontend/src/app/[locale]/projects/[projectId]/members/MembersTable.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/members/MembersTable.tsx
@@ -14,9 +14,9 @@ import {
  DropdownItem,
 } from '@heroui/react';
 import { ChevronDown } from 'lucide-react';
+import Avatar from 'boring-avatars';
 import { MemberType, UserType } from '@/types/user';
 import { memberRoles } from '@/config/selection';
-import Avatar from 'boring-avatars';
 import { MembersMessages } from '@/types/member';

 type Props = {
--- a/frontend/src/app/[locale]/projects/[projectId]/members/membersControl.ts
+++ b/frontend/src/app/[locale]/projects/[projectId]/members/membersControl.ts
@@ -1,3 +1,4 @@
+import { logError } from '@/utils/errorHandler';
 import Config from '@/config/config';
 const apiServer = Config.apiServer;

@@ -19,8 +20,8 @@ async function fetchProjectMembers(jwt: string, projectId: string) {
    }
    const data = await response.json();
    return data;
-  } catch (error: any) {
-    console.error('Error fetching data:', error.message);
+  } catch (error: unknown) {
+    logError('Error fetching data:', error);
  }
 }

@@ -42,8 +43,8 @@ async function addMember(jwt: string, userId: number, projectId: number) {
    }
    const data = await response.json();
    return data;
-  } catch (error: any) {
-    console.error('Error fetching data:', error.message);
+  } catch (error: unknown) {
+    logError('Error fetching data:', error);
  }
 }

@@ -63,8 +64,8 @@ async function deleteMember(jwt: string, userId: number, projectId: number) {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
-  } catch (error: any) {
-    console.error('Error fetching data:', error.message);
+  } catch (error: unknown) {
+    logError('Error fetching data:', error);
  }
 }

@@ -86,8 +87,8 @@ async function updateMember(jwt: string, userId: number, projectId: number, role
    }
    const data = await response.json();
    return data;
-  } catch (error: any) {
-    console.error('Error fetching data:', error.message);
+  } catch (error: unknown) {
+    logError('Error fetching data:', error);
  }
 }

--- a/frontend/src/app/[locale]/projects/[projectId]/members/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/members/page.tsx
@@ -1,7 +1,7 @@
-import { LocaleCodeType } from '@/types/locale';
-import MembersPage from './MembersPage';
 import { getTranslations } from 'next-intl/server';
 import { useTranslations } from 'next-intl';
+import MembersPage from './MembersPage';
+import { LocaleCodeType } from '@/types/locale';

 export async function generateMetadata({ params: { locale } }: { params: { locale: LocaleCodeType } }) {
  const t = await getTranslations({ locale, namespace: 'Members' });
@@ -34,7 +34,7 @@ export default function Page({ params }: { params: { projectId: string; locale:

  return (
    <>
-      <MembersPage projectId={params.projectId} messages={messages} locale={params.locale} />
+      <MembersPage projectId={params.projectId} messages={messages} />
    </>
  );
 }
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/RunDialog.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/RunDialog.tsx
@@ -1,5 +1,4 @@
 'use client';
-import React from 'react';
 import { useState, useEffect } from 'react';
 import { Button, Input, Textarea, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@heroui/react';
 import { RunType, RunsMessages } from '@/types/run';
@@ -47,7 +46,7 @@ export default function RunDialog({ isOpen, editingRun, onCancel, onSubmit, mess
        text: '',
      });
    }
-  }, [editingRun]);
+  }, [editingRun, runDescription, runName]);

  const clear = () => {
    setRunName({
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/RunsPage.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/RunsPage.tsx
@@ -9,6 +9,7 @@ import { RunType, RunsMessages } from '@/types/run';
 import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
 import { TokenContext } from '@/utils/TokenProvider';
 import { LocaleCodeType } from '@/types/locale';
+import { logError } from '@/utils/errorHandler';

 type Props = {
  projectId: string;
@@ -61,13 +62,13 @@ export default function RunsPage({ projectId, locale, messages }: Props) {
      try {
        const data = await fetchRuns(context.token.access_token, Number(projectId));
        setRuns(data);
-      } catch (error: any) {
-        console.error('Error in effect:', error.message);
+      } catch (error: unknown) {
+        logError('Error fetching runs', error);
      }
    }

    fetchDataEffect();
-  }, [context]);
+  }, [context, projectId]);

  const onSubmit = async (name: string, description: string) => {
    if (editingRun && editingRun.createdAt) {
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/RunsTable.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/RunsTable.tsx
@@ -13,10 +13,10 @@ import {
  DropdownItem,
  SortDescriptor,
 } from '@heroui/react';
-import { Link, NextUiLinkClasses } from '@/src/i18n/routing';
 import { MoreVertical } from 'lucide-react';
-import { RunsMessages, RunType } from '@/types/run';
 import dayjs from 'dayjs';
+import { Link, NextUiLinkClasses } from '@/src/i18n/routing';
+import { RunsMessages, RunType } from '@/types/run';
 import { LocaleCodeType } from '@/types/locale';

 type Props = {
@@ -70,7 +70,7 @@ export default function RunsTable({ projectId, isDisabled, runs, onDeleteRun, me
    switch (columnKey) {
      case 'id':
        return <span>{cellValue as number}</span>;
-      case 'name':
+      case 'name': {
        const maxLength = 30;
        const truncatedDescription = truncateText(run.description, maxLength);
        return (
@@ -83,6 +83,7 @@ export default function RunsTable({ projectId, isDisabled, runs, onDeleteRun, me
            </div>
          </div>
        );
+      }
      case 'updatedAt':
        return <span>{dayjs(cellValue as string).format('YYYY/MM/DD HH:mm')}</span>;
      case 'actions':
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx
@@ -55,6 +55,7 @@ import { useFormGuard } from '@/utils/formGuard';
 import { PriorityMessages } from '@/types/priority';
 import { RunStatusMessages, TestRunCaseStatusMessages } from '@/types/status';
 import { TestTypeMessages } from '@/types/testType';
+import { logError } from '@/utils/errorHandler';

 const defaultTestRun = {
  id: 0,
@@ -132,12 +133,13 @@ export default function RunEditor({
        setFolders(foldersData);
        setSelectedFolder(foldersData[0]);
        initTestCases();
-      } catch (error: any) {
-        console.error('Error in effect:', error.message);
+      } catch (error: unknown) {
+        logError('Error fetching run data', error);
      }
    }

    fetchDataEffect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [tokenContext]);

  useEffect(() => {
@@ -146,8 +148,8 @@ export default function RunEditor({
        try {
          const filteredData = testCases.filter((testCase) => testCase.folderId === selectedFolder.id);
          setFilteredTestCases(filteredData);
-        } catch (error: any) {
-          console.error('Error fetching cases data:', error.message);
+        } catch (error: unknown) {
+          logError('Error filtering test cases', error);
        }
      }
    }
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunPregressDonutChart.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunPregressDonutChart.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useState, useEffect } from 'react';
 import dynamic from 'next/dynamic';
 import { testRunCaseStatus } from '@/config/selection';
@@ -34,7 +33,7 @@ export default function RunProgressDounut({ statusCounts, testRunCaseStatusMessa
        const colors = testRunCaseStatus.map((entry) => entry.chartColor);
        const legend = {
          labels: {
-            colors: testRunCaseStatus.map((entry) => {
+            colors: testRunCaseStatus.map(() => {
              if (theme === 'light') {
                return 'black';
              } else {
@@ -52,7 +51,7 @@ export default function RunProgressDounut({ statusCounts, testRunCaseStatusMessa
    };

    updateChartDate();
-  }, [statusCounts, theme]);
+  }, [statusCounts, testRunCaseStatusMessages, theme]);

  return <Chart options={chartData.options} series={chartData.series} type="donut" width={'100%'} height={'100%'} />;
 }
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseDetailDialog.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseDetailDialog.tsx
@@ -8,12 +8,12 @@ import TestCasePriority from '@/components/TestCasePriority';
 import { TokenContext } from '@/utils/TokenProvider';
 import { fetchCase } from '@/utils/caseControl';
 import { TestTypeMessages } from '@/types/testType';
+import { logError } from '@/utils/errorHandler';

 type Props = {
  isOpen: boolean;
  caseId: number;
  onCancel: () => void;
-  onChangeStatus: (changeCaseId: number, status: number) => {};
  messages: RunMessages;
  testTypeMessages: TestTypeMessages;
  priorityMessages: PriorityMessages;
@@ -37,7 +37,6 @@ export default function TestCaseDetailDialog({
  isOpen,
  caseId,
  onCancel,
-  onChangeStatus,
  messages,
  testTypeMessages,
  priorityMessages,
@@ -66,8 +65,8 @@ export default function TestCaseDetailDialog({
        }

        setTestCase(data);
-      } catch (error: any) {
-        console.error('Error in effect:', error.message);
+      } catch (error: unknown) {
+        logError('Error fetching case data', error);
      }
    }

--- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx
@@ -26,10 +26,10 @@ import {
  CircleX,
  CircleSlash2,
 } from 'lucide-react';
+import TestCaseDetailDialog from './TestCaseDetailDialog';
 import { testRunCaseStatus } from '@/config/selection';
 import { CaseType } from '@/types/case';
 import { RunMessages } from '@/types/run';
-import TestCaseDetailDialog from './TestCaseDetailDialog';
 import { PriorityMessages } from '@/types/priority';
 import TestCasePriority from '@/components/TestCasePriority';
 import { TestTypeMessages } from '@/types/testType';
@@ -40,9 +40,9 @@ type Props = {
  isDisabled: boolean;
  selectedKeys: Selection;
  onSelectionChange: React.Dispatch<React.SetStateAction<Selection>>;
-  onChangeStatus: (changeCaseId: number, status: number) => {};
-  onIncludeCase: (includeCaseId: number) => {};
-  onExcludeCase: (excludeCaseId: number) => {};
+  onChangeStatus: (changeCaseId: number, status: number) => void;
+  onIncludeCase: (includeCaseId: number) => void;
+  onExcludeCase: (excludeCaseId: number) => void;
  messages: RunMessages;
  testRunCaseStatusMessages: TestRunCaseStatusMessages;
  priorityMessages: PriorityMessages;
@@ -296,7 +296,6 @@ export default function TestCaseSelector({
        isOpen={isTestCaseDetailDialogOpen}
        caseId={showingTestCaseId}
        onCancel={hideTestCaseDetailDialog}
-        onChangeStatus={(showingCaseId, newStatus) => onChangeStatus(showingCaseId, newStatus)}
        messages={messages}
        priorityMessages={priorityMessages}
        testTypeMessages={testTypeMessages}
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/page.tsx
@@ -1,5 +1,5 @@
-import RunEditor from './RunEditor';
 import { useTranslations } from 'next-intl';
+import RunEditor from './RunEditor';
 import { RunMessages } from '@/types/run';
 import { PriorityMessages } from '@/types/priority';
 import { RunStatusMessages, TestRunCaseStatusMessages } from '@/types/status';
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/runsControl.ts
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/runsControl.ts
@@ -1,3 +1,4 @@
+import { logError } from '@/utils/errorHandler';
 import { CaseType } from '@/types/case';
 import { RunType, RunCaseType } from '@/types/run';
 import Config from '@/config/config';
@@ -22,8 +23,8 @@ async function fetchRun(jwt: string, runId: number) {

    const data = await response.json();
    return data;
-  } catch (error: any) {
-    console.error('Error fetching data:', error.message);
+  } catch (error: unknown) {
+    logError('Error fetching data:', error);
  }
 }

@@ -45,8 +46,8 @@ async function fetchRuns(jwt: string, projectId: number) {

    const data = await response.json();
    return data;
-  } catch (error: any) {
-    console.error('Error fetching data:', error.message);
+  } catch (error: unknown) {
+    logError('Error fetching data:', error);
  }
 }

@@ -76,8 +77,8 @@ async function createRun(jwt: string, projectId: number, name: string, descripti
    }
    const data = await response.json();
    return data;
-  } catch (error: any) {
-    console.error('Error creating new test run:', error);
+  } catch (error: unknown) {
+    logError('Error creating new test run:', error);
    throw error;
  }
 }
@@ -101,8 +102,8 @@ async function updateRun(jwt: string, updateTestRun: RunType) {
    }
    const data = await response.json();
    return data;
-  } catch (error: any) {
-    console.error('Error updating run:', error);
+  } catch (error: unknown) {
+    logError('Error updating run:', error);
    throw error;
  }
 }
@@ -123,8 +124,8 @@ async function deleteRun(jwt: string, runId: number) {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
-  } catch (error: any) {
-    console.error('Error deleting run:', error);
+  } catch (error: unknown) {
+    logError('Error deleting run:', error);
    throw error;
  }
 }
@@ -157,8 +158,8 @@ async function exportRun(jwt: string, runId: number, type: string) {
    a.click();
    a.remove();
    window.URL.revokeObjectURL(objectUrl);
-  } catch (error: any) {
-    console.error('Error fetching data:', error.message);
+  } catch (error: unknown) {
+    logError('Error fetching data:', error);
  }
 }

@@ -180,8 +181,8 @@ async function fetchRunCases(jwt: string, runId: number) {

    const data = await response.json();
    return data;
-  } catch (error: any) {
-    console.error('Error fetching data:', error.message);
+  } catch (error: unknown) {
+    logError('Error fetching data:', error);
  }
 }

@@ -308,8 +309,8 @@ async function updateRunCases(jwt: string, runId: number, testCases: CaseType[])
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return await response.json();
-  } catch (error: any) {
-    console.error('Error deleting project:', error);
+  } catch (error: unknown) {
+    logError('Error updating run cases:', error);
    throw error;
  }
 }
@@ -332,8 +333,8 @@ async function fetchProjectCases(jwt: string, projectId: number) {

    const data = await response.json();
    return data;
-  } catch (error: any) {
-    console.error('Error fetching data:', error.message);
+  } catch (error: unknown) {
+    logError('Error fetching data:', error);
  }
 }

--- a/frontend/src/app/[locale]/projects/[projectId]/settings/SettingsPage.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/settings/SettingsPage.tsx
@@ -1,5 +1,4 @@
 'use client';
-import React from 'react';
 import { useState, useEffect, useContext } from 'react';
 import { Button, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell } from '@heroui/react';
 import Avatar from 'boring-avatars';
@@ -13,6 +12,7 @@ import { useRouter } from '@/src/i18n/routing';
 import ProjectDialog from '@/components/ProjectDialog';
 import { UserType } from '@/types/user';
 import { findUser } from '@/utils/usersControl';
+import { logError } from '@/utils/errorHandler';

 type Props = {
  projectId: string;
@@ -60,13 +60,13 @@ export default function SettingsPage({ projectId, messages, projectDialogMessage
        } else {
          console.error('failed to get project owner id');
        }
-      } catch (error: any) {
-        console.error('Error in effect:', error.message);
+      } catch (error: unknown) {
+        logError('Error fetching project data:', error);
      }
    }

    fetchDataEffect();
-  }, [context]);
+  }, [context, projectId]);

  // project dialog
  const [isProjectDialogOpen, setIsProjectDialogOpen] = useState(false);
--- a/frontend/src/app/[locale]/projects/[projectId]/settings/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/settings/page.tsx
@@ -1,8 +1,8 @@
-import { LocaleCodeType } from '@/types/locale';
-import { ProjectDialogMessages } from '@/types/project';
-import SettingsPage from './SettingsPage';
 import { getTranslations } from 'next-intl/server';
 import { useTranslations } from 'next-intl';
+import SettingsPage from './SettingsPage';
+import { LocaleCodeType } from '@/types/locale';
+import { ProjectDialogMessages } from '@/types/project';
 import { SettingsMessages } from '@/types/settings';

 export async function generateMetadata({ params: { locale } }: { params: { locale: LocaleCodeType } }) {
--- a/frontend/src/app/[locale]/projects/layout.tsx
+++ b/frontend/src/app/[locale]/projects/layout.tsx
@@ -1,5 +1,5 @@
-import { LocaleCodeType } from '@/types/locale';
 import { getTranslations } from 'next-intl/server';
+import { LocaleCodeType } from '@/types/locale';

 export async function generateMetadata({ params: { locale } }: { params: { locale: LocaleCodeType } }) {
  const t = await getTranslations({ locale, namespace: 'Projects' });
--- a/frontend/src/app/[locale]/projects/page.tsx
+++ b/frontend/src/app/[locale]/projects/page.tsx
@@ -1,6 +1,6 @@
-import { PageType } from '@/types/base';
-import ProjectsPage from './ProjectsPage';
 import { useTranslations } from 'next-intl';
+import ProjectsPage from './ProjectsPage';
+import { PageType } from '@/types/base';
 import { LocaleCodeType } from '@/types/locale';
 import { ProjectDialogMessages, ProjectsMessages } from '@/types/project';

--- a/frontend/src/app/[locale]/projects/projectsControl.ts
+++ b/frontend/src/app/[locale]/projects/projectsControl.ts
@@ -1,123 +0,0 @@
-import Config from '@/config/config';
-const apiServer = Config.apiServer;
-
-/**
- * fetch project records
- */
-async function fetchProjects(jwt: string) {
-  const url = `${apiServer}/projects`;
-
-  try {
-    const response = await fetch(url, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${jwt}`,
-      },
-    });
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! Status: ${response.status}`);
-    }
-
-    const data = await response.json();
-    return data;
-  } catch (error: any) {
-    console.error('Error fetching data:', error.message);
-  }
-}
-
-/**
- * Create project
- */
-async function createProject(jwt: string, name: string, detail: string, isPublic: boolean) {
-  const newProjectData = {
-    name,
-    detail,
-    isPublic,
-  };
-
-  const fetchOptions = {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${jwt}`,
-    },
-    body: JSON.stringify(newProjectData),
-  };
-
-  const url = `${apiServer}/projects`;
-
-  try {
-    const response = await fetch(url, fetchOptions);
-    if (!response.ok) {
-      throw new Error(`HTTP error! Status: ${response.status}`);
-    }
-    const data = await response.json();
-    return data;
-  } catch (error: any) {
-    console.error('Error creating new project:', error);
-    throw error;
-  }
-}
-
-/**
- * Update project
- */
-async function updateProject(jwt: string, projectId: number, name: string, detail: string, isPublic: boolean) {
-  const updatedProjectData = {
-    name,
-    detail,
-    isPublic,
-  };
-
-  const fetchOptions = {
-    method: 'PUT',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${jwt}`,
-    },
-    body: JSON.stringify(updatedProjectData),
-  };
-
-  const url = `${apiServer}/projects/${projectId}`;
-
-  try {
-    const response = await fetch(url, fetchOptions);
-    if (!response.ok) {
-      throw new Error(`HTTP error! Status: ${response.status}`);
-    }
-    const data = await response.json();
-    return data;
-  } catch (error: any) {
-    console.error('Error updating project:', error);
-    throw error;
-  }
-}
-
-/**
- * Delete project
- */
-async function deleteProject(jwt: string, projectId: number) {
-  const fetchOptions = {
-    method: 'DELETE',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${jwt}`,
-    },
-  };
-
-  const url = `${apiServer}/projects/${projectId}`;
-
-  try {
-    const response = await fetch(url, fetchOptions);
-    if (!response.ok) {
-      throw new Error(`HTTP error! Status: ${response.status}`);
-    }
-  } catch (error: any) {
-    console.error('Error deleting project:', error);
-    throw error;
-  }
-}
-
-export { fetchProjects, createProject, updateProject, deleteProject };