Adding processpending in ExpenseStatus.

src/components/Dashboard/ExpenseStatus.jsx

@@ -42,47 +42,37 @@ const ExpenseStatus = () => {
       </div>
 
       <div className="card-body ">
-        <div className=" py-0 text-start mb-2">
+
-         {isManageExpense && ( <div className="d-flex justify-content-between align-items-center">
-            <div className="d-block">
-              <span className={`fs-semibold d-block ${countDigit(data?.totalAmount) > 3 ? "text-base":"text-lg" }`}>Project Spendings:</span>{" "}
-              <small className="d-block text-xxs text-gary-80">{`(All Processed Payments)`}</small>
-            </div>
-            <span className={`text-end text-royalblue ${countDigit(data?.totalAmount) > 3 ? "text-":"text-3xl" }  text-md`}>
-              {formatCurrency(data?.totalAmount)}
-            </span>
-          </div>)}
-        </div>
         <div className="report-list text-start">
           {[
             {
               title: "Pending Payment",
-              count: data?.approvePending?.count,
+              count: data?.processPending?.count || 0,
-              amount: data?.approvePending?.totalAmount,
+              amount: data?.processPending?.totalAmount || 0,
               icon: "bx bx-rupee",
               iconColor: "text-primary",
               status: EXPENSE_STATUS.payment_pending,
             },
             {
               title: "Pending Approve",
-              count: data?.processPending?.count,
+              count: data?.approvePending?.count || 0,
-              amount: data?.processPending?.totalAmount,
+              amount: data?.approvePending?.totalAmount || 0,
               icon: "fa-solid fa-check",
               iconColor: "text-warning",
               status: EXPENSE_STATUS.approve_pending,
             },
             {
               title: "Pending Review",
-              count: data?.reviewPending?.count,
+              count: data?.reviewPending?.count || 0,
-              amount: data?.reviewPending?.totalAmount,
+              amount: data?.reviewPending?.totalAmount || 0,
               icon: "bx bx-search-alt-2",
               iconColor: "text-secondary",
               status: EXPENSE_STATUS.review_pending,
             },
             {
               title: "Draft",
-              count: data?.submited?.count,
+              count: data?.submited?.count || 0,
-              amount: data?.submited?.totalAmount,
+              amount: data?.submited?.totalAmount || 0,
               icon: "bx bx-file-blank",
               iconColor: "text-info",
               status: EXPENSE_STATUS.daft,
@@ -102,14 +92,20 @@ const ExpenseStatus = () => {
                 <div className="d-flex justify-content-between align-items-center w-100 flex-wrap gap-2">
                   <div className="d-flex flex-column gap-2">
                     <span className="fw-bold">{item?.title}</span>
-                    {item?.amount ?   <small className="mb-0 text-primary">
+                    {item?.amount ? (
-                      {formatCurrency(item?.amount)}
+                      <small className="mb-0 text-primary">
-                    </small> :""}
+                        {formatCurrency(item?.amount)}
+                      </small>
+                    ) : (
+                      <small className="mb-0 text-primary">{formatCurrency(0)}</small>
+                    )}
                   </div>
-                  <div className="">
+                  <div>
-                    {" "}
+                    <small
-                    <small className={`text-royalblue ${countDigit(item?.count) >= 3 ? "text-xl" : "text-2xl"} text-gray-500`}>
+                      className={`text-royalblue ${countDigit(item?.count || 0) >= 3 ? "text-xl" : "text-2xl"
-                   {item?.count }
+                        } text-gray-500`}
+                    >
+                      {item?.count || 0}
                     </small>
                     <small className="text-muted fs-semibold text-royalblue text-md">
                       <i className="bx bx-chevron-right"></i>
@@ -120,6 +116,38 @@ const ExpenseStatus = () => {
             </div>
           ))}
         </div>
+
+        <div className=" py-0 text-start mb-2">
+          {isManageExpense && (
+            <div
+              className="d-flex justify-content-between align-items-center cursor-pointer"
+              onClick={() => handleNavigate(EXPENSE_STATUS.process_pending)}
+            >
+              <div className="d-block">
+                <span
+                  className={`fs-semibold d-block ${countDigit(data?.totalAmount || 0) > 3 ? "text-base" : "text-lg"
+                    }`}
+                >
+                  Project Spendings:
+                </span>{" "}
+                <small className="d-block text-xxs text-gary-80">
+                  (All Processed Payments)
+                </small>
+              </div>
+              <div className="d-flex align-items-center gap-2">
+                <span
+                  className={`text-end text-royalblue ${countDigit(data?.totalAmount || 0) > 3 ? "text-" : "text-3xl"
+                    } text-md`}
+                >
+                  {formatCurrency(data?.totalAmount || 0)}
+                </span>
+                <small className="text-muted fs-semibold text-royalblue text-md">
+                  <i className="bx bx-chevron-right"></i>
+                </small>
+              </div>
+            </div>
+          )}
+        </div>
       </div>
     </>
   );

src/utils/constants.jsx

@@ -152,6 +152,7 @@ export const EXPENSE_STATUS = {
   review_pending:"6537018f-f4e9-4cb3-a210-6c3b2da999d7",
   payment_pending:"f18c5cfd-7815-4341-8da2-2c2d65778e27",
   approve_pending:"4068007f-c92f-4f37-a907-bc15fe57d4d8",
+  process_pending:"61578360-3a49-4c34-8604-7b35a3787b95"
 
 }