marco.pms.web/src/services/pmsGrid/BasicTable.jsx

import React, { useEffect ,useRef} from "react";
import { PmsGrid } from "./index";
import { initPopover } from "./GridService";


/**
 * CIVIL BOQ / INVENTORY DEMO DATA
 * Each row = BOQ item, grouped by "Category"
 */
const boqData = [
  {
    id: 1,
    category: "Concrete Works",
    itemCode: "C-001",
    description: "M20 Concrete for foundation",
    unit: "Cum",
    quantity: 120,
    rate: 5200,
    site: "Green City - Tower A",
    vendor: "UltraTech",
    status: "Completed",
  },
  {
    id: 2,
    category: "Concrete Works",
    itemCode: "C-002",
    description: "M25 Concrete for columns",
    unit: "Cum",
    quantity: 80,
    rate: 5600,
    site: "Green City - Tower B",
    vendor: "ACC",
    status: "In Progress",
  },
  {
    id: 3,
    category: "Steel Reinforcement",
    itemCode: "S-101",
    description: "TMT Bars Fe500 (10mm)",
    unit: "MT",
    quantity: 15,
    rate: 64000,
    site: "Skyline Heights - Wing C",
    vendor: "JSW Steel",
    status: "Pending",
  },
  {
    id: 4,
    category: "Steel Reinforcement",
    itemCode: "S-102",
    description: "TMT Bars Fe500 (16mm)",
    unit: "MT",
    quantity: 25,
    rate: 64500,
    site: "Skyline Heights - Wing D",
    vendor: "TATA Steel",
    status: "In Progress",
  },
  {
    id: 5,
    category: "Masonry Works",
    itemCode: "M-001",
    description: "Brick Masonry 230mm thick wall",
    unit: "Sqm",
    quantity: 280,
    rate: 900,
    site: "Sunshine Plaza",
    vendor: "Shree Bricks",
    status: "Completed",
  },
  {
    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",
    unit: "Sqm",
    quantity: 1200,
    rate: 250,
    site: "Skyline Heights",
    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",
  },
];

/**
 * COLUMN DEFINITIONS
 */
const boqColumns = [
  { key: "itemCode", title: "Item Code", sortable: true, pinned: "left" },
  { key: "description", title: "Description", sortable: true, width: 300 },
  { key: "category", title: "Category", sortable: true },
  { key: "unit", title: "Unit", width: 80 },
  { key: "quantity", title: "Qty", sortable: true, width: 100 },
  {
    key: "rate",
    title: "Rate (₹)",
    sortable: true,
    width: 120,
    render: (r) => <span>₹{r.rate.toLocaleString()}</span>,
  },
  {
    key: "amount",
    title: "Amount (₹)",
    sortable: true,
    width: 130,
    render: (r) => (
      <span className="fw-semibold text-success">
        ₹{(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 },
  {
    key: "status",
    title: "Status",
    sortable: true,
    width: 120,
    render: (r) => (
      <span
        className={`badge bg-${
          r.status === "Completed"
            ? "success"
            : r.status === "Pending"
            ? "warning"
            : "info"
        }`}
      >
        {r.status}
      </span>
    ),
  },
];

/**
 * DEMO COMPONENT
 */
export default function DemoBOQGrid() {
useEffect(() => {
    initPopover();
  }, []);
    const wrapperRef = useRef()
    useEffect(() => {
  if (!wrapperRef.current) return;
  const ps = new PerfectScrollbar(wrapperRef.current, {
    wheelPropagation: false,
    suppressScrollX: false,
  });
  return () => ps.destroy();
}, []);
  return (
    <div className="container-fluid py-3">


      <div className="card p-3">
        <PmsGrid
          data={boqData.map((r) => ({
            ...r,
            amount: r.quantity * r.rate,
          }))}
          columns={boqColumns}
          features={{
            search: true,
            selection: true,
            pagination: true,
            export: true,
            pinning: true,
            resizing: true,
            reorder: true,
            columnVisibility: true,
            pageSizeSelector: true,
            // groupByKey: "category",
            aggregation: true,
            expand: true,
            maxHeight: "60vh",
            actions: (row, toggleExpand) => (
              <>
                <button
                  className="btn btn-sm btn-outline-primary"data-bs-toggle="popover" data-bs-content="Popover text"
                  onClick={() => toggleExpand(row.id)}
                >
                  <i className="bx bx-detail me-1"></i>
                  Details
                  
                </button>
              </>
            ),
          }}
          renderExpanded={(row) => (
            <div className="p-3 bg-light border rounded">
              <h6 className="fw-semibold mb-2">Item Details</h6>
              <div className="row small">
                <div className="col-md-4 mb-2">
                  <strong>Item Code:</strong> {row.itemCode}
                </div>
                <div className="col-md-4 mb-2">
                  <strong>Category:</strong> {row.category}
                </div>
                <div className="col-md-4 mb-2">
                  <strong>Unit:</strong> {row.unit}
                </div>
                <div className="col-md-4 mb-2">
                  <strong>Quantity:</strong> {row.quantity}
                </div>
                <div className="col-md-4 mb-2">
                  <strong>Rate:</strong> ₹{row.rate.toLocaleString()}
                </div>
                <div className="col-md-4 mb-2">
                  <strong>Total Amount:</strong>{" "}
                  <span className="text-success fw-semibold">
                    ₹{(row.quantity * row.rate).toLocaleString()}
                  </span>
                </div>
                <div className="col-md-6 mb-2">
                  <strong>Vendor:</strong> {row.vendor}
                </div>
                <div className="col-md-6 mb-2">
                  <strong>Site Location:</strong> {row.site}
                </div>
                <div className="col-md-12">
                  <strong>Status:</strong>{" "}
                  <span
                    className={`badge bg-${
                      row.status === "Completed"
                        ? "success"
                        : row.status === "Pending"
                        ? "warning"
                        : "info"
                    }`}
                  >
                    {row.status}
                  </span>
                </div>
              </div>
            </div>
          )}
        />
      </div>
    </div>
  );
}