src/components/Expenses/ExpenseList.jsx

@@ -10,25 +10,18 @@ import { ExpenseTableSkeleton } from "./ExpenseSkeleton";
 import ConfirmModal from "../common/ConfirmModal";
 import { useProfile } from "../../hooks/useProfile";
 
-const ExpenseList = () => {
+const ExpenseList = ({filters}) => {
   const [deletingId, setDeletingId] = useState(null);
   const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const { setViewExpense, setManageExpenseModal } = useExpenseContext();
   const [currentPage, setCurrentPage] = useState(1);
   const pageSize = 10;
   const { profile } = useProfile();
-  const filter = {
+
-    projectIds: [],
-    statusIds: [],
-    createdByIds: [],
-    paidById: [],
-    startDate: null,
-    endDate: null,
-  };
 
   const { mutate: DeleteExpense, isPending } = useDeleteExpense();
   const { data, isLoading, isError, isInitialLoading, error, isFetching } =
-    useExpenseList(10, currentPage, filter);
+    useExpenseList(10, currentPage, filters);
 
   const handleDelete = (id) => {
     setDeletingId(id);
@@ -121,7 +114,7 @@ const ExpenseList = () => {
             className="dataTables_wrapper no-footer px-2"
           >
             <table
-              className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
+              className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap px-3"
               aria-describedby="DataTables_Table_0_info"
               id="horizontal-example"
             >
@@ -150,7 +143,7 @@ const ExpenseList = () => {
                     <div className="text-start ms-5">Expense Type</div>
                   </th>
                   <th
-                    className="sorting sorting_desc d-none d-sm-table-cell"
+                    className="sorting sorting_desc  d-table-cell"
                     tabIndex="0"
                     aria-controls="DataTables_Table_0"
                     rowSpan="1"
@@ -158,10 +151,10 @@ const ExpenseList = () => {
                     aria-label="Payment Mode: activate to sort column ascending"
                     aria-sort="descending"
                   >
-                    <div className="text-start ms-5">Payment Mode</div>
+                    <div className="text-start ">Payment Mode</div>
                   </th>
                   <th
-                    className="sorting sorting_desc d-none d-sm-table-cell"
+                    className="sorting sorting_desc d-table-cell"
                     tabIndex="0"
                     aria-controls="DataTables_Table_0"
                     rowSpan="1"
@@ -172,7 +165,7 @@ const ExpenseList = () => {
                     <div className="text-start ms-5">Paid By</div>
                   </th>
                   <th
-                    className="sorting d-none d-md-table-cell"
+                    className="sorting  d-table-cell"
                     tabIndex="0"
                     aria-controls="DataTables_Table_0"
                     rowSpan="1"
@@ -203,26 +196,24 @@ const ExpenseList = () => {
                   </th>
                 </tr>
               </thead>
-              <tbody>
+              <tbody >
                 {!isInitialLoading &&
                   groupExpensesByDateAndStatus(items).map(
                     ({ date, expenses }) => (
                       <>
-                        <tr key={`date-${date}`} className="bg-light text-dark">
+                        <tr key={`date-${date}`} className="tr-group text-dark">
                           <td colSpan={7} className="text-start">
                             <strong>{formatUTCToLocalTime(date)}</strong>
                           </td>
-                        </tr>
+                        </tr>                     {expenses.map((expense) => (
-
+                          <tr key={expense.id} >
-                        {expenses.map((expense) => (
+                            <td className="text-start d-table-cell ms-5">
-                          <tr key={expense.id}>
-                            <td className="text-start d-none d-sm-table-cell ms-5">
                               {expense.expensesType?.name || "N/A"}
                             </td>
-                            <td className="text-start d-none d-sm-table-cell ms-5">
+                            <td className="text-start  d-table-cell ms-5">
                               {expense.paymentMode?.name || "N/A"}
                             </td>
-                            <td className="text-start d-none d-sm-table-cell ms-5">
+                            <td className="text-start  d-table-cell ms-5">
                               <div className="d-flex align-items-center">
                                 <Avatar
                                   size="xs"
@@ -237,7 +228,7 @@ const ExpenseList = () => {
                                 </span>
                               </div>
                             </td>
-                            <td className="d-none d-md-table-cell text-end">
+                            <td className="d-table-cell text-end">
                               <i className="bx bx-rupee b-xs"></i>
                               {expense?.amount}
                             </td>

src/components/Expenses/ExpenseSchema.js

@@ -88,4 +88,24 @@ export const defaultExpense = {
 export const ActionSchema = z.object({
   comment : z.string().min(1,{message:"Please leave comment"}),
    selectedStatus: z.string().min(1, { message: "Please select a status" }),
-})
+})
+
+
+export const SearchSchema =  z.object({
+  projectIds: z.array(z.string()).optional(),       
+  statusIds: z.array(z.string()).optional(),
+  createdByIds: z.array(z.string()).optional(),
+  paidById: z.array(z.string()).optional(),
+startDate: z.string().optional(),
+endDate: z.string().optional(),
+
+});
+
+export const defaultFilter = {
+  projectIds:[],
+  statusIds:[],
+  createdByIds:[],
+  paidById:[],
+  startDate:"",
+  endDate:""
+}

src/components/Expenses/ExpenseSkeleton.jsx

@@ -135,7 +135,7 @@ const SkeletonCell = ({ width = "100%", height = 20, className = "", style = {}
   />
 );
 
-export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 6 }) => {
+export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 3 }) => {
   return (
     <table
       className="card-body table border-top dataTable no-footer dtr-column text-nowrap"

src/components/common/DateRangePicker.jsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useRef } from "react";
 
 const DateRangePicker = ({
+  md,
+  sm,
   onRangeChange,
   DateDifference = 7, 
   endDateMode = "yesterday",
@@ -25,11 +27,12 @@ const DateRangePicker = ({
       altInput: true,     
       altFormat: "d-m-Y", 
       defaultDate: [startDate, endDate], 
-      static: true,       
+      static: false,       
+      appendTo: document.body,
       clickOpens: true,
       maxDate: endDate, // ✅ Disable future dates
       onChange: (selectedDates, dateStr) => {
-        const [startDateString, endDateString] = dateStr.split(" to ");
+        const [startDateString, endDateString] = dateStr.split(" To ");
         onRangeChange?.({ startDate: startDateString, endDate: endDateString });
       },
     });
@@ -45,13 +48,29 @@ const DateRangePicker = ({
   }, [onRangeChange, DateDifference, endDateMode]);
 
   return (
-    <input
+<div className={`col-${sm} col-sm-${md} px-1 position-relative`}>
-      type="text"
+  <input
-      className="form-control form-control-sm ms-1"
+    type="text"
-      placeholder="From to End"
+    className="form-control form-control-sm ps-2 pe-5  "
-      id="flatpickr-range"
+    placeholder="From to End"
-      ref={inputRef}
+    id="flatpickr-range"
-    />
+    ref={inputRef}
+  />
+
+  <i
+    className="bx bx-calendar calendar-icon cursor-pointer"
+    style={{
+      position: "absolute",
+      top: "50%",
+      right: "12px",
+      transform: "translateY(-50%)",
+      color: "#6c757d",
+      fontSize: "1.1rem",
+     
+    }}
+  ></i>
+</div>
+
   );
 };
 

src/components/common/SelectMultiple.jsx

@@ -1,12 +1,13 @@
 import React, { useState, useEffect, useRef } from "react";
 import { useFormContext } from "react-hook-form";
+import { createPortal } from "react-dom";
 import "./MultiSelectDropdown.css";
 
 const SelectMultiple = ({
   name,
   options = [],
   label = "Select options",
-  labelKey = "name",
+  labelKey = "name", // Can now be a function or a string
   valueKey = "id",
   placeholder = "Please select...",
   IsLoading = false,
@@ -16,11 +17,18 @@ const SelectMultiple = ({
 
   const [isOpen, setIsOpen] = useState(false);
   const [searchText, setSearchText] = useState("");
+  const containerRef = useRef(null);
   const dropdownRef = useRef(null);
 
+  const [dropdownStyles, setDropdownStyles] = useState({ top: 0, left: 0, width: 0 });
+
   useEffect(() => {
     const handleClickOutside = (e) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target) &&
+        (!dropdownRef.current || !dropdownRef.current.contains(e.target))
+      ) {
         setIsOpen(false);
       }
     };
@@ -28,6 +36,21 @@ const SelectMultiple = ({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
+  useEffect(() => {
+    if (isOpen && containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      setDropdownStyles({
+        top: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX,
+        width: rect.width,
+      });
+    }
+  }, [isOpen]);
+
+  const getLabel = (item) => {
+    return typeof labelKey === "function" ? labelKey(item) : item[labelKey];
+  };
+
   const handleCheckboxChange = (value) => {
     const updated = selectedValues.includes(value)
       ? selectedValues.filter((v) => v !== value)
@@ -36,96 +59,113 @@ const SelectMultiple = ({
     setValue(name, updated, { shouldValidate: true });
   };
 
-  const filteredOptions = options.filter((item) =>
+  const filteredOptions = options.filter((item) => {
-    item[labelKey]?.toLowerCase().includes(searchText.toLowerCase())
+    const label = getLabel(item);
-  );
+    return label?.toLowerCase().includes(searchText.toLowerCase());
+  });
 
-  return (
+  const dropdownElement = (
-    <div ref={dropdownRef} className="multi-select-dropdown-container">
+    <div
-      <label className="form-label mb-1">{label}</label>
+      ref={dropdownRef}
-
+      className="multi-select-dropdown-options"
-      <div
+      style={{
-        className="multi-select-dropdown-header"
+        position: "absolute",
-        onClick={() => setIsOpen((prev) => !prev)}
+        top: dropdownStyles.top,
-      >
+        left: dropdownStyles.left,
-        <span
+        width: dropdownStyles.width,
-          className={
+        zIndex: 9999,
-            selectedValues.length > 0
+        backgroundColor: "white",
-              ? "placeholder-style-selected"
+        boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
-              : "placeholder-style"
+        borderRadius: 4,
-          }
+        maxHeight: 300,
-        >
+        overflowY: "auto",
-          <div className="selected-badges-container">
+      }}
-            {selectedValues.length > 0 ? (
+    >
-              selectedValues.map((val) => {
+      <div className="multi-select-dropdown-search" style={{ padding: 8 }}>
-                const found = options.find((opt) => opt[valueKey] === val);
+        <input
-                return (
+          type="text"
-                  <span
+          placeholder="Search..."
-                    key={val}
+          value={searchText}
-                    className="badge badge-selected-item mx-1 mb-1"
+          onChange={(e) => setSearchText(e.target.value)}
-                  >
+          className="multi-select-dropdown-search-input"
-                    {found ? found[labelKey] : ""}
+          style={{ width: "100%", padding: 4 }}
-                  </span>
+        />
-                );
-              })
-            ) : (
-              <span className="placeholder-text">{placeholder}</span>
-            )}
-          </div>
-        </span>
-        <i className="bx bx-chevron-down"></i>
       </div>
 
-      {isOpen && (
+      {filteredOptions.map((item) => {
-        <div className="multi-select-dropdown-options">
+        const labelVal = getLabel(item);
-          <div className="multi-select-dropdown-search">
+        const valueVal = item[valueKey];
+        const isChecked = selectedValues.includes(valueVal);
+
+        return (
+          <div
+            key={valueVal}
+            className={`multi-select-dropdown-option ${isChecked ? "selected" : ""}`}
+            style={{ display: "flex", alignItems: "center", padding: "4px 8px" }}
+          >
             <input
-              type="text"
+              type="checkbox"
-              placeholder="Search..."
+              className="custom-checkbox form-check-input"
-              value={searchText}
+              checked={isChecked}
-              onChange={(e) => setSearchText(e.target.value)}
+              onChange={() => handleCheckboxChange(valueVal)}
-              className="multi-select-dropdown-search-input"
+              style={{ marginRight: 8 }}
             />
+            <label className="text-secondary">{labelVal}</label>
           </div>
+        );
+      })}
 
-          {filteredOptions.map((item) => {
+      {!IsLoading && filteredOptions.length === 0 && (
-            const labelVal = item[labelKey];
+        <div className="multi-select-dropdown-Not-found" style={{ padding: 8 }}>
-            const valueVal = item[valueKey];
+          <label className="text-muted">Not Found {`'${searchText}'`}</label>
-            const isChecked = selectedValues.includes(valueVal);
+        </div>
-
+      )}
-            return (
+      {IsLoading && filteredOptions.length === 0 && (
-              <div
+        <div className="multi-select-dropdown-Not-found" style={{ padding: 8 }}>
-                key={valueVal}
+          <label className="text-muted">Loading...</label>
-                className={`multi-select-dropdown-option ${
-                  isChecked ? "selected" : ""
-                }`}
-              >
-                <input
-                  type="checkbox"
-                  className="custom-checkbox form-check-input"
-                  checked={isChecked}
-                  onChange={() => handleCheckboxChange(valueVal)}
-                />
-                <label className="text-secondary">{labelVal}</label>
-              </div>
-            );
-          })}
-          {!IsLoading && filteredOptions.length === 0 && (
-            <div className="multi-select-dropdown-Not-found">
-              <label className="text-muted">
-                Not Found {`'${searchText}'`}
-              </label>
-            </div>
-          )}
-          {IsLoading && filteredOptions.length === 0 && (
-            <div className="multi-select-dropdown-Not-found">
-              <label className="text-muted">Loading...</label>
-            </div>
-          )}
         </div>
       )}
     </div>
   );
+
+  return (
+    <>
+      <div ref={containerRef} className="multi-select-dropdown-container" style={{ position: "relative" }}>
+        <label className="form-label mb-1">{label}</label>
+
+        <div
+          className="multi-select-dropdown-header"
+          onClick={() => setIsOpen((prev) => !prev)}
+          style={{ cursor: "pointer" }}
+        >
+          <span
+            className={
+              selectedValues.length > 0 ? "placeholder-style-selected" : "placeholder-style"
+            }
+          >
+            <div className="selected-badges-container">
+              {selectedValues.length > 0 ? (
+                selectedValues.map((val) => {
+                  const found = options.find((opt) => opt[valueKey] === val);
+                  const label = found ? getLabel(found) : "";
+                  return (
+                    <span key={val} className="badge badge-selected-item mx-1 mb-1">
+                      {label}
+                    </span>
+                  );
+                })
+              ) : (
+                <span className="placeholder-text">{placeholder}</span>
+              )}
+            </div>
+          </span>
+          <i className="bx bx-chevron-down"></i>
+        </div>
+      </div>
+
+      {isOpen && createPortal(dropdownElement, document.body)}
+    </>
+  );
 };
 
 export default SelectMultiple;

src/pages/Expense/ExpensePage.jsx

@@ -1,5 +1,17 @@
-import React, { createContext, useContext, useState } from "react";
+import React, {
-
+  createContext,
+  useContext,
+  useState,
+  useRef,
+  useEffect,
+} from "react";
+import {
+  useForm,
+  useFieldArray,
+  FormProvider,
+  useFormContext,
+  Controller,
+} from "react-hook-form";
 import ExpenseList from "../../components/Expenses/ExpenseList";
 import ViewExpense from "../../components/Expenses/ViewExpense";
 import Breadcrumb from "../../components/common/Breadcrumb";
@@ -8,11 +20,88 @@ import PreviewDocument from "../../components/Expenses/PreviewDocument";
 import ManageExpense from "../../components/Expenses/ManageExpense";
 import { useProjectName } from "../../hooks/useProjects";
 import { useExpenseStatus } from "../../hooks/masterHook/useMaster";
+import {
+  useEmployees,
+  useEmployeesAllOrByProjectId,
+} from "../../hooks/useEmployees";
+import { useSelector } from "react-redux";
+import DateRangePicker from "../../components/common/DateRangePicker";
+import SelectMultiple from "../../components/common/SelectMultiple";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  defaultFilter,
+  SearchSchema,
+} from "../../components/Expenses/ExpenseSchema";
+
+const SelectDropdown = ({
+  label,
+  options = [],
+  loading = false,
+  placeholder = "Select...",
+  valueKey = "id",
+  labelKey = "name",
+  selectedValues = [],
+  onChange,
+  isMulti = false,
+}) => {
+  const handleChange = (e) => {
+    const selected = Array.from(
+      e.target.selectedOptions,
+      (option) => option.value
+    );
+    onChange && onChange(selected);
+  };
+
+  return (
+    <div className="select-dropdown">
+      <label>{label}</label>
+      <div className="dropdown-menu show">
+        {options.map((option) => {
+          const checked = selectedValues.includes(option[valueKey]);
+          return (
+            <div key={option[valueKey]} className="form-check">
+              <input
+                type="checkbox"
+                className="form-check-input"
+                id={`checkbox-${option[valueKey]}`}
+                checked={checked}
+                onChange={() => {
+                  let newSelected;
+                  if (checked) {
+                    newSelected = selectedValues.filter(
+                      (val) => val !== option[valueKey]
+                    );
+                  } else {
+                    newSelected = [...selectedValues, option[valueKey]];
+                  }
+                  onChange(newSelected);
+                }}
+              />
+              <label
+                className="form-check-label"
+                htmlFor={`checkbox-${option[valueKey]}`}
+              >
+                {option[labelKey] || option[valueKey]}
+              </label>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
 
 export const ExpenseContext = createContext();
 export const useExpenseContext = () => useContext(ExpenseContext);
 
 const ExpensePage = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [filters,setFilter] = useState()
+  const dropdownRef = useRef(null);
+  const shouldCloseOnOutsideClick = useRef(false);
+  const selectedProjectId = useSelector(
+    (store) => store.localVariables.projectId
+  );
   const [ManageExpenseModal, setManageExpenseModal] = useState({
     IsOpen: null,
     expenseId: null,
@@ -32,8 +121,81 @@ const ExpensePage = () => {
     setDocumentView,
   };
 
-  const { projectNames } = useProjectName();
+  const methods = useForm({
-  const {} = useExpenseStatus();
+    resolver: zodResolver(SearchSchema),
+    defaultValues: defaultFilter,
+  });
+  const {
+    register,
+    handleSubmit,
+    control,
+    getValues,
+    trigger,
+    setValue,
+    watch,
+    reset,
+    formState: { errors },
+  } = methods;
+
+  const { projectNames, loading: projectLoading } = useProjectName();
+  const { ExpenseStatus, loading: statusLoading, error } = useExpenseStatus();
+  const { employees, loading: empLoading } = useEmployeesAllOrByProjectId(
+    true,
+    selectedProjectId,
+    true
+  );
+
+  const onSubmit = (data) => {
+  setFilter(data)
+  };
+  const setDateRange = ({ startDate, endDate }) => {
+    setValue(
+      "startDate",
+      startDate ? new Date(startDate).toISOString().split("T")[0] : null
+    );
+    setValue(
+      "endDate",
+      endDate ? new Date(endDate).toISOString().split("T")[0] : null
+    );
+  };
+
+  const toggleDropdown = () => {
+    setIsOpen((prev) => {
+      shouldCloseOnOutsideClick.current = !prev;
+      return !prev;
+    });
+  };
+
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (
+        shouldCloseOnOutsideClick.current &&
+        dropdownRef.current &&
+        dropdownRef.current.contains(event.target)
+      ) {
+        setIsOpen(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  const clearFilter =()=>{
+    setFilter(
+        {
+          projectIds: [],
+          statusIds: [],
+          createdByIds: [],
+          paidById: [],
+          startDate: null,
+          endDate: null,
+        })
+        reset()
+    
+  }
+
   return (
     <ExpenseContext.Provider value={contextValue}>
       <div className="container-fluid">
@@ -46,50 +208,135 @@ const ExpensePage = () => {
         <div className="card my-1 text-start px-0">
           <div className="card-body py-1 px-1">
             <div className="row">
-              <div className="col-5 col-sm-4">
+              <div className="col-5 col-sm-4 d-flex aligin-items-center">
-                <label className="mb-0">
+                <div
-                  <input
+                  className="dropdown d-inline-block mt-2 align-items-center"
-                    type="search"
+                  ref={dropdownRef}
-                    className="form-control form-control-sm"
+                >
-                    placeholder="Search Expense..."
-                    aria-controls="DataTables_Table_0"
-                  />
-                </label>
-                <div className="dropdown d-inline-block" >
                   <i
                     className="bx bx-slider-alt ms-2"
-                    id="filterDropdown"
-                    data-bs-toggle="dropdown"
                     role="button"
-                    aria-expanded="false"
+                    aria-expanded={isOpen}
                     style={{ cursor: "pointer" }}
+                    onClick={() => setIsOpen((v) => !v)}
                   ></i>
+                  {isOpen && (
+                    <div
+                      className="dropdown-menu p-3 overflow-hidden show d-flex align-items-center"
+                      style={{ minWidth: "500px" }}
+                    >
+                      <FormProvider {...methods}>
+                        <form
+                          className="p-2 p-sm-0"
+                          onSubmit={handleSubmit((data) => {
+                            onSubmit(data);
+                            setIsOpen(false);
+                          })}
+                        >
+                          <div className="w-100">
+                            <DateRangePicker
+                              onRangeChange={setDateRange}
+                              endDateMode="today"
+                              DateDifference="6"
+                              dateFormat="DD-MM-YYYY"
+                            />
+                          </div>
 
-                  <div
+                          <div className="row g-2">
-                    className="dropdown-menu p-3"
+                            <div className="col-12 ">
-                    aria-labelledby="filterDropdown"
+                              <label className="form-label d-block text-secondary">
-                    style={{ minWidth: "500px",}} 
+                                Select Status
-                  >
+                              </label>
-                    <div className="row g-2">
+                              <div className="d-flex flex-wrap">
-                      <div className="col-md-6">
+                                {ExpenseStatus.map((status) => (
-                        <label className="form-label">Project</label>
+                                  <Controller
-                        <select className="form-select form-select-sm">
+                                    key={status.id}
-                          <option value="1">Project A</option>
+                                    control={control}
-                          <option value="2">Project B</option>
+                                    name="statusIds"
-                          <option value="3">Project C</option>
+                                    render={({
-                        </select>
+                                      field: { value = [], onChange },
-                      </div>
+                                    }) => (
+                                      <div className="d-flex align-items-center me-4 mb-2">
+                                        <input
+                                          type="checkbox"
+                                          className="form-check-input form-check-input-sm"
+                                          value={status.id}
+                                          checked={value.includes(status.id)}
+                                          onChange={(e) => {
+                                            if (e.target.checked) {
+                                              onChange([...value, status.id]);
+                                            } else {
+                                              onChange(
+                                                value.filter(
+                                                  (v) => v !== status.id
+                                                )
+                                              );
+                                            }
+                                          }}
+                                        />
+                                        <label className="ms-2 mb-0">
+                                          {status.displayName}
+                                        </label>
+                                      </div>
+                                    )}
+                                  />
+                                ))}
+                              </div>
+                            </div>
+                          </div>
 
-                      <div className="col-md-6">
+                          <div className="row g-2">
-                        <label className="form-label">Select Project</label>
+                            <SelectMultiple
-                        <select className="form-select form-select-sm">
+                              name="projectIds"
-                          {projectNames?.map((project)=>(
+                              label="Select Projects"
-                                 <option key={project.id} value={project.id}>{project.name}</option>
+                              options={projectNames}
-                          ))}
+                              labelKey="name"
-                        </select>
+                              valueKey="id"
-                      </div>
+                              IsLoading={projectLoading}
+                            />
+                            <SelectMultiple
+                              name="createdByIds"
+                              label="Select creator"
+                              options={employees}
+                              labelKey={(item) =>
+                                `${item.firstName} ${item.lastName}`
+                              }
+                              valueKey="id"
+                              IsLoading={empLoading}
+                            />
+                            <SelectMultiple
+                              name="paidById"
+                              label="Select Paid by"
+                              options={employees}
+                              labelKey={(item) =>
+                                `${item.firstName} ${item.lastName}`
+                              }
+                              valueKey="id"
+                              IsLoading={empLoading}
+                            />
+                          </div>
+                          <div className="d-flex justify-content-end py-1 gap-2">
+                            <button
+                              type="button"
+                              className="btn btn-secondary btn-xs"
+                              onClick={() => {
+                               clearFilter()
+                                setIsOpen(false);
+                              }}
+                            >
+                              Clear
+                            </button>
+                            <button
+                              type="submit"
+                              className="btn btn-primary btn-xs"
+                            >
+                              Apply
+                            </button>
+                          </div>
+                        </form>
+                      </FormProvider>
                     </div>
-                  </div>
+                  )}
                 </div>
               </div>
               <div className="col-7 col-sm-8 text-end gap-2">
@@ -115,7 +362,7 @@ const ExpensePage = () => {
           </div>
         </div>
 
-        <ExpenseList />
+        <ExpenseList filters={filters} />
         {ManageExpenseModal.IsOpen && (
           <GlobalModel
             isOpen={ManageExpenseModal.IsOpen}