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

fixed move figure out f card - using type= compact

Browse Source
This commit is contained in:
pramod.mahajan 2025-10-25 12:12:36 +05:30
parent 7f848eeb38
commit fc2d115f40
1 changed files with 48 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/components/Dashboard/Tasks.jsx
View File

@ -2,6 +2,7 @@ import React from "react";
import { useSelectedProject } from "../../slices/apiDataManager"; import { useSelectedProject } from "../../slices/apiDataManager";
import { useDashboardTasksCardData } from "../../hooks/useDashboard_Data"; import { useDashboardTasksCardData } from "../../hooks/useDashboard_Data";
import { TasksSkeleton } from "./DashboardSkeleton"; import { TasksSkeleton } from "./DashboardSkeleton";
import { formatCurrency, formatFigure } from "../../utils/appUtils";
const TasksCard = () => { const TasksCard = () => {
const projectId = useSelectedProject(); const projectId = useSelectedProject();
@ -16,49 +17,56 @@ const TasksCard = () => {
} = useDashboardTasksCardData(projectId); } = useDashboardTasksCardData(projectId);
if (isLoading) return <TasksSkeleton />; if (isLoading) return <TasksSkeleton />;
return ( return (
<div className="card p-3 h-100 text-center d-flex flex-column justify-content-between"> <div className="card p-3 h-100 text-center d-flex flex-column justify-content-between">
{/* Header */} {/* Header */}
<div className="d-flex justify-content-start align-items-center mb-3"> <div className="d-flex justify-content-start align-items-center mb-3">
<h5 className="fw-bold mb-0 ms-2"> <h5 className="fw-bold mb-0 ms-2">
<i className="bx bx-task text-success"></i> Tasks <i className="bx bx-task text-success"></i> Tasks
</h5> </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> </div>
{/* Completed Tasks */} {isError ? (
<div className="text-center flex-fill p-2"> <div className="d-flex flex-column justify-content-center align-items-center p-3">
<h4 className="mb-0 fw-bold text-truncate" style={{ wordBreak: "break-word" }}> <i className="bx bx-error-circle bx-sm fs-2 mb-2"></i>
{tasksCardData?.completedTasks?.toLocaleString() ?? 0} <small className="text-muted mb-2">
</h4> {error?.message || "Unable to load data at the moment."}
<small className="text-muted d-block">Completed</small> </small>
</div> <span
</div> className={`text-muted ${
)} isFetching ? "cursor-wait" : "cursor-pointer"
</div> }`}
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">
{formatFigure(tasksCardData?.totalTasks ?? 0, {
notation: "compact",
})}
</h4>
<small className="text-muted d-block">Total</small>
</div>
{/* Completed Tasks */}
<div className="text-center flex-fill p-2">
<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>
); );
}; };