fix: Typescript check (#21)

* fix: typescript check error * fix: typescript check error * fix: typescript check error * fix: typescript check error * fix: typescript check error
2024-07-28 00:20:24 +09:00
parent 44b7c7b9c3
commit c60491db09
60 changed files with 496 additions and 311 deletions
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/FoldersPane.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/FoldersPane.tsx
@@ -33,7 +33,7 @@ export default function FoldersPane({ projectId, messages, locale }: Props) {
        return;
      }
      try {
-        const folders: FolderType[] = await fetchFolders(context.token.access_token, projectId);
+        const folders: FolderType[] = await fetchFolders(context.token.access_token, Number(projectId));
        setFolders(folders);

        // no folder on project
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx
@@ -7,13 +7,14 @@ import { CaseType, CasesMessages } from '@/types/case';
 import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
 import CaseDialog from './CaseDialog';
 import { PriorityMessages } from '@/types/priority';
+import { LocaleCodeType } from '@/types/locale';

 type Props = {
  projectId: string;
  folderId: string;
  messages: CasesMessages;
  priorityMessages: PriorityMessages;
-  locale: string;
+  locale: LocaleCodeType;
 };

 export default function CasesPane({ projectId, folderId, messages, priorityMessages, locale }: Props) {
@@ -67,7 +68,7 @@ export default function CasesPane({ projectId, folderId, messages, priorityMessa

  const onConfirm = async () => {
    if (deleteCaseIds.length > 0) {
-      await deleteCases(context.token.access_token, deleteCaseIds, projectId);
+      await deleteCases(context.token.access_token, deleteCaseIds, Number(projectId));
      setCases(cases.filter((entry) => !deleteCaseIds.includes(entry.id)));
      closeDeleteConfirmDialog();
    }
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback, ReactNode } from 'react';
 import {
  Table,
  TableHeader,
@@ -15,10 +15,11 @@ import {
  SortDescriptor,
 } from '@nextui-org/react';
 import { Link, NextUiLinkClasses } from '@/src/navigation';
-import { Plus, MoreVertical, Trash, Circle } from 'lucide-react';
+import { Plus, MoreVertical, Trash } from 'lucide-react';
 import { CaseType, CasesMessages } from '@/types/case';
 import { PriorityMessages } from '@/types/priority';
 import TestCasePriority from '@/components/TestCasePriority';
+import { LocaleCodeType } from '@/types/locale';

 type Props = {
  projectId: string;
@@ -29,7 +30,7 @@ type Props = {
  onDeleteCases: (caseIds: number[]) => void;
  messages: CasesMessages;
  priorityMessages: PriorityMessages;
-  locale: string;
+  locale: LocaleCodeType;
 };

 export default function TestCaseTable({
@@ -73,12 +74,12 @@ export default function TestCaseTable({
    onDeleteCase(deleteCaseId);
  };

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

    switch (columnKey) {
      case 'id':
-        return <span>{cellValue}</span>;
+        return <span>{cellValue as number}</span>;
      case 'title':
        return (
          <Button size="sm" variant="light" className="data-[hover=true]:bg-transparent">
@@ -87,12 +88,12 @@ export default function TestCaseTable({
              locale={locale}
              className={NextUiLinkClasses}
            >
-              {cellValue}
+              {cellValue as string}
            </Link>
          </Button>
        );
      case 'priority':
-        return <TestCasePriority priorityValue={cellValue} priorityMessages={priorityMessages} />;
+        return <TestCasePriority priorityValue={cellValue as number} priorityMessages={priorityMessages} />;
      case 'actions':
        return (
          <Dropdown>
@@ -113,7 +114,7 @@ export default function TestCaseTable({
          </Dropdown>
        );
      default:
-        return cellValue;
+        return cellValue as string;
    }
  }, []);

@@ -152,7 +153,7 @@ export default function TestCaseTable({
      <div className="border-b-1 dark:border-neutral-700 w-full p-3 flex items-center justify-between">
        <h3 className="font-bold">{messages.testCaseList}</h3>
        <div>
-          {(selectedKeys.size > 0 || selectedKeys === 'all') && (
+          {((selectedKeys !== 'all' && selectedKeys.size > 0) || selectedKeys === 'all') && (
            <Button
              startContent={<Trash size={16} />}
              size="sm"
@@ -200,7 +201,9 @@ export default function TestCaseTable({
        </TableHeader>
        <TableBody emptyContent={messages.noCasesFound} items={sortedItems}>
          {(item) => (
-            <TableRow key={item.id}>{(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}</TableRow>
+            <TableRow key={item.id}>
+              {(columnKey) => <TableCell>{renderCell(item, columnKey as string)}</TableCell>}
+            </TableRow>
          )}
        </TableBody>
      </Table>
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseAttachmentsEditor.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseAttachmentsEditor.tsx
@@ -9,7 +9,7 @@ type Props = {
  attachments: AttachmentType[];
  onAttachmentDownload: (attachmentId: number, downloadFileName: string) => void;
  onAttachmentDelete: (attachmentId: number) => void;
-  onFilesDrop: (event: DragEvent) => void;
+  onFilesDrop: (event: DragEvent<HTMLElement>) => void;
  onFilesInput: (event: ChangeEvent) => void;
  messages: CaseMessages;
 };
--- 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,5 +1,5 @@
 'use client';
-import { useState, useEffect, useContext } from 'react';
+import { useState, useEffect, useContext, ChangeEvent, DragEvent } from 'react';
 import { Input, Textarea, Select, SelectItem, Button, Divider, Tooltip } from '@nextui-org/react';
 import { useRouter } from '@/src/navigation';
 import { Save, Plus, ArrowLeft, Circle } from 'lucide-react';
@@ -134,13 +134,22 @@ export default function CaseEditor({
    }
  };

-  const handleDrop = async (event: DragEvent) => {
+  const handleDrop = (event: DragEvent<HTMLElement>) => {
    event.preventDefault();
-    handleFetchCreateAttachments(Number(caseId), event.dataTransfer.files);
+    if (event.dataTransfer) {
+      const filesArray = Array.from(event.dataTransfer.files);
+      handleFetchCreateAttachments(Number(caseId), filesArray);
+    }
  };

-  const handleInput = (event: DragEvent) => {
-    handleFetchCreateAttachments(Number(caseId), event.target.files);
+  const handleInput = (event: ChangeEvent) => {
+    if (event.target) {
+      const input = event.target as HTMLInputElement;
+      if (input.files) {
+        const filesArray = Array.from(input.files);
+        handleFetchCreateAttachments(Number(caseId), filesArray);
+      }
+    }
  };

  const handleFetchCreateAttachments = async (caseId: number, files: File[]) => {
@@ -149,28 +158,36 @@ export default function CaseEditor({
    if (newAttachments) {
      const newAttachmentsWithJoinTable = [];
      newAttachments.forEach((attachment: AttachmentType) => {
-        attachment.caseAttachments = { AttachmentId: attachment.id };
+        attachment.caseAttachments = {
+          createdAt: new Date(),
+          updatedAt: new Date(),
+          caseId: 0,
+          attachmentId: attachment.id,
+        };
        newAttachmentsWithJoinTable.push(attachment);
      });
      const updatedAttachments = testCase.Attachments;
-      updatedAttachments.push(...newAttachments);
+      if (updatedAttachments) {
+        updatedAttachments.push(...newAttachments);

-      setTestCase({
-        ...testCase,
-        Attachments: updatedAttachments,
-      });
+        setTestCase({
+          ...testCase,
+          Attachments: updatedAttachments,
+        });
+      }
    }
  };

  const onAttachmentDelete = async (attachmentId: number) => {
    await fetchDeleteAttachment(attachmentId);
+    if (testCase.Attachments) {
+      const filteredAttachments = testCase.Attachments.filter((attachment) => attachment.id !== attachmentId);

-    const filteredAttachments = testCase.Attachments.filter((attachment) => attachment.id !== attachmentId);
-
-    setTestCase({
-      ...testCase,
-      Attachments: filteredAttachments,
-    });
+      setTestCase({
+        ...testCase,
+        Attachments: filteredAttachments,
+      });
+    }
  };

  useEffect(() => {
@@ -261,10 +278,12 @@ export default function CaseEditor({
            size="sm"
            variant="bordered"
            selectedKeys={[priorities[testCase.priority].uid]}
-            onSelectionChange={(e) => {
-              const selectedUid = e.anchorKey;
-              const index = priorities.findIndex((priority) => priority.uid === selectedUid);
-              setTestCase({ ...testCase, priority: index });
+            onSelectionChange={(newSelection) => {
+              if (newSelection !== 'all' && newSelection.size !== 0) {
+                const selectedUid = Array.from(newSelection)[0];
+                const index = priorities.findIndex((priority) => priority.uid === selectedUid);
+                setTestCase({ ...testCase, priority: index });
+              }
            }}
            startContent={
              <Circle size={8} color={priorities[testCase.priority].color} fill={priorities[testCase.priority].color} />
@@ -285,10 +304,12 @@ export default function CaseEditor({
            size="sm"
            variant="bordered"
            selectedKeys={[testTypes[testCase.type].uid]}
-            onSelectionChange={(e) => {
-              const selectedUid = e.anchorKey;
-              const index = testTypes.findIndex((type) => type.uid === selectedUid);
-              setTestCase({ ...testCase, type: index });
+            onSelectionChange={(newSelection) => {
+              if (newSelection !== 'all' && newSelection.size !== 0) {
+                const selectedUid = Array.from(newSelection)[0];
+                const index = testTypes.findIndex((type) => type.uid === selectedUid);
+                setTestCase({ ...testCase, type: index });
+              }
            }}
            label={messages.type}
            className="mt-3 max-w-xs"
@@ -306,10 +327,12 @@ export default function CaseEditor({
            size="sm"
            variant="bordered"
            selectedKeys={[templates[testCase.template].uid]}
-            onSelectionChange={(e) => {
-              const selectedUid = e.anchorKey;
-              const index = templates.findIndex((template) => template.uid === selectedUid);
-              setTestCase({ ...testCase, template: index });
+            onSelectionChange={(newSelection) => {
+              if (newSelection !== 'all' && newSelection.size !== 0) {
+                const selectedUid = Array.from(newSelection)[0];
+                const index = templates.findIndex((template) => template.uid === selectedUid);
+                setTestCase({ ...testCase, template: index });
+              }
            }}
            label={messages.template}
            className="mt-3 max-w-xs"
@@ -365,41 +388,47 @@ export default function CaseEditor({
                {messages.newStep}
              </Button>
            </div>
-            <CaseStepsEditor
-              isDisabled={!context.isProjectDeveloper(Number(projectId))}
-              steps={testCase.Steps}
-              onStepUpdate={(stepId, changeStep) => {
-                setTestCase({
-                  ...testCase,
-                  Steps: testCase.Steps.map((step) => {
-                    if (step.id === stepId) {
-                      return changeStep;
-                    } else {
-                      return step;
-                    }
-                  }),
-                });
-              }}
-              onStepPlus={onPlusClick}
-              onStepDelete={onDeleteClick}
-              messages={messages}
-            />
+            {testCase.Steps && (
+              <CaseStepsEditor
+                isDisabled={!context.isProjectDeveloper(Number(projectId))}
+                steps={testCase.Steps}
+                onStepUpdate={(stepId, changeStep) => {
+                  if (testCase.Steps) {
+                    setTestCase({
+                      ...testCase,
+                      Steps: testCase.Steps.map((step) => {
+                        if (step.id === stepId) {
+                          return changeStep;
+                        } else {
+                          return step;
+                        }
+                      }),
+                    });
+                  }
+                }}
+                onStepPlus={onPlusClick}
+                onStepDelete={onDeleteClick}
+                messages={messages}
+              />
+            )}
          </div>
        )}

        <Divider className="my-6" />
        <h6 className="font-bold">{messages.attachments}</h6>
-        <CaseAttachmentsEditor
-          isDisabled={!context.isProjectDeveloper(Number(projectId))}
-          attachments={testCase.Attachments}
-          onAttachmentDownload={(attachmentId: number, downloadFileName: string) =>
-            fetchDownloadAttachment(attachmentId, downloadFileName)
-          }
-          onAttachmentDelete={onAttachmentDelete}
-          onFilesDrop={handleDrop}
-          onFilesInput={handleInput}
-          messages={messages}
-        />
+        {testCase.Attachments && (
+          <CaseAttachmentsEditor
+            isDisabled={!context.isProjectDeveloper(Number(projectId))}
+            attachments={testCase.Attachments}
+            onAttachmentDownload={(attachmentId: number, downloadFileName: string) =>
+              fetchDownloadAttachment(attachmentId, downloadFileName)
+            }
+            onAttachmentDelete={onAttachmentDelete}
+            onFilesDrop={handleDrop}
+            onFilesInput={handleInput}
+            messages={messages}
+          />
+        )}
      </div>
    </>
  );
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/page.tsx
@@ -1,6 +1,7 @@
 import { PriorityMessages } from '@/types/priority';
 import CasesPane from './CasesPane';
 import { useTranslations } from 'next-intl';
+import { LocaleCodeType } from '@/types/locale';

 export default function Page({ params }: { params: { projectId: string; folderId: string; locale: string } }) {
  const t = useTranslations('Cases');
@@ -36,7 +37,7 @@ export default function Page({ params }: { params: { projectId: string; folderId
      <CasesPane
        projectId={params.projectId}
        folderId={params.folderId}
-        locale={params.locale}
+        locale={params.locale as LocaleCodeType}
        messages={messages}
        priorityMessages={priorityMessages}
      />
--- a/frontend/src/app/[locale]/projects/[projectId]/home/ProjectHome.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/home/ProjectHome.tsx
@@ -3,7 +3,6 @@ import { useState, useEffect, useContext } from 'react';
 import { title, subtitle } from '@/components/primitives';
 import { Card, CardBody, Chip, Divider } from '@nextui-org/react';
 import { Folder, Clipboard, FlaskConical } from 'lucide-react';
-import { CaseTypeCountType, CasePriorityCountType } from '@/types/case';
 import { ProgressSeriesType } from '@/types/run';
 import { HomeMessages } from './page';
 import { TokenContext } from '@/utils/TokenProvider';
@@ -16,6 +15,8 @@ import TestProgressBarChart from './TestProgressColumnChart';
 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';

 const apiServer = Config.apiServer;

@@ -59,19 +60,24 @@ export function ProjectHome({
 }: Props) {
  const context = useContext(TokenContext);
  const { theme, setTheme } = useTheme();
-  const [project, setProject] = useState({
+  const [project, setProject] = useState<ProjectType>({
+    id: 0,
    name: '',
    detail: '',
-    Folders: [{ Cases: [] }],
-    Runs: [{ RunCases: [] }],
+    isPublic: false,
+    userId: 0,
+    createdAt: '',
+    updatedAt: '',
+    Folders: [],
+    Runs: [],
  });
  const [folderNum, setFolderNum] = useState(0);
  const [caseNum, setCaseNum] = useState(0);
  const [runNum, setRunNum] = useState(0);
-  const [typesCounts, setTypesCounts] = useState<CaseTypeCountType[]>();
-  const [priorityCounts, setPriorityCounts] = useState<CasePriorityCountType[]>();
-  const [progressCategories, setProgressCategories] = useState<string[]>();
-  const [progressSeries, setProgressSeries] = useState<ProgressSeriesType[]>();
+  const [typesCounts, setTypesCounts] = useState<CaseTypeCountType[]>([]);
+  const [priorityCounts, setPriorityCounts] = useState<CasePriorityCountType[]>([]);
+  const [progressCategories, setProgressCategories] = useState<string[]>([]);
+  const [progressSeries, setProgressSeries] = useState<ProgressSeriesType[]>([]);

  useEffect(() => {
    async function fetchDataEffect() {
@@ -92,6 +98,9 @@ export function ProjectHome({

  useEffect(() => {
    async function aggregate() {
+      if (!project) {
+        return;
+      }
      const { folderNum, runNum, caseNum } = aggregateBasicInfo(project);
      setFolderNum(folderNum);
      setRunNum(runNum);
--- a/frontend/src/app/[locale]/projects/[projectId]/home/TestPriorityDonutChart.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/home/TestPriorityDonutChart.tsx
@@ -2,18 +2,19 @@ import React from 'react';
 import { useState, useEffect } from 'react';
 import dynamic from 'next/dynamic';
 import { priorities } from '@/config/selection';
-import { CasePriorityCountType } from '@/types/case';
+import { CasePriorityCountType } from '@/types/chart';
 import { PriorityMessages } from '@/types/priority';
+import { ChartDataType } from '@/types/chart';
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });

 type Props = {
  priorityCounts: CasePriorityCountType[];
  priorityMessages: PriorityMessages;
-  theme: string;
+  theme: string | undefined;
 };

 export default function TestPriorityDonutChart({ priorityCounts, priorityMessages, theme }: Props) {
-  const [chartData, setChartData] = useState({
+  const [chartData, setChartData] = useState<ChartDataType>({
    series: [],
    options: {
      labels: [],
--- a/frontend/src/app/[locale]/projects/[projectId]/home/TestProgressColumnChart.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/home/TestProgressColumnChart.tsx
@@ -3,16 +3,17 @@ import { useState, useEffect } from 'react';
 import dynamic from 'next/dynamic';
 import { ProgressSeriesType } from '@/types/run';
 import { testRunCaseStatus } from '@/config/selection';
+import { ChartDataType } from '@/types/chart';
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });

 type Props = {
  progressSeries: ProgressSeriesType[];
  progressCategories: string[];
-  theme: string;
+  theme: string | undefined;
 };

 export default function TestProgressBarChart({ progressSeries, progressCategories, theme }: Props) {
-  const [chartData, setChartData] = useState({
+  const [chartData, setChartData] = useState<ChartDataType>({
    series: [],
    options: {
      labels: [],
--- a/frontend/src/app/[locale]/projects/[projectId]/home/TestTypesDonutChart.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/home/TestTypesDonutChart.tsx
@@ -2,18 +2,18 @@ import React from 'react';
 import { useState, useEffect } from 'react';
 import dynamic from 'next/dynamic';
 import { testTypes } from '@/config/selection';
-import { CaseTypeCountType } from '@/types/case';
 import { TestTypeMessages } from '@/types/testType';
+import { CaseTypeCountType, ChartDataType } from '@/types/chart';
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });

 type Props = {
  typesCounts: CaseTypeCountType[];
  testTypeMessages: TestTypeMessages;
-  theme: string;
+  theme: string | undefined;
 };

 export default function TestTypesDonutChart({ typesCounts, testTypeMessages, theme }: Props) {
-  const [chartData, setChartData] = useState({
+  const [chartData, setChartData] = useState<ChartDataType>({
    series: [],
    options: {
      labels: [],
--- a/frontend/src/app/[locale]/projects/[projectId]/home/aggregate.ts
+++ b/frontend/src/app/[locale]/projects/[projectId]/home/aggregate.ts
@@ -1,6 +1,7 @@
 import { ProjectType } from '@/types/project';
 import { testTypes, priorities, testRunCaseStatus } from '@/config/selection';
 import { TestRunCaseStatusMessages } from '@/types/status';
+import { CasePriorityCountType, CaseTypeCountType } from '@/types/chart';

 // aggregate folder, case, run mum
 function aggregateBasicInfo(project: ProjectType) {
@@ -15,48 +16,58 @@ function aggregateBasicInfo(project: ProjectType) {
  return { folderNum, runNum, caseNum };
 }

-// aggregate test types of each case
-function aggregateTestType(project: ProjectType) {
-  const typesCounts = {};
+function aggregateTestType(project: ProjectType): CaseTypeCountType[] {
+  // count how many test cases are for each type
+  const typesCounts: number[] = testTypes.map((entry) => {
+    return 0;
+  });
  project.Folders.forEach((folder) => {
    folder.Cases.forEach((testcase) => {
      const type = testcase.type;
-      typesCounts[type] = (typesCounts[type] || 0) + 1;
+      typesCounts[type]++;
    });
  });

-  const result = [];
+  const result: CaseTypeCountType[] = [];
  for (let type = 0; type <= testTypes.length; type++) {
-    result.push({ type: type, count: typesCounts[type] || 0 });
+    result.push({ type: type, count: typesCounts[type] });
  }

  return result;
 }

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

-  const result = [];
+  const result: CasePriorityCountType[] = [];
  for (let priority = 0; priority <= priorities.length; priority++) {
-    result.push({ priority: priority, count: priorityCounts[priority] || 0 });
+    result.push({ priority: priority, count: priorityCounts[priority] });
  }

  return result;
 }

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

  project.Runs.forEach((run) => {
+    if (!run.RunCases) {
+      return;
+    }
+
    run.RunCases.forEach((runCase) => {
      const createdAtDate = new Date(runCase.createdAt);
      const dateString = createdAtDate.toISOString().slice(0, 10);
@@ -72,6 +83,10 @@ function aggregateProgress(project: ProjectType, testRunCaseStatusMessages: Test
  });

  project.Runs.forEach((run) => {
+    if (!run.RunCases) {
+      return;
+    }
+
    run.RunCases.forEach((runCase) => {
      const createdAtDate = new Date(runCase.createdAt);
      const dateString = createdAtDate.toISOString().slice(0, 10);
--- a/frontend/src/app/[locale]/projects/[projectId]/layout.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/layout.tsx
@@ -1,3 +1,4 @@
+import { ProjectMessages } from '@/types/project';
 import Sidebar from './Sidebar';
 import { useTranslations } from 'next-intl';

@@ -9,7 +10,7 @@ export default function SidebarLayout({
  params: { locale: string };
 }) {
  const t = useTranslations('Project');
-  const messages = {
+  const messages: ProjectMessages = {
    home: t('home'),
    testCases: t('test_cases'),
    testRuns: t('test_runs'),
--- a/frontend/src/app/[locale]/projects/[projectId]/members/AddMemberDialog.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/members/AddMemberDialog.tsx
@@ -2,18 +2,18 @@
 import React from 'react';
 import { useState, useEffect, useContext } from 'react';
 import { Button, Input, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@nextui-org/react';
-import { SettingsMessages } from '@/types/settings';
 import { TokenContext } from '@/utils/TokenProvider';
 import { UserType } from '@/types/user';
 import { searchUsers } from '@/utils/usersControl';
 import CandidatesTable from './CandidatesTable';
+import { MembersMessages } from '@/types/member';

 type Props = {
  isOpen: boolean;
  projectId: string;
  onCancel: () => void;
  onAddMember: (memberAdded: UserType) => void;
-  messages: SettingsMessages;
+  messages: MembersMessages;
 };

 export default function AddMemberDialog({ isOpen, projectId, onCancel, onAddMember, messages }: Props) {
--- a/frontend/src/app/[locale]/projects/[projectId]/members/CandidatesTable.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/members/CandidatesTable.tsx
@@ -1,24 +1,24 @@
 import { useMemo, useCallback } from 'react';
 import { Button, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell } from '@nextui-org/react';
 import { UserType } from '@/types/user';
-import { SettingsMessages } from '@/types/settings';
 import Avatar from 'boring-avatars';
+import { MembersMessages } from '@/types/member';

 type Props = {
  candidates: UserType[];
  onAddPress: (userAdded: UserType) => void;
-  messages: SettingsMessages;
+  messages: MembersMessages;
 };

 export default function MembersTable({ candidates, onAddPress, messages }: Props) {
  const headerColumns = [
-    { name: messages.avatar, uid: 'avatar' },
-    { name: messages.email, uid: 'email' },
-    { name: messages.username, uid: 'username' },
-    { name: messages.add, uid: 'add' },
+    { name: messages.avatar, uid: 'avatar', sortable: false },
+    { name: messages.email, uid: 'email', sortable: false },
+    { name: messages.username, uid: 'username', sortable: false },
+    { name: messages.add, uid: 'add', sortable: false },
  ];

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

    switch (columnKey) {
@@ -81,7 +81,9 @@ export default function MembersTable({ candidates, onAddPress, messages }: Props
        </TableHeader>
        <TableBody emptyContent={messages.noMembersFound} items={candidates}>
          {(item) => (
-            <TableRow key={item.id}>{(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}</TableRow>
+            <TableRow key={item.id}>
+              {(columnKey) => <TableCell>{renderCell(item, columnKey as string)}</TableCell>}
+            </TableRow>
          )}
        </TableBody>
      </Table>
--- a/frontend/src/app/[locale]/projects/[projectId]/members/MembersPage.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/members/MembersPage.tsx
@@ -40,11 +40,13 @@ export default function MembersPage({ projectId, messages, locale }: Props) {
  }, [context]);

  const handleAddMember = async (userAdded: UserType) => {
-    const newMember = await addMember(context.token.access_token, userAdded.id, projectId);
-    newMember.User = userAdded;
-    const updateMembers = [...members];
-    updateMembers.push(newMember);
-    setMembers(updateMembers);
+    if (userAdded.id) {
+      const newMember = await addMember(context.token.access_token, userAdded.id, Number(projectId));
+      newMember.User = userAdded;
+      const updateMembers = [...members];
+      updateMembers.push(newMember);
+      setMembers(updateMembers);
+    }

    setIsDialogOpen(false);
  };
@@ -64,22 +66,24 @@ export default function MembersPage({ projectId, messages, locale }: Props) {

  const onConfirm = async () => {
    if (deleteMemberId) {
-      await deleteMember(context.token.access_token, deleteMemberId, projectId);
+      await deleteMember(context.token.access_token, deleteMemberId, Number(projectId));
      setMembers(members.filter((member) => member.User.id !== deleteMemberId));
      closeDeleteConfirmDialog();
    }
  };

  const handleChangeRole = async (userEdit: UserType, role: number) => {
-    await updateMember(context.token.access_token, userEdit.id, projectId, role);
-    setMembers((prevMembers) => {
-      return prevMembers.map((member) => {
-        if (member.User.id === userEdit.id) {
-          return { ...member, role: role };
-        }
-        return member;
+    if (userEdit.id) {
+      await updateMember(context.token.access_token, userEdit.id, Number(projectId), role);
+      setMembers((prevMembers) => {
+        return prevMembers.map((member) => {
+          if (member.User.id === userEdit.id) {
+            return { ...member, role: role };
+          }
+          return member;
+        });
      });
-    });
+    }
  };

  return (
--- a/frontend/src/app/[locale]/projects/[projectId]/members/MembersTable.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/members/MembersTable.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useState, useMemo, ReactNode } from 'react';
 import {
  Button,
  Table,
@@ -15,16 +15,16 @@ import {
 } from '@nextui-org/react';
 import { ChevronDown } from 'lucide-react';
 import { MemberType, UserType } from '@/types/user';
-import { SettingsMessages } from '@/types/settings';
 import { memberRoles } from '@/config/selection';
 import Avatar from 'boring-avatars';
+import { MembersMessages } from '@/types/member';

 type Props = {
  members: MemberType[];
  isDisabled: boolean;
  onChangeRole: (userEdit: UserType, role: number) => void;
  onDeleteMember: (deletedUserId: number) => void;
-  messages: SettingsMessages;
+  messages: MembersMessages;
 };

 export default function MembersTable({ members, isDisabled, onChangeRole, onDeleteMember, messages }: Props) {
@@ -42,17 +42,17 @@ export default function MembersTable({ members, isDisabled, onChangeRole, onDele
  });

  const sortedItems = useMemo(() => {
-    return [...members].sort((a: UserType, b: UserType) => {
-      const first = a[sortDescriptor.column as keyof UserType] as number;
-      const second = b[sortDescriptor.column as keyof UserType] as number;
+    return [...members].sort((a: MemberType, b: MemberType) => {
+      const first = a[sortDescriptor.column as keyof MemberType] as number;
+      const second = b[sortDescriptor.column as keyof MemberType] as number;
      const cmp = first < second ? -1 : first > second ? 1 : 0;

      return sortDescriptor.direction === 'descending' ? -cmp : cmp;
    });
  }, [sortDescriptor, members]);

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

    switch (columnKey) {
      case 'avatar':
@@ -73,7 +73,7 @@ export default function MembersTable({ members, isDisabled, onChangeRole, onDele
          <Dropdown>
            <DropdownTrigger>
              <Button size="sm" isDisabled={isDisabled} variant="light" endContent={<ChevronDown size={16} />}>
-                <span className="w-12">{messages[memberRoles[cellValue].uid]}</span>
+                <span className="w-12">{messages[memberRoles[cellValue as number].uid]}</span>
              </Button>
            </DropdownTrigger>
            <DropdownMenu aria-label="test case actions">
@@ -92,7 +92,11 @@ export default function MembersTable({ members, isDisabled, onChangeRole, onDele
            isDisabled={isDisabled}
            color="danger"
            variant="light"
-            onClick={() => onDeleteMember(member.User.id)}
+            onClick={() => {
+              if (member.User.id) {
+                onDeleteMember(member.User.id);
+              }
+            }}
          >
            {messages.deleteMember}
          </Button>
@@ -143,7 +147,9 @@ export default function MembersTable({ members, isDisabled, onChangeRole, onDele
        </TableHeader>
        <TableBody emptyContent={messages.noMembersFound} items={sortedItems}>
          {(item) => (
-            <TableRow key={item.id}>{(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}</TableRow>
+            <TableRow key={item.id}>
+              {(columnKey) => <TableCell>{renderCell(item, columnKey as string) as ReactNode}</TableCell>}
+            </TableRow>
          )}
        </TableBody>
      </Table>
--- a/frontend/src/app/[locale]/projects/[projectId]/members/membersControl.ts
+++ b/frontend/src/app/[locale]/projects/[projectId]/members/membersControl.ts
@@ -24,7 +24,7 @@ async function fetchProjectMembers(jwt: string, projectId: string) {
  }
 }

-async function addMember(jwt: string, userId: string, projectId: string) {
+async function addMember(jwt: string, userId: number, projectId: number) {
  const fetchOptions = {
    method: 'POST',
    headers: {
@@ -47,7 +47,7 @@ async function addMember(jwt: string, userId: string, projectId: string) {
  }
 }

-async function deleteMember(jwt: string, userId: string, projectId: string) {
+async function deleteMember(jwt: string, userId: number, projectId: number) {
  const fetchOptions = {
    method: 'DELETE',
    headers: {
@@ -68,7 +68,7 @@ async function deleteMember(jwt: string, userId: string, projectId: string) {
  }
 }

-async function updateMember(jwt: string, userId: string, projectId: string, role: number) {
+async function updateMember(jwt: string, userId: number, projectId: number, role: number) {
  const fetchOptions = {
    method: 'PUT',
    headers: {
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/RunsPage.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/RunsPage.tsx
@@ -8,10 +8,11 @@ import { RunType, RunsMessages } from '@/types/run';
 import RunDialog from './RunDialog';
 import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
 import { TokenContext } from '@/utils/TokenProvider';
+import { LocaleCodeType } from '@/types/locale';

 type Props = {
  projectId: string;
-  locale: string;
+  locale: LocaleCodeType;
  messages: RunsMessages;
 };

--- a/frontend/src/app/[locale]/projects/[projectId]/runs/RunsTable.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/RunsTable.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, ReactNode } from 'react';
 import {
  Table,
  TableHeader,
@@ -17,6 +17,7 @@ import { Link, NextUiLinkClasses } from '@/src/navigation';
 import { MoreVertical } from 'lucide-react';
 import { RunsMessages, RunType } from '@/types/run';
 import dayjs from 'dayjs';
+import { LocaleCodeType } from '@/types/locale';

 type Props = {
  projectId: string;
@@ -24,7 +25,7 @@ type Props = {
  runs: RunType[];
  onDeleteRun: (runId: number) => void;
  messages: RunsMessages;
-  locale: string;
+  locale: LocaleCodeType;
 };

 export default function RunsTable({ projectId, isDisabled, runs, onDeleteRun, messages, locale }: Props) {
@@ -63,19 +64,19 @@ export default function RunsTable({ projectId, isDisabled, runs, onDeleteRun, me
    return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
  };

-  const renderCell = (run: RunType, columnKey: Key) => {
+  const renderCell = (run: RunType, columnKey: string) => {
    const cellValue = run[columnKey as keyof RunType];

    switch (columnKey) {
      case 'id':
-        return <span>{cellValue}</span>;
+        return <span>{cellValue as number}</span>;
      case 'name':
        const maxLength = 30;
        const truncatedDescription = truncateText(run.description, maxLength);
        return (
          <div>
            <Link href={`/projects/${projectId}/runs/${run.id}`} locale={locale} className={NextUiLinkClasses}>
-              {cellValue}
+              {cellValue as string}
            </Link>
            <div className="text-xs text-default-500">
              <div>{truncatedDescription}</div>
@@ -83,7 +84,7 @@ export default function RunsTable({ projectId, isDisabled, runs, onDeleteRun, me
          </div>
        );
      case 'updatedAt':
-        return <span>{dayjs(cellValue).format('YYYY/MM/DD HH:mm')}</span>;
+        return <span>{dayjs(cellValue as string).format('YYYY/MM/DD HH:mm')}</span>;
      case 'actions':
        return (
          <Dropdown>
@@ -145,7 +146,9 @@ export default function RunsTable({ projectId, isDisabled, runs, onDeleteRun, me
        </TableHeader>
        <TableBody emptyContent={messages.noRunsFound} items={sortedItems}>
          {(item) => (
-            <TableRow key={item.id}>{(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}</TableRow>
+            <TableRow key={item.id}>
+              {(columnKey) => <TableCell>{renderCell(item, columnKey as string) as ReactNode}</TableCell>}
+            </TableRow>
          )}
        </TableBody>
      </Table>
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx
@@ -77,7 +77,7 @@ export default function RunEditor({
  const { theme, setTheme } = useTheme();
  const [testRun, setTestRun] = useState<RunType>(defaultTestRun);
  const [folders, setFolders] = useState<FolderType[]>([]);
-  const [runStatusCounts, setRunStatusCounts] = useState<RunStatusCountType[]>();
+  const [runStatusCounts, setRunStatusCounts] = useState<RunStatusCountType[]>([]);
  const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([]));
  const [selectedFolder, setSelectedFolder] = useState<FolderType | null>(null);
  const [testCases, setTestCases] = useState<CaseType[]>([]);
@@ -256,10 +256,12 @@ export default function RunEditor({
                size="sm"
                variant="bordered"
                selectedKeys={[testRunStatus[testRun.state].uid]}
-                onSelectionChange={(e) => {
-                  const selectedUid = e.anchorKey;
-                  const index = testRunStatus.findIndex((template) => template.uid === selectedUid);
-                  setTestRun({ ...testRun, state: index });
+                onSelectionChange={(newSelection) => {
+                  if (newSelection !== 'all' && newSelection.size !== 0) {
+                    const selectedUid = Array.from(newSelection)[0];
+                    const index = testRunStatus.findIndex((template) => template.uid === selectedUid);
+                    setTestRun({ ...testRun, state: index });
+                  }
                }}
                label={messages.status}
                className="mt-3 max-w-xs"
@@ -278,7 +280,7 @@ export default function RunEditor({
        <div className="flex items-center justify-between">
          <h6 className="h-8 font-bold">{messages.selectTestCase}</h6>
          <div>
-            {(selectedKeys.size > 0 || selectedKeys === 'all') && (
+            {(selectedKeys === 'all' || selectedKeys.size > 0) && (
              <Dropdown>
                <DropdownTrigger>
                  <Button
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunPregressDonutChart.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunPregressDonutChart.tsx
@@ -4,6 +4,7 @@ import dynamic from 'next/dynamic';
 import { testRunCaseStatus } from '@/config/selection';
 import { RunStatusCountType } from '@/types/run';
 import { TestRunCaseStatusMessages } from '@/types/status';
+import { ChartDataType } from '@/types/chart';
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });

 type Props = {
@@ -13,7 +14,7 @@ type Props = {
 };

 export default function RunProgressDounut({ statusCounts, testRunCaseStatusMessages, theme }: Props) {
-  const [chartData, setChartData] = useState({
+  const [chartData, setChartData] = useState<ChartDataType>({
    series: [],
    options: {
      labels: [],
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/page.tsx
@@ -1,3 +1,4 @@
+import { LocaleCodeType } from '@/types/locale';
 import RunsPage from './RunsPage';
 import { useTranslations } from 'next-intl';

@@ -27,7 +28,7 @@ export default function Page({ params }: { params: { projectId: string; locale:

  return (
    <>
-      <RunsPage projectId={params.projectId} locale={params.locale} messages={messages} />
+      <RunsPage projectId={params.projectId} locale={params.locale as LocaleCodeType} messages={messages} />
    </>
  );
 }
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/runsControl.ts
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/runsControl.ts
@@ -246,6 +246,8 @@ async function updateRunCases(jwt: string, runId: number, testCases: CaseType[])
        runId: runId,
        status: itr.RunCases[0].status,
        editState: itr.RunCases[0].editState,
+        createdAt: '0',
+        updatedAt: '0',
      });
    }
  });
--- a/frontend/src/app/[locale]/projects/[projectId]/settings/SettingsPage.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/settings/SettingsPage.tsx
@@ -7,7 +7,7 @@ import { Pencil, Trash } from 'lucide-react';
 import { SettingsMessages } from '@/types/settings';
 import { TokenContext } from '@/utils/TokenProvider';
 import { deleteProject, fetchProject, updateProject } from '@/utils/projectsControl';
-import { ProjectType } from '@/types/project';
+import { ProjectDialogMessages, ProjectType } from '@/types/project';
 import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
 import { useRouter } from '@/src/navigation';
 import ProjectDialog from '@/components/ProjectDialog';
@@ -17,10 +17,11 @@ import { findUser } from '@/utils/usersControl';
 type Props = {
  projectId: string;
  messages: SettingsMessages;
+  projectDialogMessages: ProjectDialogMessages;
  locale: string;
 };

-export default function SettingsPage({ projectId, messages, locale }: Props) {
+export default function SettingsPage({ projectId, messages, projectDialogMessages, locale }: Props) {
  const context = useContext(TokenContext);
  const router = useRouter();
  const [project, setProject] = useState<ProjectType>({
@@ -152,7 +153,7 @@ export default function SettingsPage({ projectId, messages, locale }: Props) {
        editingProject={project}
        onCancel={() => setIsProjectDialogOpen(false)}
        onSubmit={onSubmit}
-        messages={messages}
+        projectDialogMessages={projectDialogMessages}
      />

      <DeleteConfirmDialog
--- a/frontend/src/app/[locale]/projects/[projectId]/settings/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/settings/page.tsx
@@ -1,29 +1,46 @@
+import { ProjectDialogMessages } from '@/types/project';
 import SettingsPage from './SettingsPage';
 import { useTranslations } from 'next-intl';
+import { SettingsMessages } from '@/types/settings';

 export default function Page({ params }: { params: { projectId: string; locale: string } }) {
  const t = useTranslations('Settings');
-  const messages = {
+  const messages: SettingsMessages = {
    projectManagement: t('project_management'),
    projectName: t('project_name'),
    projectDetail: t('project_detail'),
    projectOwner: t('project_owner'),
    editProject: t('edit_project'),
-    project: t('project'),
-    ifYouMakePublic: t('if_you_make_public'),
    public: t('public'),
    publicity: t('publicity'),
    private: t('private'),
-    update: t('update'),
    deleteProject: t('delete_project'),
    delete: t('delete'),
    close: t('close'),
    areYouSure: t('are_you_sure'),
  };

+  const projectDialogMessages: ProjectDialogMessages = {
+    project: t('project'),
+    projectName: t('project_name'),
+    projectDetail: t('project_detail'),
+    public: t('public'),
+    private: t('private'),
+    ifYouMakePublic: t('if_you_make_public'),
+    close: t('close'),
+    create: t('create'),
+    update: t('update'),
+    pleaseEnter: t('please_enter'),
+  };
+
  return (
    <>
-      <SettingsPage projectId={params.projectId} messages={messages} locale={params.locale} />
+      <SettingsPage
+        projectId={params.projectId}
+        messages={messages}
+        projectDialogMessages={projectDialogMessages}
+        locale={params.locale}
+      />
    </>
  );
 }