# Panduan AnzzzStore (Bahasa Indonesia)

Dokumen ini menjelaskan apa yang harus Anda lakukan dari nol sampai situs jalan—khusus untuk yang hosting pakai **Pterodactyl** (biasanya server Node dalam container / egg Node.js).

---

## 1. Yang Wajib Anda Siapkan Dulu

| Hal | Penjelasan singkat |
|-----|-------------------|
| **Akun Supabase** | Database + login + file (gratis tier cukup untuk mulai): [https://supabase.com](https://supabase.com) |
| **Projek Supabase** | Satu project = satu database + satu URL API |
| **Server Pterodactyl** | Egg **Node.js** (atau Docker jika panel Anda pakai image kustom) dengan **Node 20** atau lebih baru |

Situs ini **bukan** PHP—ini **Next.js (Node.js)**. Di Pterodactyl Anda menjalankan `npm run build` lalu `npm run start`.

---

## 2. Supabase: Jalankan Skema Database

1. Buka project Supabase Anda.
2. Menu **SQL Editor** → **New query**.
3. Buka file di komputer Anda: `supabase/schema.sql` (di folder project ini).
4. Salin **seluruh isi** file itu → tempel di SQL Editor → klik **Run**.

Kalau sukses, tabel seperti `profiles`, `products`, `orders`, dll. sudah terbentuk.

**Jadikan akun Anda admin (opsional pertama kali)**

- Setelah Anda daftar/login lewat website, di Supabase buka **Table Editor** → `profiles` → cari baris email Anda → kolom `role` ubah dari `member` jadi `admin`.

---

## 3. Supabase: Login Google / Discord / Facebook

1. Supabase → **Authentication** → **Providers**.
2. Aktifkan **Google**, **Discord**, **Facebook** (isi Client ID & Secret dari masing-masing developer console).
3. **URL redirect** di Google/Facebook/Discord harus sesuai dengan yang Supabase beri (biasanya `https://XXXX.supabase.co/auth/v1/callback`).

**Redirect setelah login ke website Anda**

- Authentication → **URL Configuration** → **Site URL**  
  - Lokal: `http://localhost:3000`  
  - Produksi: `https://domain-anda.com` (ganti dengan domain asli)
- **Redirect URLs**: tambahkan juga:
  - `http://localhost:3000/auth/callback`
  - `https://domain-anda.com/auth/callback`

Kalau ini salah, login OAuth sering gagal atau kembali ke halaman error.

---

## 4. File Environment (.env)

Di **komputer Anda** (dan di **server Pterodactyl**), siapkan variabel lingkungan yang sama.

1. Salin `.env.example` jadi `.env.local` (untuk lokal) **atau** masukkan sebagai **Environment Variables** di panel Pterodactyl.
2. Isi nilainya:

| Variabel | Arti |
|---------|------|
| `NEXT_PUBLIC_SUPABASE_URL` | URL project (Supabase → Settings → API → Project URL) |
| `NEXT_PUBLIC_SUPABASE_ANON_KEY` | Kunci **anon** / public (bukan service_role) |
| `NEXT_PUBLIC_ADMIN_WA_PHONE` | Nomor WhatsApp admin, **angka saja**, contoh: `6281234567890` |
| `NEXT_PUBLIC_SITE_URL` | **Alamat situs yang user buka di browser** | Contoh lokal: `http://localhost:3000` • Produksi: `https://domain-anda.com` |

**Catatan:** Yang diawali `NEXT_PUBLIC_` akan ikut ke kode di browser. **Jangan** taruh `service_role` di sana.

---

## 5. Jalankan di Komputer (Cek Dulu Sebelum Upload)

Di folder project:

```bash
npm install
npm run build
npm run start
```

Buka browser: `http://localhost:3000` (atau port yang terminal tunjukkan).

---

## 6. Deploy di Pterodactyl (Ringkas)

Setiap panel bisa sedikit beda, tapi pola umumnya:

### A. Upload Kode

- Upload isi project (bisa zip, Git pull, SFTP) ke folder server game yang Pterodactyl buat (misalnya `/home/container`).

### B. Variabel Lingkungan di Panel

Di Pterodactyl, tab **Startup** / **Variables** / **Environment**:

- Tambahkan keempat variabel di bagian 4 (sama seperti `.env`).
- Panel sering memberi **PORT** otomatis. Next.js akan membaca env `PORT`. **Jangan** kerasukan port manual di kode kecuali dokumentasi panel Anda minta begitu.

### C. Perintah Build & Start

**Sekali setelah upload / update kode:**

```bash
npm install
npm run build
```

**Setiap server dinyalakan (startup):**

```bash
npm run start
```

Atau jika Anda ingin eksplisit (Linux):

```bash
npx next start -H 0.0.0.0
```

`-H 0.0.0.0` penting agar proses **bisa diakses** dari luar container (reverse proxy / allocation port panel).

### D. Port & Reverse Proxy

- Di Pterodactyl, biasanya ada **Primary Port** / allocation. Pastikan process Next.js **mendengarkan port yang sama** dengan yang panel set (umumnya lewat env `PORT`).
- Kalau ada nginx / reverse proxy di depan, arahkan ke IP:port internal tersebut.

### E. Domain & HTTPS

Supabase OAuth butuh URL situs yang konsisten. Setelah pakai domain:

- Ubah `NEXT_PUBLIC_SITE_URL` jadi `https://domain-anda.com`
- Tambahkan URL callback di Supabase (lihat bagian 3)
- **Rebuild** setelah mengubah env: `npm run build` lalu start lagi

---

## 7. Kalau Ada Error

| Gejala | Cek |
|--------|-----|
| Login Google error | Redirect URL di Supabase + di konsol Google/Facebook/Discord |
| Data produk tidak muncul | Apakah SQL `schema.sql` sudah dijalankan? Env URL/key benar? |
| Halaman kosong / 500 | `npm run build` di server: ada error? Log Pterodactyl |
| Tidak bisa akses dari luar | Bind host `0.0.0.0` + port allocation benar |

---

## 8. Storage (Foto Profil) — Opsional

Kalau nanti Anda pakai upload avatar ke Supabase Storage: buat bucket `avatars` dan atur policy di Supabase **Storage** (bukan hanya SQL). Petunjuk ringkas ada di komentar dalam `supabase/schema.sql`.

---

Selamat deploy. Kalau satu langkah mentok, catat **pesan error persis** dari log Pterodactyl dan dari browser (F12 → Console) supaya mudah dilacak.