# Dokumentasi Diagram Alur (Flowchart) Aplikasi JTA

Dokumen ini berisi rancangan **Diagram Alur (Flowchart)** jalannya aplikasi mobile JTA dari pertama kali dibuka hingga penggunaan fitur-fiturnya. Anda dapat menyalin kode Mermaid di bawah untuk diimpor ke **Diagrams.net (Draw.io)**.

---

## 1. Kode Flowchart (Mermaid)

```mermaid
flowchart TD
    Start([Mulai]) --> Splash[Splash Screen: Cek Sesi Login]
    
    Splash --> LoggedIn{Apakah Sudah Login?}
    
    LoggedIn -- Tidak --> Onboarding[Landing Page / Onboarding]
    Onboarding --> ChooseAuth{Masuk atau Daftar?}
    ChooseAuth -- Masuk --> Login[Halaman Login]
    ChooseAuth -- Daftar --> Register[Halaman Register]
    
    Login --> SubmitLogin{Login Berhasil?}
    SubmitLogin -- Tidak --> Login
    SubmitLogin -- Ya --> MainTab
    
    Register --> SubmitRegister{Register Berhasil?}
    SubmitRegister -- Tidak --> Register
    SubmitRegister -- Ya --> Login
    
    LoggedIn -- Ya --> MainTab[Halaman Utama / Dashboard]
    
    MainTab --> CheckDevice{Apakah Alat Terhubung?}
    
    CheckDevice -- Tidak --> EmptyState[Tampilan Alat Belum Terhubung]
    EmptyState --> ClaimDevice[Input Claim Code Alat]
    ClaimDevice --> SubmitClaim{Claim Berhasil?}
    SubmitClaim -- Tidak --> ClaimDevice
    SubmitClaim -- Ya --> ActiveState
    
    CheckDevice -- Ya --> ActiveState[Tampilan Dashboard Aktif]
    
    ActiveState --> Nav[Navigasi Menu Utama]
    
    Nav --> TabMonitoring[Tab 1: Monitoring]
    TabMonitoring --> ViewRealtime[Pantau Suhu & Kelembapan Real-Time]
    TabMonitoring --> ViewChart[Lihat Grafik Riwayat Sensor]
    
    Nav --> TabControl[Tab 2: Control]
    TabControl --> SelectMode{Pilih Mode Kerja}
    
    SelectMode -- Otomatis --> SetThreshold[Atur Batas Threshold Suhu & Kelembapan]
    SetThreshold --> AutoWater[ESP32 Siram Otomatis jika Melewati Batas]
    
    SelectMode -- Manual --> PumpManual[Nyalakan Pompa dengan Durasi Waktu]
    
    TabControl --> SetSchedule[Atur Jadwal Penyiraman]
    SetSchedule --> ScheduleWater[ESP32 Siram Otomatis Sesuai Jadwal]
    
    Nav --> ActionLogout[Tombol Logout]
    ActionLogout --> ConfirmLogout{Konfirmasi Logout?}
    ConfirmLogout -- Ya --> ClearSession[Hapus Sesi & Kembali ke Landing]
    ClearSession --> Onboarding
    ConfirmLogout -- Batal --> ActiveState
```

---

## 2. Penjelasan Alur Aktivitas Aplikasi

Berikut adalah penjelasan narasi untuk setiap tahapan pada diagram alur di atas:

1. **Awal Sesi (Splash Screen & Auth Check)**:
   - Ketika aplikasi pertama kali dijalankan, sistem akan menampilkan Splash Screen dan secara otomatis memeriksa status autentikasi lokal pengguna di Supabase.
   - Jika sesi login aktif masih ditemukan, pengguna langsung diarahkan ke **Halaman Utama (Dashboard)**. Jika tidak, pengguna diarahkan ke **Halaman Landing / Onboarding**.

2. **Proses Registrasi & Login**:
   - Di Halaman Landing, pengguna dapat memilih masuk (Login) atau membuat akun baru (Register).
   - Setelah proses registrasi sukses, pengguna harus masuk menggunakan email dan password terdaftar.

3. **Verifikasi Kepemilikan Alat**:
   - Di Halaman Utama, sistem mendeteksi apakah akun pengguna sudah terhubung dengan perangkat IoT ESP32 (`device_id != null`).
   - **Jika Belum Terhubung**: Aplikasi menampilkan status kosong (Empty State) dan meminta pengguna memasukkan **Claim Code** yang tertera pada alat untuk menghubungkannya.
   - **Jika Sudah Terhubung**: Aplikasi langsung menampilkan dashboard aktif yang berisi pembaruan data sensor real-time.

4. **Navigasi Fitur Utama**:
   Setelah alat terhubung, pengguna dapat menggunakan 2 tab fitur utama aplikasi:
   - **Fitur Monitoring (Tab 1)**:
     - Memantau suhu (°C) dan kelembapan (%) kumbung secara real-time yang diperbarui secara otomatis setiap 5 detik (polling).
     - Melihat riwayat grafik perkembangan sensor harian, mingguan, atau bulanan.
   - **Fitur Kontrol & Penjadwalan (Tab 2)**:
     - Memilih mode kerja alat: **Mode Otomatis** (pompa menyala mandiri berdasarkan batas threshold suhu dan kelembapan yang diinput) atau **Mode Manual** (menyalakan pompa secara langsung dengan opsi durasi waktu 15 detik hingga 5 menit).
     - Mengatur jadwal penyiraman berkala (menentukan jam dan hari penyiraman otomatis).

5. **Proses Logout**:
   - Pengguna dapat keluar dari akun secara aman dengan menekan tombol logout. Sistem akan menampilkan dialog konfirmasi terlebih dahulu sebelum menghapus sesi aktif Supabase dan mengembalikan pengguna ke Halaman Landing.

---

## 3. Cara Mengimpor ke Diagrams.net (Draw.io)

1. Salin seluruh kode di dalam blok ` ```mermaid ` pada Bagian 1 di atas.
2. Buka [app.diagrams.net](https://app.diagrams.net/).
3. Di menu atas editor Diagrams.net, pilih **Arrange** -> **Insert** -> **Advanced** -> **Mermaid...** (atau klik tombol **`+`** pada toolbar -> **Advanced** -> **Mermaid**).
4. Tempel (*paste*) kode Mermaid tersebut.
5. Klik **Insert** (Sisipkan). Diagrams.net akan langsung menggambar bagan alir lengkap di atas secara instan.