src/components/Expenses/CreateExpense.jsx

@@ -1,41 +1,18 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useEffect, useState } from "react";
+import React, { 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 = ({closeModal}) => {
+const CreateExpense = () => {
-  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(schema),
+    resolver: zodResolver(ExpenseSchema),
     defaultValues: {
       projectId: "",
       expensesTypeId: "",
@@ -48,68 +25,45 @@ const CreateExpense = ({closeModal}) => {
       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 onFileChange = async (e) => {
-    const newFiles = Array.from(e.target.files);
+  const newFiles = Array.from(e.target.files);
-    if (newFiles.length === 0) return;
+  if (newFiles.length === 0) return;
 
-    const existingFiles = watch("billAttachments") || [];
+  const existingFiles = watch("billAttachments") || [];
 
-    const parsedFiles = await Promise.all(
+  const parsedFiles = await Promise.all(
-      newFiles.map(async (file) => {
+    newFiles.map(async (file) => {
-        const base64Data = await toBase64(file);
+      const base64Data = await toBase64(file);
-        return {
+      return {
-          fileName: file.name,
+        fileName: file.name,
-          base64Data,
+        base64Data,
-          contentType: file.type,
+        contentType: file.type,
-          fileSize: file.size,
+        fileSize: file.size,
-          description: "",
+        description: "",
-        };
+      };
-      })
+    })
-    );
+  );
 
-    const combinedFiles = [
+  // Avoid duplicates based on file name + size
-      ...existingFiles,
+  const combinedFiles = [
-      ...parsedFiles.filter(
+    ...existingFiles,
-        (newFile) =>
+    ...parsedFiles.filter(
-          !existingFiles.some(
+      (newFile) =>
-            (f) =>
+        !existingFiles.some(
-              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) => {
@@ -118,162 +72,86 @@ const CreateExpense = ({closeModal}) => {
       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 className="container p-3">
+    <div class="container p-3">
-      <h5 className="m-0">Create New Expense</h5>
+      <p class="fw-bold m-0">Create New Expense</p>
       <form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
-        <div className="row my-2">
+        <div class="row my-2">
-          <div className="col-md-6">
+          <div class="col-md-6">
-            <label htmlFor="projectId" className="form-label">
+            <label for="projectId" className="form-label ">
               Select Project
             </label>
-            <select
+            <select class="form-select form-select-sm" id="projectId" required>
-              className="form-select form-select-sm"
+              <option value="">-- Select Project --</option>
-              {...register("projectId")}
+              <option value="project1">Project A</option>
-            >
+              <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 className="col-md-6">
+          <div class="col-md-6">
             <label for="expensesTypeId" className="form-label ">
               Expense Type
             </label>
             <select
-              className="form-select form-select-sm"
+              class="form-select form-select-sm"
               id="expensesTypeId"
-              {...register("expensesTypeId")}
+              required
             >
-              <option value="" disabled>
+              <option value="">-- Select Type --</option>
-                Select Type
+              <option value="type1">Travel</option>
-              </option>
+              <option value="type2">Meal</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 className="row my-2">
+        <div class="row my-2">
-          <div className="col-md-6">
+          <div class="col-md-6">
             <label for="paymentModeId" className="form-label ">
               Payment Mode
             </label>
             <select
               class="form-select form-select-sm"
               id="paymentModeId"
-              {...register("paymentModeId")}
+              required
             >
-              <option value="" disabled>
+              <option value="">-- Select Payment Mode --</option>
-                Select Mode
+              <option value="cash">Cash</option>
-              </option>
+              <option value="card">Card</option>
-              {PaymentModeLoading ? (
-                <option disabled>Loading...</option>
-              ) : (
-                PaymentModes?.map((payment) => (
-                  <option key={payment.id} value={payment.id}>
-                    {payment.name}
-                  </option>
-                ))
-              )}
             </select>
-            {errors.paymentModeId && (
-              <small className="danger-text">
-                {errors.paymentModeId.message}
-              </small>
-            )}
           </div>
 
-          <div className="col-md-6">
+          <div class="col-md-6">
             <label for="paidById" className="form-label ">
               Paid By
             </label>
-            <select
+            <input
-              class="form-select form-select-sm"
+              type="text"
-              id="paymentModeId"
+              id="paidById"
-              {...register("paidById")}
+              class="form-control form-control-sm"
-              disabled={!selectedproject}
+              required
-            >
+            />
-              <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 className="row my-2">
+        <div class="row my-2">
-          <div className="col-md-6">
+          <div class="col-md-6">
             <label for="transactionDate" className="form-label ">
               Transaction Date
             </label>
             <input
               type="date"
-              className="form-control form-control-sm"
+              id="transactionDate"
-              placeholder="YYYY-MM-DD"
+              class="form-control form-control-sm"
-              id="flatpickr-date"
+              placeholder="DD-MM-YYYY"
-              {...register("transactionDate")}
+              required
             />
-            {errors.transactionDate && (
-              <small className="danger-text">
-                {errors.transactionDate.message}
-              </small>
-            )}
           </div>
 
           <div class="col-md-6">
@@ -283,36 +161,40 @@ const CreateExpense = ({closeModal}) => {
             <input
               type="number"
               id="amount"
-              className="form-control form-control-sm"
+              class="form-control form-control-sm"
               min="1"
-              step="0.01"
+              required
-              inputMode="decimal"
-              {...register("amount", { valueAsNumber: true })}
             />
-            {errors.amount && (
-              <small className="danger-text">{errors.amount.message}</small>
-            )}
           </div>
         </div>
 
         <div class="row my-2">
-          <div className="col-md-6">
+          <div class="col-md-6">
-            <label for="supplerName" className="form-label ">
+            <label for="noOfPersons" className="form-label ">
-              Supplier Name
+              No. of Persons
             </label>
             <input
-              type="text"
+              type="number"
-              id="supplerName"
+              id="noOfPersons"
-              className="form-control form-control-sm"
+              class="form-control form-control-sm"
-              {...register("supplerName")}
+              min="1"
+              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
@@ -320,68 +202,33 @@ const CreateExpense = ({closeModal}) => {
             <input
               type="text"
               id="location"
-              className="form-control form-control-sm"
+              class="form-control form-control-sm"
-              {...register("location")}
+              required
             />
-            {errors.location && (
-              <small className="danger-text">{errors.location.message}</small>
-            )}
           </div>
-        </div>
+
-        <div class="row my-2">
+          <div class="col-md-6">
-          <div className="col-md-6">
+            <label for="supplerName" className="form-label ">
-            <label for="statusId" className="form-label ">
+              Supplier Name
-              TransactionId
             </label>
             <input
               type="text"
-              id="transactionId"
+              id="supplerName"
               class="form-control form-control-sm"
-              min="1"
+              required
-              {...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 className="row my-2">
+        <div class="row my-2">
           <div class="col-md-12" className="form-label ">
             <label for="description">Description</label>
             <textarea
               id="description"
-              className="form-control form-control-sm"
+              class="form-control form-control-sm"
-              {...register("description")}
               rows="2"
+              required
             ></textarea>
-            {errors.description && (
-              <small className="danger-text">
-                {errors.description.message}
-              </small>
-            )}
           </div>
         </div>
 
@@ -389,6 +236,7 @@ const CreateExpense = ({closeModal}) => {
           <div className="col-md-12">
             <label className="form-label ">
               Upload Bill{" "}
+              <small className="text-muted">(PDF, JPG, PNG, max 5MB)</small>
             </label>
 
             <div
@@ -396,11 +244,10 @@ const CreateExpense = ({closeModal}) => {
               style={{ cursor: "pointer" }}
               onClick={() => document.getElementById("billAttachments").click()}
             >
-              <i className="bx bx-cloud-upload d-block bx-lg"></i>
+              <i className="bx bx-cloud-upload d-block"></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"
@@ -409,17 +256,12 @@ const CreateExpense = ({closeModal}) => {
                 multiple
                 style={{ display: "none" }}
                 {...register("billAttachments")}
-                onChange={(e) => {
+                  onChange={(e) => {
-                  onFileChange(e);
+    onFileChange(e);
-                  e.target.value = "";
+    e.target.value = ""; // ← this line resets the file input
-                }}
+  }}
               />
             </div>
-            {errors.billAttachments && (
-              <small className="danger-text">
-                {errors.billAttachments.message}
-              </small>
-            )}
 
             {files.length > 0 && (
               <div className="d-block">
@@ -428,38 +270,33 @@ const CreateExpense = ({closeModal}) => {
                     key={idx}
                     class="d-flex justify-content-between text-start p-1"
                   >
-                    <div>
+                    <div >
-                      <span className="mb-0 text-secondary small d-block">
+                        <span className="mb-0 text-secondary small d-block">{file.fileName}</span>
-                        {file.fileName}
+                        <span className="text-body-secondary small d-block">
-                      </span>
+                          {formatFileSize(file.fileSize
-                      <span className="text-body-secondary small d-block">
+)}
-                        {formatFileSize(file.fileSize)}
+                        </span>
-                      </span>
                     </div>
-                    <i
+                    <i className='bx bx-trash bx-sm cursor-pointer text-danger' onClick={()=>removeFile(idx)}></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?.fileSize?.message || fileError?.contentType?.message}
-                    fileError?.contentType?.message}
+    </div>
-                </div>
+  ))}
-              ))}
           </div>
         </div>
 
         <div className="d-flex justify-content-center gap-2">
           {" "}
-          <button type="submit" className="btn btn-primary btn-sm mt-3" disabled={isPending}>
+          <button type="submit" class="btn btn-primary btn-sm mt-3">
-            {isPending ? "Please Wait...":"Submit"}
+            Submit
           </button>
-          <button type="reset" onClick={handleClose} className="btn btn-secondary btn-sm mt-3">
+          <button type="reset" class="btn btn-secondary btn-sm mt-3">
             Cancel
           </button>
         </div>
@@ -469,4 +306,3 @@ const CreateExpense = ({closeModal}) => {
 };
 
 export default CreateExpense;
-

src/components/Expenses/ExpenseList.jsx

@@ -1,250 +1,98 @@
-import React, { useState } from "react";
+import React 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 no-footer"
+                  className="dataTables_wrapper dt-bootstrap5 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>
-              )}
 
-              {!isLoading && items.length === 0 && (
+                      <table
-                <tr>
+                    className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
-                  <td colSpan={7} className="text-center py-3">
+                    id="DataTables_Table_0"
-                    No expenses found.
+                    aria-describedby="DataTables_Table_0_info"
-                  </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)}
                   >
-                    {index + 1}
+                    <thead>
-                  </button>
+                      <tr className=''>
-                </li>
+                        <th
-              ))}
+                          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>
                         
-              <li
+                            <th
-                className={`page-item ${
+                          className="sorting"
-                  currentPage === totalPages ? "disabled" : ""
+                          tabIndex="0"
-                }`}
+                          aria-controls="DataTables_Table_0"
-              >
+                          rowSpan="1"
-                <button
+                          colSpan="1"
-                  className="page-link"
+                          aria-label="Billing: activate to sort column ascending"
-                  onClick={() => paginate(currentPage + 1)}
+                        >
-                >
+                          Status
-                  &raquo;
+                        </th>
-                </button>
+                        <th
-              </li>
+                          className="sorting  d-none  d-md-table-cell"
-            </ul>
+                          tabIndex="0"
-          </nav>
+                          aria-controls="DataTables_Table_0"
-        )}
+                          rowSpan="1"
-      </div>
+                          colSpan="1"
-    </div>
+                          aria-label="Plan: activate to sort column ascending"
-  );
+                        >
-};
+                          Amount
+                        </th>
                     
-export default ExpenseList;
+                      </tr>
+                    </thead>
+                    <tbody>
+                         
+                    </tbody>
+                    </table>
+                </div>
+                </div>
+                </div>
+  )
+}
+
+export default ExpenseList

src/components/Expenses/ExpenseSchema.js

@@ -1,69 +1,66 @@
-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" }),
 
-export const ExpenseSchema = (expenseTypes) => {
+  billAttachments: z
-  return z
+    .array(
-    .object({
+      z.object({
-      projectId: z.string().min(1, { message: "Project is required" }),
+        fileName: z.string().min(1, { message: "Filename is required" }),
-      expensesTypeId: z.string().min(1, { message: "Expense type is required" }),
+        base64Data: z.string().min(1, { message: "File data is required" }),
-      paymentModeId: z.string().min(1, { message: "Payment mode is required" }),
+        contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
-      paidById: z.string().min(1, { message: "Employee name is required" }),
+          message: "Only PDF, PNG, JPG, or JPEG files are allowed",
-      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",
         }),
-      noOfPersons: z.coerce
+        fileSize: z.number().max(MAX_FILE_SIZE, {
-  .number()
+          message: "File size must be less than or equal to 5MB",
-  .optional(),
+        }),
-      billAttachments: z
+        description: z.string().optional(),
-        .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"],
-      }
     )
-    .superRefine((data, ctx) => {
+    .nonempty({ message: "At least one file attachment is required" }),
-      const expenseType = expenseTypes.find((et) => et.id === data.expensesTypeId);
+});
-      if (expenseType?.noOfPersonsRequired && (!data.noOfPersons || data.noOfPersons < 1)) {
+
-        ctx.addIssue({
+
-          code: z.ZodIssueCode.custom,
+let payload=
-          message: "No. of Persons is required and must be at least 1",
+{
-          path: ["noOfPersons"],
+"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

@@ -1,14 +0,0 @@
-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,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+
 import CreateRole from "./CreateRole";
 import DeleteMaster from "./DeleteMaster";
 import EditRole from "./EditRole";
@@ -18,41 +19,66 @@ 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 = () => {
-    const { masterType, item, validateFn } = modaldata || {};
+    if (!modaldata?.masterType || !modaldata?.item?.id) {
-    if (!masterType || !item?.id) {
       showToast("Missing master type or item", "error");
       return;
     }
-
     deleteMasterItem(
-      { masterType, item, validateFn },
+      {
-      { onSuccess: handleCloseDeleteModal }
+        masterType: modaldata.masterType,
+        item: modaldata.item,
+        validateFn: modaldata.validateFn, // optional
+      },
+      {
+        onSuccess: () => {
+          handleCloseDeleteModal();
+        },
+      }
     );
   };
 
-  const handleCloseDeleteModal = () => {
-    setIsDeleteModalOpen(false);
-    closeModal();
-  };
-
   useEffect(() => {
     if (modaldata?.modalType === "delete") {
       setIsDeleteModalOpen(true);
     }
   }, [modaldata]);
 
-  if (!modaldata?.modalType) {
+  const handleCloseDeleteModal = () => {
+    setIsDeleteModalOpen(false);
     closeModal();
-    return null;
+  };
-  }
 
-  if (modaldata.modalType === "delete" && isDeleteModalOpen) {
+  if (modaldata?.modalType === "delete" && isDeleteModalOpen) {
     return (
       <div
         className="modal fade show"
@@ -64,63 +90,86 @@ 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 show"
+      className="modal fade"
       id="master-modal"
       tabIndex="-1"
-      role="dialog"
       aria-hidden="true"
+      role="dialog"
       aria-labelledby="modalToggleLabel"
-      style={{ display: "block" }}
     >
-      <div className={`modal-dialog mx-sm-auto mx-1 ${isLargeModal ? "modal-lg" : "modal-md"} modal-simple`}>
+      <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-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>
-            {renderModalContent()}
+
+            {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} />
+            )}
           </div>
         </div>
       </div>

src/data/masters.js

@@ -1,157 +1,153 @@
 // it important ------
-export const mastersList = [
+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: 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 = [
+export const dailyTask = [
-//     {
+    {
-//         id:1,
+        id:1,
-//         project:{
+        project:{
-//             projectName:"Project Name1",
+            projectName:"Project Name1",
-//             building:"buildName1",
+            building:"buildName1",
-//             floor:"floorName1",
+            floor:"floorName1",
-//             workArea:"workarea1"
+            workArea:"workarea1"
-//         },
+        },
-//         target:80,
+        target:80,
-//         employees:[
+        employees:[
-//             {
+            {
-//                 id:1,
+                id:1,
-//                 name:"Vishal Patil",
+                name:"Vishal Patil",
-//                 role:"helper"
+                role:"helper"
-//             },
+            },
-//             {
+            {
-//                 id:202,
+                id:202,
-//                 name:"Vishal Patil",
+                name:"Vishal Patil",
-//                 role:"helper"
+                role:"helper"
-//             },
+            },
-//             {
+            {
-//                 id:101,
+                id:101,
-//                 name:"Kushal Patil",
+                name:"Kushal Patil",
-//                 role:"Engineer"
+                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,
+    }
+]
 
-//     },
-//     {
-//         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,6 +12,213 @@ 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 = () =>
 {
@@ -93,76 +300,6 @@ 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) => {
@@ -179,12 +316,6 @@ 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,68 +1,30 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { useMutation } from "@tanstack/react-query"
 import ExpenseRepository from "../repositories/ExpsenseRepository"
 import showToast from "../services/toastService"
-import { queryClient } from "../layouts/AuthLayout";
 
 
 
 // -------------------Query------------------------------------------------------
-export const useExpenseList=( pageSize, pageNumber, filter ) =>{
+export const useExpenseList = ()=>{
 
-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 =(onSuccessCallBack)=>{
+export const useCreateExpnse =()=>{
-   const queryClient = useQueryClient()
     return useMutation({
-        mutationFn: async(payload)=>{
+        mutationFn:(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,90 +1,49 @@
-import React, { createContext, useContext, useState } from "react";
+import React, { 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 [isNewExpense, setNewExpense] = useState(false);
+    const[IsNewExpen,setNewExpense] = useState(false)
-  const [viewExpense, setViewExpense] = useState({
-    expenseId: null,
-    view: false,
-  });
-
-  const contextValue = {
-    setViewExpense,
-  };
 
   return (
-    <ExpenseContext.Provider value={contextValue}>
+    <div className="container-fluid">
-      <div className="container-fluid">
+      <Breadcrumb
-        <Breadcrumb
+        data={[
-          data={[
+          { label: "Home", link: "/" },
-            { label: "Home", link: "/" },
+          { label: "Expense", link: null },
-            { label: "Expense", link: null },
+        ]}
-          ]}
+      ></Breadcrumb>
-        />
+      <div className="card my-1 text-start px-0">
-        <div className="card my-1 text-start px-0">
+        <div className="card-body py-1 px-1">
-          <div className="card-body py-1 px-1">
+          <div className="row">
-            <div className="row">
+            <div className="col-5 col-sm-4">
-              <div className="col-5 col-sm-4">
+              <label className="mb-0">
-                <label className="mb-0">
+                <input
-                  <input
+                  type="search"
-                    type="search"
+                  className="form-control form-control-sm"
-                    className="form-control form-control-sm"
+                  placeholder="Search Expense..."
-                    placeholder="Search Expense..."
+                  aria-controls="DataTables_Table_0"
-                    aria-controls="DataTables_Table_0"
+                />
-                  />
+              </label>
-                </label>
+              <i class='bx bx-slider-alt'></i>
-                <i className="bx bx-slider-alt ms-2"></i>
+            </div>
-              </div>
+            <div className="col-7 col-sm-8 text-end gap-2">
-              <div className="col-7 col-sm-8 text-end gap-2">
+              
-                <button
+              <button type="button" className="btn btn-sm btn-primary me-2" onClick={()=>setNewExpense(true)}>
-                  type="button"
+                <span class="icon-base bx bx-plus-circle me-1"></span>Add New
-                  className="btn btn-sm btn-primary me-2"
+              </button>
-                  onClick={() => setNewExpense(true)}
-                >
-                  <span className="icon-base bx bx-plus-circle me-1"></span>
-                  Add New
-                </button>
-              </div>
             </div>
           </div>
         </div>
-
-        <ExpenseList />
-
-         {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>
+      <ExpenseList />
+
+      <GlobalModel isOpen={IsNewExpen} size="lg" closeModal={()=>setNewExpense(false)}>
+         <CreateExpense/>
+      </GlobalModel>
+    </div>
   );
 };
 

src/pages/master/MasterTable.jsx

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

src/repositories/ExpsenseRepository.jsx

@@ -2,16 +2,9 @@ import { api } from "../utils/axiosClient";
 
 
 const ExpenseRepository = {
-  GetExpenseList: ( pageSize, pageNumber, filter ) => {
+  GetExpenseList:()=>api.get("/api/expanse/list"),
-    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/Expense/create",data),
+  CreateExpense:(data)=>api.post("/api/Expanse/create",data),
   UpdateExpense:(id)=>api.put(`/api/Expanse/edit/${id}`),
   DeleteExpense:(id)=>api.delete(`/api/Expanse/edit/${id}`)
 

src/repositories/MastersRepository.jsx

@@ -56,14 +56,6 @@ 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("DD  MMMM YYYY  hh:mm A");
+  return moment.utc(datetime).local().format("MMMM DD, YYYY [at] hh:mm A");
 }
 
 export  const getCompletionPercentage = (completedWork, plannedWork)=> {