update dashboard (progress by team)

src/components/ProgressByTeam/ProgressByTeam.tsx

@@ -103,13 +103,13 @@ const ProgressByTeam: React.FC = () => {
   );
 
   const fetchData = async () => {
-    const teamprojects = await fetchTeamProjects();
-    for (let i = 0; i < teamprojects.length; i++) {
-      if (teamLeadId != null && teamprojects[i].teamLeadId == parseInt(teamLeadId)){
-        setTeamNameAndCode(t("Selected Team") + ": " + teamprojects[i].teamName + " (" + teamprojects[i].teamCode + ")")
-      }
-    }
-    if (teamLeadId) {
+    // const teamprojects = await fetchTeamProjects();
+    // for (let i = 0; i < teamprojects.length; i++) {
+    //   if (teamLeadId != null && teamprojects[i].teamLeadId == parseInt(teamLeadId)){
+    //     setTeamNameAndCode(t("Selected Team") + ": " + teamprojects[i].teamName + " (" + teamprojects[i].teamCode + ")")
+    //   }
+    // }
+    // if (teamLeadId) {
       try {
         const clickResult = await fetchAllTeamProjects(
         Number(teamLeadId),tableSorting)
@@ -119,7 +119,7 @@ const ProgressByTeam: React.FC = () => {
       } catch (error) {
         console.error('Error fetching team projects:', error);
       }
-    }
+    // }
   }
 
   useEffect(() => {
@@ -343,7 +343,7 @@ const ProgressByTeam: React.FC = () => {
       minWidth: 70,
       type: "number",
       renderCell: (params: any) => {
-        return <span>{params.row.budgetedManhour.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>;
+        return <span>{(params.row.budgetedManhour ?? 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>;
       }
     },
     {
@@ -472,8 +472,8 @@ const ProgressByTeam: React.FC = () => {
               label: t("Spent"),
               fontFamily: "sans-serif",
               formatter: function (val) {
-                return totalSpentPercentage + "%";
-              },
+                return isFinite(totalSpentPercentage) ? totalSpentPercentage + "%" : "N/A";
+              },  
             },
           },
         },

src/components/ProgressByTeamSearch/ProgressByTeamSearch.tsx

@@ -20,12 +20,22 @@ const ProgressByClientSearch: React.FC<Props> = ({ projects }) => {
   const { t } = useTranslation("dashboard");
   const router = useRouter();
   // If project searching is done on the server-side, then no need for this.
-  const [filteredProjects, setFilteredProjects] = useState(projects);
+  // const [filteredProjects, setFilteredProjects] = useState(projects);
+
+  const projectCombo = projects.map(project => ({
+    value: project.teamLeadId,
+    label: `${project.teamCode} ${project.teamName ? '- ' + project.teamName : ''} (${project.projectNo})`
+  }))
 
   const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
     () => [
-      { label: t("Team Code"), paramName: "teamCode", type: "text" },
-      { label: t("Team Name"), paramName: "teamName", type: "text" },
+      { 
+        label: t("Team"), 
+        paramName: "teamLeadId",
+        type: "autocomplete",
+        options: projectCombo,
+        needAll: false 
+      },
     ],
     [t],
   );
@@ -33,30 +43,20 @@ const ProgressByClientSearch: React.FC<Props> = ({ projects }) => {
   const onTaskClick = useCallback(async (teamProjectResult: TeamProjectResult) => {
     try {
       console.log(teamProjectResult)
-      router.push(
-        `/dashboard/ProjectStatusByTeam?teamLeadId=${teamProjectResult.teamLeadId}`
-      );
+      if (teamProjectResult.teamLeadId > 0) {
+        router.push(
+          `/dashboard/ProjectStatusByTeam?teamLeadId=${teamProjectResult.teamLeadId}`
+        );
+      } else {
+        router.push(
+          `/dashboard/ProjectStatusByTeam`
+        );
+      }
     } catch (error) {
         console.error('Error fetching team projects:', error);
     }
   }, []);
 
-
-  const columns = useMemo<Column<TeamProjectResult>[]>(
-    () => [
-      {
-        name: "id",
-        label: t("Details"),
-        onClick: onTaskClick,
-        buttonIcon: <VisibilityIcon />,
-      },
-      { name: "teamCode", label: t("Team Code") },
-      { name: "teamName", label: t("Team Name") },
-      { name: "projectNo", label: t("No. of Projects") },
-    ],
-    [onTaskClick, t],
-  );
-
   return (
     <>
       <Typography variant="h4" marginInlineEnd={2}>
@@ -65,19 +65,16 @@ const ProgressByClientSearch: React.FC<Props> = ({ projects }) => {
       <SearchBox
         criteria={searchCriteria}
         onSearch={(query) => {
-          setFilteredProjects(
-            projects.filter(
-              (cp) =>
-                cp.teamCode.toLowerCase().includes(query.teamCode.toLowerCase()) &&
-                cp.teamName.toLowerCase().includes(query.teamName.toLowerCase()) 
-            ),
-          );
+          console.log(query)
+          onTaskClick({
+            ...query,
+            teamLeadId: Number(query.teamLeadId),
+            teamId: Number(query.teamId),
+            id: Number(query.teamId),
+            projectNo: Number(query.projectNo)
+          })
         }}
       />
-      <SearchResults<TeamProjectResult>
-        items={filteredProjects}
-        columns={columns}
-      />
     </>
   );
 };

src/i18n/en/dashboard.json

@@ -109,6 +109,7 @@
     "Page": "Page",
 
     "Project Status by Team": "Project Status by Team",
+    "Team": "Team",
     "Team Code": "Team Code",
     "Team Name": "Team Name",
     

src/i18n/zh/dashboard.json

@@ -110,6 +110,7 @@
     "Page": "頁",
 
     "Project Status by Team": "按團隊查看項目狀態",
+    "Team": "團隊",
     "Team Code": "團隊代碼",
     "Team Name": "團隊名稱",