diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx index 53dc3710..a3cd6300 100644 --- a/src/components/Dashboard/Dashboard.jsx +++ b/src/components/Dashboard/Dashboard.jsx @@ -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 (
+
+ +
+
+ +
+
+ +
+
+ +
+ {!isAllProjectsSelected && (
- {/* ✅ Removed unnecessary projectId prop */} + {/* Removed unnecessary projectId prop */}
)}
diff --git a/src/components/Dashboard/ExpenseChart.jsx b/src/components/Dashboard/ExpenseChart.jsx new file mode 100644 index 00000000..a0977f12 --- /dev/null +++ b/src/components/Dashboard/ExpenseChart.jsx @@ -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 ( +
+ {/* 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 new file mode 100644 index 00000000..fa542380 --- /dev/null +++ b/src/components/Dashboard/ExpenseChartBar.jsx @@ -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 ( +
+
+
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 new file mode 100644 index 00000000..8d870fc4 --- /dev/null +++ b/src/components/Dashboard/ExpenseChartDesign1.jsx @@ -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 ( +
+
+
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 new file mode 100644 index 00000000..f01b348e --- /dev/null +++ b/src/components/Dashboard/ExpenseChartDesign2.jsx @@ -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 ( +
+
+
Expense Breakdown-3
+

Detailed project expenses

+
+ +
+ {/* Donut Chart */} +
+ +
+ + {/* Custom Legend with Icons and Right-Aligned Amount */} +
+
+ {/* Food */} +
+
+
+ + + +
+ Food +
+ ${expenses.food} +
+ + {/* Transport */} +
+
+
+ + + +
+ Transport +
+ ${expenses.transport} +
+ + {/* Shopping */} +
+
+
+ + + +
+ Shopping +
+ ${expenses.shopping} +
+ + {/* Bills */} +
+
+
+ + + +
+ Bills +
+ ${expenses.bills} +
+ + {/* Total */} +
+
+
+ + + +
+ Total +
+ ${total} +
+
+
+
+
+ ); +}; + +export default ExpenseChartDesign2;