commit ab112c1c5b372df9876cbe89e8a245986b082f64
Author: Dita Aji Pratama <ditaajipratama@protonmail.com>
Date:   Mon Jun 8 17:11:32 2026 +0700

    First commit

diff --git a/API_DOCS.md b/API_DOCS.md
new file mode 100644
index 0000000..7f6d56a
--- /dev/null
+++ b/API_DOCS.md
@@ -0,0 +1,357 @@
+# 📖 API Enroll Documentation
+
+**Base URL:** `http://localhost:8080`
+
+**Endpoint:** `/api/enroll`
+
+Seluruh operasi CRUD dilakukan melalui **satu endpoint** ini, cukup dengan `GET` dan `POST`.
+
+---
+
+## 🔐 Authentication
+
+Semua request ke `/api/enroll` **wajib** menyertakan header:
+
+```
+Authorization: Bearer <token>
+```
+
+| Info        | Nilai        |
+|-------------|--------------|
+| Token default | `secret123` |
+| Letak config  | `app.py` → variabel `API_TOKEN` |
+
+**Response `401 Unauthorized`** (tanpa header)
+
+```json
+{
+  "error": "missing or invalid Authorization header"
+}
+```
+
+**Response `401 Unauthorized`** (token salah)
+
+```json
+{
+  "error": "invalid token"
+}
+```
+
+---
+
+## 📊 Database Schema
+
+| Kolom     | Tipe    | Keterangan                                              |
+|-----------|---------|---------------------------------------------------------|
+| `id`      | INTEGER | Primary key, auto-increment                             |
+| `type`    | TEXT    | Tipe enrollment — **hanya boleh `Annually` atau `Monthly`** |
+| `service` | TEXT    | Paket layanan — **hanya boleh `Lite`, `Value`, atau `Pro`** |
+| `user`    | TEXT    | Nama pengguna (contoh: `alice`)                         |
+
+---
+
+## 🏠 Routes
+
+| Route          | Method | Auth | Fungsi                         |
+|----------------|--------|------|--------------------------------|
+| `/`            | GET    | ❌   | Halaman playground (UI web)    |
+| `/api/enroll`  | GET    | ✅   | List / Detail enrollment       |
+| `/api/enroll`  | POST   | ✅   | Add / Edit / Remove enrollment |
+
+---
+
+## 1️⃣ List — Mendapatkan semua data
+
+**Request**
+
+```
+GET /api/enroll
+Authorization: Bearer secret123
+```
+
+**Contoh curl**
+
+```bash
+curl -H "Authorization: Bearer secret123" \
+  http://localhost:8080/api/enroll
+```
+
+**Response `200 OK`**
+
+```json
+{
+  "data": [
+    {
+      "id": 2,
+      "type": "Monthly",
+      "service": "Lite",
+      "user": "bob"
+    },
+    {
+      "id": 1,
+      "type": "Annually",
+      "service": "Pro",
+      "user": "alice"
+    }
+  ]
+}
+```
+
+---
+
+## 2️⃣ Detail — Mendapatkan satu data
+
+**Request**
+
+```
+GET /api/enroll?id=<id>
+Authorization: Bearer secret123
+```
+
+**Parameter Query**
+
+| Parameter | Tipe    | Wajib | Keterangan    |
+|-----------|---------|-------|---------------|
+| `id`      | integer | ✅    | ID enrollment |
+
+**Contoh curl**
+
+```bash
+curl -H "Authorization: Bearer secret123" \
+  http://localhost:8080/api/enroll?id=1
+```
+
+**Response `200 OK`**
+
+```json
+{
+  "data": {
+    "id": 1,
+    "type": "Annually",
+    "service": "Pro",
+    "user": "alice"
+  }
+}
+```
+
+**Response `404 Not Found`**
+
+```json
+{
+  "error": "not found"
+}
+```
+
+---
+
+## 3️⃣ Add — Menambah data baru
+
+**Request**
+
+```
+POST /api/enroll
+Authorization: Bearer secret123
+Content-Type: application/x-www-form-urlencoded
+```
+
+**Form Data**
+
+| Field     | Tipe   | Wajib | Keterangan                                              |
+|-----------|--------|-------|---------------------------------------------------------|
+| `type`    | string | ✅    | **Hanya boleh `Annually` atau `Monthly`**               |
+| `service` | string | ✅    | **Hanya boleh `Lite`, `Value`, atau `Pro`**             |
+| `user`    | string | ✅    | Nama pengguna                                           |
+
+> ⚠️ Jangan kirim field `id` — kalau `id` terkirim, ini akan dianggap **Edit**.
+
+**Contoh curl**
+
+```bash
+curl -X POST http://localhost:8080/api/enroll \
+  -H "Authorization: Bearer secret123" \
+  -d "type=Annually" \
+  -d "service=Pro" \
+  -d "user=alice"
+```
+
+**Response `201 Created`**
+
+```json
+{
+  "message": "created",
+  "id": 1
+}
+```
+
+**Response `400 Bad Request`** (type/service tidak valid)
+
+```json
+{
+  "error": "type must be one of: Annually, Monthly"
+}
+```
+
+```json
+{
+  "error": "service must be one of: Lite, Value, Pro"
+}
+```
+
+---
+
+## 4️⃣ Edit — Mengubah data yang sudah ada
+
+**Request**
+
+```
+POST /api/enroll
+Authorization: Bearer secret123
+Content-Type: application/x-www-form-urlencoded
+```
+
+**Form Data**
+
+| Field     | Tipe    | Wajib | Keterangan                                              |
+|-----------|---------|-------|---------------------------------------------------------|
+| `id`      | integer | ✅    | ID yang ingin diubah                                    |
+| `type`    | string  | ✅    | **Hanya boleh `Annually` atau `Monthly`** (baru)        |
+| `service` | string  | ✅    | **Hanya boleh `Lite`, `Value`, atau `Pro`** (baru)      |
+| `user`    | string  | ✅    | Nama pengguna (baru)                                    |
+
+> 💡 Cukup sertakan `id` pada form POST, sistem otomatis tahu ini adalah operasi **Edit**.
+
+**Contoh curl**
+
+```bash
+curl -X POST http://localhost:8080/api/enroll \
+  -H "Authorization: Bearer secret123" \
+  -d "id=1" \
+  -d "type=Monthly" \
+  -d "service=Value" \
+  -d "user=bob"
+```
+
+**Response `200 OK`**
+
+```json
+{
+  "message": "updated",
+  "id": 1
+}
+```
+
+**Response `400 Bad Request`** (type/service tidak valid)
+
+```json
+{
+  "error": "type must be one of: Annually, Monthly"
+}
+```
+
+```json
+{
+  "error": "service must be one of: Lite, Value, Pro"
+}
+```
+
+---
+
+## 5️⃣ Remove — Menghapus data
+
+**Request**
+
+```
+POST /api/enroll
+Authorization: Bearer secret123
+Content-Type: application/x-www-form-urlencoded
+```
+
+**Form Data**
+
+| Field     | Tipe    | Wajib | Keterangan                                  |
+|-----------|---------|-------|---------------------------------------------|
+| `id`      | integer | ✅    | ID yang ingin dihapus                       |
+| `action`  | string  | ✅    | Harus bernilai `"remove"` (sebagai penanda) |
+
+**Contoh curl**
+
+```bash
+curl -X POST http://localhost:8080/api/enroll \
+  -H "Authorization: Bearer secret123" \
+  -d "id=1" \
+  -d "action=remove"
+```
+
+**Response `200 OK`**
+
+```json
+{
+  "message": "removed",
+  "id": 1
+}
+```
+
+**Response `400 Bad Request`** (tanpa id)
+
+```json
+{
+  "error": "id is required for remove"
+}
+```
+
+---
+
+## 📋 Ringkasan Logika POST
+
+```
+POST /api/enroll
+│
+├── action = "remove"  →  hapus data (butuh id)
+├── ada id             →  edit data (butuh type, service, user)
+└── tidak ada id       →  tambah data baru (butuh type, service, user)
+```
+
+## 🔑 Ringkasan Response Error
+
+| Status | Kondisi                        | Body                                        |
+|--------|--------------------------------|---------------------------------------------|
+| `401`  | Tanpa header Authorization     | `{"error": "missing or invalid …"}`         |
+| `401`  | Token salah                    | `{"error": "invalid token"}`                |
+| `400`  | Field wajib kosong             | `{"error": "… are required"}`               |
+| `400`  | Type bukan Annually/Monthly    | `{"error": "type must be one of: Annually, Monthly"}` |
+| `400`  | Service bukan Lite/Value/Pro   | `{"error": "service must be one of: Lite, Value, Pro"}` |
+| `404`  | ID tidak ditemukan             | `{"error": "not found"}`                    |
+
+## 🎮 Playground UI
+
+Setelah server jalan, buka browser ke:
+
+```
+http://localhost:8080
+```
+
+Anda akan diarahkan ke halaman **Playground** yang memudahkan pengujian semua endpoint langsung dari browser:
+
+1. **Isi token** di bar atas (default: `secret123`)
+2. Status otomatis berubah: ✅ authenticated / ❌ wrong token
+3. Isi form, klik tombol, lihat response JSON secara realtime
+
+---
+
+## 🚀 Quick Start
+
+```bash
+# masuk ke folder project
+cd api-playground
+
+# install dependency
+pip3 install -r requirements.txt
+
+# jalankan server
+python3 app.py
+
+# buka di browser
+# http://localhost:8080
+```
+
+Server akan berjalan di `http://0.0.0.0:8080` dengan `reloader=True` (auto-restart saat kode diubah).
diff --git a/__pycache__/app.cpython-313.pyc b/__pycache__/app.cpython-313.pyc
new file mode 100644
index 0000000..dfb043d
Binary files /dev/null and b/__pycache__/app.cpython-313.pyc differ
diff --git a/__pycache__/db.cpython-313.pyc b/__pycache__/db.cpython-313.pyc
new file mode 100644
index 0000000..dc1f306
Binary files /dev/null and b/__pycache__/db.cpython-313.pyc differ
diff --git a/app.py b/app.py
new file mode 100644
index 0000000..0b55dc2
--- /dev/null
+++ b/app.py
@@ -0,0 +1,117 @@
+from bottle import Bottle, request, response, static_file
+import json
+import os
+import db
+
+app = Bottle()
+db.init_db()
+
+# ── auth config ──────────────────────────────────────────
+# Token simpel, mudah diingat. Ganti sesuai kebutuhan.
+API_TOKEN = "secret123"
+
+
+# ── helpers ──────────────────────────────────────────────
+def json_response(data, status=200):
+    response.content_type = "application/json"
+    response.status = status
+    return json.dumps(data)
+
+
+def check_auth():
+    """
+    Cek Bearer token.
+    Return None jika OK, atau string JSON error jika gagal.
+    """
+    auth = request.get_header("Authorization", "")
+    if not auth.startswith("Bearer "):
+        return json.dumps({"error": "missing or invalid Authorization header"})
+    token = auth.split(" ", 1)[1].strip()
+    if token != API_TOKEN:
+        return json.dumps({"error": "invalid token"})
+    return None  # ✅ token valid
+
+
+# ── static playground page (tanpa auth) ──────────────────
+@app.get("/")
+def index():
+    return static_file("playground.html", root=os.path.join(os.path.dirname(__file__), "templates"))
+
+
+# ── API: /api/enroll (butuh auth) ────────────────────────
+@app.get("/api/enroll")
+def api_enroll():
+    """
+    GET  /api/enroll          → list all
+    GET  /api/enroll?id=3     → detail id=3
+    """
+    err = check_auth()
+    if err:
+        return json_response(json.loads(err), 401)
+
+    enroll_id = request.query.id
+    if enroll_id:
+        row = db.get_enroll(int(enroll_id))
+        if not row:
+            return json_response({"error": "not found"}, 404)
+        return json_response({"data": row})
+    rows = db.list_enrolls()
+    return json_response({"data": rows})
+
+
+@app.post("/api/enroll")
+def api_enroll_post():
+    """
+    POST /api/enroll  (form fields + Bearer token)
+      id       → if present → edit, otherwise → add
+      type
+      service
+      user
+      action   → "remove" to delete (needs id)
+    """
+    err = check_auth()
+    if err:
+        return json_response(json.loads(err), 401)
+
+    action = request.forms.get("action", "").strip()
+    enroll_id = request.forms.get("id", "").strip()
+    type_ = request.forms.get("type", "").strip()
+    service = request.forms.get("service", "").strip()
+    user = request.forms.get("user", "").strip()
+
+    # ── remove ──
+    if action == "remove":
+        if not enroll_id:
+            return json_response({"error": "id is required for remove"}, 400)
+        db.remove_enroll(int(enroll_id))
+        return json_response({"message": "removed", "id": int(enroll_id)})
+
+    # ── validate type ──
+    if type_ not in db.VALID_TYPES:
+        return json_response(
+            {"error": f"type must be one of: {', '.join(db.VALID_TYPES)}"}, 400
+        )
+
+    # ── validate service ──
+    if service not in db.VALID_SERVICES:
+        return json_response(
+            {"error": f"service must be one of: {', '.join(db.VALID_SERVICES)}"}, 400
+        )
+
+    # ── edit ──
+    if enroll_id:
+        if not type_ or not service or not user:
+            return json_response({"error": "type, service, user are required"}, 400)
+        db.edit_enroll(int(enroll_id), type_, service, user)
+        return json_response({"message": "updated", "id": int(enroll_id)})
+
+    # ── add ──
+    if not type_ or not service or not user:
+        return json_response({"error": "type, service, user are required"}, 400)
+    new_id = db.add_enroll(type_, service, user)
+    return json_response({"message": "created", "id": new_id}, 201)
+
+
+# ── run ──────────────────────────────────────────────────
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=8080, debug=True, reloader=True)
diff --git a/db.py b/db.py
new file mode 100644
index 0000000..53ba725
--- /dev/null
+++ b/db.py
@@ -0,0 +1,70 @@
+import sqlite3
+import os
+
+DB_PATH = os.path.join(os.path.dirname(__file__), "enroll.db")
+
+# ── allowed values ───────────────────────────────────────
+VALID_TYPES = ("Annually", "Monthly")
+VALID_SERVICES = ("Lite", "Value", "Pro")
+
+
+def get_conn():
+    conn = sqlite3.connect(DB_PATH)
+    conn.row_factory = sqlite3.Row
+    return conn
+
+
+def init_db():
+    conn = get_conn()
+    conn.execute("""
+        CREATE TABLE IF NOT EXISTS enroll (
+            id    INTEGER PRIMARY KEY AUTOINCREMENT,
+            type  TEXT NOT NULL,
+            service TEXT NOT NULL,
+            user  TEXT NOT NULL
+        )
+    """)
+    conn.commit()
+    conn.close()
+
+
+def list_enrolls():
+    conn = get_conn()
+    rows = conn.execute("SELECT * FROM enroll ORDER BY id DESC").fetchall()
+    conn.close()
+    return [dict(r) for r in rows]
+
+
+def get_enroll(enroll_id):
+    conn = get_conn()
+    row = conn.execute("SELECT * FROM enroll WHERE id = ?", (enroll_id,)).fetchone()
+    conn.close()
+    return dict(row) if row else None
+
+
+def add_enroll(type_, service, user):
+    conn = get_conn()
+    cur = conn.execute(
+        "INSERT INTO enroll (type, service, user) VALUES (?, ?, ?)",
+        (type_, service, user),
+    )
+    conn.commit()
+    conn.close()
+    return cur.lastrowid
+
+
+def edit_enroll(enroll_id, type_, service, user):
+    conn = get_conn()
+    conn.execute(
+        "UPDATE enroll SET type = ?, service = ?, user = ? WHERE id = ?",
+        (type_, service, user, enroll_id),
+    )
+    conn.commit()
+    conn.close()
+
+
+def remove_enroll(enroll_id):
+    conn = get_conn()
+    conn.execute("DELETE FROM enroll WHERE id = ?", (enroll_id,))
+    conn.commit()
+    conn.close()
diff --git a/enroll.db b/enroll.db
new file mode 100644
index 0000000..dcf49b7
Binary files /dev/null and b/enroll.db differ
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..fc1fc4f
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1 @@
+bottle==0.13.4
diff --git a/templates/playground.html b/templates/playground.html
new file mode 100644
index 0000000..8beb4da
--- /dev/null
+++ b/templates/playground.html
@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>API Enroll Playground</title>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { font-family: 'Segoe UI', sans-serif; background: #1e1e2f; color: #e0e0e0; padding: 20px; }
+  h1 { text-align: center; color: #7c83fd; margin-bottom: 10px; }
+  h2 { color: #a5abff; margin-bottom: 10px; font-size: 1.1em; }
+
+  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1200px; margin: 0 auto; }
+  @media (max-width: 760px) { .grid { grid-template-columns: 1fr; } }
+
+  .card { background: #2a2a3d; border-radius: 10px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
+  .card.full { grid-column: 1 / -1; }
+
+  label { display: block; margin: 8px 0 3px; font-size: 0.85em; color: #999; }
+  input, select { width: 100%; padding: 8px 12px; border: 1px solid #444; border-radius: 6px; background: #1e1e2f; color: #e0e0e0; font-size: 0.9em; }
+  input:focus { outline: none; border-color: #7c83fd; }
+
+  .btn-row { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
+  button { padding: 8px 18px; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.85em; transition: opacity .15s; }
+  button:hover { opacity: .85; }
+  .btn-get  { background: #4caf50; color: #fff; }
+  .btn-post { background: #7c83fd; color: #fff; }
+  .btn-del  { background: #f44336; color: #fff; }
+
+  .result { margin-top: 12px; background: #111; border-radius: 6px; padding: 12px; font-family: 'Fira Code', monospace; font-size: 0.82em; white-space: pre-wrap; word-break: break-all; max-height: 300px; overflow-y: auto; color: #a8ff60; }
+  .result.err { color: #ff6b6b; }
+
+  table { width: 100%; border-collapse: collapse; margin-top: 10px; }
+  th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #333; font-size: 0.85em; }
+  th { color: #7c83fd; }
+  tr:hover { background: #33334d; }
+  .badge { padding: 2px 8px; border-radius: 10px; font-size: 0.75em; font-weight: 600; }
+  .badge.type { background: #ff980033; color: #ff9800; }
+  .badge.service { background: #2196f333; color: #64b5f6; }
+  .badge.user { background: #4caf5033; color: #81c784; }
+
+  /* ── auth bar ── */
+  .auth-bar {
+    max-width: 1200px;
+    margin: 0 auto 25px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: #2a2a3d;
+    border-radius: 10px;
+    padding: 14px 20px;
+    box-shadow: 0 2px 8px rgba(0,0,0,.4);
+    flex-wrap: wrap;
+  }
+  .auth-bar label { margin: 0; color: #999; font-size: 0.85em; }
+  .auth-bar input { width: 220px; }
+  .auth-bar .status {
+    font-size: 0.82em;
+    font-weight: 600;
+    padding: 4px 12px;
+    border-radius: 20px;
+  }
+  .status.ok   { background: #4caf5033; color: #4caf50; }
+  .status.bad  { background: #f4433633; color: #f44336; }
+  .status.none { background: #55555533; color: #888; }
+  .hint { font-size: 0.75em; color: #666; margin-left: auto; }
+</style>
+</head>
+<body>
+
+<h1>🚀 API Enroll Playground</h1>
+
+<!-- ── AUTH BAR ── -->
+<div class="auth-bar">
+  <label>🔑 Bearer Token</label>
+  <input id="token-input" type="password" placeholder="enter token…" oninput="updateStatus()">
+  <span id="auth-status" class="status none">no token</span>
+  <span class="hint">default: secret123</span>
+</div>
+
+<div class="grid">
+
+  <!-- ── ADD ── -->
+  <div class="card">
+    <h2>➕ Add (POST)</h2>
+    <label>type</label>
+    <select id="add-type">
+      <option value="">-- pilih --</option>
+      <option value="Annually">Annually</option>
+      <option value="Monthly">Monthly</option>
+    </select>
+    <label>service</label>
+    <select id="add-service">
+      <option value="">-- pilih --</option>
+      <option value="Lite">Lite</option>
+      <option value="Value">Value</option>
+      <option value="Pro">Pro</option>
+    </select>
+    <label>user</label>   <input id="add-user"   placeholder="e.g. alice">
+    <div class="btn-row">
+      <button class="btn-post" onclick="doAdd()">POST /api/enroll</button>
+    </div>
+    <pre class="result" id="add-result">—</pre>
+  </div>
+
+  <!-- ── LIST ── -->
+  <div class="card">
+    <h2>📋 List (GET)</h2>
+    <div class="btn-row">
+      <button class="btn-get" onclick="doList()">GET /api/enroll</button>
+    </div>
+    <pre class="result" id="list-result">—</pre>
+  </div>
+
+  <!-- ── DETAIL ── -->
+  <div class="card">
+    <h2>🔍 Detail (GET)</h2>
+    <label>id</label>
+    <input id="detail-id" type="number" placeholder="e.g. 1">
+    <div class="btn-row">
+      <button class="btn-get" onclick="doDetail()">GET /api/enroll?id=</button>
+    </div>
+    <pre class="result" id="detail-result">—</pre>
+  </div>
+
+  <!-- ── EDIT ── -->
+  <div class="card">
+    <h2>✏️ Edit (POST)</h2>
+    <label>id</label>     <input id="edit-id"     type="number" placeholder="e.g. 1">
+    <label>type</label>
+    <select id="edit-type">
+      <option value="">-- pilih --</option>
+      <option value="Annually">Annually</option>
+      <option value="Monthly">Monthly</option>
+    </select>
+    <label>service</label>
+    <select id="edit-service">
+      <option value="">-- pilih --</option>
+      <option value="Lite">Lite</option>
+      <option value="Value">Value</option>
+      <option value="Pro">Pro</option>
+    </select>
+    <label>user</label>   <input id="edit-user"   placeholder="e.g. bob">
+    <div class="btn-row">
+      <button class="btn-post" onclick="doEdit()">POST /api/enroll (edit)</button>
+    </div>
+    <pre class="result" id="edit-result">—</pre>
+  </div>
+
+  <!-- ── REMOVE ── -->
+  <div class="card">
+    <h2>🗑️ Remove (POST)</h2>
+    <label>id</label>
+    <input id="del-id" type="number" placeholder="e.g. 1">
+    <div class="btn-row">
+      <button class="btn-del" onclick="doRemove()">POST /api/enroll (remove)</button>
+    </div>
+    <pre class="result" id="del-result">—</pre>
+  </div>
+
+  <!-- ── TABLE PREVIEW ── -->
+  <div class="card full">
+    <h2>📊 Table Preview</h2>
+    <div class="btn-row">
+      <button class="btn-get" onclick="refreshTable()">Refresh Table</button>
+    </div>
+    <table id="preview-table">
+      <thead><tr><th>ID</th><th>Type</th><th>Service</th><th>User</th></tr></thead>
+      <tbody id="preview-body"><tr><td colspan="4" style="text-align:center;color:#555">Click Refresh</td></tr></tbody>
+    </table>
+  </div>
+
+</div>
+
+<script>
+const BASE = "/api/enroll";
+
+// ── auth helpers ──
+function getToken() {
+  return document.getElementById('token-input').value.trim();
+}
+
+function authHeaders() {
+  const h = {};
+  const t = getToken();
+  if (t) h['Authorization'] = 'Bearer ' + t;
+  return h;
+}
+
+function updateStatus() {
+  const el = document.getElementById('auth-status');
+  const t = getToken();
+  if (!t) {
+    el.textContent = 'no token';
+    el.className = 'status none';
+  } else if (t === 'secret123') {
+    el.textContent = '✅ authenticated';
+    el.className = 'status ok';
+  } else {
+    el.textContent = '❌ wrong token';
+    el.className = 'status bad';
+  }
+}
+
+// ── ui helpers ──
+function show(elId, data, isErr) {
+  const el = document.getElementById(elId);
+  el.textContent = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
+  el.classList.toggle('err', !!isErr);
+}
+
+// ── API calls (semua pakai authHeaders) ──
+async function doAdd() {
+  const body = new URLSearchParams();
+  body.append('type',    document.getElementById('add-type').value);
+  body.append('service', document.getElementById('add-service').value);
+  body.append('user',    document.getElementById('add-user').value);
+  try {
+    const r = await fetch(BASE, { method: 'POST', headers: authHeaders(), body });
+    const j = await r.json();
+    show('add-result', j, j.error);
+    if (!j.error) doList();
+  } catch (e) { show('add-result', e.message, true); }
+}
+
+async function doList() {
+  try {
+    const r = await fetch(BASE, { headers: authHeaders() });
+    const j = await r.json();
+    show('list-result', j, j.error);
+    refreshTable();
+  } catch (e) { show('list-result', e.message, true); }
+}
+
+async function doDetail() {
+  const id = document.getElementById('detail-id').value;
+  if (!id) { show('detail-result', 'Please enter an id', true); return; }
+  try {
+    const r = await fetch(`${BASE}?id=${id}`, { headers: authHeaders() });
+    const j = await r.json();
+    show('detail-result', j, j.error);
+  } catch (e) { show('detail-result', e.message, true); }
+}
+
+async function doEdit() {
+  const body = new URLSearchParams();
+  body.append('id',     document.getElementById('edit-id').value);
+  body.append('type',   document.getElementById('edit-type').value);
+  body.append('service',document.getElementById('edit-service').value);
+  body.append('user',   document.getElementById('edit-user').value);
+  try {
+    const r = await fetch(BASE, { method: 'POST', headers: authHeaders(), body });
+    const j = await r.json();
+    show('edit-result', j, j.error);
+    if (!j.error) doList();
+  } catch (e) { show('edit-result', e.message, true); }
+}
+
+async function doRemove() {
+  const id = document.getElementById('del-id').value;
+  if (!id) { show('del-result', 'Please enter an id', true); return; }
+  const body = new URLSearchParams();
+  body.append('id', id);
+  body.append('action', 'remove');
+  try {
+    const r = await fetch(BASE, { method: 'POST', headers: authHeaders(), body });
+    const j = await r.json();
+    show('del-result', j, j.error);
+    if (!j.error) doList();
+  } catch (e) { show('del-result', e.message, true); }
+}
+
+async function refreshTable() {
+  try {
+    const r = await fetch(BASE, { headers: authHeaders() });
+    const j = await r.json();
+    const tbody = document.getElementById('preview-body');
+    if (!j.data || j.data.length === 0) {
+      tbody.innerHTML = '<tr><td colspan="4" style="text-align:center;color:#555">No data</td></tr>';
+      return;
+    }
+    tbody.innerHTML = j.data.map(row => `
+      <tr>
+        <td>${row.id}</td>
+        <td><span class="badge type">${row.type}</span></td>
+        <td><span class="badge service">${row.service}</span></td>
+        <td><span class="badge user">${row.user}</span></td>
+      </tr>
+    `).join('');
+  } catch (e) { /* ignore */ }
+}
+
+// auto-load on start
+doList();
+</script>
+</body>
+</html>