Implementing api for Expense data
This commit is contained in:
parent
014012abf3
commit
edebc2e471
@ -14,10 +14,7 @@ import { useSelector } from "react-redux";
|
|||||||
// import ProjectProgressChart from "./ProjectProgressChart";
|
// import ProjectProgressChart from "./ProjectProgressChart";
|
||||||
// import ProjectOverview from "../Project/ProjectOverview";
|
// import ProjectOverview from "../Project/ProjectOverview";
|
||||||
import AttendanceOverview from "./AttendanceChart";
|
import AttendanceOverview from "./AttendanceChart";
|
||||||
import ExpenseChart from "./ExpenseChart";
|
|
||||||
import ExpenseChartDesign2 from "./ExpenseChartDesign2";
|
import ExpenseChartDesign2 from "./ExpenseChartDesign2";
|
||||||
import ExpenseChartDesign1 from "./ExpenseChartDesign1";
|
|
||||||
import ExpenseChartBar from "./ExpenseChartBar";
|
|
||||||
|
|
||||||
const Dashboard = () => {
|
const Dashboard = () => {
|
||||||
// const { projectsCardData } = useDashboardProjectsCardData();
|
// const { projectsCardData } = useDashboardProjectsCardData();
|
||||||
@ -31,19 +28,10 @@ const Dashboard = () => {
|
|||||||
return (
|
return (
|
||||||
<div className="container-fluid mt-5">
|
<div className="container-fluid mt-5">
|
||||||
<div className="row gy-4">
|
<div className="row gy-4">
|
||||||
<div className="col-xxl-6 col-lg-6">
|
|
||||||
<ExpenseChart />
|
|
||||||
</div>
|
|
||||||
<div className="col-xxl-6 col-lg-6">
|
<div className="col-xxl-6 col-lg-6">
|
||||||
<ExpenseChartDesign2 />
|
<ExpenseChartDesign2 />
|
||||||
</div>
|
</div>
|
||||||
<div className="col-xxl-6 col-lg-6">
|
|
||||||
<ExpenseChartDesign1 />
|
|
||||||
</div>
|
|
||||||
<div className="col-xxl-6 col-lg-6">
|
|
||||||
<ExpenseChartBar />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
{!isAllProjectsSelected && (
|
{!isAllProjectsSelected && (
|
||||||
<div className="col-xxl-6 col-lg-6">
|
<div className="col-xxl-6 col-lg-6">
|
||||||
|
|||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -1,131 +1,119 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
import React from "react";
|
|
||||||
import Chart from "react-apexcharts";
|
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 ExpenseChartDesign2 = () => {
|
||||||
const expenses = {
|
const projectId = useSelectedProject()
|
||||||
food: 450,
|
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
|
||||||
transport: 300,
|
|
||||||
shopping: 250,
|
|
||||||
bills: 200,
|
|
||||||
};
|
|
||||||
|
|
||||||
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 = {
|
if (isLoading) return <div>Loading....</div>
|
||||||
chart: { type: "donut" },
|
if (isError) return <div>{error.message}</div>;
|
||||||
labels: ["Food", "Transport", "Shopping", "Bills"],
|
|
||||||
legend: { show: false },
|
const report = data?.report || [];
|
||||||
dataLabels: {
|
|
||||||
enabled: true,
|
// Map the API data to chart labels and series
|
||||||
formatter: (val) => `${val.toFixed(0)}%`,
|
const labels = report.map((item) => item.projectName);
|
||||||
},
|
const series = report.map((item) => item.totalApprovedAmount || 0);
|
||||||
colors: ["#7367F0", "#28C76F", "#FF9F43", "#EA5455"],
|
const total = data?.totalAmount || 0;
|
||||||
plotOptions: {
|
|
||||||
pie: {
|
const donutOptions = {
|
||||||
donut: {
|
chart: { type: "donut" },
|
||||||
size: "70%",
|
labels,
|
||||||
labels: {
|
legend: { show: false },
|
||||||
show: true,
|
dataLabels: { enabled: true, formatter: (val) => `${val.toFixed(0)}%` },
|
||||||
total: {
|
colors: ["#7367F0", "#28C76F", "#FF9F43", "#EA5455", "#00CFE8", "#FF78B8"],
|
||||||
show: true,
|
plotOptions: {
|
||||||
label: "Total",
|
pie: {
|
||||||
fontSize: "16px",
|
donut: {
|
||||||
formatter: () => `$${total}`,
|
size: "70%",
|
||||||
|
labels: {
|
||||||
|
show: true,
|
||||||
|
total: {
|
||||||
|
show: true,
|
||||||
|
label: "Total",
|
||||||
|
fontSize: "16px",
|
||||||
|
formatter: () => `${total}`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
};
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const series = Object.values(expenses);
|
if (data?.report === 0) {
|
||||||
|
return <div>
|
||||||
return (
|
No data found
|
||||||
<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" />
|
|
||||||
</div>
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
{/* Custom Legend with Icons and Right-Aligned Amount */}
|
return (
|
||||||
<div className="mb-2 w-100" style={{ flex: "1 1 auto" }}>
|
<div className="card shadow-sm" style={{ minHeight: "500px" }}>
|
||||||
<div>
|
<div className="card-header d-flex justify-content-between align-items-center mt-3">
|
||||||
{/* Food */}
|
<div>
|
||||||
<div className="d-flex align-items-center justify-content-between mb-3">
|
<h5 className="mb-1 fw-bold">Expense Breakdown</h5>
|
||||||
<div className="d-flex align-items-center">
|
<p className="card-subtitle me-3">Detailed project expenses</p>
|
||||||
<div className="avatar me-2">
|
</div>
|
||||||
<span className="avatar-initial rounded-2 bg-label-primary">
|
<div className="text-end">
|
||||||
<i className="bx bx-bowl-hot text-primary fs-4"></i>
|
<DateRangePicker
|
||||||
</span>
|
DateDifference="7"
|
||||||
|
onRangeChange={setDateRange}
|
||||||
|
endDateMode="today"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<small className="fw-bold">Food</small>
|
|
||||||
</div>
|
|
||||||
<span className="fw-bold">${expenses.food}</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Transport */}
|
<div className="card-body">
|
||||||
<div className="d-flex align-items-center justify-content-between mb-3">
|
{report.length === 0 ? (
|
||||||
<div className="d-flex align-items-center">
|
<div className="text-center text-muted py-5">
|
||||||
<div className="avatar me-2">
|
No data found
|
||||||
<span className="avatar-initial rounded-2 bg-label-info">
|
</div>
|
||||||
<i className="bx bx-car text-info fs-4"></i>
|
) : (
|
||||||
</span>
|
<>
|
||||||
</div>
|
<div className="d-flex justify-content-center mb-8">
|
||||||
<small className="fw-bold">Transport</small>
|
<Chart
|
||||||
</div>
|
options={donutOptions}
|
||||||
<span className="fw-bold">${expenses.transport}</span>
|
series={report.map((item) => item.totalApprovedAmount || 0)}
|
||||||
</div>
|
type="donut"
|
||||||
|
width="320"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Shopping */}
|
<div className="mb-2 w-100">
|
||||||
<div className="d-flex align-items-center justify-content-between mb-3">
|
<div className="row">
|
||||||
<div className="d-flex align-items-center">
|
{report.map((item, idx) => (
|
||||||
<div className="avatar me-2">
|
<div
|
||||||
<span className="avatar-initial rounded-2 bg-label-warning">
|
className="col-6 d-flex justify-content-start align-items-start mb-2"
|
||||||
<i className="bx bx-cart text-warning fs-4"></i>
|
key={idx}
|
||||||
</span>
|
>
|
||||||
</div>
|
<div className="avatar me-2">
|
||||||
<small className="fw-bold">Shopping</small>
|
<span
|
||||||
</div>
|
className="avatar-initial rounded-2"
|
||||||
<span className="fw-bold">${expenses.shopping}</span>
|
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>
|
</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>
|
);
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ExpenseChartDesign2;
|
export default ExpenseChartDesign2;
|
||||||
|
|||||||
@ -200,35 +200,45 @@ export const useAttendanceOverviewData = (projectId, days) => {
|
|||||||
// })
|
// })
|
||||||
// }
|
// }
|
||||||
|
|
||||||
export const useDashboard_AttendanceData = (date,projectId)=>{
|
export const useDashboard_AttendanceData = (date, projectId) => {
|
||||||
return useQuery({
|
return useQuery({
|
||||||
queryKey:["dashboardAttendances",date,projectId],
|
queryKey: ["dashboardAttendances", date, projectId],
|
||||||
queryFn:async()=> {
|
queryFn: async () => {
|
||||||
|
|
||||||
const resp = await await GlobalRepository.getDashboardAttendanceData(date, projectId)
|
const resp = await await GlobalRepository.getDashboardAttendanceData(date, projectId)
|
||||||
return resp.data;
|
return resp.data;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useDashboardTeamsCardData =(projectId)=>{
|
export const useDashboard_ExpenseData = (projectId, startDate, endDate) => {
|
||||||
return useQuery({
|
return useQuery({
|
||||||
queryKey:["dashboardTeams",projectId],
|
queryKey: ["dashboardExpenses", projectId, startDate, endDate],
|
||||||
queryFn:async()=> {
|
queryFn: async () => {
|
||||||
|
const resp = await GlobalRepository.getExpenseData(projectId, startDate, endDate);
|
||||||
|
return resp.data; // this will return the "data" object from API response
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const resp = await GlobalRepository.getDashboardTeamsCardData(projectId)
|
export const useDashboardTeamsCardData = (projectId) => {
|
||||||
return resp.data;
|
return useQuery({
|
||||||
|
queryKey: ["dashboardTeams", projectId],
|
||||||
|
queryFn: async () => {
|
||||||
|
|
||||||
|
const resp = await GlobalRepository.getDashboardTeamsCardData(projectId)
|
||||||
|
return resp.data;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useDashboardTasksCardData = (projectId) => {
|
export const useDashboardTasksCardData = (projectId) => {
|
||||||
return useQuery({
|
return useQuery({
|
||||||
queryKey:["dashboardTasks",projectId],
|
queryKey: ["dashboardTasks", projectId],
|
||||||
queryFn:async()=> {
|
queryFn: async () => {
|
||||||
|
|
||||||
const resp = await GlobalRepository.getDashboardTasksCardData(projectId)
|
const resp = await GlobalRepository.getDashboardTasksCardData(projectId)
|
||||||
return resp.data;
|
return resp.data;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -244,12 +254,12 @@ export const useDashboardTasksCardData = (projectId) => {
|
|||||||
// }
|
// }
|
||||||
|
|
||||||
export const useDashboardProjectsCardData = () => {
|
export const useDashboardProjectsCardData = () => {
|
||||||
return useQuery({
|
return useQuery({
|
||||||
queryKey:["dashboardProjects"],
|
queryKey: ["dashboardProjects"],
|
||||||
queryFn:async()=> {
|
queryFn: async () => {
|
||||||
|
|
||||||
const resp = await GlobalRepository.getDashboardProjectsCardData();
|
const resp = await GlobalRepository.getDashboardProjectsCardData();
|
||||||
return resp.data;
|
return resp.data;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -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,30 +19,54 @@ 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`);
|
||||||
},
|
},
|
||||||
|
|
||||||
getDashboardTeamsCardData: (projectId) => {
|
getDashboardTeamsCardData: (projectId) => {
|
||||||
const url = projectId
|
const url = projectId
|
||||||
? `/api/Dashboard/teams?projectId=${projectId}`
|
? `/api/Dashboard/teams?projectId=${projectId}`
|
||||||
: `/api/Dashboard/teams`;
|
: `/api/Dashboard/teams`;
|
||||||
return api.get(url);
|
return api.get(url);
|
||||||
},
|
},
|
||||||
|
|
||||||
getDashboardTasksCardData: (projectId) => {
|
getDashboardTasksCardData: (projectId) => {
|
||||||
const url = projectId
|
const url = projectId
|
||||||
? `/api/Dashboard/tasks?projectId=${projectId}`
|
? `/api/Dashboard/tasks?projectId=${projectId}`
|
||||||
: `/api/Dashboard/tasks`;
|
: `/api/Dashboard/tasks`;
|
||||||
return api.get(url);
|
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;
|
export default GlobalRepository;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user