diff --git a/src/components/Charts/Circlechart.jsx b/src/components/Charts/Circlechart.jsx new file mode 100644 index 00000000..ab1c1116 --- /dev/null +++ b/src/components/Charts/Circlechart.jsx @@ -0,0 +1,85 @@ +import React from "react"; +import ReactApexChart from "react-apexcharts"; + +const ApexChart = () => { + const [state] = React.useState({ + series: [75], // Replace this with dynamic value if needed + options: { + chart: { + height: 200, // Smaller height + type: "radialBar", + toolbar: { + 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"], + }, + }); + + return ( +
+ +
+ ); +}; + +export default ApexChart; diff --git a/src/components/Dashboard/Activity.jsx b/src/components/Dashboard/Activity.jsx new file mode 100644 index 00000000..a1f9c5fc --- /dev/null +++ b/src/components/Dashboard/Activity.jsx @@ -0,0 +1,194 @@ +import React, { useState, useEffect } from "react"; +import LineChart from "../Charts/LineChart"; +import { useProjects } from "../../hooks/useProjects"; +import { useDashboard_ActivityData } from "../../hooks/useDashboard_Data"; +import ApexChart from "../Charts/Circlechart"; + +const LOCAL_STORAGE_PROJECT_KEY = "selectedActivityProjectId"; + +const Activity = () => { + const { projects } = useProjects(); + const today = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD + const [selectedDate, setSelectedDate] = useState(today); + const storedProjectId = localStorage.getItem(LOCAL_STORAGE_PROJECT_KEY); + const initialProjectId = storedProjectId || "all"; + const [selectedProjectId, setSelectedProjectId] = useState(initialProjectId); + const [displayedProjectName, setDisplayedProjectName] = useState("Select Project"); + const [activeTab, setActiveTab] = useState("all"); + + const { dashboard_Activitydata: ActivityData, isLoading, error: isError } = + useDashboard_ActivityData(selectedDate, selectedProjectId); + + useEffect(() => { + if (selectedProjectId === "all") { + setDisplayedProjectName("All Projects"); + } else if (projects) { + const foundProject = projects.find((p) => p.id === selectedProjectId); + setDisplayedProjectName(foundProject ? foundProject.name : "Select Project"); + } else { + setDisplayedProjectName("Select Project"); + } + + localStorage.setItem(LOCAL_STORAGE_PROJECT_KEY, selectedProjectId); + }, [selectedProjectId, projects]); + + const handleProjectSelect = (projectId) => { + setSelectedProjectId(projectId); + }; + + const handleDateChange = (e) => { + setSelectedDate(e.target.value); + }; + + return ( +
+
+
+
+
Activity
+

Activity Progress Chart

+
+ +
+ +
    +
  • + +
    • + {projects?.map((project) => ( +
  • + +
    • + ))} +
+
+
+
+ + {/* ✅ Date Picker Aligned Left with Padding */} +
+
+ +
+
+ + {/* Tabs */} + + +
+ {activeTab === "all" && ( +
+
+ {isLoading ? ( +

Loading activity data...

+ ) : isError ? ( +

No data available.

+ ) : ( + ActivityData && ( + <> +
+ Allocated Task +
+

+ {ActivityData.totalCompletedWork?.toLocaleString()}/ + {ActivityData.totalPlannedWork?.toLocaleString()} +

+ Completed / Assigned +
+ +
+ + ) + )} +
+ +
+ {!isLoading && !isError && ActivityData && ( + <> +
+ Activities +
+

+ {ActivityData.totalCompletedWork?.toLocaleString()}/ + {ActivityData.totalPlannedWork?.toLocaleString()} +

+ Pending / Assigned +
+ +
+ + )} +
+
+ )} + + {activeTab === "logs" && ( +
+ + + + + + + + + {[{ + activity: "Code Review / Remote", + assignedToday: 3, + completed: 2 + }].map((log, index) => ( + + + + + ))} + +
Activity / LocationAssigned / Completed
{log.activity}{log.assignedToday} / {log.completed}
+
+ )} +
+
+ ); +}; + +export default Activity; diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx index cb8e7e74..93e9f18e 100644 --- a/src/components/Dashboard/Dashboard.jsx +++ b/src/components/Dashboard/Dashboard.jsx @@ -3,45 +3,38 @@ import { useDashboardProjectsCardData, useDashboardTeamsCardData, useDashboardTasksCardData, - useDashboardPendingAttendenceData, } from "../../hooks/useDashboard_Data"; import Projects from "./Projects"; import Teams from "./Teams"; import TasksCard from "./Tasks"; import ProjectCompletionChart from "./ProjectCompletionChart"; import ProjectProgressChart from "./ProjectProgressChart"; -import PendingAttendance from "./PendingAttendance"; +import Activity from "./Activity"; const Dashboard = () => { const { projectsCardData } = useDashboardProjectsCardData(); const { teamsCardData } = useDashboardTeamsCardData(); const { tasksCardData } = useDashboardTasksCardData(); - const {PendingAttendenceData} = useDashboardPendingAttendenceData(); - - + // const { ActivityData } = useDashboardActivityData(); + return (
{/* Projects Card */} -
+
{/* Teams Card */} -
+
{/* Tasks Card */} -
+
- {/* Pending Attendance */} -
- -
- {/* Bar Chart (Project Completion) */}
@@ -51,6 +44,10 @@ const Dashboard = () => {
+ +
+ +
); diff --git a/src/components/common/DatePicker.jsx b/src/components/common/DatePicker.jsx index 7003ab78..728b14fb 100644 --- a/src/components/common/DatePicker.jsx +++ b/src/components/common/DatePicker.jsx @@ -23,9 +23,9 @@ const DatePicker = ({ onDateChange }) => { return (
- */} { return { dashboard_data, loading: isLineChartLoading, error }; }; +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 export const useDashboardProjectsCardData = () => { const [projectsCardData, setProjectsData] = useState([]); @@ -121,30 +151,30 @@ export const useDashboardTasksCardData = () => { return { tasksCardData, loading, error }; }; -export const useDashboardPendingAttendenceData = () => { - const [PendingAttendenceData, setPendingAttendence] = useState([]); - const [loading, setLoading] = useState(false); - const [error, setError] = useState(""); - useEffect(() => { - const fetchPendingAttendence = async () => { - setLoading(true); - setError(""); +// export const useDashboardActivityData = () => { +// const [ActivityData, setActivityData] = useState([]); +// const [loading, setLoading] = useState(false); +// const [error, setError] = useState(""); - 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); - } - }; +// useEffect(() => { +// const fetchTasksData = async () => { +// setLoading(true); +// setError(""); - fetchPendingAttendence(); - }, []); +// try { +// const response = await GlobalRepository.getDashboardActivityData(); +// setActivityData(response.data); +// } catch (err) { +// setError("Failed to fetch tasks card data."); +// console.error(err); +// } finally { +// setLoading(false); +// } +// }; - return { PendingAttendenceData, loading, error }; -}; +// fetchTasksData(); +// }, []); +// return { ActivityData, loading, error }; +// }; diff --git a/src/repositories/GlobalRepository.jsx b/src/repositories/GlobalRepository.jsx index 5ee67f01..eb84be2a 100644 --- a/src/repositories/GlobalRepository.jsx +++ b/src/repositories/GlobalRepository.jsx @@ -18,6 +18,23 @@ const GlobalRepository = { return api.get(`/api/Dashboard/Progression?${params.toString()}`); }, + + + getDashboardActivityData: ( date,projectId ) => { + + return api.get(`/api/Dashboard/activities/${projectId}?date=${date}`); +}, + +// getDashboardActivityData: (date, projectId) => { +// let url = `/api/Dashboard/activities`; +// if (projectId) { +// url += `/${projectId}?date=${date}`; +// } else { +// url += `?date=${date}`; // Fetch for all projects +// } +// return api.get(url); +// }, + getDashboardProjectsCardData: () => { return api.get(`/api/Dashboard/projects`); },