From d82f405e084ac7b9cf626a368ef6e8d3f72e7919 Mon Sep 17 00:00:00 2001
From: "pramod.mahajan" <pramod.mahajan@marcoaiot.com>
Date: Mon, 10 Nov 2025 18:53:47 +0530
Subject: [PATCH] changed Expense view u

---
 src/components/Expenses/ViewExpense.jsx | 190 +++++++++++++++---------
 1 file changed, 121 insertions(+), 69 deletions(-)

diff --git a/src/components/Expenses/ViewExpense.jsx b/src/components/Expenses/ViewExpense.jsx
index ea797d49..a4b1089b 100644
--- a/src/components/Expenses/ViewExpense.jsx
+++ b/src/components/Expenses/ViewExpense.jsx
@@ -127,7 +127,10 @@ const ViewExpense = ({ ExpenseId }) => {
         <div className="col-12 col-lg-7 col-xl-7 mb-3">
           <div className="row">
             <div className="col-12 d-flex justify-content-between text-start fw-semibold my-2">
-              <span>{data?.expenseUId}</span>
+              <div className="d-flex flex-row gap-2">
+                <span className="fw-semibold">Expense No:</span>
+                <span>{data?.expenseUId}</span>
+              </div>{" "}
               <span
                 className={`badge bg-label-${
                   getColorNameFromHex(data?.status?.color) || "secondary"
@@ -139,91 +142,114 @@ const ViewExpense = ({ ExpenseId }) => {
             </div>
 
             {/* Row 1 */}
-            <div className="col-md-6 mb-3">
-              <div className="d-flex">
+               <div className="row text-start">
+              <div className="col-md-6 mb-3">
                 <label
                   className="form-label me-2 mb-0 fw-semibold text-start"
                   style={{ minWidth: "130px" }}
                 >
-                  Transaction Date :
+                  Project :
                 </label>
-                <div className="text-muted">
-                  {formatUTCToLocalTime(data?.transactionDate)}
+              </div>
+              <div className="col-md-6 mb-3">
+                <small className="text-muted">{data?.project?.name}</small>
+              </div>
+            </div>
+            <div className="row text-start">
+              <div className="col-md-6 mb-3">
+                <div className="d-flex">
+                  <label className="form-label me-2 mb-0 fw-semibold text-start">
+                    Transaction Date :
+                  </label>
                 </div>
               </div>
+              <div className="col-md-6 mb-3">
+                <small>{formatUTCToLocalTime(data?.transactionDate)}</small>
+              </div>
             </div>
 
-            <div className="col-md-6 mb-3">
-              <div className="d-flex">
-                <label
-                  className="form-label me-2 mb-0 fw-semibold text-start"
-                  style={{ minWidth: "130px" }}
-                >
-                  Expense Category :
-                </label>
-                <div className="text-muted">{data?.expenseCategory?.name}</div>
+            <div className="row text-start">
+              <div className="col-md-6 mb-3">
+                <div className="d-flex">
+                  <label className="form-label me-2 mb-0 fw-semibold text-start">
+                    Expense Category :
+                  </label>
+                </div>
+              </div>
+              <div className="col-md-6 mb-3">
+                <small className="text-muted">
+                  {data?.expenseCategory?.name}
+                </small>
               </div>
             </div>
 
             {/* Row 2 */}
-            <div className="col-md-6 mb-3">
-              <div className="d-flex">
-                <label
-                  className="form-label me-2 mb-0 fw-semibold text-start"
-                  style={{ minWidth: "130px" }}
-                >
+            <div className="row text-start">
+              <div className="col-md-6 mb-3">
+                <label className="form-label me-2 mb-0 fw-semibold text-start">
                   Supplier :
                 </label>
-                <div className="text-muted">{data?.supplerName}</div>
+              </div>
+
+              <div className="col-md-6 mb-3">
+                <small className="text-muted">{data?.supplerName}</small>
               </div>
             </div>
 
-            <div className="col-md-6 mb-3">
-              <div className="d-flex">
+            <div className="row text-start">
+              <div className="col-md-6 mb-3">
                 <label
                   className="form-label me-2 mb-0 fw-semibold text-start"
                   style={{ minWidth: "130px" }}
                 >
                   Amount :
                 </label>
-                <div className="text-muted">
+              </div>
+
+              <div className="col-md-6 mb-3">
+                <small className="text-muted">
                   {" "}
                   {formatFigure(data?.amount, {
                     type: "currency",
                     currency: data?.currency?.currencyCode ?? "INR",
                   })}
-                </div>
+                </small>
               </div>
             </div>
 
             {/* Row 3 */}
-            <div className="col-md-6 mb-3">
-              <div className="d-flex">
-                <label
-                  className="form-label me-2 mb-0 fw-semibold text-start"
-                  style={{ minWidth: "130px" }}
-                >
+            <div className="row text-start">
+              <div className="col-md-6 mb-3">
+                <label className="form-label me-2 mb-0 fw-semibold text-start">
                   Payment Mode :
                 </label>
-                <div className="text-muted">{data?.paymentMode?.name}</div>
+              </div>
+              <div className="col-md-6 mb-3">
+                <div className="d-flex">
+                  <small className="text-muted">
+                    {data?.paymentMode?.name}
+                  </small>
+                </div>
               </div>
             </div>
 
             {data?.gstNumber && (
-              <div className="col-md-6 mb-3">
-                <div className="d-flex">
+              <div className="row text-start">
+                <div className="col-md-6 mb-3">
                   <label
                     className="form-label me-2 mb-0 fw-semibold text-start"
                     style={{ minWidth: "130px" }}
                   >
                     GST Number :
                   </label>
+                </div>
+                <div className="col-md-6 mb-3">
                   <div className="text-muted">{data?.gstNumber}</div>
                 </div>
               </div>
             )}
 
-            <div className="col-md-6 mb-3">
+            {/* <div className="col-md-6 mb-3">
               <div className="d-flex">
                 <label
                   className="form-label me-2 mb-0 fw-semibold text-start"
@@ -235,61 +261,62 @@ const ViewExpense = ({ ExpenseId }) => {
                   {data.preApproved ? "Yes" : "No"}
                 </div>
               </div>
-            </div>
+            </div> */}
 
             {/* Row 5 */}
-            <div className="col-md-6 mb-3">
-              <div className="d-flex">
-                <label
-                  className="form-label me-2 mb-0 fw-semibold text-start"
-                  style={{ minWidth: "130px" }}
-                >
-                  Project :
-                </label>
-                <div className="text-muted">{data?.project?.name}</div>
-              </div>
-            </div>
+         
 
-            <div className="col-md-6 mb-3">
-              <div className="d-flex">
+    <div className="row text-start">
+              <div className="col-md-6 mb-3">
+    
                 <label
                   className="form-label me-2 mb-0 fw-semibold text-start"
                   style={{ minWidth: "130px" }}
                 >
                   Created At :
                 </label>
-                <div className="text-muted">
-                  {formatUTCToLocalTime(data?.createdAt, true)}
-                </div>
-              </div>
+             
+          
             </div>
+                    <div className="col-md-6 mb-3">
+            
+                <small className="text-muted">
+                  {formatUTCToLocalTime(data?.createdAt, true)}
+                </small>
+            
+            </div>
+    </div>
 
             {/* Created & Paid By */}
             {data.createdBy && (
-              <div className="col-md-6 text-start mb-3">
-                <div className="d-flex align-items-center">
+              <div className="row text-start">
+                <div className="col-md-6 text-start mb-3">
                   <label
                     className="form-label me-2 mb-0 fw-semibold"
                     style={{ minWidth: "130px" }}
                   >
                     Created By :
                   </label>
-                  <Avatar
-                    size="xs"
-                    classAvatar="m-0 me-1"
-                    firstName={data.createdBy?.firstName}
-                    lastName={data.createdBy?.lastName}
-                  />
-                  <span className="text-muted">
-                    {`${data.createdBy?.firstName ?? ""} ${
-                      data.createdBy?.lastName ?? ""
-                    }`.trim() || "N/A"}
-                  </span>
+                </div>
+                <div className="col-md-6 text-start mb-3">
+                  <div className="d-flex align-items-center">
+                    <Avatar
+                      size="xs"
+                      classAvatar="m-0 me-1"
+                      firstName={data.createdBy?.firstName}
+                      lastName={data.createdBy?.lastName}
+                    />
+                    <span className="text-muted">
+                      {`${data.createdBy?.firstName ?? ""} ${
+                        data.createdBy?.lastName ?? ""
+                      }`.trim() || "N/A"}
+                    </span>
+                  </div>
                 </div>
               </div>
             )}
 
-            <div className="col-md-6 text-start mb-3">
+            {/* <div className="col-md-6 text-start mb-3">
               <div className="d-flex align-items-center">
                 <label
                   className="form-label me-2 mb-0 fw-semibold"
@@ -309,7 +336,32 @@ const ViewExpense = ({ ExpenseId }) => {
                   }`.trim() || "N/A"}
                 </span>
               </div>
-            </div>
+            </div> */}
+                  <div className="row text-start">
+                <div className="col-md-6 text-start mb-3">
+                  <label
+                    className="form-label me-2 mb-0 fw-semibold"
+                    style={{ minWidth: "130px" }}
+                  >
+                       Paid By :
+                  </label>
+                </div>
+                <div className="col-md-6 text-start mb-3">
+                  <div className="d-flex align-items-center">
+                    <Avatar
+                      size="xs"
+                      classAvatar="m-0 me-1"
+                      firstName={data.paidBy?.firstName}
+                      lastName={data.paidBy?.lastName}
+                    />
+                    <span className="text-muted">
+                      {`${data.paidBy?.firstName ?? ""} ${
+                        data.paidBy?.lastName ?? ""
+                      }`.trim() || "N/A"}
+                    </span>
+                  </div>
+                </div>
+              </div>
 
             {/* Description */}
             <div className="col-12 text-start mb-2">