use

src/components/AdvancePayment/AdvancePaymentList.jsx

@@ -1,82 +1,68 @@
 import React from "react";
 import { useExpenseTransactions } from "../../hooks/useExpense";
+import Error from "../common/Error";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import Loader, { SpinnerLoader } from "../common/Loader";
 
 const AdvancePaymentList = ({ employeeId }) => {
-  const {data,isError, isLoading,isFetching,error}  = useExpenseTransactions(employeeId)
+  const { data, isError, isLoading, error, isFetching } =
-  const record = {
+    useExpenseTransactions(employeeId, { enabled: !!employeeId });
-    openingBalance: 25000.0,
+
-    rows: [
+  // Handle no employee selected
-      { id: 1, description: "Opening Balance", credit: 0.0, debit: 0.0 },
+  if (!employeeId) {
-      {
+    return (
-        id: 2,
+      <div
-        description: "Sales Invoice #INV-001",
+        className="d-flex justify-content-center align-items-center"
-        credit: 15000.0,
+        style={{ height: "200px" }}
-        debit: 0.0,
+      >
-      },
+        <p className="text-muted m-0">Please select an employee</p>
-      {
+      </div>
-        id: 3,
+    );
-        description: "Sales Invoice #INV-002",
+  }
-        credit: 12000.0,
+
-        debit: 0.0,
+  // Handle loading state
-      },
+  if (isLoading || isFetching) {
-      {
+    return (
-        id: 4,
+      <div
-        description: "Purchase - Raw Materials",
+        className="d-flex justify-content-center align-items-center"
-        credit: 0.0,
+        style={{ height: "200px" }}
-        debit: 8000.0,
+      >
-      },
+        <SpinnerLoader/>
-      { id: 5, description: "Office Rent - June", credit: 0.0, debit: 5000.0 },
+      </div>
-      {
+    );
-        id: 6,
+  }
-        description: "Client Payment Received (Bank)",
+
-        credit: 10000.0,
+  // Handle error state
-        debit: 0.0,
+  if (isError) {
-      },
+    return (
-      {
+      <div className="text-center  py-3">
-        id: 7,
+        {error?.status === 404 ? (
-        description: "Supplier Payment - ABC Corp",
+          "No advance payment transactions found."
-        credit: 0.0,
+        ) : (
-        debit: 6000.0,
+          <Error error={error} />
-      },
+        )}
-      { id: 8, description: "Interest Income", credit: 750.0, debit: 0.0 },
+      </div>
-      { id: 9, description: "Bank Charges", credit: 0.0, debit: 250.0 },
+    );
-      {
+  }
-        id: 10,
+
-        description: "Utilities - Electricity",
+  const records = Array.isArray(data) ? data : [];
-        credit: 0.0,
+
-        debit: 1800.0,
+  let currentBalance = 0;
-      },
+  const rowsWithBalance = records.map((r) => {
-      {
+    const isCredit = r.amount > 0;
-        id: 11,
+    const credit = isCredit ? r.amount : 0;
-        description: "Service Income - Project Alpha",
+    const debit = !isCredit ? Math.abs(r.amount) : 0;
-        credit: 5000.0,
+    currentBalance += credit - debit;
-        debit: 0.0,
+
-      },
+    return {
-      { id: 12, description: "Misc Expense", credit: 0.0, debit: 450.0 },
+      id: r.id,
-      {
+      description: r.title || "-",
-        id: 13,
+      projectName: r.project?.name || "-",
-        description: "Adjustment - Prior Year",
+      createdAt: r.createdAt,
-        credit: 0.0,
+      credit,
-        debit: 500.0,
+      debit,
-      },
+      balance: currentBalance,
-      { id: 14, description: "Commission Earned", credit: 1200.0, debit: 0.0 },
+    };
-      {
-        id: 15,
-        description: "Employee Salary - June",
-        credit: 0.0,
-        debit: 9500.0,
-      },
-      { id: 16, description: "GST Refund", credit: 2000.0, debit: 0.0 },
-      { id: 17, description: "Insurance Premium", credit: 0.0, debit: 3000.0 },
-      { id: 18, description: "Late Fee Collected", credit: 350.0, debit: 0.0 },
-      { id: 19, description: "Maintenance Expense", credit: 0.0, debit: 600.0 },
-      { id: 20, description: "Closing Balance", credit: 0.0, debit: 0.0 },
-    ],
-  };
-  let currentBalance = record.openingBalance;
-  const rowsWithBalance = record.rows.map((r) => {
-    currentBalance += r.credit - r.debit;
-    return { ...r, balance: currentBalance };
   });
 
   const columns = [
@@ -84,36 +70,45 @@ const AdvancePaymentList = ({ employeeId }) => {
     {
       key: "credit",
       label: (
-        <span>
+        <>
-          Credit (<i className="bx bx-rupee text-success"></i>)
+          Credit <i className="bx bx-rupee text-success"></i>
-        </span>
+        </>
       ),
       align: "text-end",
     },
     {
       key: "debit",
       label: (
-        <span>
+        <>
-          Debit (<i className="bx bx-rupee text-danger"></i>)
+          Debit <i className="bx bx-rupee text-danger"></i>
-        </span>
+        </>
       ),
       align: "text-end",
     },
     {
       key: "balance",
       label: (
-        <span>
+        <>
           Balance <i className="bi bi-currency-rupee text-primary"></i>
-        </span>
+        </>
       ),
       align: "text-end fw-bold",
     },
   ];
 
+  // Handle empty records
+  if (rowsWithBalance.length === 0) {
+    return (
+      <div className="text-center text-muted py-3">
+        No advance payment records found.
+      </div>
+    );
+  }
+
   return (
-    <div className="table-responsive ">
+    <div className="table-responsive">
-      <table className="table  align-middle">
+      <table className="table align-middle">
-        <thead className="table_header_border  ">
+        <thead className="table_header_border">
           <tr>
             {columns.map((col) => (
               <th key={col.key} className={col.align}>
@@ -126,25 +121,28 @@ const AdvancePaymentList = ({ employeeId }) => {
           {rowsWithBalance.map((row) => (
             <tr key={row.id}>
               {columns.map((col) => (
-                <td key={col.key} className={`${col.align} p-6`}>
+                <td key={col.key} className={`${col.align} p-2`}>
-                  {col.key === "balance" ||
+                  {["balance", "credit", "debit"].includes(col.key) ? (
-                  col.key === "credit" ||
+                    <span>
-                  col.key === "debit"
+                      {row[col.key].toLocaleString("en-IN")}
-                    ? row[col.key].toLocaleString("en-IN", {
+                    </span>
-                        style: "currency",
+                  ) : (
-                        currency: "INR",
+                    <div className="d-flex flex-column text-start">
-                      })
+                      <small className="text-muted">
-                    : (<div className="d-flex flex-column">
+                        {formatUTCToLocalTime(row.createdAt)}
-                      <small>{new Date().toISOString()}</small>
+                      </small>
-                      <small>Projec Name</small>
+                      <small className="fw-semibold text-dark">
-                      <small>{row[col.key]}</small>
+                        {row.projectName}
-                    </div>)}
+                      </small>
+                      <small>{row.description}</small>
+                    </div>
+                  )}
                 </td>
               ))}
             </tr>
           ))}
         </tbody>
-        <tfoot className="table-secondary fw-bold ">
+        <tfoot className="table-secondary fw-bold">
           <tr>
             <td className="text-start p-3">Final Balance</td>
             <td className="text-end" colSpan="3">

src/components/Expenses/ExpenseList.jsx

@@ -123,9 +123,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",
     },
     {
@@ -253,7 +253,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>
                       )
                   )}
@@ -288,16 +288,20 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                               (col.isAlwaysVisible || groupBy !== col.key) && (
                                 <td
                                   key={col.key}
-                                  className={`d-table-cell  ${col.align ?? ""}`}
+                                  className={`d-table-cell ml-2  ${col.align ?? ""} `}
                                 >
-                                  {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>
                               )
                           )}
                           <td className="sticky-action-column bg-white">
-                            <div className="d-flex justify-content-center gap-2">
+                            <div className="d-flex flex-row gap-2">
                               <i
                                 className="bx bx-show text-primary cursor-pointer"
                                 onClick={() =>

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().nullable().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",
+          });
+        }
       }
     });
 };
