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

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>
                       )
                   )}
@@ -291,7 +291,10 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                                   key={col.key}
                                   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>

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({

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) => (

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>
+                      <i
-                  <small className="text-center text-tiny text-truncate w-100" title={doc.fileName}>
+                        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}
+                        firstName={
-                  lastName={data?.expensesReimburse?.reimburseBy?.lastName}
+                          data?.expensesReimburse?.reimburseBy?.firstName
+                        }
+                        lastName={
+                          data?.expensesReimburse?.reimburseBy?.lastName
+                        }
                       />
                       <span className="text-muted">
                         {`${data?.expensesReimburse?.reimburseBy?.firstName} ${data?.expensesReimburse?.reimburseBy?.lastName}`.trim()}
@@ -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">
+                    <div className="col-12 col-md-6 text-start mb-2">
-                <label className="form-label">Reimburse By </label>
+                      <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">
+                <div className="col-12 mb-3 text-start mt-2">
-            {((nextStatusWithPermission.length > 0 && !IsRejectedExpense) ||
+                  {((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>
-
   );
 };
 

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>
 

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>

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>
   );
 };

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",