In ExpensePanel add new Toggle button.

src/components/Expenses/ExpenseFilterPanel.jsx

@@ -31,7 +31,6 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
     ].sort((a, b) => a.name.localeCompare(b.name));
   }, []);
 
-
   const [selectedGroup, setSelectedGroup] = useState(groupByList[0]);
   const [resetKey, setResetKey] = useState(0);
 
@@ -40,7 +39,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
     defaultValues: defaultFilter,
   });
 
-  const { control, register, handleSubmit, reset, watch } = methods;
+  const { control, handleSubmit, reset, setValue, watch } = methods;
   const isTransactionDate = watch("isTransactionDate");
 
   const closePanel = () => {
@@ -86,18 +85,29 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
         <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">Choose Date:</label>
-              <div className="form-check form-switch m-0">
-                <input
-                  className="form-check-input"
-                  type="checkbox"
-                  id="switchOption1"
-                  {...register("isTransactionDate")}
-                />
+              <label className="form-label me-2">Sort 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"
+                      : ""
+                    }`}
+                  onClick={() => setValue("isTransactionDate", true)}
+                >
+                  Transaction
+                </button>
+                <button
+                  type="button"
+                  className={`btn px-2 py-1 rounded-0 text-tiny ${!isTransactionDate
+                      ? "active btn-secondary text-white"
+                      : ""
+                    }`}
+                  onClick={() => setValue("isTransactionDate", false)}
+                >
+                  Submitted
+                </button>
               </div>
-              <label className="form-label mb-0 ms-2">
-                {isTransactionDate ? "Submitted": "Transaction" }
-              </label>
             </div>
 
             <DateRangePicker1