From 14cad23eec16ea81c777bff124b2ece928dcdd7b Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Mon, 7 Jul 2025 16:27:46 +0530
Subject: [PATCH] refactor: center chart using Bootstrap utilities and clean up
 layout

---
 src/components/Project/ProjectOverview.jsx | 124 +++++++++++----------
 1 file changed, 66 insertions(+), 58 deletions(-)

diff --git a/src/components/Project/ProjectOverview.jsx b/src/components/Project/ProjectOverview.jsx
index 512aeedc..d0f94f94 100644
--- a/src/components/Project/ProjectOverview.jsx
+++ b/src/components/Project/ProjectOverview.jsx
@@ -175,68 +175,76 @@ const ProjectOverview = ({ project }) => {
           <span className="ms-2">Project Statistics</span>
         </h6>
       </div>
-      <div className="card-body">
-        <ul className="list-none p-0 m-0 space-y-4">
-          {/* Example List Item 1 */}
-          <li className="flex flex-wrap">
-            {/* First div: takes full width on small screens, half width on medium and up */}
-            <div class="d-flex flex-wrap w-100">
-              <div class="me-2 mb-2" style={{ flex: "1 1 auto" }}>
-                <Chart
-                  options={radialBarOptions}
-                  series={radialBarOptions.series} // Series is directly from the options object
-                  type="radialBar"
-                  height="100%"
-                />
+     <div className="card-body">
+  <ul className="list-unstyled m-0 p-0">
+    <li className="d-flex flex-wrap">
+      <div className="w-100 d-flex flex-wrap">
+        {/* Centered Chart */}
+        <div className="w-100 d-flex justify-content-center mb-3">
+          <div >
+            <Chart
+              options={radialBarOptions}
+              series={radialBarOptions.series}
+              type="radialBar"
+              height="100%"
+            />
+          </div>
+        </div>
+
+        {/* Info Section */}
+        <div className="mb-2" style={{ flex: "1 1 auto" }}>
+          <div>
+            {/* Tasks Planned */}
+            <div className="d-flex align-items-center mb-3">
+              <div className="avatar me-2">
+                <span className="avatar-initial rounded-2 bg-label-primary">
+                  <i className="bx bx-check text-primary fs-4"></i>
+                </span>
               </div>
-              {/* Second div: takes full width on small screens, half width on medium and up */}
-              <div class="mb-2" style={{ flex: "1 1 auto" }}>
-                <div>
-                  <div class="d-flex">
-                    <div class="avatar me-2">
-                      <span class="avatar-initial rounded-2 bg-label-primary">
-                        <i class="icon-base bx bx-check icon-lg text-primary"></i>
-                      </span>
-                    </div>
-                    <div class="d-flex flex-column text-start">
-                      <small className="fw-bold">Tasks Planned</small>
-                      <h5 class="mb-0">
-                        {FormattedNumber(current_project?.plannedWork)}
-                      </h5>
-                    </div>
-                  </div>
-                  <div class="d-flex">
-                    <div class="avatar me-2">
-                      <span class="avatar-initial rounded-2 bg-label-info">
-                        <i class="icon-base bx bx-star icon-lg text-info"></i>
-                      </span>
-                    </div>
-                    <div class="d-flex flex-column text-start">
-                      <small className="fw-bold">Tasks Completed</small>
-                      <h5 class="mb-0">
-                        {FormattedNumber(current_project?.completedWork)}
-                      </h5>
-                    </div>
-                  </div>
-                  <div class="d-flex">
-                    <div class="avatar me-2">
-                      <span class="avatar-initial rounded-2 bg-label-primary">
-                        <i class="icon-base bx bx-group icon-lg text-primary"></i>
-                      </span>
-                    </div>
-                    <div class="d-flex flex-column text-start">
-                      <small className="fw-bold">Current Team Size</small>
-                      <h5 class="mb-0">
-                        {FormattedNumber(current_project?.teamSize)}
-                      </h5>
-                    </div>
-                  </div>
-                </div>
+              <div className="d-flex flex-column text-start">
+                <small className="fw-bold">Tasks Planned</small>
+                <h5 className="mb-0">
+                  {FormattedNumber(current_project?.plannedWork)}
+                </h5>
               </div>
             </div>
-          </li>
-        </ul>
+
+            {/* Tasks Completed */}
+            <div className="d-flex align-items-center mb-3">
+              <div className="avatar me-2">
+                <span className="avatar-initial rounded-2 bg-label-info">
+                  <i className="bx bx-star text-info fs-4"></i>
+                </span>
+              </div>
+              <div className="d-flex flex-column text-start">
+                <small className="fw-bold">Tasks Completed</small>
+                <h5 className="mb-0">
+                  {FormattedNumber(current_project?.completedWork)}
+                </h5>
+              </div>
+            </div>
+
+            {/* Team Size */}
+            <div className="d-flex align-items-center">
+              <div className="avatar me-2">
+                <span className="avatar-initial rounded-2 bg-label-primary">
+                  <i className="bx bx-group text-primary fs-4"></i>
+                </span>
+              </div>
+              <div className="d-flex flex-column text-start">
+                <small className="fw-bold">Current Team Size</small>
+                <h5 className="mb-0">
+                  {FormattedNumber(current_project?.teamSize)}
+                </h5>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
+    </li>
+  </ul>
+</div>
+
     </div>
   );
 };