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

Creating the Weidgets in Dashboard name Pending Attendance, Attendance, Activities.

Browse Source
This commit is contained in:
kartik.sharma 2025-06-02 14:17:30 +05:30
parent edf88a1d57
commit cf2ec55d4e
8 changed files with 434 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
src/components/Charts/Circle.jsx
View File

@ -2,79 +2,79 @@ import React from "react";
import ReactApexChart from "react-apexcharts"; import ReactApexChart from "react-apexcharts";
const ApexChart = ({ completed = 0, planned = 1 }) => { const ApexChart = ({ completed = 0, planned = 1 }) => {
const percentage = planned > 0 ? Math.round((completed / planned) * 100) : 0; const percentage = planned > 0 ? Math.round((completed / planned) * 100) : 0;
const options = { const options = {
chart: { chart: {
height: 200, height: 200,
type: "radialBar", type: "radialBar",
toolbar: { show: false }, toolbar: { show: false },
}, },
plotOptions: { plotOptions: {
radialBar: { radialBar: {
startAngle: -135, startAngle: -135,
endAngle: 225, endAngle: 225,
hollow: { hollow: {
margin: 0, margin: 0,
size: "60%", size: "60%",
background: "#fff", background: "#fff",
dropShadow: { dropShadow: {
enabled: true, enabled: true,
top: 2, top: 2,
left: 0, left: 0,
blur: 3, blur: 3,
opacity: 0.45, opacity: 0.45,
}, },
}, },
track: { track: {
background: "#f5f5f5", background: "#f5f5f5",
strokeWidth: "67%", strokeWidth: "40%",
dropShadow: { enabled: false }, dropShadow: { enabled: false },
}, },
dataLabels: { dataLabels: {
show: true, show: true,
name: { name: {
offsetY: -10, offsetY: -10,
color: "#888", color: "#888",
fontSize: "14px", fontSize: "14px",
}, },
value: { value: {
formatter: (val) => `${val}%`, formatter: (val) => `${val}%`,
color: "#111", color: "#111",
fontSize: "24px", fontSize: "24px",
show: true, show: true,
}, },
}, },
}, },
}, },
fill: { fill: {
type: "gradient", type: "gradient",
gradient: { gradient: {
shade: "dark", shade: "dark",
type: "horizontal", type: "horizontal",
shadeIntensity: 0.5, shadeIntensity: 0.5,
gradientToColors: ["#ABE5A1"], gradientToColors: ["#ABE5A1"],
opacityFrom: 1, opacityFrom: 1,
opacityTo: 1, opacityTo: 1,
stops: [0, 100], stops: [0, 100],
}, },
}, },
stroke: { stroke: {
lineCap: "round", lineCap: "round",
}, },
labels: ["Progress"], labels: ["Progress"],
}; };
return ( return (
<div id="chart"> <div id="chart">
<ReactApexChart <ReactApexChart
options={options} options={options}
series={[percentage]} series={[percentage]}
type="radialBar" type="radialBar"
height={200} height={200}
/> />
</div> </div>
); );
}; };
export default ApexChart; export default ApexChart;

80
src/components/Charts/CircleChart1.jsx Normal file
View File

@ -0,0 +1,80 @@
import React from "react";
import ReactApexChart from "react-apexcharts";
const ApexChart1 = ({ Pending = 0, Assigned = 1 }) => {
const percentage = Assigned > 0 ? Math.round((Pending / Assigned) * 100) : 0;
const options = {
chart: {
height: 200,
type: "radialBar",
toolbar: { show: false },
},
plotOptions: {
radialBar: {
startAngle: -135,
endAngle: 225,
hollow: {
margin: 0,
size: "60%",
background: "#fff",
dropShadow: {
enabled: true,
top: 2,
left: 0,
blur: 3,
opacity: 0.45,
},
},
track: {
background: "#f5f5f5",
strokeWidth: "40%",
dropShadow: { enabled: false },
},
dataLabels: {
show: true,
name: {
offsetY: -10,
color: "#888",
fontSize: "14px",
},
value: {
formatter: (val) => `${val}%`,
color: "#111",
fontSize: "24px",
show: true,
},
},
},
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
type: "horizontal",
shadeIntensity: 0.5,
gradientToColors: ["#ABE5A1"],
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100],
},
},
stroke: {
lineCap: "round",
},
labels: ["Progress"],
};
return (
<div id="chart">
<ReactApexChart
options={options}
series={[percentage]}
type="radialBar"
height={200}
/>
</div>
);
};
export default ApexChart1;

