src/components/Expenses/ExpenseList.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { useDeleteExpense, useExpenseList } from "../../hooks/useExpense";
+import { useExpenseList } from "../../hooks/useExpense";
 import Avatar from "../common/Avatar";
 import { useExpenseContext } from "../../pages/Expense/ExpensePage";
 import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils";
@@ -7,17 +7,12 @@ import Pagination from "../common/Pagination";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 import { AppColorconfig, getColorNameFromHex } from "../../utils/appUtils";
 import { ExpenseTableSkeleton } from "./ExpenseSkeleton";
-import ConfirmModal from "../common/ConfirmModal";
-import { useProfile } from "../../hooks/useProfile";
 
 const ExpenseList = () => {
-  const [deletingId, setDeletingId] = useState(null);
+  const { setViewExpense,setManageExpenseModal } = useExpenseContext();
-  const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const { setViewExpense, setManageExpenseModal } = useExpenseContext();
   const [currentPage, setCurrentPage] = useState(1);
   const pageSize = 10;
-  const {profile} = useProfile()
+
-console.log(profile)
   const filter = {
     projectIds: [],
     statusIds: [],
@@ -26,25 +21,10 @@ console.log(profile)
     startDate: null,
     endDate: null,
   };
+  
 
-  const { mutate: DeleteExpense, isPending } = useDeleteExpense();
+  const { data, isLoading, isError,isInitialLoading,error,isFetching } = useExpenseList(10, currentPage, filter);
-  const { data, isLoading, isError, isInitialLoading, error, isFetching } =
+  if (isInitialLoading ) return <ExpenseTableSkeleton/>;
-    useExpenseList(10, currentPage, filter);
-
-  const handleDelete = (id) => {
-    setDeletingId(id);
-    DeleteExpense(
-      { id },
-      {
-        onSettled: () => {
-          setDeletingId(null); 
-          setIsDeleteModalOpen(false)
-        },
-      }
-    );
-  };
-
-  if (isInitialLoading) return <ExpenseTableSkeleton />;
   if (isError) return <div>{error}</div>;
   const items = data?.data ?? [];
   const totalPages = data?.totalPages ?? 1;
@@ -56,41 +36,16 @@ console.log(profile)
     }
   };
   return (
-    <>
-    
-      {IsDeleteModalOpen && (
-        <div
-          className={`modal fade  ${IsDeleteModalOpen ? "show" : ""}`}
-          tabIndex="-1"
-          role="dialog"
-          style={{
-            display: IsDeleteModalOpen ? "block" : "none",
-            backgroundColor: IsDeleteModalOpen
-              ? "rgba(0,0,0,0.5)"
-              : "transparent",
-          }}
-          aria-hidden="false"
-        >
-        
-          <ConfirmModal
-            type={"delete"}
-            header={"Delete Expense"}
-            message={"Are you sure you want delete?"}
-            onSubmit={handleDelete}
-            onClose={() => setIsDeleteModalOpen(false)}
-            loading={isPending}
-                       paramData={deletingId}
-          />
-        </div>
-      )}
     <div className="card ">
       <div className="card-datatable table-responsive">
         <div
           id="DataTables_Table_0_wrapper"
           className="dataTables_wrapper no-footer"
+           
         >
           <table
             className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
+          
             aria-describedby="DataTables_Table_0_info"
             id="horizontal-example"
           >
@@ -194,9 +149,7 @@ console.log(profile)
                   <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>
+                        <span>{formatUTCToLocalTime(expense.transactionDate)}</span>
-                          {formatUTCToLocalTime(expense.transactionDate)}
-                        </span>
                       </div>
                     </td>
                     <td className="text-start d-none d-sm-table-cell ms-5">
@@ -220,68 +173,36 @@ console.log(profile)
                         </span>
                       </div>
                     </td>
-                    <td className="d-none d-md-table-cell text-end">
+                    <td className="d-none d-md-table-cell text-end"><i className='bx bx-rupee b-xs'></i>{expense?.amount}</td>
-                      <i className="bx bx-rupee b-xs"></i>
-                      {expense?.amount}
-                    </td>
                     <td>
                       <span
-                        className={`badge bg-label-${
+                      className={`badge bg-label-${getColorNameFromHex(expense?.status?.color) || 'secondary'}`}
-                          getColorNameFromHex(expense?.status?.color) ||
-                          "secondary"
-                        }`}
                       >
-                        {expense.status?.displayName || "Unknown"}
+                       
+                        {expense.status?.displayName   || "Unknown"}
                       </span>
                     </td>
-                    <td>
+                    <td >
-                      <div className="d-flex justify-content-strat align-items-center gap-2">
+                   <div className="d-flex justify-content-center align-items-center gap-2">
-                        <span
+                       <span
-                          className="cursor-pointer"
+                        className="cursor-pointer"
-                          onClick={() =>
+                        onClick={() =>
-                            setViewExpense({
+                          setViewExpense({ expenseId:expense.id, view: true })
-                              expenseId: expense.id,
+                        }
-                              view: true,
+                      >
-                            })
+                        <i className="bx bx-show text-primary "></i>
-                          }
+                      </span>
-                        >
+                      <span
-                          <i className="bx bx-show text-primary "></i>
+                        className="cursor-pointer"
-                        </span>
+                       onClick={()=>setManageExpenseModal({IsOpen:true,expenseId:expense.id})}
-                        {(expense.status.name === 'Draft' || expense.status.name === 'Rejected')  && (expense.createdBy.id === profile.employeeInfo.id )  &&(
+                      >
-                          <span
+                       <i className='bx bx-edit bx-sm text-secondary'></i>
-                          className="cursor-pointer"
+                      </span> 
-                          onClick={() =>
+                       <span
-                            setManageExpenseModal({
+                        className="cursor-pointer"
-                              IsOpen: true,
+                      >
-                              expenseId: expense.id,
+                       <i className='bx bx-trash bx-sm text-danger' ></i>
-                            })
+                      </span>
-                          }
-                        >
-                          <i className="bx bx-edit bx-sm text-secondary"></i>
-                        </span>
-                        )}
-                        {expense.status.name == "Draft" && (
-                          <span
-                            className="cursor-pointer"
-                            onClick={() => {
-                              setIsDeleteModalOpen(true)
-                              setDeletingId(expense.id)
-                            }}
-                          >
-                            {/* {deletingId === expense.id ? (
-                              <div
-                                className="spinner-border spinner-border-sm text-secondary"
-                                role="status"
-                              >
-                                <span className="visually-hidden">
-                                  Loading...
-                                </span>
-                              </div>
-                            ) : ( */}
-                              <i className="bx bx-trash bx-sm text-danger"></i>
-                            {/* )} */}
-                          </span>
-                        )}
                       </div>
                     </td>
                   </tr>
@@ -290,15 +211,15 @@ console.log(profile)
           </table>
         </div>
         {!isInitialLoading && items.length > 0 && (
-          <Pagination
+        <Pagination
-            currentPage={currentPage}
+          currentPage={currentPage}
-            totalPages={totalPages}
+          totalPages={totalPages}
-            onPageChange={paginate}
+          onPageChange={paginate}
-          />
+        />
-        )}
+      )}
       </div>
