Display information of project on home tab

frontend/src/app/[locale]/projects/[projectId]/home/TestProgressColumnChart.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { useState, useEffect } from "react";
 import dynamic from "next/dynamic";
 import { ProgressSeriesType } from "@/types/run";
+import { testRunCaseStatus } from "@/config/selection";
 const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 type Props = {
@@ -36,6 +37,9 @@ export default function TestProgressBarChart({
             legend: {
               position: "right",
             },
+            colors: testRunCaseStatus.map((itr) => {
+              return itr.chartColor;
+            }),
             xaxis: {
               type: "datetime",
               categories: progressCategories,

frontend/src/app/[locale]/projects/[projectId]/home/aggregate.ts

@@ -1,5 +1,6 @@
 import { ProjectType } from "@/types/project";
 import { testTypes, priorities, testRunCaseStatus } from "@/config/selection";
+import { HomeMessages } from "./page";
 
 // aggregate folder, case, run mum
 function aggregateBasicInfo(project: ProjectType) {
@@ -49,9 +50,9 @@ function aggregateTestPriority(project: ProjectType) {
   return result;
 }
 
-function aggregateProgress(project: ProjectType) {
+function aggregateProgress(project: ProjectType, messages: HomeMessages) {
   let series = testRunCaseStatus.map((status) => {
-    return { name: status.uid, data: [] };
+    return { name: messages[status.uid], data: [] };
   });
   let categories = [];
 

frontend/src/app/[locale]/projects/[projectId]/home/home.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { useState, useEffect } from "react";
 import { Divider } from "@nextui-org/react";
-import { title } from "@/components/primitives";
+import { title, subtitle } from "@/components/primitives";
 import { Card, CardBody, Chip } from "@nextui-org/react";
 import { Folder, Clipboard, FlaskConical } from "lucide-react";
 import { CaseTypeCountType, CasePriorityCountType } from "@/types/case";
@@ -66,7 +66,6 @@ export function Home({ projectId, messages }: Props) {
       try {
         const data = await fetchProject(url);
         setProject(data);
-        console.log(data);
       } catch (error: any) {
         console.error("Error in effect:", error.message);
       }
@@ -88,7 +87,7 @@ export function Home({ projectId, messages }: Props) {
       const priorityRet = aggregateTestPriority(project);
       setPriorityCounts([...priorityRet]);
 
-      const { series, categories } = aggregateProgress(project);
+      const { series, categories } = aggregateProgress(project, messages);
       setProgressSeries([...series]);
       setProgressCategories([...categories]);
     }
@@ -123,27 +122,30 @@ export function Home({ projectId, messages }: Props) {
         </Chip>
       </div>
 
-      <Card className="mt-3 bg-neutral-100" shadow="none">
-        <CardBody>{project.detail}</CardBody>
-      </Card>
+      {project.detail && (
+        <Card className="mt-3 bg-neutral-100" shadow="none">
+          <CardBody>{project.detail}</CardBody>
+        </Card>
+      )}
 
-      <Divider className="my-6" />
-      <div style={{ height: "20rem" }}>
-        <h3>{messages.progress}</h3>
+      <Divider className="my-8" />
+      <h2 className={subtitle()}>{messages.progress}</h2>
+      <div style={{ height: "18rem" }}>
         <TestProgressBarChart
           progressSeries={progressSeries}
           progressCategories={progressCategories}
         />
       </div>
 
-      <Divider className="my-6" />
+      <Divider className="my-12" />
+      <h2 className={subtitle()}>{messages.testClassification}</h2>
       <div className="flex pb-20">
         <div style={{ width: "32rem", height: "18rem" }}>
-          <h3>{messages.testTypes}</h3>
+          <h3>{messages.byType}</h3>
           <TestTypesChart typesCounts={typesCounts} messages={messages} />
         </div>
         <div style={{ width: "30rem", height: "18rem" }}>
-          <h3>{messages.priority}</h3>
+          <h3>{messages.byPriority}</h3>
           <TestPriorityChart
             priorityCounts={priorityCounts}
             messages={messages}

frontend/src/app/[locale]/projects/[projectId]/home/page.tsx

@@ -6,6 +6,14 @@ export type HomeMessages = {
   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;
@@ -20,7 +28,6 @@ export type HomeMessages = {
   regression: string;
   automated: string;
   manual: string;
-  priority: string;
   critical: string;
   high: string;
   medium: string;
@@ -34,6 +41,14 @@ 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"),
     testTypes: t("test_types"),
     other: t("other"),
     security: t("security"),