src/components/Expenses/ExpenseFilterPanel.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo } from "react";
+import React, { useEffect, useState,useMemo } from "react";
 import { FormProvider, useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { defaultFilter, SearchSchema } from "./ExpenseSchema";
@@ -16,11 +16,8 @@ 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 [
@@ -30,10 +27,11 @@ 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));
   }, []);
 
+
   const [selectedGroup, setSelectedGroup] = useState(groupByList[0]);
   const [resetKey, setResetKey] = useState(0);
 
@@ -42,7 +40,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
     defaultValues: defaultFilter,
   });
 
-  const { control, handleSubmit, reset, setValue, watch } = methods;
+  const { control, register, handleSubmit, reset, watch } = methods;
   const isTransactionDate = watch("isTransactionDate");
 
   const closePanel = () => {
@@ -80,37 +78,28 @@ 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">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-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" : ""
-                  }`}
-                  onClick={() => setValue("isTransactionDate", false)}
-                >
-                  Submitted Date
-                </button>
+              <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")}
+                />
               </div>
+              <label className="form-label mb-0 ms-2">
+                {isTransactionDate ? "Submitted": "Transaction" }
+              </label>
             </div>
-            <label className="fw-semibold">Choose Date Range:</label>
+
             <DateRangePicker1
               placeholder="DD-MM-YYYY To DD-MM-YYYY"
               startField="startDate"
@@ -180,9 +169,7 @@ 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"
@@ -211,8 +198,9 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
           </div>
         </form>
       </FormProvider>
+      
     </>
   );
 };
 
-export default ExpenseFilterPanel;
+export default ExpenseFilterPanel;