Changes in Monthly Expense weidget.

src/components/Dashboard/ExpenseAnalysis.jsx

@@ -71,10 +71,10 @@ const { labels, series, total } = useMemo(() => {
 
   return (
     <>
-      <div className="card-header d-flex justify-content-between align-items-center ">
+      <div className="card-header d-flex justify-content-between mt-2 align-items-center ">
         <div>
-          <h5 className="mb-1 fw-bold">Expense Breakdown</h5>
+          <h5 className="mb-1 fw-bold text-start">Expense Breakdown</h5>
-          <p className="card-subtitle me-3">Detailed project expenses</p>
+          <p className="card-subtitle">Category Wise Expense Breakdown</p>
         </div>
 
         <div className="text-end">

src/components/Dashboard/ExpenseByProject.jsx

@@ -108,6 +108,23 @@ const ExpenseByProject = () => {
                             </li>
                         </ul>
                     </div>
+                </div>
+
+                {/* Range Buttons + Expense Dropdown */}
+                <div className="d-flex align-items-center flex-wrap">
+                    {["1M", "3M", "6M", "12M", "All"].map((item) => (
+                        <button
+                            key={item}
+                            className={`border-0 px-2 py-1 text-sm rounded ${range === item
+                                ? "text-white bg-primary"
+                                : "text-body bg-transparent"
+                                }`}
+                            style={{ cursor: "pointer", transition: "all 0.2s ease" }}
+                            onClick={() => setRange(item)}
+                        >
+                            {item}
+                        </button>
+                    ))}
                     {viewMode === "Category" && (
                         <select
                             className="form-select form-select-sm ms-auto mb-3"
@@ -126,22 +143,6 @@ const ExpenseByProject = () => {
                     )}
                 </div>
 
-                {/* Range Buttons + Expense Dropdown */}
-                <div className="d-flex gap-2 align-items-center flex-wrap">
-                    {["1M", "3M", "6M", "12M", "All"].map((item) => (
-                        <button
-                            key={item}
-                            className={`border-0 px-2 py-1 text-sm rounded ${range === item
-                                ? "text-white bg-primary"
-                                : "text-body bg-transparent"
-                                }`}
-                            style={{ cursor: "pointer", transition: "all 0.2s ease" }}
-                            onClick={() => setRange(item)}
-                        >
-                            {item}
-                        </button>
-                    ))}
-                </div>
             </div>
 
             {/* Chart */}