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

added skeleton for dashboard card figures cards

Browse Source
This commit is contained in:
pramod.mahajan 2025-10-25 10:26:41 +05:30
parent 32f16092db
commit a070d23304
7 changed files with 133 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/assets/css/core-extend.css
View File

@ -25,6 +25,12 @@ font-size: 2rem;
.text-md-b {
font-weight: normal;
}
.cursor-wait{
cursor:wait;
}
.cursor-notallowed {
cursor: not-allowed;
}
.text-xxs { font-size: 0.55rem; } /* 8px */
.text-xs { font-size: 0.75rem; } /* 12px */

6
src/components/DailyProgressRport/TaskReportFilterPanel.jsx
View File

@ -29,7 +29,9 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
handleSubmit,
formState: { errors },
} = methods;
const closePanel = () => {
document.querySelector(".offcanvas.show .btn-close")?.click();
};
const onSubmit = (formData) => {
const filterPayload = {
...formData,
@ -37,12 +39,14 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
dateTo: localToUtc(formData.dateTo),
};
handleFilter(filterPayload);
closePanel();
};
const onClear = () => {
setResetKey((prev) => prev + 1);
handleFilter(TaskReportDefaultValue);
reset(TaskReportDefaultValue);
closePanel();
};
return (
<FormProvider {...methods}>

6
src/components/Dashboard/Dashboard.jsx
View File

@ -19,8 +19,6 @@ import ExpenseStatus from "./ExpenseStatus";
import ExpenseByProject from "./ExpenseByProject";
const Dashboard = () => {
const { teamsCardData } = useDashboardTeamsCardData();
const { tasksCardData } = useDashboardTasksCardData();
// Get the selected project ID from Redux store
const projectId = useSelector((store) => store.localVariables.projectId);
@ -36,11 +34,11 @@ const Dashboard = () => {
)}
<div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
<Teams teamsCardData={teamsCardData} />
<Teams />
</div>
<div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
<TasksCard tasksCardData={tasksCardData} />
<TasksCard/>
</div>
{isAllProjectsSelected && (

56
src/components/Dashboard/DashboardSkeleton.jsx
View File

@ -52,3 +52,59 @@ export const ProjectCardSkeleton = () => {
);
};
export const TeamsSkeleton = () => {
return (
<>
<style>{skeletonStyle}</style>
<div className="card p-3 h-100 text-center d-flex 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-group text-warning"></i> Teams
</h5>
</div>
{/* Skeleton Body */}
<div className="d-flex justify-content-around align-items-start mt-n2 w-100">
<div className="text-center">
<SkeletonLine height={28} width="60px" className="mx-auto mb-2" />
<SkeletonLine height={14} width="90px" className="mx-auto" />
</div>
<div className="text-center">
<SkeletonLine height={28} width="60px" className="mx-auto mb-2" />
<SkeletonLine height={14} width="70px" className="mx-auto" />
</div>
</div>
</div>
</>
);
};
export const TasksSkeleton = () => {
return (
<>
<style>{skeletonStyle}</style>
<div className="card p-3 h-100 text-center d-flex 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>
{/* Skeleton Body */}
<div className="d-flex justify-content-around align-items-start mt-n2 w-100">
<div className="text-center">
<SkeletonLine height={28} width="60px" className="mx-auto mb-2" />
<SkeletonLine height={14} width="70px" className="mx-auto" />
</div>
<div className="text-center">
<SkeletonLine height={28} width="60px" className="mx-auto mb-2" />
<SkeletonLine height={14} width="90px" className="mx-auto" />
</div>
</div>
</div>
</>
);
};

29
src/components/Dashboard/Projects.jsx
View File

@ -10,6 +10,7 @@ const Projects = () => {
isLoading,
isError,
error,
isFetching,
refetch,
} = useDashboardProjectsCardData();
@ -25,7 +26,7 @@ const Projects = () => {
const totalProjects = projectsCardData?.totalProjects ?? 0;
const ongoingProjects = projectsCardData?.ongoingProjects ?? 0;
if(isLoading) return <ProjectCardSkeleton/>
if (isLoading) return <ProjectCardSkeleton />;
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">
@ -35,15 +36,23 @@ const Projects = () => {
</h5>
</div>
{isLoading ? (
<div className="d-flex justify-content-center align-items-center flex-grow-1">
<div className="spinner-border text-primary" role="status">
<span className="visually-hidden">Loading...</span>
</div>
</div>
) : isError ? (
<div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">
{error?.message || "Error loading data"}
{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">

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

@ -1,6 +1,7 @@
import React from "react";
import { useSelectedProject } from "../../slices/apiDataManager";
import { useDashboardTasksCardData } from "../../hooks/useDashboard_Data";
import { TasksSkeleton } from "./DashboardSkeleton";
const TasksCard = () => {
const projectId = useSelectedProject();
@ -10,8 +11,10 @@ const TasksCard = () => {
isLoading,
isError,
error,
isFetching,
refetch,
} = 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">
@ -20,20 +23,26 @@ const TasksCard = () => {
</h5>
</div>
{isLoading ? (
// Loader while fetching
<div className="d-flex justify-content-center align-items-center flex-grow-1">
<div className="spinner-border text-primary" role="status">
<span className="visually-hidden">Loading...</span>
</div>
</div>
) : isError ? (
// Show error
<div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">
{error?.message || "Error loading data"}
{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>
) : (
// Show data
<div className="d-flex justify-content-around align-items-start mt-n2">
<div>
<h4 className="mb-0 fw-bold">

33
src/components/Dashboard/Teams.jsx
View File

@ -4,16 +4,19 @@ import { useDashboardTeamsCardData } from "../../hooks/useDashboard_Data";
import eventBus from "../../services/eventBus";
import { useQueryClient } from "@tanstack/react-query";
import { useSelectedProject } from "../../slices/apiDataManager";
import { TeamsSkeleton } from "./DashboardSkeleton";
const Teams = () => {
const queryClient = useQueryClient();
const projectId = useSelectedProject()
const projectId = useSelectedProject();
const {
data: teamsCardData,
isLoading,
isError,
error,
isFetching,
refetch,
} = useDashboardTeamsCardData(projectId);
// Handle real-time updates via eventBus
@ -40,6 +43,7 @@ const Teams = () => {
const inToday = teamsCardData?.inToday ?? 0;
const totalEmployees = teamsCardData?.totalEmployees ?? 0;
if (isLoading) return <TeamsSkeleton />;
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">
@ -48,15 +52,24 @@ const Teams = () => {
</h5>
</div>
{isLoading ? (
<div className="d-flex justify-content-center align-items-center flex-grow-1">
<div className="spinner-border text-primary" role="status">
<span className="visually-hidden">Loading...</span>
</div>
</div>
) : isError ? (
<div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">
{error?.message || "Error loading data"}
{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">