Creating a new weidget in Dashboard for expense.

src/components/Dashboard/Dashboard.jsx

@@ -17,6 +17,7 @@ import AttendanceOverview from "./AttendanceOverview";
 import { useSelectedProject } from "../../slices/apiDataManager";
 import { useProjectName } from "../../hooks/useProjects";
 import ExpenseAnalysis from "./ExpenseAnalysis";
+import ExpenseByProject from "./ExpenseByProject";
 
 const Dashboard = () => {
   // const { projectsCardData } = useDashboardProjectsCardData();
@@ -34,6 +35,9 @@ const Dashboard = () => {
         <div className="col-xxl-6 col-lg-6">
           <ExpenseAnalysis />
         </div>
+        <div className="col-xxl-6 col-lg-6">
+          <ExpenseByProject />
+        </div>
 
         {!isAllProjectsSelected && (
           <div className="col-xxl-6 col-lg-6">

src/components/Dashboard/ExpenseByProject.jsx

@@ -0,0 +1,123 @@
+import React, { useState } from "react";
+import Chart from "react-apexcharts";
+
+const ExpenseByProject = () => {
+    const [range, setRange] = useState("12M");
+
+    // Dummy data grouped by year
+    const expenseData = {
+        "6M": {
+            categories: [
+                { quarter: "Q1" },
+                { quarter: "Q2" },
+                { quarter: "Q3" },
+                { quarter: "Q4" },
+            ],
+            data: [400, 430, 448, 470]
+        },
+        "12M": {
+            categories: [
+                { quarter: "Q1" },
+                { quarter: "Q2" },
+                { quarter: "Q3" },
+                { quarter: "Q4" },
+                { quarter: "Q1" },
+                { quarter: "Q2" },
+                { quarter: "Q3" },
+                { quarter: "Q4" },
+            ],
+            data: [400, 430, 448, 470, 540, 580, 690, 690]
+        },
+        All: {
+            categories: [
+                { quarter: "Q1" },
+                { quarter: "Q2" },
+                { quarter: "Q3" },
+                { quarter: "Q4" },
+                { quarter: "Q1" },
+                { quarter: "Q2" },
+                { quarter: "Q3" },
+                { quarter: "Q4" },
+            ],
+            data: [300, 350, 370, 390, 420, 460, 500, 530]
+        }
+    };
+
+    const options = {
+        chart: { type: "bar", toolbar: { show: false } },
+        plotOptions: {
+            bar: {
+                horizontal: false,
+                columnWidth: "55%",
+                borderRadius: 4
+            }
+        },
+        dataLabels: {
+            enabled: true,
+            formatter: (val) => val
+        },
+        xaxis: {
+            categories: expenseData[range].categories.map(c => `${c.quarter}`),
+            labels: {
+                style: { fontSize: "12px" },
+                rotate: -45
+            },
+            group: {
+                groups: [
+                    {
+                        title: "2022",
+                        cols: 4
+                    },
+                    {
+                        title: "2023",
+                        cols: 4
+                    },
+                    {
+                        title: "2024",
+                        cols: 4
+                    }
+                ]
+            }
+        },
+        yaxis: {
+            title: { text: "Expense" }
+        },
+        fill: { opacity: 1 },
+        colors: ["#2196f3"]
+    };
+
+    const series = [
+        {
+            name: "Expense",
+            data: expenseData[range].data
+        }
+    ];
+
+    return (
+        <div className="card shadow-sm p-3 text-white" >
+            <div className="card-header d-flex justify-content-between align-items-center" >
+                <div>
+                    <h5 className="mb-1 fw-bold">Expense Breakdown</h5>
+                    <p className="card-subtitle me-3">Detailed project expenses</p>
+                </div>
+                <div>
+                    {["6M", "12M", "All"].map((item) => (
+                        <button
+                            key={item}
+                            className={`btn btn-sm mx-1 ${range === item ? "btn-primary" : "btn-outline-light"
+                                }`}
+                            onClick={() => setRange(item)}
+                        >
+                            {item}
+                        </button>
+                    ))}
+                </div>
+            </div>
+            <div className="card-body bg-white text-dark">
+                <Chart options={options} series={series} type="bar" height={400} />
+            </div>
+        </div>
+    );
+};
+
+export default ExpenseByProject;