Expense widget - Layout change

This commit is contained in:
Kartik Sharma 2025-11-13 15:14:07 +05:30
parent c4b589460a
commit b13034a995
2 changed files with 70 additions and 70 deletions

View File

@ -133,10 +133,10 @@ const ProjectOverview = ({ project }) => {
}, },
}, },
stroke: { stroke: {
lineCap: "round", lineCap: "round",
}, },
labels: ["Progress"], labels: ["Progress"],
series: [percentage], series: [percentage],
}; };
}; };
const [radialPercentage, setRadialPercentage] = useState(75); // Initial percentage const [radialPercentage, setRadialPercentage] = useState(75); // Initial percentage
@ -165,7 +165,7 @@ const ProjectOverview = ({ project }) => {
}, [selectedProject]); }, [selectedProject]);
return ( return (
<div className="card" style={{ minHeight: "490px" }}> <div className="card h-100">
<div className="card-header text-start"> <div className="card-header text-start">
<h5 className="card-action-title mb-0"> <h5 className="card-action-title mb-0">
{" "} {" "}
@ -173,75 +173,75 @@ const ProjectOverview = ({ project }) => {
<span className="ms-2 fw-bold">Project Statistics</span> <span className="ms-2 fw-bold">Project Statistics</span>
</h5> </h5>
</div> </div>
<div className="card-body"> <div className="card-body">
<ul className="list-unstyled m-0 p-0"> <ul className="list-unstyled m-0 p-0">
<li className="d-flex flex-wrap"> <li className="d-flex flex-wrap">
<div className="w-100 d-flex flex-wrap"> <div className="w-100 d-flex flex-wrap">
{/* Centered Chart */} {/* Centered Chart */}
<div className="w-100 d-flex justify-content-center mb-3"> <div className="w-100 d-flex justify-content-center mb-3">
<div > <div >
<Chart <Chart
options={radialBarOptions} options={radialBarOptions}
series={radialBarOptions.series} series={radialBarOptions.series}
type="radialBar" type="radialBar"
height="100%" height="100%"
/> />
</div> </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> </div>
<div className="d-flex flex-column text-start">
<small className="fw-bold">Tasks Planned</small> {/* Info Section */}
<h5 className="mb-0"> <div className="mb-2" style={{ flex: "1 1 auto" }}>
{FormattedNumber(current_project?.plannedWork)} <div>
</h5> {/* 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>
<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>
{/* 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>
</div> </div>
</li>
{/* Tasks Completed */} </ul>
<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> </div>
</li>
</ul>
</div>
</div> </div>
); );

View File

@ -72,7 +72,7 @@ const AddPayment = ({ onClose }) => {
<div className="col-12 col-md-6 mb-2"> <div className="col-12 col-md-6 mb-2">
<Label required>Transaction Date </Label> <Label required>Transaction Date </Label>
<DatePicker <DatePicker className="w-100"
name="paymentReceivedDate" name="paymentReceivedDate"
control={control} control={control}
minDate={ minDate={