update

src/app/api/invoices/index.ts

@@ -21,6 +21,7 @@ export interface InvoiceResultV2 {
     projectCode: string;
     projectName: string;
     team: string;
+    teamCodeName: string;
     stage: string;
     paymentMilestone: string;
     paymentMilestoneDate: string;
@@ -72,6 +73,7 @@ export interface invoiceList {
     issuedAmount: number;
     receivedAmount: number;
     team: string;
+    teamCodeName: string;
 }
 
 export interface invoiceColum {

src/app/api/projects/index.ts

@@ -11,6 +11,7 @@ export interface ProjectResult {
   name: string;
   category: string;
   team: string;
+  teamCodeName: string;
   teamId: number;
   client: string;
   status: string;

src/components/EditStaff/EditStaff.tsx

@@ -134,7 +134,7 @@ const EditStaff: React.FC<formProps> = ({ Staff, combos }) => {
           haveError = true
           formProps.setError("salaryId", { message: t("Please Enter Salary."), type: "required" })
         }
-        if (data.joinDate &&data.departDate && new Date(data.departDate) <= new Date(data.joinDate)) {
+        if (data.joinDate && data.departDate && new Date(data.departDate) <= new Date(data.joinDate)) {
           haveError = true
           formProps.setError("departDate", { message: t("Depart Date cannot be earlier than Join Date."), type: "required" })
         }

src/components/InvoiceSearch/InvoiceSearch.tsx

@@ -20,6 +20,7 @@ import { QrCodeScannerOutlined } from "@mui/icons-material";
 import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import dayjs from "dayjs";
+import { uniq } from "lodash";
 
 interface Props {
   issuedInvoice: issuedInvoiceList[];
@@ -45,6 +46,7 @@ type SearchQuery2 = Partial<Omit<receivedInvoiceSearchForm, "id">>;
 type SearchParamNames2 = keyof SearchQuery2;
 
 const InvoiceSearch: React.FC<Props> = ({ issuedInvoice, receivedInvoice, invoices }) => {
+  console.log(invoices)
   const { t } = useTranslation("invoices");
   const [tabIndex, setTabIndex] = useState(0);
 
@@ -56,7 +58,12 @@ const InvoiceSearch: React.FC<Props> = ({ issuedInvoice, receivedInvoice, invoic
     () => [
       { label: t("Invoice No"), paramName: "invoiceNo", type: "text" },
       { label: t("Project Code"), paramName: "projectCode", type: "text" },
-      { label: t("Team"), paramName: "team", type: "text" },
+      {
+        label: t("Team"),
+        paramName: "team",
+        type: "select",
+        options: uniq(invoices.map((invoice) => invoice.teamCodeName)),
+      },
       { label: t("Issue Date"), label2: t("Issue Date To"), paramName: "invoiceDate", type: "dateRange" },
       { label: t("Settle Date"), label2: t("Settle Date To"), paramName: "dueDate", type: "dateRange" },
     ],
@@ -481,12 +488,11 @@ const InvoiceSearch: React.FC<Props> = ({ issuedInvoice, receivedInvoice, invoic
             console.log(query)
             setFilterInovices(
               invoices.filter(
-                (s) => 
-                  (isDateInRange(s.issuedDate, query.invoiceDate ?? undefined, query.invoiceDateTo ?? undefined)) &&
-                  (isDateInRange(s.receiptDate, query.dueDate ?? undefined, query.dueDateTo ?? undefined)) &&
-                  (s.invoiceNo.toLowerCase().includes(query.invoiceNo.toLowerCase())) &&
-                  (s.projectCode.toLowerCase().includes(query.projectCode.toLowerCase())) &&
-                  (s.team.toLowerCase().includes(query.team.toLowerCase()))
+                (s) => (s.invoiceNo.toLowerCase().includes(query.invoiceNo.toLowerCase())) 
+                && (s.projectCode.toLowerCase().includes(query.projectCode.toLowerCase()))
+                && (query.team === "All" || query.team.toLowerCase().includes(s.team.toLowerCase()))
+                && (isDateInRange(s.issuedDate, query.invoiceDate ?? undefined, query.invoiceDateTo ?? undefined)) 
+                && (isDateInRange(s.receiptDate, query.dueDate ?? undefined, query.dueDateTo ?? undefined))
               ),
             );
           }}

src/components/InvoiceSearch/InvoiceSearchWrapper.tsx

@@ -55,6 +55,7 @@ const InvoiceSearchWrapper: React.FC & SubComponents = async () => {
       projectCode: invoice.projectCode,
       projectName: invoice.projectName,
       team: invoice.team,
+      teamCodeName: invoice.teamCodeName,
       issuedDate: timestampToDateString(invoice.invoiceDate)!!,
       receiptDate: timestampToDateString(invoice.receiptDate)!!,
       issuedAmount: invoice.issueAmount,

src/components/ProjectSearch/ProjectSearch.tsx

@@ -20,6 +20,7 @@ type SearchQuery = Partial<Omit<ProjectResult, "id">>;
 type SearchParamNames = keyof SearchQuery;
 
 const ProjectSearch: React.FC<Props> = ({ projects, projectCategories, abilities }) => {
+  console.log(projects)
   const router = useRouter();
   const { t } = useTranslation("projects");
 
@@ -32,8 +33,8 @@ const ProjectSearch: React.FC<Props> = ({ projects, projectCategories, abilities
       {
         label: t("Client name"),
         paramName: "client",
-        type: "select",
-        options: uniq(projects.map((project) => project.client)),
+        type: "autocomplete",
+        options: uniq(projects.map((project) => ({value: project.client, label: project.client}))),
       },
       {
         label: t("Project category"),
@@ -45,7 +46,7 @@ const ProjectSearch: React.FC<Props> = ({ projects, projectCategories, abilities
         label: t("Team"),
         paramName: "team",
         type: "select",
-        options: uniq(projects.map((project) => project.team)),
+        options: uniq(projects.map((project) => project.teamCodeName)),
       },
       {
         label: t("Status"),
@@ -101,7 +102,8 @@ const ProjectSearch: React.FC<Props> = ({ projects, projectCategories, abilities
                 p.name.toLowerCase().includes(query.name.toLowerCase()) &&
                 (query.client === "All" || p.client === query.client) &&
                 (query.category === "All" || p.category === query.category) &&
-                (query.team === "All" || p.team === query.team) &&
+                // (query.team === "All" || p.team === query.team) &&
+                (query.team === "All" || query.team.toLowerCase().includes(p.team.toLowerCase())) &&
                 (query.status === "All" || p.status === query.status),
             ),
           );

src/components/ResourceOverconsumptionReport/ResourceOverconsumptionReport.tsx

@@ -25,17 +25,17 @@ type SearchParamNames = keyof SearchQuery;
 const ResourceOverconsumptionReport: React.FC<Props> = ({ team, customer, subsidiaries, needAll }) => {
     const { t } = useTranslation("report");
     const statusCombo = ["Potential Overconsumption"]
-    const teamCombo = team.map(t => `${t.name} - ${t.code}`)
+    const teamCombo = team.map(t => `${t.code} - ${t.name}`).sort()
     const custCombo = customer.map(c => ({
         value: `custId-${c.id}`,
         label: `${c.code} - ${c.name}`, 
         group: t("Client")
-        }))
+        })).sort()
     const subsidiariesCombo = subsidiaries.map(sub => ({
         value: `subsidiaryId-${sub.id}`,
         label: `${sub.code} - ${sub.name}`, 
         group: t("Subsidiary")
-    }))
+        })).sort()
     // const staffCombo = staffs.map(staff => `${staff.name} - ${staff.staffId}`)
     // console.log(staffs)