added dropdown mode

src/components/collections/PmGridCollection.jsx

@@ -76,14 +76,12 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => {
         ),
       })),
 
-      // MUST use totalRows only
       total: api.totalEntities,
     };
   };
 
   return (
     <PmsGrid
-      
       columns={columns}
       serverMode
       fetcher={fetcher}
@@ -102,6 +100,19 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => {
         pinning: true,
         IsNumbering: true,
         grouping: true,
+               actions: [
+              {
+                label: "Edit",
+                icon: "bx-edit ",
+                onClick: (row) => console.log("Edit", row),
+              },
+              {
+                label: "Delete",
+                icon: "bx-trash text-danger",
+                onClick: (row) => console.log("Delete", row),
+              },
+           
+            ]
       }}
     />
   );

src/services/pmsGrid/PmsGrid.jsx

@@ -18,6 +18,7 @@ export default function PmsGrid({
   serverMode = false,
   fetcher,
   rowKey = "id",
+  isDropdown = false,
   features = {},
   renderExpanded,
 }) {
@@ -390,7 +391,7 @@ export default function PmsGrid({
             {!loading && groupBy && groupedRows && groupedRows.length > 0
               ? groupedRows.map((g) => (
                   <React.Fragment key={g.key}>
-                    <tr className="table-secondary border-0">
+                    <tr className="table-secondary border-0 tr-group" >
                       <td
                         colSpan={
                           visibleColumns.length +
@@ -529,29 +530,60 @@ export default function PmsGrid({
                 whiteSpace: "nowrap",
               }}
             >
-              <div
+              {isDropdown ? (
-                className="d-inline-flex justify-content-center align-items-center gap-2"
+                <div className="dropdown z-2">
-                style={{ minWidth: "fit-content", padding: "0 4px" }}
+                  <button
-              >
+                    type="button"
-                {Array.isArray(features.actions)
+                    className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
-                  ? features.actions.map((act, i) => (
+                    data-bs-toggle="dropdown"
-                      <button
+                    aria-expanded="false"
-                        key={i}
+                  >
-                        type="button"
+                    <i
-                        className="btn btn-link p-0 border-0"
+                      className="bx bx-dots-vertical-rounded bx-sm text-muted"
-                        title={act.label}
+                      data-bs-toggle="tooltip"
-                        onClick={(e) => {
+                      data-bs-offset="0,8"
-                          e.stopPropagation();
+                      data-bs-placement="top"
-                          act.onClick && act.onClick(row);
+                      data-bs-custom-class="tooltip-dark"
-                        }}
+                      title="More Action"
+                    ></i>
+                  </button>
+                  <ul className="dropdown-menu dropdown-menu-end">
+                    <li>
+                      <a
+                        aria-label="click to  View details"
+                        className="dropdown-item"
                       >
-                        <i className={`bx ${act.icon}`} />
+                        <i className="bx bx-detail me-2"></i>
-                      </button>
+                        <span className="align-left">View details</span>
-                    ))
+                      </a>
-                  : typeof features.actions === "function"
+                    </li>
-                  ? features.actions(row, toggleExpand)
+                  </ul>
-                  : null}
+                </div>
-              </div>
+              ) : (
+                <div
+                  className="d-inline-flex justify-content-center align-items-center gap-2"
+                  style={{ minWidth: "fit-content", padding: "0 4px" }}
+                >
+                  {Array.isArray(features.actions)
+                    ? features.actions.map((act, i) => (
+                        <button
+                          key={i}
+                          type="button"
+                          className="btn btn-link p-0 border-0"
+                          title={act.label}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            act.onClick && act.onClick(row);
+                          }}
+                        >
+                          <i className={`bx ${act.icon}`} />
+                        </button>
+                      ))
+                    : typeof features.actions === "function"
+                    ? features.actions(row, toggleExpand)
+                    : null}
+                </div>
+              )}
             </td>
           )}
         </tr>
@@ -628,4 +660,4 @@ function ColumnVisibilityPanel({ columns, onToggle }) {
     </div>
   );
 }
-// For Full screen - class card card-action card-fullscreen
+// For Full screen - class card card-action card-fullscreen