diff --git a/src/app/api/claims/actions.ts b/src/app/api/claims/actions.ts
index e77b17f..b4d99ad 100644
--- a/src/app/api/claims/actions.ts
+++ b/src/app/api/claims/actions.ts
@@ -21,8 +21,8 @@ export interface ClaimDetailTable {
     project: ProjectCombo;
     amount: number;
     supportingDocumentName: string;
-    oldSupportingDocument: FileList[];
-    newSupportingDocument: SupportingDocument;
+    oldSupportingDocument: SupportingDocument;
+    newSupportingDocument: File;
     isNew: boolean;
 }
 
@@ -31,14 +31,14 @@ export interface SaveClaimResponse {
     message: string;
 }
 
-export const saveClaim = async (data: ClaimInputFormByStaff) => {
+export const saveClaim = async (data: FormData) => {
     console.log(data)
     const saveCustomer = await serverFetchJson<SaveClaimResponse>(
         `${BASE_API_URL}/claim/save`,
         {
             method: "POST",
-            body: JSON.stringify(data),
-            headers: { "Content-Type": "application/json" },
+            body: data,
+            // headers: { "Content-Type": "multipart/form-data" },
         },
     );
 
diff --git a/src/components/ClaimDetail/ClaimDetail.tsx b/src/components/ClaimDetail/ClaimDetail.tsx
index 36ff8ed..ad25cfa 100644
--- a/src/components/ClaimDetail/ClaimDetail.tsx
+++ b/src/components/ClaimDetail/ClaimDetail.tsx
@@ -14,6 +14,7 @@ import { FormProvider, SubmitErrorHandler, SubmitHandler, useForm } from "react-
 import { ClaimInputFormByStaff, saveClaim } from "@/app/api/claims/actions";
 import { DoneAll } from "@mui/icons-material";
 import { expenseTypeCombo } from "@/app/utils/comboUtil";
+import { convertDateToString } from "@/app/utils/formatUtil";
 
 export interface Props {
     projectCombo: ProjectCombo[]
@@ -39,26 +40,42 @@ const ClaimDetail: React.FC<Props> = ({ projectCombo }) => {
     const onSubmit = useCallback<SubmitHandler<ClaimInputFormByStaff>>(
         async (data, event) => {
             try {
-                console.log(data);
+                console.log(data.addClaimDetails[0].newSupportingDocument);
                 console.log((event?.nativeEvent as any).submitter.name);
                 const buttonName = (event?.nativeEvent as any).submitter.name
                 console.log(JSON.stringify(data))
-                // const formData = new FormData()
+                const formData = new FormData()
                 // formData.append("expenseType", data.expenseType)
-                // formData.append("claimDetails", data.addClaimDetails)
-                if (buttonName === "submit") {
-                    data.status = "Not Submitted"
-                } else if (buttonName === "save") {
-                    data.status = "Waiting for Approval"
-                }
+                // for (let i = 0; i < data.addClaimDetails.length; i++) {
+                //     // formData.append("addClaimDetails[]", JSON.stringify(data.addClaimDetails[i]))
+                //     // formData.append("addClaimDetailsFiles[]", data.addClaimDetails[i].newSupportingDocument)
+                //     console.log(data.addClaimDetails[i].invoiceDate)
+                //     // data.addClaimDetails[i].invoiceDate = convertDateToString(data.addClaimDetails[i].invoiceDate)
+                //     const updatedData = {
+                //         id: data.addClaimDetails[i].id,
+                //         // project: data.addClaimDetails[i].project,
+                //         invoiceDate: convertDateToString(data.addClaimDetails[i].invoiceDate, "YYYY-MM-DD"),
+                //         description: data.addClaimDetails[i].description,
+                //         amount:data.addClaimDetails[i].amount,
+                //         // oldSupportingDocument: data.addClaimDetails[i].oldSupportingDocument,
+                //     }
+                //     formData.append("addClaimDetails", JSON.stringify(updatedData))
+                //     formData.append("addClaimDetailsFiles", data.addClaimDetails[i].newSupportingDocument)
+                //     formData.append("testFiles", data.addClaimDetails[i].newSupportingDocument)
+                // }
+                // if (buttonName === "submit") {
+                //     formData.append("status", "Not Submitted")
+                // } else if (buttonName === "save") {
+                //     formData.append("status", "Waiting for Approval")
+                // }
+                // formData.append("id", "-1")
 
                 // for (let i = 0; i < data.addClaimDetails.length; i++) {
                 //     // const formData = new FormData();
                 //     // formData.append("newSupportingDocument", data.addClaimDetails[i].oldSupportingDocument);
                 //     data.addClaimDetails[i].oldSupportingDocument = new Blob([data.addClaimDetails[i].oldSupportingDocument], {type: data.addClaimDetails[i].oldSupportingDocument.type})
                 // }
-                console.log(data);
-                await saveClaim(data)
+                await saveClaim(formData)
                 setServerError("");
                 // await saveProject(data);
                 // router.replace("/projects");