Adding API for ExpenseProjects.

src/components/Dashboard/ExpenseByProject.jsx

@@ -1,111 +1,87 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Chart from "react-apexcharts";
+import { useExpenseType } from "../../hooks/masterHook/useMaster";
+import { useSelectedProject } from "../../slices/apiDataManager";
+import { useExpenseDataByProject } from "../../hooks/useDashboard_Data";
 
 const ExpenseByProject = () => {
+    const projectId = useSelectedProject();
     const [range, setRange] = useState("12M");
+    const [selectedType, setSelectedType] = useState("");
+    const [chartData, setChartData] = useState({ categories: [], data: [] });
 
-    // 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 { ExpenseTypes, loading: typeLoading } = useExpenseType();
+
+    // Fetch API data
+    const { data: expenseApiData, isLoading } = useExpenseDataByProject(
+        projectId,
+        selectedType,
+        range === "All" ? null : parseInt(range)
+    );
+
+    useEffect(() => {
+        if (expenseApiData) {
+            const categories = expenseApiData.map(
+                (item) => `${item.monthName} ${item.year}`
+            );
+            const data = expenseApiData.map((item) => item.total);
+
+            setChartData({ categories, data });
+        } else {
+            setChartData({ categories: [], data: [] });
         }
-    };
+    }, [expenseApiData]);
 
     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" }
-        },
+        plotOptions: { bar: { horizontal: false, columnWidth: "55%", borderRadius: 4 } },
+        dataLabels: { enabled: true, formatter: (val) => val },
+        xaxis: { categories: chartData.categories, labels: { style: { fontSize: "12px" }, rotate: -45 } },
         fill: { opacity: 1 },
         colors: ["#2196f3"]
     };
 
     const series = [
         {
-            name: "Expense",
-            data: expenseData[range].data
+            name: selectedType || "Expense",
+            data: chartData.data
         }
     ];
 
     return (
-        <div className="card shadow-sm p-3 text-white" >
-            <div className="card-header d-flex justify-content-between align-items-center" >
+        <div className="card shadow-sm ">
+            {/* Header */}
+            <div className="card-header">
+                <div className="d-flex justify-content-between align-items-center mb-3 mt-3">
                     <div>
                         <h5 className="mb-1 fw-bold">Expense Breakdown</h5>
-                    <p className="card-subtitle me-3">Detailed project expenses</p>
+                        <p className="card-subtitle me-3 mb-0">Detailed project expenses</p>
                     </div>
-                <div>
+
+                    <div className="d-flex align-items-center gap-2">
+                        {/* Expense Type Dropdown */}
+                        <select
+                            className="form-select form-select-sm mb-2"
+                            value={selectedType}
+                            onChange={(e) => setSelectedType(e.target.value)}
+                            disabled={typeLoading}
+                        >
+                            <option value="">All Types</option>
+                            {ExpenseTypes.map((type) => (
+                                <option key={type.id} value={type.id}>
+                                    {type.name}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+                </div>
+
+                {/* Range Buttons */}
+                <div className="d-flex gap-2">
                     {["6M", "12M", "All"].map((item) => (
                         <button
                             key={item}
-                            className={`btn btn-sm mx-1 ${range === item ? "btn-primary" : "btn-outline-light"
-                                }`}
+                            className={`btn btn-xs ${range === item ? "btn-primary" : "btn-outline-light"}`}
                             onClick={() => setRange(item)}
                         >
                             {item}
@@ -113,11 +89,19 @@ const ExpenseByProject = () => {
                     ))}
                 </div>
             </div>
-            <div className="card-body bg-white text-dark">
+
+            {/* Chart */}
+            <div className="card-body bg-white text-dark" style={{ minHeight: "440px" }}>
+                {isLoading ? (
+                    <p>Loading chart...</p>
+                ) : (
                     <Chart options={options} series={series} type="bar" height={400} />
+                )}
             </div>
         </div>
     );
 };
 
 export default ExpenseByProject;
+
+

src/hooks/useDashboard_Data.jsx

@@ -271,3 +271,14 @@ export const useExpenseAnalysis = (projectId, startDate, endDate) => {
     enabled: shouldFetch
   });
 };
+
+export const useExpenseDataByProject = (projectId, categoryId, months) => {  
+  return useQuery({
+    queryKey: ["expenseByProject", projectId, categoryId, months],
+    queryFn: async () => {
+      const resp = await GlobalRepository.getExpenseDataByProject(projectId, categoryId, months);
+      return resp.data;
+    },
+    
+  });
+};

src/repositories/GlobalRepository.jsx

@@ -68,6 +68,30 @@ const GlobalRepository = {
   },
 
 
+  getExpenseDataByProject: (projectId, categoryId, months) => {
+    let url = `api/Dashboard/expense/monthly`
+
+    const queryParams = [];
+
+    if (projectId) {
+      queryParams.push(`projectId=${projectId}`);
+    }
+
+    if (categoryId) {
+      queryParams.push(`categoryId=${categoryId}`);
+    }
+    if (months) {
+      queryParams.push(`months=${months}`);
+    }
+
+    if (queryParams.length > 0) {
+      url += `?${queryParams.join("&")}`;
+    }
+
+    return api.get(url);
+  },
+
+
 };
 
 export default GlobalRepository;