Add Pending Actions toggle near search box in Expense.

src/pages/Expense/ExpensePage.jsx

@@ -21,6 +21,7 @@ import { useFab } from "../../Context/FabContext";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import {
   CREATE_EXEPENSE,
+  EXPENSE_STATUS,
   VIEW_ALL_EXPNESE,
   VIEW_SELF_EXPENSE,
 } from "../../utils/constants";
@@ -74,6 +75,30 @@ const ExpensePage = () => {
   const [filterData, setFilterdata] = useState(defaultFilter);
   const tableRef = useRef(null);
   const [filteredData, setFilteredData] = useState([]);
+  const [showStatus, setShowStatus] = useState(false);
+
+
+  useEffect(() => {
+    if (showStatus) {
+      // ON → show only draft + payment_processed
+      setFilters((prev) => ({
+        ...prev,
+        statusIds: [
+          EXPENSE_STATUS.daft,
+          EXPENSE_STATUS.payment_processed,
+        ],
+      }));
+    } else {
+      // OFF → show ALL (remove statusIds filter)
+      setFilters((prev) => {
+        const updated = { ...prev };
+        delete updated.statusIds;
+        return updated;
+      });
+    }
+  }, [showStatus]);
+
+
   const removeFilterChip = (key, id) => {
     setFilters((prev) => {
       const updated = { ...prev };
@@ -136,7 +161,9 @@ const ExpensePage = () => {
               <div className="card-body py-2 px-3 me-n1">
                 <div className="row align-items-center">
                   <div className="col-md-8 col-sm-12 mb-2 mb-md-0">
-                    <div className="d-flex align-items-center flex-wrap gap-0">
+                    <div className="d-flex align-items-center flex-wrap gap-2">
+
+                      {/* Search Input */}
                       <input
                         type="search"
                         className="form-control form-control-sm w-auto"
@@ -144,9 +171,25 @@ const ExpensePage = () => {
                         value={searchText}
                         onChange={(e) => setSearchText(e.target.value)}
                       />
+
+                      {/* Status Switch */}
+                      <div className="form-check form-switch ms-1 mt-2 d-flex align-items-center">
+                        <input
+                          className="form-check-input cursor-pointer"
+                          type="checkbox"
+                          id="statusSwitch"
+                          checked={showStatus}
+                          onChange={(e) => setShowStatus(e.target.checked)}
+                        />
+                        <label className="form-check-label ms-2" htmlFor="statusSwitch">
+                          {showStatus ? "Showing: Draft + Payment Processed" : "Showing: All"}
+                        </label>
+                      </div>
+
                     </div>
                   </div>
 
+
                   <div className="col-md-4 col-sm-12 text-md-end text-end d-flex justify-content-end align-items-center gap-0">
                     {IsCreatedAble && (
                       <button