Enterprise construction operations, financial tracking, workforce management, and site intelligence platform.
BuildPro is a modern, high-performance Construction Project Management platform built for project managers, general contractors, site engineers, and financial controllers. It streamlines site operations, tracks multi-billion capital allocations, oversees real-time workforce attendance, monitors material inventories, and delivers actionable project analytics.
- Site Telemetry Banner: Real-time operational pulse, weather conditions, safety index (100% compliance tracking), daily attendance rates, and scheduled material deliveries.
- Top-tier KPI Cards: Active project counters, multi-site capital allocation meters, on-site workforce numbers, and material stock health with month-over-month trend indicators.
- Monthly Expense Distribution: Interactive multi-category spending trends (Materials, Labor, Equipment, Subcontracts) with dynamic timeframe filters (YTD vs. 6-Month view) and custom frosted glass tooltips.
- Budget Allocation Donut: High-fidelity Donut visualization with centered portfolio total, interactive slice inspection, and category progress bars.
- Project Execution & Health: Dual-view tracker comparing physical construction progress against financial budget burn rates with risk warning flags.
- Critical Milestones & Deadlines: Countdown indicators, target handover dates, and task completion metrics.
- Active Project Portfolio: Live project directory with instant search, status filter tabs, client tags, and budget utilization gauges.
- Live Site Activity Feed: Real-time event log tracking ready-mix concrete dispatches, safety sign-offs, and overtime logs.
- Full project lifecycle management (Planning, Active, On Hold, Completed).
- Client details, location geotagging, budget allocation, and schedule tracking.
- Dedicated project sub-spaces for Budget, Materials, Workers, Documents, and Reports.
- Categorized expense logging (Materials, Labor, Equipment, Subcontractor, Permits, Other).
- Real-time budget variance calculation with utilization progress meters and risk warnings.
- Track quantities ordered, used, and warehouse stock remaining.
- Automatic low-stock warning threshold alerts and supplier directory.
- Worker registry with role classifications (Masons, Carpenters, Electricians, Plumbers, Laborers) and wage rates.
- Daily digital attendance marker supporting Present, Absent, Half-Day, and Overtime logs with automatic hour calculations.
- Secure cloud storage for architectural blueprints, structural engineering drawings, permits, and site photographs.
- Dark Enterprise Sidebar: Collapsible, viewport-locked navigation with categorized sections, badge counts, and active glow indicators.
- Header Bar: Omni-search with
⌘Kkeyboard shortcut, quick action drawer (+ New Project,+ Log Material,+ Record Expense), and live notification tray. - Modern Color Palette: High-visibility safety orange/amber accents, deep slate elevations, and clean typography.
| Layer | Technologies |
|---|---|
| Framework | Next.js 16 (App Router, Turbopack) |
| UI Library | React 19, shadcn/ui, Radix UI |
| Styling | Tailwind CSS v4, tw-animate-css |
| Data Visualization | Recharts |
| Icons | Lucide React, React Icons |
| Backend / Database | Supabase (PostgreSQL, Row Level Security, Auth, Storage) |
| Data Fetching | TanStack React Query v5 |
| Forms & Validation | React Hook Form, Zod |
construction-pm/
├── app/
│ ├── layout.tsx # Root HTML & Providers layout
│ ├── page.tsx # Main Executive Dashboard
│ ├── globals.css # Tailwind 4 tokens, glassmorphism & scrollbar styles
│ ├── providers.tsx # React Query & Context providers
│ ├── projects/ # Project listing & creation
│ │ ├── new/ # Create project form
│ │ └── [id]/ # Single project workspace
│ │ ├── budget/ # Budget & expense management
│ │ ├── materials/ # Material inventory & stock
│ │ ├── workers/ # Site workforce & attendance
│ │ ├── documents/ # File attachments & blueprints
│ │ └── reports/ # Project-specific reports
│ └── reports/ # Global portfolio analytics & print reports
├── components/
│ ├── layout/
│ │ ├── dashboard-shell.tsx # Unified app shell wrapper
│ │ ├── sidebar.tsx # Collapsible dark enterprise sidebar
│ │ ├── header.tsx # Omni-search, quick actions, notifications
│ │ └── breadcrumbs.tsx # Route breadcrumbs
│ ├── features/ # Domain-specific chart & list widgets
│ ├── shared/ # StatCard, PageHeader, StatusBadge
│ └── ui/ # shadcn/ui primitive components
├── lib/
│ ├── types.ts # TypeScript interfaces & domain models
│ ├── constants.ts # Navigation items, status definitions
│ ├── mock-data.ts # Initial dataset for demonstration
│ ├── utils.ts # Currency & date formatters, cn helper
│ └── supabase.ts # Supabase client initialization
└── public/ # Static assets & icons
Ensure you have the following installed:
-
Clone the repository:
git clone https://github.com/supunyasanthaofficial/construction-pm.git cd construction-pm -
Install dependencies:
npm install
-
Configure Environment Variables: Create a
.env.localfile in the root directory:NEXT_PUBLIC_SUPABASE_URL=your-supabase-project-url NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
-
Run the Development Server:
npm run dev
-
Open the Application: Navigate to http://localhost:3000 in your browser.
| Command | Description |
|---|---|
npm run dev |
Starts the Next.js development server with Turbopack |
npm run build |
Builds the optimized production application |
npm run start |
Runs the compiled production build |
npm run lint |
Runs ESLint to check for code quality and errors |
This project is licensed under the MIT License.