Adding Weidgets for Expense.
This commit is contained in:
parent
ae772d925a
commit
014012abf3
@ -14,6 +14,10 @@ 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 ExpenseChartDesign1 from "./ExpenseChartDesign1";
|
||||||
|
import ExpenseChartBar from "./ExpenseChartBar";
|
||||||
|
|
||||||
const Dashboard = () => {
|
const Dashboard = () => {
|
||||||
// const { projectsCardData } = useDashboardProjectsCardData();
|
// const { projectsCardData } = useDashboardProjectsCardData();
|
||||||
@ -27,10 +31,23 @@ 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">
|
||||||
|
<ExpenseChartDesign2 />
|
||||||
|
</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">
|
||||||
<AttendanceOverview /> {/* ✅ Removed unnecessary projectId prop */}
|
<AttendanceOverview /> {/* Removed unnecessary projectId prop */}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
145
src/components/Dashboard/ExpenseChart.jsx
Normal file
145
src/components/Dashboard/ExpenseChart.jsx
Normal file
@ -0,0 +1,145 @@
|
|||||||
|
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;
|
||||||
48
src/components/Dashboard/ExpenseChartBar.jsx
Normal file
48
src/components/Dashboard/ExpenseChartBar.jsx
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
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;
|
||||||
72
src/components/Dashboard/ExpenseChartDesign1.jsx
Normal file
72
src/components/Dashboard/ExpenseChartDesign1.jsx
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
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;
|
||||||
131
src/components/Dashboard/ExpenseChartDesign2.jsx
Normal file
131
src/components/Dashboard/ExpenseChartDesign2.jsx
Normal file
@ -0,0 +1,131 @@
|
|||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import Chart from "react-apexcharts";
|
||||||
|
|
||||||
|
const ExpenseChartDesign2 = () => {
|
||||||
|
const expenses = {
|
||||||
|
food: 450,
|
||||||
|
transport: 300,
|
||||||
|
shopping: 250,
|
||||||
|
bills: 200,
|
||||||
|
};
|
||||||
|
|
||||||
|
const total = Object.values(expenses).reduce((a, b) => a + b, 0);
|
||||||
|
|
||||||
|
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}`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
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" />
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
{/* 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>
|
||||||
|
|
||||||
|
{/* 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;
|
||||||
Loading…
x
Reference in New Issue
Block a user