import React, { useEffect, useRef } from "react"; import { PmsGrid } from "./index"; import { initPopover } from "./GridService"; import PmsHeaderOption from "./PmsHeaderOption"; /** * 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", }, { id: 11, category: "Electrical Works", itemCode: "E-001", description: "PVC Conduit 25mm dia", unit: "Mtr", quantity: 1500, rate: 45, site: "Eco Towers", vendor: "Finolex", status: "In Progress", }, { id: 12, category: "Electrical Works", itemCode: "E-002", description: "Copper Wire 4 sqmm", unit: "Mtr", quantity: 2000, rate: 65, site: "Skyline Heights", vendor: "Polycab", status: "Completed", }, { id: 13, category: "Plumbing Works", itemCode: "PL-001", description: "CPVC Pipe 25mm dia", unit: "Mtr", quantity: 1000, rate: 120, site: "Green City - Tower C", vendor: "Astral Pipes", status: "Pending", }, { id: 14, category: "Plumbing Works", itemCode: "PL-002", description: "UPVC Pipe 40mm dia", unit: "Mtr", quantity: 800, rate: 100, site: "Sunshine Plaza", vendor: "Supreme Industries", status: "In Progress", }, { id: 15, category: "Painting Works", itemCode: "PA-001", description: "Interior Emulsion Paint", unit: "Ltr", quantity: 500, rate: 180, site: "Skyline Heights", vendor: "Asian Paints", status: "Completed", }, { id: 16, category: "Painting Works", itemCode: "PA-002", description: "Exterior Weatherproof Paint", unit: "Ltr", quantity: 400, rate: 220, site: "Green City - Tower D", vendor: "Berger Paints", status: "Pending", }, { id: 17, category: "Waterproofing Works", itemCode: "W-001", description: "Cementitious Coating 2 layers", unit: "Sqm", quantity: 350, rate: 480, site: "Sunshine Plaza", vendor: "Dr. Fixit", status: "Completed", }, { id: 18, category: "Waterproofing Works", itemCode: "W-002", description: "Polyurethane Waterproofing Membrane Polyurethane Waterproofing Membrane", unit: "Sqm", quantity: 200, rate: 850, site: "Green City - Podium", vendor: "Pidilite", status: "In Progress", }, { id: 19, category: "HVAC Works", itemCode: "H-001", description: "Ducting for AHU system", unit: "Sqm", quantity: 250, rate: 2100, site: "Skyline Heights - Basement", vendor: "Blue Star", status: "Pending", }, { id: 20, category: "HVAC Works", itemCode: "H-002", description: "VRF Indoor Unit Installation", unit: "Nos", quantity: 30, rate: 42000, site: "Eco Towers", vendor: "Daikin", status: "Completed", }, { id: 21, category: "Plumbing Works", itemCode: "PL-003", description: "CP Fittings - Wash Basin Mixer", unit: "Nos", quantity: 50, rate: 950, site: "Skyline Heights", vendor: "Jaquar", status: "Completed", }, { id: 22, category: "Electrical Works", itemCode: "E-003", description: "LED Downlight 12W", unit: "Nos", quantity: 120, rate: 750, site: "Green City - Tower B", vendor: "Philips", status: "Pending", }, { id: 23, category: "Flooring Works", itemCode: "F-003", description: "Wooden Flooring 12mm laminate", unit: "Sqm", quantity: 150, rate: 1450, site: "Sunshine Plaza - Office", vendor: "Pergo", status: "In Progress", }, { id: 24, category: "Concrete Works", itemCode: "C-003", description: "PCC 1:4:8 flooring", unit: "Cum", quantity: 60, rate: 4800, site: "Eco Towers", vendor: "RMC Readymix", status: "Completed", }, { id: 25, category: "Masonry Works", itemCode: "M-003", description: "Stone masonry in foundation", unit: "Cum", quantity: 45, rate: 3500, site: "Green City - Tower C", vendor: "Shree Bricks", status: "In Progress", }, { id: 26, category: "Carpentry Works", itemCode: "CP-001", description: "Flush Door with Laminate Finish", unit: "Nos", quantity: 80, rate: 6500, site: "Skyline Heights", vendor: "Greenply", status: "Completed", }, { id: 27, category: "Carpentry Works", itemCode: "CP-002", description: "Modular Kitchen Cabinets", unit: "Set", quantity: 25, rate: 42000, site: "Sunshine Plaza", vendor: "Godrej Interio", status: "Pending", }, { id: 28, category: "Glazing Works", itemCode: "G-001", description: "Aluminium Window Frame with Glass", unit: "Sqm", quantity: 180, rate: 1850, site: "Green City - Tower D", vendor: "Saint Gobain", status: "In Progress", }, { id: 29, category: "Glazing Works", itemCode: "G-002", description: "Toughened Glass Door 12mm", unit: "Sqm", quantity: 60, rate: 2750, site: "Skyline Heights - Lobby", vendor: "Modiguard", status: "Completed", }, { id: 30, category: "External Development", itemCode: "ED-001", description: "Paver Block 60mm thick", unit: "Sqm", quantity: 950, rate: 380, site: "Sunshine Plaza", vendor: "Ultra Pavers", status: "Pending", }, { id: 31, category: "External Development", itemCode: "ED-002", description: "Kerb Stone 300x300mm", unit: "Rm", quantity: 200, rate: 240, site: "Green City - Parking Area", vendor: "L&T Infra", status: "Completed", }, { id: 32, category: "Electrical Works", itemCode: "E-004", description: "Distribution Board with MCB", unit: "Nos", quantity: 25, rate: 6200, site: "Skyline Heights", vendor: "Legrand", status: "In Progress", }, { id: 33, category: "Plastering Works", itemCode: "P-003", description: "Ceiling POP Finish", unit: "Sqm", quantity: 950, rate: 210, site: "Green City - Tower A", vendor: "L&T Finishes", status: "Completed", }, { id: 34, category: "Painting Works", itemCode: "PA-003", description: "Metal Primer + Enamel Paint", unit: "Ltr", quantity: 350, rate: 160, site: "Sunshine Plaza - Basement", vendor: "Nerolac Paints", status: "In Progress", }, { id: 35, category: "HVAC Works", itemCode: "H-003", description: "Duct Insulation 50mm thick", unit: "Sqm", quantity: 120, rate: 540, site: "Eco Towers", vendor: "Blue Star", status: "Pending", }, { id: 36, category: "Plumbing Works", itemCode: "PL-004", description: "Overhead Water Tank Installation", unit: "Nos", quantity: 3, rate: 45000, site: "Green City - Tower B", vendor: "Sintex", status: "Completed", }, { id: 37, category: "Electrical Works", itemCode: "E-005", description: "Earthing Pit with GI Plate", unit: "Nos", quantity: 6, rate: 9500, site: "Skyline Heights", vendor: "KEI", status: "Completed", }, { id: 38, category: "Concrete Works", itemCode: "C-004", description: "M30 Concrete for beams", unit: "Cum", quantity: 95, rate: 5800, site: "Eco Towers - Basement", vendor: "RMC Readymix", status: "In Progress", }, { id: 39, category: "Masonry Works", itemCode: "M-004", description: "Cement Mortar 1:4 plaster backing", unit: "Sqm", quantity: 700, rate: 180, site: "Skyline Heights - Wing E", vendor: "Ambuja Blocks", status: "Completed", }, { id: 40, category: "Flooring Works", itemCode: "F-004", description: "Marble Flooring 20mm thick", unit: "Sqm", quantity: 260, rate: 2100, site: "Green City - Tower D", vendor: "Classic Stone", status: "Pending", }, { id: 41, category: "Carpentry Works", itemCode: "CP-003", description: "Wardrobe with Laminate Finish", unit: "Nos", quantity: 40, rate: 18500, site: "Sunshine Plaza", vendor: "Durian", status: "Completed", }, { id: 42, category: "Glazing Works", itemCode: "G-003", description: "Spider Glass Façade System", unit: "Sqm", quantity: 150, rate: 3550, site: "Eco Towers", vendor: "Saint Gobain", status: "In Progress", }, { id: 43, category: "Waterproofing Works", itemCode: "W-003", description: "Bituminous Membrane Layer 3mm", unit: "Sqm", quantity: 400, rate: 620, site: "Skyline Heights - Terrace", vendor: "Dr. Fixit", status: "Completed", }, { id: 44, category: "External Development", itemCode: "ED-003", description: "RCC Drain Construction", unit: "Rm", quantity: 180, rate: 950, site: "Green City - Service Road", vendor: "L&T Infra", status: "In Progress", }, { id: 45, category: "Electrical Works", itemCode: "E-006", description: "Street Light Pole 9m", unit: "Nos", quantity: 25, rate: 18500, site: "Sunshine Plaza - Entry Road", vendor: "Polycab", status: "Pending", }, { id: 46, category: "Painting Works", itemCode: "PA-004", description: "Texture Finish Coating", unit: "Sqm", quantity: 320, rate: 480, site: "Green City - Clubhouse", vendor: "Asian Paints", status: "In Progress", }, { id: 47, category: "Flooring Works", itemCode: "F-005", description: "Epoxy Flooring 3mm thick", unit: "Sqm", quantity: 150, rate: 850, site: "Skyline Heights - Basement", vendor: "Pidilite", status: "Completed", }, { id: 48, category: "Plumbing Works", itemCode: "PL-005", description: "Bathroom CP fittings set", unit: "Set", quantity: 40, rate: 5400, site: "Eco Towers", vendor: "Hindware", status: "Completed", }, { id: 49, category: "Concrete Works", itemCode: "C-005", description: "Ready Mix M40 Concrete", unit: "Cum", quantity: 60, rate: 6100, site: "Green City - Tower E", vendor: "ACC", status: "Pending", }, { id: 50, category: "External Development", itemCode: "ED-004", description: "Compound Wall RCC Precast", unit: "Rm", quantity: 300, rate: 1750, site: "Sunshine Plaza - Boundary", vendor: "UltraTech", status: "Completed", }, ]; /** * COLUMN DEFINITIONS */ const boqColumns = [ { key: "itemCode", title: "Item Code", sortable: true, pinned: "left", className: "text-start", }, { key: "description", title: "Description", sortable: true, width: 300, className: "text-start", }, { key: "category", title: "Category", sortable: true, className: "text-start", }, { key: "unit", title: "Unit", width: 80, className: "text-ceter" }, { key: "quantity", title: "Qty", sortable: true, width: 100, className: "text-cnter px-2", }, { key: "rate", title: "Rate (₹)", sortable: true, width: 120, className: "text-end", render: (r) => ₹{r.rate.toLocaleString()}, }, { key: "amount", title: "Amount (₹)", sortable: true, width: 130, className: "text-end", render: (r) => ( ₹{(r.quantity * r.rate).toLocaleString()} ), aggregate: (vals) => "₹" + vals.reduce((sum, val) => sum + val, 0).toLocaleString(), }, { key: "vendor", title: "Vendor", sortable: true, width: 180, className: "text-start", }, { key: "site", title: "Site Location", sortable: true, width: 200, className: "text-start", }, { key: "status", title: "Status", sortable: true, width: 120, className: "text-center", render: (r) => ( {r.status} ), }, ]; /** * 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(); }, []); const container = document.getElementById("mainContainer"); const trigger = document.getElementById("dropdownBtn"); const dropdown = document.getElementById("dropdownMenu"); return (
({ ...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: "status", aggregation: true, expand: true, maxHeight: "70vh", actions: [ { label: "Edit", icon: "bx-edit ", onClick: (row,ind,column) => console.log("Edit", row,ind,column), }, { label: "Delete", icon: "bx-trash text-danger", onClick: (row) => console.log("Delete", row), }, ], }} renderExpanded={(row) => (
Item Details
Item Code: {row.itemCode}
Category: {row.category}
Unit: {row.unit}
Quantity: {row.quantity}
Rate: ₹{row.rate.toLocaleString()}
Total Amount:{" "} ₹{(row.quantity * row.rate).toLocaleString()}
Vendor: {row.vendor}
Site Location: {row.site}
Status:{" "} {row.status}
)} />
); }