# GIS Portal & Sinergi Umat Dashboard

Proyek ini adalah portal Sistem Informasi Geografis (GIS) terintegrasi yang menggabungkan visualisasi peta spasial Pontianak dengan sistem dasbor manajemen kesejahteraan masyarakat (Sinergi Umat).

---

## 🏛️ Komponen Proyek

1. **Portal Utama GIS (PHP + Apache)**:
   - Visualisasi Lokasi SPBU (`spbu-map`)
   - Visualisasi Parsil Tanah (`parsil-tanah`)
   - Peta Kloroplet (`chloropleth`)
2. **Dasbor Sinergi Umat (`sistem-km-next`)**:
   - Aplikasi berbasis Next.js untuk pemetaan rumah ibadah (Mosque, Church, Vihara, Temple) dan survei kesejahteraan Keluarga Penerima Manfaat (KPM).
3. **Database MySQL**:
   - Penyimpanan data SPBU, parsil, dan kloroplet.
4. **Supabase**:
   - Backend auth dan database real-time untuk data rumah ibadah, data keluarga (households), transaksi donasi, dan approval queue di Sinergi Umat.

---

## 🐳 Opsi 1: Menjalankan Menggunakan Docker (Direkomendasikan)

Dengan Docker Compose, seluruh aplikasi portal PHP, dasbor Next.js, MySQL database, dan phpMyAdmin akan dijalankan otomatis dalam kontainer yang saling terhubung.

### Prasyarat
- Sudah menginstal **Docker Desktop** di komputer Anda.

### Langkah-langkah
1. Buka terminal/command prompt pada **direktori root** proyek (`gis-portal` / folder tempat `docker-compose.yaml` berada).
2. Jalankan perintah berikut untuk mengunduh, membuat build image, dan menjalankan kontainer secara background:
   ```bash
   docker compose up -d --build
   ```
3. Setelah proses build selesai dan container berjalan (`healthy`), Anda dapat mengakses layanan berikut di browser Anda:
   - **Portal Utama GIS (PHP, SPBU, Parsil, Kloroplet)**: [http://localhost:8080](http://localhost:8080)
   - **Dasbor Sinergi Umat (Next.js)**: [http://localhost:3000](http://localhost:3000)
   - **phpMyAdmin (Manajemen Database MySQL)**: [http://localhost:8085](http://localhost:8085)
   - **MySQL Database**: Berjalan di port `3306` (host: `localhost`, user: `root`, password: `rootpassword`, database: `spbu_db`).

### Catatan Penting Docker:
- Data MySQL disimpan secara persisten di volume docker `db-data`.
- Skema awal database otomatis di-import saat database pertama kali di-boot dari berkas `./docker/db/init.sql`.

---

## 🔧 Opsi 2: Menjalankan Tanpa Docker (Manual)

Jika ingin menjalankan aplikasi secara langsung di sistem lokal Anda tanpa menggunakan kontainer Docker.

### Prasyarat
- **Web Server Lokal** (seperti Laragon atau XAMPP) yang mendukung PHP (min v8.1) dan MySQL.
- **Node.js** (min v18 atau v20) terinstal pada komputer Anda.

### Langkah-langkah Setup Manual:

#### 1. Setup Database MySQL Lokal
1. Pastikan server MySQL lokal Anda (Laragon/XAMPP) sudah menyala.
2. Buat database baru bernama `spbu_db` melalui phpMyAdmin lokal Anda.
3. Import berkas SQL skema awal yang terletak di `docker/db/init.sql` ke dalam database `spbu_db` tersebut.

#### 2. Jalankan Portal GIS Utama (PHP App)
1. Pindahkan atau hubungkan (symlink) seluruh folder proyek `gis-portal` ke direktori root web server Anda:
   - Untuk **Laragon**: taruh di `C:\laragon\www\gis-portal`
   - Untuk **XAMPP**: taruh di `C:\xampp\htdocs\gis-portal`
2. Konfigurasi koneksi database PHP berada di berkas:
   - `spbu-map/db.php`
   - `parsil-tanah/db.php`
   *(Secara default, skrip PHP akan otomatis terhubung ke localhost dengan database `spbu_db`, user `root`, dan password kosong `""`)*.
3. Akses portal utama melalui browser Anda di:
   - Laragon: [http://gis-portal.test](http://gis-portal.test)
   - XAMPP: [http://localhost/gis-portal](http://localhost/gis-portal)

#### 3. Jalankan Dasbor Sinergi Umat (Next.js App)
1. Buka terminal Anda dan masuk ke direktori Next.js:
   ```bash
   cd sistem-km-next
   ```
2. Instal pustaka ketergantungan (dependencies) dengan perintah:
   ```bash
   npm install
   ```
3. Pastikan berkas `.env.local` sudah ada di dalam folder `sistem-km-next` dan berisi kredensial Supabase berikut (sudah otomatis disertakan dalam berkas zip):
   ```env
   NEXT_PUBLIC_SUPABASE_URL=https://gzpvygrsfdtzykyqbnes.supabase.co
   NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
   SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
   ```
4. Jalankan server pengembangan Next.js lokal:
   ```bash
   npm run dev
   ```
5. Buka browser Anda dan akses dasbor Sinergi Umat di [http://localhost:3000](http://localhost:3000).

---

## 💾 Struktur Folder Proyek

```text
gis-portal/
├── chloropleth/               # Fitur peta kloroplet Pontianak (PHP/HTML/JS)
├── docker/                    # Konfigurasi Dockerfile untuk php, nextjs, & db
│   ├── db/
│   │   └── init.sql           # Database schema SQL init
│   ├── nextjs/
│   └── php/
├── parsil-tanah/              # Fitur peta parsil tanah (PHP/HTML/JS)
├── sistem-km-next/            # Dasbor Sinergi Umat (Next.js App)
│   ├── src/
│   └── README.md              # Dokumentasi ini
├── spbu-map/                  # Fitur peta sebaran SPBU (PHP/HTML/JS)
├── docker-compose.yaml        # Main configuration file Docker
├── docker-compose.override.yaml # Local override config (Port mapping & bind mounts)
├── index.html                 # Halaman Beranda / Gateway Portal GIS
└── README.md -> sistem-km-next/README.md
```