# ADR — Standar Dialog Preview / Edit (UI Pattern) ## Aturan Wajib - Semua dialog preview/edit WAJIB menggunakan `` dari `@/components/ui/dialog` (bukan Sheet/Drawer) - Ukuran: `sm:max-w-lg` (detail lebar) atau `sm:max-w-md` (form pendek) - Struktur wajib: 1. **Header berwarna** (gradient) — berisi ikon, judul, sub-judul 2. **Body** dengan `overflow-y-auto max-h-[65dvh]` — scrollable 3. **Footer sticky** dengan `border-t bg-muted/30` — tombol Batal + Simpan - Untuk dialog yang punya preview DAN edit, gunakan **2 tab** (tab "Detail" + tab "Edit") - Tab menggunakan komponen `` dari `@/components/ui/tabs` - Info 2-kolom: `grid grid-cols-[160px_1fr]` untuk label–value ## Referensi Implementasi - `src/app/(app)/profile/page.tsx` — `` Edit Profil & Ganti Password - `src/components/asset-management/asset-detail-dialog.tsx` — Dialog Asset (2 tab) ## Komponen yang Mengikuti Standar Ini - [x] Edit Profil (`/profile`) - [x] Ganti Password (`/profile`) - [x] Asset Detail & Edit (`/asset-management`) - [ ] Ticketing detail/edit - [ ] Monitoring alert detail - [ ] Mail compose --- # Ticketing Microservice ## Platform: Zammad (Rekomendasi Production) - Docker di server 10.100.1.24, domain: `zammad.gisportal.id` - LDAP Auth terintegrasi ke AD 10.100.1.40 - REST API digunakan oleh FE Next.js di `/ticketing` ## Setup Zammad - [ ] Install Zammad via Docker Compose - [ ] Konfigurasi LDAP Auth (10.100.1.40) - [ ] Mapping LDAP Group → Zammad Role (IT-Admin, IT-Staff, Management, dll) - [ ] Konfigurasi email notifikasi via Mailcow - [ ] Setup SLA (response time & escalation) - [ ] Konfigurasi webhook/trigger: auto-assign by category → group - [ ] Setup public customer portal (untuk end user eksternal) ## Kategori Tiket - Hardware: Komputer, Laptop, Printer, Server, Jaringan, dll - Software: - ESRI (ArcGIS Desktop, ArcGIS Pro, ArcGIS Online, ArcGIS Enterprise, Extension) - BlueMarble (Global Mapper, Geographic Calculator, dll) - DataEast (MapInfo, dll) - Microsoft (Office, Windows, Server, dll) - Lainnya (input bebas) - Asset Request (Pengadaan): Permohonan pembelian hardware/software baru - Issue Umum: Gangguan layanan, akses, dll ## Alur Tiket (Workflow) ``` Open → In Progress → Pending (menunggu user/pihak lain) → Resolved → Closed ↓ Escalate (jika SLA breach) ``` - Setiap transisi status tercatat di log timeline (audit trail) - Assignee: user LDAP atau group LDAP (IT-Admin/IT-Staff/divisi terkait) - Requester: user internal (SSO LDAP) atau guest publik (email + nama) ## FE Integration (`/ticketing` di my.gisportal.id) - [ ] Halaman list tiket (filter by status, kategori, assignee) - [ ] Form buat tiket baru (kategori → sub-kategori hierarki software/hardware) - [ ] Detail tiket: info + log timeline + komentar (Dialog standar 2-tab) - [ ] Notifikasi real-time (websocket atau polling) - [ ] Dashboard ringkasan: open, in-progress, overdue (untuk IT Admin) - [ ] Integrasi dengan Asset Management: tiket bisa dikaitkan ke asset spesifik ## Zammad API Client (`src/lib/zammad-client.ts`) - [ ] Auth via token (per-user token dari Zammad) - [ ] GET /tickets, GET /tickets/:id - [ ] POST /tickets (buat tiket baru) - [ ] PUT /tickets/:id (update status, assignee) - [ ] GET /ticket_articles/:ticket_id (log/komentar) - [ ] POST /ticket_articles (tambah komentar/update) --- # Push Notification Microservice ## Arsitektur yang Disarankan: **Web Push (VAPID) + ntfy / Superstream** ### Opsi Backend | Platform | Protokol | Docker | PWA Support | LDAP | Nilai | |---|---|---|---|---|---| | **ntfy** | HTTP Push + WebSocket | ✅ | ✅ (Web Push) | via proxy | 🥇 Ringan & simpel | | **Webpush custom (FastAPI)** | Web Push VAPID | ✅ | ✅ | ✅ native | 🥈 Full kontrol | | **Firebase FCM** | FCM | ❌ self-host | ✅ | ❌ | ❌ vendor lock-in | | **Apprise** | Multi-channel | ✅ | ❌ | ❌ | Sebagai relay saja | ### **Rekomendasi: Custom FastAPI Push Service + Web Push VAPID** - Self-hosted, no vendor lock-in - Compatible Web Push API — bekerja di browser (Chrome, Firefox, Edge, Safari iOS 16.4+) - PWA: Service Worker `push` event sudah didukung `@ducanh2912/next-pwa` - Subscription per-user (LDAP username) disimpan di DB - Trigger dari Zammad webhook, Collector alert, atau manual ### Alur Push Notification ``` Event (Zammad tiket baru / Asset alert / dll) │ ▼ Push Service API (FastAPI, port 17000) │ ├─ Lookup subscription by user/group LDAP ├─ Web Push VAPID → Browser/PWA Service Worker └─ (opsional) relay ke ntfy/email/webhook │ ▼ Browser / PWA Service Worker `push` event │ ▼ Notification (judul, body, icon, action button, url) ``` ## Setup Push Service - [ ] Buat `geonet-push` service (FastAPI + pywebpush) - [ ] Generate VAPID key pair (public/private) - [ ] Endpoint: `POST /subscribe` — simpan push subscription per user LDAP - [ ] Endpoint: `POST /unsubscribe` — hapus subscription - [ ] Endpoint: `POST /send` — kirim notif ke user/group (internal, pakai API key) - [ ] Docker Compose di 10.100.1.24, domain: `push.gisportal.id` (internal) - [ ] Simpan subscription di PostgreSQL/SQLite ## Sumber Event (Trigger) - [ ] **Zammad webhook** → tiket baru, update status, assign ke user/group - [ ] **Collector / Asset Management** → device offline, disk penuh, alert threshold - [ ] **Manual broadcast** → pengumuman IT Admin ke semua user atau group tertentu - [ ] *(Future)* Monitoring alert (Zabbix webhook → push service) ## FE Integration (Next.js PWA) - [ ] `src/lib/push-client.ts` — subscribe/unsubscribe, kirim VAPID public key ke browser - [ ] Service Worker handler `push` event (via `@ducanh2912/next-pwa` custom SW) - [ ] Permission request UI — tombol "Aktifkan Notifikasi" di halaman profile/settings - [ ] Notification payload: `{ title, body, icon, badge, url, tag }` - [ ] Action button pada notif: "Lihat Tiket", "Lihat Asset" - [ ] Notif center di navbar — in-app list notifikasi (polling atau WebSocket) ## Kategori Notifikasi - 🎫 **Ticketing**: tiket baru assigned, update status, komentar baru, SLA overdue - 🖥️ **Asset Management**: device offline > X menit, disk usage > 90%, tiket asset baru - 📢 **Broadcast IT**: pengumuman, maintenance, downtime - *(Future)* 📊 Monitoring: alert Zabbix --- # FE my.gisportal.id │ ├─ Dashboard ├─ Profile (Action : Edit Profile, Ganti Password, Test Email) ├─ Ticketing ├─ Asset Management ├─ GeoNetAgent ├─ Monitoring └─ Mail │ ├─ Inbox ├─ Sent ├─ Draft ├─ Contacts ├─ Calendar ├─ Tasks └─ Rules # Microservices ## Mailserver (Mailcow) | Produk | Web UI | API | Multi Domain | Docker | Enterprise | Nilai | | ------------- | ------ | ----- | ------------ | ------ | ---------- | ----- | | Mailcow | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ✅ | ✅ | ⭐⭐⭐⭐⭐ | 🥇 | | iRedMail | ⭐⭐⭐⭐ | ⭐⭐⭐ | ✅ | ⚠️ | ⭐⭐⭐⭐⭐ | 🥈 | | Zimbra | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ✅ | ❌ | ⭐⭐⭐⭐⭐ | 🥉 | | Modoboa | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ✅ | ⚠️ | ⭐⭐⭐⭐ | ⭐⭐⭐ | | Stalwart Mail | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ✅ | ✅ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ## Setup - [ ] Install Mailcow (Docker) - [ ] Configure Mailcow - [ ] Configure Mailcow API - [ ] Configure Mailcow Web UI - [ ] Configure Mailcow Multi Domain (geonet.co.id, gegeo.my.id) - [ ] Configure Mailcow Docker - [ ] Configure Mailcow Enterprise - [ ] Configure Mailcow Nilai - [ ] Configure Mailcow LDAP (10.100.1.40) ## Install Thunderbird - [ ] Install Thunderbird - [ ] Configure Thunderbird - [ ] Configure Thunderbird for geonet.co.id - [ ] Configure Thunderbird for gegeo.my.id - [ ] Move Inbox from main geonet.co.id to geonet for mail server - [ ] save imap and pop3 file Thunderbird di NAS : untuk meringankan vm dan memastikan file tidak hilang # Mikrotik - [ ] Setup PPP login via LDAP # Windows Server 2012 R2 Active Directory - [ ] Setup LDAP SSO - [ ] Setup LDAP SAML