added demo data

src/services/pmsGrid/BasicTable.jsx

@@ -7,8 +7,6 @@ import { initPopover } from "./GridService";
  * CIVIL BOQ / INVENTORY DEMO DATA
  * Each row = BOQ item, grouped by "Category"
  */
-
-// ✅ BOQ data
 const boqData = [
   {
     id: 1,
@@ -72,6 +70,18 @@ const boqData = [
   },
   {
     id: 6,
+    category: "Masonry Works",
+    itemCode: "M-002",
+    description: "Block Masonry AAC 200mm wall",
+    unit: "Sqm",
+    quantity: 240,
+    rate: 1100,
+    site: "Green City",
+    vendor: "Ambuja Blocks",
+    status: "Pending",
+  },
+  {
+    id: 7,
     category: "Plastering Works",
     itemCode: "P-001",
     description: "Internal Plaster 12mm thick",
@@ -82,9 +92,47 @@ const boqData = [
     vendor: "L&T Finishes",
     status: "Completed",
   },
+  {
+    id: 8,
+    category: "Plastering Works",
+    itemCode: "P-002",
+    description: "External Plaster 20mm thick",
+    unit: "Sqm",
+    quantity: 800,
+    rate: 320,
+    site: "Sunshine Plaza",
+    vendor: "Hindustan Plaster",
+    status: "In Progress",
+  },
+  {
+    id: 9,
+    category: "Flooring Works",
+    itemCode: "F-001",
+    description: "Vitrified Tiles 600x600mm",
+    unit: "Sqm",
+    quantity: 600,
+    rate: 650,
+    site: "Green City - Clubhouse",
+    vendor: "Kajaria",
+    status: "Pending",
+  },
+  {
+    id: 10,
+    category: "Flooring Works",
+    itemCode: "F-002",
+    description: "Granite Flooring 20mm thick",
+    unit: "Sqm",
+    quantity: 300,
+    rate: 1250,
+    site: "Skyline Heights - Lobby",
+    vendor: "Classic Stone",
+    status: "Completed",
+  },
 ];
 
-// ✅ BOQ columns
+/**
+ * COLUMN DEFINITIONS
+ */
 const boqColumns = [
   { key: "itemCode", title: "Item Code", sortable: true, pinned: "left" },
   { key: "description", title: "Description", sortable: true, width: 300 },
@@ -108,6 +156,11 @@ const boqColumns = [
         ₹{(r.quantity * r.rate).toLocaleString()}
       </span>
     ),
+    aggregate: (vals) =>
+      "₹" +
+      vals
+        .reduce((sum, val) => sum + val, 0)
+        .toLocaleString(),
   },
   { key: "vendor", title: "Vendor", sortable: true, width: 180 },
   { key: "site", title: "Site Location", sortable: true, width: 200 },
@@ -132,11 +185,15 @@ const boqColumns = [
   },
 ];
 
-// ✅ Main component
+/**
+ * DEMO COMPONENT
+ */
 export default function DemoBOQGrid() {
-  const wrapperRef = useRef(null);
+useEffect(() => {
-
+    // 🔥 Initialize Bootstrap popovers after first render
-  // initialize scrollbar
+    initPopover();
+  }, []);
+    const wrapperRef = useRef()
     useEffect(() => {
   if (!wrapperRef.current) return;
   const ps = new PerfectScrollbar(wrapperRef.current, {
@@ -145,29 +202,19 @@ export default function DemoBOQGrid() {
   });
   return () => ps.destroy();
 }, []);
-
-  // initialize bootstrap popover
-  useEffect(() => {
-    initPopover();
-  }, []);
-
   return (
     <div className="container-fluid py-3">
-      <div className="d-flex justify-content-between align-items-center mb-3">
-        <h5 className="fw-semibold">📦 BOQ (Bill of Quantities)</h5>
    <button
         type="button"
         className="btn btn-outline-primary"
         data-bs-toggle="popover"
         data-bs-placement="right"
-          data-bs-content="This is a Bootstrap Popover initialized via CDN!"
+        data-bs-content="This is a popover via CDN!"
       >
-          <i className="bx bx-help-circle"></i> Popover Test
+        Click me
       </button>
-      </div>
 
       <div className="card p-3">
-        <div ref={wrapperRef} style={{ maxHeight: "70vh", overflow: "auto" }}>
         <PmsGrid
           data={boqData.map((r) => ({
             ...r,
@@ -183,18 +230,22 @@ export default function DemoBOQGrid() {
             resizing: true,
             reorder: true,
             columnVisibility: true,
-              expand: true,
+            pageSizeSelector: true,
+            // groupByKey: "category",
             aggregation: true,
+            expand: true,
             maxHeight: "60vh",
             actions: (row, toggleExpand) => (
+              <>
                 <button
-                  className="btn btn-sm btn-outline-primary"
+                  className="btn btn-sm btn-outline-primary"data-bs-toggle="popover" data-bs-content="Popover text"
-                  data-bs-toggle="popover"
-                  data-bs-content={`Expand details for ${row.itemCode}`}
                   onClick={() => toggleExpand(row.id)}
                 >
-                  <i className="bx bx-detail me-1"></i> Details
+                  <i className="bx bx-detail me-1"></i>
+                  Details
+                  
                 </button>
+              </>
             ),
           }}
           renderExpanded={(row) => (
@@ -226,7 +277,7 @@ export default function DemoBOQGrid() {
                   <strong>Vendor:</strong> {row.vendor}
                 </div>
                 <div className="col-md-6 mb-2">
-                    <strong>Site:</strong> {row.site}
+                  <strong>Site Location:</strong> {row.site}
                 </div>
                 <div className="col-md-12">
                   <strong>Status:</strong>{" "}
@@ -248,6 +299,5 @@ export default function DemoBOQGrid() {
         />
       </div>
     </div>
-    </div>
   );
 }