From a3313f6c0ada610999ed100a06a3a67dc5c62aaa Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Wed, 30 Jul 2025 11:12:56 +0530
Subject: [PATCH] fixed action button visibilities

---
 src/components/Expenses/ExpenseList.jsx | 101 ++++++++++--------------
 1 file changed, 41 insertions(+), 60 deletions(-)

diff --git a/src/components/Expenses/ExpenseList.jsx b/src/components/Expenses/ExpenseList.jsx
index aba32da0..246e76df 100644
--- a/src/components/Expenses/ExpenseList.jsx
+++ b/src/components/Expenses/ExpenseList.jsx
@@ -11,20 +11,21 @@ import ConfirmModal from "../common/ConfirmModal";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { useSelector } from "react-redux";
 
-const ExpenseList = ({filters}) => {
+const ExpenseList = ({ filters }) => {
   const [deletingId, setDeletingId] = useState(null);
   const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const { setViewExpense, setManageExpenseModal } = useExpenseContext();
-  const IsExpenseEditable = useHasUserPermission()
-  const IsExpesneApprpve = useHasUserPermission(APPROVE_EXPENSE)
+  const IsExpenseEditable = useHasUserPermission();
+  const IsExpesneApprpve = useHasUserPermission(APPROVE_EXPENSE);
   const [currentPage, setCurrentPage] = useState(1);
   const pageSize = 10;
 
-
   const { mutate: DeleteExpense, isPending } = useDeleteExpense();
   const { data, isLoading, isError, isInitialLoading, error, isFetching } =
     useExpenseList(10, currentPage, filters);
-  const SelfId = useSelector((store)=>store?.globalVariables?.loginUser?.employeeInfo?.id)
+  const SelfId = useSelector(
+    (store) => store?.globalVariables?.loginUser?.employeeInfo?.id
+  );
 
   const handleDelete = (id) => {
     setDeletingId(id);
@@ -64,7 +65,7 @@ const ExpenseList = ({filters}) => {
     const grouped = {};
 
     expenses.forEach((expense) => {
-      const dateKey = expense.transactionDate.split("T")[0]; 
+      const dateKey = expense.transactionDate.split("T")[0];
       if (!grouped[dateKey]) grouped[dateKey] = [];
       grouped[dateKey].push(expense);
     });
@@ -123,17 +124,6 @@ const ExpenseList = ({filters}) => {
             >
               <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"
@@ -199,7 +189,7 @@ const ExpenseList = ({filters}) => {
                   </th>
                 </tr>
               </thead>
-              <tbody >
+              <tbody>
                 {!isInitialLoading &&
                   groupExpensesByDateAndStatus(items).map(
                     ({ date, expenses }) => (
@@ -208,8 +198,9 @@ const ExpenseList = ({filters}) => {
                           <td colSpan={7} className="text-start">
                             <strong>{formatUTCToLocalTime(date)}</strong>
                           </td>
-                        </tr>                     {expenses.map((expense) => (
-                          <tr key={expense.id} >
+                        </tr>{" "}
+                        {expenses.map((expense) => (
+                          <tr key={expense.id}>
                             <td className="text-start d-table-cell ms-5">
                               {expense.expensesType?.name || "N/A"}
                             </td>
@@ -259,44 +250,34 @@ const ExpenseList = ({filters}) => {
                                   ></i>
                                 </span>
 
-                                <span className="cursor-pointer">
-                                  {(expense.status.name === "Draft" ||
-                                    expense.status.name === "Rejected") &&
-                                  expense.createdBy.id ===
-                                    SelfId ? (
-                                    <i
-                                      className="bx bx-edit bx-sm text-secondary"
-                                      onClick={() =>
-                                        setManageExpenseModal({
-                                          IsOpen: true,
-                                          expenseId: expense.id,
-                                        })
-                                      }
-                                    ></i>
-                                  ) : (
-                                    <i
-                                      className="bx bx-edit bx-sm"
-                                      style={{ visibility: "hidden" }}
-                                    ></i>
+                                {(expense.status.name === "Draft" ||
+                                  expense.status.name === "Rejected") &&
+                                  expense.createdBy.id === SelfId && (
+                                    <span className="cursor-pointer">
+                                      <i
+                                        className="bx bx-edit bx-sm text-secondary"
+                                        onClick={() =>
+                                          setManageExpenseModal({
+                                            IsOpen: true,
+                                            expenseId: expense.id,
+                                          })
+                                        }
+                                      ></i>
+                                    </span>
                                   )}
-                                </span>
 
-                                <span className="cursor-pointer">
-                                  {(expense.status.name === "Draft" && expense?.createdBy?.id === SelfId ) ? (
-                                    <i
-                                      className="bx bx-trash bx-sm text-danger"
-                                      onClick={() => {
-                                        setIsDeleteModalOpen(true);
-                                        setDeletingId(expense.id);
-                                      }}
-                                    ></i>
-                                  ) : (
-                                    <i
-                                      className="bx bx-trash bx-sm"
-                                      style={{ visibility: "hidden" }}
-                                    ></i>
+                                {expense.status.name === "Draft" &&
+                                  expense?.createdBy?.id === SelfId && (
+                                    <span className="cursor-pointer">
+                                      <i
+                                        className="bx bx-trash bx-sm text-danger"
+                                        onClick={() => {
+                                          setIsDeleteModalOpen(true);
+                                          setDeletingId(expense.id);
+                                        }}
+                                      ></i>
+                                    </span>
                                   )}
-                                </span>
                               </div>
                             </td>
                           </tr>
@@ -305,11 +286,11 @@ const ExpenseList = ({filters}) => {
                     )
                   )}
 
-                 {!isInitialLoading && items.length === 0 &&  <tr rowSpan={8} style={{height:"200px"}}>
-                    <td colSpan={8}>
-                      No Expnese Found
-                    </td>
-                  </tr>}
+                {!isInitialLoading && items.length === 0 && (
+                  <tr rowSpan={8} style={{ height: "200px" }}>
+                    <td colSpan={8}>No Expnese Found</td>
+                  </tr>
+                )}
               </tbody>
             </table>
           </div>