added server side searching and added numbering

src/components/collections/PmGridCollection.jsx

@@ -6,12 +6,18 @@ import { CollectionRepository } from "../../repositories/ColllectionRepository";
 
 const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => {
   const columns = [
-    { key: "invoiceNumber", title: "Invoice Number", className: "text-start" },
+    {
+      key: "invoiceNumber",
+      title: "Invoice Number",
+      className: "text-start",
+      groupable: true,
+    },
     { key: "title", title: "Title", sortable: true, className: "text-start" },
     {
       key: "clientSubmitedDate",
       title: "Submission Date",
       className: "text-start",
+      groupable: true,
     },
     {
       key: "exceptedPaymentDate",
@@ -23,7 +29,6 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => {
     { key: "isActive", title: "Status" },
   ];
 
-  // --- SERVER SIDE FETCHER (correct) ---
   const fetcher = async ({ page, pageSize, search }) => {
     const response = await CollectionRepository.getCollections(
       selectedProject,
@@ -87,6 +92,14 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => {
         pinning: true,
         resizing: true,
         selection: false,
+        reorder: true,
+        columnVisibility: true,
+        pageSizeSelector: true,
+        // groupByKey: "clientSubmitedDate",
+        aggregation: true,
+        pinning: true,
+        IsNumbering: true,
+        grouping: true,
       }}
     />
   );

src/services/pmsGrid/PmsGrid.jsx

@@ -38,6 +38,8 @@ export default function PmsGrid({
     pageSize,
     setPage,
     setPageSize,
+    setGroupBy
+,
     search,
     setSearch,
     selected,
@@ -248,7 +250,12 @@ export default function PmsGrid({
             className="bg-light-secondary border p-2 bg-light rounded"
             style={{ position: "sticky", top: 0, zIndex: 10 }}
           >
-            <tr className="p-3">
+            <tr className="p-2">
+              {features.IsNumbering && (
+                <th>
+                  <h5>#</h5>
+                </th>
+              )}
               {features.selection && (
                 <th
                   style={{ width: 32, position: "sticky", top: 0, zIndex: 10 }}
@@ -404,7 +411,7 @@ export default function PmsGrid({
                     {g.items.map((row) => renderRow(row))}
                   </React.Fragment>
                 ))
-              : currentRows.map((row) => renderRow(row))}
+              : currentRows.map((row, ind) => renderRow(row, ind))}
           </tbody>
         </table>
       </div>
@@ -439,13 +446,18 @@ export default function PmsGrid({
   );
 
   // render a single row (function hoisted so it can reference visibleColumns)
-  function renderRow(row) {
+  function renderRow(row, ind) {
     const isSelected = selected.has(row[rowKey]);
     const isExpanded = expanded.has(row[rowKey]);
 
     return (
       <React.Fragment key={row[rowKey]}>
         <tr>
+          {features.IsNumbering && (
+            <td className="text-center align-middle p-2">
+              <small className="text-secondry">{ind + 1}</small>
+            </td>
+          )}
           {/*  Selection checkbox (always left) */}
           {features.selection && (
             <td className="text-center align-middle p-2">
@@ -593,7 +605,7 @@ function ColumnVisibilityPanel({ columns, onToggle }) {
         className="btn btn-sm btn-outline-secondary"
         data-bs-toggle="dropdown"
       >
-        Columns
+        <i className="bx bx-sm me-2 bx-columns "></i> Columns
       </button>
       <div className="dropdown-menu dropdown-menu-end p-2">
         {columns.map((c) => (

src/services/pmsGrid/useGridCore.js

@@ -17,6 +17,8 @@ export function useGridCore({
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(initialPageSize);
   const [search, setSearch] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const [groupBy, setGroupBy] = useState(null);
   const [sortBy, setSortBy] = useState({ key: null, dir: "asc" });
   const [selected, setSelected] = useState(new Set());
   const [expanded, setExpanded] = useState(new Set());
@@ -27,6 +29,15 @@ export function useGridCore({
   const [loading, setLoading] = useState(false);
   const [serverRows, setServerRows] = useState([]);
 
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearch(search);
+      setPage(1); // Important — when search changes, go back to page 1
+    }, 500);
+
+    return () => clearTimeout(handler);
+  }, [search]);
+
   // client-side derived rows
   const clientFiltered = useMemo(() => {
     if (!data) return [];
@@ -64,14 +75,19 @@ export function useGridCore({
     if (!serverMode || typeof fetcher !== "function") return;
     setLoading(true);
     try {
-      const resp = await fetcher({ page, pageSize, sortBy, search });
+      const resp = await fetcher({
+        page,
+        pageSize,
+        sortBy,
+        search: debouncedSearch,
+      });
       // expected: { rows: [], total }
       setServerRows(resp.rows || []);
       setTotalRows(resp.total || (resp.rows ? resp.rows.length : 0));
     } finally {
       setLoading(false);
     }
-  }, [serverMode, fetcher, page, pageSize, sortBy, search]);
+  }, [serverMode, fetcher, page, pageSize, sortBy, debouncedSearch]);
 
   useEffect(() => {
     if (serverMode) fetchServer();
@@ -164,7 +180,8 @@ export function useGridCore({
     visibleColumns,
     updateColumn,
     setColState,
-
+    groupBy,
+    setGroupBy,
     // data
     rows,