Implementing api for Expense data

This commit is contained in:
Kartik Sharma 2025-10-01 18:56:30 +05:30
parent 014012abf3
commit edebc2e471
7 changed files with 180 additions and 435 deletions

View File

@ -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 (
<div className="container-fluid mt-5">
<div className="row gy-4">
<div className="col-xxl-6 col-lg-6">
<ExpenseChart />
</div>
<div className="col-xxl-6 col-lg-6">
<ExpenseChartDesign2 />
</div>
<div className="col-xxl-6 col-lg-6">
<ExpenseChartDesign1 />
</div>
<div className="col-xxl-6 col-lg-6">
<ExpenseChartBar />
</div>
{!isAllProjectsSelected && (
<div className="col-xxl-6 col-lg-6">
<AttendanceOverview /> {/* Removed unnecessary projectId prop */}

View File

@ -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 (
<div className="card" style={{ minHeight: "490px" }}>
{/* Card Header */}
<div className="card-header text-start">
<h5 className="mb-1 fw-bold">Expense Breakdown-1</h5>
<p className="card-subtitle">Detailed project expenses</p>
</div>
{/* Card Body */}
<div className="card-body">
<ul className="list-unstyled m-0 p-0">
<li className="d-flex flex-wrap">
<div className="w-100 d-flex flex-wrap">
{/* Centered Chart */}
<div className="w-100 d-flex justify-content-center mb-3">
<div>
<Chart
options={radialBarOptions}
series={radialBarOptions.series}
type="radialBar"
height="250"
/>
</div>
</div>
{/* Info Section */}
<div className="mb-2 w-100" style={{ flex: "1 1 auto" }}>
<div>
{/* Food */}
<div className="d-flex align-items-center mb-3">
<div className="avatar me-2">
<span className="avatar-initial rounded-2 bg-label-primary">
<i className="bx bx-bowl-hot text-primary fs-4"></i>
</span>
</div>
<div className="d-flex flex-column text-start">
<small className="fw-bold">Food</small>
<h5 className="mb-0">{expenses.food}</h5>
</div>
</div>
{/* Transport */}
<div className="d-flex align-items-center mb-3">
<div className="avatar me-2">
<span className="avatar-initial rounded-2 bg-label-info">
<i className="bx bx-car text-info fs-4"></i>
</span>
</div>
<div className="d-flex flex-column text-start">
<small className="fw-bold">Transport</small>
<h5 className="mb-0">{expenses.transport}</h5>
</div>
</div>
{/* Shopping */}
<div className="d-flex align-items-center mb-3">
<div className="avatar me-2">
<span className="avatar-initial rounded-2 bg-label-warning">
<i className="bx bx-cart text-warning fs-4"></i>
</span>
</div>
<div className="d-flex flex-column text-start">
<small className="fw-bold">Shopping</small>
<h5 className="mb-0">{expenses.shopping}</h5>
</div>
</div>
{/* Bills */}
<div className="d-flex align-items-center mb-3">
<div className="avatar me-2">
<span className="avatar-initial rounded-2 bg-label-danger">
<i className="bx bx-receipt text-danger fs-4"></i>
</span>
</div>
<div className="d-flex flex-column text-start">
<small className="fw-bold">Bills</small>
<h5 className="mb-0">{expenses.bills}</h5>
</div>
</div>
{/* Total */}
<div className="d-flex align-items-center">
<div className="avatar me-2">
<span className="avatar-initial rounded-2 bg-label-success">
<i className="bx bx-wallet text-success fs-4"></i>
</span>
</div>
<div className="d-flex flex-column text-start">
<small className="fw-bold">Total</small>
<h5 className="mb-0">{total}</h5>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
);
};
export default ExpenseChart;

View File

@ -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 (
<div className="card" style={{ minHeight: "490px" }}>
<div className="card-header text-start">
<h5 className="mb-1 fw-bold">Expense Breakdown-2</h5>
<p className="card-subtitle">Detailed project expenses</p>
</div>
<div className="card-body">
{/* Bar Chart */}
<Chart options={options} series={series} type="bar" height={300} />
{/* Total */}
<div className="d-flex justify-content-between mt-3">
<span className="fw-bold">Total Expenses</span>
<span className="fw-bold text-success">{total}</span>
</div>
</div>
</div>
);
};
export default ExpenseChartBar;

View File

@ -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 (
<div className="card shadow-sm" style={{ minHeight: "490px" }}>
<div className="card-header text-start">
<h5 className="mb-1 fw-bold">Expense Breakdown-4</h5>
<p className="card-subtitle">Detailed project expenses</p>
</div>
<div className="card-body d-flex flex-column align-items-center">
{/* Radial Chart */}
<Chart
options={radialOptions}
series={radialOptions.series}
type="radialBar"
height="250"
/>
<h6 className="mt-3 text-muted">
${total} / ${budget} spent
</h6>
{/* Categories */}
<div className="mt-4 w-100">
{Object.entries(expenses).map(([key, value], idx) => (
<div className="d-flex align-items-center mb-3" key={idx}>
<div className="avatar me-2">
<span className="avatar-initial rounded-2 bg-label-primary">
<i className="bx bx-wallet text-primary fs-5"></i>
</span>
</div>
<div className="d-flex justify-content-between flex-grow-1">
<small className="fw-bold text-capitalize">{key}</small>
<span className="fw-bold">${value}</span>
</div>
</div>
))}
</div>
</div>
</div>
);
};
export default ExpenseChartDesign1;

