Merge pull request #23 from kimatata/develop

Develop
2024-07-28 10:36:31 +09:00
parent 4dc256b3af 1f55f42734
commit c04122fe45
72 changed files with 1255 additions and 639 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,36 @@
+name: UnitTCMS CI
+
+on:
+  push:
+    branches: [ "main", "develop" ]
+  pull_request:
+    branches: [ "main", "develop" ]
+
+jobs:
+  unittcms-test:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+    - uses: actions/checkout@v4
+
+    # root
+    - name: Format and unit test
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run format # prettier
+    - run: npm run test # vitest
+
+    # frontend
+    - name: nextjs build
+      working-directory: ./frontend
+      run: npm ci
+      run: npm run build # nextjs build
+
--- a/backend/routes/users/signin.js
+++ b/backend/routes/users/signin.js
@@ -27,9 +27,9 @@ module.exports = function (sequelize) {
        return res.status(401).json({ error: 'Authentication failed' });
      }
      const accessToken = jwt.sign({ userId: user.id }, secretKey, {
-        expiresIn: '1h',
+        expiresIn: '24h',
      });
-      const expiresAt = Date.now() + 3600 * 1000; // expire date(ms)
+      const expiresAt = Date.now() + 3600 * 1000 * 24; // expire date(ms)

      res.status(200).json({ access_token: accessToken, expires_at: expiresAt, user });
    } catch (error) {
--- a/backend/routes/users/signup.js
+++ b/backend/routes/users/signup.js
@@ -29,9 +29,9 @@ module.exports = function (sequelize) {
      });

      const accessToken = jwt.sign({ userId: user.id }, secretKey, {
-        expiresIn: '1h',
+        expiresIn: '24h',
      });
-      const expiresAt = Date.now() + 3600 * 1000; // expire date(ms)
+      const expiresAt = Date.now() + 3600 * 1000 * 24; // expire date(ms)

      user.password = undefined;
      res.status(200).json({ access_token: accessToken, expires_at: expiresAt, user });
--- a/frontend/components/ProjectDialog.tsx
+++ b/frontend/components/ProjectDialog.tsx
@@ -12,17 +12,17 @@ import {
  ModalBody,
  ModalFooter,
 } from '@nextui-org/react';
-import { ProjectType, ProjectsMessages } from '@/types/project';
+import { ProjectType, ProjectDialogMessages } from '@/types/project';

 type Props = {
  isOpen: boolean;
  editingProject: ProjectType | null;
  onCancel: () => void;
  onSubmit: (name: string, detail: string, isPublic: boolean) => void;
-  messages: ProjectsMessages;
+  projectDialogMessages: ProjectDialogMessages;
 };

