fixed currency format list - Expense, PR

src/components/Expenses/ExpenseList.jsx

@@ -12,6 +12,7 @@ import {
 } from "../../utils/constants";
 import {
   formatCurrency,
+  formatFigure,
   getColorNameFromHex,
   useDebounce,
 } from "../../utils/appUtils";
@@ -26,14 +27,18 @@ import { useNavigate } from "react-router-dom";
 const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
   const [deletingId, setDeletingId] = useState(null);
   const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const { setViewExpense, setManageExpenseModal, filterData, removeFilterChip } = useExpenseContext();
+  const {
+    setViewExpense,
+    setManageExpenseModal,
+    filterData,
+    removeFilterChip,
+  } = useExpenseContext();
   const IsExpenseEditable = useHasUserPermission();
   const IsExpesneApprpve = useHasUserPermission(APPROVE_EXPENSE);
   const [currentPage, setCurrentPage] = useState(1);
   const debouncedSearch = useDebounce(searchText, 500);
   const navigate = useNavigate();
 
-
   const { mutate: DeleteExpense, isPending } = useDeleteExpense();
   const { data, isLoading, isError, isInitialLoading, error } = useExpenseList(
     ITEMS_PER_PAGE,
@@ -80,8 +85,9 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
           displayField = "Status";
           break;
         case "submittedBy":
-          key = `${item?.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
+          key = `${item?.createdBy?.firstName ?? ""} ${
-            }`.trim();
+            item.createdBy?.lastName ?? ""
+          }`.trim();
           displayField = "Submitted By";
           break;
         case "project":
@@ -139,11 +145,14 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
       label: "Submitted By",
       align: "text-start",
       getValue: (e) =>
-        `${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
+        `${e.createdBy?.firstName ?? ""} ${
-          }`.trim() || "N/A",
+          e.createdBy?.lastName ?? ""
+        }`.trim() || "N/A",
       customRender: (e) => (
-        <div className="d-flex align-items-center cursor-pointer"
+        <div
-          onClick={() => navigate(`/employee/${e.createdBy?.id}`)}>
+          className="d-flex align-items-center cursor-pointer"
+          onClick={() => navigate(`/employee/${e.createdBy?.id}`)}
+        >
           <Avatar
             size="xs"
             classAvatar="m-0"
@@ -151,8 +160,9 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
             lastName={e.createdBy?.lastName}
           />
           <span className="text-truncate">
-            {`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
+            {`${e.createdBy?.firstName ?? ""} ${
-              }`.trim() || "N/A"}
+              e.createdBy?.lastName ?? ""
+            }`.trim() || "N/A"}
           </span>
         </div>
       ),
@@ -166,7 +176,15 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
     {
       key: "amount",
       label: "Amount",
-      getValue: (e) => <>{formatCurrency(e?.amount)}</>,
+      getValue: (e) => (
+        <>
+          {" "}
+          {formatFigure(e?.amount, {
+            type: "currency",
+            currency: e?.currency?.currencyCode,
+          })}
+        </>
+      ),
       isAlwaysVisible: true,
       align: "text-end",
     },
@@ -176,16 +194,26 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
       align: "text-center",
       getValue: (e) => (
         <span
-          className={`badge bg-label-${getColorNameFromHex(e?.status?.color) || "secondary"
+          className={`badge bg-label-${
-            }`}
+            getColorNameFromHex(e?.status?.color) || "secondary"
+          }`}
         >
           {e.status?.name || "Unknown"}
         </span>
       ),
     },
   ];
- const headers = ["Expense Category","Payment Mode","Submitted By","Submitted","Amount","Status","Action"]
+  const headers = [
-  if (isInitialLoading && !data) return <ExpenseTableSkeleton headers={headers} />;
+    "Expense Category",
+    "Payment Mode",
+    "Submitted By",
+    "Submitted",
+    "Amount",
+    "Status",
+    "Action",
+  ];
+  if (isInitialLoading && !data)
+    return <ExpenseTableSkeleton headers={headers} />;
   if (isError) return <div>{error?.message}</div>;
 
   const grouped = groupBy
@@ -210,7 +238,6 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
     );
   };
 