View File

@ -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 <div>Loading....</div>
if (isError) return <div>{error.message}</div>;
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 (
<div className="card shadow-sm" style={{ minHeight: "490px" }}>
<div className="card-header text-start mt-3">
<h5 className="mb-1 fw-bold">Expense Breakdown-3</h5>
<p className="card-subtitle">Detailed project expenses</p>
</div>
<div className="card-body">
{/* Donut Chart */}
<div className="d-flex justify-content-center mb-4">
<Chart options={donutOptions} series={series} type="donut" width="320" />
if (data?.report === 0) {
return <div>
No data found
</div>
}
{/* Custom Legend with Icons and Right-Aligned Amount */}
<div className="mb-2 w-100" style={{ flex: "1 1 auto" }}>
<div>
{/* Food */}
<div className="d-flex align-items-center justify-content-between mb-3">
<div className="d-flex align-items-center">
<div className="avatar me-2">
<span className="avatar-initial rounded-2 bg-label-primary">
<i className="bx bx-bowl-hot text-primary fs-4"></i>
</span>
return (
<div className="card shadow-sm" style={{ minHeight: "500px" }}>
<div className="card-header d-flex justify-content-between align-items-center mt-3">
<div>
<h5 className="mb-1 fw-bold">Expense Breakdown</h5>
<p className="card-subtitle me-3">Detailed project expenses</p>
</div>
<div className="text-end">
<DateRangePicker
DateDifference="7"
onRangeChange={setDateRange}
endDateMode="today"
/>
</div>
<small className="fw-bold">Food</small>
</div>
<span className="fw-bold">${expenses.food}</span>
</div>
{/* Transport */}
<div className="d-flex align-items-center justify-content-between mb-3">
<div className="d-flex align-items-center">
<div className="avatar me-2">
<span className="avatar-initial rounded-2 bg-label-info">
<i className="bx bx-car text-info fs-4"></i>
</span>
</div>
<small className="fw-bold">Transport</small>
</div>
<span className="fw-bold">${expenses.transport}</span>
</div>
<div className="card-body">
{report.length === 0 ? (
<div className="text-center text-muted py-5">
No data found
</div>
) : (
<>
<div className="d-flex justify-content-center mb-8">
<Chart
options={donutOptions}
series={report.map((item) => item.totalApprovedAmount || 0)}
type="donut"
width="320"
/>
</div>
{/* Shopping */}
<div className="d-flex align-items-center justify-content-between mb-3">
<div className="d-flex align-items-center">
<div className="avatar me-2">
<span className="avatar-initial rounded-2 bg-label-warning">
<i className="bx bx-cart text-warning fs-4"></i>
</span>
</div>
<small className="fw-bold">Shopping</small>
</div>
<span className="fw-bold">${expenses.shopping}</span>
<div className="mb-2 w-100">
<div className="row">
{report.map((item, idx) => (
<div
className="col-6 d-flex justify-content-start align-items-start mb-2"
key={idx}
>
<div className="avatar me-2">
<span
className="avatar-initial rounded-2"
style={{ backgroundColor: donutOptions.colors[idx % donutOptions.colors.length] }}
>
<i className="bx bx-receipt fs-4"></i>
</span>
</div>
<div className="d-flex flex-column gap-1 text-start">
<small className="fw-bold fs-6">{item.projectName}</small>
<span className="fw-bold text-muted ms-1">{item.totalApprovedAmount}</span>
</div>
</div>
))}
</div>
</div>
</>
)}
</div>
{/* Bills */}
<div className="d-flex align-items-center justify-content-between mb-3">
<div className="d-flex align-items-center">
<div className="avatar me-2">
<span className="avatar-initial rounded-2 bg-label-danger">
<i className="bx bx-receipt text-danger fs-4"></i>
</span>
</div>
<small className="fw-bold">Bills</small>
</div>
<span className="fw-bold">${expenses.bills}</span>
</div>
{/* Total */}
<div className="d-flex align-items-center justify-content-between">
<div className="d-flex align-items-center">
<div className="avatar me-2">
<span className="avatar-initial rounded-2 bg-label-success">
<i className="bx bx-wallet text-success fs-4"></i>
</span>
</div>
<small className="fw-bold">Total</small>
</div>
<span className="fw-bold">${total}</span>
</div>
</div>
</div>
</div>
</div>
);
);
};
export default ExpenseChartDesign2;

View File

@ -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;
}
})
}

View File

@ -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;