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,45 +48,68 @@ const CreateExpense = () => {
       supplerName: "",
       amount: "",
       noOfPersons: "",
-      statusId: "",
       billAttachments: [],
     },
   });
 
-  const files = watch("billAttachments");
+  const selectedproject = watch("projectId");
-const onFileChange = async (e) => {
+  const selectedProject = useSelector(
-  const newFiles = Array.from(e.target.files);
+    (store) => store.localVariables.projectId
-  if (newFiles.length === 0) return;
-
-  const existingFiles = watch("billAttachments") || [];
-
-  const parsedFiles = await Promise.all(
-    newFiles.map(async (file) => {
-      const base64Data = await toBase64(file);
-      return {
-        fileName: file.name,
-        base64Data,
-        contentType: file.type,
-        fileSize: file.size,
-        description: "",
-      };
-    })
   );
+  const { projectNames, loading: projectLoading, error } = useProjectName();
 
-  // Avoid duplicates based on file name + size
+  const {
-  const combinedFiles = [
+    PaymentModes,
-    ...existingFiles,
+    loading: PaymentModeLoading,
-    ...parsedFiles.filter(
+    error: PaymentModeError,
-      (newFile) =>
+  } = usePaymentMode();
-        !existingFiles.some(
+  const {
-          (f) => f.fileName === newFile.fileName && f.fileSize === newFile.fileSize
+    ExpenseStatus,
-        )
+    loading: StatusLoadding,
-    ),
+    error: stausError,
-  ];
+  } = useExpenseStatus();
+  const {
+    employees,
+    loading: EmpLoading,
+    error: EmpError,
+  } = useEmployeesByProject(selectedproject);
 
-  setValue("billAttachments", combinedFiles, { shouldDirty: true, shouldValidate: true });
+  const files = watch("billAttachments");
-};
+  const onFileChange = async (e) => {
+    const newFiles = Array.from(e.target.files);
+    if (newFiles.length === 0) return;
 
+    const existingFiles = watch("billAttachments") || [];
+
+    const parsedFiles = await Promise.all(
+      newFiles.map(async (file) => {
+        const base64Data = await toBase64(file);
+        return {
+          fileName: file.name,
+          base64Data,
+          contentType: file.type,
+          fileSize: file.size,
+          description: "",
+        };
+      })
+    );
+
+    const combinedFiles = [
+      ...existingFiles,
+      ...parsedFiles.filter(
+        (newFile) =>
+          !existingFiles.some(
+            (f) =>
+              f.fileName === newFile.fileName && f.fileSize === newFile.fileSize
+          )
+      ),
+    ];
+
+    setValue("billAttachments", combinedFiles, {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+  };
 
   const toBase64 = (file) =>
     new Promise((resolve, reject) => {
@@ -72,86 +118,162 @@ const onFileChange = async (e) => {
       reader.onload = () => resolve(reader.result.split(",")[1]); // base64 only, no prefix
       reader.onerror = (error) => reject(error);
     });
-const removeFile = (index) => {
+  const removeFile = (index) => {
-  const newFiles = files.filter((_, i) => i !== index);
+    const newFiles = files.filter((_, i) => i !== index);
-  setValue("billAttachments", newFiles, { shouldValidate: true });
+    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">
+    <div className="container p-3">
-      <p class="fw-bold m-0">Create New Expense</p>
+      <h5 className="m-0">Create New Expense</h5>
       <form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
-        <div class="row my-2">
+        <div className="row my-2">
-          <div class="col-md-6">
+          <div className="col-md-6">
-            <label for="projectId" className="form-label ">
+            <label htmlFor="projectId" className="form-label">
               Select Project
             </label>
-            <select class="form-select form-select-sm" id="projectId" required>
+            <select
-              <option value="">-- Select Project --</option>
+              className="form-select form-select-sm"
-              <option value="project1">Project A</option>
+              {...register("projectId")}
-              <option value="project2">Project B</option>
+            >
+              <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="" disabled>
-              <option value="type1">Travel</option>
+                Select Type
-              <option value="type2">Meal</option>
+              </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 className="row my-2">
-          <div class="col-md-6">
+          <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="" disabled>
-              <option value="cash">Cash</option>
+                Select Mode
-              <option value="card">Card</option>
+              </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
+            <select
-              type="text"
+              class="form-select form-select-sm"
-              id="paidById"
+              id="paymentModeId"
-              class="form-control form-control-sm"
+              {...register("paidById")}
-              required
+              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 className="row my-2">
-          <div class="col-md-6">
+          <div className="col-md-6">
             <label for="transactionDate" className="form-label ">
               Transaction Date
             </label>
             <input
               type="date"
-              id="transactionDate"
+              className="form-control form-control-sm"
-              class="form-control form-control-sm"
+              placeholder="YYYY-MM-DD"
-              placeholder="DD-MM-YYYY"
+              id="flatpickr-date"
-              required
+              {...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">
+          <div className="col-md-6">
-            <label for="noOfPersons" className="form-label ">
+            <label for="supplerName" className="form-label ">
-              No. of Persons
+              Supplier Name
             </label>
             <input
-              type="number"
+              type="text"
-              id="noOfPersons"
+              id="supplerName"
-              class="form-control form-control-sm"
+              className="form-control form-control-sm"
-              min="1"
+              {...register("supplerName")}
-              required
             />
+            {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"
+              className="form-control form-control-sm"
-              required
+              {...register("location")}
             />
+            {errors.location && (
+              <small className="danger-text">{errors.location.message}</small>
+            )}
           </div>
-
+        </div>
-          <div class="col-md-6">
+        <div class="row my-2">
-            <label for="supplerName" className="form-label ">
+          <div className="col-md-6">
-              Supplier Name
+            <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")}
             />
+            {errors.transactionId && (
+              <small className="danger-text">
+                {errors.transactionId.message}
+              </small>
+            )}
           </div>
+
+          {ExpenseType?.noOfPersonsRequired && (
+            <div className="col-md-6">
+              <label htmlFor="noOfPersons" className="form-label">
+                No. of Persons
+              </label>
+              <input
+                type="number"
+                id="noOfPersons"
+                className="form-control form-control-sm"
+                {...register("noOfPersons")}
+                inputMode="numeric"
+              />
+              {errors.noOfPersons && (
+                <small className="danger-text">
+                  {errors.noOfPersons.message}
+                </small>
+              )}
+            </div>
+          )}
         </div>
 
-        <div class="row my-2">
+        <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"
@@ -256,12 +409,17 @@ const removeFile = (index) => {
                 multiple
                 style={{ display: "none" }}
                 {...register("billAttachments")}
-                  onChange={(e) => {
+                onChange={(e) => {
-    onFileChange(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">
@@ -270,33 +428,38 @@ const removeFile = (index) => {
                     key={idx}
                     class="d-flex justify-content-between text-start p-1"
                   >
-                    <div >
+                    <div>
-                        <span className="mb-0 text-secondary small d-block">{file.fileName}</span>
+                      <span className="mb-0 text-secondary small d-block">
-                        <span className="text-body-secondary small d-block">
+                        {file.fileName}
-                          {formatFileSize(file.fileSize
+                      </span>
-)}
+                      <span className="text-body-secondary small d-block">
-                        </span>
+                        {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>
             )}
-{Array.isArray(errors.billAttachments) &&
+            {Array.isArray(errors.billAttachments) &&
-  errors.billAttachments.map((fileError, index) => (
+              errors.billAttachments.map((fileError, index) => (
-    <div key={index} className="danger-text small mt-1">
+                <div key={index} className="danger-text small mt-1">
-      {fileError?.fileSize?.message || fileError?.contentType?.message}
+                  {fileError?.fileSize?.message ||
-    </div>
+                    fileError?.contentType?.message}
-  ))}
+                </div>
+              ))}
           </div>
         </div>
 
         <div className="d-flex justify-content-center gap-2">
           {" "}
-          <button type="submit" class="btn btn-primary btn-sm mt-3">
+          <button type="submit" className="btn btn-primary btn-sm mt-3" disabled={isPending}>
-            Submit
+            {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,98 +1,250 @@
-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 ">
-              <div className="card-datatable table-responsive">
+      <div className="card-datatable table-responsive">
-                <div
+        <div
-                  id="DataTables_Table_0_wrapper"
+          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>
+                <th
+                  className="sorting sorting_desc"
+                  tabIndex="0"
+                  aria-controls="DataTables_Table_0"
+                  rowSpan="1"
+                  colSpan="2"
+                  aria-label="Date: activate to sort column ascending"
+                  aria-sort="descending"
                 >
+                  <div className="text-start ms-6">Date Time</div>
+                </th>
+                <th
+                  className="sorting sorting_desc d-none d-sm-table-cell"
+                  tabIndex="0"
+                  aria-controls="DataTables_Table_0"
+                  rowSpan="1"
+                  colSpan="1"
+                  aria-label="Expense Type: activate to sort column ascending"
+                  aria-sort="descending"
+                >
+                  <div className="text-start ms-5">Expense Type</div>
+                </th>
+                <th
+                  className="sorting sorting_desc d-none d-sm-table-cell"
+                  tabIndex="0"
+                  aria-controls="DataTables_Table_0"
+                  rowSpan="1"
+                  colSpan="1"
+                  aria-label="Payment Mode: activate to sort column ascending"
+                  aria-sort="descending"
+                >
+                  <div className="text-start ms-5">Payment Mode</div>
+                </th>
+                <th
+                  className="sorting sorting_desc d-none d-sm-table-cell"
+                  tabIndex="0"
+                  aria-controls="DataTables_Table_0"
+                  rowSpan="1"
+                  colSpan="1"
+                  aria-label="Paid By: activate to sort column ascending"
+                  aria-sort="descending"
+                >
+                  <div className="text-start ms-5">Paid By</div>
+                </th>
+                <th
+                  className="sorting d-none d-md-table-cell"
+                  tabIndex="0"
+                  aria-controls="DataTables_Table_0"
+                  rowSpan="1"
+                  colSpan="1"
+                  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>
+              )}
 
-                      <table
+              {!isLoading && items.length === 0 && (
-                    className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
+                <tr>
-                    id="DataTables_Table_0"
+                  <td colSpan={7} className="text-center py-3">
-                    aria-describedby="DataTables_Table_0_info"
+                    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>
+        {!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>
+
+              {[...Array(totalPages)].map((_, index) => (
+                <li
+                  key={index}
+                  className={`page-item ${
+                    currentPage === index + 1 ? "active" : ""
+                  }`}
+                >
+                  <button
+                    className="page-link"
+                    onClick={() => paginate(index + 1)}
                   >
-                    <thead>
+                    {index + 1}
-                      <tr className=''>
+                  </button>
-                        <th
+                </li>
-                          className="sorting sorting_desc"
+              ))}
-                          tabIndex="0"
-                          aria-controls="DataTables_Table_0"
-                          rowSpan="1"
-                          colSpan="3"
-                          aria-label="User: activate to sort column ascending"
-                          aria-sort="descending"
-                        >
-                          <div className="text-start ms-6">Date</div>
-                        </th>
-                        <th
-                          className="sorting sorting_desc  d-sm-table-cell"
-                          tabIndex="0"
-                          aria-controls="DataTables_Table_0"
-                          rowSpan="1"
-                          colSpan="1"
-                          aria-label="User: activate to sort column ascending"
-                          aria-sort="descending"
-                        >
-                           <div className="text-start ms-5">Expense Type</div>
-                        </th>
-                        <th
-                          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-sort="descending"
-                        >
-                          <div className="text-start ">Payment mode</div>
-                        </th>
-                        <th
-                          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-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
-                        </th>
-                        <th
-                          className="sorting  d-none  d-md-table-cell"
-                          tabIndex="0"
-                          aria-controls="DataTables_Table_0"
-                          rowSpan="1"
-                          colSpan="1"
-                          aria-label="Plan: activate to sort column ascending"
-                        >
-                          Amount
-                        </th>
-                    
-                      </tr>
-                    </thead>
-                    <tbody>
-                         
-                    </tbody>
-                    </table>
-                </div>
-                </div>
-                </div>
-  )
-}
 
-export default ExpenseList
+              <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,66 +1,69 @@
-import { z } from 'zod';
+import { z } from "zod";
 
 const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
 const ALLOWED_TYPES = [
-  'application/pdf',
+  "application/pdf",
-  'image/png',
+  "image/png",
-  'image/jpg',
+  "image/jpg",
-  'image/jpeg',
+  "image/jpeg",
 ];
 
-export const ExpenseSchema = 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)
-  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" }),
 
-  billAttachments: z
+export const ExpenseSchema = (expenseTypes) => {
-    .array(
+  return z
-      z.object({
+    .object({
-        fileName: z.string().min(1, { message: "Filename is required" }),
+      projectId: z.string().min(1, { message: "Project is required" }),
-        base64Data: z.string().min(1, { message: "File data is required" }),
+      expensesTypeId: z.string().min(1, { message: "Expense type is required" }),
-        contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
+      paymentModeId: z.string().min(1, { message: "Payment mode is required" }),
-          message: "Only PDF, PNG, JPG, or JPEG files are allowed",
+      paidById: z.string().min(1, { message: "Employee name is required" }),
+      transactionDate: z.string().min(1, { message: "Date is required" }),
+      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
+        .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",
         }),
-        fileSize: z.number().max(MAX_FILE_SIZE, {
+      noOfPersons: z.coerce
-          message: "File size must be less than or equal to 5MB",
+  .number()
-        }),
+  .optional(),
-        description: z.string().optional(),
+      billAttachments: z
-      })
+        .array(
+          z.object({
+            fileName: z.string().min(1, { message: "Filename is required" }),
+            base64Data: z.string().min(1, { message: "File data is required" }),
+            contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
+              message: "Only PDF, PNG, JPG, or JPEG files are allowed",
+            }),
+            fileSize: z.number().max(MAX_FILE_SIZE, {
+              message: "File size must be less than or equal to 5MB",
+            }),
+            description: z.string().optional(),
+          })
+        )
+        .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"],
+      }
     )
-    .nonempty({ message: "At least one file attachment is required" }),
+    .superRefine((data, ctx) => {
-});
+      const expenseType = expenseTypes.find((et) => et.id === data.expensesTypeId);
-
+      if (expenseType?.noOfPersonsRequired && (!data.noOfPersons || data.noOfPersons < 1)) {
-
+        ctx.addIssue({
-let payload=
+          code: z.ZodIssueCode.custom,
-{
+          message: "No. of Persons is required and must be at least 1",
-"projectId": "2618f2ef-2823-11f0-9d9e-bc241163f504",
+          path: ["noOfPersons"],
-"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/hooks/masterHook/useMaster.js

@@ -93,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) => {

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,49 +1,90 @@
-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 (
-    <div className="container-fluid">
+    <ExpenseContext.Provider value={contextValue}>
-      <Breadcrumb
+      <div className="container-fluid">
-        data={[
+        <Breadcrumb
-          { label: "Home", link: "/" },
+          data={[
-          { label: "Expense", link: null },
+            { 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="card my-1 text-start px-0">
-          <div className="row">
+          <div className="card-body py-1 px-1">
-            <div className="col-5 col-sm-4">
+            <div className="row">
-              <label className="mb-0">
+              <div className="col-5 col-sm-4">
-                <input
+                <label className="mb-0">
-                  type="search"
+                  <input
-                  className="form-control form-control-sm"
+                    type="search"
-                  placeholder="Search Expense..."
+                    className="form-control form-control-sm"
-                  aria-controls="DataTables_Table_0"
+                    placeholder="Search Expense..."
-                />
+                    aria-controls="DataTables_Table_0"
-              </label>
+                  />
-              <i class='bx bx-slider-alt'></i>
+                </label>
-            </div>
+                <i className="bx bx-slider-alt ms-2"></i>
-            <div className="col-7 col-sm-8 text-end gap-2">
+              </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)}>
+                <button
-                <span class="icon-base bx bx-plus-circle me-1"></span>Add New
+                  type="button"
-              </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>
-      </div>
-      <ExpenseList />
 
-      <GlobalModel isOpen={IsNewExpen} size="lg" closeModal={()=>setNewExpense(false)}>
+        <ExpenseList />
-         <CreateExpense/>
+
-      </GlobalModel>
+         {isNewExpense && (
-    </div>
+             <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/repositories/ExpsenseRepository.jsx

@@ -2,12 +2,19 @@ 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}`)
 
 }
 
-export default ExpenseRepository;
+export default ExpenseRepository;

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