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,13 +29,65 @@ 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 (
     <div class="container p-3">
       <p class="fw-bold m-0">Create New Expense</p>
-  <form id="expenseForm">
+      <form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
         <div class="row my-2">
           <div class="col-md-6">
-        <label for="projectId">Select Project</label>
+            <label for="projectId" className="form-label ">
+              Select Project
+            </label>
             <select class="form-select form-select-sm" id="projectId" required>
               <option value="">-- Select Project --</option>
               <option value="project1">Project A</option>
@@ -37,8 +96,14 @@ const CreateExpense = () => {
           </div>
 
           <div class="col-md-6">
-        <label for="expensesTypeId">Expense Type</label>
+            <label for="expensesTypeId" className="form-label ">
-        <select class="form-select form-select-sm" id="expensesTypeId" required>
+              Expense Type
+            </label>
+            <select
+              class="form-select form-select-sm"
+              id="expensesTypeId"
+              required
+            >
               <option value="">-- Select Type --</option>
               <option value="type1">Travel</option>
               <option value="type2">Meal</option>
@@ -48,8 +113,14 @@ const CreateExpense = () => {
 
         <div class="row my-2">
           <div class="col-md-6">
-        <label for="paymentModeId">Payment Mode</label>
+            <label for="paymentModeId" className="form-label ">
-        <select class="form-select form-select-sm" id="paymentModeId" required>
+              Payment Mode
+            </label>
+            <select
+              class="form-select form-select-sm"
+              id="paymentModeId"
+              required
+            >
               <option value="">-- Select Payment Mode --</option>
               <option value="cash">Cash</option>
               <option value="card">Card</option>
@@ -57,31 +128,64 @@ const CreateExpense = () => {
           </div>
 
           <div class="col-md-6">
-        <label for="paidById">Paid By</label>
+            <label for="paidById" className="form-label ">
-        <input type="text" id="paidById" class="form-control form-control-sm" required />
+              Paid By
+            </label>
+            <input
+              type="text"
+              id="paidById"
+              class="form-control form-control-sm"
+              required
+            />
           </div>
         </div>
 
         <div class="row my-2">
           <div class="col-md-6">
-        <label for="transactionDate">Transaction Date</label>
+            <label for="transactionDate" className="form-label ">
-        <input type="date" id="transactionDate" class="form-control form-control-sm" placeholder="DD-MM-YYYY" required />
+              Transaction Date
+            </label>
+            <input
+              type="date"
+              id="transactionDate"
+              class="form-control form-control-sm"
+              placeholder="DD-MM-YYYY"
+              required
+            />
           </div>
 
           <div class="col-md-6">
-        <label for="amount">Amount</label>
+            <label for="amount" className="form-label ">
-        <input type="number" id="amount" class="form-control form-control-sm" min="1" required />
+              Amount
+            </label>
+            <input
+              type="number"
+              id="amount"
+              class="form-control form-control-sm"
+              min="1"
+              required
+            />
           </div>
         </div>
 
         <div class="row my-2">
           <div class="col-md-6">
-        <label for="noOfPersons">No. of Persons</label>
+            <label for="noOfPersons" className="form-label ">
-        <input type="number" id="noOfPersons" class="form-control form-control-sm" min="1" required />
+              No. of Persons
+            </label>
+            <input
+              type="number"
+              id="noOfPersons"
+              class="form-control form-control-sm"
+              min="1"
+              required
+            />
           </div>
 
           <div class="col-md-6">
-        <label for="statusId">Status</label>
+            <label for="statusId" className="form-label ">
+              Status
+            </label>
             <select class="form-select form-select-sm" id="statusId" required>
               <option value="">-- Select Status --</option>
               <option value="approved">Approved</option>
@@ -92,36 +196,112 @@ const CreateExpense = () => {
 
         <div class="row my-2">
           <div class="col-md-6">
-        <label for="location">Location</label>
+            <label for="location" className="form-label ">
-        <input type="text" id="location" class="form-control form-control-sm" required />
+              Location
+            </label>
+            <input
+              type="text"
+              id="location"
+              class="form-control form-control-sm"
+              required
+            />
           </div>
 
           <div class="col-md-6">
-        <label for="supplerName">Supplier Name</label>
+            <label for="supplerName" className="form-label ">
-        <input type="text" id="supplerName" class="form-control form-control-sm" required />
+              Supplier Name
+            </label>
+            <input
+              type="text"
+              id="supplerName"
+              class="form-control form-control-sm"
+              required
+            />
           </div>
         </div>
 
         <div class="row my-2">
-      <div class="col-md-12">
+          <div class="col-md-12" className="form-label ">
             <label for="description">Description</label>
-        <textarea id="description" class="form-control form-control-sm" rows="2" required></textarea>
+            <textarea
+              id="description"
+              class="form-control form-control-sm"
+              rows="2"
+              required
+            ></textarea>
           </div>
         </div>
 
-    <div class="row my-2">
+        <div className="row my-2">
-      <div class="col-md-12">
+          <div className="col-md-12">
-        <label for="billAttachments">Upload Bill (PDF, JPG, PNG, max 5MB)</label>
+            <label className="form-label ">
-        <input type="file" id="billAttachments" class="form-control form-control-sm"
+              Upload Bill{" "}
-               accept=".pdf,.jpg,.jpeg,.png" required />
+              <small className="text-muted">(PDF, JPG, PNG, max 5MB)</small>
+            </label>
+
+            <div
+              className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
+              style={{ cursor: "pointer" }}
+              onClick={() => document.getElementById("billAttachments").click()}
+            >
+              <i className="bx bx-cloud-upload d-block"></i>
+              <span className="text-muted d-block">
+                Click to select or click here to browse
+              </span>
+
+              <input
+                type="file"
+                id="billAttachments"
+                accept=".pdf,.jpg,.jpeg,.png"
+                multiple
+                style={{ display: "none" }}
+                {...register("billAttachments")}
+                  onChange={(e) => {
+    onFileChange(e);
+    e.target.value = ""; // ← this line resets the file input
+  }}
+              />
+            </div>
+
+            {files.length > 0 && (
+              <div className="d-block">
+                {files.map((file, idx) => (
+                  <a
+                    key={idx}
+                    class="d-flex justify-content-between text-start p-1"
+                  >
+                    <div >
+                        <span className="mb-0 text-secondary small d-block">{file.fileName}</span>
+                        <span className="text-body-secondary small d-block">
+                          {formatFileSize(file.fileSize
+)}
+                        </span>
+                    </div>
+                    <i className='bx bx-trash bx-sm cursor-pointer text-danger' onClick={()=>removeFile(idx)}></i>
+                  </a>
+                ))}
+              </div>
+            )}
+{Array.isArray(errors.billAttachments) &&
+  errors.billAttachments.map((fileError, index) => (
+    <div key={index} className="danger-text small mt-1">
+      {fileError?.fileSize?.message || fileError?.contentType?.message}
+    </div>
+  ))}
           </div>
         </div>
 
-    <div className="d-flex justify-content-center gap-2"> <button type="submit" class="btn btn-primary btn-sm mt-3">Submit</button>
+        <div className="d-flex justify-content-center gap-2">
-        <button type="submit" class="btn btn-secondary btn-sm mt-3">Cancel</button></div>
+          {" "}
+          <button type="submit" class="btn btn-primary btn-sm mt-3">
+            Submit
+          </button>
+          <button type="reset" class="btn btn-secondary btn-sm mt-3">
+            Cancel
+          </button>
+        </div>
       </form>
-</div>
+    </div>
-
   );
 };
 

src/pages/Expense/ExpensePage.jsx

@@ -27,8 +27,10 @@ const ExpensePage = () => {
                   aria-controls="DataTables_Table_0"
                 />
               </label>
+              <i class='bx bx-slider-alt'></i>
             </div>
-            <div className="col-7 col-sm-8 text-end">
+            <div className="col-7 col-sm-8 text-end gap-2">
+              
               <button type="button" className="btn btn-sm btn-primary me-2" onClick={()=>setNewExpense(true)}>
                 <span class="icon-base bx bx-plus-circle me-1"></span>Add New
               </button>
@@ -38,7 +40,7 @@ const ExpensePage = () => {
       </div>
       <ExpenseList />
 
-      <GlobalModel isOpen={IsNewExpen}  closeModal={()=>setNewExpense(false)}>
+      <GlobalModel isOpen={IsNewExpen} size="lg" closeModal={()=>setNewExpense(false)}>
          <CreateExpense/>
       </GlobalModel>
     </div>

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";
+}