-
   return (
     <>
       {IsDeleteModalOpen && (
@@ -238,9 +265,6 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
           className="card-datatable table-responsive "
           id="horizontal-example"
         >
-
-
-
           <div className="dataTables_wrapper no-footer px-2 ">
             <table className="table border-top dataTable text-nowrap">
               <thead>
@@ -288,15 +312,32 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                               (col.isAlwaysVisible || groupBy !== col.key) && (
                                 <td
                                   key={col.key}
-                                  className={`d-table-cell ml-2  ${col.align ?? ""} `}
+                                  className={`d-table-cell ml-2  ${
+                                    col.align ?? ""
+                                  } `}
                                 >
-                                 <div className={`d-flex px-2 ${col.key === "status" ? "justify-content-center":""}
+                                  <div
-                                 ${col.key === "amount" ? "justify-content-end":""}
+                                    className={`d-flex px-2 ${
-                                 ${col.key === "submitted" ? "justify-content-center":""}
+                                      col.key === "status"
-                                 `}>{col.customRender
+                                        ? "justify-content-center"
-                                    ? col.customRender(expense)
+                                        : ""
-                                    : col.getValue(expense)}
+                                    }
-                                    </div>
+                                 ${
+                                   col.key === "amount"
+                                     ? "justify-content-end"
+                                     : ""
+                                 }
+                                 ${
+                                   col.key === "submitted"
+                                     ? "justify-content-center"
+                                     : ""
+                                 }
+                                 `}
+                                  >
+                                    {col.customRender
+                                      ? col.customRender(expense)
+                                      : col.getValue(expense)}
+                                  </div>
                                 </td>
                               )
                           )}
@@ -385,13 +426,13 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
             </table>
           </div>
         </div>
-            {data?.data?.length > 0 && (
+        {data?.data?.length > 0 && (
-              <Pagination
+          <Pagination
-                currentPage={currentPage}
+            currentPage={currentPage}
-                totalPages={data.totalPages}
+            totalPages={data.totalPages}
-                onPageChange={paginate}
+            onPageChange={paginate}
-              />
+          />
-            )}
+        )}
       </div>
     </>
   );

src/components/PaymentRequest/PaymentRequestList.jsx

@@ -6,6 +6,7 @@ import {
 } from "../../utils/constants";
 import {
   formatCurrency,
+  formatFigure,
   getColorNameFromHex,
   useDebounce,
 } from "../../utils/appUtils";
@@ -43,8 +44,9 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
           displayField = "Status";
           break;
         case "submittedBy":
-          key = `${item?.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
+          key = `${item?.createdBy?.firstName ?? ""} ${
-            }`.trim();
+            item.createdBy?.lastName ?? ""
+          }`.trim();
           displayField = "Submitted By";
           break;
         case "project":
@@ -97,8 +99,9 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
       label: "Submitted By",
       align: "text-start",
       getValue: (e) =>
-        `${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
+        `${e.createdBy?.firstName ?? ""} ${
-          }`.trim() || "N/A",
+          e.createdBy?.lastName ?? ""
+        }`.trim() || "N/A",
       customRender: (e) => (
         <div
           className="d-flex align-items-center cursor-pointer"
@@ -111,8 +114,9 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
             lastName={e.createdBy?.lastName}
           />
           <span className="text-truncate">
-            {`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
+            {`${e.createdBy?.firstName ?? ""} ${
-              }`.trim() || "N/A"}
+              e.createdBy?.lastName ?? ""
+            }`.trim() || "N/A"}
           </span>
         </div>
       ),
@@ -128,9 +132,10 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
       label: "Amount",
       align: "text-end",
       getValue: (e) =>
-        e?.amount
+        formatFigure(e?.amount, {
-          ? `${e?.currency?.symbol ? e.currency.symbol + " " : ""}${e.amount.toLocaleString()}`
+          type: "currency",
-          : "N/A",
+          currency: e?.currency?.currencyCode,
+        }),
     },
     {
       key: "expenseStatus",
@@ -138,8 +143,9 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
       align: "text-center",
       getValue: (e) => (
         <span
-          className={`badge bg-label-${getColorNameFromHex(e?.expenseStatus?.color) || "secondary"
+          className={`badge bg-label-${
-            }`}
+            getColorNameFromHex(e?.expenseStatus?.color) || "secondary"
+          }`}
         >
           {e?.expenseStatus?.name || "Unknown"}
         </span>
@@ -175,10 +181,10 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
 
   const grouped = groupBy
     ? Object.fromEntries(
-      Object.entries(groupByField(data?.data ?? [], groupBy)).sort(([keyA], [keyB]) =>
+        Object.entries(groupByField(data?.data ?? [], groupBy)).sort(
-        keyA.localeCompare(keyB)
+          ([keyA], [keyB]) => keyA.localeCompare(keyB)
+        )
       )
-    )
     : { All: data?.data ?? [] };
 
   const IsGroupedByDate = [