Merge branch 'Feature#796_EditExpense' of https://git.marcoaiot.com/admin/marco.pms.web into Feature#796_EditExpense

src/components/Expenses/ExpenseList.jsx

@@ -173,7 +173,7 @@ const ExpenseList = () => {
                         </span>
                       </div>
                     </td>
-                    <td className="d-none d-md-table-cell text-end"><i className='bx bx-rupee b-xs'></i>{expense.amount}</td>
+                    <td className="d-none d-md-table-cell text-end"><i className='bx bx-rupee b-xs'></i>{expense?.amount}</td>
                     <td>
                       <span
                       className={`badge bg-label-${getColorNameFromHex(expense.status.color) || 'secondary'}`}

src/components/Expenses/ViewExpense.jsx

@@ -5,12 +5,13 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ActionSchema } from "./ExpenseSchema";
 import { useExpenseContext } from "../../pages/Expense/ExpensePage";
+import { getColorNameFromHex } from "../../utils/appUtils";
+import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
 
 const ViewExpense = ({ ExpenseId }) => {
   const { data, isLoading, isError, error } = useExpense(ExpenseId);
   const [imageLoaded, setImageLoaded] = useState({});
   const { setDocumentView } = useExpenseContext();
-
   const {
     register,
     handleSubmit,
@@ -36,16 +37,7 @@ const ViewExpense = ({ ExpenseId }) => {
     MakeAction(Payload);
   };
 
-  if (isLoading) {
-    return (
-      <div
-        className="d-flex justify-content-center align-items-center"
-        style={{ minHeight: "300px" }}
-      >
-        <div className="fs-5 text-muted">Loading...</div>
-      </div>
-    );
-  }
+  if (isLoading) return <ExpenseDetailsSkeleton/>
   const handleImageLoad = (id) => {
     setImageLoaded((prev) => ({ ...prev, [id]: true }));
   };
@@ -59,7 +51,7 @@ const ViewExpense = ({ ExpenseId }) => {
         </div>
 
         {/* Expense Info Rows */}
-        <div className="col-12 col-sm-6 col-md-4 mb-3">
+        <div className="col-12  col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Transaction Date :
@@ -70,7 +62,7 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-        <div className="col-12  col-sm-6 col-md-4 mb-3">
+        <div className="col-12   col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Expense Type :
@@ -79,7 +71,7 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-        <div className="col-12  col-sm-6 col-md-4 mb-3">
+        <div className="col-12   col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Supplier :
@@ -88,14 +80,14 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-        <div className="col-12  col-sm-6 col-md-4 mb-3">
+        <div className="col-12   col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">Amount :</label>
             <div className="text-muted">₹ {data.amount}</div>
           </div>
         </div>
 
-        <div className="col-12  col-sm-6 col-md-4 mb-3">
+        <div className="col-12   col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Payment Mode :
@@ -104,7 +96,7 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-        <div className="col-12  col-sm-6 col-md-4 mb-3">
+        <div className="col-12   col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Paid By :
@@ -115,78 +107,72 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-        <div className="col-12  col-sm-6 col-md-4 mb-3">
-          <div className="d-flex align-items-center">
+          <div className="col-12 text-start col-md-4 mb-3">
             <label className="form-label me-2 mb-0 fw-semibold">Status :</label>
-            <span
-              className="badge"
-              style={{ backgroundColor: data.status.color }}
-            >
-              {data.status.displayName}
+                
+            <span  className={`badge bg-label-${getColorNameFromHex(data?.status?.color) || 'secondary'}`}>
+              {data?.status?.displayName}
             </span>
           </div>
-        </div>
 
-        <div className="col-12  col-sm-6 col-md-4 mb-3">
-          <div className="d-flex">
+          <div className="col-12 text-start d-flex  col-md-4 mb-3">
             <label className="form-label me-2 mb-0 fw-semibold">
               Pre-Approved :
             </label>
             <div className="text-muted">{data.preApproved ? "Yes" : "No"}</div>
           </div>
-        </div>
 
-        <div className="col-12  col-sm-6 col-md-4 mb-3">
+        <div className="col-12   col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Project :
             </label>
-            <div className="text-muted text-start">{data.project.name}</div>
+            <div className="text-muted text-start">{data?.project?.name}</div>
           </div>
         </div>
 
-        <div className="col-12  col-sm-6 col-md-4 mb-3">
+        <div className="col-12   col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Created By :
             </label>
             <div className="text-muted">
-              {data.createdBy.firstName} {data.createdBy.lastName}
+              {data?.createdBy?.firstName} {data?.createdBy?.lastName}
             </div>
           </div>
         </div>
 
-        <div className="col-12  col-sm-6 col-md-4 mb-3">
+        <div className="col-12   col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Created At :
             </label>
             <div className="text-muted">
-              {formatUTCToLocalTime(data.createdAt, true)}
+              {formatUTCToLocalTime(data?.createdAt, true)}
             </div>
           </div>
         </div>
-      </div>
+        </div>
 
       <div className="text-start">
         <label className="form-label me-2 mb-0 fw-semibold">Description:</label>
-        <div className="text-muted">{data.description}</div>
+        <div className="text-muted">{data?.description}</div>
       </div>
       <div className="col-12 my-2 text-start ">
         <label className="form-label me-2 mb-0 fw-semibold">
           Attachement :
         </label>
-        {data.documents?.map((doc) => (
-          <a
+        {data?.documents && data?.documents?.map((doc) => (
+          <div
             className="list-group-item list-group-item-action d-flex align-items-center"
             key={doc.id}
           >
             <div
-              className="rounded me-3 d-flex align-items-center justify-content-center"
+              className="rounded me-1 d-flex align-items-center justify-content-center cursor-pointer"
               style={{ height: "50px", width: "80px", position: "relative" }}
             >
               {doc.contentType === "application/pdf" ? (
-                <i className="bx bxs-file-pdf"></i>
+                <div><i className="bx bxs-file-pdf" style={{fontSize:"45px"}}></i></div>
               ) : (
                 <>
                   {!imageLoaded[doc.id] && (
@@ -194,7 +180,6 @@ const ViewExpense = ({ ExpenseId }) => {
                       Loading...
                     </div>
                   )}
-
                   <img
                     src={doc.thumbPreSignedUrl}
                     alt={doc.fileName}
@@ -216,12 +201,12 @@ const ViewExpense = ({ ExpenseId }) => {
             </div>
 
             <div className="w-100">
-              <p className="mb-0">{doc.fileName}</p>
+              <small className="mb-0 small">{doc.fileName}</small>
               <div className="d">
                 <i className="bx bx-cloud-download cursor-pointer"></i>
               </div>
             </div>
-          </a>
+          </div>
         ))}
       </div>
 

src/pages/Expense/ExpensePage.jsx

@@ -5,6 +5,7 @@ import ViewExpense from "../../components/Expenses/ViewExpense";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import GlobalModel from "../../components/common/GlobalModel";
 import PreviewDocument from "../../components/Expenses/PreviewDocument";
+import ManageExpense from "../../components/Expenses/ManageExpense";
 
 export const ExpenseContext = createContext();
 export const useExpenseContext = () => useContext(ExpenseContext);
@@ -25,6 +26,7 @@ const ExpensePage = () => {
 
   const contextValue = {
     setViewExpense,
+    setManageExpenseModal,
     setDocumentView,
   };
 
@@ -60,7 +62,12 @@ const ExpensePage = () => {
                   data-bs-custom-class="tooltip"
                   title="Add New Expense"
                   className={`p-1 me-2 bg-primary rounded-circle `}
-                  onClick={() => setNewExpense(true)}
+                  onClick={() =>
+                    setManageExpenseModal({
+                      IsOpen: true,
+                      expenseId: null,
+                    })
+                  }
                 >
                   <i className="bx bx-plus fs-4 text-white"></i>
                 </button>
@@ -70,14 +77,24 @@ const ExpensePage = () => {
         </div>
 
         <ExpenseList />
-
-        {isNewExpense && (
+        {ManageExpenseModal.IsOpen && (
           <GlobalModel
-            isOpen={isNewExpense}
+            isOpen={ManageExpenseModal.IsOpen}
             size="lg"
-            closeModal={() => setNewExpense(false)}
+            closeModal={() =>
+              setManageExpenseModal({
+                IsOpen: null,
+                expenseId: null,
+              })
+            }
           >
-            <CreateExpense closeModal={() => setNewExpense(false)} />
+            <ManageExpense
+              key={ManageExpenseModal.expenseId ?? "new"}
+              expenseToEdit={ManageExpenseModal.expenseId}
+              closeModal={() =>
+                setManageExpenseModal({ IsOpen: null, expenseId: null })
+              }
+            />
           </GlobalModel>
         )}
 
@@ -100,7 +117,7 @@ const ExpensePage = () => {
         {ViewDocument.IsOpen && (
           <GlobalModel
             size="lg"
-            m
+            key={ViewDocument.IsOpen ?? "new"}
             isOpen={ViewDocument.IsOpen}
             closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
           >