From 58367028d1d109c1e7a571d3c39839084ea1f7fd Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Thu, 30 Oct 2025 11:12:07 +0530
Subject: [PATCH] =?UTF-8?q?=E2=80=9CNo=20data=20found=E2=80=9D=20message?=
 =?UTF-8?q?=20not=20centered=20in=20Expense=20Breakdown=20chart?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dashboard/ExpenseAnalysis.jsx | 152 ++++++++++---------
 1 file changed, 79 insertions(+), 73 deletions(-)

diff --git a/src/components/Dashboard/ExpenseAnalysis.jsx b/src/components/Dashboard/ExpenseAnalysis.jsx
index f398e8b5..02be212a 100644
--- a/src/components/Dashboard/ExpenseAnalysis.jsx
+++ b/src/components/Dashboard/ExpenseAnalysis.jsx
@@ -78,86 +78,92 @@ const ExpenseAnalysis = () => {
 
   return (
     <>
-     
-        <div className="card-header d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-2">
-          <div className="text-start w-100">
-            <h5 className="mb-1 card-title">Expense Breakdown</h5>
-            {/* <p className="card-subtitle mb-0">Category Wise Expense Breakdown</p> */}
-            <p className="card-subtitle m-0">{projectName}</p>
-          </div>
 
-          <div className="text-start text-sm-end w-75">
-            <FormProvider {...methods}>
-              <DateRangePicker1 />
-            </FormProvider>
-          </div>
+      <div className="card-header d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-2">
+        <div className="text-start w-100">
+          <h5 className="mb-1 card-title">Expense Breakdown</h5>
+          {/* <p className="card-subtitle mb-0">Category Wise Expense Breakdown</p> */}
+          <p className="card-subtitle m-0">{projectName}</p>
         </div>
 
-        {/* Card body */}
-        <div className="card-body position-relative">
-          {isLoading && (
-            <div
-              className="d-flex justify-content-center align-items-center"
-              style={{ height: "200px" }}
-            >
-              <span>Loading...</span>
+        <div className="text-start text-sm-end w-75">
+          <FormProvider {...methods}>
+            <DateRangePicker1 />
+          </FormProvider>
+        </div>
+      </div>
+
+      {/* Card body */}
+      <div className="card-body position-relative">
+        {isLoading && (
+          <div
+            className="d-flex justify-content-center align-items-center"
+            style={{ height: "200px" }}
+          >
+            <span>Loading...</span>
+          </div>
+        )}
+
+        {!isLoading && report.length === 0 && (
+          <div
+            className="d-flex justify-content-center align-items-center text-dark flex-column"
+            style={{ minHeight: "300px" }}
+          >
+            <p className="mb-0 text-muted">No data found</p>
+          </div>
+        )}
+
+
+        {!isLoading && report.length > 0 && (
+          <>
+            {isFetching && (
+              <div className="position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center bg-white bg-opacity-75">
+                <span>Loading...</span>
+              </div>
+            )}
+
+            <div className="d-flex justify-content-center mb-3">
+              <Chart
+                options={donutOptions}
+                series={series}
+                type="donut"
+                width="100%"
+                height={320}
+              />
             </div>
-          )}
 
-          {!isLoading && report.length === 0 && (
-            <div className="text-center py-5 text-muted">No data found</div>
-          )}
-
-          {!isLoading && report.length > 0 && (
-            <>
-              {isFetching && (
-                <div className="position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center bg-white bg-opacity-75">
-                  <span>Loading...</span>
-                </div>
-              )}
-
-              <div className="d-flex justify-content-center mb-3">
-                <Chart
-                  options={donutOptions}
-                  series={series}
-                  type="donut"
-                  width="100%"
-                  height={320}
-                />
-              </div>
-
-              <div className="mb-2 w-100">
-                <div className="row g-2">
-                  {report.map((item, idx) => (
-                    <div
-                      className="col-12 col-sm-6 d-flex align-items-start"
-                      key={idx}
-                    >
-                      <div className="avatar me-2">
-                        <span
-                          className="avatar-initial rounded-2"
-                          style={{
-                            backgroundColor:
-                              donutOptions.colors[idx % donutOptions.colors.length],
-                          }}
-                        >
-                          <i className="bx bx-receipt fs-4"></i>
-                        </span>
-                      </div>
-                      <div className="d-flex flex-column gap-1 text-start">
-                        <small className="fw-semibold">{item.projectName}</small>
-                        <span className="fw-semibold text-muted ms-1">
-                          {formatCurrency(item.totalApprovedAmount)}
-                        </span>
-                      </div>
+            <div className="mb-2 w-100">
+              <div className="row g-2">
+                {report.map((item, idx) => (
+                  <div
+                    className="col-12 col-sm-6 d-flex align-items-start"
+                    key={idx}
+                  >
+                    <div className="avatar me-2">
+                      <span
+                        className="avatar-initial rounded-2"
+                        style={{
+                          backgroundColor:
+                            donutOptions.colors[idx % donutOptions.colors.length],
+                        }}
+                      >
+                        <i className="bx bx-receipt fs-4"></i>
+                      </span>
                     </div>
-                  ))}
-                </div>
+                    <div className="d-flex flex-column gap-1 text-start">
+                      <small className="fw-semibold">{item.projectName}</small>
+                      <span className="fw-semibold text-muted ms-1">
+                        {formatCurrency(item.totalApprovedAmount)}
+                      </span>
+                    </div>
+                  </div>
+                ))}
               </div>
-            </>
-          )}
-        </div>
-   
+            </div>
+          </>
+        )}
+      </div>
+
       {/* Header */}
 
     </>