partially added advance filter

src/components/collections/PmGridCollection.jsx

@@ -81,40 +81,42 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => {
   };
 
   return (
-    <PmsGrid
+  <PmsGrid
-      columns={columns}
+  columns={columns}
-      serverMode
+  serverMode
-      fetcher={fetcher}
+  fetcher={fetcher}
-      rowKey="id"
+  rowKey="id"
-      features={{
+  features={{
-        search: true,
+    search: true,
-        pagination: true,
+    pagination: true,
-        pinning: true,
+    pinning: true,
-        resizing: true,
+    resizing: true,
-        selection: false,
+    selection: false,
-        reorder: true,
+    reorder: true,
-        columnVisibility: true,
+    columnVisibility: true,
-        pageSizeSelector: true,
+    pageSizeSelector: true,
-        // groupByKey: "clientSubmitedDate",
+
-        aggregation: true,
+    grouping: true,
-        pinning: true,
+    groupByKey: "clientSubmitedDate",
-        IsNumbering: true,
+
-        grouping: true,
+    aggregation: true,
-               actions: [
+    IsNumbering: true,
-              {
+
-                label: "Edit",
+    actions: [
-                icon: "bx-edit ",
+      {
-                onClick: (row) => console.log("Edit", row),
+        label: "Edit",
-              },
+        icon: "bx-edit ",
-              {
+        onClick: (row) => console.log("Edit", row),
-                label: "Delete",
+      },
-                icon: "bx-trash text-danger",
+      {
-                onClick: (row) => console.log("Delete", row),
+        label: "Delete",
-              },
+        icon: "bx-trash text-danger",
-           
+        onClick: (row) => console.log("Delete", row),
-            ]
+      },
-      }}
+    ],
-    />
+  }}
+/>
+
   );
 };
 

src/services/pmsGrid/PmsGrid.jsx