@@ -152,6 +167,9 @@ export const defaultActionValues = {
   reimburseTransactionId: null,
   reimburseDate: null,
   reimburseById: null,
+  tdsPercentage: 0,
+  baseAmount:null,
+  taxAmount: 0,
 };
 
 export const SearchSchema = z.object({

src/components/Expenses/ExpenseStatusLogs.jsx

@@ -8,9 +8,9 @@ const ExpenseStatusLogs = ({ data }) => {
   const [visibleCount, setVisibleCount] = useState(4);
 
   const sortedLogs = useMemo(() => {
-    if (!data?.updateLogs) return [];
+    if (!data?.expenseLogs) return [];
-    return [...data.updateLogs].sort(
+    return [...data.expenseLogs].sort(
-      (a, b) => new Date(b.updatedAt) - new Date(a.updatedAt)
+      (a, b) => new Date(b.updateAt) - new Date(a.updateAt)
     );
   }, [data?.updateLogs]);
 
@@ -20,11 +20,12 @@ const ExpenseStatusLogs = ({ data }) => {
   );
 
   const timelineData = useMemo(() => {
+   
     return logsToShow.map((log, index) => ({
       id: index + 1,
-      title: log.nextStatus?.name || "Status Updated",
+      title: log.action || "Status Updated",
-      description: log.nextStatus?.description || "",
+      description: log.comment || "",
-      timeAgo: moment.utc(log?.updatedAt).local().fromNow(),
+      timeAgo: log.updateAt,
       color: getColorNameFromHex(log.nextStatus?.color) || "primary",
       users: log.updatedBy
         ? [
@@ -44,46 +45,8 @@ const ExpenseStatusLogs = ({ data }) => {
   };
 
   return (
-    <div className="page-min-h overflow-auto">
+    <div className="page-min-h overflow-auto py-1">
-      {/* <div className="row g-2">
-        {logsToShow.map((log) => (
-          <div key={log.id} className="col-12 d-flex align-items-start mb-1">
-            <Avatar
-              size="xs"
-              firstName={log.updatedBy.firstName}
-              lastName={log.updatedBy.lastName}
-            />
      
-            <div className="flex-grow-1">
-              <div className="text-start">
-                <div className="flex">
-                  <span>{`${log.updatedBy.firstName} ${log.updatedBy.lastName}`}</span>
-                  <small className="text-secondary text-tiny ms-2">
-                    <em>{log.action}</em>
-                  </small>
-                  <span className="text-tiny text-secondary d-block">
-                    {formatUTCToLocalTime(log.updateAt, true)}
-                  </span>
-                </div>
-                <div className="d-flex align-items-center text-muted small mt-1">
-                  <span>{log.comment}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {sortedLogs.length > visibleCount && (
-        <div className="text-center my-1">
-          <button
-            className="btn btn-xs btn-outline-primary"
-            onClick={handleShowMore}
-          >
-            Show More
-          </button>
-        </div>
-      )} */}
 
       <Timeline items={timelineData} />
     </div>

src/components/Expenses/Filelist.jsx

@@ -12,19 +12,19 @@ const Filelist = ({ files, removeFile, expenseToEdit }) => {
           return true;
         })
         .map((file, idx) => (
-          <div className="col-12 col-sm-6 col-md-4 col-lg-8 bg-white shadow-sm rounded p-2 m-2">
+          <div className="col-12 col-sm-6 col-md-4 mb-2" key={idx}>
-            <div className="row align-items-center">
+            <div className="d-flex align-items-center justify-content-between bg-white border rounded p-1 ">
               {/* File icon and info */}
-              <div className="col-10 d-flex align-items-center gap-2">
+              <div className="d-flex align-items-center flex-grow-1 gap-2 overflow-hidden">
                 <i
                   className={`bx ${getIconByFileType(
                     file?.contentType
-                  )} fs-3`}
+                  )} fs-3 text-primary`}
                   style={{ minWidth: "30px" }}
                 ></i>
 
                 <div className="d-flex flex-column text-truncate">
-                  <span className="fw-medium small text-truncate">
+                  <span className="fw-semibold small text-truncate">
                     {file.fileName}
                   </span>
                   <span className="text-body-secondary small">
@@ -33,16 +33,17 @@ const Filelist = ({ files, removeFile, expenseToEdit }) => {
                 </div>
               </div>
 
-              <div className="col-2 text-end">
+              {/* Delete icon */}
+              <Tooltip text="Remove file">
                 <i
-                  className="bx bx-trash fs-4 cursor-pointer text-danger bx-sm  "
+                  className="bx bx-sm bx-trash text-danger fs-4 cursor-pointer ms-2"
                   role="button"
                   onClick={(e) => {
                     e.preventDefault();
                     removeFile(expenseToEdit ? file.documentId : idx);
                   }}
                 ></i>
-              </div>
+              </Tooltip>
             </div>
           </div>
         ))}

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,6 +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 {
@@ -66,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,6 +134,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
       reader.onerror = (error) => reject(error);
     });
   const removeFile = (index) => {
+    documentId;
     if (expenseToEdit) {
       const newFiles = files.map((file, i) => {
         if (file.documentId !== index) return file;
@@ -159,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,
@@ -197,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 = () => {
@@ -297,37 +306,8 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               </small>
             )}
           </div>
-
-          {/* <div className="col-md-6">
-            <Label htmlFor="paidById" className="form-label" required>
-              Paid By
-            </Label>
-            <select
-              className="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 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"
@@ -460,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">
@@ -515,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

@@ -9,7 +9,13 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { defaultActionValues, ExpenseActionScheam } from "./ExpenseSchema";
 import { useExpenseContext } from "../../pages/Expense/ExpensePage";
-import { getColorNameFromHex, getIconByFileType, localToUtc } from "../../utils/appUtils";
+import {
+  formatCurrency,
+  formatFigure,
+  getColorNameFromHex,
+  getIconByFileType,
+  localToUtc,
+} from "../../utils/appUtils";
 import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import {
@@ -103,365 +109,429 @@ const ViewExpense = ({ ExpenseId }) => {
   const handleImageLoad = (id) => {
     setImageLoaded((prev) => ({ ...prev, [id]: true }));
   };
-
   return (
     <form className="container px-3" onSubmit={handleSubmit(onSubmit)}>
-      <div className="row mb-1">
+      <div className="col-12 mb-1">
-        <div className="col-12 mb-1">
+        <h5 className="fw-semibold m-0">Expense Details</h5>
-          <h5 className="fw-semibold m-0">Expense Details</h5>
+      </div>
-          <hr />
-        </div>
-         <div className="col-12 text-start fw-semibold my-2">{data?.expenseUId}</div>
-        {/* 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" }}
-            >
-              Transaction Date :
-            </label>
-            <div className="text-muted">
-              {formatUTCToLocalTime(data?.transactionDate)}
-            </div>
-          </div>
-        </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" }}
-            >
-              Expense Type :
-            </label>
-            <div className="text-muted">{data?.expensesType?.name}</div>
-          </div>
-        </div>
 
-        {/* Row 2 */}
+      <div className="row mb-1  ">
-        <div className="col-md-6 mb-3">
+        <div className="col-12 col-lg-7 col-xl-8 mb-3">
-          <div className="d-flex">
+          <div className="row">
-            <label
+            <div className="col-12 d-flex justify-content-between text-start fw-semibold my-2">
-              className="form-label me-2 mb-0 fw-semibold text-start"
+              <span>{data?.expenseUId}</span>
-              style={{ minWidth: "130px" }}
+              <span
-            >
+                className={`badge bg-label-${
-              Supplier :
+                  getColorNameFromHex(data?.status?.color) || "secondary"
-            </label>
+                }`}
-            <div className="text-muted">{data?.supplerName}</div>
+                t
-          </div>
-        </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" }}
-            >
-              Amount :
-            </label>
-            <div className="text-muted">₹ {data.amount}</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" }}
-            >
-              Payment Mode :
-            </label>
-            <div className="text-muted">{data?.paymentMode?.name}</div>
-          </div>
-        </div>
-        {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" }}
               >
-                GST Number :
+                {data?.status?.name}
-              </label>
-              <div className="text-muted">{data?.gstNumber}</div>
-            </div>
-          </div>
-        )}
-
-        {/* Row 4 */}
-        <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" }}
-            >
-              Status :
-            </label>
-            <span
-              className={`badge bg-label-${
-                getColorNameFromHex(data?.status?.color) || "secondary"
-              }`}
-            >
-              {data?.status?.name}
-            </span>
-          </div>
-        </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" }}
-            >
-              Pre-Approved :
-            </label>
-            <div className="text-muted">{data.preApproved ? "Yes" : "No"}</div>
-          </div>
-        </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" }}
-            >
-              Project :
-            </label>
-            <div className="text-muted">{data?.project?.name}</div>
-          </div>
-        </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" }}
-            >
-              Created At :
-            </label>
-            <div className="text-muted">
-              {formatUTCToLocalTime(data?.createdAt, true)}
-            </div>
-          </div>
-        </div>
-
-        {/* Row 6 */}
-        {data.createdBy && (
-          <div className="col-md-6 text-start">
-            <div className="d-flex align-items-center">
-              <label
-                className="form-label me-2 mb-0 fw-semibold"
-                style={{ minWidth: "130px" }}
-              >
-                Created By :
-              </label>
-              <div className="d-flex align-items-center">
-                <Avatar
-                  size="xs"
-                  classAvatar="m-0"
-                  firstName={data.createdBy?.firstName}
-                  lastName={data.createdBy?.lastName}
-                />
-                <span className="text-muted">
-                  {`${data.createdBy?.firstName ?? ""} ${
-                    data.createdBy?.lastName ?? ""
-                  }`.trim() || "N/A"}
-                </span>
-              </div>
-            </div>
-          </div>
-        )}
-        <div className="col-md-6 text-start">
-          <div className="d-flex align-items-center">
-            <label
-              className="form-label me-2 mb-0 fw-semibold"
-              style={{ minWidth: "130px" }}
-            >
-              Paid By :
-            </label>
-            <div className="d-flex align-items-center ">
-              <Avatar
-                size="xs"
-                classAvatar="m-0"
-                firstName={data.paidBy?.firstName}
-                lastName={data.paidBy?.lastName}
-              />
-              <span className="text-muted">
-                {`${data.paidBy?.firstName ?? ""} ${
-                  data.paidBy?.lastName ?? ""
-                }`.trim() || "N/A"}
               </span>
             </div>
-          </div>
-        </div>
 
-          <div className="text-start my-1">
+            {/* Row 1 */}
-            <label className="fw-semibold form-label">Description : </label>
+            <div className="col-md-6 mb-3">
-          <div className="text-muted">{data?.description}</div>
+              <div className="d-flex">
-        </div>
+                <label
-      </div>
+                  className="form-label me-2 mb-0 fw-semibold text-start"
-
+                  style={{ minWidth: "130px" }}
-      <div className="col-12 text-start">
-        <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");
-
-            return (
-              <div
-                key={doc.documentId}
-                className="border rounded  hover-scale p-2 d-flex flex-column align-items-center"
-                style={{
-                  width: "80px",
-                  cursor: isImage ? "pointer" : "default",
-                }}
-                onClick={() => {
-                  if (isImage) {
-                    setDocumentView({
-                      IsOpen: true,
-                      Image: doc.preSignedUrl,
-                    });
-                  }
-                }}
-              >
-                <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}
+                  Transaction Date :
-                </small>
+                </label>
+                <div className="text-muted">
+                  {formatUTCToLocalTime(data?.transactionDate)}
+                </div>
               </div>
-            );
+            </div>
-          })}
-        </div>
-      </div>
 
-      {data.expensesReimburse && (
+            <div className="col-md-6 mb-3">
-        <div className="row text-start mt-2">
+              <div className="d-flex">
-          <div className="col-md-6 mb-sm-0 mb-2">
+                <label
-            <label className="form-label me-2 mb-0 fw-semibold">
+                  className="form-label me-2 mb-0 fw-semibold text-start"
-              Transaction ID :
+                  style={{ minWidth: "130px" }}
-            </label>
+                >
-            {data.expensesReimburse.reimburseTransactionId || "N/A"}
+                  Expense Type :
-          </div>
+                </label>
-          <div className="col-md-6 ">
+                <div className="text-muted">{data?.expensesType?.name}</div>
-            <label className="form-label me-2 mb-0 fw-semibold">
+              </div>
-              Reimburse Date :
+            </div>
-            </label>
-            {formatUTCToLocalTime(data.expensesReimburse.reimburseDate)}
-          </div>
 
-          {data.expensesReimburse && (
+            {/* Row 2 */}
-            <>
+            <div className="col-md-6 mb-3">
-              <div className="col-md-6  d-flex align-items-center">
+              <div className="d-flex">
-                <label className="form-label me-2 mb-0 fw-semibold">
+                <label
-                  Reimburse By :
+                  className="form-label me-2 mb-0 fw-semibold text-start"
+                  style={{ minWidth: "130px" }}
+                >
+                  Supplier :
+                </label>
+                <div className="text-muted">{data?.supplerName}</div>
+              </div>
+            </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" }}
+                >
+                  Amount :
+                </label>
+                <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" }}
+                >
+                  Payment Mode :
+                </label>
+                <div className="text-muted">{data?.paymentMode?.name}</div>
+              </div>
+            </div>
+
+            {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" }}
+                  >
+                    GST Number :
+                  </label>
+                  <div className="text-muted">{data?.gstNumber}</div>
+                </div>
+              </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" }}
+                >
+                  Pre-Approved :
+                </label>
+                <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" }}
+                >
+                  Project :
+                </label>
+                <div className="text-muted">{data?.project?.name}</div>
+              </div>
+            </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" }}
+                >
+                  Created At :
+                </label>
+                <div className="text-muted">
+                  {formatUTCToLocalTime(data?.createdAt, true)}
+                </div>
+              </div>
+            </div>
+
+            {/* Created & Paid By */}
+            {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" }}
+                  >
+                    Created By :
+                  </label>
+                  <Avatar
+                    size="xs"
+                    classAvatar="m-0 me-1"
+                    firstName={data.createdBy?.firstName}
+                    lastName={data.createdBy?.lastName}
+                  />
+                  <span className="text-muted">
+                    {`${data.createdBy?.firstName ?? ""} ${
+                      data.createdBy?.lastName ?? ""
+                    }`.trim() || "N/A"}
+                  </span>
+                </div>
+              </div>
+            )}
+
+            <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" }}
+                >
+                  Paid By :
                 </label>
                 <Avatar
                   size="xs"
                   classAvatar="m-0 me-1"
-                  firstName={data?.expensesReimburse?.reimburseBy?.firstName}
+                  firstName={data.paidBy?.firstName}
-                  lastName={data?.expensesReimburse?.reimburseBy?.lastName}
+                  lastName={data.paidBy?.lastName}
                 />
                 <span className="text-muted">
-                  {`${data?.expensesReimburse?.reimburseBy?.firstName} ${data?.expensesReimburse?.reimburseBy?.lastName}`.trim()}
+                  {`${data.paidBy?.firstName ?? ""} ${
+                    data.paidBy?.lastName ?? ""
+                  }`.trim() || "N/A"}
                 </span>
               </div>
-            </>
+            </div>
-          )}
-        </div>
-      )}
-      <hr className="divider my-1 border-2 divider-primary my-2" />
 
-      {Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
+            {/* Description */}
-        <>
+            <div className="col-12 text-start mb-2">
-          {IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
+              <label className="fw-semibold form-label">Description : </label>
-            <div className="row">
+              <div className="text-muted">{data?.description}</div>
-              <div className="col-12 col-md-6 text-start">
+            </div>
-                <label className="form-label">Transaction Id </label>
+
-                <input
+            {/* Attachments */}
-                  type="text"
+            <div className="col-12 text-start mb-2">
-                  className="form-control form-control-sm"
+              <label className="form-label me-2 mb-2 fw-semibold">
-                  {...register("reimburseTransactionId")}
+                Attachment :
-                />
+              </label>
-                {errors.reimburseTransactionId && (
+              <div className="d-flex flex-wrap gap-2">
-                  <small className="danger-text">
+                {data?.documents?.map((doc) => {
-                    {errors.reimburseTransactionId.message}
+                  const isImage = doc.contentType?.includes("image");
-                  </small>
+                  return (
-                )}
+                    <div
-              </div>
+                      key={doc.documentId}
-              <div className="col-12 col-md-6 text-start">
+                      className="d-flex align-items-center cusor-pointer"
-                <label className="form-label">Transaction Date </label>
+                      onClick={() => {
-                <DatePicker
+                        if (isImage) {
-                  name="reimburseDate"
+                          setDocumentView({
-                  control={control}
+                            IsOpen: true,
-                  minDate={data?.createdAt}
+                            Image: doc.preSignedUrl,
-                  maxDate={new Date()}
+                          });
-                />
+                        }
-                {errors.reimburseDate && (
+                      }}
-                  <small className="danger-text">
+                    >
-                    {errors.reimburseDate.message}
+                      <i
-                  </small>
+                        className={`bx ${getIconByFileType(doc.contentType)}`}
-                )}
+                        style={{ fontSize: "30px" }}
-              </div>
+                      ></i>
-              <div className="col-12 col-md-6 text-start">
+                      <small
-                <label className="form-label">Reimburse By </label>
+                        className="text-center text-tiny text-truncate w-100"
-                <EmployeeSearchInput
+                        title={doc.fileName}
-                  control={control}
+                      >
-                  name="reimburseById"
+                        {doc.fileName}
-                  projectId={null}                
+                      </small>
-                />
+                    </div>
+                  );
+                })}
               </div>
             </div>
-          )}
+
-          <div className="col-12 mb-3 text-start">
+            {data.expensesReimburse && (
-            {((nextStatusWithPermission.length > 0 && !IsRejectedExpense) ||
+              <div className="row text-start mt-2">
-              (IsRejectedExpense && isCreatedBy)) && (
+                <div className="col-md-6 mb-sm-0 mb-2">
-              <>
+                  <label className="form-label me-2 mb-0 fw-semibold">
-                <Label className="form-label me-2 mb-0" required>Comment</Label>
+                    Transaction ID :
-                <textarea
+                  </label>
-                  className="form-control form-control-sm"
+                  {data.expensesReimburse.reimburseTransactionId || "N/A"}
-                  {...register("comment")}
+                </div>
-                  rows="2"
+                <div className="col-md-6 ">
-                />
+                  <label className="form-label me-2 mb-0 fw-semibold">
-                {errors.comment && (
+                    Reimburse Date :
-                  <small className="danger-text">
+                  </label>
-                    {errors.comment.message}
+                  {formatUTCToLocalTime(data.expensesReimburse.reimburseDate)}
-                  </small>
+                </div>
+
+                {data.expensesReimburse && (
+                  <>
+                    <div className="col-md-6  d-flex align-items-center">
+                      <label className="form-label me-2 mb-0 fw-semibold">
+                        Reimburse By :
+                      </label>
+                      <Avatar
+                        size="xs"
+                        classAvatar="m-0 me-1"
+                        firstName={
+                          data?.expensesReimburse?.reimburseBy?.firstName
+                        }
+                        lastName={
+                          data?.expensesReimburse?.reimburseBy?.lastName
+                        }
+                      />
+                      <span className="text-muted">
+                        {`${data?.expensesReimburse?.reimburseBy?.firstName} ${data?.expensesReimburse?.reimburseBy?.lastName}`.trim()}
+                      </span>
+                    </div>
+                  </>
                 )}
+              </div>
+            )}
+            <hr className="divider my-1 border-2 divider-primary my-2" />
+
+            {Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
+              <>
+                {IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
+                  <div className="row ">
+                    <div className="col-12 col-md-6 text-start">
+                      <Label className="form-label" required>Transaction Id </Label>
+                      <input
+                        type="text"
+                        className="form-control form-control-sm"
+                        {...register("reimburseTransactionId")}
+                      />
+                      {errors.reimburseTransactionId && (
+                        <small className="danger-text">
+                          {errors.reimburseTransactionId.message}
+                        </small>
+                      )}
+                    </div>
+                    <div className="col-12 col-md-6 text-start mb-1">
+                      <Label className="form-label" required>Transaction Date </Label>
+                      <DatePicker
+                        name="reimburseDate"
+                        control={control}
+                        minDate={data?.transactionDate}
+                        maxDate={new Date()}
+                      />
+                      {errors.reimburseDate && (
+                        <small className="danger-text">
+                          {errors.reimburseDate.message}
+                        </small>
+                      )}
+                    </div>
+                    <div className="col-12 col-md-6 text-start mb-1">
+                      <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 mt-1">
+                  {((nextStatusWithPermission.length > 0 &&
+                    !IsRejectedExpense) ||
+                    (IsRejectedExpense && isCreatedBy)) && (
+                    <>
+                      <Label className="form-label me-2 mb-0" required>
+                        Comment
+                      </Label>
+                      <textarea
+                        className="form-control form-control-sm"
+                        {...register("comment")}
+                        rows="2"
+                      />
+                      {errors.comment && (
+                        <small className="danger-text">
+                          {errors.comment.message}
+                        </small>
+                      )}
+                    </>
+                  )}
+
+                  {nextStatusWithPermission?.length > 0 &&
+                    (!IsRejectedExpense || isCreatedBy) && (
+                      <div className="text-end flex-wrap gap-2 my-2 mt-3">
+                        {nextStatusWithPermission.map((status, index) => (
+                          <button
+                            key={status.id || index}
+                            type="button"
+                            onClick={() => {
+                              setClickedStatusId(status.id);
+                              setValue("statusId", status.id);
+                              handleSubmit(onSubmit)();
+                            }}
+                            disabled={isPending || isFetching}
+                            className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
+                          >
+                            {isPending && clickedStatusId === status.id
+                              ? "Please Wait..."
+                              : status.displayName || status.name}
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                </div>
               </>
             )}
-
-            {nextStatusWithPermission?.length > 0 &&
-              (!IsRejectedExpense || isCreatedBy) && (
-                <div className="text-end flex-wrap gap-2 my-2 mt-3">
-                  {nextStatusWithPermission.map((status, index) => (
-                    <button
-                      key={status.id || index}
-                      type="button"
-                      onClick={() => {
-                      setClickedStatusId(status.id);
-                        setValue("statusId", status.id);
-                        handleSubmit(onSubmit)();
-                      }}
-                      disabled={isPending || isFetching}
-                      className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
-                    >
-                      {isPending && clickedStatusId === status.id
-                        ? "Please Wait..."
-                        : status.displayName || status.name}
-                    </button>
-                  ))}
-                </div>
-              )}
           </div>
-        </>
+        </div>
-      )}
 
-      <ExpenseStatusLogs data={data} />
+        <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>
+          </div>
+          <ExpenseStatusLogs data={data} />
+        </div>
+      </div>
     </form>
   );
 };

src/components/PaymentRequest/MakeExpense.jsx

@@ -0,0 +1,247 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import React from "react";
+import { useForm } from "react-hook-form";
+import {
+  DefaultRequestedExpense,
+  RequestedExpenseSchema,
+} from "./PaymentRequestSchema";
+import Label from "../common/Label";
+import { usePaymentMode } from "../../hooks/masterHook/useMaster";
+import { useCreatePaymentRequestExpense, useCreateRecurringExpense } from "../../hooks/useExpense";
+import Filelist from "../Expenses/Filelist";
+import { usePaymentRequestContext } from "../../pages/PaymentRequest/PaymentRequestPage";
+
+const MakeExpense = ({ onClose }) => {
+    const {isExpenseGenerate} = usePaymentRequestContext()
+  const {
+    PaymentModes,
+    loading: PaymentModeLoading,
+    error: PaymentModeError,
+  } = usePaymentMode();
+
+  const {
+    setValue,
+    register,
+    watch,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(RequestedExpenseSchema),
+    defaultValues: DefaultRequestedExpense,
+  });
+  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: "",
+          isActive: true,
+        };
+      })
+    );
+
+    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]);
+      reader.onerror = (error) => reject(error);
+    });
+  const removeFile = (index) => {
+   debugger
+    const newFiles = files.filter((_, i) => i !== index);
+      setValue("billAttachments", newFiles, { shouldValidate: true });
+  };
+
+  const { mutate: CreatedExpense, isPending } = useCreatePaymentRequestExpense(
+    () => {
+      handleClose();
+    }
+  );
+  const onSubmit = (formData) => {
+    let payload = {
+        ...formData,
+        paymentRequestId:isExpenseGenerate?.requestId
+    }
+    CreatedExpense(payload)
+  };
+
+  const handleClose = () => {
+    onClose();
+  };
+  return (
+    <div className="row px-2 py-3">
+      <form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
+           <h5 className="m-0">
+         Create New Expense
+      </h5>
+
+        <div className="row my-2 text-start">
+          <div className="col-md-6 mb-2">
+            <Label htmlFor="paymentModeId" className="form-label" required>
+              Payment Mode
+            </Label>
+            <select
+              className="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 htmlFor="statusId" className="form-label ">
+              GST Number
+            </label>
+            <input
+              type="text"
+              id="gstNumber"
+              className="form-control form-control-sm"
+              min="1"
+              {...register("gstNumber")}
+            />
+            {errors.gstNumber && (
+              <small className="danger-text">{errors.gstNumber.message}</small>
+            )}
+          </div>
+        </div>
+           <div className="col-md-6 text-start">
+            <Label htmlFor="location" className="form-label" required>
+              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 className="row my-2 text-start">
+          <div className="col-md-12">
+            <Label className="form-label" required>
+              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 && (
+              <Filelist
+                files={files}
+                removeFile={removeFile}
+                expenseToEdit={false}
+              />
+            )}
+
+            {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?.base64Data?.message,
+                    fileError?.documentId?.message)
+                  }
+                </div>
+              ))}
+          </div>
+        </div>
+
+        <div className="d-flex justify-content-end gap-3">
+          {" "}
+          <button
+            type="reset"
+            disabled={isPending}
+            onClick={handleClose}
+            className="btn btn-label-secondary btn-sm mt-3"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            className="btn btn-primary btn-sm mt-3"
+            disabled={isPending}
+          >
+            {isPending ? "Please Wait..." : "Submit"}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default MakeExpense;

src/components/PaymentRequest/PaymentRequestList.jsx

@@ -278,7 +278,7 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
                             )
                         )}
                         <td className="sticky-action-column bg-white">
-                          <div className="d-flex justify-content-center gap-2">
+                          <div className="d-flex flex-row gap-2">
                             <i
                               className="bx bx-show text-primary cursor-pointer"
                               onClick={() =>

src/components/PaymentRequest/PaymentRequestSchema.js

@@ -7,29 +7,27 @@ const ALLOWED_TYPES = [
   "image/jpg",
   "image/jpeg",
 ];
-export const PaymentRequestSchema = (expenseTypes,isItself) => {
+export const PaymentRequestSchema = (expenseTypes, isItself) => {
-  return z
+  return z.object({
-    .object({
+    title: z.string().min(1, { message: "Project is required" }),
-      title: z.string().min(1, { message: "Project is required" }),
+    projectId: z.string().min(1, { message: "Project is required" }),
-      projectId: z.string().min(1, { message: "Project is required" }),
+    expenseCategoryId: z
-      expenseCategoryId: z
+      .string()
-        .string()
+      .min(1, { message: "Expense Category is required" }),
-        .min(1, { message: "Expense Category is required" }),     
+    currencyId: z.string().min(1, { message: "Currency is required" }),
-      currencyId: z
+    dueDate: z.string().min(1, { message: "Date is required" }),
-        .string()
+    description: z.string().min(1, { message: "Description is required" }),
-        .min(1, { message: "Currency is required" }),     
+    payee: z.string().min(1, { message: "Supplier name is required" }),
-      dueDate: z.string().min(1, { message: "Date is required" }),
+    isAdvancePayment: z.boolean().optional().default(false),
-      description: z.string().min(1, { message: "Description is required" }),
+    amount: z.coerce
-      payee: z.string().min(1, { message: "Supplier name is required" }),
+      .number({
-      isAdvancePayment: z.boolean().optional(),
+        invalid_type_error: "Amount is required and must be a number",
-      amount: z.coerce
+      })
-        .number({
+      .min(1, "Amount must be Enter")
-          invalid_type_error: "Amount is required and must be a number",
+      .refine((val) => /^\d+(\.\d{1,2})?$/.test(val.toString()), {
-        })
+        message: "Amount must have at most 2 decimal places",
-        .min(1, "Amount must be Enter")
+      }),
-        .refine((val) => /^\d+(\.\d{1,2})?$/.test(val.toString()), {
+    
-          message: "Amount must have at most 2 decimal places",
-        }),
       billAttachments: z
         .array(
           z.object({
@@ -64,7 +62,7 @@ export const defaultPaymentRequest = {
   dueDate: "",
   projectId: "",
   expenseCategoryId: "",
-  isAdvancePayment:boolean,
+  isAdvancePayment: false,
   billAttachments: [],
 };
 
@@ -103,7 +101,9 @@ export const PaymentRequestActionScheam = (
       paymentRequestId: z.string().nullable().optional(),
       paidAt: z.string().nullable().optional(),
       paidById: z.string().nullable().optional(),
-
+      tdsPercentage: z.string().nullable().optional(),
+      baseAmount: z.string().nullable().optional(),
+      taxAmount: z.string().nullable().optional(),
     })
     .superRefine((data, ctx) => {
       if (isTransaction) {
@@ -121,15 +121,6 @@ export const PaymentRequestActionScheam = (
             message: "Transacion 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.paidById) {
           ctx.addIssue({
             code: z.ZodIssueCode.custom,
@@ -137,6 +128,20 @@ export const PaymentRequestActionScheam = (
             message: "Paid 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",
+          });
+        }
       }
     });
 };
@@ -144,8 +149,41 @@ export const PaymentRequestActionScheam = (
 export const defaultActionValues = {
   comment: "",
   statusId: "",
-
   paidTransactionId: null,
   paidAt: null,
   paidById: null,
+  tdsPercentage:"0",
+  baseAmount: null,
+  taxAmount:null,
+};
+
+export const RequestedExpenseSchema = z.object({
+  paymentModeId: z.string().min(1, { message: "Payment mode is required" }),
+  location: z.string().min(1, { message: "Location is required" }),
+  gstNumber: z.string().optional(),
+  billAttachments: z
+    .array(
+      z.object({
+        fileName: z.string().min(1, { message: "Filename is required" }),
+        base64Data: z.string().nullable(),
+        contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
+          message: "Only PDF, PNG, JPG, or JPEG files are allowed",
+        }),
+        documentId: z.string().optional(),
+        fileSize: z.number().max(MAX_FILE_SIZE, {
+          message: "File size must be less than or equal to 5MB",
+        }),
+        description: z.string().optional(),
+        isActive: z.boolean().default(true),
+      })
+    )
+    .nonempty({ message: "At least one file attachment is required" }),
+});
+
+export const DefaultRequestedExpense = {
+  paymentModeId: "",
+  location: "",
+  gstNumber: "",
+  // amount:"",
+  billAttachments: [],
 };

src/components/PaymentRequest/ViewPaymentRequest.jsx

@@ -42,7 +42,8 @@ const ViewPaymentRequest = ({ requestId }) => {
 
   const IsReview = useHasUserPermission(REVIEW_EXPENSE);
   const [imageLoaded, setImageLoaded] = useState({});
-  const { setDocumentView } = usePaymentRequestContext();
+  const { setDocumentView, setModalSize, setVieRequest, setIsExpenseGenerate } =
+    usePaymentRequestContext();
   const ActionSchema =
     ExpenseActionScheam(IsPaymentProcess, data?.createdAt) ?? z.object({});
   const navigate = useNavigate();
@@ -109,10 +110,16 @@ const ViewPaymentRequest = ({ requestId }) => {
   const handleImageLoad = (id) => {
     setImageLoaded((prev) => ({ ...prev, [id]: true }));
   };
-
+  const handleExpense = () => {
+    setIsExpenseGenerate({ IsOpen: true, requestId: requestId });
+    setVieRequest({ IsOpen: true, requestId: requestId });
+  };
   return (
-    <form className="container px-3" onSubmit={handleSubmit(onSubmit)}>
+    <form
-      <div className="col-12 mb-1">
+      className="container px-3 py-2 py-md-0"
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <div className="col-12 mb-2 text-center ">
         <h5 className="fw-semibold m-0">Payment Request Details</h5>
         <hr />
       </div>
@@ -180,7 +187,10 @@ const ViewPaymentRequest = ({ requestId }) => {
                   Amount :
                 </label>
                 <div className="text-muted">
-                  {formatCurrency(data?.amount, data?.currency?.currencyCode)}
+                  {formatFigure(data?.amount, {
+                    type: "currency",
+                    currency: data?.currency?.currencyCode,
+                  })}
                 </div>
               </div>
             </div>
@@ -331,42 +341,13 @@ const ViewPaymentRequest = ({ requestId }) => {
               </label>
 
               <div className="d-flex flex-wrap gap-2">
-                {data?.documents?.length > 0 ? (
+                {data?.attachments?.length > 0 ? (
-                  data?.documents?.map((doc) => {
+                  <FilelistView
-                    const isImage = doc?.contentType?.includes("image");
+                    files={data?.attachments}
-
+                    viewFile={setDocumentView}
-                    return (
+                  />
-                      <div
-                        key={doc.documentId}
-                        className="border rounded  hover-scale p-2 d-flex flex-column align-items-center"
-                        style={{
-                          width: "80px",
-                          cursor: isImage ? "pointer" : "default",
-                        }}
-                        onClick={() => {
-                          if (isImage) {
-                            setDocumentView({
-                              IsOpen: true,
-                              Image: doc.preSignedUrl,
-                            });
-                          }
-                        }}
-                      >
-                        <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>
-                    );
-                  })
                 ) : (
-                  <p className="m-0">No Attachment</p>
+                  <p className="m-0 text-secondary">No Attachment</p>
                 )}
               </div>
             </div>
@@ -407,7 +388,7 @@ const ViewPaymentRequest = ({ requestId }) => {
               </div>
             )}
 
-            {Array.isArray(data?.nextStatus) && data?.nextStatus.length > 0 && (
+            {Array.isArray(data?.nextStatus) && data?.nextStatus.length > 0 ? (
               <>
                 {IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
                   <div className="row">
@@ -424,7 +405,7 @@ const ViewPaymentRequest = ({ requestId }) => {
                         </small>
                       )}
                     </div>
-                    <div className="col-12 col-md-6 text-start">
+                    <div className="col-12 col-md-6 text-start mb-1">
                       <label className="form-label">Transaction Date </label>
                       <DatePicker
                         name="paidAt"
@@ -446,6 +427,49 @@ const ViewPaymentRequest = ({ requestId }) => {
                         projectId={null}
                       />
                     </div>
+                    <div className="col-12 col-md-6 text-start mb-1">
+                      <Label className="form-label">TDS Percentage</Label>
+                      <input
+                        type="text"
+                        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 mb-1">
+                      <Label className="form-label" required>
+                        Base Amount
+                      </Label>
+                      <input
+                        type="text"
+                        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 mb-1">
+                      <Label className="form-label" required>
+                        Tax Amount
+                      </Label>
+                      <input
+                        type="text"
+                        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">
@@ -493,11 +517,26 @@ const ViewPaymentRequest = ({ requestId }) => {
                     )}
                 </div>
               </>
+            ) : !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 className="col-12 col-sm-6 col-md-4">
+        <div className=" col-sm-12  my-md-0 border-top border-md-none col-md-5">
-          <ExpenseStatusLogs data={data} />
+          <div className="d-flex mb-2 py-1">
+            <i className="bx bx-time-five me-2 "></i>{" "}
+            <p className="fw-medium">TimeLine</p>
+          </div>
+          <PaymentStatusLogs data={data} />
         </div>
       </div>
     </form>

src/components/common/Avatar.jsx

@@ -52,7 +52,7 @@ const Avatar = ({ firstName, lastName, size = "sm", classAvatar }) => {
   return (
     <div className="avatar-wrapper p-1">
      <div className={`avatar avatar-${size} me-2 ${classAvatar}`}>
-        <span className={`avatar-initial rounded-circle ${bgClass}`}>
+        <span className={`avatar-initial rounded-circle text-white ${bgClass}`}>
           {generateAvatarText(firstName, lastName)}
         </span>
       </div>

src/components/common/EmployeeSearchInput.jsx

@@ -112,7 +112,7 @@ const EmployeeSearchInput = ({
         </ul>
       )}
 
-      {error && <small className="text-danger">{error.message}</small>}
+      {error && <small className="danger-text">{error.message}</small>}
     </div>
   );
 };

src/components/common/Loader.jsx

@@ -26,7 +26,7 @@ export const SpinnerLoader = ()=>{
               <div className="spinner-border text-primary mb-3" role="status">
                 <span className="visually-hidden">Loading...</span>
               </div>
-              <p className="text-secondary mb-0">Loading attendance data...</p>
+              <p className="text-secondary mb-0">Loading  data... Please wait</p>
             </div>
   )
 }

src/hooks/useExpense.js

@@ -358,8 +358,51 @@ export const useActionOnPaymentRequest = (onSuccessCallBack) => {
     },
   });
 };
-//#endregion
+export const useDeletePaymentRequest = ()=>{
+  const queryClient = useQueryClient();
 
+  return useMutation({
+    mutationFn: async (payload) => {
+   
+      return response.data;
+    },
+    onSuccess: (updatedExpense, variables) => {
+      showToast("Request processed successfully.", "success");
+
+      queryClient.invalidateQueries({queryKey:["paymentRequestList"]})
+
+      if (onSuccessCallBack) onSuccessCallBack();
+    },
+    onError: (error) => {
+      showToast(
+        error.response.data.message ||
+          "Something went wrong.Please try again later.",
+        "error"
+      );
+    },
+  });
+}
+export const useCreatePaymentRequestExpense = (onSuccessCallBack) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (payload) => {
+      await ExpenseRepository.CreatePaymentRequestExpense(payload);
+    },
+    
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["Expenses"] });
+      queryClient.invalidateQueries({queryKey:["paymentRequest",variables.paymentRequestId]})
+      showToast("Expense Created Successfully", "success");
+      if (onSuccessCallBack) onSuccessCallBack();
+    },
+    onError: (error) => {
+      showToast(
+        error.message || "Something went wrong please try again !",
+        "error"
+      );
+    },
+  });
+};
 export const usePaymentRequestFilter = () => {
   return useQuery({
     queryKey: ["PaymentRequestFilter"],
@@ -371,13 +414,15 @@ export const usePaymentRequestFilter = () => {
       
   });
 };
+//#endregion
+
+
 
 //#region Advance Payment
 export const useExpenseTransactions = (employeeId)=>{
  return useQuery({
     queryKey:["transaction",employeeId],
     queryFn:async()=> {
-      debugger
       const resp =  await ExpenseRepository.GetTranctionList(employeeId);
         return  resp.data
     },

src/pages/AdvancePayment/AdvancePaymentPage.jsx

@@ -23,16 +23,16 @@ const AdvancePaymentPage = () => {
           { label: "Advance Payment" },
         ]}
       />
-      <div className="card px-2 py-2 page-min-h">
+      <div className="card px-4 py-2 page-min-h ">
         <div className="row">
-          <div className="col-12 ">
+          <div className="col-12 col-md-4">
-           <div className="d-block w-max w-25 text-start" >
+           <div className="d-block  text-start" >
-            <Label>Search Employee</Label>
              <EmployeeSearchInput
               control={control}
               name="employeeId"
               projectId={null}
               forAll={true}
+              placeholder={"Enter Employee Name"}
             />
            </div>
           </div>

src/pages/PaymentRequest/PaymentRequestPage.jsx

@@ -8,6 +8,8 @@ import PaymentRequestList from "../../components/PaymentRequest/PaymentRequestLi
 import PaymentRequestFilterPanel from "../../components/PaymentRequest/PaymentRequestFilterPanel";
 import { defaultPaymentRequestFilter,SearchPaymentRequestSchema } from "../../components/PaymentRequest/PaymentRequestSchema";
 import ViewPaymentRequest from "../../components/PaymentRequest/ViewPaymentRequest";
+import PreviewDocument from "../../components/Expenses/PreviewDocument";
+import MakeExpense from "../../components/PaymentRequest/MakeExpense";
 
 export const PaymentRequestContext = createContext();
 export const usePaymentRequestContext = () => {
@@ -25,12 +27,22 @@ const PaymentRequestPage = () => {
   const [ViewRequest,setVieRequest] = useState({view:false,requestId:null})
   const { setOffcanvasContent, setShowTrigger } = useFab();
   const [filters, setFilters] = useState(defaultPaymentRequestFilter);
-
+   const [ViewDocument, setDocumentView] = useState({
+      IsOpen: false,
+      Image: null,
+    });
+    const [isExpenseGenerate,setIsExpenseGenerate] = useState({IsOpen: null,
+    RequestId: null,})
+    const [modalSize,setModalSize] = useState("md")
   const [search, setSearch] = useState("");
 
   const contextValue = {
     setManageRequest,
-    setVieRequest
+    setVieRequest,
+    setDocumentView,
+    setModalSize,
+    setIsExpenseGenerate,
+    isExpenseGenerate
   };
 
   useEffect(() => {
@@ -124,7 +136,27 @@ const PaymentRequestPage = () => {
             modalType="top"
             closeModal={() => setVieRequest({ requestId: null, view: false })}
           >
-            <ViewPaymentRequest  requestId={ViewRequest?.requestId}/>
+            <ViewPaymentRequest  requestId={ViewRequest?.requestId} />
+          </GlobalModel>
+        )}
+         {isExpenseGenerate.IsOpen && (
+          <GlobalModel
+            isOpen
+            size="md"
+            closeModal={() => setIsExpenseGenerate({IsOpen:false, requestId: null})}
+          >
+            <MakeExpense   onClose={() => setIsExpenseGenerate({IsOpen:false, requestId: null})} />
+          </GlobalModel>
+        )}
+
+        {ViewDocument.IsOpen && (
+          <GlobalModel
+            isOpen
+            size="md"
+            key={ViewDocument.Image ?? "doc"}
+            closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
+          >
+            <PreviewDocument imageUrl={ViewDocument.Image} />
           </GlobalModel>
         )}
         

src/repositories/ExpsenseRepository.jsx

@@ -21,11 +21,17 @@ const ExpenseRepository = {
     const payloadJsonString = JSON.stringify(filter);
     return api.get(`/api/Expense/get/payment-requests/list?isActive=${isActive}&pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`);
   },
-  CreatePaymentRequest: (data) => api.post("/api/expense/payment-request/create", data),
+  CreatePaymentRequest: (data) =>
-  UpdatePaymentRequest: (id, data) => api.put(`/api/Expense/payment-request/edit/${id}`, data),
+    api.post("/api/expense/payment-request/create", data),
-  GetPaymentRequest: (id) => api.get(`/api/Expense/get/payment-request/details/${id}`),
+  UpdatePaymentRequest: (id, data) =>
-  GetPaymentRequestFilter: () => api.get('/api/Expense/payment-request/filter'),
+    api.put(`/api/Expense/payment-request/edit/${id}`, data),
-  ActionOnPaymentRequest: (data) => api.post('/api/Expense/payment-request/action', data),
+  GetPaymentRequest: (id) =>
+    api.get(`/api/Expense/get/payment-request/details/${id}`),
+  GetPaymentRequestFilter: () => api.get("/api/Expense/payment-request/filter"),
+  ActionOnPaymentRequest: (data) =>
+    api.post("/api/Expense/payment-request/action", data),
+  DeletePaymentRequest:()=>api.get("delete here come"),
+  CreatePaymentRequestExpense:(data)=>api.post('/api/Expense/payment-request/expense/create',data),
   //#endregion
 
   //#region Recurring Expense
@@ -35,10 +41,10 @@ const ExpenseRepository = {
    GetRecurringExpense: (id) => api.get(`/api/Expense/get/recurring-payment/details/${id}`),
   //#endregion
   
-
   //#region Advance Payment
-  GetTranctionList: () => api.get(`/get/transactions/${employeeId}`)
+  GetTranctionList: (employeeId)=>api.get(`/api/Expense/get/transactions/${employeeId}`),
   //#endregion
-}
+
+};
 
 export default ExpenseRepository;

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