From e2ae2e5fbd76b0271dc49ebac444eb4bea41e17b Mon Sep 17 00:00:00 2001
From: Vikas Nale <vikas@marcoaiot.com>
Date: Wed, 24 Sep 2025 16:43:36 +0530
Subject: [PATCH] change labels as per  guidance

---
 .../Expenses/ExpenseFilterPanel.jsx           | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/components/Expenses/ExpenseFilterPanel.jsx b/src/components/Expenses/ExpenseFilterPanel.jsx
index f93f66ba..99e821af 100644
--- a/src/components/Expenses/ExpenseFilterPanel.jsx
+++ b/src/components/Expenses/ExpenseFilterPanel.jsx
@@ -16,8 +16,11 @@ import { ExpenseFilterSkeleton } from "./ExpenseSkeleton";
 import { useLocation } from "react-router-dom";
 
 const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
-  const selectedProjectId = useSelector((store) => store.localVariables.projectId);
-  const { data, isLoading, isError, error, isFetching, isFetched } = useExpenseFilter();
+  const selectedProjectId = useSelector(
+    (store) => store.localVariables.projectId
+  );
+  const { data, isLoading, isError, error, isFetching, isFetched } =
+    useExpenseFilter();
 
   const groupByList = useMemo(() => {
     return [
@@ -27,7 +30,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
       { id: "project", name: "Project" },
       { id: "paymentMode", name: "Payment Mode" },
       { id: "expensesType", name: "Expense Type" },
-      { id: "createdAt", name: "Submitted Date" }
+      { id: "createdAt", name: "Submitted Date" },
     ].sort((a, b) => a.name.localeCompare(b.name));
   }, []);
 
@@ -77,39 +80,37 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
   }, [location]);
 
   if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
-  if (isError && isFetched) return <div>Something went wrong Here- {error.message} </div>
+  if (isError && isFetched)
+    return <div>Something went wrong Here- {error.message} </div>;
   return (
     <>
-
       <FormProvider {...methods}>
         <form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
           <div className="mb-3 w-100">
             <div className="d-flex align-items-center mb-2">
-              <label className="form-label me-2">Sort By:</label>
+              <label className="form-label me-2">Filter By:</label>
               <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-secondary text-white"
-                      : ""
-                    }`}
+                  className={`btn px-2 py-1 rounded-0 text-tiny ${
+                    isTransactionDate ? "active btn-primary text-white" : ""
+                  }`}
                   onClick={() => setValue("isTransactionDate", true)}
                 >
-                  Transaction
+                  Transaction Date
                 </button>
                 <button
                   type="button"
-                  className={`btn px-2 py-1 rounded-0 text-tiny ${!isTransactionDate
-                      ? "active btn-secondary text-white"
-                      : ""
-                    }`}
+                  className={`btn px-2 py-1 rounded-0 text-tiny ${
+                    !isTransactionDate ? "active btn-primary text-white" : ""
+                  }`}
                   onClick={() => setValue("isTransactionDate", false)}
                 >
-                  Submitted
+                  Submitted Date
                 </button>
               </div>
             </div>
-
+            <label className="fw-semibold">Choose Date Range:</label>
             <DateRangePicker1
               placeholder="DD-MM-YYYY To DD-MM-YYYY"
               startField="startDate"
@@ -179,7 +180,9 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
             </div>
           </div>
           <div className="mb-2 text-start ">
-            <label htmlFor="groupBySelect" className="form-label">Group By :</label>
+            <label htmlFor="groupBySelect" className="form-label">
+              Group By :
+            </label>
             <select
               id="groupBySelect"
               className="form-select form-select-sm"
@@ -208,9 +211,8 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
           </div>
         </form>
       </FormProvider>
-
     </>
   );
 };
 
-export default ExpenseFilterPanel;
\ No newline at end of file
+export default ExpenseFilterPanel;