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 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();
|
||||
@ -27,10 +31,23 @@ 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 */}
|
||||
<AttendanceOverview /> {/* Removed unnecessary projectId prop */}
|
||||
</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