fixed figure moved out of card
This commit is contained in:
parent
b38eb1bc4b
commit
7f848eeb38
@ -16,49 +16,49 @@ const TasksCard = () => {
|
||||
} = useDashboardTasksCardData(projectId);
|
||||
if (isLoading) return <TasksSkeleton />;
|
||||
return (
|
||||
<div className="card p-3 h-100 text-center d-flex justify-content-between">
|
||||
<div className="d-flex justify-content-start align-items-center mb-3">
|
||||
<h5 className="fw-bold mb-0 ms-2">
|
||||
<i className="bx bx-task text-success"></i> Tasks
|
||||
</h5>
|
||||
<div className="card p-3 h-100 text-center d-flex flex-column justify-content-between">
|
||||
{/* Header */}
|
||||
<div className="d-flex justify-content-start align-items-center mb-3">
|
||||
<h5 className="fw-bold mb-0 ms-2">
|
||||
<i className="bx bx-task text-success"></i> Tasks
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
{isError ? (
|
||||
<div className="d-flex flex-column justify-content-center align-items-center p-3">
|
||||
<i className="bx bx-error-circle bx-sm fs-2 mb-2"></i>
|
||||
<small className="text-muted mb-2">
|
||||
{error?.message || "Unable to load data at the moment."}
|
||||
</small>
|
||||
<span
|
||||
className={`text-muted ${isFetching ? "cursor-wait" : "cursor-pointer"}`}
|
||||
onClick={refetch}
|
||||
>
|
||||
<i className={`bx bx-refresh me-1 ${isFetching ? "bx-spin" : ""}`}></i>
|
||||
Retry
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="d-flex justify-content-around align-items-start flex-wrap mt-n2">
|
||||
{/* Total Tasks */}
|
||||
<div className="text-center flex-fill p-2">
|
||||
<h4 className="mb-0 fw-bold text-truncate" style={{ wordBreak: "break-word" }}>
|
||||
{tasksCardData?.totalTasks?.toLocaleString() ?? 0}
|
||||
</h4>
|
||||
<small className="text-muted d-block">Total</small>
|
||||
</div>
|
||||
|
||||
{isError ? (
|
||||
<div className="d-flex flex-column justify-content-center align-items-center p-1">
|
||||
<i className="bx bx-error-circle bx-sm fs-2 "></i>
|
||||
|
||||
<small className="text-muted mb-2">
|
||||
{error?.message || "Unable to load data at the moment."}
|
||||
</small>
|
||||
<span
|
||||
className={`text-muted ${
|
||||
isFetching ? "cursor-wait" : "cursor-pointer"
|
||||
}`}
|
||||
onClick={refetch}
|
||||
>
|
||||
<i
|
||||
className={`bx bx-refresh me-1 ${isFetching ? "bx-spin" : ""}`}
|
||||
></i>{" "}
|
||||
Retry
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="d-flex justify-content-around align-items-start mt-n2">
|
||||
<div>
|
||||
<h4 className="mb-0 fw-bold">
|
||||
{tasksCardData?.totalTasks?.toLocaleString() ?? 0}
|
||||
</h4>
|
||||
<small className="text-muted">Total</small>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-0 fw-bold">
|
||||
{tasksCardData?.completedTasks?.toLocaleString() ?? 0}
|
||||
</h4>
|
||||
<small className="text-muted">Completed</small>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* Completed Tasks */}
|
||||
<div className="text-center flex-fill p-2">
|
||||
<h4 className="mb-0 fw-bold text-truncate" style={{ wordBreak: "break-word" }}>
|
||||
{tasksCardData?.completedTasks?.toLocaleString() ?? 0}
|
||||
</h4>
|
||||
<small className="text-muted d-block">Completed</small>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user