Merge branch 'upgrade_Expense' of https://git.marcoaiot.com/admin/marco.pms.web into Recurring_Expense

src/components/Dashboard/ExpenseByProject.jsx

@@ -13,7 +13,7 @@ const ExpenseByProject = () => {
   const [viewMode, setViewMode] = useState("Category");
   const [chartData, setChartData] = useState({ categories: [], data: [] });
 
-  const { ExpenseTypes, loading: typeLoading } = useExpenseCategory();
+  const { ExpenseCategories, loading: typeLoading } = useExpenseCategory();
 
   const { data: expenseApiData, isLoading } = useExpenseDataByProject(
     projectId,
@@ -133,7 +133,7 @@ const ExpenseByProject = () => {
               style={{ maxWidth: "200px" }}
             >
               <option value="">All Types</option>
-              {ExpenseTypes.map((type) => (
+              {ExpenseCategories?.map((type) => (
                 <option key={type.id} value={type.id}>
                   {type.name}
                 </option>

src/components/Expenses/ExpenseStatusLogs.jsx

@@ -2,7 +2,8 @@ import { useState, useMemo } from "react";
 import Avatar from "../common/Avatar";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import Timeline from "../common/TimeLine";
-
+import moment from "moment";
+import { getColorNameFromHex } from "../../utils/appUtils";
 const ExpenseStatusLogs = ({ data }) => {
   const [visibleCount, setVisibleCount] = useState(4);
 
@@ -18,32 +19,33 @@ const ExpenseStatusLogs = ({ data }) => {
     [sortedLogs, visibleCount]
   );
 
-const timelineData = useMemo(() => {
+  const timelineData = useMemo(() => {
     return logsToShow.map((log, index) => ({
       id: index + 1,
       title: log.nextStatus?.name || "Status Updated",
       description: log.nextStatus?.description || "",
-      timeAgo: formatTimeAgo(log.updatedAt),
+      timeAgo: moment.utc(log?.updatedAt).local().fromNow(),
-      color: log.nextStatus?.color || "primary",
+      color: getColorNameFromHex(log.nextStatus?.color) || "primary",
       users: log.updatedBy
         ? [
             {
-              name: `${log.updatedBy.firstName || ""} ${` log?.updatedBy?.lastName` || ""}`.trim(),
+              firstName: log.updatedBy.firstName || "",
+              lastName: log?.updatedBy?.lastName || "",
               role: log.updatedBy.jobRoleName || "",
-              avatar: log.updatedBy.photo || "assets/img/avatars/default.png",
+              avatar: log.updatedBy.photo,
             },
           ]
         : [],
     }));
-  }, [logsToShow])
+  }, [logsToShow]);
 
   const handleShowMore = () => {
     setVisibleCount((prev) => prev + 4);
   };
 
   return (
-    <>
+    <div className="page-min-h overflow-auto">
-      <div className="row g-2">
+      {/* <div className="row g-2">
         {logsToShow.map((log) => (
           <div key={log.id} className="col-12 d-flex align-items-start mb-1">
             <Avatar
@@ -81,13 +83,11 @@ const timelineData = useMemo(() => {
             Show More
           </button>
         </div>
-      )}
+      )} */}
 
       <Timeline items={timelineData} />
-    </>
+    </div>
   );
 };
 
 export default ExpenseStatusLogs;
-  
-

src/components/PaymentRequest/ManagePaymentRequest.jsx

@@ -30,7 +30,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
 
     const { profile } = useProfile();
 
-    const schema = PaymentRequestSchema(ExpenseTypes);
+    const schema = PaymentRequestSchema(ExpenseCategories);
     const { register, control, watch, handleSubmit, setValue, reset, formState: { errors }, } = useForm({
         resolver: zodResolver(schema),
         defaultValues: defaultPaymentRequest,
@@ -492,7 +492,7 @@ setValue('payee',profile?.employeeInfo.id)
 
                     <button
                         type="reset"
-                        disabled={createPending}
+                        disabled={createPending || isPending}
                         onClick={handleClose}
                         className="btn btn-label-secondary btn-sm mt-3"
                     >
@@ -501,9 +501,9 @@ setValue('payee',profile?.employeeInfo.id)
                     <button
                         type="submit"
                         className="btn btn-primary btn-sm mt-3"
-                        disabled={createPending}
+                        disabled={createPending || isPending}
                     >
-                        {createPending
+                        {createPending || isPending
                             ? "Please Wait..."
                             : requestToEdit
                                 ? "Update"

src/components/PaymentRequest/PaymentRequestList.jsx

@@ -1,5 +1,9 @@
 import React, { useState } from "react";
-import { EXPENSE_DRAFT, EXPENSE_REJECTEDBY, ITEMS_PER_PAGE } from "../../utils/constants";
+import {
+  EXPENSE_DRAFT,
+  EXPENSE_REJECTEDBY,
+  ITEMS_PER_PAGE,
+} from "../../utils/constants";
 import {
   formatCurrency,
   getColorNameFromHex,
@@ -13,6 +17,7 @@ import { ExpenseTableSkeleton } from "../Expenses/ExpenseSkeleton";
 import ConfirmModal from "../common/ConfirmModal";
 import { useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
+import Error from "../common/Error";
 
 const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
   const { setManageRequest, setVieRequest } = usePaymentRequestContext();
@@ -37,7 +42,8 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
           displayField = "Status";
           break;
         case "submittedBy":
-          key = `${item?.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
+          key = `${item?.createdBy?.firstName ?? ""} ${
+            item.createdBy?.lastName ?? ""
           }`.trim();
           displayField = "Submitted By";
           break;
@@ -91,7 +97,8 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
       label: "Submitted By",
       align: "text-start",
       getValue: (e) =>
-        `${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
+        `${e.createdBy?.firstName ?? ""} ${
+          e.createdBy?.lastName ?? ""
         }`.trim() || "N/A",
       customRender: (e) => (
         <div
@@ -105,7 +112,8 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
             lastName={e.createdBy?.lastName}
           />
           <span className="text-truncate">
-            {`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
+            {`${e.createdBy?.firstName ?? ""} ${
+              e.createdBy?.lastName ?? ""
             }`.trim() || "N/A"}
           </span>
         </div>
@@ -135,7 +143,8 @@ 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"}
@@ -147,7 +156,8 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
   const [currentPage, setCurrentPage] = useState(1);
   const debouncedSearch = useDebounce(search, 500);
 
-  const { data, isLoading, isError, error, isFetching } = usePaymentRequestList(
+  const { data, isLoading, isError, error, isRefetching, refetch } =
+    usePaymentRequestList(
       ITEMS_PER_PAGE,
       currentPage,
       filters,
@@ -159,12 +169,7 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
   const totalPages = data?.data?.totalPages || 1;
 
   if (isError) {
-    return (
+    return <Error error={error} isFeteching={isRefetching} refetch={refetch} />;
-      <div className="text-center text-danger py-5">
-        <p>Failed to load payment requests.</p>
-        <small>{error?.message || "Something went wrong."}</small>
-      </div>
-    );
   }
   const header = [
     "Request ID",
@@ -188,13 +193,14 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
   const canEditExpense = (paymentRequest) => {
     return (
       (paymentRequest?.expenseStatus?.id === EXPENSE_DRAFT ||
-        EXPENSE_REJECTEDBY.includes(paymentRequest?.expenseStatus?.id)) &&
+        EXPENSE_REJECTEDBY.includes(paymentRequest?.expenseStatus.id)) &&
       paymentRequest?.createdBy?.id === SelfId
     );
   };
   const canDetetExpense = (request) => {
     return (
-      request?.expenseStatus?.id === EXPENSE_DRAFT && request?.createdBy?.id === SelfId
+      request?.expenseStatus?.id === EXPENSE_DRAFT &&
+      request?.createdBy?.id === SelfId
     );
   };
 
@@ -282,8 +288,7 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
                                 })
                               }
                             ></i>
-                            {canDetetExpense(paymentRequest) &&
+                            {canEditExpense(paymentRequest) && (
-                              canEditExpense(paymentRequest) && (
                               <div className="dropdown z-2">
                                 <button
                                   type="button"
@@ -311,10 +316,13 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
                                   >
                                     <a className="dropdown-item px-2 cursor-pointer py-1">
                                       <i className="bx bx-edit text-primary  bx-xs me-2"></i>
-                                        <span className="align-left ">Modify</span>
+                                      <span className="align-left ">
+                                        Modify
+                                      </span>
                                     </a>
                                   </li>
 
+                                  {canDetetExpense(paymentRequest) && (
                                     <li
                                       onClick={() => {
                                         setIsDeleteModalOpen(true);
@@ -323,11 +331,15 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
                                     >
                                       <a className="dropdown-item  px-2 cursor-pointer py-1">
                                         <i className="bx bx-trash text-danger  bx-xs me-2"></i>
-                                        <span className="align-left">Delete</span>
+                                        <span className="align-left">
+                                          Delete
+                                        </span>
                                       </a>
                                     </li>
+                                  )}
                                 </ul>
-                                </div>)}
+                              </div>
+                            )}
                           </div>
                         </td>
                       </tr>
@@ -355,7 +367,8 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
                 {[...Array(totalPages)].map((_, index) => (
                   <li
                     key={index}
-                    className={`page-item ${currentPage === index + 1 ? "active" : ""
+                    className={`page-item ${
+                      currentPage === index + 1 ? "active" : ""
                     }`}
                   >
                     <button

src/components/PaymentRequest/ViewPaymentRequest.jsx

@@ -118,21 +118,22 @@ const ViewPaymentRequest = ({ requestId }) => {
       </div>
       <div className="row mb-1">
         <div className="col-12 col-sm-6 col-md-8">
-          <div className="col-12 text-start fw-semibold my-2">
+          <div className="row">
+            <div className="col-12 text-start fw-semibold mb-2">
               {data?.paymentRequestUID}
             </div>
-          {/* Row 1 */}
             <div className="col-md-6 mb-3">
-            <div className="d-flex">
+              <div className="d-block d-md-flex align-items-center">
                 <label
                   className="form-label me-2 mb-0 fw-semibold text-start"
                   style={{ minWidth: "130px" }}
                 >
-                Project Name :
+                  Project Name:
                 </label>
-              <div className="text-muted">{data.project.name}</div>
+                <div className="text-muted">{data?.project?.name || "—"}</div>
               </div>
             </div>
+
             <div className="col-md-6 mb-3">
               <div className="d-flex">
                 <label
@@ -221,7 +222,8 @@ const ViewPaymentRequest = ({ requestId }) => {
                 </label>
                 <span
                   className={`badge bg-label-${
-                  getColorNameFromHex(data?.expenseStatus?.color) || "secondary"
+                    getColorNameFromHex(data?.expenseStatus?.color) ||
+                    "secondary"
                   }`}
                 >
                   {data?.expenseStatus?.name}
@@ -447,7 +449,8 @@ const ViewPaymentRequest = ({ requestId }) => {
                   </div>
                 )}
                 <div className="col-12 mb-3 text-start">
-                {((nextStatusWithPermission.length > 0 && !isRejectedRequest) ||
+                  {((nextStatusWithPermission.length > 0 &&
+                    !isRejectedRequest) ||
                     (isRejectedRequest && isCreatedBy)) && (
                     <>
                       <Label className="form-label me-2 mb-0" required>
@@ -492,6 +495,7 @@ const ViewPaymentRequest = ({ requestId }) => {
               </>
             )}
           </div>
+        </div>
         <div className="col-12 col-sm-6 col-md-4">
           <ExpenseStatusLogs data={data} />
         </div>

src/components/common/Error.jsx

@@ -1,20 +1,80 @@
-import React from 'react'
+import React from "react";
+
+const Error = ({ error = {}, isFeteching=false, refetch, close }) => {
+  const statusCode = error.statusCode || error?.response?.status || "Error";
+
+  const message =
+    error.message ||
+    error?.response?.data?.message ||
+    "Something went wrong. Please try again later.";
+
+  const getErrorInfo = (code) => {
+    if (code >= 500) {
+      return {
+        icon: "bx bx-server text-danger",
+        title: "Internal Server Error",
+        subtitle: "Our servers are currently experiencing issues.",
+      };
+    }
+    if (code === 404) {
+      return {
+        icon: "bx bx-error text-warning",
+        title: "Page Not Found",
+        subtitle: "The requested resource could not be found.",
+      };
+    }
+    if (code === 403) {
+      return {
+        icon: "bx bx-block text-danger",
+        title: "Access Denied",
+        subtitle: "You do not have permission to access this resource.",
+      };
+    }
+    if (code === 401) {
+      return {
+        icon: "bx bx-lock text-danger",
+        title: "Unauthorized",
+        subtitle: "Please log in to continue.",
+      };
+    }
+    if (code === 0 || code === "ERR_NETWORK") {
+      return {
+        icon: "bx bx-wifi-off text-secondary",
+        title: "Network Error",
+        subtitle: "Please check your internet connection.",
+      };
+    }
+    return {
+      icon: "bx bx-error-circle text-danger",
+      title: "Unexpected Error",
+      subtitle: "An unknown error occurred.",
+    };
+  };
+
+  const { icon, title, subtitle } = getErrorInfo(statusCode);
 
-const Error = ({error,close}) => {
-  console.log(error)
   return (
-      <div className="container text-center py-5">
+    <div className="container-fluid d-flex flex-column align-items-center justify-content-center text-center py-5">
-      <h1 className="display-4 fw-bold text-danger">{error.statusCode || error?.response?.status
-}</h1>
-      <h2 className="mb-3">Internal Server Error</h2>
-      <p className="lead">
-        {error.message}
-      </p>
-      <a href="/" className="btn btn-primary btn-sm mt-3" onClick={()=>close()}>
-        Go to Home
-      </a>
-    </div>
-  )
-}
 
-export default Error
+      <h4 className="mb-2">{title}</h4>
+      <p className="text-muted mb-2">{subtitle}</p>
+
+      {message && (
+        <p className="lead small text-body-secondary mb-4">{message}</p>
+      )}
+
+      <div class="d-grid gap-2 col-4 mx-auto">
+        <button
+          class="btn btn-sm btn-outline-secondary btn-lg"
+          type="button"
+          onClick={refetch}
+          disabled={isFeteching}
+        >
+          <i className={`bx bx-refresh ${isFeteching ? "bx-spin":""} me-1`}></i> Retry
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Error;

src/components/common/TimeLine.jsx

@@ -1,15 +1,25 @@
-
 import React from "react";
+import Avatar from "./Avatar";
 
 const Timeline = ({ items = [], transparent = true }) => {
   return (
-    <ul className={`timeline ${transparent ? "timeline-transparent text-start" : ""}`}>
+    <ul
+      className={`timeline ${
+        transparent ? "timeline-transparent text-start" : ""
+      }`}
+    >
       {items.map((item) => (
         <li
           key={item.id}
-          className={`timeline-item ${transparent ? "timeline-item-transparent" : ""}`}
+          className={`timeline-item ${
+            transparent ? "timeline-item-transparent" : ""
+          }`}
         >
-          <span className={`timeline-point timeline-point-${item.color || "primary"}`}></span>
+          <span
+            className={`timeline-point timeline-point-${
+              item.color || "primary"
+            }`}
+          ></span>
 
           <div className="timeline-event">
             <div className="timeline-header mb-3 d-flex justify-content-between">
@@ -26,7 +36,14 @@ const Timeline = ({ items = [], transparent = true }) => {
                     key={i}
                     className="badge bg-lighter rounded d-flex align-items-center gap-2 p-2"
                   >
-                    {att.icon && <img src={att.icon} alt="file" width="15" className="me-2" />}
+                    {att.icon && (
+                      <img
+                        src={att.icon}
+                        alt="file"
+                        width="15"
+                        className="me-2"
+                      />
+                    )}
                     <span className="h6 mb-0">{att.name}</span>
                   </div>
                 ))}
@@ -47,17 +64,18 @@ const Timeline = ({ items = [], transparent = true }) => {
                           height="32"
                         />
                       ) : (
-                        <span className="avatar-initial rounded-circle pull-up bg-light">
+                        <Avatar
-                          {user.name}
+                          firstName={user.firstName}
-                        </span>
+                          lastName={user.lastName}
+                        />
                       )}
                     </li>
                   ))}
                 </ul>
 
-                {item.users[0]?.role && (
+                {item.users?.length === 1 && (
-                  <div className="ms-2">
+                  <div className="m-0">
-                    <p className="mb-0 small fw-medium">{item.users[0].name}</p>
+                    <p className="mb-0 small fw-medium">{`${item.users[0].firstName} ${item.users[0].lastName}`}</p>
                     <small>{item.users[0].role}</small>
                   </div>
                 )}

src/utils/constants.jsx

@@ -67,8 +67,8 @@ export const PROCESS_EXPENSE = "ea5a1529-4ee8-4828-80ea-0e23c9d4dd11";
 export const EXPENSE_MANAGE = "ea5a1529-4ee8-4828-80ea-0e23c9d4dd11";
 
 export const EXPENSE_REJECTEDBY = [
-  "d1ee5eec-24b6-4364-8673-a8f859c60729",
   "965eda62-7907-4963-b4a1-657fb0b2724b",
+  "d1ee5eec-24b6-4364-8673-a8f859c60729",
 ];