admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

refactor: center chart using Bootstrap utilities and clean up layout

Browse Source
This commit is contained in:
Pramod Mahajan 2025-07-07 16:27:46 +05:30
parent 6f614334a8
commit 14cad23eec
1 changed files with 66 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
src/components/Project/ProjectOverview.jsx
View File

@ -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>
);
};