“No data found” message not centered in Expense Breakdown chart #493
@ -79,84 +79,90 @@ const ExpenseAnalysis = () => {
|
|||||||
return (
|
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="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">
|
<div className="text-start w-100">
|
||||||
<h5 className="mb-1 card-title">Expense Breakdown</h5>
|
<h5 className="mb-1 card-title">Expense Breakdown</h5>
|
||||||
{/* <p className="card-subtitle mb-0">Category Wise Expense Breakdown</p> */}
|
{/* <p className="card-subtitle mb-0">Category Wise Expense Breakdown</p> */}
|
||||||
<p className="card-subtitle m-0">{projectName}</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>
|
</div>
|
||||||
|
|
||||||
{/* Card body */}
|
<div className="text-start text-sm-end w-75">
|
||||||
<div className="card-body position-relative">
|
<FormProvider {...methods}>
|
||||||
{isLoading && (
|
<DateRangePicker1 />
|
||||||
<div
|
</FormProvider>
|
||||||
className="d-flex justify-content-center align-items-center"
|
</div>
|
||||||
style={{ height: "200px" }}
|
</div>
|
||||||
>
|
|
||||||
<span>Loading...</span>
|
{/* 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>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
{!isLoading && report.length === 0 && (
|
<div className="mb-2 w-100">
|
||||||
<div className="text-center py-5 text-muted">No data found</div>
|
<div className="row g-2">
|
||||||
)}
|
{report.map((item, idx) => (
|
||||||
|
<div
|
||||||
{!isLoading && report.length > 0 && (
|
className="col-12 col-sm-6 d-flex align-items-start"
|
||||||
<>
|
key={idx}
|
||||||
{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">
|
<div className="avatar me-2">
|
||||||
<span>Loading...</span>
|
<span
|
||||||
</div>
|
className="avatar-initial rounded-2"
|
||||||
)}
|
style={{
|
||||||
|
backgroundColor:
|
||||||
<div className="d-flex justify-content-center mb-3">
|
donutOptions.colors[idx % donutOptions.colors.length],
|
||||||
<Chart
|
}}
|
||||||
options={donutOptions}
|
>
|
||||||
series={series}
|
<i className="bx bx-receipt fs-4"></i>
|
||||||
type="donut"
|
</span>
|
||||||
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>
|
</div>
|
||||||
))}
|
<div className="d-flex flex-column gap-1 text-start">
|
||||||
</div>
|
<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>
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user