A comprehensive React SPA with json-server backend for managing construction site operations.

• Role-based Access Control: Admin, Site Agent, Engineer, Foreman, Driver Operator, Mason, Casual, Client
• Work Management: Create and track construction works with financial reconciliation
• Site Visits: QC checklists with photo uploads and inspection reports
• Equipment Management: Inventory tracking and assignment to works
• Labour Logging: Daily worker logs with cost tracking
• Financial Management: Expense tracking with work reconciliation
• Real-time Notifications: Client notifications for all significant events
• Timeline Tracking: Event history for each work
• Admin Panel: User management with CRUD operations

• Node.js (v14 or higher)
• npm or yarn

1. Install dependencies:

   npm install

2. Start the json-server backend:

   npm run server

   This starts the API server on http://localhost:3001

3. Start the React development server:

   npm start

   This starts the frontend on http://localhost:3000

4. Or run both simultaneously:

   npm run dev

• Admin: username: admin, password: admin123
• Site Agent: username: agent1, password: agent123
• Client: username: client1, password: client123

• GET /users - Get all users
• POST /users - Create new user

• GET /works - Get all works
• GET /works/:id - Get specific work
• POST /works - Create new work
• PATCH /works/:id - Update work

• GET /siteVisits - Get all site visits
• POST /siteVisits - Create site visit

• GET /equipment - Get all equipment
• PATCH /equipment/:id - Update equipment assignment

• GET /labourLogs - Get all labour logs
• POST /labourLogs - Create labour log

• GET /finances - Get all financial records
• POST /finances - Create financial record

• GET /timeline?workId=:id - Get timeline for specific work
• POST /timeline - Create timeline event

• GET /notifications?userId=:id - Get user notifications
• POST /notifications - Create notification
• PATCH /notifications/:id - Mark notification as read

POST http://localhost:3001/works
Content-Type: application/json

{
  "title": "Foundation Work",
  "description": "Concrete foundation for Building A",
  "clientId": 3,
  "estimatedValue": 50000,
  "startDate": "2024-01-15",
  "endDate": "2024-02-15",
  "status": "in_progress",
  "createdBy": 1,
  "createdAt": "2024-01-10T10:00:00Z"
}

POST http://localhost:3001/siteVisits
Content-Type: application/json

{
  "workId": 1,
  "visitDate": "2024-01-16",
  "inspector": "Site Agent",
  "qcChecklist": {
    "materialQuality": true,
    "safetyCompliance": true,
    "workmanship": false,
    "timelineAdherence": true
  },
  "notes": "Minor workmanship issues noted",
  "photos": ["photo1.jpg"],
  "createdAt": "2024-01-16T14:30:00Z"
}

POST http://localhost:3001/labourLogs
Content-Type: application/json

{
  "workId": 1,
  "date": "2024-01-16",
  "workers": [
    {
      "name": "John Mason",
      "role": "mason",
      "hoursWorked": 8,
      "hourlyRate": 25
    }
  ],
  "totalCost": 200,
  "createdAt": "2024-01-16T18:00:00Z"
}

• Role-based authentication and authorization
• Work creation and management
• Site visits with QC checklists
• Equipment inventory and assignment
• Labour daily logging
• Financial tracking and reconciliation
• Timeline event tracking
• Client notifications system
• Admin panel for user management

• React SPA with functional components and hooks
• json-server backend with db.json
• Fetch API (no axios)
• Role-based route protection
• Frontend financial reconciliation
• Mock authentication for development

• Notifications created for clients at every significant event
• Financial entries automatically reconcile with work values
• Equipment assignment tracking
• Labour costs automatically create financial entries
• Timeline events track all major activities

src/
├── components/          # Reusable components
│   ├── Layout.js       # Main layout with navigation
│   └── ProtectedRoute.js # Route protection
├── pages/              # Page components
│   ├── Login.js        # Authentication
│   ├── Dashboard.js    # Overview and stats
│   ├── Works.js        # Work management
│   ├── SiteVisits.js   # QC and inspections
│   ├── Equipment.js    # Equipment management
│   ├── Labour.js       # Labour logging
│   ├── Finances.js     # Financial reconciliation
│   └── AdminPanel.js   # User management
├── hooks/              # Custom React hooks
│   ├── useAuth.js      # Authentication context
│   └── useNotifications.js # Notifications context
├── utils/              # Utility functions
│   └── api.js          # API calls
└── App.js              # Main application component

• users: User accounts with roles
• works: Construction projects
• siteVisits: QC inspections with checklists
• equipment: Inventory and assignments
• labourLogs: Daily worker logs
• finances: Income and expense tracking
• timeline: Event history
• notifications: User notifications

The system automatically reconciles financial data:

1. Work Estimation vs Actual: Compares estimated work value with actual expenses
2. Category Breakdown: Groups expenses by type (labour, equipment, materials)
3. Variance Analysis: Shows over/under budget status
4. Completion Tracking: Calculates completion percentage based on expenses

Clients receive notifications for:

• Work creation
• Site visit completions
• Timeline updates
• Financial milestones
• Equipment assignments
• Labour activities

This is a development/demo application with:

• Simple password-based authentication
• No encryption or secure token handling
• Mock user roles for demonstration
• Client-side route protection only

For production use, implement:

• JWT tokens or session management
• Password hashing
• Server-side authentication
• HTTPS encryption
• Input validation and sanitization