diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx index a3cd6300..bdd4e4a4 100644 --- a/src/components/Dashboard/Dashboard.jsx +++ b/src/components/Dashboard/Dashboard.jsx @@ -14,10 +14,7 @@ import { useSelector } from "react-redux"; // import ProjectProgressChart from "./ProjectProgressChart"; // import ProjectOverview from "../Project/ProjectOverview"; import AttendanceOverview from "./AttendanceChart"; -import ExpenseChart from "./ExpenseChart"; import ExpenseChartDesign2 from "./ExpenseChartDesign2"; -import ExpenseChartDesign1 from "./ExpenseChartDesign1"; -import ExpenseChartBar from "./ExpenseChartBar"; const Dashboard = () => { // const { projectsCardData } = useDashboardProjectsCardData(); @@ -31,20 +28,11 @@ const Dashboard = () => { return (
-
- -
+
-
- -
-
- -
- - + {!isAllProjectsSelected && (
{/* Removed unnecessary projectId prop */} diff --git a/src/components/Dashboard/ExpenseChart.jsx b/src/components/Dashboard/ExpenseChart.jsx deleted file mode 100644 index a0977f12..00000000 --- a/src/components/Dashboard/ExpenseChart.jsx +++ /dev/null @@ -1,145 +0,0 @@ -import React from "react"; -import Chart from "react-apexcharts"; - -const ExpenseChart = () => { - // Radial Bar chart config - const radialBarOptions = { - chart: { - type: "radialBar", - }, - plotOptions: { - radialBar: { - hollow: { - size: "60%", - }, - dataLabels: { - name: { - show: true, - }, - value: { - fontSize: "18px", - fontWeight: 600, - color: "#000", - }, - }, - }, - }, - labels: ["Expenses"], - series: [68], // % of budget spent - colors: ["#FF4560"], - }; - - // Dummy expense data - const expenses = { - food: 450, - transport: 300, - shopping: 150, - bills: 200, - }; - - const total = - expenses.food + expenses.transport + expenses.shopping + expenses.bills; - - return ( -
- {/* Card Header */} -
-
Expense Breakdown-1
-

Detailed project expenses

-
- - {/* Card Body */} -
-
    -
  • -
    - {/* Centered Chart */} -
    -
    - -
    -
    - - {/* Info Section */} -
    -
    - {/* Food */} -
    -
    - - - -
    -
    - Food -
    {expenses.food}
    -
    -
    - - {/* Transport */} -
    -
    - - - -
    -
    - Transport -
    {expenses.transport}
    -
    -
    - - {/* Shopping */} -
    -
    - - - -
    -
    - Shopping -
    {expenses.shopping}
    -
    -
    - - {/* Bills */} -
    -
    - - - -
    -
    - Bills -
    {expenses.bills}
    -
    -
    - - {/* Total */} -
    -
    - - - -
    -
    - Total -
    {total}
    -
    -
    -
    -
    -
    -
    • -
-
-
- ); -}; - -export default ExpenseChart; \ No newline at end of file diff --git a/src/components/Dashboard/ExpenseChartBar.jsx b/src/components/Dashboard/ExpenseChartBar.jsx deleted file mode 100644 index fa542380..00000000 --- a/src/components/Dashboard/ExpenseChartBar.jsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from "react"; -import Chart from "react-apexcharts"; - -const ExpenseChartBar = () => { - const series = [ - { - name: "Expenses", - data: [450, 300, 150, 200], - }, - ]; - const options = { - chart: { type: "bar", height: 350 }, - plotOptions: { - bar: { - horizontal: true, - borderRadius: 6, - }, - }, - dataLabels: { enabled: true }, - xaxis: { - categories: ["Food", "Transport", "Shopping", "Bills"], - }, - colors: ["#1E90FF"], - }; - - const total = 450 + 300 + 150 + 200; - - return ( -
-
-
Expense Breakdown-2
-

Detailed project expenses

-
-
- {/* Bar Chart */} - - - {/* Total */} -
- Total Expenses - {total} -
-
-
- ); -}; - -export default ExpenseChartBar; \ No newline at end of file diff --git a/src/components/Dashboard/ExpenseChartDesign1.jsx b/src/components/Dashboard/ExpenseChartDesign1.jsx deleted file mode 100644 index 8d870fc4..00000000 --- a/src/components/Dashboard/ExpenseChartDesign1.jsx +++ /dev/null @@ -1,72 +0,0 @@ -import React from "react"; -import Chart from "react-apexcharts"; - -const ExpenseChartDesign1 = () => { - const budget = 1500; - const expenses = { - food: 450, - transport: 300, - shopping: 250, - bills: 200, - }; - - const total = Object.values(expenses).reduce((a, b) => a + b, 0); - const percent = Math.round((total / budget) * 100); - - const radialOptions = { - chart: { type: "radialBar" }, - plotOptions: { - radialBar: { - hollow: { size: "65%" }, - dataLabels: { - name: { show: true, fontSize: "14px" }, - value: { fontSize: "20px", fontWeight: "bold" }, - }, - }, - }, - labels: ["Budget Used"], - colors: ["#7367F0"], - series: [percent], - }; - - return ( -
-
-
Expense Breakdown-4
-

Detailed project expenses

-
- -
- {/* Radial Chart */} - -
- ${total} / ${budget} spent -
- - {/* Categories */} -
- {Object.entries(expenses).map(([key, value], idx) => ( -
-
- - - -
-
- {key} - ${value} -
-
- ))} -
-
-
- ); -}; - -export default ExpenseChartDesign1; \ No newline at end of file diff --git a/src/components/Dashboard/ExpenseChartDesign2.jsx b/src/components/Dashboard/ExpenseChartDesign2.jsx index f01b348e..e5df1bb2 100644 --- a/src/components/Dashboard/ExpenseChartDesign2.jsx +++ b/src/components/Dashboard/ExpenseChartDesign2.jsx @@ -1,131 +1,119 @@ - -import React from "react"; +import React, { useState } from "react"; import Chart from "react-apexcharts"; +import DateRangePicker from "../common/DateRangePicker"; +import { useDashboard_ExpenseData } from "../../hooks/useDashboard_Data"; +import { useSelectedProject } from "../../slices/apiDataManager"; const ExpenseChartDesign2 = () => { - const expenses = { - food: 450, - transport: 300, - shopping: 250, - bills: 200, - }; + const projectId = useSelectedProject() + const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" }); - const total = Object.values(expenses).reduce((a, b) => a + b, 0); + const { data, isLoading, isError, error } = useDashboard_ExpenseData( + projectId, + dateRange.startDate, + dateRange.endDate + ); - const donutOptions = { - chart: { type: "donut" }, - labels: ["Food", "Transport", "Shopping", "Bills"], - legend: { show: false }, - dataLabels: { - enabled: true, - formatter: (val) => `${val.toFixed(0)}%`, - }, - colors: ["#7367F0", "#28C76F", "#FF9F43", "#EA5455"], - plotOptions: { - pie: { - donut: { - size: "70%", - labels: { - show: true, - total: { - show: true, - label: "Total", - fontSize: "16px", - formatter: () => `$${total}`, + if (isLoading) return
Loading....
+ if (isError) return
{error.message}
; + + const report = data?.report || []; + + // Map the API data to chart labels and series + const labels = report.map((item) => item.projectName); + const series = report.map((item) => item.totalApprovedAmount || 0); + const total = data?.totalAmount || 0; + + const donutOptions = { + chart: { type: "donut" }, + labels, + legend: { show: false }, + dataLabels: { enabled: true, formatter: (val) => `${val.toFixed(0)}%` }, + colors: ["#7367F0", "#28C76F", "#FF9F43", "#EA5455", "#00CFE8", "#FF78B8"], + plotOptions: { + pie: { + donut: { + size: "70%", + labels: { + show: true, + total: { + show: true, + label: "Total", + fontSize: "16px", + formatter: () => `${total}`, + }, + }, + }, }, - }, }, - }, - }, - }; + }; - const series = Object.values(expenses); - - return ( -
-
-
Expense Breakdown-3
-

Detailed project expenses

-
- -
- {/* Donut Chart */} -
- + if (data?.report === 0) { + return
+ No data found
+ } - {/* Custom Legend with Icons and Right-Aligned Amount */} -
-
- {/* Food */} -
-
-
- - - + return ( +
+
+
+
Expense Breakdown
+

Detailed project expenses

+
+
+
- Food -
- ${expenses.food}
- {/* Transport */} -
-
-
- - - -
- Transport -
- ${expenses.transport} -
+
+ {report.length === 0 ? ( +
+ No data found +
+ ) : ( + <> +
+ item.totalApprovedAmount || 0)} + type="donut" + width="320" + /> +
- {/* Shopping */} -
-
-
- - - -
- Shopping -
- ${expenses.shopping} +
+
+ {report.map((item, idx) => ( +
+
+ + + +
+
+ {item.projectName} + {item.totalApprovedAmount} +
+
+ ))} +
+
+ + )}
- - {/* Bills */} -
-
-
- - - -
- Bills -
- ${expenses.bills} -
- - {/* Total */} -
-
-
- - - -
- Total -
- ${total} -
-
-
-
- ); + ); }; export default ExpenseChartDesign2; diff --git a/src/hooks/useDashboard_Data.jsx b/src/hooks/useDashboard_Data.jsx index b9c393b7..9843f72a 100644 --- a/src/hooks/useDashboard_Data.jsx +++ b/src/hooks/useDashboard_Data.jsx @@ -200,35 +200,45 @@ export const useAttendanceOverviewData = (projectId, days) => { // }) // } -export const useDashboard_AttendanceData = (date,projectId)=>{ - return useQuery({ - queryKey:["dashboardAttendances",date,projectId], - queryFn:async()=> { - - const resp = await await GlobalRepository.getDashboardAttendanceData(date, projectId) - return resp.data; +export const useDashboard_AttendanceData = (date, projectId) => { + return useQuery({ + queryKey: ["dashboardAttendances", date, projectId], + queryFn: async () => { + + const resp = await await GlobalRepository.getDashboardAttendanceData(date, projectId) + return resp.data; } }) } -export const useDashboardTeamsCardData =(projectId)=>{ - return useQuery({ - queryKey:["dashboardTeams",projectId], - queryFn:async()=> { - - const resp = await GlobalRepository.getDashboardTeamsCardData(projectId) - return resp.data; +export const useDashboard_ExpenseData = (projectId, startDate, endDate) => { + return useQuery({ + queryKey: ["dashboardExpenses", projectId, startDate, endDate], + queryFn: async () => { + const resp = await GlobalRepository.getExpenseData(projectId, startDate, endDate); + return resp.data; // this will return the "data" object from API response + }, + }); +}; + +export const useDashboardTeamsCardData = (projectId) => { + return useQuery({ + queryKey: ["dashboardTeams", projectId], + queryFn: async () => { + + const resp = await GlobalRepository.getDashboardTeamsCardData(projectId) + return resp.data; } }) } export const useDashboardTasksCardData = (projectId) => { - return useQuery({ - queryKey:["dashboardTasks",projectId], - queryFn:async()=> { - - const resp = await GlobalRepository.getDashboardTasksCardData(projectId) - return resp.data; + return useQuery({ + queryKey: ["dashboardTasks", projectId], + queryFn: async () => { + + const resp = await GlobalRepository.getDashboardTasksCardData(projectId) + return resp.data; } }) } @@ -236,7 +246,7 @@ export const useDashboardTasksCardData = (projectId) => { // return useQuery({ // queryKey:["dashboardAttendanceOverView",projectId], // queryFn:async()=> { - + // const resp = await GlobalRepository.getAttendanceOverview(projectId, days); // return resp.data; // } @@ -244,12 +254,12 @@ export const useDashboardTasksCardData = (projectId) => { // } export const useDashboardProjectsCardData = () => { - return useQuery({ - queryKey:["dashboardProjects"], - queryFn:async()=> { - - const resp = await GlobalRepository.getDashboardProjectsCardData(); - return resp.data; + return useQuery({ + queryKey: ["dashboardProjects"], + queryFn: async () => { + + const resp = await GlobalRepository.getDashboardProjectsCardData(); + return resp.data; } }) } \ No newline at end of file diff --git a/src/repositories/GlobalRepository.jsx b/src/repositories/GlobalRepository.jsx index d3367fa6..96674b76 100644 --- a/src/repositories/GlobalRepository.jsx +++ b/src/repositories/GlobalRepository.jsx @@ -3,12 +3,12 @@ import { api } from "../utils/axiosClient"; const GlobalRepository = { getDashboardProgressionData: ({ days = '', FromDate = '', projectId = '' }) => { let params; - if(projectId == null){ + if (projectId == null) { params = new URLSearchParams({ days: days.toString(), FromDate, }); - }else{ + } else { params = new URLSearchParams({ days: days.toString(), FromDate, @@ -19,30 +19,54 @@ const GlobalRepository = { 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: () => { return api.get(`/api/Dashboard/projects`); }, - + getDashboardTeamsCardData: (projectId) => { - const url = projectId - ? `/api/Dashboard/teams?projectId=${projectId}` - : `/api/Dashboard/teams`; - return api.get(url); -}, + const url = projectId + ? `/api/Dashboard/teams?projectId=${projectId}` + : `/api/Dashboard/teams`; + return api.get(url); + }, getDashboardTasksCardData: (projectId) => { - const url = projectId - ? `/api/Dashboard/tasks?projectId=${projectId}` - : `/api/Dashboard/tasks`; - return api.get(url); -}, + const url = projectId + ? `/api/Dashboard/tasks?projectId=${projectId}` + : `/api/Dashboard/tasks`; + return api.get(url); + }, - getAttendanceOverview:(projectId,days)=>api.get(`/api/dashboard/attendance-overview/${projectId}?days=${days}`) + getAttendanceOverview: (projectId, days) => api.get(`/api/dashboard/attendance-overview/${projectId}?days=${days}`), + + + getExpenseData: (projectId, startDate, endDate) => { + let url = `api/Dashboard/expense/type` + + const queryParams = []; + + if (projectId) { + queryParams.push(`projectId=${projectId}`); + } + + if (startDate) { + queryParams.push(`startDate=${startDate}`); + } + if (endDate) { + queryParams.push(`endDate=${endDate}`); + } + + if (queryParams.length > 0) { + url += `?${queryParams.join("&")}`; + } + + return api.get(url ); + }, }; export default GlobalRepository;