# Smart Land Management Web (Next.js + Bootstrap)

Modern Bootstrap interface for land plot registration with map boundary drawing and beacon linking.

## Stack

- Next.js (App Router, static export)
- Bootstrap 5
- Leaflet map + centroid/area calculation
- Firebase Firestore + Anonymous Auth
- Firebase Realtime Database listener for RFID scans (`rfidScans/latest`)

## Project Structure

```text
web/
  app/
    globals.css
    layout.js
    page.js
  components/
    LandRegistryApp.js
  lib/
    firebase.js
  public/
  firebase.json
  firestore.rules
  firestore.indexes.json
  database.rules.json
  package.json
  next.config.mjs
  .env.local.example
```

## Setup

1. Install dependencies:

```bash
npm install
```

2. Create `.env.local` from `.env.local.example` and set your Firebase values (including `NEXT_PUBLIC_FIREBASE_DATABASE_URL`).

3. Run locally:

```bash
npm run dev
```

Open `http://localhost:3000`.

## Build + Deploy to Firebase Hosting

1. Build static output:

```bash
npm run build
```

2. Deploy:

```bash
firebase deploy --only hosting,firestore --project water-monitoring-74d04
```

## Notes

- The app saves plot documents to `plots/{plotId}` and appends audit events to `plotEvents`.
- Beacon IDs are sourced from ESP RFID scans at Realtime Database path `rfidScans/latest` (no manual beacon entry in UI).
- `firestore.rules` is currently permissive for rapid testing; tighten rules before production rollout.