created and display expenses list

Reviewed-on: #269
Merged

src/components/Expenses/CreateExpense.jsx

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

src/components/Expenses/ExpenseList.jsx

@@ -1,40 +1,68 @@
-import React from 'react'
+import React, { useState } from "react";
+import { useExpenseList } from "../../hooks/useExpense";
+import Avatar from "../common/Avatar";
+import { useExpenseContext } from "../../pages/Expense/ExpensePage";
+import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils";
 
 const ExpenseList = () => {
+  const { setViewExpense } = useExpenseContext();
+  const [currentPage, setCurrentPage] = useState(1);
+  const pageSize = 10;
+
+  const filter = {
+    projectIds: [],
+    statusIds: [],
+    createdByIds: [],
+    paidById: [],
+    startDate: null,
+    endDate: null,
+  };
+
+  const { data, isLoading, isError } = useExpenseList(5, currentPage, filter);
+
+  if (isLoading) return <div>Loading...</div>;
+  const items = data ?? [];
+  const totalPages = data?.totalPages ?? 1;
+  const hasMore = currentPage < totalPages;
+
+  const paginate = (page) => {
+    if (page >= 1 && page <= totalPages) {
+      setCurrentPage(page);
+    }
+  };
   return (
     <div className="card ">
       <div className="card-datatable table-responsive">
         <div
           id="DataTables_Table_0_wrapper"
-                  className="dataTables_wrapper dt-bootstrap5 no-footer"
+          className="dataTables_wrapper no-footer"
         >
-
           <table
             className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
             id="DataTables_Table_0"
             aria-describedby="DataTables_Table_0_info"
-           
+            style={{ width: "100%" }}
           >
             <thead>
-                      <tr className=''>
+              <tr>
                 <th
                   className="sorting sorting_desc"
                   tabIndex="0"
                   aria-controls="DataTables_Table_0"
                   rowSpan="1"
-                          colSpan="3"
-                          aria-label="User: activate to sort column ascending"
+                  colSpan="2"
+                  aria-label="Date: activate to sort column ascending"
                   aria-sort="descending"
                 >
-                          <div className="text-start ms-6">Date</div>
+                  <div className="text-start ms-6">Date Time</div>
                 </th>
                 <th
-                          className="sorting sorting_desc  d-sm-table-cell"
+                  className="sorting sorting_desc d-none d-sm-table-cell"
                   tabIndex="0"
                   aria-controls="DataTables_Table_0"
                   rowSpan="1"
                   colSpan="1"
-                          aria-label="User: activate to sort column ascending"
+                  aria-label="Expense Type: activate to sort column ascending"
                   aria-sort="descending"
                 >
                   <div className="text-start ms-5">Expense Type</div>
@@ -45,10 +73,10 @@ const ExpenseList = () => {
                   aria-controls="DataTables_Table_0"
                   rowSpan="1"
                   colSpan="1"
-                          aria-label="User: activate to sort column ascending"
+                  aria-label="Payment Mode: activate to sort column ascending"
                   aria-sort="descending"
                 >
-                          <div className="text-start ">Payment mode</div>
+                  <div className="text-start ms-5">Payment Mode</div>
                 </th>
                 <th
                   className="sorting sorting_desc d-none d-sm-table-cell"
@@ -56,21 +84,10 @@ const ExpenseList = () => {
                   aria-controls="DataTables_Table_0"
                   rowSpan="1"
                   colSpan="1"
-                          aria-label="User: activate to sort column ascending"
+                  aria-label="Paid By: activate to sort column ascending"
                   aria-sort="descending"
                 >
-                          <div className="text-start ">Paid By</div>
-                        </th>
-                        
-                            <th
-                          className="sorting"
-                          tabIndex="0"
-                          aria-controls="DataTables_Table_0"
-                          rowSpan="1"
-                          colSpan="1"
-                          aria-label="Billing: activate to sort column ascending"
-                        >
-                          Status
+                  <div className="text-start ms-5">Paid By</div>
                 </th>
                 <th
                   className="sorting d-none d-md-table-cell"
@@ -78,21 +95,156 @@ const ExpenseList = () => {
                   aria-controls="DataTables_Table_0"
                   rowSpan="1"
                   colSpan="1"
-                          aria-label="Plan: activate to sort column ascending"
+                  aria-label="Amount: activate to sort column ascending"
                 >
                   Amount
                 </th>
-                    
+                <th
+                  className="sorting"
+                  tabIndex="0"
+                  aria-controls="DataTables_Table_0"
+                  rowSpan="1"
+                  colSpan="1"
+                  aria-label="Status: activate to sort column ascending"
+                >
+                  Status
+                </th>
+                <th
+                  className="sorting"
+                  tabIndex="0"
+                  aria-controls="DataTables_Table_0"
+                  rowSpan="1"
+                  colSpan="1"
+                  aria-label="Status: activate to sort column ascending"
+                >
+                  Action
+                </th>
               </tr>
             </thead>
             <tbody>
+              {isLoading && (
+                <tr>
+                  <td colSpan={7} className="text-center py-3">
+                    Loading...
+                  </td>
+                </tr>
+              )}
 
+              {!isLoading && items.length === 0 && (
+                <tr>
+                  <td colSpan={7} className="text-center py-3">
+                    No expenses found.
+                  </td>
+                </tr>
+              )}
+
+              {!isLoading &&
+                items.map((expense) => (
+                  <tr key={expense.id} className="odd">
+                    <td className="sorting_1" colSpan={2}>
+                      <div className="d-flex justify-content-start align-items-center user-name ms-6">
+                        <span>{formatUTCToLocalTime(expense.createdAt)}</span>
+                      </div>
+                    </td>
+                    <td className="text-start d-none d-sm-table-cell ms-5">
+                      {expense.expensesType?.name || "N/A"}
+                    </td>
+                    <td className="text-start d-none d-sm-table-cell ms-5">
+                      {expense.paymentMode?.name || "N/A"}
+                    </td>
+                    <td className="text-start d-none d-sm-table-cell ms-5">
+                      <div className="d-flex align-items-center">
+                        <Avatar
+                          size="xs"
+                          classAvatar="m-0 "
+                          firstName={expense.paidBy?.firstName}
+                          lastName={expense.paidBy?.lastName}
+                        />
+                        <span>
+                          {`${expense.paidBy?.firstName ?? ""} ${
+                            expense.paidBy?.lastName ?? ""
+                          }`.trim() || "N/A"}
+                        </span>
+                      </div>
+                    </td>
+                    <td className="d-none d-md-table-cell">{expense.amount}</td>
+                    <td>
+                      <span
+                        style={{
+                          backgroundColor: expense.status?.color || "#e2e3e5",
+                          color: "#ffff",
+                          padding: "2px 8px",
+                          borderRadius: "0.375rem",
+                          fontSize: "0.75rem",
+                          fontWeight: 500,
+                        }}
+                      >
+                        {expense.status?.name || "Unknown"}
+                      </span>
+                    </td>
+                    <td>
+                      <span
+                        className="cursor-pointer"
+                        onClick={() =>
+                          setViewExpense({ expenseId: expense.id, view: true })
+                        }
+                      >
+                        <i className="bx bx-show "></i>
+                      </span>
+                    </td>
+                  </tr>
+                ))}
             </tbody>
           </table>
         </div>
-                </div>
-                </div>
-  )
-}
+        {!isLoading && items.length > 0 && totalPages > 1 && (
+          <nav aria-label="Page ">
+            <ul className="pagination pagination-sm justify-content-end py-1 mx-1">
+              <li
+                className={`page-item ${currentPage === 1 ? "disabled" : ""}`}
+              >
+                <button
+                  className="page-link btn-xs"
+                  onClick={() => paginate(currentPage - 1)}
+                >
+                  &laquo;
+                </button>
+              </li>
 
-export default ExpenseList
+              {[...Array(totalPages)].map((_, index) => (
+                <li
+                  key={index}
+                  className={`page-item ${
+                    currentPage === index + 1 ? "active" : ""
+                  }`}
+                >
+                  <button
+                    className="page-link"
+                    onClick={() => paginate(index + 1)}
+                  >
+                    {index + 1}
+                  </button>
+                </li>
+              ))}
+
+              <li
+                className={`page-item ${
+                  currentPage === totalPages ? "disabled" : ""
+                }`}
+              >
+                <button
+                  className="page-link"
+                  onClick={() => paginate(currentPage + 1)}
+                >
+                  &raquo;
+                </button>
+              </li>
+            </ul>
+          </nav>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ExpenseList;

src/components/Expenses/ExpenseSchema.js

@@ -1,27 +1,36 @@
-import { z } from 'zod';
+import { z } from "zod";
 
 const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
 const ALLOWED_TYPES = [
-  'application/pdf',
-  'image/png',
-  'image/jpg',
-  'image/jpeg',
+  "application/pdf",
+  "image/png",
+  "image/jpg",
+  "image/jpeg",
 ];
 
-export const ExpenseSchema = z.object({
+
+export const ExpenseSchema = (expenseTypes) => {
+  return z
+    .object({
       projectId: z.string().min(1, { message: "Project is required" }),
       expensesTypeId: z.string().min(1, { message: "Expense type is required" }),
       paymentModeId: z.string().min(1, { message: "Payment mode is required" }),
       paidById: z.string().min(1, { message: "Employee name is required" }),
       transactionDate: z.string().min(1, { message: "Date is required" }),
-  transactionId: z.string().optional(), // if optional, else use .min(1)
+      transactionId: z.string().optional(),
       description: z.string().min(1, { message: "Description is required" }),
       location: z.string().min(1, { message: "Location is required" }),
       supplerName: z.string().min(1, { message: "Supplier name is required" }),
-  amount: z.number().min(1, { message: "Amount must be at least 1" }).max(10000, { message: "Amount must not exceed 10,000" }),
-  noOfPersons: z.number().min(1, { message: "1 Employee at least required" }),
-  statusId: z.string().min(1, { message: "Please select status" }),
-
+      amount: z
+        .coerce
+        .number({ invalid_type_error: "Amount is required and must be a number" })
+        .min(1, "Amount must be Enter")
+        .refine((val) => /^\d+(\.\d{1,2})?$/.test(val.toString()), {
+          message: "Amount must have at most 2 decimal places",
+        }),
+      noOfPersons: z.coerce
+  .number()
+  .optional(),
       billAttachments: z
         .array(
           z.object({
@@ -37,30 +46,24 @@ export const ExpenseSchema = z.object({
           })
         )
         .nonempty({ message: "At least one file attachment is required" }),
+    })
+    .refine(
+      (data) => {
+        return !data.projectId || (data.paidById && data.paidById.trim() !== "");
+      },
+      {
+        message: "Please select who paid (employee)",
+        path: ["paidById"],
+      }
+    )
+    .superRefine((data, ctx) => {
+      const expenseType = expenseTypes.find((et) => et.id === data.expensesTypeId);
+      if (expenseType?.noOfPersonsRequired && (!data.noOfPersons || data.noOfPersons < 1)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "No. of Persons is required and must be at least 1",
+          path: ["noOfPersons"],
         });
-
-
-let payload=
-{
-"projectId": "2618f2ef-2823-11f0-9d9e-bc241163f504",
-"expensesTypeId": "dd120bc4-ab0a-45ba-8450-5cd45ff221ca",
-"paymentModeId": "ed667353-8eea-4fd1-8750-719405932480",
-"paidById": "08dda7d8-014e-443f-858d-a55f4b484bc4",
-"transactionDate": "2025-07-12T09:56:54.122Z",
-"transactionId": "string",
-"description": "string",
-"location": "string",
-"supplerName": "string",
-"amount": 390,
-"noOfPersons": 0,
-"statusId": "297e0d8f-f668-41b5-bfea-e03b354251c8",
-"billAttachments": [
-{
-"fileName": "string",
-"base64Data": "string",
-"contentType": "string",
-"fileSize": 0,
-"description": "string"
-}
-]
       }
+    });
+};

src/components/Expenses/ViewExpense.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { useExpense } from '../../hooks/useExpense'
+
+const ViewExpense = ({ExpenseId}) => {
+  console.log(ExpenseId)
+  const {} = useExpense(ExpenseId)
+  return (
+    <div className='container'>
+        
+    </div>
+  )
+}
+
+export default ViewExpense

src/components/master/MasterModal.jsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-
 import CreateRole from "./CreateRole";
 import DeleteMaster from "./DeleteMaster";
 import EditRole from "./EditRole";
@@ -19,66 +18,41 @@ import EditContactCategory from "./EditContactCategory";
 import EditContactTag from "./EditContactTag";
 import { useDeleteMasterItem } from "../../hooks/masterHook/useMaster";
 
+
 const MasterModal = ({ modaldata, closeModal }) => {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const { mutate: deleteMasterItem, isPending } = useDeleteMasterItem();
 
-  // const handleSelectedMasterDeleted = async () =>
-  // {
-  //   debugger
-  //   const deleteFn = MasterRespository[modaldata.masterType];
-  //   if (!deleteFn) {
-  //     showToast(`No delete strategy defined for master type`,"error");
-  //     return false;
-  //   }
-  //    try
-  //    {
-  //      const response = await deleteFn( modaldata?.item?.id );
-  //      const selected_cachedData = getCachedData( modaldata?.masterType );
-  //      const updated_master =  selected_cachedData?.filter(item => item.id !== modaldata?.item.id);
-  //      cacheData( modaldata?.masterType, updated_master )
-
-  //      showToast(`${modaldata?.masterType} is deleted successfully`, "success");
-  //      handleCloseDeleteModal()
-
-  //    } catch ( error )
-  //    {
-  //      const message = error.response.data.message || error.message || "Error occured api during call"
-  //      showToast(message, "success");
-  //   }
-  // }
-
   const handleSelectedMasterDeleted = () => {
-    if (!modaldata?.masterType || !modaldata?.item?.id) {
+    const { masterType, item, validateFn } = modaldata || {};
+    if (!masterType || !item?.id) {
       showToast("Missing master type or item", "error");
       return;
     }
+
     deleteMasterItem(
-      {
-        masterType: modaldata.masterType,
-        item: modaldata.item,
-        validateFn: modaldata.validateFn, // optional
-      },
-      {
-        onSuccess: () => {
-          handleCloseDeleteModal();
-        },
-      }
+      { masterType, item, validateFn },
+      { onSuccess: handleCloseDeleteModal }
     );
   };
 
+  const handleCloseDeleteModal = () => {
+    setIsDeleteModalOpen(false);
+    closeModal();
+  };
+
   useEffect(() => {
     if (modaldata?.modalType === "delete") {
       setIsDeleteModalOpen(true);
     }
   }, [modaldata]);
 
-  const handleCloseDeleteModal = () => {
-    setIsDeleteModalOpen(false);
+  if (!modaldata?.modalType) {
     closeModal();
-  };
+    return null;
+  }
 
-  if (modaldata?.modalType === "delete" && isDeleteModalOpen) {
+  if (modaldata.modalType === "delete" && isDeleteModalOpen) {
     return (
       <div
         className="modal fade show"
@@ -90,86 +64,63 @@ const MasterModal = ({ modaldata, closeModal }) => {
         <ConfirmModal
           type="delete"
           header={`Delete ${modaldata.masterType}`}
-          message={"Are you sure you want delete?"}
+          message="Are you sure you want delete?"
           onSubmit={handleSelectedMasterDeleted}
           onClose={handleCloseDeleteModal}
         />
       </div>
     );
   }
+
+  const renderModalContent = () => {
+    const { modalType, item, masterType } = modaldata;
+
+    const modalComponents = {
+      "Application Role": <CreateRole masmodalType={masterType} onClose={closeModal} />,
+      "Edit-Application Role": <EditRole master={modaldata} onClose={closeModal} />,
+      "Job Role": <CreateJobRole onClose={closeModal} />,
+      "Edit-Job Role": <EditJobRole data={item} onClose={closeModal} />,
+      "Activity": <CreateActivity onClose={closeModal} />,
+      "Edit-Activity": <EditActivity activityData={item} onClose={closeModal} />,
+      "Work Category": <CreateWorkCategory onClose={closeModal} />,
+      "Edit-Work Category": <EditWorkCategory data={item} onClose={closeModal} />,
+      "Contact Category": <CreateCategory data={item} onClose={closeModal} />,
+      "Edit-Contact Category": <EditContactCategory data={item} onClose={closeModal} />,
+      "Contact Tag": <CreateContactTag data={item} onClose={closeModal} />,
+      "Edit-Contact Tag": <EditContactTag data={item} onClose={closeModal} />,
+    };
+
+    return modalComponents[modalType] || null;
+  };
+
+  const isLargeModal = ["Application Role", "Edit-Application Role"].includes(
+    modaldata.modalType
+  );
+
   return (
     <div
-      className="modal fade"
+      className="modal fade show"
       id="master-modal"
       tabIndex="-1"
-      aria-hidden="true"
       role="dialog"
+      aria-hidden="true"
       aria-labelledby="modalToggleLabel"
+      style={{ display: "block" }}
     >
-      <div
-        className={`modal-dialog mx-sm-auto mx-1 ${
-          ["Application Role", "Edit-Application Role"].includes(
-            modaldata?.modalType
-          )
-            ? "modal-lg"
-            : "modal-md"
-        } modal-simple`}
-      >
+      <div className={`modal-dialog mx-sm-auto mx-1 ${isLargeModal ? "modal-lg" : "modal-md"} modal-simple`}>
         <div className="modal-content">
           <div className="modal-body p-sm-4 p-0">
             <div className="d-flex justify-content-between">
-              <h6>{`${modaldata?.modalType} `}</h6>
+              <h6>{modaldata?.modalType}</h6>
               <button
                 type="button"
                 className="btn-close"
                 data-bs-dismiss="modal"
                 aria-label="Close"
                 onClick={closeModal}
-              ></button>
+              />
             </div>
-
-            {modaldata.modalType === "Application Role" && (
-              <CreateRole
-                masmodalType={modaldata.masterType}
-                onClose={closeModal}
-              />
-            )}
-            {modaldata.modalType === "Edit-Application Role" && (
-              <EditRole master={modaldata} onClose={closeModal} />
-            )}
-            {modaldata.modalType === "Job Role" && (
-              <CreateJobRole onClose={closeModal} />
-            )}
-            {modaldata.modalType === "Edit-Job Role" && (
-              <EditJobRole data={modaldata.item} onClose={closeModal} />
-            )}
-            {modaldata.modalType === "Activity" && (
-              <CreateActivity onClose={closeModal} />
-            )}
-            {modaldata.modalType === "Edit-Activity" && (
-              <EditActivity
-                activityData={modaldata.item}
-                onClose={closeModal}
-              />
-            )}
-            {modaldata.modalType === "Work Category" && (
-              <CreateWorkCategory onClose={closeModal} />
-            )}
-            {modaldata.modalType === "Edit-Work Category" && (
-              <EditWorkCategory data={modaldata.item} onClose={closeModal} />
-            )}
-            {modaldata.modalType === "Contact Category" && (
-              <CreateCategory data={modaldata.item} onClose={closeModal} />
-            )}
-            {modaldata.modalType === "Edit-Contact Category" && (
-              <EditContactCategory data={modaldata.item} onClose={closeModal} />
-            )}
-            {modaldata.modalType === "Contact Tag" && (
-              <CreateContactTag data={modaldata.item} onClose={closeModal} />
-            )}
-            {modaldata.modalType === "Edit-Contact Tag" && (
-              <EditContactTag data={modaldata.item} onClose={closeModal} />
-            )}
+            {renderModalContent()}
           </div>
         </div>
       </div>

src/data/masters.js

@@ -1,153 +1,157 @@
 // it important ------
-export const mastersList = [ {id: 1, name: "Application Role"}, {id: 2, name: "Job Role"}, {id: 3, name: "Activity"},{id: 4, name:"Work Category"},{id:5,name:"Contact Category"},{id:6,name:"Contact Tag"}]
+export const mastersList = [
+  { id: 1, name: "Application Role" },
+  { id: 2, name: "Job Role" },
+  { id: 3, name: "Activity" },
+  { id: 4, name: "Work Category" },
+  { id: 5, name: "Contact Category" },
+  { id: 6, name: "Contact Tag" },
+  { id: 7, name: "Expense Type" },
+  { id: 8, name: "Payment Mode" },
+  { id: 9, name: "Expense Status" },
+];
 // -------------------
 
-export const dailyTask = [
-    {
-        id:1,
-        project:{
-            projectName:"Project Name1",
-            building:"buildName1",
-            floor:"floorName1",
-            workArea:"workarea1"
-        },
-        target:80,
-        employees:[
-            {
-                id:1,
-                name:"Vishal Patil",
-                role:"helper"
-            },
-            {
-                id:202,
-                name:"Vishal Patil",
-                role:"helper"
-            },
-            {
-                id:101,
-                name:"Kushal Patil",
-                role:"Engineer"
-            }
-        ]
-        
-    },
-    {
-        id:2,
-        project:{
-            projectName:"Project Name1",
-            building:"buildName1",
-            floor:"floorName1",
-            workArea:"workarea1"
-        },
-        target:90,
-        employees:[
-            {
-                id:1,
-                name:"Vishal Patil",
-                role:"welder"
-            },
-            {
-                id:202,
-                name:"Vishal Patil",
-                role:"welder"
-            },
-            {
-                id:101,
-                name:"Kushal Patil",
-                role:"Site Engineer"
-            }
-        ]
-        
-    }
-]
-
-
-
-export const jobRoles =[
-    {
-        id:1,
-        name:"Project Manager"
-    },
-    {
-        id:2,
-        name:"Software Developer"
-    },
-    {
-        id:3,
-        name:"Estimation Engineer"
-    },
-    {
-        id:4,
-        name:"Designer"
-    },
-    {
-        id:5,
-        name:"Site Engineer"
-    }
-]
-
-export const employee =[
-    {
-        id:1,
-        FirtsName:"Pramod",
-        LastName:"Mahajan",
-        JobRoleId:2,
-    },
-    {
-        id:2,
-        FirtsName:"Akahsy",
-        LastName:"Patil",
-        JobRoleId:1,
-    },
-    {
-        id:3,
-        FirtsName:"janvi",
-        LastName:"Potdar",
-        JobRoleId:3,
-    },
-    {
-        id:4,
-        FirtsName:"Aboli",
-        LastName:"Patil",
-        JobRoleId:2,
-    },
-    {
-        id:5,
-        FirtsName:"Shubham",
-        LastName:"Tamboli",
-        JobRoleId:1,
-    },
-    {
-        id:6,
-        FirtsName:"Alwin",
-        LastName:"Joy",
-        JobRoleId:4,
-    },
-    {
-        id:7,
-        FirtsName:"John",
-        LastName:"kwel",
-        JobRoleId:4,
-    },
-    {
-        id:8,
-        FirtsName:"Gita",
-        LastName:"shaha",
-        JobRoleId:1,
-    },{
-        id:9,
-        FirtsName:"Pratik",
-        LastName:"Joshi",
-        JobRoleId:5,
-    },
-    {
-        id:10,
-        FirtsName:"Nikil",
-        LastName:"Patil",
-        JobRoleId:5,
-    }
-]
+// export const dailyTask = [
+//     {
+//         id:1,
+//         project:{
+//             projectName:"Project Name1",
+//             building:"buildName1",
+//             floor:"floorName1",
+//             workArea:"workarea1"
+//         },
+//         target:80,
+//         employees:[
+//             {
+//                 id:1,
+//                 name:"Vishal Patil",
+//                 role:"helper"
+//             },
+//             {
+//                 id:202,
+//                 name:"Vishal Patil",
+//                 role:"helper"
+//             },
+//             {
+//                 id:101,
+//                 name:"Kushal Patil",
+//                 role:"Engineer"
+//             }
+//         ]
 
+//     },
+//     {
+//         id:2,
+//         project:{
+//             projectName:"Project Name1",
+//             building:"buildName1",
+//             floor:"floorName1",
+//             workArea:"workarea1"
+//         },
+//         target:90,
+//         employees:[
+//             {
+//                 id:1,
+//                 name:"Vishal Patil",
+//                 role:"welder"
+//             },
+//             {
+//                 id:202,
+//                 name:"Vishal Patil",
+//                 role:"welder"
+//             },
+//             {
+//                 id:101,
+//                 name:"Kushal Patil",
+//                 role:"Site Engineer"
+//             }
+//         ]
 
+//     }
+// ]
 
+// export const jobRoles =[
+//     {
+//         id:1,
+//         name:"Project Manager"
+//     },
+//     {
+//         id:2,
+//         name:"Software Developer"
+//     },
+//     {
+//         id:3,
+//         name:"Estimation Engineer"
+//     },
+//     {
+//         id:4,
+//         name:"Designer"
+//     },
+//     {
+//         id:5,
+//         name:"Site Engineer"
+//     }
+// ]
 
+// export const employee =[
+//     {
+//         id:1,
+//         FirtsName:"Pramod",
+//         LastName:"Mahajan",
+//         JobRoleId:2,
+//     },
+//     {
+//         id:2,
+//         FirtsName:"Akahsy",
+//         LastName:"Patil",
+//         JobRoleId:1,
+//     },
+//     {
+//         id:3,
+//         FirtsName:"janvi",
+//         LastName:"Potdar",
+//         JobRoleId:3,
+//     },
+//     {
+//         id:4,
+//         FirtsName:"Aboli",
+//         LastName:"Patil",
+//         JobRoleId:2,
+//     },
+//     {
+//         id:5,
+//         FirtsName:"Shubham",
+//         LastName:"Tamboli",
+//         JobRoleId:1,
+//     },
+//     {
+//         id:6,
+//         FirtsName:"Alwin",
+//         LastName:"Joy",
+//         JobRoleId:4,
+//     },
+//     {
+//         id:7,
+//         FirtsName:"John",
+//         LastName:"kwel",
+//         JobRoleId:4,
+//     },
+//     {
+//         id:8,
+//         FirtsName:"Gita",
+//         LastName:"shaha",
+//         JobRoleId:1,
+//     },{
+//         id:9,
+//         FirtsName:"Pratik",
+//         LastName:"Joshi",
+//         JobRoleId:5,
+//     },
+//     {
+//         id:10,
+//         FirtsName:"Nikil",
+//         LastName:"Patil",
+//         JobRoleId:5,
+//     }
+// ]

src/hooks/masterHook/useMaster.js

@@ -12,213 +12,6 @@ import showToast from "../../services/toastService";
 
 
 
-// const useMaster = () => {
-
-//   const selectedMaster = useSelector((store)=>store.localVariables.selectedMaster);
-//   const [data, setData] = useState([]);
-//   const [loading, setLoading] = useState(true);
-//   const [error, setError] = useState("");
-//   useEffect(() => {
-//     const fetchData = async () => {
-//       if (!selectedMaster) return;
-//       setLoading(true);
-//       try {
-//         const cachedData = getCachedData(selectedMaster);
-//         if (cachedData) {
-          
-//           setData(cachedData);
-          
-//         } else {
-//           let response;
-//           switch (selectedMaster) {
-//             case "Application Role":
-//               response = await MasterRespository.getRoles();
-//               response = response.data;
-//               break;
-//             case "Job Role":
-//               response = await MasterRespository.getJobRole();
-//               response = response.data
-//                 break;
-//             case "Activity":
-//               response = await MasterRespository.getActivites();
-//               response = response.data
-//               break;
-//             case "Work Category":
-//               response = await MasterRespository.getWorkCategory();
-//               response = response.data
-//               break;
-//             case "Contact Category":
-//               response = await MasterRespository.getContactCategory();
-//               response = response.data
-//               break;
-//             case "Contact Tag":
-//               response = await MasterRespository.getContactTag();
-//               response = response.data
-//               break;
-//             case "Status":
-//               response = [{description: null,featurePermission: null,id: "02dd4761-363c-49ed-8851-3d2489a3e98d",status:"status 1"},{description: null,featurePermission: null,id: "03dy9761-363c-49ed-8851-3d2489a3e98d",status:"status 2"},{description: null,featurePermission: null,id: "03dy7761-263c-49ed-8851-3d2489a3e98d",status:"Status 3"}];
-//               break;
-//             default:
-//               response = [];
-//           }
-
-//           if (response) {
-//             setData(response);
-//             cacheData(selectedMaster, response);
-//           }
-//         }
-//       } catch (err) {
-//         setError("Failed to fetch data.");
-//       } finally {
-//         setLoading(false);
-//       }
-//     };
-
-//     if ( selectedMaster )
-//     {
-     
-//       fetchData();
-//     }
-    
-//   }, [selectedMaster]);
-
-  
-
-//   return { data, loading, error }
-// };
-
-
-
-
-// export const useActivitiesMaster = () =>
-//   {
-//     const [ activities, setActivites ] = useState( [] )
-//     const [ loading, setloading ] = useState( false );
-//     const [ error, setError ] = useState()
-//       const fetchActivities =async () =>  {
-//           setloading(true);
-//           try {
-//             const response = await MasterRespository.getActivites();
-//             setActivites(response.data);
-//             cacheData( "ActivityMaster", response.data );
-//             setloading(false);
-//           } catch (err) {
-//             setError(err);
-//             setloading(false);
-//           } 
-//        }
-//     useEffect( () =>
-//     {
-//       const cacheddata = getCachedData( "ActivityMaster" );
-//       if ( !cacheddata )
-//       {
-//              fetchActivities()
-//       } else
-//       {
-//            setActivites(cacheddata);
-//       }
-//     }, [] )
-    
-//     return {activities,loading,error}
-//   }
-
-//   export const useWorkCategoriesMaster = () =>
-//     {
-//       const [ categories, setCategories ] = useState( [] )
-//       const [ categoryLoading, setloading ] = useState( false );
-//       const [ categoryError, setError ] = useState( "" )
-    
-//         const fetchCategories =async () =>  {
-//           const cacheddata = getCachedData("Work Category");
-    
-//           if (!cacheddata) {
-//             setloading(true);
-//             try {
-//               const response = await MasterRespository.getWorkCategory();
-//               setCategories(response.data);
-//               cacheData("Work Category", response.data);
-//             } catch (err) {
-//               setError(err);
-//               console.log(err);
-//             } finally {
-//               setloading(false);
-//             }
-//           } else {
-//             setCategories(cacheddata);
-//           }
-//          }
-//       useEffect( () =>
-//       {
-//         fetchCategories()
-//       }, [] )
-      
-//       return {categories,categoryLoading,categoryError}
-// }
-    
-// export const useContactCategory = () =>
-// {
-//   const [ contactCategory, setContactCategory ] = useState( [] )
-//   const [ loading, setLoading ] = useState( false )
-//   const [ Error, setError ] = useState()
-  
-//   const fetchConatctCategory = async() =>
-//   {
-//     const cache_Category = getCachedData( "Contact Category" );
-//     if ( !cache_Category )
-//     {
-//       try
-//       {
-//         let resp = await MasterRespository.getContactCategory();
-//         setContactCategory( resp.data );
-//         cacheData("Contact Category",resp.data)
-//       } catch ( error )
-//       {
-//         setError(error)
-//       }
-//     } else
-//     {
-//       setContactCategory(cache_Category)
-//     }
-//   }
-
-//   useEffect( () =>
-//   {
-//     fetchConatctCategory()
-//   }, [] )
-//   return { contactCategory,loading,Error}
-// }
-// export const useContactTags = () => {
-//   const [contactTags, setContactTags] = useState([]);
-//   const [loading, setLoading] = useState(false);
-//   const [error, setError] = useState(null);
-
-//   useEffect(() => {
-//     const fetchContactTag = async () => {
-//       const cache_Tags = getCachedData("Contact Tag");
-
-//       if (!cache_Tags) {
-//         setLoading(true);
-//         try {
-//           const resp = await MasterRespository.getContactTag();
-//           setContactTags(resp.data);
-//           cacheData("Contact Tag", resp.data);
-//         } catch (err) {
-//           setError(err);
-//         } finally {
-//           setLoading(false);
-//         }
-//       } else {
-//         setContactTags(cache_Tags);
-//       }
-//     };
-
-//     fetchContactTag();
-//   }, []);
-
-//   return { contactTags, loading, error };
-// };
-
-// Separate matser-------------
 
 export const useActivitiesMaster = () =>
 {
@@ -300,6 +93,76 @@ export const useContactTags = () => {
   return { contactTags, loading, error };
 };
 
+
+export const useExpenseType =()=>{
+const {
+    data: ExpenseTypes = [],
+    isLoading: loading,
+    error,
+  } = useQuery({
+    queryKey: ["Expense Type"],
+    queryFn: async () => {
+      const res = await MasterRespository.getExpenseType()
+      return res.data;
+    },
+    onError: (error) => {
+      showToast(
+        error?.response?.data?.message ||
+          error.message ||
+          "Failed to fetch Expense Type",
+        "error"
+      );
+    },
+  });
+
+  return { ExpenseTypes, loading, error };
+}
+export const usePaymentMode =()=>{
+const {
+    data: PaymentModes = [],
+    isLoading: loading,
+    error,
+  } = useQuery({
+    queryKey: ["Payment Mode"],
+    queryFn: async () => {
+      const res = await MasterRespository.getPaymentMode()
+      return res.data;
+    },
+    onError: (error) => {
+      showToast(
+        error?.response?.data?.message ||
+          error.message ||
+          "Failed to fetch Payment Mode",
+        "error"
+      );
+    },
+  });
+
+  return { PaymentModes, loading, error };
+}
+export const useExpenseStatus =()=>{
+const {
+    data: ExpenseStatus = [],
+    isLoading: loading,
+    error,
+  } = useQuery({
+    queryKey: ["Expense Status"],
+    queryFn: async () => {
+      const res = await MasterRespository.getExpenseStatus()
+      return res.data;
+    },
+    onError: (error) => {
+      showToast(
+        error?.response?.data?.message ||
+          error.message ||
+          "Failed to fetch Expense Status",
+        "error"
+      );
+    },
+  });
+
+  return { ExpenseStatus, loading, error };
+}
 // ===Application Masters Query=================================================
 
 const fetchMasterData = async (masterType) => {
@@ -316,6 +179,12 @@ const fetchMasterData = async (masterType) => {
       return (await MasterRespository.getContactCategory()).data;
     case "Contact Tag":
       return (await MasterRespository.getContactTag()).data;
+    case "Expense Type":
+      return (await MasterRespository.getExpenseType()).data;
+    case "Payment Mode":
+      return (await MasterRespository.getPaymentMode()).data;
+    case "Expense Status":
+      return (await MasterRespository.getExpenseStatus()).data;
     case "Status":
       return [
         {

src/hooks/useExpense.js

@@ -1,30 +1,68 @@
-import { useMutation } from "@tanstack/react-query"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import ExpenseRepository from "../repositories/ExpsenseRepository"
 import showToast from "../services/toastService"
+import { queryClient } from "../layouts/AuthLayout";
 
 
 
 // -------------------Query------------------------------------------------------
-export const useExpenseList = ()=>{
+export const useExpenseList=( pageSize, pageNumber, filter ) =>{
 
+return useQuery({
+    queryKey: ["expenses", pageNumber, pageSize, filter],
+    queryFn: async() =>
+     await ExpenseRepository.GetExpenseList( pageSize, pageNumber, filter ).then((res) => res.data),
+    keepPreviousData: true,
+  });
 }
 
+export const useExpense =(ExpenseId)=>{
+    return useQuery({
+        queryKey:["Expense",ExpenseId],
+        queryFn:async()=>await ExpenseRepository.GetExpenseDetails(ExpenseId)
+    })
+}
 
 
 
 
 // ---------------------------Mutation---------------------------------------------
 
-export const useCreateExpnse =()=>{
+export const useCreateExpnse =(onSuccessCallBack)=>{
+   const queryClient = useQueryClient()
     return useMutation({
-        mutationFn:(payload)=>{
+        mutationFn: async(payload)=>{
             await ExpenseRepository.CreateExpense(payload)
         },
         onSuccess:(_,variables)=>{
            showToast("Expense Created Successfully","success")
+           queryClient.invalidateQueries({queryKey:["expenses"]})
+           if (onSuccessCallBack) onSuccessCallBack();
         },
         onError:(error)=>{
              showToast(error.message || "Something went wrong please try again !","success")
         }
     })
 }
+const demoExpense = {
+  projectId: "proj_123",
+  expensesTypeId: "1",           // corresponds to Travel
+  paymentModeId: "pm_456",
+  paidById: "emp_789",
+  transactionDate: "2025-07-21",
+  transactionId: "TXN-001234",
+  description: "Taxi fare from airport to hotel",
+  location: "New York",
+  supplerName: "City Taxi Service",
+  amount: 45.50,
+  noOfPersons: 2,
+  billAttachments: [
+    {
+      fileName: "receipt.pdf",
+      base64Data: "JVBERi0xLjQKJcfs...",  // truncated base64 example string
+      contentType: "application/pdf",
+      fileSize: 450000, // less than 5MB
+      description: "Taxi receipt",
+    },
+  ],
+};

src/pages/Expense/ExpensePage.jsx

@@ -1,20 +1,34 @@
-import React, { useState } from "react";
+import React, { createContext, useContext, useState } from "react";
+
 import ExpenseList from "../../components/Expenses/ExpenseList";
+import CreateExpense from "../../components/Expenses/CreateExpense";
+import ViewExpense from "../../components/Expenses/ViewExpense";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import GlobalModel from "../../components/common/GlobalModel";
-import CreateExpense from "../../components/Expenses/createExpense";
+
+export const ExpenseContext = createContext();
+export const useExpenseContext = () => useContext(ExpenseContext);
 
 const ExpensePage = () => {
-    const[IsNewExpen,setNewExpense] = useState(false)
+  const [isNewExpense, setNewExpense] = useState(false);
+  const [viewExpense, setViewExpense] = useState({
+    expenseId: null,
+    view: false,
+  });
+
+  const contextValue = {
+    setViewExpense,
+  };
 
   return (
+    <ExpenseContext.Provider value={contextValue}>
       <div className="container-fluid">
         <Breadcrumb
           data={[
             { label: "Home", link: "/" },
             { label: "Expense", link: null },
           ]}
-      ></Breadcrumb>
+        />
         <div className="card my-1 text-start px-0">
           <div className="card-body py-1 px-1">
             <div className="row">
@@ -27,23 +41,50 @@ const ExpensePage = () => {
                     aria-controls="DataTables_Table_0"
                   />
                 </label>
-              <i class='bx bx-slider-alt'></i>
+                <i className="bx bx-slider-alt ms-2"></i>
               </div>
               <div className="col-7 col-sm-8 text-end gap-2">
-              
-              <button type="button" className="btn btn-sm btn-primary me-2" onClick={()=>setNewExpense(true)}>
-                <span class="icon-base bx bx-plus-circle me-1"></span>Add New
+                <button
+                  type="button"
+                  className="btn btn-sm btn-primary me-2"
+                  onClick={() => setNewExpense(true)}
+                >
+                  <span className="icon-base bx bx-plus-circle me-1"></span>
+                  Add New
                 </button>
               </div>
             </div>
           </div>
         </div>
+
         <ExpenseList />
 
-      <GlobalModel isOpen={IsNewExpen} size="lg" closeModal={()=>setNewExpense(false)}>
-         <CreateExpense/>
+         {isNewExpense && (
+             <GlobalModel
+          isOpen={isNewExpense}
+          size="lg"
+          closeModal={() => setNewExpense(false)}
+        >
+          <CreateExpense closeModal={() => setNewExpense(false)} />
         </GlobalModel>
+         )}
+      
+
+
+        {viewExpense.view && (<GlobalModel
+          isOpen={viewExpense.view}
+          size="lg"
+          closeModal={() =>
+            setViewExpense({
+              expenseId: null,
+              view: false,
+            })
+          }
+        >
+          <ViewExpense ExpenseId={viewExpense.expenseId}/>
+        </GlobalModel>) }
       </div>
+    </ExpenseContext.Provider>
   );
 };
 

src/pages/master/MasterTable.jsx

@@ -16,6 +16,8 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
     "tenantId",
     "checkLists",
     "isSystem",
+    "isActive",
+    "noOfPersonsRequired"
   ];
 
   const safeData = Array.isArray(data) ? data : [];

src/repositories/ExpsenseRepository.jsx

@@ -2,9 +2,16 @@ import { api } from "../utils/axiosClient";
 
 
 const ExpenseRepository = {
-  GetExpenseList:()=>api.get("/api/expanse/list"),
+  GetExpenseList: ( pageSize, pageNumber, filter ) => {
+    const payloadJsonString = JSON.stringify(filter);
+
+   
+
+    return api.get(`/api/expense/list?pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}`);
+  },
+  
   GetExpenseDetails:(id)=>api.get(`/api/Expanse/details/${id}`),
-  CreateExpense:(data)=>api.post("/api/Expanse/create",data),
+  CreateExpense:(data)=>api.post("/api/Expense/create",data),
   UpdateExpense:(id)=>api.put(`/api/Expanse/edit/${id}`),
   DeleteExpense:(id)=>api.delete(`/api/Expanse/edit/${id}`)
 

src/repositories/MastersRepository.jsx

@@ -56,6 +56,14 @@ export const MasterRespository = {
   createContactTag: (data ) => api.post( `/api/master/contact-tag`, data ),
   updateContactTag: ( id, data ) => api.post( `/api/master/contact-tag/edit/${ id }`, data ),
 
-  getAuditStatus:()=>api.get('/api/Master/work-status')
+  getAuditStatus:()=>api.get('/api/Master/work-status'),
+
+  getExpenseType:()=>api.get('/api/Master/expenses-types'),
+
+
+  getPaymentMode:()=>api.get('/api/Master/payment-modes'),
+
+
+  getExpenseStatus:()=>api.get('/api/Master/expenses-status')
   
 }

src/utils/dateUtils.jsx

@@ -68,7 +68,7 @@ export  const formatNumber = (num) => {
   return Number.isInteger(num) ? num : num.toFixed(2);
 };
 export const formatUTCToLocalTime = (datetime) =>{
-  return moment.utc(datetime).local().format("MMMM DD, YYYY [at] hh:mm A");
+  return moment.utc(datetime).local().format("DD  MMMM YYYY  hh:mm A");
 }
 
 export  const getCompletionPercentage = (completedWork, plannedWork)=> {