src/components/Expenses/ExpenseList.jsx

@@ -10,18 +10,26 @@ import { ExpenseTableSkeleton } from "./ExpenseSkeleton";
 import ConfirmModal from "../common/ConfirmModal";
 import { useProfile } from "../../hooks/useProfile";
 
-const ExpenseList = ({filters}) => {
+const ExpenseList = () => {
   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 {profile} = useProfile()
-
+console.log(profile)
+  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, filters);
+    useExpenseList(10, currentPage, filter);
 
   const handleDelete = (id) => {
     setDeletingId(id);
@@ -30,7 +38,7 @@ const ExpenseList = ({filters}) => {
       {
         onSettled: () => {
           setDeletingId(null); 
-          setIsDeleteModalOpen(false);
+          setIsDeleteModalOpen(false)
         },
       }
     );
@@ -47,42 +55,9 @@ const ExpenseList = ({filters}) => {
       setCurrentPage(page);
     }
   };
-  const STATUS_ORDER = [
-    "Draft",
-    "Review Pending",
-    "Approval Pending",
-    "Process Pending",
-    "Processed",
-    "Paid",
-    "Rejected",
-  ];
-
-  const groupExpensesByDateAndStatus = (expenses) => {
-    const grouped = {};
-
-    expenses.forEach((expense) => {
-      const dateKey = expense.transactionDate.split("T")[0]; 
-      if (!grouped[dateKey]) grouped[dateKey] = [];
-      grouped[dateKey].push(expense);
-    });
-
-    const sortedDates = Object.keys(grouped).sort(
-      (a, b) => new Date(b) - new Date(a)
-    );
-
-    return sortedDates.map((date) => ({
-      date,
-      expenses: grouped[date].sort((a, b) => {
-        return (
-          STATUS_ORDER.indexOf(a.status.name) -
-          STATUS_ORDER.indexOf(b.status.name)
-        );
-      }),
-    }));
-  };
-
   return (
     <>
+    
       {IsDeleteModalOpen && (
         <div
           className={`modal fade  ${IsDeleteModalOpen ? "show" : ""}`}
@@ -96,6 +71,7 @@ const ExpenseList = ({filters}) => {
           }}
           aria-hidden="false"
         >
+        
           <ConfirmModal
             type={"delete"}
             header={"Delete Expense"}
@@ -111,16 +87,16 @@ const ExpenseList = ({filters}) => {
       <div className="card-datatable table-responsive">
         <div
           id="DataTables_Table_0_wrapper"
-            className="dataTables_wrapper no-footer px-2"
+          className="dataTables_wrapper no-footer"
         >
           <table
-              className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap px-3"
+            className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
             aria-describedby="DataTables_Table_0_info"
             id="horizontal-example"
           >
             <thead>
               <tr>
-                  {/* <th
+                <th
                   className="sorting sorting_desc"
                   tabIndex="0"
                   aria-controls="DataTables_Table_0"
@@ -130,7 +106,7 @@ const ExpenseList = ({filters}) => {
                   aria-sort="descending"
                 >
                   <div className="text-start ms-6">Date Time</div>
-                </th> */}
+                </th>
                 <th
                   className="sorting sorting_desc d-none d-sm-table-cell"
                   tabIndex="0"
@@ -143,7 +119,7 @@ const ExpenseList = ({filters}) => {
                   <div className="text-start ms-5">Expense Type</div>
                 </th>
                 <th
-                    className="sorting sorting_desc  d-table-cell"
+                  className="sorting sorting_desc d-none d-sm-table-cell"
                   tabIndex="0"
                   aria-controls="DataTables_Table_0"
                   rowSpan="1"
@@ -151,10 +127,10 @@ const ExpenseList = ({filters}) => {
                   aria-label="Payment Mode: activate to sort column ascending"
                   aria-sort="descending"
                 >
-                    <div className="text-start ">Payment Mode</div>
+                  <div className="text-start ms-5">Payment Mode</div>
                 </th>
                 <th
-                    className="sorting sorting_desc d-table-cell"
+                  className="sorting sorting_desc d-none d-sm-table-cell"
                   tabIndex="0"
                   aria-controls="DataTables_Table_0"
                   rowSpan="1"
@@ -165,7 +141,7 @@ const ExpenseList = ({filters}) => {
                   <div className="text-start ms-5">Paid By</div>
                 </th>
                 <th
-                    className="sorting  d-table-cell"
+                  className="sorting d-none d-md-table-cell"
                   tabIndex="0"
                   aria-controls="DataTables_Table_0"
                   rowSpan="1"
@@ -197,23 +173,39 @@ const ExpenseList = ({filters}) => {
               </tr>
             </thead>
             <tbody>
-                {!isInitialLoading &&
+              {/* {isLoading && (
-                  groupExpensesByDateAndStatus(items).map(
+                <tr>
-                    ({ date, expenses }) => (
+                  <td colSpan={7} className="text-center py-3">
-                      <>
+                    Loading...
-                        <tr key={`date-${date}`} className="tr-group text-dark">
-                          <td colSpan={7} className="text-start">
-                            <strong>{formatUTCToLocalTime(date)}</strong>
                   </td>
-                        </tr>                     {expenses.map((expense) => (
+                </tr>
-                          <tr key={expense.id} >
+              )}
-                            <td className="text-start d-table-cell ms-5">
+
+              {!isInitialLoading && items.length === 0 && (
+                <tr>
+                  <td colSpan={7} className="text-center py-3">
+                    No expenses found.
+                  </td>
+                </tr>
+              )} */}
+
+              {!isInitialLoading &&
+                items.map((expense) => (
+                  <tr key={expense.id} className="odd">
+                    <td className="sorting_1" colSpan={2}>
+                      <div className="d-flex justify-content-start align-items-center user-name ms-6">
+                        <span>
+                          {formatUTCToLocalTime(expense.transactionDate)}
+                        </span>
+                      </div>
+                    </td>
+                    <td className="text-start d-none d-sm-table-cell ms-5">
                       {expense.expensesType?.name || "N/A"}
                     </td>
-                            <td className="text-start  d-table-cell ms-5">
+                    <td className="text-start d-none d-sm-table-cell ms-5">
                       {expense.paymentMode?.name || "N/A"}
                     </td>
-                            <td className="text-start  d-table-cell ms-5">
+                    <td className="text-start d-none d-sm-table-cell ms-5">
                       <div className="d-flex align-items-center">
                         <Avatar
                           size="xs"
@@ -228,7 +220,7 @@ const ExpenseList = ({filters}) => {
                         </span>
                       </div>
                     </td>
-                            <td className="d-table-cell text-end">
+                    <td className="d-none d-md-table-cell text-end">
                       <i className="bx bx-rupee b-xs"></i>
                       {expense?.amount}
                     </td>
@@ -243,64 +235,57 @@ const ExpenseList = ({filters}) => {
                       </span>
                     </td>
                     <td>
-                              <div className="d-flex justify-content-center align-items-center gap-2">
+                      <div className="d-flex justify-content-strat align-items-center gap-2">
-                                <span className="cursor-pointer">
+                        <span
-                                  <i
+                          className="cursor-pointer"
-                                    className="bx bx-show text-primary"
                           onClick={() =>
                             setViewExpense({
                               expenseId: expense.id,
                               view: true,
                             })
                           }
-                                  ></i>
+                        >
+                          <i className="bx bx-show text-primary "></i>
                         </span>
-
+                        {(expense.status.name === 'Draft' || expense.status.name === 'Rejected')  && (expense.createdBy.id === profile.employeeInfo.id )  &&(
-                                <span className="cursor-pointer">
+                          <span
-                                  {(expense.status.name === "Draft" ||
+                          className="cursor-pointer"
-                                    expense.status.name === "Rejected") &&
-                                  expense.createdBy.id ===
-                                    profile?.employeeInfo.id ? (
-                                    <i
-                                      className="bx bx-edit bx-sm text-secondary"
                           onClick={() =>
                             setManageExpenseModal({
                               IsOpen: true,
                               expenseId: expense.id,
                             })
                           }
-                                    ></i>
+                        >
-                                  ) : (
+                          <i className="bx bx-edit bx-sm text-secondary"></i>
-                                    <i
-                                      className="bx bx-edit bx-sm"
-                                      style={{ visibility: "hidden" }}
-                                    ></i>
-                                  )}
                         </span>
-
+                        )}
-                                <span className="cursor-pointer">
+                        {expense.status.name == "Draft" && (
-                                  {expense.status.name === "Draft" ? (
+                          <span
-                                    <i
+                            className="cursor-pointer"
-                                      className="bx bx-trash bx-sm text-danger"
                             onClick={() => {
-                                        setIsDeleteModalOpen(true);
+                              setIsDeleteModalOpen(true)
-                                        setDeletingId(expense.id);
+                              setDeletingId(expense.id)
                             }}
-                                    ></i>
+                          >
-                                  ) : (
+                            {/* {deletingId === expense.id ? (
-                                    <i
+                              <div
-                                      className="bx bx-trash bx-sm"
+                                className="spinner-border spinner-border-sm text-secondary"
-                                      style={{ visibility: "hidden" }}
+                                role="status"
-                                    ></i>
+                              >
-                                  )}
+                                <span className="visually-hidden">
+                                  Loading...
                                 </span>
                               </div>
+                            ) : ( */}
+                              <i className="bx bx-trash bx-sm text-danger"></i>
+                            {/* )} */}
+                          </span>
+                        )}
+                      </div>
                     </td>
                   </tr>
                 ))}
-                      </>
-                    )
-                  )}
             </tbody>
           </table>
         </div>

src/components/Expenses/ExpenseSchema.js

@@ -89,23 +89,3 @@ 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

@@ -123,19 +123,17 @@ export const ExpenseDetailsSkeleton = () => {
     </div>
   );
 };
-const SkeletonCell = ({ width = "100%", height = 20, className = "", style = {} }) => (
+const SkeletonCell = ({ width = "100%", height = 20, className = "" }) => (
   <div
     className={`skeleton ${className}`}
     style={{
       width,
       height,
       borderRadius: 4,
-      ...style,
     }}
   />
 );
-
+export const ExpenseTableSkeleton = ({ rows = 5 }) => {
-export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 3 }) => {
   return (
     <table
       className="card-body table border-top dataTable no-footer dtr-column text-nowrap"
@@ -161,18 +159,8 @@ export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 3 }) => {
       </thead>
 
       <tbody>
-        {[...Array(groups)].map((_, groupIdx) => (
+        {[...Array(rows)].map((_, idx) => (
-          <React.Fragment key={`group-${groupIdx}`}>
+          <tr key={idx} className={idx % 2 === 0 ? "odd" : "even"}>
-            {/* Fake Date Group Header Row */}
-            <tr className="bg-light">
-              <td colSpan={8}>
-                <SkeletonCell width="150px" height={20} />
-              </td>
-            </tr>
-
-            {/* Rows under this group */}
-            {[...Array(rowsPerGroup)].map((__, rowIdx) => (
-              <tr key={`row-${groupIdx}-${rowIdx}`} className={rowIdx % 2 === 0 ? "odd" : "even"}>
             {/* Date Time colSpan=2 */}
             <td colSpan={2} className="sorting_1">
               <div className="d-flex justify-content-start align-items-center user-name ms-6">
@@ -208,7 +196,7 @@ export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 3 }) => {
               <SkeletonCell width="80px" height={22} className="rounded" />
             </td>
 
-                {/* Action */}
+            {/* Action (icons) */}
             <td>
               <div className="d-flex justify-content-center align-items-center gap-2">
                 {[...Array(3)].map((__, i) => (
@@ -224,8 +212,6 @@ export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 3 }) => {
             </td>
           </tr>
         ))}
-          </React.Fragment>
-        ))}
       </tbody>
     </table>
   );

src/components/Expenses/ManageExpense.jsx

@@ -133,7 +133,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
   };
 
   useEffect(() => {
-    if (expenseToEdit && data && employees) {
+    if (expenseToEdit && data) {
       reset({
         projectId: data.project.id || "",
         expensesTypeId: data.expensesType.id || "",
@@ -170,7 +170,6 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
     }
   );
   const onSubmit = (payload) => {
-    debugger
     if (expenseToEdit) {
       const editPayload = { ...payload, id: data.id };
       ExpenseUpdate({ id: data.id, payload: editPayload });
@@ -195,6 +194,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
     isLoading
   )
     return <ExpenseSkeleton />;
+
   return (
     <div className="container p-3">
       <h5 className="m-0">
@@ -520,7 +520,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
                     (fileError?.fileSize?.message ||
                       fileError?.contentType?.message ||
                       fileError?.base64Data?.message,
-                    fileError?.documentId?.message)
+                    fileError?.documentId.message)
                   }
                 </div>
               ))}
@@ -532,7 +532,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
           <button
             type="submit"
             className="btn btn-primary btn-sm mt-3"
-            disabled={isPending || createPending}
+            disabled={isPending}
           >
             {isPending || createPending ? "Please Wait..." : expenseToEdit ? "Update" : "Submit"}
           </button>

src/components/Expenses/ViewExpense.jsx

@@ -38,7 +38,7 @@ const ViewExpense = ({ ExpenseId }) => {
     MakeAction(Payload);
   };
 
-  if (isLoading) return <ExpenseDetailsSkeleton />;
+  if (isLoading) return <ExpenseDetailsSkeleton/>
   const handleImageLoad = (id) => {
     setImageLoaded((prev) => ({ ...prev, [id]: true }));
   };
@@ -52,7 +52,7 @@ const ViewExpense = ({ ExpenseId }) => {
         </div>
 
         {/* Expense Info Rows */}
-        <div className="col-12  col-md-6 mb-3">
+        <div className="col-12  col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Transaction Date :
@@ -63,7 +63,7 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-        <div className="col-12   col-md-6 mb-3">
+        <div className="col-12   col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Expense Type :
@@ -111,11 +111,7 @@ const ViewExpense = ({ ExpenseId }) => {
           <div className="col-12 text-start col-md-4 mb-3">
             <label className="form-label me-2 mb-0 fw-semibold">Status :</label>
                 
-          <span
+            <span  className={`badge bg-label-${getColorNameFromHex(data?.status?.color) || 'secondary'}`}>
-            className={`badge bg-label-${
-              getColorNameFromHex(data?.status?.color) || "secondary"
-            }`}
-          >
               {data?.status?.displayName}
             </span>
           </div>
@@ -167,8 +163,7 @@ const ViewExpense = ({ ExpenseId }) => {
         <label className="form-label me-2 mb-0 fw-semibold">
           Attachement :
         </label>
-        {data?.documents &&
+        {data?.documents && data?.documents?.map((doc) => (
-          data?.documents?.map((doc) => (
           <div
             className="list-group-item list-group-item-action d-flex align-items-center"
             key={doc.id}
@@ -178,12 +173,7 @@ const ViewExpense = ({ ExpenseId }) => {
               style={{ height: "50px", width: "80px", position: "relative" }}
             >
               {doc.contentType === "application/pdf" ? (
-                  <div>
+                <div><i className="bx bxs-file-pdf" style={{fontSize:"45px"}}></i></div>
-                    <i
-                      className="bx bxs-file-pdf"
-                      style={{ fontSize: "45px" }}
-                    ></i>
-                  </div>
               ) : (
                 <>
                   {!imageLoaded[doc.id] && (
@@ -204,10 +194,7 @@ const ViewExpense = ({ ExpenseId }) => {
                     }}
                     onLoad={() => handleImageLoad(doc.id)}
                     onClick={() =>
-                        setDocumentView({
+                      setDocumentView({ IsOpen: true, Image: doc.preSignedUrl })
-                          IsOpen: true,
-                          Image: doc.preSignedUrl,
-                        })
                     }
                   />
                 </>
@@ -250,6 +237,7 @@ const ViewExpense = ({ ExpenseId }) => {
                   handleSubmit(onSubmit)();
                 }}
                 className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
+               
               >
                 {status.displayName || status.name} 
               </button>

src/components/common/DateRangePicker.jsx

@@ -1,8 +1,6 @@
 import React, { useEffect, useRef } from "react";
 
 const DateRangePicker = ({
-  md,
-  sm,
   onRangeChange,
   DateDifference = 7, 
   endDateMode = "yesterday",
@@ -27,12 +25,11 @@ const DateRangePicker = ({
       altInput: true,     
       altFormat: "d-m-Y", 
       defaultDate: [startDate, endDate], 
-      static: false,       
+      static: true,       
-      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 });
       },
     });
@@ -48,29 +45,13 @@ const DateRangePicker = ({
   }, [onRangeChange, DateDifference, endDateMode]);
 
   return (
-<div className={`col-${sm} col-sm-${md} px-1 position-relative`}>
     <input
       type="text"
-    className="form-control form-control-sm ps-2 pe-5  "
+      className="form-control form-control-sm ms-1"
       placeholder="From to End"
       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,13 +1,12 @@
 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", // Can now be a function or a string
+  labelKey = "name",
   valueKey = "id",
   placeholder = "Please select...",
   IsLoading = false,
@@ -17,18 +16,11 @@ 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 (
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
-        containerRef.current &&
-        !containerRef.current.contains(e.target) &&
-        (!dropdownRef.current || !dropdownRef.current.contains(e.target))
-      ) {
         setIsOpen(false);
       }
     };
@@ -36,21 +28,6 @@ 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)
@@ -59,98 +36,35 @@ const SelectMultiple = ({
     setValue(name, updated, { shouldValidate: true });
   };
 
-  const filteredOptions = options.filter((item) => {
+  const filteredOptions = options.filter((item) =>
-    const label = getLabel(item);
+    item[labelKey]?.toLowerCase().includes(searchText.toLowerCase())
-    return label?.toLowerCase().includes(searchText.toLowerCase());
-  });
-
-  const dropdownElement = (
-    <div
-      ref={dropdownRef}
-      className="multi-select-dropdown-options"
-      style={{
-        position: "absolute",
-        top: dropdownStyles.top,
-        left: dropdownStyles.left,
-        width: dropdownStyles.width,
-        zIndex: 9999,
-        backgroundColor: "white",
-        boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
-        borderRadius: 4,
-        maxHeight: 300,
-        overflowY: "auto",
-      }}
-    >
-      <div className="multi-select-dropdown-search" style={{ padding: 8 }}>
-        <input
-          type="text"
-          placeholder="Search..."
-          value={searchText}
-          onChange={(e) => setSearchText(e.target.value)}
-          className="multi-select-dropdown-search-input"
-          style={{ width: "100%", padding: 4 }}
-        />
-      </div>
-
-      {filteredOptions.map((item) => {
-        const labelVal = getLabel(item);
-        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="checkbox"
-              className="custom-checkbox form-check-input"
-              checked={isChecked}
-              onChange={() => handleCheckboxChange(valueVal)}
-              style={{ marginRight: 8 }}
-            />
-            <label className="text-secondary">{labelVal}</label>
-          </div>
-        );
-      })}
-
-      {!IsLoading && filteredOptions.length === 0 && (
-        <div className="multi-select-dropdown-Not-found" style={{ padding: 8 }}>
-          <label className="text-muted">Not Found {`'${searchText}'`}</label>
-        </div>
-      )}
-      {IsLoading && filteredOptions.length === 0 && (
-        <div className="multi-select-dropdown-Not-found" style={{ padding: 8 }}>
-          <label className="text-muted">Loading...</label>
-        </div>
-      )}
-    </div>
   );
 
   return (
-    <>
+    <div ref={dropdownRef} className="multi-select-dropdown-container">
-      <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"
+            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">
+                  <span
-                      {label}
+                    key={val}
+                    className="badge badge-selected-item mx-1 mb-1"
+                  >
+                    {found ? found[labelKey] : ""}
                   </span>
                 );
               })
@@ -161,10 +75,56 @@ const SelectMultiple = ({
         </span>
         <i className="bx bx-chevron-down"></i>
       </div>
+
+      {isOpen && (
+        <div className="multi-select-dropdown-options">
+          <div className="multi-select-dropdown-search">
+            <input
+              type="text"
+              placeholder="Search..."
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              className="multi-select-dropdown-search-input"
+            />
           </div>
 
-      {isOpen && createPortal(dropdownElement, document.body)}
+          {filteredOptions.map((item) => {
-    </>
+            const labelVal = item[labelKey];
+            const valueVal = item[valueKey];
+            const isChecked = selectedValues.includes(valueVal);
+
+            return (
+              <div
+                key={valueVal}
+                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>
   );
 };
 

src/pages/Expense/ExpensePage.jsx

@@ -1,107 +1,16 @@
-import React, {
+import React, { createContext, useContext, useState } from "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";
 import GlobalModel from "../../components/common/GlobalModel";
 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,
@@ -121,81 +30,6 @@ const ExpensePage = () => {
     setDocumentView,
   };
 
-  const methods = useForm({
-    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">
@@ -208,136 +42,16 @@ 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 d-flex aligin-items-center">
+              <div className="col-5 col-sm-4">
-                <div
+                <label className="mb-0">
-                  className="dropdown d-inline-block mt-2 align-items-center"
-                  ref={dropdownRef}
-                >
-                  <i
-                    className="bx bx-slider-alt ms-2"
-                    role="button"
-                    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 className="row g-2">
-                            <div className="col-12 ">
-                              <label className="form-label d-block text-secondary">
-                                Select Status
-                              </label>
-                              <div className="d-flex flex-wrap">
-                                {ExpenseStatus.map((status) => (
-                                  <Controller
-                                    key={status.id}
-                                    control={control}
-                                    name="statusIds"
-                                    render={({
-                                      field: { value = [], onChange },
-                                    }) => (
-                                      <div className="d-flex align-items-center me-4 mb-2">
                   <input
-                                          type="checkbox"
+                    type="search"
-                                          className="form-check-input form-check-input-sm"
+                    className="form-control form-control-sm"
-                                          value={status.id}
+                    placeholder="Search Expense..."
-                                          checked={value.includes(status.id)}
+                    aria-controls="DataTables_Table_0"
-                                          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>
+                <i className="bx bx-slider-alt ms-2"></i>
-                                    )}
-                                  />
-                                ))}
-                              </div>
-                            </div>
-                          </div>
-
-                          <div className="row g-2">
-                            <SelectMultiple
-                              name="projectIds"
-                              label="Select Projects"
-                              options={projectNames}
-                              labelKey="name"
-                              valueKey="id"
-                              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 className="col-7 col-sm-8 text-end gap-2">
                 <button
@@ -362,7 +76,7 @@ const ExpensePage = () => {
           </div>
         </div>
 
-        <ExpenseList filters={filters} />
+        <ExpenseList />
         {ManageExpenseModal.IsOpen && (
           <GlobalModel
             isOpen={ManageExpenseModal.IsOpen}