update create invoice with projectcode

src/components/InvoiceSearch/InvoiceSearch.tsx

@@ -19,11 +19,13 @@ import StyledDataGrid from "../StyledDataGrid";
 
 import { uniq } from "lodash";
 import CreateInvoiceModal from "./CreateInvoiceModal";
+import { ProjectResult } from "@/app/api/projects";
 
 
 
 interface Props {
   invoices: invoiceList[];
+  projects: ProjectResult[];
 }
 
 type InvoiceListError = {
@@ -43,7 +45,7 @@ type SearchParamNames = keyof SearchQuery;
 type SearchQuery2 = Partial<Omit<receivedInvoiceSearchForm, "id">>;
 type SearchParamNames2 = keyof SearchQuery2;
 
-const InvoiceSearch: React.FC<Props> = ({ invoices }) => {
+const InvoiceSearch: React.FC<Props> = ({ invoices, projects }) => {
   // console.log(invoices)
   const { t } = useTranslation("Invoice");
   const [tabIndex, setTabIndex] = useState(0);
@@ -606,6 +608,7 @@ const InvoiceSearch: React.FC<Props> = ({ invoices }) => {
     <CreateInvoiceModal
       isOpen={modelOpen}
       onClose={handleModalClose}
+      projects={projects}
     />
     </>
   );

src/components/InvoiceSearch/InvoiceSearchWrapper.tsx

@@ -6,6 +6,7 @@ import { fetchInvoicesV3, fetchIssuedInvoices, fetchReceivedInvoices, issuedInvo
 import { INPUT_DATE_FORMAT, convertDateArrayToString, convertDateToString, moneyFormatter, timestampToDateString } from "@/app/utils/formatUtil";
 import { fetchTeam } from "@/app/api/team";
 import { fetchUserStaff } from "@/app/utils/fetchUtil";
+import { fetchProjects } from "@/app/api/projects";
 
 
 interface SubComponents {
@@ -21,6 +22,8 @@ const InvoiceSearchWrapper: React.FC & SubComponents = async () => {
   const userStaff = await fetchUserStaff()
   const teamId = userStaff?.teamId
   const invoices = await fetchInvoicesV3()
+  const projects = await fetchProjects()
+  const filteredProjects = projects.filter(project => project.teamId === teamId)
 
   let filteredInvoice = invoices
   if (teamId) {
@@ -44,6 +47,7 @@ const InvoiceSearchWrapper: React.FC & SubComponents = async () => {
 
   return <InvoiceSearch 
     invoices={convertedInvoices}
+    projects={filteredProjects}
   />
   
 };

src/components/InvoiceSearch/InvoiceTable.tsx

@@ -31,6 +31,7 @@ import { FooterPropsOverrides } from "@mui/x-data-grid";
 import { th } from "@faker-js/faker";
 import { GridRowIdGetter } from "@mui/x-data-grid";
 import { useFormContext } from "react-hook-form";
+import { ProjectResult } from "@/app/api/projects";
 
 type InvoiceListError = {
     [field in keyof invoiceList]?: string;
@@ -43,6 +44,10 @@ type invoiceListRow = Partial<
   }
 >;
 
+interface Props {
+  projects: ProjectResult[];
+}
+
 class ProcessRowUpdateError extends Error {
   public readonly row: invoiceListRow;
   public readonly errors: InvoiceListError | undefined;
@@ -58,15 +63,19 @@ class ProcessRowUpdateError extends Error {
     Object.setPrototypeOf(this, ProcessRowUpdateError.prototype);
   }
 }
-
-const InvoiceTable: React.FC = () => {
+type project = {
+  label: string;
+  value: number;
+}
+const InvoiceTable: React.FC<Props> = ({ projects }) => {
+    console.log(projects)
     const { t } = useTranslation()
     const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({});
     const [selectedRow, setSelectedRow] = useState<invoiceListRow[] | []>([]);
     const { getValues, setValue, clearErrors, setError } =
     useFormContext<any>();
     const apiRef = useGridApiRef();
-
+    const [projectCode, setProjectCode] = useState<project>({label: "", value: 0})
     const validateInvoiceEntry = (
         entry: Partial<invoiceList>,
     ): InvoiceListError | undefined => {