From 87d13d0f772ce4fd153cbfda275bf560ca601fdf Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Sat, 4 Oct 2025 12:20:59 +0530
Subject: [PATCH 1/2] Changes in Monthly Expense weidget.

---
 src/components/Dashboard/ExpenseAnalysis.jsx  |  6 ++--
 src/components/Dashboard/ExpenseByProject.jsx | 33 ++++++++++---------
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/components/Dashboard/ExpenseAnalysis.jsx b/src/components/Dashboard/ExpenseAnalysis.jsx
index fb61c29f..1e03de40 100644
--- a/src/components/Dashboard/ExpenseAnalysis.jsx
+++ b/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>
-          <p className="card-subtitle me-3">Detailed project expenses</p>
+          <h5 className="mb-1 fw-bold text-start">Expense Breakdown</h5>
+          <p className="card-subtitle">Category Wise Expense Breakdown</p>
         </div>
 
         <div className="text-end">
diff --git a/src/components/Dashboard/ExpenseByProject.jsx b/src/components/Dashboard/ExpenseByProject.jsx
index e3c79113..3d15a9b6 100644
--- a/src/components/Dashboard/ExpenseByProject.jsx
+++ b/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 */}

From 4a05e67ff0e5d3b7a4b690b00dc796d0469b9840 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Sat, 4 Oct 2025 14:12:20 +0530
Subject: [PATCH 2/2] Adding dropdown in ExpenseFilter.

---
 .../Expenses/ExpenseFilterPanel.jsx           | 22 ++++++++++++-------
 src/components/Expenses/ExpenseSchema.js      |  2 ++
 src/hooks/useExpense.js                       |  2 +-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/Expenses/ExpenseFilterPanel.jsx b/src/components/Expenses/ExpenseFilterPanel.jsx
index 7a47ec6d..92baab2a 100644
--- a/src/components/Expenses/ExpenseFilterPanel.jsx
+++ b/src/components/Expenses/ExpenseFilterPanel.jsx
@@ -46,6 +46,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
       projectIds: project ? [project] : defaultFilter.projectIds || [],
       createdByIds: defaultFilter.createdByIds || [],
       paidById: defaultFilter.paidById || [],
+      ExpenseTypeIds: defaultFilter.ExpenseTypeIds || [],
       isTransactionDate: defaultFilter.isTransactionDate ?? true,
       startDate: defaultFilter.startDate,
       endDate: defaultFilter.endDate,
@@ -106,8 +107,8 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
         ...dynamicDefaultFilter,
         startDate: dynamicDefaultFilter.startDate
           ? moment
-              .utc(dynamicDefaultFilter.startDate, "DD-MM-YYYY")
-              .toISOString()
+            .utc(dynamicDefaultFilter.startDate, "DD-MM-YYYY")
+            .toISOString()
           : undefined,
         endDate: dynamicDefaultFilter.endDate
           ? moment.utc(dynamicDefaultFilter.endDate, "DD-MM-YYYY").toISOString()
@@ -143,18 +144,16 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
               <div className="d-inline-flex border rounded-pill mb-1 overflow-hidden shadow-none">
                 <button
                   type="button"
-                  className={`btn px-2 py-1 rounded-0 text-tiny ${
-                    isTransactionDate ? "active btn-primary text-white" : ""
-                  }`}
+                  className={`btn px-2 py-1 rounded-0 text-tiny ${isTransactionDate ? "active btn-primary text-white" : ""
+                    }`}
                   onClick={() => setValue("isTransactionDate", true)}
                 >
                   Transaction Date
                 </button>
                 <button
                   type="button"
-                  className={`btn px-2 py-1 rounded-0 text-tiny ${
-                    !isTransactionDate ? "active btn-primary text-white" : ""
-                  }`}
+                  className={`btn px-2 py-1 rounded-0 text-tiny ${!isTransactionDate ? "active btn-primary text-white" : ""
+                    }`}
                   onClick={() => setValue("isTransactionDate", false)}
                 >
                   Submitted Date
@@ -194,6 +193,13 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
               labelKey={(item) => item.name}
               valueKey="id"
             />
+            <SelectMultiple
+              name="ExpenseTypeIds"
+              label="Category :"
+              options={data.expensesType}
+              labelKey={(item) => item.name}
+              valueKey="id"
+            />
 
             <div className="mb-3">
               <label className="form-label">Status :</label>
diff --git a/src/components/Expenses/ExpenseSchema.js b/src/components/Expenses/ExpenseSchema.js
index 786aa5b9..cf070989 100644
--- a/src/components/Expenses/ExpenseSchema.js
+++ b/src/components/Expenses/ExpenseSchema.js
@@ -159,6 +159,7 @@ export const SearchSchema = z.object({
   statusIds: z.array(z.string()).optional(),
   createdByIds: z.array(z.string()).optional(),
   paidById: z.array(z.string()).optional(),
+  ExpenseTypeIds: z.array(z.string()).optional(),
   startDate: z.string().optional(),
   endDate: z.string().optional(),
   isTransactionDate: z.boolean().default(true),
@@ -169,6 +170,7 @@ export const defaultFilter = {
   statusIds: [],
   createdByIds: [],
   paidById: [],
+  ExpenseTypeIds: [],
   isTransactionDate: true,
   startDate: null,
   endDate: null,
diff --git a/src/hooks/useExpense.js b/src/hooks/useExpense.js
index 41976103..0d4b3c77 100644
--- a/src/hooks/useExpense.js
+++ b/src/hooks/useExpense.js
@@ -10,7 +10,7 @@ import moment from "moment";
 const cleanFilter = (filter) => {
   const cleaned = { ...filter };
 
-  ["projectIds", "statusIds", "createdByIds", "paidById"].forEach((key) => {
+  ["projectIds", "statusIds", "createdByIds", "paidById","ExpenseTypeIds"].forEach((key) => {
     if (Array.isArray(cleaned[key]) && cleaned[key].length === 0) {
       delete cleaned[key];
     }