diff --git a/src/components/Expenses/CreateExpense.jsx b/src/components/Expenses/CreateExpense.jsx index 927269a9..2cd2d7c1 100644 --- a/src/components/Expenses/CreateExpense.jsx +++ b/src/components/Expenses/CreateExpense.jsx @@ -1,10 +1,17 @@ import { zodResolver } from "@hookform/resolvers/zod"; -import React from "react"; +import React, { useState } from "react"; import { useForm } from "react-hook-form"; import { ExpenseSchema } from "./ExpenseSchema"; +import { formatFileSize } from "../../utils/appUtils"; const CreateExpense = () => { - const {} = useForm({ + const { + register, + handleSubmit, + watch, + setValue, + formState: { errors }, + } = useForm({ resolver: zodResolver(ExpenseSchema), defaultValues: { projectId: "", @@ -22,106 +29,279 @@ const CreateExpense = () => { billAttachments: [], }, }); + + const files = watch("billAttachments"); +const onFileChange = async (e) => { + const newFiles = Array.from(e.target.files); + if (newFiles.length === 0) return; + + const existingFiles = watch("billAttachments") || []; + + const parsedFiles = await Promise.all( + newFiles.map(async (file) => { + const base64Data = await toBase64(file); + return { + fileName: file.name, + base64Data, + contentType: file.type, + fileSize: file.size, + description: "", + }; + }) + ); + + // Avoid duplicates based on file name + size + const combinedFiles = [ + ...existingFiles, + ...parsedFiles.filter( + (newFile) => + !existingFiles.some( + (f) => f.fileName === newFile.fileName && f.fileSize === newFile.fileSize + ) + ), + ]; + + setValue("billAttachments", combinedFiles, { shouldDirty: true, shouldValidate: true }); +}; + + + const toBase64 = (file) => + new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.readAsDataURL(file); + reader.onload = () => resolve(reader.result.split(",")[1]); // base64 only, no prefix + reader.onerror = (error) => reject(error); + }); +const removeFile = (index) => { + const newFiles = files.filter((_, i) => i !== index); + setValue("billAttachments", newFiles, { shouldValidate: true }); +}; + const onSubmit = (data) => { + console.log("Form Data:", data); + }; return (
-

Create New Expense

-
-
-
- - -
+

Create New Expense

+ +
+
+ + +
-
- - -
+
+ + +
+
+ +
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
document.getElementById("billAttachments").click()} + > + + + Click to select or click here to browse + + + { + onFileChange(e); + e.target.value = ""; // ← this line resets the file input + }} + /> +
+ + {files.length > 0 && ( + + )} +{Array.isArray(errors.billAttachments) && + errors.billAttachments.map((fileError, index) => ( +
+ {fileError?.fileSize?.message || fileError?.contentType?.message}
+ ))} +
+
-
-
- - -
- -
- - -
+
+ {" "} + + +
+
- -
-
- - -
- -
- - -
-
- -
-
- - -
- -
- - -
-
- -
-
- - -
- -
- - -
-
- -
-
- - -
-
- -
-
- - -
-
- -
-
- -
- ); }; diff --git a/src/pages/Expense/ExpensePage.jsx b/src/pages/Expense/ExpensePage.jsx index 136b2d2f..ca511bbd 100644 --- a/src/pages/Expense/ExpensePage.jsx +++ b/src/pages/Expense/ExpensePage.jsx @@ -27,8 +27,10 @@ const ExpensePage = () => { aria-controls="DataTables_Table_0" /> +
-
+
+ @@ -38,7 +40,7 @@ const ExpensePage = () => {
- setNewExpense(false)}> + setNewExpense(false)}>
diff --git a/src/utils/appUtils.js b/src/utils/appUtils.js new file mode 100644 index 00000000..eac45ec7 --- /dev/null +++ b/src/utils/appUtils.js @@ -0,0 +1,5 @@ +export const formatFileSize=(bytes)=> { + if (bytes < 1024) return bytes + " B"; + else if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + " KB"; + else return (bytes / (1024 * 1024)).toFixed(2) + " MB"; +} \ No newline at end of file