74 lines
2.3 KiB
JavaScript
74 lines
2.3 KiB
JavaScript
import React from "react";
|
|
import { useSelectedProject } from "../../slices/apiDataManager";
|
|
import { useDashboardTasksCardData } from "../../hooks/useDashboard_Data";
|
|
import { TasksSkeleton } from "./DashboardSkeleton";
|
|
import { formatCurrency, formatFigure } from "../../utils/appUtils";
|
|
|
|
const TasksCard = () => {
|
|
const projectId = useSelectedProject();
|
|
|
|
const {
|
|
data: tasksCardData,
|
|
isLoading,
|
|
isError,
|
|
error,
|
|
isFetching,
|
|
refetch,
|
|
} = useDashboardTasksCardData(projectId);
|
|
if (isLoading) return <TasksSkeleton />;
|
|
return (
|
|
<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 mt-n2">
|
|
{/* Total Tasks */}
|
|
<div>
|
|
<h4 className="mb-0 fw-bold text-truncate">
|
|
{formatFigure(tasksCardData?.totalTasks ?? 0, {
|
|
notation: "compact",
|
|
})}
|
|
</h4>
|
|
<small className="text-muted d-block">Total</small>
|
|
</div>
|
|
|
|
{/* Completed Tasks */}
|
|
<div>
|
|
<h4 className="mb-0 fw-bold text-truncate">
|
|
{formatFigure(tasksCardData?.completedTasks ?? 0, {
|
|
notation: "compact",
|
|
})}
|
|
</h4>
|
|
<small className="text-muted d-block">Completed</small>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TasksCard;
|