+  
     </div>
-    </>
   );
 };
 

src/components/Expenses/ManageExpense.jsx

@@ -188,6 +188,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
     closeModal();
   };
   if (
+    EmpLoading ||
     StatusLoadding ||
     projectLoading ||
     ExpenseLoading ||

src/hooks/useExpense.js

@@ -163,33 +163,3 @@ export const useActionOnExpense = (onSuccessCallBack) => {
     },
   });
 };
-
-export const useDeleteExpense = () => {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: async ({ id }) => {
-      const response = await ExpenseRepository.DeleteExpense(id);
-      return response.data;
-    },
-    onSuccess: (data, variables) => {
-      queryClient.setQueryData(["Expenses"], (oldData) => {
-        if (!oldData || !oldData.data) return queryClient.invalidateQueries({queryKey:["Expenses"]});
-
-        const updatedList = oldData.data.filter(
-          (expense) => expense.id !== variables.id
-        );
-
-        return {
-          ...oldData,
-          data: updatedList,
-        };
-      });
-
-      showToast(data.message || "Expense deleted successfully", "success");
-    },
-    onError: (error) => {
-      showToast("Failed to delete expense", "error");
-    },
-  });
-}

src/repositories/ExpsenseRepository.jsx

@@ -13,7 +13,7 @@ const ExpenseRepository = {
   GetExpenseDetails:(id)=>api.get(`/api/Expense/details/${id}`),
   CreateExpense:(data)=>api.post("/api/Expense/create",data),
   UpdateExpense:(id,data)=>api.put(`/api/Expense/edit/${id}`,data),
-  DeleteExpense:(id)=>api.delete(`/api/Expense/delete/${id}`),
+  DeleteExpense:(id)=>api.delete(`/api/Expense/edit/${id}`),
 
   ActionOnExpense:(data)=>api.post('/api/expense/action',data),