137
src/components/Charts/Circlechart.jsx
View File

@ -1,85 +1,80 @@
import React from "react"; import React from "react";
import ReactApexChart from "react-apexcharts"; import ReactApexChart from "react-apexcharts";
const ApexChart = () => { const ApexChart = ({ completed = 0, planned = 1 }) => {
const [state] = React.useState({ const percentage = planned > 0 ? Math.round((completed / planned) * 100) : 0;
series: [75], // Replace this with dynamic value if needed
options: { const options = {
chart: { chart: {
height: 200, // Smaller height height: 200,
type: "radialBar", type: "radialBar",
toolbar: { toolbar: { show: false },
show: false, // Hide toolbar
},
},
plotOptions: {
radialBar: {
startAngle: -135,
endAngle: 225,
hollow: {
margin: 0,
size: "60%", // Smaller inner circle
background: "#fff",
dropShadow: {
enabled: true,
top: 2,
left: 0,
blur: 3,
opacity: 0.45,
},
},
track: {
background: "#f5f5f5",
strokeWidth: "67%",
dropShadow: {
enabled: false,
},
},
dataLabels: {
show: true,
name: {
offsetY: -10,
color: "#888",
fontSize: "14px",
},
value: {
formatter: (val) => parseInt(val),
color: "#111",
fontSize: "24px", // Smaller number
show: true,
},
},
},
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
type: "horizontal",
shadeIntensity: 0.5,
gradientToColors: ["#ABE5A1"],
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100],
},
},
stroke: {
lineCap: "round",
},
labels: ["Percent"],
}, },
}); plotOptions: {
radialBar: {
startAngle: -135,
endAngle: 225,
hollow: {
margin: 0,
size: "60%",
background: "#fff",
dropShadow: {
enabled: true,
top: 2,
left: 0,
blur: 3,
opacity: 0.45,
},
},
track: {
background: "#f5f5f5",
strokeWidth: "40%",
dropShadow: { enabled: false },
},
dataLabels: {
show: true,
name: {
offsetY: -10,
color: "#888",
fontSize: "14px",
},
value: {
formatter: (val) => `${val}%`,
color: "#111",
fontSize: "24px",
show: true,
},
},
},
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
type: "horizontal",
shadeIntensity: 0.5,
gradientToColors: ["#ABE5A1"],
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100],
},
},
stroke: {
lineCap: "round",
},
labels: ["Progress"],
};
return ( return (
<div id="chart"> <div id="chart">
<ReactApexChart <ReactApexChart
options={state.options} options={options}
series={state.series} series={[percentage]}
type="radialBar" type="radialBar"
height={200} // Also apply to component height={200}
/> />
</div> </div>
); );
}; };
export default ApexChart; export default ApexChart;

158
src/components/Dashboard/Activity.jsx
View File

