From 2cf7db394d346f96d21da474b731c3e8c4af56f1 Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Wed, 30 Jul 2025 12:07:29 +0530
Subject: [PATCH] arrange Expense Details columns

---
 src/components/Expenses/ViewExpense.jsx | 43 +++++++++++++------------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/components/Expenses/ViewExpense.jsx b/src/components/Expenses/ViewExpense.jsx
index f6aeb09e..6aafea03 100644
--- a/src/components/Expenses/ViewExpense.jsx
+++ b/src/components/Expenses/ViewExpense.jsx
@@ -74,14 +74,14 @@ const ViewExpense = ({ ExpenseId }) => {
 
   return (
     <form className="container px-3" onSubmit={handleSubmit(onSubmit)}>
-      <div className="row mb-3">
+      <div className="row  mb-3">
         <div className="col-12 mb-3">
           <h5 className="fw-semibold">Expense Details</h5>
           <hr />
         </div>
 
-        {/* Expense Info Rows */}
-        <div className="col-12  col-md-6 mb-3">
+        {/* Each info block below now has h-100 to stretch */}
+        <div className="col-12 col-md-6 mb-3 h-100">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Transaction Date :
@@ -92,7 +92,7 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-        <div className="col-12   col-md-6 mb-3">
+        <div className="col-12 col-md-6 mb-3 h-100">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Expense Type :
@@ -101,7 +101,7 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-        <div className="col-12   col-md-4 mb-3">
+        <div className="col-12 col-md-4 mb-3 h-100">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Supplier :
@@ -110,14 +110,14 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-        <div className="col-12   col-md-4 mb-3">
+        <div className="col-12 col-md-4 mb-3 h-100">
           <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-md-4 mb-3">
+        <div className="col-12 col-md-4 mb-3 h-100">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Payment Mode :
@@ -126,8 +126,8 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-        <div className="col-12   col-md-4 mb-3">
-          <div className="d-flex">
+        <div className="col-12 col-md-4 mb-3 h-100">
+          <div className="d-flex  ">
             <label className="form-label me-2 mb-0 fw-semibold">
               Paid By :
             </label>
@@ -137,9 +137,8 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-        <div className="col-12 text-start col-md-4 mb-3">
+        <div className="col-12 col-md-4 mb-3 h-100 text-start">
           <label className="form-label me-2 mb-0 fw-semibold">Status :</label>
-
           <span
             className={`badge bg-label-${
               getColorNameFromHex(data?.status?.color) || "secondary"
@@ -149,14 +148,16 @@ const ViewExpense = ({ ExpenseId }) => {
           </span>
         </div>
 
-        <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 className="col-12 col-md-4 mb-3 h-100">
+          <div className="d-flex">
+            <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-md-4 mb-3">
+        <div className="col-12 col-md-auto  mb-3 h-100">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Project :
@@ -165,7 +166,7 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-        <div className="col-12   col-md-4 mb-3">
+        <div className="col-12 col-md-auto  mb-3 h-100">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Created By :
@@ -176,7 +177,7 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-        <div className="col-12   col-md-4 mb-3">
+        <div className="col-12 col-md-auto  mb-3 h-100">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Created At :
@@ -219,7 +220,7 @@ const ViewExpense = ({ ExpenseId }) => {
             >
               <div
                 className="rounded me-1 d-flex align-items-center justify-content-center cursor-pointer"
-                style={{ height: "50px", width: "80px", position: "relative" }}
+                style={{ height: "50px", width: "60px", position: "relative" }}
                 onClick={() => {
                   if (isImage) {
                     setDocumentView({
@@ -233,7 +234,7 @@ const ViewExpense = ({ ExpenseId }) => {
                   className={`bx ${getIconByType(
                     doc.contentType
                   )} text-primary`}
-                  style={{ fontSize: "45px" }}
+                  style={{ fontSize: "35px" }}
                 ></i>
               </div>