added new fields inside Expense action - tds, baseAmount, taxAmount

2025-11-05 17:04:04 +05:30 · 2025-11-05 17:04:04 +05:30 · ec2a1706fc
commit ec2a1706fc
parent daaebf919d
8 changed files with 488 additions and 322 deletions
--- a/src/components/Expenses/ExpenseList.jsx
+++ b/src/components/Expenses/ExpenseList.jsx
@ -124,9 +124,9 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
      align: "text-start mx-2",
    },
    {
-      key: "expensesType",
+      key: "expensesCategory",
      label: "Expense Category",
-      getValue: (e) => e.expensesType?.name || "N/A",
+      getValue: (e) => e.expenseCategory?.name || "N/A",
      align: "text-start",
    },
    {
@ -254,7 +254,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                          className={`sorting d-table-cell `}
                          aria-sort="descending"
                        >
-                          <div className={`${col.align} p`}>{col.label}</div>
+                          <div className={`${col.align} `}>{col.label}</div>
                        </th>
                      )
                  )}
@ -289,9 +289,12 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                              (col.isAlwaysVisible || groupBy !== col.key) && (
                                <td
                                  key={col.key}
-                                  className={`d-table-cell ml-2  ${col.align ?? ""}`}
+                                  className={`d-table-cell ml-2  ${col.align ?? ""} `}
                                >
-                                 <div className="d-flex px-2">{col.customRender
+                                 <div className={`d-flex px-2 ${col.key === "status" ? "justify-content-center":""}
+                                 ${col.key === "amount" ? "justify-content-end":""}
+                                 ${col.key === "submitted" ? "justify-content-center":""}
+                                 `}>{col.customRender
                                    ? col.customRender(expense)
                                    : col.getValue(expense)}</div>
                                </td>
--- a/src/components/Expenses/ExpenseSchema.js
+++ b/src/components/Expenses/ExpenseSchema.js
@ -1,5 +1,6 @@
 import { z } from "zod";
 import { localToUtc } from "../../utils/appUtils";
+import { DEFAULT_CURRENCY } from "../../utils/constants";

 const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
 const ALLOWED_TYPES = [
@ -24,6 +25,10 @@ export const ExpenseSchema = (expenseTypes) => {
      location: z.string().min(1, { message: "Location is required" }),
      supplerName: z.string().min(1, { message: "Supplier name is required" }),
      gstNumber: z.string().optional(),
+      currencyId: z
+        .string()
+        .min(1, { message: "currency is required" })
+        .default(DEFAULT_CURRENCY),
      amount: z.coerce
        .number({
          invalid_type_error: "Amount is required and must be a number",
@ -94,6 +99,7 @@ export const defaultExpense = {
  amount: "",
  noOfPersons: "",
  gstNumber: "",
+  currencyId: DEFAULT_CURRENCY,
  billAttachments: [],
 };

@ -108,6 +114,9 @@ export const ExpenseActionScheam = (
      reimburseTransactionId: z.string().nullable().optional(),
      reimburseDate: z.string().nullable().optional(),
      reimburseById: z.string().nullable().optional(),
+      tdsPercentage: z.number().optional(),
+      baseAmount: z.string().nullable().optional(),
+      taxAmount: z.string().nullable().optional(),
    })
    .superRefine((data, ctx) => {
      if (isReimbursement) {
@ -125,15 +134,7 @@ export const ExpenseActionScheam = (
            message: "Reimburse Date is required",
          });
        }
-        // let reimburse_Date = localToUtc(data.reimburseDate);
-        // if (transactionDate > reimburse_Date) {
-        //   ctx.addIssue({
-        //     code: z.ZodIssueCode.custom,
-        //     path: ["reimburseDate"],
-        //     message:
-        //       "Reimburse Date must be greater than or equal to Expense created Date",
-        //   });
-        // }
+
        if (!data.reimburseById) {
          ctx.addIssue({
            code: z.ZodIssueCode.custom,
@ -141,6 +142,20 @@ export const ExpenseActionScheam = (
            message: "Reimburse By is required",
          });
        }
+        if (!data.baseAmount) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: ["baseAmount"],
+            message: "Base Amount i required",
+          });
+        }
+        if (!data.taxAmount) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: ["taxAmount"],
+            message: "Tax is required",
+          });
+        }
      }
    });
 };
