# FE `/ticketing` — Integrasi mysupperapps_FE_PWA

> **Terakhir Diperbarui:** 2026-07-03  
> **Status:** 📋 Fase 2 — setelah SMTP (atau paralel jika SMTP ditunda)  
> **Repo FE:** `mysupperapps_FE_PWA` *(repo terpisah)*

---

## Arsitektur

```
my.gisportal.id/ticketing  ──HTTPS──►  Zammad REST API
       │                                      │
       └── JWT geonet-console (user AD)       └── Token token=<api_token>
```

User login via geonet-console (LDAP AD). FE memanggil Zammad API dengan service token atau user token.

---

## Prasyarat Zammad (server)

| Item | Status |
|------|--------|
| Zammad live `https://zammad.gisportal.id` | ✅ |
| LDAP AD sync | ✅ |
| API token admin / service | ✅ `fe-ticketing-pwa` (2026-07-03) — lihat server |
| Group & kategori tiket | 📋 Belum |
| SMTP notifikasi | ✅ `sc138.idcloudhosting.cloud:465` |

---

## Step — Sisi Zammad

### 1. API token — ✅ dibuat 2026-07-03

| Field | Nilai |
|-------|-------|
| Name | `fe-ticketing-pwa` |
| User | `support@geonet.co.id` |
| Permission | `ticket.agent`, `ticket.customer`, `admin.ticket` |
| Lokasi server | `/opt/stacks/zammad/.fe-ticketing-token` *(chmod 600, jangan commit)* |

Ambil token dari server:

```bash
ssh root@10.100.1.24 "cat /opt/stacks/zammad/.fe-ticketing-token"
```

Atau lihat di UI: **Profile → Token Access** (nama `fe-ticketing-pwa`).

**Uji API** — sudah diverifikasi `GET /api/v1/tickets` → HTTP 200.

```bash
curl -s -H "Authorization: Token token=<TOKEN>" \
  https://zammad.gisportal.id/api/v1/tickets?per_page=5
```

### 3. Group untuk routing tiket

**Manage → Groups** — pastikan group default (mis. `Users`) ada untuk customer create ticket.

---

## Step — Sisi FE (mysupperapps_FE_PWA)

| Task | File / lokasi |
|------|----------------|
| Client HTTP Zammad | `src/lib/zammad-client.ts` |
| Halaman list tiket | `/ticketing` route |
| Form buat tiket | POST `/api/v1/tickets` |
| Detail + balasan | GET ticket + POST `ticket_articles` |

Env FE (contoh):

```env
VITE_ZAMMAD_BASE_URL=https://zammad.gisportal.id
VITE_ZAMMAD_API_TOKEN=<service_token>
```

> Pertimbangan produksi: token di backend proxy (BFF), bukan di browser — evaluasi saat implementasi.

---

## Endpoint utama

Lihat [`docs/api/overview.md`](../api/overview.md).

| Method | Path | Use case FE |
|--------|------|-------------|
| GET | `/tickets` | Daftar tiket user |
| POST | `/tickets` | Buat tiket baru |
| GET | `/tickets/{id}` | Detail |
| POST | `/ticket_articles` | Komentar / balasan |
| GET | `/users/me` | Profil user Zammad |
| GET | `/groups` | Pilihan group |

---

## Urutan implementasi disarankan

1. Token + curl test dari server/dev
2. `zammad-client.ts` — wrapper fetch + error handling
3. Halaman list tiket (read-only)
4. Form create ticket
5. Detail ticket + articles
6. Polish UI + error states

---

## Setelah FE OK

- [ ] Update `docs/project-status.md`
- [ ] Fase 3: Mailcow (email inbound)
- [ ] Fase 4: Webhook → geonet-push