Changes in UI of Weigets and show selected project on 2 heading.

src/components/Dashboard/ExpenseAnalysis.jsx

@@ -1,18 +1,30 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import Chart from "react-apexcharts";
 import { useExpenseAnalysis } from "../../hooks/useDashboard_Data";
 import { useSelectedProject } from "../../slices/apiDataManager";
 import { DateRangePicker1 } from "../common/DateRangePicker";
 import { FormProvider, useForm } from "react-hook-form";
 import { formatCurrency, localToUtc } from "../../utils/appUtils";
+import { useProjectName } from "../../hooks/useProjects";
 
 const ExpenseAnalysis = () => {
   const projectId = useSelectedProject();
+  const [projectName, setProjectName] = useState("All Project");
+  const { projectNames, loading } = useProjectName();
 
   const methods = useForm({
     defaultValues: { startDate: "", endDate: "" },
   });
 
+  useEffect(() => {
+    if (projectId && projectNames?.length) {
+      const project = projectNames.find((p) => p.id === projectId);
+      setProjectName(project?.name || "All Project");
+    } else {
+      setProjectName("All Project");
+    }
+  }, [projectNames, projectId]);
+
   const { watch } = methods;
   const [startDate, endDate] = watch(["startDate", "endDate"]);
 
@@ -66,11 +78,12 @@ const ExpenseAnalysis = () => {
 
   return (
     <>
-      <div className="card">
+     
         <div className="card-header d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-2">
           <div className="text-start w-100">
             <h5 className="mb-1 card-title">Expense Breakdown</h5>
-            <p className="card-subtitle mb-0">Category Wise Expense Breakdown</p>
+            {/* <p className="card-subtitle mb-0">Category Wise Expense Breakdown</p> */}
+            <p className="card-subtitle m-0">{projectName}</p>
           </div>
 
           <div className="text-start text-sm-end w-75">
@@ -144,7 +157,7 @@ const ExpenseAnalysis = () => {
             </>
           )}
         </div>
-      </div>
+   
       {/* Header */}
 
     </>

src/components/Dashboard/ExpenseByProject.jsx

@@ -5,13 +5,18 @@ import { useSelector } from "react-redux";
 import { useExpenseDataByProject } from "../../hooks/useDashboard_Data";
 import { formatCurrency } from "../../utils/appUtils";
 import { formatDate_DayMonth } from "../../utils/dateUtils";
+import { useProjectName } from "../../hooks/useProjects";
+import { useSelectedProject } from "../../slices/apiDataManager";
 
 const ExpenseByProject = () => {
   const projectId = useSelector((store) => store.localVariables.projectId);
+  const [projectName, setProjectName] = useState("All Project");
   const [range, setRange] = useState("12M");
+  const { projectNames, loading } = useProjectName();
   const [selectedType, setSelectedType] = useState("");
   const [viewMode, setViewMode] = useState("Category");
   const [chartData, setChartData] = useState({ categories: [], data: [] });
+  const selectedProject = useSelectedProject();
 
   const { ExpenseTypes, loading: typeLoading } = useExpenseType();
 
@@ -21,6 +26,15 @@ const ExpenseByProject = () => {
     range === "All" ? null : parseInt(range)
   );
 
+  useEffect(() => {
+    if (selectedProject && projectNames?.length) {
+      const project = projectNames.find((p) => p.id === selectedProject);
+      setProjectName(project?.name || "All Project");
+    } else {
+      setProjectName("All Project");
+    }
+  }, [projectNames, selectedProject]);
+
   useEffect(() => {
     if (expenseApiData) {
       const categories = expenseApiData.map((item) =>
@@ -72,9 +86,9 @@ const ExpenseByProject = () => {
       {/* Header */}
       <div className="card-header">
         <div className="d-flex justify-content-start align-items-center mb-3 mt-3">
-          <div>
+          <div className="text-start">
             <h5 className="mb-1 me-6 card-title">Monthly Expense -</h5>
-            <p className="card-subtitle me-5 mb-0">Detailed project expenses</p>
+            <p className="card-subtitle m-0">{projectName}</p>
           </div>
           <div className="btn-group mb-4 ms-n8">
             <button
@@ -118,8 +132,8 @@ const ExpenseByProject = () => {
             <button
               key={item}
               className={`border-0 px-2 py-1 text-sm rounded ${range === item
-                  ? "text-white bg-primary"
+                ? "text-white bg-primary"
-                  : "text-body bg-transparent"
+                : "text-body bg-transparent"
                 }`}
               style={{ cursor: "pointer", transition: "all 0.2s ease" }}
               onClick={() => setRange(item)}