src/components/Expenses/CreateExpense.jsx

@@ -1,18 +1,41 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { ExpenseSchema } from "./ExpenseSchema";
 import { formatFileSize } from "../../utils/appUtils";
+import { useProjectName } from "../../hooks/useProjects";
+import { useDispatch, useSelector } from "react-redux";
+import { changeMaster } from "../../slices/localVariablesSlice";
+import useMaster, {
+  useExpenseStatus,
+  useExpenseType,
+  usePaymentMode,
+} from "../../hooks/masterHook/useMaster";
+import {
+  useEmployeesAllOrByProjectId,
+  useEmployeesByProject,
+} from "../../hooks/useEmployees";
+import Avatar from "../common/Avatar";
+import { useCreateExpnse } from "../../hooks/useExpense";
 
-const CreateExpense = () => {
+const CreateExpense = ({closeModal}) => {
+  const [ExpenseType, setExpenseType] = useState();
+  const dispatch = useDispatch();
+  const {
+    ExpenseTypes,
+    loading: ExpenseLoading,
+    error: ExpenseError,
+  } = useExpenseType();
+  const schema = ExpenseSchema(ExpenseTypes);
   const {
     register,
     handleSubmit,
     watch,
     setValue,
+    reset,
     formState: { errors },
   } = useForm({
-    resolver: zodResolver(ExpenseSchema),
+    resolver: zodResolver(schema),
     defaultValues: {
       projectId: "",
       expensesTypeId: "",
@@ -25,13 +48,34 @@ const CreateExpense = () => {
       supplerName: "",
       amount: "",
       noOfPersons: "",
-      statusId: "",
       billAttachments: [],
     },
   });
 
+  const selectedproject = watch("projectId");
+  const selectedProject = useSelector(
+    (store) => store.localVariables.projectId
+  );
+  const { projectNames, loading: projectLoading, error } = useProjectName();
+
+  const {
+    PaymentModes,
+    loading: PaymentModeLoading,
+    error: PaymentModeError,
+  } = usePaymentMode();
+  const {
+    ExpenseStatus,
+    loading: StatusLoadding,
+    error: stausError,
+  } = useExpenseStatus();
+  const {
+    employees,
+    loading: EmpLoading,
+    error: EmpError,
+  } = useEmployeesByProject(selectedproject);
+
   const files = watch("billAttachments");
-const onFileChange = async (e) => {
+  const onFileChange = async (e) => {
     const newFiles = Array.from(e.target.files);
     if (newFiles.length === 0) return;
 
@@ -50,20 +94,22 @@ const onFileChange = async (e) => {
       })
     );
 
-  // Avoid duplicates based on file name + size
     const combinedFiles = [
       ...existingFiles,
       ...parsedFiles.filter(
         (newFile) =>
           !existingFiles.some(
-          (f) => f.fileName === newFile.fileName && f.fileSize === newFile.fileSize
+            (f) =>
+              f.fileName === newFile.fileName && f.fileSize === newFile.fileSize
           )
       ),
     ];
 
-  setValue("billAttachments", combinedFiles, { shouldDirty: true, shouldValidate: true });
+    setValue("billAttachments", combinedFiles, {
-};
+      shouldDirty: true,
-
+      shouldValidate: true,
+    });
+  };
 
   const toBase64 = (file) =>
     new Promise((resolve, reject) => {
@@ -72,86 +118,162 @@ const onFileChange = async (e) => {
       reader.onload = () => resolve(reader.result.split(",")[1]); // base64 only, no prefix
       reader.onerror = (error) => reject(error);
     });
-const removeFile = (index) => {
+  const removeFile = (index) => {
     const newFiles = files.filter((_, i) => i !== index);
     setValue("billAttachments", newFiles, { shouldValidate: true });
-};
-  const onSubmit = (data) => {
-    console.log("Form Data:", data);
   };
+
+  const {mutate:CreateExpense,isPending} = useCreateExpnse(()=>{
+    handleClose()
+  })
+  const onSubmit = (payload) => {
+    console.log("Form Data:", payload);
+
+    CreateExpense(payload)
+  };
+  const ExpenseTypeId = watch("expensesTypeId");
+
+  useEffect(() => {
+    setExpenseType(ExpenseTypes?.find((type) => type.id === ExpenseTypeId));
+  }, [ExpenseTypeId]);
+
+  const handleClose =()=>{
+    reset()
+    closeModal()
+  }
   return (
-    <div class="container p-3">
+    <div className="container p-3">
-      <p class="fw-bold m-0">Create New Expense</p>
+      <h5 className="m-0">Create New Expense</h5>
       <form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
-        <div class="row my-2">
+        <div className="row my-2">
-          <div class="col-md-6">
+          <div className="col-md-6">
-            <label for="projectId" className="form-label ">
+            <label htmlFor="projectId" className="form-label">
               Select Project
             </label>
-            <select class="form-select form-select-sm" id="projectId" required>
+            <select
-              <option value="">-- Select Project --</option>
+              className="form-select form-select-sm"
-              <option value="project1">Project A</option>
+              {...register("projectId")}
-              <option value="project2">Project B</option>
+            >
+              <option value="">Select Project</option>
+              {projectLoading ? (
+                <option>Loading...</option>
+              ) : (
+                projectNames?.map((project) => (
+                  <option key={project.id} value={project.id}>
+                    {project.name}
+                  </option>
+                ))
+              )}
             </select>
+            {errors.projectId && (
+              <small className="danger-text">{errors.projectId.message}</small>
+            )}
           </div>
 
-          <div class="col-md-6">
+          <div className="col-md-6">
             <label for="expensesTypeId" className="form-label ">
               Expense Type
             </label>
             <select
-              class="form-select form-select-sm"
+              className="form-select form-select-sm"
               id="expensesTypeId"
-              required
+              {...register("expensesTypeId")}
             >
-              <option value="">-- Select Type --</option>
+              <option value="" disabled>
-              <option value="type1">Travel</option>
+                Select Type
-              <option value="type2">Meal</option>
+              </option>
+              {ExpenseLoading ? (
+                <option disabled>Loading...</option>
+              ) : (
+                ExpenseTypes?.map((expense) => (
+                  <option key={expense.id} value={expense.id}>
+                    {expense.name}
+                  </option>
+                ))
+              )}
             </select>
+            {errors.expensesTypeId && (
+              <small className="danger-text">
+                {errors.expensesTypeId.message}
+              </small>
+            )}
           </div>
         </div>
 
-        <div class="row my-2">
+        <div className="row my-2">
-          <div class="col-md-6">
+          <div className="col-md-6">
             <label for="paymentModeId" className="form-label ">
               Payment Mode
             </label>
             <select
               class="form-select form-select-sm"
               id="paymentModeId"
-              required
+              {...register("paymentModeId")}
             >
-              <option value="">-- Select Payment Mode --</option>
+              <option value="" disabled>
-              <option value="cash">Cash</option>
+                Select Mode
-              <option value="card">Card</option>
+              </option>
+              {PaymentModeLoading ? (
+                <option disabled>Loading...</option>
+              ) : (
+                PaymentModes?.map((payment) => (
+                  <option key={payment.id} value={payment.id}>
+                    {payment.name}
+                  </option>
+                ))
+              )}
             </select>
+            {errors.paymentModeId && (
+              <small className="danger-text">
+                {errors.paymentModeId.message}
+              </small>
+            )}
           </div>
 
-          <div class="col-md-6">
+          <div className="col-md-6">
             <label for="paidById" className="form-label ">
               Paid By
             </label>
-            <input
+            <select
-              type="text"
+              class="form-select form-select-sm"
-              id="paidById"
+              id="paymentModeId"
-              class="form-control form-control-sm"
+              {...register("paidById")}
-              required
+              disabled={!selectedproject}
-            />
+            >
+              <option value="" disabled>
+                Select Person
+              </option>
+              {EmpLoading ? (
+                <option disabled>Loading...</option>
+              ) : (
+                employees?.map((emp) => (
+                  <option key={emp.id} value={emp.id}>
+                   
+                    {`${emp.firstName} ${emp.lastName} `}
+                  </option>
+                ))
+              )}
+            </select>
           </div>
         </div>
 
-        <div class="row my-2">
+        <div className="row my-2">
-          <div class="col-md-6">
+          <div className="col-md-6">
             <label for="transactionDate" className="form-label ">
               Transaction Date
             </label>
             <input
               type="date"
-              id="transactionDate"
+              className="form-control form-control-sm"
-              class="form-control form-control-sm"
+              placeholder="YYYY-MM-DD"
-              placeholder="DD-MM-YYYY"
+              id="flatpickr-date"
-              required
+              {...register("transactionDate")}
             />
+            {errors.transactionDate && (
+              <small className="danger-text">
+                {errors.transactionDate.message}
+              </small>
+            )}
           </div>
 
           <div class="col-md-6">
@@ -161,40 +283,36 @@ const removeFile = (index) => {
             <input
               type="number"
               id="amount"
-              class="form-control form-control-sm"
+              className="form-control form-control-sm"
               min="1"
-              required
+              step="0.01"
+              inputMode="decimal"
+              {...register("amount", { valueAsNumber: true })}
             />
+            {errors.amount && (
+              <small className="danger-text">{errors.amount.message}</small>
+            )}
           </div>
         </div>
 
         <div class="row my-2">
-          <div class="col-md-6">
+          <div className="col-md-6">
-            <label for="noOfPersons" className="form-label ">
+            <label for="supplerName" className="form-label ">
-              No. of Persons
+              Supplier Name
             </label>
             <input
-              type="number"
+              type="text"
-              id="noOfPersons"
+              id="supplerName"
-              class="form-control form-control-sm"
+              className="form-control form-control-sm"
-              min="1"
+              {...register("supplerName")}
-              required
             />
+            {errors.supplerName && (
+              <small className="danger-text">
+                {errors.supplerName.message}
+              </small>
+            )}
           </div>
 
-          <div class="col-md-6">
-            <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>
-              <option value="pending">Pending</option>
-            </select>
-          </div>
-        </div>
-
-        <div class="row my-2">
           <div class="col-md-6">
             <label for="location" className="form-label ">
               Location
@@ -202,33 +320,68 @@ const removeFile = (index) => {
             <input
               type="text"
               id="location"
-              class="form-control form-control-sm"
+              className="form-control form-control-sm"
-              required
+              {...register("location")}
             />
+            {errors.location && (
+              <small className="danger-text">{errors.location.message}</small>
+            )}
           </div>
-
+        </div>
-          <div class="col-md-6">
+        <div class="row my-2">
-            <label for="supplerName" className="form-label ">
+          <div className="col-md-6">
-              Supplier Name
+            <label for="statusId" className="form-label ">
+              TransactionId
             </label>
             <input
               type="text"
-              id="supplerName"
+              id="transactionId"
               class="form-control form-control-sm"
-              required
+              min="1"
+              {...register("transactionId")}
             />
-          </div>
+            {errors.transactionId && (
+              <small className="danger-text">
+                {errors.transactionId.message}
+              </small>
+            )}
           </div>
 
-        <div class="row my-2">
+          {ExpenseType?.noOfPersonsRequired && (
+            <div className="col-md-6">
+              <label htmlFor="noOfPersons" className="form-label">
+                No. of Persons
+              </label>
+              <input
+                type="number"
+                id="noOfPersons"
+                className="form-control form-control-sm"
+                {...register("noOfPersons")}
+                inputMode="numeric"
+              />
+              {errors.noOfPersons && (
+                <small className="danger-text">
+                  {errors.noOfPersons.message}
+                </small>
+              )}
+            </div>
+          )}
+        </div>
+
+        <div className="row my-2">
           <div class="col-md-12" className="form-label ">
             <label for="description">Description</label>
             <textarea
               id="description"
-              class="form-control form-control-sm"
+              className="form-control form-control-sm"
+              {...register("description")}
               rows="2"
-              required
             ></textarea>
+            {errors.description && (
+              <small className="danger-text">
+                {errors.description.message}
+              </small>
+            )}
           </div>
         </div>
 
@@ -236,7 +389,6 @@ const removeFile = (index) => {
           <div className="col-md-12">
             <label className="form-label ">
               Upload Bill{" "}
-              <small className="text-muted">(PDF, JPG, PNG, max 5MB)</small>
             </label>
 
             <div
@@ -244,10 +396,11 @@ const removeFile = (index) => {
               style={{ cursor: "pointer" }}
               onClick={() => document.getElementById("billAttachments").click()}
             >
-              <i className="bx bx-cloud-upload d-block"></i>
+              <i className="bx bx-cloud-upload d-block bx-lg"></i>
               <span className="text-muted d-block">
                 Click to select or click here to browse
               </span>
+              <small className="text-muted">(PDF, JPG, PNG, max 5MB)</small>
 
               <input
                 type="file"
@@ -258,10 +411,15 @@ const removeFile = (index) => {
                 {...register("billAttachments")}
                 onChange={(e) => {
                   onFileChange(e);
-    e.target.value = ""; // ← this line resets the file input
+                  e.target.value = "";
                 }}
               />
             </div>
+            {errors.billAttachments && (
+              <small className="danger-text">
+                {errors.billAttachments.message}
+              </small>
+            )}
 
             {files.length > 0 && (
               <div className="d-block">
@@ -270,22 +428,27 @@ const removeFile = (index) => {
                     key={idx}
                     class="d-flex justify-content-between text-start p-1"
                   >
-                    <div >
+                    <div>
-                        <span className="mb-0 text-secondary small d-block">{file.fileName}</span>
+                      <span className="mb-0 text-secondary small d-block">
+                        {file.fileName}
+                      </span>
                       <span className="text-body-secondary small d-block">
-                          {formatFileSize(file.fileSize
+                        {formatFileSize(file.fileSize)}
-)}
                       </span>
                     </div>
-                    <i className='bx bx-trash bx-sm cursor-pointer text-danger' onClick={()=>removeFile(idx)}></i>
+                    <i
+                      className="bx bx-trash bx-sm cursor-pointer text-danger"
+                      onClick={() => removeFile(idx)}
+                    ></i>
                   </a>
                 ))}
               </div>
             )}
-{Array.isArray(errors.billAttachments) &&
+            {Array.isArray(errors.billAttachments) &&
               errors.billAttachments.map((fileError, index) => (
                 <div key={index} className="danger-text small mt-1">
-      {fileError?.fileSize?.message || fileError?.contentType?.message}
+                  {fileError?.fileSize?.message ||
+                    fileError?.contentType?.message}
                 </div>
               ))}
           </div>
@@ -293,10 +456,10 @@ const removeFile = (index) => {
 
         <div className="d-flex justify-content-center gap-2">
           {" "}
-          <button type="submit" class="btn btn-primary btn-sm mt-3">
+          <button type="submit" className="btn btn-primary btn-sm mt-3" disabled={isPending}>
-            Submit
+            {isPending ? "Please Wait...":"Submit"}
           </button>
-          <button type="reset" class="btn btn-secondary btn-sm mt-3">
+          <button type="reset" onClick={handleClose} className="btn btn-secondary btn-sm mt-3">
             Cancel
           </button>
         </div>
@@ -306,3 +469,4 @@ const removeFile = (index) => {
 };
 
 export default CreateExpense;
+

src/components/Expenses/ExpenseSchema.js

@@ -0,0 +1,69 @@
+import { z } from "zod";
+
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+const ALLOWED_TYPES = [
+  "application/pdf",
+  "image/png",
+  "image/jpg",
+  "image/jpeg",
+];
+
+
+export const ExpenseSchema = (expenseTypes) => {
+  return z
+    .object({
+      projectId: z.string().min(1, { message: "Project is required" }),
+      expensesTypeId: z.string().min(1, { message: "Expense type is required" }),
+      paymentModeId: z.string().min(1, { message: "Payment mode is required" }),
+      paidById: z.string().min(1, { message: "Employee name is required" }),
+      transactionDate: z.string().min(1, { message: "Date is required" }),
+      transactionId: z.string().optional(),
+      description: z.string().min(1, { message: "Description is required" }),
+      location: z.string().min(1, { message: "Location is required" }),
+      supplerName: z.string().min(1, { message: "Supplier name is required" }),
+      amount: z
+        .coerce
+        .number({ invalid_type_error: "Amount is required and must be a number" })
+        .min(1, "Amount must be Enter")
+        .refine((val) => /^\d+(\.\d{1,2})?$/.test(val.toString()), {
+          message: "Amount must have at most 2 decimal places",
+        }),
+      noOfPersons: z.coerce
+  .number()
+  .optional(),
+      billAttachments: z
+        .array(
+          z.object({
+            fileName: z.string().min(1, { message: "Filename is required" }),
+            base64Data: z.string().min(1, { message: "File data is required" }),
+            contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
+              message: "Only PDF, PNG, JPG, or JPEG files are allowed",
+            }),
+            fileSize: z.number().max(MAX_FILE_SIZE, {
+              message: "File size must be less than or equal to 5MB",
+            }),
+            description: z.string().optional(),
+          })
+        )
+        .nonempty({ message: "At least one file attachment is required" }),
+    })
+    .refine(
+      (data) => {
+        return !data.projectId || (data.paidById && data.paidById.trim() !== "");
+      },
+      {
+        message: "Please select who paid (employee)",
+        path: ["paidById"],
+      }
+    )
+    .superRefine((data, ctx) => {
+      const expenseType = expenseTypes.find((et) => et.id === data.expensesTypeId);
+      if (expenseType?.noOfPersonsRequired && (!data.noOfPersons || data.noOfPersons < 1)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "No. of Persons is required and must be at least 1",
+          path: ["noOfPersons"],
+        });
+      }
+    });
+};