# Report Outline (BAB 1–4)

## BAB 1 - Pendahuluan

### 1.1 Latar Belakang

- Pentingnya pendataan server, layanan, domain, dan dokumentasi internal secara terpusat
- Kebutuhan dashboard web sederhana untuk membantu admin memantau aset server private
- Kebutuhan pemeriksaan DNS dasar agar domain dapat diverifikasi terhadap IP server yang diharapkan

### 1.2 Rumusan Masalah

- Bagaimana membangun aplikasi web terproteksi untuk mengelola server, service, domain, dan note dalam satu dashboard?
- Bagaimana memeriksa apakah domain mengarah ke IP server yang benar secara sederhana?
- Bagaimana menampilkan relasi data, misalnya note per server, langsung dari halaman detail?

### 1.3 Batasan Masalah

- Aplikasi berupa dashboard CRUD + monitoring ringan
- Hanya satu aktor admin
- DNS checking terbatas pada A record / IPv4
- Tidak mencakup SSH, deployment automation, Docker orchestration, atau reverse proxy management
- Fokus implementasi pada web app + server app + PostgreSQL

### 1.4 Tujuan

- Membangun dashboard manajemen layanan server private berbasis web
- Menyediakan CRUD untuk server, service, domain, dan note
- Menyediakan pemeriksaan DNS sederhana dan ringkasan dashboard

### 1.5 Manfaat

- Membantu admin mendokumentasikan dan memantau aset server
- Membantu proses pembelajaran relasi data, CRUD, auth, dan monitoring dasar
- Menjadi contoh implementasi full-stack berbasis React, tRPC, Drizzle, dan PostgreSQL

## BAB 2 - Tinjauan Pustaka

### 2.1 Sistem Informasi Berbasis Web

### 2.2 Konsep CRUD

### 2.3 Konsep Dashboard Monitoring

### 2.4 DNS dan Resolusi A Record

### 2.5 Otentikasi pada Aplikasi Web

### 2.6 Teknologi yang Digunakan

- React
- TanStack Router
- TanStack Query
- tRPC
- PostgreSQL
- Drizzle ORM
- better-auth
- Effect
- Bun

## BAB 3 - Analisis dan Perancangan Sistem

### 3.1 Analisis Kebutuhan

#### Kebutuhan Fungsional

- Admin dapat sign in untuk mengakses dashboard
- Sistem mengarahkan `/` ke `/dashboard` atau `/login` berdasarkan sesi
- Admin dapat mengelola data server
- Admin dapat mengelola data service
- Admin dapat mengelola data domain
- Admin dapat menjalankan DNS check untuk domain
- Admin dapat mengelola note server
- Admin dapat melihat note yang terkait langsung dari halaman detail server
- Sistem menampilkan ringkasan dashboard dan data terbaru

#### Kebutuhan Non-Fungsional

- Antarmuka sederhana dan student-friendly
- Relasi data dipilih melalui select input agar mengurangi kesalahan input ID manual
- Data list ditampilkan dengan urutan stabil
- Aksi hapus memakai konfirmasi dua langkah berbasis ikon

### 3.2 Perancangan Sistem

- Use case diagram
- Class diagram
- Activity diagram
- State chart diagram
- Sequence diagram
- Collaboration diagram

### 3.3 Perancangan Database

- Tabel `server`
- Tabel `service`
- Tabel `domain`
- Tabel `note`
- Tabel auth bawaan better-auth
- Relasi:
  - server -> services
  - server -> notes
  - service -> domains
- Aturan cascade delete pada relasi utama

### 3.4 Perancangan Antarmuka

- Halaman login (`/login`)
- Redirect root (`/`)
- Dashboard summary (`/dashboard`)
- Halaman list/detail/form server
- Halaman list/detail/form service
- Halaman list/detail/form domain
- Halaman list/detail/form note
- Section note terkait pada detail server

## BAB 4 - Implementasi dan Pengujian

### 4.1 Implementasi Sistem

#### Backend

- Router tRPC untuk server, service, domain, note, dan dashboard summary
- Validasi relasi parent-child pada create/update
- DNS check menggunakan resolver IPv4 A record
- Persist hasil DNS check ke database

#### Frontend

- Protected routes untuk area dashboard
- CRUD forms dengan TanStack Form
- Select input untuk relasi:
  - service -> server
  - domain -> service
  - note -> server
- Resource tables dengan stable row key dan ordering stabil dari backend
- Delete action berbasis ikon dengan dua klik konfirmasi
- DNS status pada domain list sebagai tombol check dengan styling status badge

#### Authentication

- better-auth client + protected route redirect
- Akses tanpa sesi diarahkan ke `/login`

### 4.2 Pengujian

- Pengujian login admin
- Pengujian CRUD server
- Pengujian CRUD service
- Pengujian CRUD domain
- Pengujian CRUD note
- Pengujian select relasi pada form
- Pengujian DNS check domain
- Pengujian note terkait pada halaman detail server
- Pengujian ringkasan dashboard
- Pengujian typecheck web dan API

### 4.3 Hasil Pengujian

- Tabel atau screenshot untuk setiap skenario berhasil
- Bukti hasil DNS check (`MATCH`, `MISMATCH`, `UNRESOLVED`)
- Bukti relasi data tampil benar di halaman detail dan list

### 4.4 Evaluasi

#### Kelebihan

- Struktur data relasional jelas
- UI CRUD sudah konsisten dengan select untuk foreign key utama
- Ringkasan dashboard dan detail page saling terhubung
- DNS checking sudah terintegrasi langsung di alur domain

#### Keterbatasan

- DNS checking hanya untuk A record / IPv4
- Belum ada multi-role auth
- Belum ada fitur pagination, search, atau sorting manual dari UI
- Full workspace typecheck masih terhalang issue pre-existing pada `apps/desktop`

#### Saran Pengembangan

- Tambah filter, search, dan pagination
- Tambah histori DNS check
- Tambah role/permission management
- Tambah monitoring yang lebih luas selain DNS A record