update

src/components/CostAndExpenseReport/CostAndExpenseReport.tsx

@@ -19,7 +19,7 @@ type SearchParamNames = keyof SearchQuery;
 const CostAndExpenseReport: React.FC<Props> = ({ team, customer }) => {
   const { t } = useTranslation("report");
   const teamCombo = team.map((t) => `${t.name} - ${t.code}`);
-  const custCombo = customer.map(c => `${c.name} - ${c.code}`)
+  const custCombo = customer.map(c => ({label: `${c.name} - ${c.code}`, value: c.id}))
 
   const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
     () => [
@@ -30,13 +30,13 @@ const CostAndExpenseReport: React.FC<Props> = ({ team, customer }) => {
         options: teamCombo,
         needAll: true,
       },
-      {
-        label: t("Client"),
-        paramName: "customer",
-        type: "select",
-        options: custCombo,
-        needAll: true,
-      },
+      { 
+        label: t("Client"), 
+        paramName: "customer", 
+        type: "autocomplete", 
+        options: custCombo, 
+        needAll: true
+    },
       {
         label: t("Remaining Percentage"),
         paramName: "budgetPercentage",
@@ -63,9 +63,8 @@ const CostAndExpenseReport: React.FC<Props> = ({ team, customer }) => {
                 index = teamCombo.findIndex(team => team === query.team)
                 postData.teamId = team[index].id
             } 
-            if (query.customer.length > 0 && query.customer.toLocaleLowerCase() !== "all") {
-                index = custCombo.findIndex(customer => customer === query.customer)
-                postData.clientId = customer[index].id
+            if (typeof query.customer === "string" && query.customer.toLocaleLowerCase() !== "all") {
+                postData.clientId = query.customer
             }
             if (Boolean(query.budgetPercentage)) {
                 postData.budgetPercentage = query.budgetPercentage/100

src/components/GenerateMonthlyWorkHoursReport/GenerateMonthlyWorkHoursReport.tsx

@@ -23,14 +23,15 @@ type SearchParamNames = keyof SearchQuery;
 
 const GenerateMonthlyWorkHoursReport: React.FC<Props> = ({ staffs }) => {
   const { t } = useTranslation("report");
-  const staffCombo = staffs.map((staff) => `${staff.name} - ${staff.staffId}`);
+  const staffCombo = staffs.map((staff) => ({label: `${staff.name} - ${staff.staffId}`, value: staff.id}))
+
 
   const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
     () => [
       {
         label: t("Staff"),
         paramName: "staff",
-        type: "select",
+        type: "autocomplete",
         options: staffCombo,
         needAll: false,
       },
@@ -50,9 +51,8 @@ const GenerateMonthlyWorkHoursReport: React.FC<Props> = ({ staffs }) => {
         criteria={searchCriteria}
         onSearch={async (query: any) => {
           console.log(query);
-          const index = staffCombo.findIndex((staff) => staff === query.staff);
           let postData = {
-            id: staffs[index].id,
+            id: query.staffs.id,
             yearMonth: dayjs().format("YYYY-MM").toString(),
           };
           console.log(query.date.length > 0)

src/components/ResourceOverconsumptionReport/ResourceOverconsumptionReport.tsx

@@ -22,7 +22,7 @@ type SearchParamNames = keyof SearchQuery;
 const ResourceOverconsumptionReport: React.FC<Props> = ({ team, customer }) => {
     const { t } = useTranslation("report");
     const teamCombo = team.map(t => `${t.name} - ${t.code}`)
-    const custCombo = customer.map(c => `${c.name} - ${c.code}`)
+    const custCombo = customer.map(c => ({label: `${c.name} - ${c.code}`, value: c.id}))
     const statusCombo = ["Overconsumption", "Potential Overconsumption"]
     // const staffCombo = staffs.map(staff => `${staff.name} - ${staff.staffId}`)
     // console.log(staffs)
@@ -39,7 +39,7 @@ const ResourceOverconsumptionReport: React.FC<Props> = ({ team, customer }) => {
             { 
                 label: t("Client"), 
                 paramName: "customer", 
-                type: "select", 
+                type: "autocomplete", 
                 options: custCombo, 
                 needAll: true
             },
@@ -74,9 +74,8 @@ return (
                 index = teamCombo.findIndex(team => team === query.team)
                 postData.teamId = team[index].id
             } 
-            if (query.customer.length > 0 && query.customer.toLocaleLowerCase() !== "all") {
-                index = custCombo.findIndex(customer => customer === query.customer)
-                postData.custId = customer[index].id
+            if (typeof query.customer === "string" && query.customer.toLocaleLowerCase() !== "all") {
+                postData.custId = query.customer
             }
             if (Boolean(query.lowerLimit)) {
                 postData.lowerLimit = query.lowerLimit/100

src/components/SearchBox/SearchBox.tsx

@@ -366,6 +366,7 @@ function SearchBox<T extends string>({
                     max={99}
                     onChange={makeNumberChangeHandler(c.paramName)}
                     endAdornment={<InputAdornment>%</InputAdornment>}
+                    value={inputs[c.paramName] && parseFloat(inputs[c.paramName])}
                   />
                 )}
                 {c.type === "monthYear" && (