@ -151,7 +166,10 @@ export const defaultActionValues = {

  reimburseTransactionId: null,
  reimburseDate: null,
-  reimburseById: null,
+  reimburseById: "",
+  tdsPercentage: 0,
+  baseAmount: "",
+  taxAmount: "",
 };

 export const SearchSchema = z.object({
--- a/src/components/Expenses/ManageExpense.jsx
+++ b/src/components/Expenses/ManageExpense.jsx
@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { defaultExpense, ExpenseSchema } from "./ExpenseSchema";
 import { formatFileSize, localToUtc } from "../../utils/appUtils";
-import { useProjectName } from "../../hooks/useProjects";
+import { useCurrencies, useProjectName } from "../../hooks/useProjects";
 import { useDispatch, useSelector } from "react-redux";
 import { changeMaster } from "../../slices/localVariablesSlice";
 import useMaster, {
@ -30,7 +30,7 @@ import ErrorPage from "../../pages/ErrorPage";
 import Label from "../common/Label";
 import EmployeeSearchInput from "../common/EmployeeSearchInput";
 import Filelist from "./Filelist";
-
+import { DEFAULT_CURRENCY } from "../../utils/constants";

 const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
  const {
@ -67,7 +67,11 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
    error,
    isError: isProjectError,
  } = useProjectName();
-
+  const {
+    data: currencies,
+    isLoading: currencyLoading,
+    error: currencyError,
+  } = useCurrencies();
  const {
    PaymentModes,
    loading: PaymentModeLoading,
@ -129,7 +133,8 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
      reader.onload = () => resolve(reader.result.split(",")[1]);
      reader.onerror = (error) => reject(error);
    });
-  const removeFile = (index) => {documentId
+  const removeFile = (index) => {
+    documentId;
    if (expenseToEdit) {
      const newFiles = files.map((file, i) => {
        if (file.documentId !== index) return file;
@ -160,6 +165,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
        amount: data.amount || "",
        noOfPersons: data.noOfPersons || "",
        gstNumber: data.gstNumber || "",
+        currencyId: data.currencyId || DEFAULT_CURRENCY,
        billAttachments: data.documents
          ? data.documents.map((doc) => ({
              fileName: doc.fileName,
@ -198,7 +204,9 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
  const ExpenseTypeId = watch("expensesCategoryId");

  useEffect(() => {
-    setExpenseType(ExpenseCategories?.find((type) => type.id === ExpenseTypeId));
+    setExpenseType(
+      ExpenseCategories?.find((type) => type.id === ExpenseTypeId)
+    );
  }, [ExpenseTypeId]);

  const handleClose = () => {
@ -299,7 +307,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
            )}
          </div>
          <div className="col-12 col-md-6 text-start">
-            <label className="form-label">Paid By </label>
+            <Label className="form-label" required>Paid By </Label>
            <EmployeeSearchInput
              control={control}
              name="paidById"
@ -432,6 +440,32 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
            </div>
          )}
        </div>
+        <div className="col-md-6 text-start">
+          <Label htmlFor="currencyId" className="form-label" required>
+            Select Currency
+          </Label>
+          <select
+            className="form-select form-select-sm"
+            id="currencyId"
+            {...register("currencyId")}
+          >
+            <option value="" disabled>
+              Select Currency
+            </option>
+            {currencyLoading ? (
+              <option disabled>Loading...</option>
+            ) : (
+              currencies?.map((currency) => (
+                <option key={currency.id} value={currency.id}>
+                  {`${currency.currencyName} (${currency.symbol}) `}
+                </option>
+              ))
+            )}
+          </select>
+          {errors.currencyId && (
+            <small className="danger-text">{errors.currencyId.message}</small>
+          )}
+        </div>

        <div className="row my-2 text-start">
          <div className="col-md-12">
@ -487,7 +521,13 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
                {errors.billAttachments.message}
              </small>
            )}
-            {files.length > 0 && <Filelist files={files} removeFile={removeFile} expenseToEdit={expenseToEdit}/>}
+            {files.length > 0 && (
+              <Filelist
+                files={files}
+                removeFile={removeFile}
+                expenseToEdit={expenseToEdit}
+              />
+            )}

            {Array.isArray(errors.billAttachments) &&
              errors.billAttachments.map((fileError, index) => (
--- a/src/components/Expenses/ViewExpense.jsx
+++ b/src/components/Expenses/ViewExpense.jsx
@ -110,7 +110,6 @@ const ViewExpense = ({ ExpenseId }) => {
  const handleImageLoad = (id) => {
    setImageLoaded((prev) => ({ ...prev, [id]: true }));
  };
-
  return (
    <form className="container px-3" onSubmit={handleSubmit(onSubmit)}>
      <div className="col-12 mb-1">
@ -125,7 +124,8 @@ const ViewExpense = ({ ExpenseId }) => {
              <span
                className={`badge bg-label-${
                  getColorNameFromHex(data?.status?.color) || "secondary"
-              }`}t
+                }`}
+                t
              >
                {data?.status?.name}
              </span>
@ -134,7 +134,10 @@ const ViewExpense = ({ ExpenseId }) => {
            {/* Row 1 */}
            <div className="col-md-6 mb-3">
              <div className="d-flex">
-            <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
+                <label
+                  className="form-label me-2 mb-0 fw-semibold text-start"
+                  style={{ minWidth: "130px" }}
+                >
                  Transaction Date :
                </label>
                <div className="text-muted">
@ -145,7 +148,10 @@ const ViewExpense = ({ ExpenseId }) => {

            <div className="col-md-6 mb-3">
              <div className="d-flex">
-            <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
+                <label
+                  className="form-label me-2 mb-0 fw-semibold text-start"
+                  style={{ minWidth: "130px" }}
+                >
                  Expense Type :
                </label>
                <div className="text-muted">{data?.expensesType?.name}</div>
@ -155,7 +161,10 @@ const ViewExpense = ({ ExpenseId }) => {
            {/* Row 2 */}
            <div className="col-md-6 mb-3">
              <div className="d-flex">
-            <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
+                <label
+                  className="form-label me-2 mb-0 fw-semibold text-start"
+                  style={{ minWidth: "130px" }}
+                >
                  Supplier :
                </label>
                <div className="text-muted">{data?.supplerName}</div>
@ -164,17 +173,29 @@ const ViewExpense = ({ ExpenseId }) => {

            <div className="col-md-6 mb-3">
              <div className="d-flex">
-            <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
+                <label
+                  className="form-label me-2 mb-0 fw-semibold text-start"
+                  style={{ minWidth: "130px" }}
+                >
                  Amount :
                </label>
-            <div className="text-muted">  {formatFigure(data?.amount,{type:"currency",currency : data?.currency?.currencyCode ?? "INR"} )}</div>
+                <div className="text-muted">
+                  {" "}
+                  {formatFigure(data?.amount, {
+                    type: "currency",
+                    currency: data?.currency?.currencyCode ?? "INR",
+                  })}
+                </div>
              </div>
            </div>

            {/* Row 3 */}
            <div className="col-md-6 mb-3">
              <div className="d-flex">
-            <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
+                <label
+                  className="form-label me-2 mb-0 fw-semibold text-start"
+                  style={{ minWidth: "130px" }}
+                >
                  Payment Mode :
                </label>
                <div className="text-muted">{data?.paymentMode?.name}</div>
@ -184,7 +205,10 @@ const ViewExpense = ({ ExpenseId }) => {
            {data?.gstNumber && (
              <div className="col-md-6 mb-3">
                <div className="d-flex">
-              <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
+                  <label
+                    className="form-label me-2 mb-0 fw-semibold text-start"
+                    style={{ minWidth: "130px" }}
+                  >
                    GST Number :
                  </label>
                  <div className="text-muted">{data?.gstNumber}</div>
@ -192,21 +216,27 @@ const ViewExpense = ({ ExpenseId }) => {
              </div>
            )}

-     
-
            <div className="col-md-6 mb-3">
              <div className="d-flex">
-            <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
+                <label
+                  className="form-label me-2 mb-0 fw-semibold text-start"
+                  style={{ minWidth: "130px" }}
+                >
                  Pre-Approved :
                </label>
-            <div className="text-muted">{data.preApproved ? "Yes" : "No"}</div>
+                <div className="text-muted">
+                  {data.preApproved ? "Yes" : "No"}
+                </div>
              </div>
            </div>

            {/* Row 5 */}
            <div className="col-md-6 mb-3">
              <div className="d-flex">
-            <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
+                <label
+                  className="form-label me-2 mb-0 fw-semibold text-start"
+                  style={{ minWidth: "130px" }}
+                >
                  Project :
                </label>
                <div className="text-muted">{data?.project?.name}</div>
@ -215,10 +245,15 @@ const ViewExpense = ({ ExpenseId }) => {

            <div className="col-md-6 mb-3">
              <div className="d-flex">
-            <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
+                <label
+                  className="form-label me-2 mb-0 fw-semibold text-start"
+                  style={{ minWidth: "130px" }}
+                >
                  Created At :
                </label>
-            <div className="text-muted">{formatUTCToLocalTime(data?.createdAt, true)}</div>
+                <div className="text-muted">
+                  {formatUTCToLocalTime(data?.createdAt, true)}
+                </div>
              </div>
            </div>

@ -226,7 +261,10 @@ const ViewExpense = ({ ExpenseId }) => {
            {data.createdBy && (
              <div className="col-md-6 text-start mb-3">
                <div className="d-flex align-items-center">
-              <label className="form-label me-2 mb-0 fw-semibold" style={{ minWidth: "130px" }}>
+                  <label
+                    className="form-label me-2 mb-0 fw-semibold"
+                    style={{ minWidth: "130px" }}
+                  >
                    Created By :
                  </label>
                  <Avatar
@ -236,7 +274,9 @@ const ViewExpense = ({ ExpenseId }) => {
                    lastName={data.createdBy?.lastName}
                  />
                  <span className="text-muted">
-                {`${data.createdBy?.firstName ?? ""} ${data.createdBy?.lastName ?? ""}`.trim() || "N/A"}
+                    {`${data.createdBy?.firstName ?? ""} ${
+                      data.createdBy?.lastName ?? ""
+                    }`.trim() || "N/A"}
                  </span>
                </div>
              </div>
@ -244,7 +284,10 @@ const ViewExpense = ({ ExpenseId }) => {

            <div className="col-md-6 text-start mb-3">
              <div className="d-flex align-items-center">
-            <label className="form-label me-2 mb-0 fw-semibold" style={{ minWidth: "130px" }}>
+                <label
+                  className="form-label me-2 mb-0 fw-semibold"
+                  style={{ minWidth: "130px" }}
+                >
                  Paid By :
                </label>
                <Avatar
@ -254,7 +297,9 @@ const ViewExpense = ({ ExpenseId }) => {
                  lastName={data.paidBy?.lastName}
                />
                <span className="text-muted">
-              {`${data.paidBy?.firstName ?? ""} ${data.paidBy?.lastName ?? ""}`.trim() || "N/A"}
+                  {`${data.paidBy?.firstName ?? ""} ${
+                    data.paidBy?.lastName ?? ""
+                  }`.trim() || "N/A"}
                </span>
              </div>
            </div>
@ -267,7 +312,9 @@ const ViewExpense = ({ ExpenseId }) => {

            {/* Attachments */}
            <div className="col-12 text-start mb-2">
-          <label className="form-label me-2 mb-2 fw-semibold">Attachment :</label>
+              <label className="form-label me-2 mb-2 fw-semibold">
+                Attachment :
+              </label>
              <div className="d-flex flex-wrap gap-2">
                {data?.documents?.map((doc) => {
                  const isImage = doc.contentType?.includes("image");
@ -284,14 +331,19 @@ const ViewExpense = ({ ExpenseId }) => {
                        }
                      }}
                    >
-                  <i className={`bx ${getIconByFileType(doc.contentType)}`} style={{ fontSize: "30px" }}></i>
-                  <small className="text-center text-tiny text-truncate w-100" title={doc.fileName}>
+                      <i
+                        className={`bx ${getIconByFileType(doc.contentType)}`}
+                        style={{ fontSize: "30px" }}
+                      ></i>
+                      <small
+                        className="text-center text-tiny text-truncate w-100"
+                        title={doc.fileName}
+                      >
                        {doc.fileName}
                      </small>
                    </div>
                  );
                })}
-            
              </div>
            </div>

@ -319,8 +371,12 @@ const ViewExpense = ({ ExpenseId }) => {
                      <Avatar
                        size="xs"
                        classAvatar="m-0 me-1"
-                  firstName={data?.expensesReimburse?.reimburseBy?.firstName}
-                  lastName={data?.expensesReimburse?.reimburseBy?.lastName}
+                        firstName={
+                          data?.expensesReimburse?.reimburseBy?.firstName
+                        }
+                        lastName={
+                          data?.expensesReimburse?.reimburseBy?.lastName
+                        }
                      />
                      <span className="text-muted">
                        {`${data?.expensesReimburse?.reimburseBy?.firstName} ${data?.expensesReimburse?.reimburseBy?.lastName}`.trim()}
@ -335,7 +391,7 @@ const ViewExpense = ({ ExpenseId }) => {
            {Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
              <>
                {IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
-            <div className="row">
+                  <div className="row ">
                    <div className="col-12 col-md-6 text-start">
                      <label className="form-label">Transaction Id </label>
                      <input
@ -349,7 +405,7 @@ const ViewExpense = ({ ExpenseId }) => {
                        </small>
                      )}
                    </div>
-              <div className="col-12 col-md-6 text-start">
+                    <div className="col-12 col-md-6 text-start mb-2">
                      <label className="form-label">Transaction Date </label>
                      <DatePicker
                        name="reimburseDate"
@ -363,18 +419,66 @@ const ViewExpense = ({ ExpenseId }) => {
                        </small>
                      )}
                    </div>
-              <div className="col-12 col-md-6 text-start">
-                <label className="form-label">Reimburse By </label>
+                    <div className="col-12 col-md-6 text-start mb-2">
+                      <Label className="form-label" required>
+                        Reimburse By{" "}
+                      </Label>
                      <EmployeeSearchInput
                        control={control}
                        name="reimburseById"
                        projectId={null}
                      />
                    </div>
+                    <div className="col-12 col-md-6 text-start">
+                      <Label className="form-label" >
+                        TDS Percentage
+                      </Label>
+                      <input
+                        type="number"
+                        className="form-control form-control-sm"
+                        {...register("tdsPercentage")}
+                      />
+                         {errors.tdsPercentage && (
+                        <small className="danger-text">
+                          {errors.tdsPercentage.message}
+                        </small>
+                      )}
+                    </div>
+                    <div className="col-12 col-md-6 text-start">
+                      <Label className="form-label" required>
+                        Base Amount
+                      </Label>
+                      <input
+                        type="number"
+                        className="form-control form-control-sm"
+                        {...register("baseAmount")}
+                      />
+                       {errors.baseAmount && (
+                        <small className="danger-text">
+                          {errors.baseAmount.message}
+                        </small>
+                      )}
+                    </div>
+                      <div className="col-12 col-md-6 text-start">
+                      <Label className="form-label" required>
+                        Tax Amount
+                      </Label>
+                      <input
+                        type="number"
+                        className="form-control form-control-sm"
+                        {...register("taxAmount")}
+                      />
+                       {errors.taxAmount && (
+                        <small className="danger-text">
+                          {errors.taxAmount.message}
+                        </small>
+                      )}
+                    </div>
                  </div>
                )}
-          <div className="col-12 mb-3 text-start">
-            {((nextStatusWithPermission.length > 0 && !IsRejectedExpense) ||
+                <div className="col-12 mb-3 text-start mt-2">
+                  {((nextStatusWithPermission.length > 0 &&
+                    !IsRejectedExpense) ||
                    (IsRejectedExpense && isCreatedBy)) && (
                    <>
                      <Label className="form-label me-2 mb-0" required>
@ -423,13 +527,13 @@ const ViewExpense = ({ ExpenseId }) => {

        <div className="col-12 col-lg-5 col-xl-4">
          <div className="d-flex align-items-center text-secondary mb-">
-       <i className='bx bx-time-five me-2'></i> <p className=" m-0">TimeLine</p>
+            <i className="bx bx-time-five me-2"></i>{" "}
+            <p className=" m-0">TimeLine</p>
          </div>
          <ExpenseStatusLogs data={data} />
        </div>
      </div>
-</form>
-
+    </form>
  );
 };

--- a/src/components/PaymentRequest/ManagePaymentRequest.jsx
+++ b/src/components/PaymentRequest/ManagePaymentRequest.jsx
@ -370,7 +370,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
                onChange={handleSetItSelf}
              />
              <Label htmlFor="sameAsSupplier" className="form-check-label">
-                Same as Supplier
+                It self
              </Label>
            </div>
          </div>
@ -425,7 +425,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
        {/* Upload Document  */}
        <div className="row my-2 text-start">
          <div className="col-md-12">
-            <Label className="form-label" required>
+            <Label className="form-label">
              Upload Bill{" "}
            </Label>

--- a/src/components/PaymentRequest/ViewPaymentRequest.jsx
+++ b/src/components/PaymentRequest/ViewPaymentRequest.jsx
@ -441,9 +441,9 @@ const ViewPaymentRequest = ({ requestId }) => {
                    )}
                </div>
              </>
-            ):(<div className="text-end flex-wrap gap-2 my-2 mt-3">
+            ): !data?.isExpenseCreated ? (<div className="text-end flex-wrap gap-2 my-2 mt-3">
              <button className="btn btn-sm btn-primary" onClick={handleExpense}>Make Expense</button>
-            </div>)}
+            </div>):(<></>)}
            
          </div>
        </div>
--- a/src/components/common/EmployeeSearchInput.jsx
+++ b/src/components/common/EmployeeSearchInput.jsx
@ -115,7 +115,7 @@ const EmployeeSearchInput = ({
        </ul>
      )}

-      {error && <small className="text-danger">{error.message}</small>}
+      {error && <small className="danger-text">{error.message}</small>}
    </div>
  );
 };
--- a/src/utils/constants.jsx
+++ b/src/utils/constants.jsx
@ -157,6 +157,7 @@ export const PROJECT_STATUS = [
  },
 ];

+export const DEFAULT_CURRENCY = "78e96e4a-7ce0-4164-ae3a-c833ad45ec2c";

 export const EXPENSE_STATUS = {
  daft:"297e0d8f-f668-41b5-bfea-e03b354251c8",