@@ -57,6 +57,8 @@ export default function PmsGrid({
     expanded,
     toggleExpand,
     setColState,
+    onAdvanceFilters,
+    setAdanceFilter,
   } = grid;
 
   // --- Pin / Unpin helpers ---
@@ -254,14 +256,10 @@ export default function PmsGrid({
             style={{ position: "sticky", top: 0, zIndex: 10 }}
           >
             <tr className="p-2">
-              {features.IsNumbering && (
+              {features.IsNumbering && <th>#</th>}
-                <th>
-                  #
-                </th>
-              )}
               {features.expand && (
                 <th className="text-center ticky-action-column">
-                  <i className='bx bx-collapse-vertical'></i>
+                  <i className="bx bx-collapse-vertical"></i>
                 </th>
               )}
               {features.selection && (
@@ -284,7 +282,7 @@ export default function PmsGrid({
                   />
                 </th>
               )}
-              
+
               {visibleColumns.map((col) => {
                 const style = {
                   minWidth: col.width || 120,
@@ -333,10 +331,12 @@ export default function PmsGrid({
                       <div className="d-flex align-items-center gap-1">
                         {features.pinning && (
                           <PmsHeaderOption
+                            column={col.key}
                             pinned={col.pinned}
                             onPinLeft={() => pinColumn(col.key, "left")}
                             onPinRight={() => pinColumn(col.key, "right")}
                             onUnpin={() => unpinColumn(col.key)}
+                            onAdvancedFilter={setAdanceFilter}
                           />
                         )}
                         {features.resizing && (
@@ -378,9 +378,9 @@ export default function PmsGrid({
               </tr>
             )}
             {!loading && groupBy && groupedRows && groupedRows.length > 0
-              ? groupedRows.map((g,indG) => (
+              ? groupedRows.map((g, indG) => (
                   <React.Fragment key={g.key}>
-                    <tr className="bg-light-primary" >
+                    <tr className="bg-light-primary">
                       <td
                         colSpan={
                           visibleColumns.length +
@@ -400,7 +400,7 @@ export default function PmsGrid({
                           )}
                       </td>
                     </tr>
-                    {g.items.map((row,indG) => renderRow(row,indG))}
+                    {g.items.map((row, indG) => renderRow(row, indG))}
                   </React.Fragment>
                 ))
               : currentRows.map((row, ind) => renderRow(row, ind))}
@@ -450,7 +450,7 @@ export default function PmsGrid({
               <small className="text-secondry">{ind + 1}</small>
             </td>
           )}
-            {/*  Expand toggle next to selection */}
+          {/*  Expand toggle next to selection */}
           {features.expand && (
             <td className="text-center align-middle ">
               <button
@@ -478,8 +478,6 @@ export default function PmsGrid({
             </td>
           )}
 
-        
-
           {/*  Data columns */}
           {visibleColumns.map((col) => {
             const style = {

src/services/pmsGrid/PmsHeaderOption.jsx

@@ -1,101 +1,142 @@
-// const PmsHeaderOption = ({ pinned, onPinLeft, onPinRight, onUnpin }) => {
+import { useState } from "react";
-//   return (
-//     <div className="dropdown z-100">
-//       <button
-//         type="button"
-//         className="btn btn-icon btn-text-secondary rounded-pill p-0"
-//         data-bs-toggle="dropdown"
-//         data-bs-auto-close="outside"
-//         aria-expanded="true"
-//       >
-//         <i className="bx bx-dots-vertical-rounded bx-sm text-muted"></i>
-//       </button>
 
-import { useEffect } from "react";
+const OPERATORS = {
+  number: [
+    { key: "eq", label: "Equals" },
+    { key: "neq", label: "Not Equal" },
+    { key: "gt", label: "Greater Than" },
+    { key: "gte", label: "Greater or Equal" },
+    { key: "less than", label: "Less Than" },
+    { key: "lte", label: "Less or Equal" },
+    { key: "between", label: "Between" },
+  ],
+  text: [
+    { key: "contains", label: "Contains" },
+    { key: "starts", label: "Starts With" },
+    { key: "ends", label: "Ends With" },
+    { key: "eq", label: "Equals" },
+  ],
+  date: [
+    { key: "before", label: "Before" },
+    { key: "after", label: "After" },
+    { key: "between", label: "Between" },
+  ],
+};
 
-//       <ul className="dropdown-menu dropdown-menu-end border shadow rounded-3 py-2">
+// ----------- FILTER UI COMPONENT ----------
-//         <li>
+function AdvanceFilter({ type = "number", onApply, onClear }) {
-//           <button
+  const [operator, setOperator] = useState("");
-//             className={`dropdown-item d-flex align-items-center ${
+  const [value1, setValue1] = useState("");
-//               pinned === "left" ? "active" : ""
+  const [value2, setValue2] = useState("");
-//             }`}
-//             onClick={onPinLeft}
-//           >
-//             <i className="bx bx-pin me-2"></i> Pin Left
-//           </button>
-//         </li>
-//         <li>
-//           <button
-//             className={`dropdown-item d-flex align-items-center ${
-//               pinned === "right" ? "active" : ""
-//             }`}
-//             onClick={onPinRight}
-//           >
-//             <i className="bx bx-pin me-2"></i> Pin Right
-//           </button>
-//         </li>
-//         {pinned && (
-//           <>
-//             <li>
-//               <hr className="dropdown-divider" />
-//             </li>
-//             <li>
-//               <button
-//                 className="dropdown-item text-danger d-flex align-items-center"
-//                 onClick={onUnpin}
-//               >
-//                 <i className="bx bx-x me-2"></i> Unpin Column
-//               </button>
-//             </li>
-//           </>
-//         )}
-//       </ul>
-//     </div>
-//   );
-// };
-// export default PmsHeaderOption;
-const PmsHeaderOption = ({ pinned, onPinLeft, onPinRight, onUnpin }) => {
-  const toggleSubmenu = (e) => {
-    e.stopPropagation();
 
-    const currentSubMenu = e.currentTarget.nextElementSibling;
+  const ops = OPERATORS[type];
-    if (!currentSubMenu) return;
 
-    const allSubMenus = document.querySelectorAll(
+ const apply = () => {
-      ".dropdown-submenu > .dropdown-menu"
+    if (!operator) return;
-    );
 
-    allSubMenus.forEach((menu) => {
+    if (operator === "between") {
-      if (menu !== currentSubMenu) {
+      onApply({
-        menu.classList.remove("show");
+        operator,
-      }
+        from: value1,
-    });
+        to: value2,
-
+      });
-    currentSubMenu.classList.toggle("show");
+    } else {
+      onApply({
+        operator,
+        value: value1,
+      });
+    }
   };
 
-  useEffect(() => {
+  return (
-    const handleOutsideClick = () => {
+    <div
-      const allSubMenus = document.querySelectorAll(
+      className="dropdown p-3"
-        ".dropdown-submenu > .dropdown-menu"
+      onClick={(e) => e.stopPropagation()} // prevent closing menu
-      );
+      style={{ width: 240 }}
+    >
+      {/* Operator Dropdown */}
+      <div className="mb-2">
+        <label className="form-label">Condition</label>
+        <select
+          className="form-select form-select-sm"
+          value={operator}
+          onChange={(e) => setOperator(e.target.value)}
+        >
+          <option value="">Select</option>
+          {ops.map((o) => (
+            <option key={o.key} value={o.key}>
+              {o.label}
+            </option>
+          ))}
+        </select>
+      </div>
 
-      allSubMenus.forEach((menu) => {
+      {/* Values */}
-        menu.classList.remove("show");
+      {operator && (
-      });
+        <div>
-    };
+          <label className="form-label">Value</label>
 
-    document.addEventListener("click", handleOutsideClick);
+          {operator !== "between" ? (
+            <input
+              type={type === "date" ? "date" : "number"}
+              className="form-control form-control-sm"
+              value={value1}
+              onChange={(e) => setValue1(e.target.value)}
+            />
+          ) : (
+            <div className="d-flex gap-2">
+              <input
+                type={type === "date" ? "date" : "number"}
+                className="form-control form-control-sm"
+                placeholder="From"
+                value={value1}
+                onChange={(e) => setValue1(e.target.value)}
+              />
 
-    return () => {
+              <input
-      document.removeEventListener("click", handleOutsideClick);
+                type={type === "date" ? "date" : "number"}
-    };
+                className="form-control form-control-sm"
-  }, []);
+                placeholder="To"
+                value={value2}
+                onChange={(e) => setValue2(e.target.value)}
+              />
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Buttons */}
+      <div className="d-flex justify-content-between mt-3">
+        <button className="btn btn-light btn-sm" onClick={onClear}>
+          Clear
+        </button>
+        <button className="btn btn-primary btn-sm" onClick={apply}>
+          Apply
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// -------- HEADER OPTION ---------------
+const PmsHeaderOption = ({
+  column,
+  pinned,
+  onPinLeft,
+  onPinRight,
+  onUnpin,
+  onAdvancedFilter,
+}) => {
+  const [openMenu, setOpenMenu] = useState(null);
+
+  const toggleMenu = (key, e) => {
+    e.stopPropagation();
+    setOpenMenu((prev) => (prev === key ? null : key));
+  };
 
   return (
     <div className="dropdown" style={{ zIndex: 9999 }}>
       <button
-        type="button"
         className="btn btn-icon btn-text-secondary rounded-pill p-0"
         data-bs-toggle="dropdown"
         data-bs-auto-close="outside"
@@ -103,72 +144,61 @@ const PmsHeaderOption = ({ pinned, onPinLeft, onPinRight, onUnpin }) => {
         <i className="bx bx-dots-vertical-rounded bx-sm text-muted"></i>
       </button>
 
-      <ul className="dropdown-menu dropdown-menu-end border shadow rounded-3 py-2">
+      <ul className="dropdown-menu dropdown-menu-end shadow border rounded-3 py-2">
+        {/* ADVANCED FILTER */}
         <li className="dropdown-submenu dropstart">
           <button
-            type="button"
+            className="dropdown-item d-flex justify-content-between"
-            className="dropdown-item d-flex align-items-center justify-content-between"
+            onClick={(e) => toggleMenu("filter", e)}
-            onClick={toggleSubmenu}
           >
             <span>
-              <i className="bx bx-left-arrow-alt me-2"></i>
+              <i className="bx bx-filter-alt me-2"></i> Filter
-              Move Column
             </span>
             <i className="bx bx-chevron-left"></i>
           </button>
 
-          <ul className="dropdown-menu border shadow rounded-3 py-2">
+          <ul
-            <li>
+            className={`dropdown-menu shadow rounded-3 py-2 p-0 ${
-              <button
+              openMenu === "filter" ? "show" : ""
-                className="dropdown-item d-flex align-items-center"
+            }`}
-                onClick={() => console.log("Move Left")}
+          >
-              >
+            <li className="p-0">
-                <i className="bx bx-arrow-to-left me-2"></i>
+              <AdvanceFilter
-                Move Left
+                type="number"
-              </button>
+                onApply={(f) => onAdvancedFilter({...f,column})}
-            </li>
+                onClear={() => onAdvancedFilter(null)}
-
+              />
-            <li>
-              <button
-                className="dropdown-item d-flex align-items-center"
-                onClick={() => console.log("Move Right")}
-              >
-                <i className="bx bx-arrow-to-right me-2"></i>
-                Move Right
-              </button>
             </li>
           </ul>
         </li>
 
+        {/* PIN COLUMN */}
         <li className="dropdown-submenu dropstart">
           <button
-            type="button"
+            className="dropdown-item d-flex justify-content-between"
-            className="dropdown-item d-flex align-items-center justify-content-between"
+            onClick={(e) => toggleMenu("pin", e)}
-            onClick={toggleSubmenu}
           >
             <span>
               <i className="bx bx-pin me-2"></i> Pin Column
             </span>
-            <i className="bx bx-chevron-right"></i>
+            <i className="bx bx-chevron-left"></i>
           </button>
 
-          <ul className="dropdown-menu border shadow rounded-3 py-2">
+          <ul
+            className={`dropdown-menu shadow rounded-3 py-2 ${
+              openMenu === "pin" ? "show" : ""
+            }`}
+          >
             <li>
-              <button
+              <button className="dropdown-item" onClick={onUnpin}>
-                className="dropdown-item  d-flex align-items-center"
+                {!pinned && <i className="bx bx-check me-2"></i>}
-                onClick={onUnpin}
-              >
-                {pinned !== "left" && pinned !== "right" && (
-                  <i className="bx bx-check me-2"></i>
-                )}
                 No Pin
               </button>
             </li>
+
             <li>
               <button
-                className={`dropdown-item d-flex align-items-center ${
+                className={`dropdown-item ${pinned === "left" ? "active" : ""}`}
-                  pinned === "left" ? "active" : ""
-                }`}
                 onClick={onPinLeft}
               >
                 {pinned === "left" && <i className="bx bx-check me-2"></i>}
@@ -176,9 +206,9 @@ const PmsHeaderOption = ({ pinned, onPinLeft, onPinRight, onUnpin }) => {
               </button>
             </li>
 
-            <li className="d-flex flex-row gap-2">
+            <li>
               <button
-                className={`dropdown-item d-flex align-items-center ${
+                className={`dropdown-item ${
                   pinned === "right" ? "active" : ""
                 }`}
                 onClick={onPinRight}

src/services/pmsGrid/useGridCore.js

@@ -20,6 +20,7 @@ export function useGridCore({
   const [debouncedSearch, setDebouncedSearch] = useState("");
   const [groupBy, setGroupBy] = useState(null);
   const [serverGroupRows, setServerGroupRows] = useState(null);
+  const [onAdvanceFilter, setAdanceFilter] = useState(null);
 
   const [sortBy, setSortBy] = useState({ key: null, dir: "asc" });
   const [selected, setSelected] = useState(new Set());
@@ -74,6 +75,7 @@ export function useGridCore({
 
   // server-side fetch
   const fetchServer = useCallback(async () => {
+    // sorting column wise
     const sortFilters = sortBy.key
       ? [
           {
@@ -83,9 +85,19 @@ export function useGridCore({
         ]
       : [];
 
+    // -----------------------------
+    // 3. ADVANCED FILTERS (NUMERIC FILTER POPOVER)
+    // The grid will pass "filter" already shaped like:
+    // filter = { totalAmount: { type: "gt", value: 200 } }
+    // -----------------------------
+    let advanceFilters = [];
+    if (onAdvanceFilter) {
+      advanceFilters.push(onAdvanceFilter);
+    }
     const filterPayload = JSON.stringify({
       sortFilters,
       groupByColumn: groupBy || null,
+      advanceFilters,
     });
 
     if (!serverMode || typeof fetcher !== "function") return;
@@ -104,7 +116,16 @@ export function useGridCore({
     } finally {
       setLoading(false);
     }
-  }, [serverMode, fetcher, page, pageSize, sortBy, debouncedSearch, groupBy]);
+  }, [
+    serverMode,
+    fetcher,
+    page,
+    pageSize,
+    sortBy,
+    debouncedSearch,
+    groupBy,
+    onAdvanceFilter,
+  ]);
 
   useEffect(() => {
     if (serverMode) fetchServer();
@@ -209,6 +230,8 @@ export function useGridCore({
     setColState,
     groupBy,
     setGroupBy,
+    onAdvanceFilter,
+    setAdanceFilter,
     // data
     rows,