From 9367c6de283785017d0b1f3643d3098655263508 Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Tue, 22 Jul 2025 18:53:17 +0530
Subject: [PATCH] initiated forn edit and created with one component

---
 src/components/Expenses/CreateExpense.jsx | 477 ----------------------
 src/components/Expenses/ExpenseSchema.js  |  15 +
 2 files changed, 15 insertions(+), 477 deletions(-)
 delete mode 100644 src/components/Expenses/CreateExpense.jsx

diff --git a/src/components/Expenses/CreateExpense.jsx b/src/components/Expenses/CreateExpense.jsx
deleted file mode 100644
index cddc79dd..00000000
--- a/src/components/Expenses/CreateExpense.jsx
+++ /dev/null
@@ -1,477 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-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 = ({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(schema),
-    defaultValues: {
-      projectId: "",
-      expensesTypeId: "",
-      paymentModeId: "",
-      paidById: "",
-      transactionDate: "",
-      transactionId: "",
-      description: "",
-      location: "",
-      supplerName: "",
-      amount: "",
-      noOfPersons: "",
-      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 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: "",
-        };
-      })
-    );
-
-    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 {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 className="container p-3">
-      <h5 className="m-0">Create New Expense</h5>
-      <form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
-        <div className="row my-2">
-          <div className="col-md-6">
-            <label htmlFor="projectId" className="form-label">
-              Select Project
-            </label>
-            <select
-              className="form-select form-select-sm"
-              {...register("projectId")}
-            >
-              <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 className="col-md-6">
-            <label for="expensesTypeId" className="form-label ">
-              Expense Type
-            </label>
-            <select
-              className="form-select form-select-sm"
-              id="expensesTypeId"
-              {...register("expensesTypeId")}
-            >
-              <option value="" disabled>
-                Select Type
-              </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 className="row my-2">
-          <div className="col-md-6">
-            <label for="paymentModeId" className="form-label ">
-              Payment Mode
-            </label>
-            <select
-              class="form-select form-select-sm"
-              id="paymentModeId"
-              {...register("paymentModeId")}
-            >
-              <option value="" disabled>
-                Select Mode
-              </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 className="col-md-6">
-            <label for="paidById" className="form-label ">
-              Paid By
-            </label>
-            <select
-              class="form-select form-select-sm"
-              id="paymentModeId"
-              {...register("paidById")}
-              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>
-                {errors.paidById && (
-              <small className="danger-text">
-                {errors.paidById.message}
-              </small>
-            )}
-          </div>
-        </div>
-
-        <div className="row my-2">
-          <div className="col-md-6">
-            <label for="transactionDate" className="form-label ">
-              Transaction Date
-            </label>
-            <input
-              type="date"
-              className="form-control form-control-sm"
-              placeholder="YYYY-MM-DD"
-              id="flatpickr-date"
-              {...register("transactionDate")}
-            />
-            {errors.transactionDate && (
-              <small className="danger-text">
-                {errors.transactionDate.message}
-              </small>
-            )}
-          </div>
-
-          <div class="col-md-6">
-            <label for="amount" className="form-label ">
-              Amount
-            </label>
-            <input
-              type="number"
-              id="amount"
-              className="form-control form-control-sm"
-              min="1"
-              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 className="col-md-6">
-            <label for="supplerName" className="form-label ">
-              Supplier Name
-            </label>
-            <input
-              type="text"
-              id="supplerName"
-              className="form-control form-control-sm"
-              {...register("supplerName")}
-            />
-            {errors.supplerName && (
-              <small className="danger-text">
-                {errors.supplerName.message}
-              </small>
-            )}
-          </div>
-
-          <div class="col-md-6">
-            <label for="location" className="form-label ">
-              Location
-            </label>
-            <input
-              type="text"
-              id="location"
-              className="form-control form-control-sm"
-              {...register("location")}
-            />
-            {errors.location && (
-              <small className="danger-text">{errors.location.message}</small>
-            )}
-          </div>
-        </div>
-        <div class="row my-2">
-          <div className="col-md-6">
-            <label for="statusId" className="form-label ">
-              TransactionId
-            </label>
-            <input
-              type="text"
-              id="transactionId"
-              class="form-control form-control-sm"
-              min="1"
-              {...register("transactionId")}
-            />
-            {errors.transactionId && (
-              <small className="danger-text">
-                {errors.transactionId.message}
-              </small>
-            )}
-          </div>
-
-          {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"
-              className="form-control form-control-sm"
-              {...register("description")}
-              rows="2"
-            ></textarea>
-            {errors.description && (
-              <small className="danger-text">
-                {errors.description.message}
-              </small>
-            )}
-          </div>
-        </div>
-
-        <div className="row my-2">
-          <div className="col-md-12">
-            <label className="form-label ">
-              Upload Bill{" "}
-            </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 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"
-                id="billAttachments"
-                accept=".pdf,.jpg,.jpeg,.png"
-                multiple
-                style={{ display: "none" }}
-                {...register("billAttachments")}
-                onChange={(e) => {
-                  onFileChange(e);
-                  e.target.value = "";
-                }}
-              />
-            </div>
-            {errors.billAttachments && (
-              <small className="danger-text">
-                {errors.billAttachments.message}
-              </small>
-            )}
-
-            {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" className="btn btn-primary btn-sm mt-3" disabled={isPending}>
-            {isPending ? "Please Wait...":"Submit"}
-          </button>
-          <button type="reset" onClick={handleClose} className="btn btn-secondary btn-sm mt-3">
-            Cancel
-          </button>
-        </div>
-      </form>
-    </div>
-  );
-};
-
-export default CreateExpense;
-
diff --git a/src/components/Expenses/ExpenseSchema.js b/src/components/Expenses/ExpenseSchema.js
index 99b75633..a2e11ed7 100644
--- a/src/components/Expenses/ExpenseSchema.js
+++ b/src/components/Expenses/ExpenseSchema.js
@@ -68,6 +68,21 @@ export const ExpenseSchema = (expenseTypes) => {
     });
 };
 
+export const defaultExpense = {
+      projectId: "",
+      expensesTypeId: "",
+      paymentModeId: "",
+      paidById: "",
+      transactionDate: "",
+      transactionId: "",
+      description: "",
+      location: "",
+      supplerName: "",
+      amount: "",
+      noOfPersons: "",
+      billAttachments: [],
+    }
+
 export const ActionSchema = z.object({
   comment : z.string().min(1,{message:"Please leave comment"}),
    selectedStatus: z.string().min(1, { message: "Please select a status" }),