-export default function ProjectDialog({ isOpen, editingProject, onCancel, onSubmit, messages }: Props) {
+export default function ProjectDialog({ isOpen, editingProject, onCancel, onSubmit, projectDialogMessages }: Props) {
  const [projectName, setProjectName] = useState({
    text: editingProject ? editingProject.name : '',
    isInvalid: false,
@@ -83,7 +83,7 @@ export default function ProjectDialog({ isOpen, editingProject, onCancel, onSubm
      setProjectName({
        text: '',
        isInvalid: true,
-        errorMessage: messages.pleaseEnter,
+        errorMessage: projectDialogMessages.pleaseEnter,
      });

      return;
@@ -101,11 +101,11 @@ export default function ProjectDialog({ isOpen, editingProject, onCancel, onSubm
      }}
    >
      <ModalContent>
-        <ModalHeader className="flex flex-col gap-1">{messages.project}</ModalHeader>
+        <ModalHeader className="flex flex-col gap-1">{projectDialogMessages.project}</ModalHeader>
        <ModalBody>
          <Input
            type="text"
-            label={messages.projectName}
+            label={projectDialogMessages.projectName}
            value={projectName.text}
            isInvalid={projectName.isInvalid}
            errorMessage={projectName.errorMessage}
@@ -117,7 +117,7 @@ export default function ProjectDialog({ isOpen, editingProject, onCancel, onSubm
            }}
          />
          <Textarea
-            label={messages.projectDetail}
+            label={projectDialogMessages.projectDetail}
            value={projectDetail.text}
            isInvalid={projectDetail.isInvalid}
            errorMessage={projectDetail.errorMessage}
@@ -129,16 +129,16 @@ export default function ProjectDialog({ isOpen, editingProject, onCancel, onSubm
            }}
          />
          <Checkbox isSelected={isProjectPublic} onValueChange={setIsProjectPublic}>
-            {messages.public}
+            {projectDialogMessages.public}
          </Checkbox>
-          <div className="text-small text-default-500">{messages.ifYouMakePublic}</div>
+          <div className="text-small text-default-500">{projectDialogMessages.ifYouMakePublic}</div>
        </ModalBody>
        <ModalFooter>
          <Button variant="light" onPress={onCancel}>
-            {messages.close}
+            {projectDialogMessages.close}
          </Button>
          <Button color="primary" onPress={validate}>
-            {editingProject ? messages.update : messages.create}
+            {editingProject ? projectDialogMessages.update : projectDialogMessages.create}
          </Button>
        </ModalFooter>
      </ModalContent>
--- a/frontend/components/TestCasePriority.tsx
+++ b/frontend/components/TestCasePriority.tsx
@@ -0,0 +1,17 @@
+import { Circle } from 'lucide-react';
+import { priorities } from '@/config/selection';
+import { PriorityMessages } from '@/types/priority';
+
+type Props = {
+  priorityValue: number;
+  priorityMessages: PriorityMessages;
+};
+
+export default function TestCasePriority({ priorityValue, priorityMessages }: Props) {
+  return (
+    <div className="flex items-center">
+      <Circle size={8} color={priorities[priorityValue].color} fill={priorities[priorityValue].color} />
+      <div className="ms-3">{priorityMessages[priorities[priorityValue].uid]}</div>
+    </div>
+  );
+}
--- a/frontend/components/UserAvatar.tsx
+++ b/frontend/components/UserAvatar.tsx
@@ -10,7 +10,7 @@ export default function PublicityChip({ context }: Props) {
  return context.isSignedIn() ? (
    <Avatar
      size={16}
-      name={context.token.user.username}
+      name={context.token!.user!.username}
      variant="beam"
      colors={['#0A0310', '#49007E', '#FF005B', '#FF7D10', '#FFB238']}
    />
--- a/frontend/config/selection.ts
+++ b/frontend/config/selection.ts
@@ -1,22 +1,50 @@
-const roles = [{ uid: 'administrator' }, { uid: 'user' }];
+import { AutomationStatusType, GlobalRoleType, MemberRoleType, TemplateType } from '@/types/base';
+import { RunStatusType, TestRunCaseStatusType } from '@/types/status';
+import { TestTypeType } from '@/types/testType';
+import { PriorityType } from '@/types/priority';
+import { LocaleType } from '@/types/locale';

-const memberRoles = [{ uid: 'manager' }, { uid: 'developer' }, { uid: 'reporter' }];
+const roles: GlobalRoleType[] = [{ uid: 'administrator' }, { uid: 'user' }];
+const memberRoles: MemberRoleType[] = [{ uid: 'manager' }, { uid: 'developer' }, { uid: 'reporter' }];

 const categoricalPalette = ['#fba91e', '#6ea56c', '#3ac6e1', '#feda2f', '#f15f47', '#244470', '#9c80bb', '#f595a6'];

-const locales = [
+const locales: LocaleType[] = [
  { code: 'en', name: 'English' },
  { code: 'ja', name: '日本語' },
 ];

-const priorities = [
+// The status of each test run
+const testRunStatus: RunStatusType[] = [
+  { uid: 'new' },
+  { uid: 'inProgress' },
+  { uid: 'underReview' },
+  { uid: 'rejected' },
+  { uid: 'done' },
+  { uid: 'closed' },
+];
+
+// The status of each test case in test run
+const testRunCaseStatus: TestRunCaseStatusType[] = [
+  {
+    uid: 'untested',
+    color: 'primary',
+    chartColor: '#3ac6e1',
+  },
+  { uid: 'passed', color: 'success', chartColor: '#6ea56c' },
+  { uid: 'failed', color: 'danger', chartColor: '#f15f47' },
+  { uid: 'retest', color: 'warning', chartColor: '#fba91e' },
+  { uid: 'skipped', color: 'primary', chartColor: '#805aab' },
+];
+
+const priorities: PriorityType[] = [
  { uid: 'critical', color: '#bb3e03', chartColor: '#bb3e03' },
  { uid: 'high', color: '#ca6702', chartColor: '#ca6702' },
  { uid: 'medium', color: '#ee9b00', chartColor: '#ee9b00' },
  { uid: 'low', color: '#94d2bd', chartColor: '#94d2bd' },
 ];

-const testTypes = [
+const testTypes: TestTypeType[] = [
  { uid: 'other', chartColor: categoricalPalette[0] },
  { uid: 'security', chartColor: categoricalPalette[1] },
  { uid: 'performance', chartColor: categoricalPalette[2] },
@@ -32,35 +60,14 @@ const testTypes = [
  { uid: 'manual', chartColor: categoricalPalette[4] },
 ];

-const automationStatus = [
-  { name: 'Automated', uid: 'automated' },
-  { name: 'Automation Not Required', uid: 'automation-not-required' },
-  { name: 'Cannot Be Automated', uid: 'cannot-be-automated' },
-  { name: 'Obsolete', uid: 'obsolete' },
+const automationStatus: AutomationStatusType[] = [
+  { uid: 'automated' },
+  { uid: 'automation-not-required' },
+  { uid: 'cannot-be-automated' },
+  { uid: 'obsolete' },
 ];

-const templates = [{ uid: 'text' }, { uid: 'step' }];
-
-const testRunStatus = [
-  { uid: 'new' },
-  { uid: 'inProgress' },
-  { uid: 'underReview' },
-  { uid: 'rejected' },
-  { uid: 'done' },
-  { uid: 'closed' },
-];
-
-const testRunCaseStatus = [
-  {
-    uid: 'untested',
-    color: 'primary',
-    chartColor: '#3ac6e1',
-  },
-  { uid: 'passed', color: 'success', chartColor: '#6ea56c' },
-  { uid: 'failed', color: 'danger', chartColor: '#f15f47' },
-  { uid: 'retest', color: 'warning', chartColor: '#fba91e' },
-  { uid: 'skipped', color: 'primary', chartColor: '#805aab' },
-];
+const templates: TemplateType[] = [{ uid: 'text' }, { uid: 'step' }];

 export {
  roles,
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -1,4 +1,52 @@
 {
+  "RunStatus": {
+    "new": "New",
+    "inProgress": "In progress",
+    "underReview": "Under review",
+    "rejected": "Rejected",
+    "done": "Done",
+    "closed": "Closed"
+  },
+  "RunCaseStatus": {
+    "untested": "Untested",
+    "passed": "Passed",
+    "failed": "Failed",
+    "retest": "Retest",
+    "skipped": "Skipped"
+  },
+  "Priority": {
+    "critical": "Critical",
+    "high": "High",
+    "medium": "Medium",
+    "low": "Low"
+  },
+  "Type": {
+    "other": "Other",
+    "security": "Security",
+    "performance": "Performance",
+    "accessibility": "Accessibility",
+    "functional": "Functional",
+    "acceptance": "Acceptance",
+    "usability": "Usability",
+    "smoke_sanity": "Smoke&Sanity",
+    "compatibility": "Compatibility",
+    "destructive": "Destructive",
+    "regression": "Regression",
+    "automated": "Automated",
+    "manual": "Manual"
+  },
+  "ProjectDialog": {
+    "project": "Project",
+    "project_name": "Project Name",
+    "project_detail": "Project Detail",
+    "public": "Public",
+    "private": "Private",
+    "if_you_make_public": "Making a project public makes it visible to users who are not project members.",
+    "close": "Close",
+    "create": "Create",
+    "update": "Update",
+    "please_enter": "Please enter project name"
+  },
  "Index": {
    "get_started": "Get Started",
    "demo": "Demo",
@@ -78,21 +126,14 @@
  },
  "Projects": {
    "projectList": "Project List",
-    "project": "Project",
    "new_project": "New Project",
    "id": "ID",
    "publicity": "Publicity",
+    "public": "Public",
+    "private": "Private",
    "name": "Name",
    "detail": "Detail",
    "last_update": "Last update",
-    "project_name": "Project Name",
-    "project_detail": "Project Detail",
-    "public": "Public",
-    "private": "Private",
-    "if_you_make_public": "Making a project public makes it visible to users who are not project members.",
-    "close": "Close",
-    "create": "Create",
-    "please_enter": "Please enter project name",
    "no_projects_found": "No projects found"
  },
  "Project": {
@@ -107,31 +148,9 @@
    "test_cases": "Test Cases",
    "test_runs": "Test Runs",
    "progress": "Progress",
-    "untested": "Untested",
-    "passed": "Passed",
-    "failed": "Failed",
-    "retest": "Retest",
-    "skipped": "Skipped",
    "test_classification": "Test Classification",
    "by_type": "By test type",
-    "by_priority": "By test priority",
-    "other": "Other",
-    "security": "Security",
-    "performance": "Performance",
-    "accessibility": "Accessibility",
-    "functional": "Functional",
-    "acceptance": "Acceptance",
-    "usability": "Usability",
-    "smoke_sanity": "Smoke&Sanity",
-    "compatibility": "Compatibility",
-    "destructive": "Destructive",
-    "regression": "Regression",
-    "automated": "Automated",
-    "manual": "Manual",
-    "critical": "Critical",
-    "high": "High",
-    "medium": "Medium",
-    "low": "Low"
+    "by_priority": "By test priority"
  },
  "Folders": {
    "folder": "Folder",
@@ -160,10 +179,6 @@
    "are_you_sure": "Are you sure you want to delete test cases?",
    "new_test_case": "New Test Case",
    "status": "Status",
-    "critical": "Critical",
-    "high": "High",
-    "medium": "Medium",
-    "low": "Low",
    "no_cases_found": "No test cases found",
    "case_title": "Test Case Title",
    "case_description": "Test Case Description",
@@ -180,33 +195,16 @@
    "description": "Description",
    "test_case_description": "Test case description",
    "priority": "Priority",
-    "critical": "Critical",
-    "high": "High",
-    "medium": "Medium",
-    "low": "Low",
    "type": "Type",
-    "other": "Other",
-    "security": "Security",
-    "performance": "Performance",
-    "accessibility": "Accessibility",
-    "functional": "Functional",
-    "acceptance": "Acceptance",
-    "usability": "Usability",
-    "smoke_sanity": "Smoke&Sanity",
-    "compatibility": "Compatibility",
-    "destructive": "Destructive",
-    "regression": "Regression",
-    "automated": "Automated",
-    "manual": "Manual",
    "template": "Template",
    "test_detail": "Test detail",
    "preconditions": "Preconditions",
+    "expected_result": "Expected result",
    "step": "Step",
    "text": "Text",
    "steps": "Steps",
    "new_step": "New Step",
    "details_of_the_step": "Details of the step",
-    "expected_result": "Expected result",
    "delete_this_step": "Delete this step",
    "insert_step": "Insert step",
    "attachments": "Attachments",
@@ -249,30 +247,22 @@
    "title": "Title",
    "please_enter": "Please enter run name",
    "description": "Description",
-    "new": "New",
-    "inProgress": "In progress",
-    "underReview": "Under review",
-    "rejected": "Rejected",
-    "done": "Done",
-    "closed": "Closed",
    "priority": "Priority",
    "status": "Status",
    "actions": "Actions",
-    "critical": "Critical",
-    "high": "High",
-    "medium": "Medium",
-    "low": "Low",
-    "untested": "Untested",
-    "passed": "Passed",
-    "failed": "Failed",
-    "retest": "Retest",
-    "skipped": "Skipped",
    "select_test_case": "Select test cases",
    "test_case_selection": "Test case selection",
    "include_in_run": "Include in run",
    "exclude_from_run": "Exclude from run",
    "no_cases_found": "No cases found",
-    "are_you_sure_leave": "Are you sure you want to leave the page?"
+    "are_you_sure_leave": "Are you sure you want to leave the page?",
+    "type": "Type",
+    "test_detail": "Test detail",
+    "steps": "Steps",
+    "preconditions": "Preconditions",
+    "expected_result": "Expected result",
+    "details_of_the_step": "Details of the step",
+    "close": "Close"
  },
  "Members": {
    "member_management": "Member Management",
@@ -298,11 +288,8 @@
    "project_detail": "Project Detail",
    "project_owner": "Project Owner",
    "edit_project": "Edit Project",
-    "project": "Project",
    "publicity": "Publicity",
    "public": "Public",
-    "private": "Private",
-    "if_you_make_public": "Making a project public makes it visible to users who are not project members.",
    "update": "Update",
    "delete_project": "Delete Project",
    "delete": "Delete",
--- a/frontend/messages/ja.json
+++ b/frontend/messages/ja.json
@@ -1,4 +1,53 @@
 {
+  "RunStatus": {
+    "new": "新規",
+    "inProgress": "進行中",
+    "underReview": "レビュー中",
+    "rejected": "却下",
+    "done": "完了",
+    "closed": "クローズ"
+  },
+  "RunCaseStatus": {
+    "untested": "未実行",
+    "passed": "成功",
+    "failed": "失敗",
+    "retest": "再テスト",
+    "skipped": "スキップ"
+  },
+  "Priority": {
+    "priority": "優先度",
+    "critical": "致",
+    "high": "高",
+    "medium": "中",
+    "low": "低"
+  },
+  "Type": {
+    "other": "その他",
+    "security": "セキュリティ",
+    "performance": "パフォーマンス",
+    "accessibility": "アクセシビリティ",
+    "functional": "機能",
+    "acceptance": "受け入れ",
+    "usability": "ユーザビリティ",
+    "smoke_sanity": "スモーク/サニティ",
+    "compatibility": "互換性",
+    "destructive": "破壊",
+    "regression": "回帰",
+    "automated": "自動",
+    "manual": "手動"
+  },
+  "ProjectDialog": {
+    "project": "プロジェクト",
+    "project_name": "プロジェクト名",
+    "project_detail": "プロジェクト詳細",
+    "public": "パブリック",
+    "private": "プライベート",
+    "if_you_make_public": "プロジェクトをパブリックにすると、プロジェクトメンバーではないユーザーからも見えるようになります。",
+    "close": "閉じる",
+    "create": "作成",
+    "update": "更新",
+    "please_enter": "プロジェクト名を入力してください"
+  },
  "Index": {
    "get_started": "テスト管理を始める",
    "demo": "デモ",
@@ -78,21 +127,14 @@
  },
  "Projects": {
    "projectList": "プロジェクト一覧",
-    "project": "プロジェクト",
    "new_project": "新規プロジェクト",
    "id": "ID",
    "publicity": "公開",
+    "public": "パブリック",
+    "private": "プライベート",
    "name": "名前",
    "detail": "詳細",
    "last_update": "最終更新",
-    "project_name": "プロジェクト名",
-    "project_detail": "プロジェクト詳細",
-    "public": "パブリック",
-    "private": "プライベート",
-    "if_you_make_public": "プロジェクトをパブリックにすると、プロジェクトメンバーではないユーザーからも見えるようになります。",
-    "close": "閉じる",
-    "create": "作成",
-    "please_enter": "プロジェクト名を入力してください",
    "no_projects_found": "プロジェクトがありません"
  },
  "Project": {
@@ -107,31 +149,9 @@
    "test_cases": "テストケース",
    "test_runs": "テストラン",
    "progress": "進捗",
-    "untested": "未実行",
-    "passed": "成功",
-    "failed": "失敗",
-    "retest": "再テスト",
-    "skipped": "スキップ",
    "test_classification": "テスト分類",
    "by_type": "タイプ別",
-    "by_priority": "優先度別",
-    "other": "その他",
-    "security": "セキュリティ",
-    "performance": "パフォーマンス",
-    "accessibility": "アクセシビリティ",
-    "functional": "機能",
-    "acceptance": "受け入れ",
-    "usability": "ユーザビリティ",
-    "smoke_sanity": "スモーク/サニティ",
-    "compatibility": "互換性",
-    "destructive": "破壊",
-    "regression": "回帰",
-    "automated": "自動",
-    "manual": "手動",
-    "critical": "致",
-    "high": "高",
-    "medium": "中",
-    "low": "低"
+    "by_priority": "優先度別"
  },
  "Folders": {
    "folder": "フォルダー",
@@ -160,10 +180,6 @@
    "are_you_sure": "テストケースを削除してもよろしいですか?",
    "new_test_case": "新規テストケース",
    "status": "ステータス",
-    "critical": "致",
-    "high": "高",
-    "medium": "中",
-    "low": "低",
    "no_cases_found": "テストケースがありません",
    "case_title": "テストケースタイトル",
    "case_description": "テストケース詳細",
@@ -180,33 +196,16 @@
    "description": "詳細",
    "test_case_description": "テストケース詳細",
    "priority": "優先度",
-    "critical": "致",
-    "high": "高",
-    "medium": "中",
-    "low": "低",
    "type": "タイプ",
-    "other": "その他",
-    "security": "セキュリティ",
-    "performance": "パフォーマンス",
-    "accessibility": "アクセシビリティ",
-    "functional": "機能",
-    "acceptance": "受け入れ",
-    "usability": "ユーザビリティ",
-    "smoke_sanity": "スモーク/サニティ",
-    "compatibility": "互換性",
-    "destructive": "破壊",
-    "regression": "回帰",
-    "automated": "自動",
-    "manual": "手動",
    "template": "テンプレート",
    "test_detail": "テスト詳細",
    "preconditions": "前提条件",
+    "expected_result": "期待結果",
    "step": "ステップ",
    "text": "テキスト",
    "steps": "ステップ",
    "new_step": "新規ステップ",
    "details_of_the_step": "ステップ詳細",
-    "expected_result": "期待結果",
    "delete_this_step": "このステップを削除",
    "insert_step": "ステップを挿入",
    "attachments": "添付ファイル",
@@ -248,31 +247,23 @@
    "id": "ID",
    "title": "タイトル",
    "description": "詳細",
-    "new": "新規",
-    "inProgress": "進行中",
-    "underReview": "レビュー中",
-    "rejected": "却下",
-    "done": "完了",
-    "closed": "クローズ",
    "please_enter": "タイトルを入力してください",
    "priority": "優先度",
    "status": "ステータス",
    "actions": "アクション",
-    "critical": "致",
-    "high": "高",
-    "medium": "中",
-    "low": "低",
-    "untested": "未実行",
-    "passed": "成功",
-    "failed": "失敗",
-    "retest": "再テスト",
-    "skipped": "スキップ",
    "select_test_case": "テストケースを選択",
    "test_case_selection": "テストケース選択",
    "include_in_run": "テストランに含める",
    "exclude_from_run": "テストランから除外する",
    "no_cases_found": "テストケースが見つかりません",
-    "are_you_sure_leave": "ページを離れてもよろしいですか"
+    "are_you_sure_leave": "ページを離れてもよろしいですか",
+    "type": "タイプ",
+    "test_detail": "テスト詳細",
+    "steps": "ステップ",
+    "preconditions": "前提条件",
+    "expected_result": "期待結果",
+    "details_of_the_step": "ステップ詳細",
+    "close": "閉じる"
  },
  "Members": {
    "member_management": "メンバー管理",
@@ -298,12 +289,9 @@
    "project_detail": "プロジェクト詳細",
    "project_owner": "所有者",
    "edit_project": "プロジェクトの編集",
-    "project": "プロジェクト",
    "publicity": "公開",
    "public": "パブリック",
    "private": "プライベート",
-    "if_you_make_public": "プロジェクトをパブリックにすると、プロジェクトメンバーではないユーザーからも見えるようになります。",
-    "update": "更新",
    "delete_project": "プロジェクトの削除",
    "delete": "削除",
    "close": "閉じる",
--- a/frontend/next.config.js
+++ b/frontend/next.config.js
@@ -3,13 +3,6 @@ const withNextIntl = createNextIntlPlugin();

 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  typescript: {
-    // !! WARN !!
-    // Dangerously allow production builds to successfully complete even if
-    // your project has type errors.
-    // !! WARN !!
-    ignoreBuildErrors: true,
-  },
  output: 'standalone',
 };

--- a/frontend/src/app/[locale]/DropdownAccount.tsx
+++ b/frontend/src/app/[locale]/DropdownAccount.tsx
@@ -18,7 +18,11 @@ export default function DropdownAccount({ messages, locale, onItemPress }: Props
  const context = useContext(TokenContext);

  const signOut = () => {
-    context.setToken(null);
+    context.setToken({
+      access_token: '',
+      expires_at: 0,
+      user: null,
+    });
    context.removeTokenFromLocalStorage();
    router.push(`/`, { locale: locale });
  };
@@ -74,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]/Header.tsx
+++ b/frontend/src/app/[locale]/Header.tsx
@@ -1,7 +1,8 @@
 import { useTranslations } from 'next-intl';
 import HeaderNavbarMenu from './HeaderNavbarMenu';
+import { LocaleCodeType } from '@/types/locale';

-export default function Header(params: { locale: string }) {
+export default function Header(params: { locale: LocaleCodeType }) {
  const t = useTranslations('Header');
  const messages = {
    projects: t('projects'),
--- a/frontend/src/app/[locale]/HeaderNavbarMenu.tsx
+++ b/frontend/src/app/[locale]/HeaderNavbarMenu.tsx
@@ -23,6 +23,7 @@ import { locales } from '@/config/selection';
 import DropdownAccount from './DropdownAccount';
 import DropdownLanguage from './DropdownLanguage';
 import UserAvatar from '@/components/UserAvatar';
+import { LocaleCodeType } from '@/types/locale';

 type NabbarMenuMessages = {
  projects: string;
@@ -39,7 +40,7 @@ type NabbarMenuMessages = {

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

 export default function HeaderNavbarMenu({ messages, locale }: Props) {
@@ -143,7 +144,7 @@ export default function HeaderNavbarMenu({ messages, locale }: Props) {
          <DropdownAccount messages={messages} locale={locale} onItemPress={() => {}} />
          <DropdownLanguage locale={locale} onChangeLocale={changeLocale} />
        </div>
-        <NavbarMenuToggle className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)} />
+        <NavbarMenuToggle className="md:hidden" onPress={() => setIsMenuOpen(!isMenuOpen)} />
      </NavbarContent>

      <NavbarMenu>
@@ -202,7 +203,11 @@ export default function HeaderNavbarMenu({ messages, locale }: Props) {
                title={messages.signOut}
                startContent={<ArrowRightFromLine size={16} />}
                onPress={() => {
-                  context.setToken(null);
+                  context.setToken({
+                    access_token: '',
+                    expires_at: 0,
+                    user: null,
+                  });
                  context.removeTokenFromLocalStorage();
                  router.push(`/`, { locale: locale });
                  setIsMenuOpen(false);
@@ -220,7 +225,7 @@ export default function HeaderNavbarMenu({ messages, locale }: Props) {
                key="signin"
                startContent={<ArrowRightToLine size={16} />}
                title={messages.signIn}
-                onClick={() => {
+                onPress={() => {
                  router.push('/account/signin', { locale: locale });
                  setIsMenuOpen(false);
                }}
@@ -229,7 +234,7 @@ export default function HeaderNavbarMenu({ messages, locale }: Props) {
                key="signup"
                title={messages.signUp}
                startContent={<PenTool size={16} />}
-                onClick={() => {
+                onPress={() => {
                  router.push('/account/signup', { locale: locale });
                  setIsMenuOpen(false);
                }}
@@ -248,7 +253,7 @@ export default function HeaderNavbarMenu({ messages, locale }: Props) {
                key={entry.code}
                startContent={<Globe size={16} />}
                title={entry.name}
-                onClick={() => {
+                onPress={() => {
                  changeLocale(entry.code);
                  setIsMenuOpen(false);
                }}
--- a/frontend/src/app/[locale]/PaneMainTitle.tsx
+++ b/frontend/src/app/[locale]/PaneMainTitle.tsx
@@ -3,9 +3,10 @@ import { Button, Link as NextUiLink } from '@nextui-org/react';
 import { MoveUpRight } from 'lucide-react';
 import { Link } from '@/src/navigation';
 import { useTranslations } from 'next-intl';
+import { LocaleCodeType } from '@/types/locale';

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

 export default function MainTitle({ locale }: Props) {
--- a/frontend/src/app/[locale]/account/AccountPage.tsx
+++ b/frontend/src/app/[locale]/account/AccountPage.tsx
@@ -7,6 +7,7 @@ import Avatar from 'boring-avatars';
 import { fetchMyProjects } from '@/utils/projectsControl';
 import { ProjectType } from '@/types/project';
 import PublicityChip from '@/components/PublicityChip';
+import { LocaleCodeType } from '@/types/locale';

 type AccountPageMessages = {
  yourProjects: string;
@@ -17,7 +18,7 @@ type AccountPageMessages = {

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

 export default function AccountPage({ messages, locale }: Props) {
@@ -50,13 +51,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
@@ -77,9 +77,4 @@ function generateRandomEmail() {
  return `${randomString}@example.com`;
 }

-function getRandomAvatarPath() {
-  const randomIndex = Math.floor(Math.random() * avatars.length);
-  return avatars[randomIndex];
-}
-
-export { signUp, signIn, signInAsGuest, getRandomAvatarPath };
+export { signUp, signIn, signInAsGuest };
--- a/frontend/src/app/[locale]/account/authPage.tsx
+++ b/frontend/src/app/[locale]/account/authPage.tsx
@@ -11,12 +11,13 @@ import { isValidEmail, isValidPassword } from './validate';
 import { TokenContext } from '@/utils/TokenProvider';
 import { useRouter } from '@/src/navigation';
 import Config from '@/config/config';
+import { LocaleCodeType } from '@/types/locale';
 const isDemoSite = Config.isDemoSite;

 type Props = {
-  isSignup: Boolean;
+  isSignup: boolean;
  messages: AuthMessages;
-  locale: string;
+  locale: LocaleCodeType;
 };

 export default function AuthPage({ isSignup, messages, locale }: Props) {
--- a/frontend/src/app/[locale]/account/page.tsx
+++ b/frontend/src/app/[locale]/account/page.tsx
@@ -1,6 +1,9 @@
 import { useTranslations } from 'next-intl';
 import AccountPage from './AccountPage';
-export default function Page(params: { locale: string }) {
+import { PageType } from '@/types/base';
+import { LocaleCodeType } from '@/types/locale';
+
+export default function Page({ params }: PageType) {
  const t = useTranslations('Auth');
  const messages = {
    yourProjects: t('your_projects'),
@@ -9,5 +12,5 @@ export default function Page(params: { locale: string }) {
    noProjectsFound: t('no_projects_found'),
  };

-  return <AccountPage messages={messages} locale={params.locale} />;
+  return <AccountPage messages={messages} locale={params.locale as LocaleCodeType} />;
 }
--- a/frontend/src/app/[locale]/account/signin/page.tsx
+++ b/frontend/src/app/[locale]/account/signin/page.tsx
@@ -1,7 +1,9 @@
+import { PageType } from '@/types/base';
 import AuthPage from '../authPage';
 import { useTranslations } from 'next-intl';
+import { LocaleCodeType } from '@/types/locale';

-export default function Page(params: { locale: string }) {
+export default function Page({ params }: PageType) {
  const t = useTranslations('Auth');
  const messages = {
    title: t('signin'),
@@ -24,7 +26,7 @@ export default function Page(params: { locale: string }) {
  };
  return (
    <>
-      <AuthPage isSignup={false} messages={messages} locale={params.locale} />
+      <AuthPage isSignup={false} messages={messages} locale={params.locale as LocaleCodeType} />
    </>
  );
 }
--- a/frontend/src/app/[locale]/account/signup/page.tsx
+++ b/frontend/src/app/[locale]/account/signup/page.tsx
@@ -1,7 +1,9 @@
+import { PageType } from '@/types/base';
 import AuthPage from '../authPage';
 import { useTranslations } from 'next-intl';
+import { LocaleCodeType } from '@/types/locale';

-export default function Page(params: { locale: string }) {
+export default function Page({ params }: PageType) {
  const t = useTranslations('Auth');
  const messages = {
    title: t('signup'),
@@ -24,7 +26,7 @@ export default function Page(params: { locale: string }) {
  };
  return (
    <>
-      <AuthPage isSignup={true} messages={messages} locale={params.locale} />
+      <AuthPage isSignup={true} messages={messages} locale={params.locale as LocaleCodeType} />
    </>
  );
 }
--- a/frontend/src/app/[locale]/admin/AdminPage.tsx
+++ b/frontend/src/app/[locale]/admin/AdminPage.tsx
@@ -5,11 +5,12 @@ import { UserType, AdminMessages } from '@/types/user';
 import { TokenContext } from '@/utils/TokenProvider';
 import UsersTable from './UsersTable';
 import Config from '@/config/config';
+import { LocaleCodeType } from '@/types/locale';
 const apiServer = Config.apiServer;

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

 async function fetchUsers(jwt: string) {
@@ -62,7 +63,7 @@ export default function AdminPage({ messages, locale }: Props) {
        <h3 className="font-bold">{messages.userManagement}</h3>
      </div>

-      <UsersTable users={users} messages={messages} locale={locale} />
+      <UsersTable users={users} messages={messages} />
    </div>
  );
 }
--- a/frontend/src/app/[locale]/admin/UsersTable.tsx
+++ b/frontend/src/app/[locale]/admin/UsersTable.tsx
@@ -7,10 +7,9 @@ import Avatar from 'boring-avatars';
 type Props = {
  users: UserType[];
  messages: AdminMessages;
-  locale: string;
 };

-export default function UsersTable({ users, messages, locale }: Props) {
+export default function UsersTable({ users, messages }: Props) {
  const headerColumns = [
    { name: messages.avatar, uid: 'avatar', sortable: false },
    { name: messages.id, uid: 'id', sortable: true },
@@ -34,7 +33,7 @@ export default function UsersTable({ users, messages, locale }: Props) {
    });
  }, [sortDescriptor, users]);

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

    switch (columnKey) {
@@ -54,7 +53,8 @@ export default function UsersTable({ users, messages, locale }: Props) {
      case 'name':
        return cellValue;
      case 'role':
-        return <span>{messages[roles[cellValue].uid]}</span>;
+        return <span>{messages[roles[cellValue as number].uid]}</span>;
+
      default:
        return cellValue;
    }
@@ -101,7 +101,9 @@ export default function UsersTable({ users, messages, locale }: Props) {
        </TableHeader>
        <TableBody emptyContent={messages.noUsersFound} 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]/admin/page.tsx
+++ b/frontend/src/app/[locale]/admin/page.tsx
@@ -1,7 +1,9 @@
 import { useTranslations } from 'next-intl';
 import AdminPage from './AdminPage';
+import { PageType } from '@/types/base';
+import { LocaleCodeType } from '@/types/locale';

-export default function Page(params: { locale: string }) {
+export default function Page({ params }: PageType) {
  const t = useTranslations('Admin');
  const messages = {
    admin: t('admin'),
@@ -18,7 +20,7 @@ export default function Page(params: { locale: string }) {

  return (
    <div className="w-full flex items-center justify-center">
-      <AdminPage messages={messages} locale={params.locale} />
+      <AdminPage messages={messages} locale={params.locale as LocaleCodeType} />
    </div>
  );
 }
--- a/frontend/src/app/[locale]/layout.tsx
+++ b/frontend/src/app/[locale]/layout.tsx
@@ -5,8 +5,9 @@ import Header from './Header';
 import clsx from 'clsx';
 import { getTranslations } from 'next-intl/server';
 import { useTranslations } from 'next-intl';
+import { LocaleCodeType } from '@/types/locale';

-export async function generateMetadata({ params: { locale } }) {
+export async function generateMetadata({ params: { locale } }: { params: { locale: LocaleCodeType } }) {
  const t = await getTranslations({ locale, namespace: 'Header' });
  return {
    title: t('title'),
@@ -24,7 +25,7 @@ export default function RootLayout({
  params: { locale },
 }: {
  children: React.ReactNode;
-  params: { locale: string };
+  params: { locale: LocaleCodeType };
 }) {
  const t = useTranslations('Toast');
  const toastMessages = {
--- a/frontend/src/app/[locale]/page.tsx
+++ b/frontend/src/app/[locale]/page.tsx
@@ -4,8 +4,10 @@ import { title, subtitle } from '@/components/primitives';
 import PaneMainTitle from './PaneMainTitle';
 import PaneMainFeatures from './PaneMainFeatures';
 import DemoImage from './DemoImage';
+import { PageType } from '@/types/base';
+import { LocaleCodeType } from '@/types/locale';

-export default function Home(params: { locale: string }) {
+export default function Home({ params }: PageType) {
  const t = useTranslations('Index');

  const demoImages = [
@@ -35,7 +37,7 @@ export default function Home(params: { locale: string }) {
    <section className="mx-auto max-w-screen-xl my-12">
      <div className="flex flex-wrap">
        <div className="w-full md:w-7/12 order-last md:order-first p-4">
-          <PaneMainTitle locale={params.locale} />
+          <PaneMainTitle locale={params.locale as LocaleCodeType} />
        </div>

        <div className="w-full md:w-5/12 p-4">
--- a/frontend/src/app/[locale]/projects/ProjectsPage.tsx
+++ b/frontend/src/app/[locale]/projects/ProjectsPage.tsx
@@ -3,17 +3,19 @@ import { useEffect, useState, useContext } from 'react';
 import { Button } from '@nextui-org/react';
 import { Plus } from 'lucide-react';
 import { TokenContext } from '@/utils/TokenProvider';
-import { ProjectType, ProjectsMessages } from '@/types/project';
+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';

 export type Props = {
  messages: ProjectsMessages;
-  locale: string;
+  projectDialogMessages: ProjectDialogMessages;
+  locale: LocaleCodeType;
 };

-export default function ProjectsPage({ messages, locale }: Props) {
+export default function ProjectsPage({ messages, projectDialogMessages, locale }: Props) {
  const context = useContext(TokenContext);
  const [projects, setProjects] = useState<ProjectType[]>([]);

@@ -73,7 +75,7 @@ export default function ProjectsPage({ messages, locale }: Props) {
        editingProject={editingProject}
        onCancel={closeDialog}
        onSubmit={onSubmit}
-        messages={messages}
+        projectDialogMessages={projectDialogMessages}
      />
    </div>
  );
--- a/frontend/src/app/[locale]/projects/ProjectsTable.tsx
+++ b/frontend/src/app/[locale]/projects/ProjectsTable.tsx
@@ -1,14 +1,15 @@
-import { useState, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback, ReactNode } from 'react';
 import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, SortDescriptor } from '@nextui-org/react';
 import { Link, NextUiLinkClasses } from '@/src/navigation';
 import { ProjectType, ProjectsMessages } from '@/types/project';
 import dayjs from 'dayjs';
 import PublicityChip from '@/components/PublicityChip';
+import { LocaleCodeType } from '@/types/locale';

 type Props = {
  projects: ProjectType[];
  messages: ProjectsMessages;
-  locale: string;
+  locale: LocaleCodeType;
 };

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

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

    switch (columnKey) {
      case 'id':
-        return <span>{cellValue}</span>;
+        return <span>{cellValue as number}</span>;
      case 'isPublic':
-        return <PublicityChip isPublic={cellValue} publicText={messages.public} privateText={messages.private} />;
+        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}
+              {cellValue as string}
            </Link>
            <div className="text-xs text-default-500">
              <div>{truncatedDetail}</div>
@@ -60,9 +63,9 @@ export default function ProjectsTable({ projects, messages, locale }: Props) {
          </div>
        );
      case 'updatedAt':
-        return <span>{dayjs(cellValue).format('YYYY/MM/DD HH:mm')}</span>;
+        return <span>{dayjs(cellValue as number).format('YYYY/MM/DD HH:mm')}</span>;
      default:
-        return cellValue;
+        return cellValue as string;
    }
  }, []);

@@ -107,7 +110,9 @@ export default function ProjectsTable({ projects, messages, locale }: Props) {
        </TableHeader>
        <TableBody emptyContent={messages.noProjectsFound} 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/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
@@ -6,15 +6,18 @@ import { fetchCases, createCase, deleteCases } from '@/utils/caseControl';
 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;
-  locale: string;
+  priorityMessages: PriorityMessages;
+  locale: LocaleCodeType;
 };

-export default function CasesPane({ projectId, folderId, messages, locale }: Props) {
+export default function CasesPane({ projectId, folderId, messages, priorityMessages, locale }: Props) {
  const [cases, setCases] = useState<CaseType[]>([]);
  const context = useContext(TokenContext);
  const [isCaseDialogOpen, setIsCaseDialogOpen] = useState(false);
@@ -65,7 +68,7 @@ export default function CasesPane({ projectId, folderId, messages, locale }: Pro

  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();
    }
@@ -81,6 +84,7 @@ export default function CasesPane({ projectId, folderId, messages, locale }: Pro
        onDeleteCase={onDeleteCase}
        onDeleteCases={onDeleteCases}
        messages={messages}
+        priorityMessages={priorityMessages}
        locale={locale}
      />

--- 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,9 +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 { priorities } from '@/config/selection';
+import { PriorityMessages } from '@/types/priority';
+import TestCasePriority from '@/components/TestCasePriority';
+import { LocaleCodeType } from '@/types/locale';

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

 export default function TestCaseTable({
@@ -38,6 +41,7 @@ export default function TestCaseTable({
  onDeleteCase,
  onDeleteCases,
  messages,
+  priorityMessages,
  locale,
 }: Props) {
  const headerColumns = [
@@ -70,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">
@@ -84,17 +88,12 @@ export default function TestCaseTable({
              locale={locale}
              className={NextUiLinkClasses}
            >
-              {cellValue}
+              {cellValue as string}
            </Link>
          </Button>
        );
      case 'priority':
-        return (
-          <div className="flex items-center">
-            <Circle size={8} color={priorities[cellValue].color} fill={priorities[cellValue].color} />
-            <div className="ms-3">{messages[priorities[cellValue].uid]}</div>
-          </div>
-        );
+        return <TestCasePriority priorityValue={cellValue as number} priorityMessages={priorityMessages} />;
      case 'actions':
        return (
          <Dropdown>
@@ -115,7 +114,7 @@ export default function TestCaseTable({
          </Dropdown>
        );
      default:
-        return cellValue;
+        return cellValue as string;
    }
  }, []);

@@ -154,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"
@@ -202,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,17 +1,19 @@
 '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';
 import { priorities, testTypes, templates } from '@/config/selection';
 import CaseStepsEditor from './CaseStepsEditor';
 import CaseAttachmentsEditor from './CaseAttachmentsEditor';
-import { CaseType, AttachmentType, CaseMessages, StepType } from '@/types/case';
 import { fetchCase, updateCase } from '@/utils/caseControl';
 import { updateSteps } from './stepControl';
 import { fetchCreateAttachments, fetchDownloadAttachment, fetchDeleteAttachment } from './attachmentControl';
 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';

 const defaultTestCase = {
  id: 0,
@@ -36,10 +38,20 @@ type Props = {
  folderId: string;
  caseId: string;
  messages: CaseMessages;
+  testTypeMessages: TestTypeMessages;
+  priorityMessages: PriorityMessages;
  locale: string;
 };

-export default function CaseEditor({ projectId, folderId, caseId, messages, locale }: Props) {
+export default function CaseEditor({
+  projectId,
+  folderId,
+  caseId,
+  messages,
+  testTypeMessages,
+  priorityMessages,
+  locale,
+}: Props) {
  const context = useContext(TokenContext);
  const [testCase, setTestCase] = useState<CaseType>(defaultTestCase);
  const [isTitleInvalid, setIsTitleInvalid] = useState<boolean>(false);
@@ -122,13 +134,22 @@ export default function CaseEditor({ projectId, folderId, caseId, messages, loca
    }
  };

-  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[]) => {
@@ -137,28 +158,36 @@ export default function CaseEditor({ projectId, folderId, caseId, messages, loca
    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(() => {
@@ -249,10 +278,12 @@ export default function CaseEditor({ projectId, folderId, caseId, messages, loca
            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} />
@@ -262,7 +293,7 @@ export default function CaseEditor({ projectId, folderId, caseId, messages, loca
          >
            {priorities.map((priority, index) => (
              <SelectItem key={priority.uid} value={index}>
-                {messages[priority.uid]}
+                {priorityMessages[priority.uid]}
              </SelectItem>
            ))}
          </Select>
@@ -273,17 +304,19 @@ export default function CaseEditor({ projectId, folderId, caseId, messages, loca
            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"
          >
            {testTypes.map((type, index) => (
              <SelectItem key={type.uid} value={index}>
-                {messages[type.uid]}
+                {testTypeMessages[type.uid]}
              </SelectItem>
            ))}
          </Select>
@@ -294,10 +327,12 @@ export default function CaseEditor({ projectId, folderId, caseId, messages, loca
            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"
@@ -353,41 +388,47 @@ export default function CaseEditor({ projectId, folderId, caseId, messages, loca
                {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/[caseId]/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx
@@ -1,5 +1,7 @@
+import { PriorityMessages } from '@/types/priority';
 import CaseEditor from './CaseEditor';
 import { useTranslations } from 'next-intl';
+import { TestTypeMessages } from '@/types/testType';

 export default function Page({
  params,
@@ -22,33 +24,16 @@ export default function Page({
    description: t('description'),
    testCaseDescription: t('test_case_description'),
    priority: t('priority'),
-    critical: t('critical'),
-    high: t('high'),
-    medium: t('medium'),
-    low: t('low'),
    type: t('type'),
-    other: t('other'),
-    security: t('security'),
-    performance: t('performance'),
-    accessibility: t('accessibility'),
-    functional: t('functional'),
-    acceptance: t('acceptance'),
-    usability: t('usability'),
-    smokeSanity: t('smoke_sanity'),
-    compatibility: t('compatibility'),
-    destructive: t('destructive'),
-    regression: t('regression'),
-    automated: t('automated'),
-    manual: t('manual'),
    template: t('template'),
    testDetail: t('test_detail'),
    preconditions: t('preconditions'),
+    expectedResult: t('expected_result'),
    step: t('step'),
    text: t('text'),
    steps: t('steps'),
    newStep: t('new_step'),
    detailsOfTheStep: t('details_of_the_step'),
-    expectedResult: t('expected_result'),
    deleteThisStep: t('delete_this_step'),
    insertStep: t('insert_step'),
    attachments: t('attachments'),
@@ -61,12 +46,39 @@ export default function Page({
    areYouSureLeave: t('are_you_sure_leave'),
  };

+  const tt = useTranslations('Type');
+  const testTypeMessages: TestTypeMessages = {
+    other: tt('other'),
+    security: tt('security'),
+    performance: tt('performance'),
+    accessibility: tt('accessibility'),
+    functional: tt('functional'),
+    acceptance: tt('acceptance'),
+    usability: tt('usability'),
+    smokeSanity: tt('smoke_sanity'),
+    compatibility: tt('compatibility'),
+    destructive: tt('destructive'),
+    regression: tt('regression'),
+    automated: tt('automated'),
+    manual: tt('manual'),
+  };
+
+  const priorityTranslation = useTranslations('Priority');
+  const priorityMessages: PriorityMessages = {
+    critical: priorityTranslation('critical'),
+    high: priorityTranslation('high'),
+    medium: priorityTranslation('medium'),
+    low: priorityTranslation('low'),
+  };
+
  return (
    <CaseEditor
      projectId={params.projectId}
      folderId={params.folderId}
      caseId={params.caseId}
      messages={messages}
+      testTypeMessages={testTypeMessages}
+      priorityMessages={priorityMessages}
      locale={params.locale}
    />
  );
--- 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,5 +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');
@@ -15,10 +17,6 @@ export default function Page({ params }: { params: { projectId: string; folderId
    areYouSure: t('are_you_sure'),
    newTestCase: t('new_test_case'),
    status: t('status'),
-    critical: t('critical'),
-    high: t('high'),
-    medium: t('medium'),
-    low: t('low'),
    noCasesFound: t('no_cases_found'),
    caseTitle: t('case_title'),
    caseDescription: t('case_description'),
@@ -26,9 +24,23 @@ export default function Page({ params }: { params: { projectId: string; folderId
    pleaseEnter: t('please_enter'),
  };

+  const priorityTranslation = useTranslations('Priority');
+  const priorityMessages: PriorityMessages = {
+    critical: priorityTranslation('critical'),
+    high: priorityTranslation('high'),
+    medium: priorityTranslation('medium'),
+    low: priorityTranslation('low'),
+  };
+
  return (
    <>
-      <CasesPane projectId={params.projectId} folderId={params.folderId} locale={params.locale} messages={messages} />
+      <CasesPane
+        projectId={params.projectId}
+        folderId={params.folderId}
+        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,16 +3,21 @@ 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';
 import { aggregateBasicInfo, aggregateTestPriority, aggregateTestType, aggregateProgress } from './aggregate';
+import Config from '@/config/config';
+import { useTheme } from 'next-themes';
 import TestTypesChart from './TestTypesDonutChart';
 import TestPriorityChart from './TestPriorityDonutChart';
 import TestProgressBarChart from './TestProgressColumnChart';
-import Config from '@/config/config';
-import { useTheme } from 'next-themes';
+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;

 async function fetchProject(jwt: string, projectId: number) {
@@ -41,24 +46,38 @@ async function fetchProject(jwt: string, projectId: number) {
 type Props = {
  projectId: string;
  messages: HomeMessages;
+  testRunCaseStatusMessages: TestRunCaseStatusMessages;
+  testTypeMessages: TestTypeMessages;
+  priorityMessages: PriorityMessages;
 };

-export function ProjectHome({ projectId, messages }: Props) {
+export function ProjectHome({
+  projectId,
+  messages,
+  testRunCaseStatusMessages,
+  testTypeMessages,
+  priorityMessages,
+}: 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() {
@@ -67,7 +86,7 @@ export function ProjectHome({ projectId, messages }: Props) {
      }

      try {
-        const data = await fetchProject(context.token.access_token, projectId);
+        const data = await fetchProject(context.token.access_token, Number(projectId));
        setProject(data);
      } catch (error: any) {
        console.error('Error in effect:', error.message);
@@ -79,6 +98,9 @@ export function ProjectHome({ projectId, messages }: Props) {

  useEffect(() => {
    async function aggregate() {
+      if (!project) {
+        return;
+      }
      const { folderNum, runNum, caseNum } = aggregateBasicInfo(project);
      setFolderNum(folderNum);
      setRunNum(runNum);
@@ -90,7 +112,7 @@ export function ProjectHome({ projectId, messages }: Props) {
      const priorityRet = aggregateTestPriority(project);
      setPriorityCounts([...priorityRet]);

-      const { series, categories } = aggregateProgress(project, messages);
+      const { series, categories } = aggregateProgress(project, testRunCaseStatusMessages);
      setProgressSeries([...series]);
      setProgressCategories([...categories]);
    }
@@ -130,11 +152,11 @@ export function ProjectHome({ projectId, messages }: Props) {
      <div className="flex pb-20">
        <div style={{ width: '32rem', height: '18rem' }}>
          <h3>{messages.byType}</h3>
-          <TestTypesChart typesCounts={typesCounts} messages={messages} theme={theme} />
+          <TestTypesChart typesCounts={typesCounts} testTypeMessages={testTypeMessages} theme={theme} />
        </div>
        <div style={{ width: '30rem', height: '18rem' }}>
          <h3>{messages.byPriority}</h3>
-          <TestPriorityChart priorityCounts={priorityCounts} messages={messages} theme={theme} />
+          <TestPriorityChart priorityCounts={priorityCounts} priorityMessages={priorityMessages} theme={theme} />
        </div>
      </div>
    </div>
--- 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 { HomeMessages } from './page';
+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[];
-  messages: HomeMessages;
-  theme: string;
+  priorityMessages: PriorityMessages;
+  theme: string | undefined;
 };

-export default function TestPriorityDonutChart({ priorityCounts, messages, theme }: Props) {
-  const [chartData, setChartData] = useState({
+export default function TestPriorityDonutChart({ priorityCounts, priorityMessages, theme }: Props) {
+  const [chartData, setChartData] = useState<ChartDataType>({
    series: [],
    options: {
      labels: [],
@@ -29,7 +30,7 @@ export default function TestPriorityDonutChart({ priorityCounts, messages, theme
          return found ? found.count : 0;
        });

-        const labels = priorities.map((entry) => messages[entry.uid]);
+        const labels = priorities.map((entry) => priorityMessages[entry.uid]);
        const colors = priorities.map((entry) => entry.chartColor);
        const legend = {
          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 { HomeMessages } from './page';
+import { TestTypeMessages } from '@/types/testType';
+import { CaseTypeCountType, ChartDataType } from '@/types/chart';
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });

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

-export default function TestTypesDonutChart({ typesCounts, messages, theme }: Props) {
-  const [chartData, setChartData] = useState({
+export default function TestTypesDonutChart({ typesCounts, testTypeMessages, theme }: Props) {
+  const [chartData, setChartData] = useState<ChartDataType>({
    series: [],
    options: {
      labels: [],
@@ -29,7 +29,7 @@ export default function TestTypesDonutChart({ typesCounts, messages, theme }: Pr
          return found ? found.count : 0;
        });

-        const labels = testTypes.map((entry) => messages[entry.uid]);
+        const labels = testTypes.map((entry) => testTypeMessages[entry.uid]);
        const colors = testTypes.map((entry) => entry.chartColor);
        const legend = {
          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 { HomeMessages } from './page';
+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, messages: HomeMessages) {
-  let series = testRunCaseStatus.map((status) => {
-    return { name: messages[status.uid], data: [] };
+function aggregateProgress(project: ProjectType, testRunCaseStatusMessages: TestRunCaseStatusMessages) {
+  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, messages: HomeMessages) {
  });

  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]/home/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/home/page.tsx
@@ -1,37 +1,17 @@
 import { ProjectHome } from './ProjectHome';
 import { useTranslations } from 'next-intl';
+import { PriorityMessages } from '@/types/priority';
+import { TestTypeMessages } from '@/types/testType';
+import { TestRunCaseStatusMessages } from '@/types/status';

 export type HomeMessages = {
  folders: string;
  testCases: string;
  testRuns: string;
  progress: string;
-  untested: string;
-  passed: string;
-  failed: string;
-  retest: string;
-  skipped: string;
  testClassification: string;
  byType: string;
  byPriority: string;
-  testTypes: string;
-  other: string;
-  security: string;
-  performance: string;
-  accessibility: string;
-  functional: string;
-  acceptance: string;
-  usability: string;
-  smokeSanity: string;
-  compatibility: string;
-  destructive: string;
-  regression: string;
-  automated: string;
-  manual: string;
-  critical: string;
-  high: string;
-  medium: string;
-  low: string;
 };

 export default function Page({ params }: { params: { projectId: string } }) {
@@ -41,35 +21,54 @@ export default function Page({ params }: { params: { projectId: string } }) {
    testCases: t('test_cases'),
    testRuns: t('test_runs'),
    progress: t('progress'),
-    untested: t('untested'),
-    passed: t('passed'),
-    failed: t('failed'),
-    retest: t('retest'),
-    skipped: t('skipped'),
    testClassification: t('test_classification'),
    byType: t('by_type'),
    byPriority: t('by_priority'),
-    other: t('other'),
-    security: t('security'),
-    performance: t('performance'),
-    accessibility: t('accessibility'),
-    functional: t('functional'),
-    acceptance: t('acceptance'),
-    usability: t('usability'),
-    smokeSanity: t('smoke_sanity'),
-    compatibility: t('compatibility'),
-    destructive: t('destructive'),
-    regression: t('regression'),
-    automated: t('automated'),
-    manual: t('manual'),
-    critical: t('critical'),
-    high: t('high'),
-    medium: t('medium'),
-    low: t('low'),
  };
+
+  const rcst = useTranslations('RunCaseStatus');
+  const testRunCaseStatusMessages: TestRunCaseStatusMessages = {
+    untested: rcst('untested'),
+    passed: rcst('passed'),
+    failed: rcst('failed'),
+    retest: rcst('retest'),
+    skipped: rcst('skipped'),
+  };
+
+  const tt = useTranslations('Type');
+  const testTypeMessages: TestTypeMessages = {
+    other: tt('other'),
+    security: tt('security'),
+    performance: tt('performance'),
+    accessibility: tt('accessibility'),
+    functional: tt('functional'),
+    acceptance: tt('acceptance'),
+    usability: tt('usability'),
+    smokeSanity: tt('smoke_sanity'),
+    compatibility: tt('compatibility'),
+    destructive: tt('destructive'),
+    regression: tt('regression'),
+    automated: tt('automated'),
+    manual: tt('manual'),
+  };
+
+  const pt = useTranslations('Priority');
+  const priorityMessages: PriorityMessages = {
+    critical: pt('critical'),
+    high: pt('high'),
+    medium: pt('medium'),
+    low: pt('low'),
+  };
+
  return (
    <>
-      <ProjectHome projectId={params.projectId} messages={messages} />
+      <ProjectHome
+        projectId={params.projectId}
+        messages={messages}
+        testRunCaseStatusMessages={testRunCaseStatusMessages}
+        testTypeMessages={testTypeMessages}
+        priorityMessages={priorityMessages}
+      />
    </>
  );
 }
--- 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
@@ -37,6 +37,9 @@ import { fetchFolders } from '../../folders/foldersControl';
 import { TokenContext } from '@/utils/TokenProvider';
 import { useTheme } from 'next-themes';
 import { useFormGuard } from '@/utils/formGuard';
+import { PriorityMessages } from '@/types/priority';
+import { RunStatusMessages, TestRunCaseStatusMessages } from '@/types/status';
+import { TestTypeMessages } from '@/types/testType';

 const defaultTestRun = {
  id: 0,
@@ -53,15 +56,28 @@ type Props = {
  projectId: string;
  runId: string;
  messages: RunMessages;
+  runStatusMessages: RunStatusMessages;
+  testRunCaseStatusMessages: TestRunCaseStatusMessages;
+  priorityMessages: PriorityMessages;
+  testTypeMessages: TestTypeMessages;
  locale: string;
 };

-export default function RunEditor({ projectId, runId, messages, locale }: Props) {
+export default function RunEditor({
+  projectId,
+  runId,
+  messages,
+  runStatusMessages,
+  testRunCaseStatusMessages,
+  priorityMessages,
+  testTypeMessages,
+  locale,
+}: Props) {
  const context = useContext(TokenContext);
  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[]>([]);
@@ -202,7 +218,11 @@ export default function RunEditor({ projectId, runId, messages, locale }: Props)
                </Tooltip>
              </div>

-              <RunProgressChart statusCounts={runStatusCounts} messages={messages} theme={theme} />
+              <RunProgressChart
+                statusCounts={runStatusCounts}
+                testRunCaseStatusMessages={testRunCaseStatusMessages}
+                theme={theme}
+              />
            </div>
          </div>
          <div className="flex-grow">
@@ -236,17 +256,19 @@ export default function RunEditor({ projectId, runId, messages, locale }: Props)
                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"
              >
                {testRunStatus.map((status, index) => (
                  <SelectItem key={status.uid} value={index}>
-                    {messages[status.uid]}
+                    {runStatusMessages[status.uid]}
                  </SelectItem>
                ))}
              </Select>
@@ -258,7 +280,7 @@ export default function RunEditor({ projectId, runId, messages, locale }: Props)
        <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
@@ -310,10 +332,13 @@ export default function RunEditor({ projectId, runId, messages, locale }: Props)
              isDisabled={!context.isProjectReporter(Number(projectId))}
              selectedKeys={selectedKeys}
              onSelectionChange={setSelectedKeys}
-              onStatusChange={handleChangeStatus}
+              onChangeStatus={handleChangeStatus}
              onIncludeCase={(includeTestId) => handleIncludeExcludeCase(true, includeTestId)}
              onExcludeCase={(excludeCaseId) => handleIncludeExcludeCase(false, excludeCaseId)}
              messages={messages}
+              testRunCaseStatusMessages={testRunCaseStatusMessages}
+              priorityMessages={priorityMessages}
+              testTypeMessages={testTypeMessages}
            />
          </div>
        </div>
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunPregressDonutChart.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunPregressDonutChart.tsx
@@ -2,17 +2,19 @@ import React from 'react';
 import { useState, useEffect } from 'react';
 import dynamic from 'next/dynamic';
 import { testRunCaseStatus } from '@/config/selection';
-import { RunStatusCountType, RunMessages } from '@/types/run';
+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 = {
  statusCounts: RunStatusCountType[];
-  messages: RunMessages;
+  testRunCaseStatusMessages: TestRunCaseStatusMessages;
  theme: string | undefined;
 };

-export default function RunProgressDounut({ statusCounts, messages, theme }: Props) {
-  const [chartData, setChartData] = useState({
+export default function RunProgressDounut({ statusCounts, testRunCaseStatusMessages, theme }: Props) {
+  const [chartData, setChartData] = useState<ChartDataType>({
    series: [],
    options: {
      labels: [],
@@ -28,7 +30,7 @@ export default function RunProgressDounut({ statusCounts, messages, theme }: Pro
          return found ? found.count : 0;
        });

-        const labels = testRunCaseStatus.map((entry) => messages[entry.uid]);
+        const labels = testRunCaseStatus.map((entry) => testRunCaseStatusMessages[entry.uid]);
        const colors = testRunCaseStatus.map((entry) => entry.chartColor);
        const legend = {
          labels: {
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseDetailDialog.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseDetailDialog.tsx
@@ -0,0 +1,173 @@
+import { useState, useEffect, useContext } from 'react';
+import { Button, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Avatar, Textarea } from '@nextui-org/react';
+import { testTypes, templates } from '@/config/selection';
+import { RunMessages } from '@/types/run';
+import { CaseType, StepType } from '@/types/case';
+import { PriorityMessages } from '@/types/priority';
+import TestCasePriority from '@/components/TestCasePriority';
+import { TokenContext } from '@/utils/TokenProvider';
+import { fetchCase } from '@/utils/caseControl';
+import { TestTypeMessages } from '@/types/testType';
+
+type Props = {
+  isOpen: boolean;
+  caseId: number;
+  onCancel: () => void;
+  onChangeStatus: (changeCaseId: number, status: number) => {};
+  messages: RunMessages;
+  testTypeMessages: TestTypeMessages;
+  priorityMessages: PriorityMessages;
+};
+
+const defaultTestCase = {
+  id: 0,
+  title: '',
+  state: 0,
+  priority: 0,
+  type: 0,
+  automationStatus: 0,
+  description: '',
+  template: 0,
+  preConditions: '',
+  expectedResults: '',
+  folderId: 0,
+};
+
+export default function TestCaseDetailDialog({
+  isOpen,
+  caseId,
+  onCancel,
+  onChangeStatus,
+  messages,
+  testTypeMessages,
+  priorityMessages,
+}: Props) {
+  const context = useContext(TokenContext);
+  const [testCase, setTestCase] = useState<CaseType>(defaultTestCase);
+
+  useEffect(() => {
+    async function fetchDataEffect() {
+      if (!context.isSignedIn()) {
+        return;
+      }
+
+      if (!caseId || caseId <= 0) {
+        return;
+      }
+
+      try {
+        const data = await fetchCase(context.token.access_token, Number(caseId));
+        if (data.Steps && data.Steps.length > 0) {
+          data.Steps.sort((a: StepType, b: StepType) => {
+            const stepNoA = a.caseSteps.stepNo;
+            const stepNoB = b.caseSteps.stepNo;
+            return stepNoA - stepNoB;
+          });
+        }
+
+        setTestCase(data);
+      } catch (error: any) {
+        console.error('Error in effect:', error.message);
+      }
+    }
+
+    fetchDataEffect();
+  }, [context, caseId]);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      size="5xl"
+      scrollBehavior="outside"
+      onOpenChange={() => {
+        onCancel();
+      }}
+      classNames={{
+        header: 'border-b-[1px] border-[#e5e5e5]',
+        body: 'border-b-[1px] border-[#e5e5e5]',
+      }}
+    >
+      <ModalContent>
+        <ModalHeader className="flex flex-col gap-1">{testCase.title}</ModalHeader>
+        <ModalBody>
+          <p className={'font-bold mt-2'}>{messages.description}</p>
+          <div>{testCase.description}</div>
+
+          <div className="flex my-2">
+            <div className="w-1/2">
+              <p className={'font-bold'}>{messages.priority}</p>
+              <TestCasePriority priorityValue={testCase.priority} priorityMessages={priorityMessages} />
+            </div>
+
+            <div className="w-1/2">
+              <p className={'font-bold'}>{messages.type}</p>
+              <div>{testTypeMessages[testTypes[testCase.type].uid]}</div>
+            </div>
+          </div>
+        </ModalBody>
+        <ModalBody>
+          {templates[testCase.template].uid === 'text' ? (
+            <>
+              <p className={'font-bold mt-2'}>{messages.testDetail}</p>
+              <div className="flex gap-2 my-2">
+                <div className="w-1/2">
+                  <Textarea
+                    isReadOnly
+                    size="sm"
+                    variant="flat"
+                    label={messages.preconditions}
+                    value={testCase.preConditions}
+                  />
+                </div>
+                <div className="w-1/2">
+                  <Textarea
+                    isReadOnly
+                    size="sm"
+                    variant="flat"
+                    label={messages.expectedResult}
+                    value={testCase.expectedResults}
+                  />
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              <p className={'font-bold mt-2'}>{messages.steps}</p>
+              {testCase.Steps &&
+                testCase.Steps.map((step) => (
+                  <div key={step.id} className="flex items-center my-1">
+                    <Avatar className="me-2" size="sm" name={step.caseSteps.stepNo.toString()} />
+                    <div key={step.id} className="grow flex gap-2">
+                      <div className="w-1/2">
+                        <Textarea
+                          isReadOnly
+                          size="sm"
+                          variant="flat"
+                          label={messages.detailsOfTheStep}
+                          value={step.step}
+                        />
+                      </div>
+                      <div className="w-1/2">
+                        <Textarea
+                          isReadOnly
+                          size="sm"
+                          variant="flat"
+                          label={messages.expectedResult}
+                          value={step.result}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                ))}
+            </>
+          )}
+        </ModalBody>
+        <ModalFooter>
+          <Button variant="light" onPress={onCancel}>
+            {messages.close}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, ReactNode } from 'react';
 import {
  Table,
  TableHeader,
@@ -16,6 +16,7 @@ import {
 } from '@nextui-org/react';
 import {
  ChevronDown,
+  MoveDiagonal,
  MoreVertical,
  CopyPlus,
  CopyMinus,
@@ -25,19 +26,27 @@ import {
  CircleX,
  CircleSlash2,
 } from 'lucide-react';
-import { priorities, testRunCaseStatus } from '@/config/selection';
+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';
+import { TestRunCaseStatusMessages } from '@/types/status';

 type Props = {
  cases: CaseType[];
  isDisabled: boolean;
  selectedKeys: Selection;
  onSelectionChange: React.Dispatch<React.SetStateAction<Selection>>;
-  onStatusChange: (changeCaseId: number, status: number) => {};
+  onChangeStatus: (changeCaseId: number, status: number) => {};
  onIncludeCase: (includeCaseId: number) => {};
  onExcludeCase: (excludeCaseId: number) => {};
  messages: RunMessages;
+  testRunCaseStatusMessages: TestRunCaseStatusMessages;
+  priorityMessages: PriorityMessages;
+  testTypeMessages: TestTypeMessages;
 };

 export default function TestCaseSelector({
@@ -45,10 +54,13 @@ export default function TestCaseSelector({
  isDisabled,
  selectedKeys,
  onSelectionChange,
-  onStatusChange,
+  onChangeStatus,
  onIncludeCase,
  onExcludeCase,
  messages,
+  testRunCaseStatusMessages,
+  testTypeMessages,
+  priorityMessages,
 }: Props) {
  const headerColumns = [
    { name: messages.id, uid: 'id', sortable: true },
@@ -90,7 +102,6 @@ export default function TestCaseSelector({
  }, [sortDescriptor, cases]);

  const notIncludedCaseClass = 'text-neutral-200 dark:text-neutral-600';
-  const chipBaseClass = 'flex items-center text-default-600';

  const renderStatusIcon = (uid: string) => {
    if (uid === 'untested') {
@@ -118,21 +129,28 @@ export default function TestCaseSelector({
    return isIncluded;
  };

-  const renderCell = (testCase: CaseType, columnKey: Key) => {
+  const renderCell = (testCase: CaseType, columnKey: string): ReactNode => {
    const cellValue = testCase[columnKey as keyof CaseType];
    const isIncluded = isCaseIncluded(testCase);
    const runStatus = testCase.RunCases && testCase.RunCases.length > 0 ? testCase.RunCases[0].status : 0;

    switch (columnKey) {
+      case 'title':
+        return (
+          <Button
+            size="sm"
+            variant="light"
+            className="group"
+            endContent={<MoveDiagonal size={12} className="text-transparent group-hover:text-inherit" />}
+            onPress={() => showTestCaseDetailDialog(testCase.id)}
+          >
+            {cellValue as string}
+          </Button>
+        );
      case 'priority':
        return (
-          <div className={isIncluded ? chipBaseClass : chipBaseClass + notIncludedCaseClass}>
-            <Circle
-              size={8}
-              color={isIncluded ? priorities[cellValue].color : '#d4d4d8'}
-              fill={isIncluded ? priorities[cellValue].color : '#d4d4d8'}
-            />
-            <div className="ms-3">{messages[priorities[cellValue].uid]}</div>
+          <div className={isIncluded ? '' : notIncludedCaseClass}>
+            <TestCasePriority priorityValue={cellValue as number} priorityMessages={priorityMessages} />
          </div>
        );
      case 'runStatus':
@@ -146,7 +164,9 @@ export default function TestCaseSelector({
                startContent={isIncluded && renderStatusIcon(testRunCaseStatus[runStatus].uid)}
                endContent={isIncluded && <ChevronDown size={16} />}
              >
-                <span className="w-12">{isIncluded && messages[testRunCaseStatus[runStatus].uid]}</span>
+                <span className="w-12">
+                  {isIncluded && testRunCaseStatusMessages[testRunCaseStatus[runStatus].uid]}
+                </span>
              </Button>
            </DropdownTrigger>
            <DropdownMenu disabledKeys={disabledStatusKeys} aria-label="test case actions">
@@ -154,9 +174,9 @@ export default function TestCaseSelector({
                <DropdownItem
                  key={runCaseStatus.uid}
                  startContent={renderStatusIcon(runCaseStatus.uid)}
-                  onPress={() => onStatusChange(testCase.id, index)}
+                  onPress={() => onChangeStatus(testCase.id, index)}
                >
-                  {messages[runCaseStatus.uid]}
+                  {testRunCaseStatusMessages[runCaseStatus.uid]}
                </DropdownItem>
              ))}
            </DropdownMenu>
@@ -199,7 +219,7 @@ export default function TestCaseSelector({
          </Dropdown>
        );
      default:
-        return cellValue;
+        return cellValue as string;
    }
  };

@@ -226,6 +246,17 @@ export default function TestCaseSelector({
    onSelectionChange(keys);
  };

+  // Test Case Detail
+  const [isTestCaseDetailDialogOpen, setIsTestCaseDetailDialogOpen] = useState(false);
+  const [showingTestCaseId, setShowingTestCaseId] = useState<number>(0);
+  const showTestCaseDetailDialog = (showTestCaseId: number) => {
+    setIsTestCaseDetailDialogOpen(true);
+    setShowingTestCaseId(showTestCaseId);
+  };
+  const hideTestCaseDetailDialog = () => {
+    setIsTestCaseDetailDialogOpen(false);
+  };
+
  return (
    <>
      <Table
@@ -260,6 +291,16 @@ export default function TestCaseSelector({
          ))}
        </TableBody>
      </Table>
+
+      <TestCaseDetailDialog
+        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,9 +1,13 @@
 import RunEditor from './RunEditor';
 import { useTranslations } from 'next-intl';
+import { RunMessages } from '@/types/run';
+import { PriorityMessages } from '@/types/priority';
+import { RunStatusMessages, TestRunCaseStatusMessages } from '@/types/status';
+import { TestTypeMessages } from '@/types/testType';

 export default function Page({ params }: { params: { projectId: string; runId: string; locale: string } }) {
  const t = useTranslations('Run');
-  const messages = {
+  const messages: RunMessages = {
    backToRuns: t('back_to_runs'),
    updating: t('updating'),
    update: t('update'),
@@ -13,31 +17,78 @@ export default function Page({ params }: { params: { projectId: string; runId: s
    title: t('title'),
    pleaseEnter: t('please_enter'),
    description: t('description'),
-    new: t('new'),
-    inProgress: t('inProgress'),
-    underReview: t('underReview'),
-    rejected: t('rejected'),
-    done: t('done'),
-    closed: t('closed'),
    priority: t('priority'),
    actions: t('actions'),
    status: t('status'),
-    critical: t('critical'),
-    high: t('high'),
-    medium: t('medium'),
-    low: t('low'),
-    untested: t('untested'),
-    passed: t('passed'),
-    failed: t('failed'),
-    retest: t('retest'),
-    skipped: t('skipped'),
    selectTestCase: t('select_test_case'),
    testCaseSelection: t('test_case_selection'),
    includeInRun: t('include_in_run'),
    excludeFromRun: t('exclude_from_run'),
    noCasesFound: t('no_cases_found'),
    areYouSureLeave: t('are_you_sure_leave'),
+    type: t('type'),
+    testDetail: t('test_detail'),
+    steps: t('steps'),
+    preconditions: t('preconditions'),
+    expectedResult: t('expected_result'),
+    detailsOfTheStep: t('details_of_the_step'),
+    close: t('close'),
  };

-  return <RunEditor projectId={params.projectId} runId={params.runId} messages={messages} locale={params.locale} />;
+  const rst = useTranslations('RunStatus');
+  const runStatusMessages: RunStatusMessages = {
+    new: rst('new'),
+    inProgress: rst('inProgress'),
+    underReview: rst('underReview'),
+    rejected: rst('rejected'),
+    done: rst('done'),
+    closed: rst('closed'),
+  };
+
+  const rcst = useTranslations('RunCaseStatus');
+  const testRunCaseStatusMessages: TestRunCaseStatusMessages = {
+    untested: rcst('untested'),
+    passed: rcst('passed'),
+    failed: rcst('failed'),
+    retest: rcst('retest'),
+    skipped: rcst('skipped'),
+  };
+
+  const pt = useTranslations('Priority');
+  const priorityMessages: PriorityMessages = {
+    critical: pt('critical'),
+    high: pt('high'),
+    medium: pt('medium'),
+    low: pt('low'),
+  };
+
+  const tt = useTranslations('Type');
+  const testTypeMessages: TestTypeMessages = {
+    other: tt('other'),
+    security: tt('security'),
+    performance: tt('performance'),
+    accessibility: tt('accessibility'),
+    functional: tt('functional'),
+    acceptance: tt('acceptance'),
+    usability: tt('usability'),
+    smokeSanity: tt('smoke_sanity'),
+    compatibility: tt('compatibility'),
+    destructive: tt('destructive'),
+    regression: tt('regression'),
+    automated: tt('automated'),
+    manual: tt('manual'),
+  };
+
+  return (
+    <RunEditor
+      projectId={params.projectId}
+      runId={params.runId}
+      messages={messages}
+      runStatusMessages={runStatusMessages}
+      testRunCaseStatusMessages={testRunCaseStatusMessages}
+      priorityMessages={priorityMessages}
+      testTypeMessages={testTypeMessages}
+      locale={params.locale}
+    />
+  );
 }
--- 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}
+      />
    </>
  );
 }
--- a/frontend/src/app/[locale]/projects/page.tsx
+++ b/frontend/src/app/[locale]/projects/page.tsx
@@ -1,17 +1,26 @@
+import { PageType } from '@/types/base';
 import ProjectsPage from './ProjectsPage';
 import { useTranslations } from 'next-intl';
+import { LocaleCodeType } from '@/types/locale';
+import { ProjectDialogMessages, ProjectsMessages } from '@/types/project';

-export default function Page(params: { locale: string }) {
+export default function Page({ params }: PageType) {
  const t = useTranslations('Projects');
-  const messages = {
+  const messages: ProjectsMessages = {
    projectList: t('projectList'),
-    project: t('project'),
    newProject: t('new_project'),
    id: t('id'),
    publicity: t('publicity'),
+    public: t('public'),
+    private: t('private'),
    name: t('name'),
    detail: t('detail'),
    lastUpdate: t('last_update'),
+    noProjectsFound: t('no_projects_found'),
+  };
+
+  const projectDialogMessages: ProjectDialogMessages = {
+    project: t('project'),
    projectName: t('project_name'),
    projectDetail: t('project_detail'),
    public: t('public'),
@@ -19,12 +28,17 @@ export default function Page(params: { locale: string }) {
    ifYouMakePublic: t('if_you_make_public'),
    close: t('close'),
    create: t('create'),
+    update: t('update'),
    pleaseEnter: t('please_enter'),
-    noProjectsFound: t('no_projects_found'),
  };
+
  return (
    <>
-      <ProjectsPage messages={messages} locale={params.locale} />
+      <ProjectsPage
+        messages={messages}
+        projectDialogMessages={projectDialogMessages}
+        locale={params.locale as LocaleCodeType}
+      />
    </>
  );
 }
--- a/frontend/src/i18n.ts
+++ b/frontend/src/i18n.ts
@@ -1,7 +1,8 @@
 import { notFound } from 'next/navigation';
 import { getRequestConfig } from 'next-intl/server';
+import { LocaleCodeType } from '@/types/locale';

-const locales = ['en', 'ja'];
+const locales: LocaleCodeType[] = ['en', 'ja'];

 export default getRequestConfig(async ({ locale }) => {
  if (!locales.includes(locale as any)) notFound();
--- a/frontend/types/base.ts
+++ b/frontend/types/base.ts
@@ -0,0 +1,21 @@
+export type PageType = {
+  params: {
+    locale: string;
+  };
+};
+
+export type GlobalRoleType = {
+  uid: 'administrator' | 'user';
+};
+
+export type MemberRoleType = {
+  uid: 'manager' | 'developer' | 'reporter';
+};
+
+export type AutomationStatusType = {
+  uid: 'automated' | 'automation-not-required' | 'cannot-be-automated' | 'obsolete';
+};
+
+export type TemplateType = {
+  uid: 'text' | 'step';
+};
--- a/frontend/types/case.ts
+++ b/frontend/types/case.ts
@@ -45,8 +45,8 @@ type RunCaseType = {
 type CaseAttachmentType = {
  createdAt: Date;
  updatedAt: Date;
-  CaseId: number;
-  AttachmentId: number;
+  caseId: number;
+  attachmentId: number;
 };

 type AttachmentType = {
@@ -59,16 +59,6 @@ type AttachmentType = {
  caseAttachments: CaseAttachmentType;
 };

-type CaseTypeCountType = {
-  type: number;
-  count: number;
-};
-
-type CasePriorityCountType = {
-  priority: number;
-  count: number;
-};
-
 type CasesMessages = {
  testCaseList: string;
  id: string;
@@ -81,10 +71,6 @@ type CasesMessages = {
  delete: string;
  newTestCase: string;
  status: string;
-  critical: string;
-  high: string;
-  medium: string;
-  low: string;
  noCasesFound: string;
  caseTitle: string;
  caseDescription: string;
@@ -102,33 +88,16 @@ type CaseMessages = {
  description: string;
  testCaseDescription: string;
  priority: string;
-  critical: string;
-  high: string;
-  medium: string;
-  low: string;
  type: string;
-  other: string;
-  security: string;
-  performance: string;
-  accessibility: string;
-  functional: string;
-  acceptance: string;
-  usability: string;
-  smokeSanity: string;
-  compatibility: string;
-  destructive: string;
-  regression: string;
-  automated: string;
-  manual: string;
  template: string;
  testDetail: string;
  preconditions: string;
+  expectedResult: string;
  step: string;
  text: string;
  steps: string;
  newStep: string;
  detailsOfTheStep: string;
-  expectedResult: string;
  deleteThisStep: string;
  insertStep: string;
  attachments: string;
@@ -141,12 +110,4 @@ type CaseMessages = {
  areYouSureLeave: string;
 };

-export type {
-  CaseType,
-  StepType,
-  AttachmentType,
-  CaseTypeCountType,
-  CasePriorityCountType,
-  CasesMessages,
-  CaseMessages,
-};
+export type { CaseType, StepType, AttachmentType, CasesMessages, CaseMessages };
--- a/frontend/types/chart.ts
+++ b/frontend/types/chart.ts
@@ -0,0 +1,16 @@
+import { ApexOptions } from 'apexcharts';
+
+export type ChartDataType = {
+  series: ApexOptions['series'];
+  options: ApexOptions;
+};
+
+export type CaseTypeCountType = {
+  type: number;
+  count: number;
+};
+
+export type CasePriorityCountType = {
+  priority: number;
+  count: number;
+};
--- a/frontend/types/locale.ts
+++ b/frontend/types/locale.ts
@@ -0,0 +1,6 @@
+export type LocaleCodeType = 'en' | 'ja';
+
+export type LocaleType = {
+  code: LocaleCodeType;
+  name: string;
+};
--- a/frontend/types/priority.ts
+++ b/frontend/types/priority.ts
@@ -0,0 +1,16 @@
+type PriorityUidType = 'critical' | 'high' | 'medium' | 'low';
+
+type PriorityType = {
+  uid: PriorityUidType;
+  color: string;
+  chartColor: string;
+};
+
+type PriorityMessages = {
+  critical: string;
+  high: string;
+  medium: string;
+  low: string;
+};
+
+export type { PriorityUidType, PriorityType, PriorityMessages };
--- a/frontend/types/project.ts
+++ b/frontend/types/project.ts
@@ -13,14 +13,8 @@ export type ProjectType = {
  Runs: RunType[]; // additional property
 };

-export type ProjectsMessages = {
-  projectList: string;
-  newProject: string;
-  id: string;
-  publicity: string;
-  name: string;
-  detail: string;
-  lastUpdate: string;
+export type ProjectDialogMessages = {
+  project: string;
  projectName: string;
  projectDetail: string;
  public: string;
@@ -28,7 +22,20 @@ export type ProjectsMessages = {
  ifYouMakePublic: string;
  close: string;
  create: string;
+  update: string;
  pleaseEnter: string;
+};
+
+export type ProjectsMessages = {
+  projectList: string;
+  newProject: string;
+  id: string;
+  publicity: string;
+  public: string;
+  private: string;
+  name: string;
+  detail: string;
+  lastUpdate: string;
  noProjectsFound: string;
 };

@@ -36,5 +43,6 @@ export type ProjectMessages = {
  home: string;
  testCases: string;
  testRuns: string;
+  members: string;
  settings: string;
 };
--- a/frontend/types/run.ts
+++ b/frontend/types/run.ts
@@ -7,6 +7,7 @@ type RunType = {
  projectId: number;
  createdAt: string;
  updatedAt: string;
+  RunCases?: RunCaseType[];
 };

 type RunCaseType = {
@@ -15,6 +16,8 @@ type RunCaseType = {
  caseId: number;
  status: number;
  editState: 'notChanged' | 'changed' | 'new' | 'deleted';
+  createdAt: string;
+  updatedAt: string;
 };

 type RunStatusCountType = {
@@ -59,30 +62,22 @@ type RunMessages = {
  title: string;
  pleaseEnter: string;
  description: string;
-  new: string;
-  inProgress: string;
-  underReview: string;
-  rejected: string;
-  done: string;
-  closed: string;
  priority: string;
  status: string;
  actions: string;
-  critical: string;
-  high: string;
-  medium: string;
-  low: string;
-  untested: string;
-  passed: string;
-  failed: string;
-  retest: string;
-  skipped: string;
  selectTestCase: string;
  testCaseSelection: string;
  includeInRun: string;
  excludeFromRun: string;
  noCasesFound: string;
  areYouSureLeave: string;
+  type: string;
+  testDetail: string;
+  steps: string;
+  preconditions: string;
+  expectedResult: string;
+  detailsOfTheStep: string;
+  close: string;
 };

 export type { RunType, RunCaseType, RunStatusCountType, ProgressSeriesType, RunsMessages, RunMessages };
--- a/frontend/types/settings.ts
+++ b/frontend/types/settings.ts
@@ -4,12 +4,9 @@ export type SettingsMessages = {
  projectDetail: string;
  projectOwner: string;
  editProject: string;
-  project: string;
  publicity: string;
  public: string;
  private: string;
-  ifYouMakePublic: string;
-  update: string;
  deleteProject: string;
  delete: string;
  close: string;
--- a/frontend/types/status.ts
+++ b/frontend/types/status.ts
@@ -0,0 +1,41 @@
+// The status of each test run
+type RunStatusUidType = 'new' | 'inProgress' | 'underReview' | 'rejected' | 'done' | 'closed';
+
+type RunStatusType = {
+  uid: RunStatusUidType;
+};
+
+type RunStatusMessages = {
+  new: string;
+  inProgress: string;
+  underReview: string;
+  rejected: string;
+  done: string;
+  closed: string;
+};
+
+// The status of each test case in test run
+type TestRunCaseStatusUidType = 'untested' | 'passed' | 'failed' | 'retest' | 'skipped';
+
+type TestRunCaseStatusType = {
+  uid: TestRunCaseStatusUidType;
+  color: string;
+  chartColor: string;
+};
+
+type TestRunCaseStatusMessages = {
+  untested: string;
+  passed: string;
+  failed: string;
+  retest: string;
+  skipped: string;
+};
+
+export type {
+  RunStatusUidType,
+  RunStatusType,
+  RunStatusMessages,
+  TestRunCaseStatusUidType,
+  TestRunCaseStatusType,
+  TestRunCaseStatusMessages,
+};
--- a/frontend/types/testType.ts
+++ b/frontend/types/testType.ts
@@ -0,0 +1,37 @@
+type TestTypeUidType =
+  | 'other'
+  | 'security'
+  | 'performance'
+  | 'accessibility'
+  | 'functional'
+  | 'acceptance'
+  | 'usability'
+  | 'smokeSanity'
+  | 'compatibility'
+  | 'destructive'
+  | 'regression'
+  | 'automated'
+  | 'manual';
+
+type TestTypeType = {
+  uid: TestTypeUidType;
+  chartColor: string;
+};
+
+type TestTypeMessages = {
+  other: string;
+  security: string;
+  performance: string;
+  accessibility: string;
+  functional: string;
+  acceptance: string;
+  usability: string;
+  smokeSanity: string;
+  compatibility: string;
+  destructive: string;
+  regression: string;
+  automated: string;
+  manual: string;
+};
+
+export type { TestTypeUidType, TestTypeType, TestTypeMessages };
--- a/frontend/types/toast.ts
+++ b/frontend/types/toast.ts
@@ -8,5 +8,5 @@ export type ToastMessages = {
 };

 export type ToastContextType = {
-  showToast: (text: string, mode: string) => {};
+  showToast: (text: string, mode: string) => void;
 };
--- a/frontend/types/user.ts
+++ b/frontend/types/user.ts
@@ -1,3 +1,4 @@
+import { LocaleCodeType } from './locale';
 import { ToastMessages } from './toast';

 export type UserType = {
@@ -10,8 +11,8 @@ export type UserType = {
 };

 export type TokenProps = {
-  toastMessages: ToastMessages;
-  locale: string;
+  toastMessages?: ToastMessages;
+  locale?: LocaleCodeType;
  children?: React.ReactNode;
 };

@@ -73,6 +74,8 @@ export type AdminMessages = {
  username: string;
  role: string;
  noUsersFound: string;
+  administrator: string;
+  user: string;
 };

 export type AccountDropDownMessages = {
--- a/frontend/utils/TokenProvider.tsx
+++ b/frontend/utils/TokenProvider.tsx
@@ -136,9 +136,13 @@ const TokenProvider = ({ toastMessages, locale, children }: TokenProps) => {
    const ret = tokenCheckSignInPage(token, pathname);
    if (!ret.ok) {
      if (ret.reason === 'notoken') {
-        toastContext.showToast(toastMessages.needSignedIn, 'error');
+        if (toastMessages) {
+          toastContext.showToast(toastMessages.needSignedIn, 'error');
+        }
      } else if (ret.reason === 'expired') {
-        toastContext.showToast(toastMessages.sessionExpired, 'error');
+        if (toastMessages) {
+          toastContext.showToast(toastMessages.sessionExpired, 'error');
+        }
      }

      router.push(ret.redirectPath, { locale: locale });