@ -3,6 +3,7 @@ import LineChart from "../Charts/LineChart";
import { useProjects } from "../../hooks/useProjects"; import { useProjects } from "../../hooks/useProjects";
import { useDashboard_ActivityData } from "../../hooks/useDashboard_Data"; import { useDashboard_ActivityData } from "../../hooks/useDashboard_Data";
import ApexChart from "../Charts/Circlechart"; import ApexChart from "../Charts/Circlechart";
import ApexChart1 from "../Charts/CircleChart1";
const LOCAL_STORAGE_PROJECT_KEY = "selectedActivityProjectId"; const LOCAL_STORAGE_PROJECT_KEY = "selectedActivityProjectId";
@ -14,7 +15,7 @@ const Activity = () => {
const initialProjectId = storedProjectId || "all"; const initialProjectId = storedProjectId || "all";
const [selectedProjectId, setSelectedProjectId] = useState(initialProjectId); const [selectedProjectId, setSelectedProjectId] = useState(initialProjectId);
const [displayedProjectName, setDisplayedProjectName] = useState("Select Project"); const [displayedProjectName, setDisplayedProjectName] = useState("Select Project");
const [activeTab, setActiveTab] = useState("all"); const [activeTab, setActiveTab] = useState("Summary");
const { dashboard_Activitydata: ActivityData, isLoading, error: isError } = const { dashboard_Activitydata: ActivityData, isLoading, error: isError } =
useDashboard_ActivityData(selectedDate, selectedProjectId); useDashboard_ActivityData(selectedDate, selectedProjectId);
@ -24,7 +25,9 @@ const Activity = () => {
setDisplayedProjectName("All Projects"); setDisplayedProjectName("All Projects");
} else if (projects) { } else if (projects) {
const foundProject = projects.find((p) => p.id === selectedProjectId); const foundProject = projects.find((p) => p.id === selectedProjectId);
setDisplayedProjectName(foundProject ? foundProject.name : "Select Project"); setDisplayedProjectName(
foundProject ? foundProject.name : "Select Project"
);
} else { } else {
setDisplayedProjectName("Select Project"); setDisplayedProjectName("Select Project");
} }
@ -42,11 +45,11 @@ const Activity = () => {
return ( return (
<div className="card h-100"> <div className="card h-100">
<div className="card-header"> <div className="card-header mb-1 pb-0">
<div className="d-flex flex-wrap justify-content-between align-items-center mb-0"> <div className="d-flex flex-wrap justify-content-between align-items-center mb-0 pb-0">
<div className="card-title mb-0 text-start"> <div className="card-title mb-0 text-start">
<h5 className="mb-1">Activity</h5> <h5 className="mb-1">Activity</h5>
<p className="card-subtitle">Activity Progress Chart</p> <p className="card-subtitle">Daily Activity Data</p>
</div> </div>
<div className="btn-group"> <div className="btn-group">
@ -58,6 +61,7 @@ const Activity = () => {
> >
{displayedProjectName} {displayedProjectName}
</button> </button>
<ul className="dropdown-menu"> <ul className="dropdown-menu">
<li> <li>
<button className="dropdown-item" onClick={() => handleProjectSelect("all")}> <button className="dropdown-item" onClick={() => handleProjectSelect("all")}>
@ -79,46 +83,59 @@ const Activity = () => {
</div> </div>
</div> </div>
{/* ✅ Date Picker Aligned Left with Padding */}
<div className="d-flex justify-content-start ps-3 mb-3"> {/* Tabs */}
<div style={{ width: "150px" }}> <div className="d-flex flex-wrap justify-content-between align-items-center ms-1">
<input <ul className="nav nav-tabs " role="tablist">
type="date" <li className="nav-item">
className="form-control" <button
value={selectedDate} type="button"
onChange={handleDateChange} className={`nav-link ${activeTab === "Summary" ? "active" : ""}`}
/> onClick={() => setActiveTab("Summary")}
data-bs-toggle="tab"
>
Summary
</button>
</li>
<li className="nav-item">
<button
type="button"
className={`nav-link ${activeTab === "Details" ? "active" : ""}`}
onClick={() => setActiveTab("Details")}
data-bs-toggle="tab"
>
Details
</button>
</li>
</ul>
{/* ✅ Date Picker Aligned Left with Padding */}
<div className="ps-6 mt-0 me-6 ">
<div style={{ width: "160px" }}>
<input
type="date"
style={{
height: "25px",
fontSize: "0.8rem",
padding: "10px 10px",
width: "100%",
border: "1.5px solid #3b82f6",
borderRadius: "4px",
outline: "none"
}}
value={selectedDate}
onChange={handleDateChange}
/>
</div>
</div> </div>
</div> </div>
{/* Tabs */} {/* #CircleChart for this function? */}
<ul className="nav nav-tabs " role="tablist"> <div className="card-body p-3">
<li className="nav-item"> {activeTab === "Summary" && (
<button
type="button"
className={`nav-link ${activeTab === "all" ? "active" : ""}`}
onClick={() => setActiveTab("all")}
data-bs-toggle="tab"
>
Summary
</button>
</li>
<li className="nav-item">
<button
type="button"
className={`nav-link ${activeTab === "logs" ? "active" : ""}`}
onClick={() => setActiveTab("logs")}
data-bs-toggle="tab"
>
Details
</button>
</li>
</ul>
<div className="card-body">
{activeTab === "all" && (
<div className="row justify-content-between"> <div className="row justify-content-between">
<div className="col-md-6 d-flex flex-column align-items-center text-center mb-4"> <div className="col-12 col-md-6 d-flex flex-column align-items-center text-center mb-4">
{isLoading ? ( {isLoading ? (
<p>Loading activity data...</p> <p>Loading activity data...</p>
) : isError ? ( ) : isError ? (
@ -135,13 +152,17 @@ const Activity = () => {
</h4> </h4>
<small className="text-muted">Completed / Assigned</small> <small className="text-muted">Completed / Assigned</small>
<div style={{ maxWidth: "180px" }}> <div style={{ maxWidth: "180px" }}>
<ApexChart /> <ApexChart
completed={ActivityData.totalCompletedWork}
planned={ActivityData.totalPlannedWork}
/>
</div> </div>
</> </>
) )
)} )}
</div> </div>
{/* #CircleChart1 for this function */}
<div className="col-md-6 d-flex flex-column align-items-center text-center mb-4"> <div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
{!isLoading && !isError && ActivityData && ( {!isLoading && !isError && ActivityData && (
<> <>
@ -149,12 +170,15 @@ const Activity = () => {
<i className="bx bx-task text-info"></i> Activities <i className="bx bx-task text-info"></i> Activities
</h5> </h5>
<h4 className="mb-0 fw-bold"> <h4 className="mb-0 fw-bold">
{ActivityData.totalCompletedWork?.toLocaleString()}/ {ActivityData.reportPending?.toLocaleString()}/
{ActivityData.totalPlannedWork?.toLocaleString()} {ActivityData.todaysAssigned?.toLocaleString()}
</h4> </h4>
<small className="text-muted ">Pending / Assigned</small> <small className="text-muted ">Pending / Assigned</small>
<div style={{ maxWidth: "180px" }}> <div style={{ maxWidth: "180px" }}>
<ApexChart /> <ApexChart1
Assigned={ActivityData.todaysAssigned}
Pending={ActivityData.reportPending}
/>
</div> </div>
</> </>
)} )}
@ -162,33 +186,47 @@ const Activity = () => {
</div> </div>
)} )}
{activeTab === "logs" && ( {activeTab === "Details" && (
<div className="table-responsive"> <div className="table-responsive" style={{ maxHeight: "300px", overflowY: "auto" }}>
<table className="table table-bordered table-hover"> <table className="table table-hover mb-0 text-start">
<thead> <thead>
<tr> <tr>
<th>Activity / Location</th> <th className="px-3" style={{ width: "60%" }}>Location / Activity</th>
<th>Assigned / Completed</th> <th >Assigned / Completed</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{[{ {ActivityData?.performedActivites && ActivityData.performedActivites.length > 0 ? (
activity: "Code Review / Remote", ActivityData.performedActivites.map((activity, index) => (
assignedToday: 3, <tr key={index}>
completed: 2 <td >
}].map((log, index) => ( {activity.buldingName}, {activity.floorName}, {activity.workAreaName}<br />
<tr key={index}> <small style={{ fontSize: "0.7rem" }}>
<td>{log.activity}</td> {activity.activityName}
<td>{log.assignedToday} / {log.completed}</td> </small>
</td>
<td className="text-center">{activity.assignedToday} / {activity.completedToday}</td> {/* <-- Right aligned */}
</tr>
))
) : (
<tr>
<td colSpan="2" className="text-center">No activity data available</td>
</tr> </tr>
))} )}
</tbody> </tbody>
</table> </table>
</div> </div>
)} )}
</div> </div>
</div> </div >
); );
}; };
export default Activity; export default Activity;

48
src/components/Dashboard/Attendance.jsx
View File

@ -88,16 +88,15 @@ const Attendance = () => {
</div> </div>
</div> </div>
<div className="d-flex flex-wrap justify-content-between align-items-center mb-0 mt-0 me-5 ms-5"> {/* Tabs */}
{/* Tabs */} <div className="d-flex flex-wrap justify-content-between align-items-center ms-1">
<div> <div>
<ul className="nav nav-tabs " role="tablist"> <ul className="nav nav-tabs " role="tablist">
<li className="nav-item"> <li className="nav-item">
<button <button
type="button" type="button"
className={`nav-link ${ className={`nav-link ${activeTab === "Summary" ? "active" : ""
activeTab === "Summary" ? "active" : "" }`}
}`}
onClick={() => setActiveTab("Summary")} onClick={() => setActiveTab("Summary")}
data-bs-toggle="tab" data-bs-toggle="tab"
> >
@ -107,9 +106,8 @@ const Attendance = () => {
<li className="nav-item"> <li className="nav-item">
<button <button
type="button" type="button"
className={`nav-link ${ className={`nav-link ${activeTab === "Details" ? "active" : ""
activeTab === "Details" ? "active" : "" }`}
}`}
onClick={() => setActiveTab("Details")} onClick={() => setActiveTab("Details")}
data-bs-toggle="tab" data-bs-toggle="tab"
> >
@ -118,21 +116,30 @@ const Attendance = () => {
</li> </li>
</ul> </ul>
</div> </div>
{/* ✅ Date Picker Aligned Left with Padding */} {/* ✅ Date Picker Aligned Left with Padding */}
<div className="ps-6 mb-3 mt-0"> <div className="ps-6 mt-0 me-6 ">
<div style={{ width: "120px" }}> <div style={{ width: "160px" }}>
<input <input
type="date" type="date"
className="form-control p-1" style={{
// style={{ fontSize: "1rem" }} height: "25px",
fontSize: "0.8rem",
padding: "10px 10px",
width: "100%",
border: "1.5px solid #3b82f6",
borderRadius: "4px",
outline: "none"
}}
value={selectedDate} value={selectedDate}
onChange={handleDateChange} onChange={handleDateChange}
/> />
</div> </div>
</div> </div>
</div> </div>
<div className="card-body"> <div className="card-body p-3">
{activeTab === "Summary" && ( {activeTab === "Summary" && (
<div className="row justify-content-center"> <div className="row justify-content-center">
<div className="col-12 col-md-6 d-flex flex-column align-items-center text-center mb-4"> <div className="col-12 col-md-6 d-flex flex-column align-items-center text-center mb-4">
@ -166,20 +173,21 @@ const Attendance = () => {
{activeTab === "Details" && ( {activeTab === "Details" && (
<div <div
className="table-responsive" className="table-responsive mt-1"
style={{ maxHeight: "300px", overflowY: "auto" }} style={{ maxHeight: "300px", overflowY: "auto", fontSize: "0.8rem" }}
> >
<table className="table table-hover mb-0 text-start"> <table className="table table-hover mb-0 text-start">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th className="px-3" style={{ width: "45%" }}>Name</th>
<th>Checkin</th> <th className="px-3" style={{ width: "35%" }}>Checkin</th>
<th>Checkout</th> <th className="px-3" style={{ width: "40%" }}>Checkout</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{AttendanceData?.attendanceTable && {AttendanceData?.attendanceTable &&
AttendanceData.attendanceTable.length > 0 ? ( AttendanceData.attendanceTable.length > 0 ? (
AttendanceData.attendanceTable.map((record, index) => ( AttendanceData.attendanceTable.map((record, index) => (
<tr key={index}> <tr key={index}>
<td> <td>
@ -191,7 +199,7 @@ const Attendance = () => {
minute: "2-digit", minute: "2-digit",
})} })}
</td> </td>
<td> <td className="px-5 align-middle">
{new Date(record.outTime).toLocaleTimeString([], { {new Date(record.outTime).toLocaleTimeString([], {
hour: "2-digit", hour: "2-digit",
minute: "2-digit", minute: "2-digit",

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

@ -3,37 +3,46 @@ import {
useDashboardProjectsCardData, useDashboardProjectsCardData,
useDashboardTeamsCardData, useDashboardTeamsCardData,
useDashboardTasksCardData, useDashboardTasksCardData,
useDashboardPendingAttendenceData,
} from "../../hooks/useDashboard_Data"; } from "../../hooks/useDashboard_Data";
import Projects from "./Projects"; import Projects from "./Projects";
import Teams from "./Teams"; import Teams from "./Teams";
import TasksCard from "./Tasks"; import TasksCard from "./Tasks";
import ProjectCompletionChart from "./ProjectCompletionChart"; import ProjectCompletionChart from "./ProjectCompletionChart";
import ProjectProgressChart from "./ProjectProgressChart"; import ProjectProgressChart from "./ProjectProgressChart";
// import Attendance from "./Attendance"; import Attendance from "./Attendance";
import PendingAttendance from "./PendingAttendance";
import Activity from "./Activity";
const Dashboard = () => { const Dashboard = () => {
const { projectsCardData } = useDashboardProjectsCardData(); const { projectsCardData } = useDashboardProjectsCardData();
const { teamsCardData } = useDashboardTeamsCardData(); const { teamsCardData } = useDashboardTeamsCardData();
const { tasksCardData } = useDashboardTasksCardData(); const { tasksCardData } = useDashboardTasksCardData();
const { PendingAttendenceData} = useDashboardPendingAttendenceData();
return ( return (
<div className="container-xxl flex-grow-1 container-p-y"> <div className="container-xxl flex-grow-1 container-p-y">
<div className="row gy-4"> <div className="row gy-4">
{/* Projects Card */} {/* Projects Card */}
<div className="col-sm-6 col-lg-4"> <div className="col-sm-6 col-lg-3">
<Projects projectsCardData={projectsCardData} /> <Projects projectsCardData={projectsCardData} />
</div> </div>
{/* Teams Card */} {/* Teams Card */}
<div className="col-sm-6 col-lg-4"> <div className="col-sm-6 col-lg-3">
<Teams teamsCardData={teamsCardData} /> <Teams teamsCardData={teamsCardData} />
</div> </div>
{/* Tasks Card */} {/* Tasks Card */}
<div className="col-sm-6 col-lg-4"> <div className="col-sm-6 col-lg-3">
<TasksCard tasksCardData={tasksCardData} /> <TasksCard tasksCardData={tasksCardData} />
</div> </div>
{/* Pending Attendance Card */}
<div className="col-sm-6 col-lg-3">
<PendingAttendance PendingAttendenceData={PendingAttendenceData}/>
</div>
{/* Bar Chart (Project Completion) */} {/* Bar Chart (Project Completion) */}
<div className="col-xxl-6 col-lg-6"> <div className="col-xxl-6 col-lg-6">
<ProjectCompletionChart /> <ProjectCompletionChart />
@ -44,9 +53,13 @@ const Dashboard = () => {
<ProjectProgressChart /> <ProjectProgressChart />
</div> </div>
{/* <div className="col-xxl-6 col-lg-6"> <div className="col-xxl-6 col-lg-6">
<Attendance /> <Attendance />
</div> */} </div>
<div className="col-xxl-6 col-lg-6">
<Activity/>
</div>
</div> </div>
</div> </div>
); );

61
src/hooks/useDashboard_Data.jsx
View File

@ -1,5 +1,6 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import GlobalRepository from "../repositories/GlobalRepository"; import GlobalRepository from "../repositories/GlobalRepository";
import Attendance from "../components/Dashboard/Attendance";
// 🔹 Dashboard Progression Data Hook // 🔹 Dashboard Progression Data Hook
export const useDashboard_Data = ({ days, FromDate, projectId }) => { export const useDashboard_Data = ({ days, FromDate, projectId }) => {
@ -67,6 +68,38 @@ export const useDashboard_AttendanceData = (date, projectId) => {
return { dashboard_Attendancedata, isLineChartLoading: isLineChartLoading, error }; return { dashboard_Attendancedata, isLineChartLoading: isLineChartLoading, error };
}; };
// Activity weidget
export const useDashboard_ActivityData = (date, projectId) => {
const [dashboard_Activitydata, setDashboard_ActivityData] = useState([]);
const [isLineChartLoading, setLoading] = useState(false);
const [error, setError] = useState("");
useEffect(() => {
const fetchData = async () => {
setLoading(true);
setError("");
try {
const response = await GlobalRepository.getDashboardActivityData(date,projectId); // date in 2nd param
setDashboard_ActivityData(response.data);
} catch (err) {
setError("Failed to fetch dashboard data.");
console.error(err);
} finally {
setLoading(false);
}
};
if (date && projectId !== null) {
fetchData();
}
}, [date, projectId]);
return { dashboard_Activitydata, isLineChartLoading: isLineChartLoading, error };
};
// 🔹 Dashboard Projects Card Data Hook // 🔹 Dashboard Projects Card Data Hook
export const useDashboardProjectsCardData = () => { export const useDashboardProjectsCardData = () => {
@ -151,3 +184,31 @@ export const useDashboardTasksCardData = () => {
return { tasksCardData, loading, error }; return { tasksCardData, loading, error };
}; };
// Pending Attendance
export const useDashboardPendingAttendenceData = () => {
const [PendingAttendenceData, setPendingAttendence] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
useEffect(() => {
const fetchPendingAttendence = async () => {
setLoading(true);
setError("");
try {
const response = await GlobalRepository.getDashboardPendingAttendence();
setPendingAttendence(response.data);
} catch (err) {
setError("Failed to fetch Pending Attendence card data.");
console.error(err);
} finally {
setLoading(false);
}
};
fetchPendingAttendence();
}, []);
return { PendingAttendenceData, loading, error };
};

16
src/repositories/GlobalRepository.jsx
View File

@ -3,12 +3,12 @@ import { api } from "../utils/axiosClient";
const GlobalRepository = { const GlobalRepository = {
getDashboardProgressionData: ({ days = '', FromDate = '', projectId = '' }) => { getDashboardProgressionData: ({ days = '', FromDate = '', projectId = '' }) => {
let params; let params;
if(projectId == null){ if (projectId == null) {
params = new URLSearchParams({ params = new URLSearchParams({
days: days.toString(), days: days.toString(),
FromDate, FromDate,
}); });
}else{ } else {
params = new URLSearchParams({ params = new URLSearchParams({
days: days.toString(), days: days.toString(),
FromDate, FromDate,
@ -19,10 +19,10 @@ const GlobalRepository = {
return api.get(`/api/Dashboard/Progression?${params.toString()}`); return api.get(`/api/Dashboard/Progression?${params.toString()}`);
}, },
getDashboardAttendanceData: ( date,projectId ) => { getDashboardAttendanceData: (date, projectId) => {
return api.get(`/api/Dashboard/project-attendance/${projectId}?date=${date}`); return api.get(`/api/Dashboard/project-attendance/${projectId}?date=${date}`);
}, },
getDashboardProjectsCardData: () => { getDashboardProjectsCardData: () => {
return api.get(`/api/Dashboard/projects`); return api.get(`/api/Dashboard/projects`);
}, },
@ -32,6 +32,12 @@ const GlobalRepository = {
getDashboardTasksCardData: () => { getDashboardTasksCardData: () => {
return api.get(`/api/Dashboard/tasks`); return api.get(`/api/Dashboard/tasks`);
}, },
getDashboardPendingAttendence: () => {
return api.get(`/api/dashboard/pending-attendance`);
},
getDashboardActivityData: ( date,projectId ) => {
return api.get(`/api/Dashboard/activities/${projectId}?date=${date}`);
},
}; };