# **Project Brief: Smart Digital Prayer Clock (Jam Shalat Masjid) for Android TV Box**

**Target Platform:** Android TV Box (Android 13/14, 4GB RAM, 64GB ROM) \- Landscape Display (1080p).

**Framework:** Flutter (Latest Stable).

**Architecture Pattern:** Clean Architecture or MVVM.

**State Management Suggestion:** Riverpod atau Provider (Pilih salah satu yang paling stabil).

**Local Storage:** Hive atau Isar (Untuk caching API bulanan & Settings).

## **1\. Project Overview**

Aplikasi ini adalah sistem *Digital Signage* untuk masjid yang akan menyala 24/7 non-stop pada layar TV yang terhubung ke Android Box. Aplikasi ini TIDAK boleh mengandalkan internet real-time. Internet hanya tersedia sebulan sekali (via tethering HP) untuk menarik data jadwal shalat dari API (Bulk 1 bulan) dan melakukan sinkronisasi jam sistem (NTP). Selebihnya, aplikasi berjalan 100% OFFLINE membaca database lokal.

## **2\. Core Features & App State Machine**

Aplikasi memiliki siklus layar (*Screen State Machine*) berdasarkan waktu saat ini (DateTime.now()):

1. **\[STATE: NORMAL / ROTATION\]** \-\> Ini adalah state *default*. Layar akan terus berotasi/berganti secara otomatis berdasarkan skema yang ditentukan di Settings. Terdapat 2 jenis screen dalam rotasi ini:  
   * **Screen A (Main Screen):** Khusus menampilkan Jam Digital (Current Time), Tanggal (Masehi & Hijriah), Baris Jadwal Shalat (5/6 waktu), dan Countdown detikan menuju shalat berikutnya. Memiliki background statis/dinamis yang telah ditentukan.  
   * **Screen B (Slideshow Screen):** Khusus menampilkan poster informasi/pengumuman dalam bentuk gambar penuh (JPG/PNG). Transisi antar gambar atau saat berpindah dari/ke Main Screen menggunakan *Fade In-Out* atau *Slide In-Out*.  
   * *Skema Rotasi:* Dinamis (misal: Main \-\> Slide 1 \-\> Main \-\> Slide 2 \-\> Main \-\> Slide 3, ATAU Main \-\> Slide 1 \-\> Slide 2 \-\> Main \-\> Slide 3 dst).  
2. **\[STATE: MENUJU ADZAN\]** \-\> (Misal 10 menit sebelum waktu masuk) Rotasi *Slidehow* dihentikan paksa. Layar terkunci di **Main Screen**, fokus menampilkan hitung mundur menuju Adzan agar jamaah bersiap.  
3. **\[STATE: ADZAN\]** \-\> Waktu masuk. Menampilkan tulisan besar "WAKTU ADZAN \[NAMA SHALAT\]", membunyikan alarm/beep pendek.  
4. **\[STATE: MENUJU IQOMAH\]** \-\> Menampilkan hitung mundur Iqomah. Khusus hari Jumat, hitung mundur ini diganti tulisan "PERSIAPAN KHUTBAH".  
5. **\[STATE: SHALAT/BLACK SCREEN\]** \-\> Setelah waktu Iqomah habis, layar berubah menjadi HITAM PEKAT (Blank) dengan hanya sedikit teks samar agar tidak mengganggu kekhusyukan shalat.  
6. **\[STATE: KEMBALI NORMAL\]** \-\> Setelah durasi Shalat habis, layar kembali ke \[STATE: NORMAL / ROTATION\].

## **3\. Specific Logic Requirements**

### **A. Waktu Shalat & Logika Hari Jumat (Crucial\!)**

* Terdapat 6 jadwal harian: Imsak (opsional), Subuh, Terbit/Syuruq, Dzuhur, Ashar, Maghrib, Isya.  
* **Logika Hari Jumat:** JIKA DateTime.now().weekday \== DateTime.friday, MAKA jadwal "Dzuhur" HARUS diubah string/labelnya menjadi "JUMAT".  
* Khusus masuk waktu "JUMAT", State \[MENUJU IQOMAH\] di-bypass atau diganti dengan tampilan Nama Khatib dan Imam.

### **B. Offline-First API Fetching**

* Buat satu halaman **Admin/Settings Page** (tersembunyi, diakses dengan menekan pojok layar 5 kali atau via icon gembok).  
* Di Admin Page, ada tombol "Sync Data Bulanan".  
* Saat ditekan, fetch API \-\> Parse JSON \-\> Simpan ke Hive/Isar \-\> Update last\_sync\_date.  
* Di UI utama, timer HANYA boleh membaca dari database lokal, bukan nembak ke API.

### **C. Watchdog & Anti-Freeze (Device Specific)**

* Wajib menggunakan package wakelock\_plus dan panggil WakelockPlus.enable() di main.dart agar TV Box tidak masuk mode *Sleep*.  
* Gunakan Timer.periodic yang efisien.

## **4\. Controllable Settings (Dynamic Variables)**

Semua variabel di bawah ini TIDAK BOLEH *hardcoded*. Buatkan model class AppSettings yang disimpan di Local Storage:

{  
  "masjid\_name": "Masjid Al-Ikhlas",  
  "masjid\_address": "Jl. Kebaikan No. 1, Padang",  
  "city\_id\_api": "1234",  
  "show\_imsak": true,  
  "show\_terbit": true,  
  "iqomah\_durations": {  
    "subuh": 15,  
    "dzuhur": 10,  
    "ashar": 10,  
    "maghrib": 7,  
    "isya": 10  
  },  
  "blank\_screen\_durations": {  
    "normal": 15,  
    "jumat": 45  
  },  
  "running\_text": \[  
    "Mohon luruskan dan rapatkan shaf",  
    "Kajian rutin setiap Ahad pagi"  
  \],  
  "jumat\_officers": {  
    "khatib": "Ust. Fulan, S.Ag",  
    "imam": "Ust. Alan, Lc"  
  },  
  "theme\_color": "0xFF006400",  
  "main\_screen\_background": "/path/to/local/bg.jpg",  
  "slideshow\_images": \[  
    "/path/to/local/slide1.jpg",  
    "/path/to/local/slide2.png"  
  \],  
  "rotation\_settings": {  
    "main\_screen\_duration\_sec": 15,  
    "slide\_duration\_sec": 10,  
    "sequence\_pattern": \["main", "slide\_1", "main", "slide\_2"\]   
  }  
}

*(Catatan untuk AI: sequence\_pattern bisa diimplementasikan sebagai logic antrean berulang yang membaca array tersebut).*

## **5\. UI/UX Layout Structure (Landscape 16:9)**

UI harus dibuat menjadi 2 komponen terpisah yang saling bergantian (menggunakan AnimatedSwitcher untuk transisi *Fade*):

### **A. Komponen: Main Screen (Jam & Jadwal)**

* **Background:** Gambar statis yang di-set dari Settings, ditambah overlay gradient gelap agar teks terbaca jelas.  
* **Top Area (Header):** Nama Masjid, Alamat, dan Logo.  
* **Center Area (Fokus Utama):**  
  * Jam Digital berukuran sangat besar (mendominasi tengah layar).  
  * Tanggal Masehi & Tanggal Hijriah tepat di bawah jam.  
  * Teks dinamis: "Menuju \[Nama Shalat Berikutnya\] \- \[Hitung Mundur HH:MM:SS\]".  
* **Bottom Area (Footer):** Row horizontal berisi kotak/kartu jadwal shalat hari ini. Kotak shalat yang akan datang diberi highlight warna berbeda.  
* **Bottom Edge:** Marquee (Running Text) berjalan tanpa henti.

### **B. Komponen: Slideshow Screen (Informasi Poster)**

* **Center Area:** Gambar poster (JPG/PNG) dirender secara *fullscreen* (atau *fit center* dengan proporsi terjaga).  
* **Floating Information Widget (Overlay):** Sebuah *box* melayang di pojok layar (misal pojok kanan atas) dengan *background dark transparent* (opacity 35% \- 50%). Widget ini menampilkan:  
  * Jam Digital (Current Time) dalam ukuran sedang.  
  * Nama Shalat Mendatang (Hanya filter 5 shalat fardhu: Subuh, Dzuhur/Jumat, Ashar, Maghrib, Isya. Abaikan waktu Imsak dan Terbit di widget ini).  
  * Countdown Timer menuju waktu shalat tersebut.  
* **Bottom Edge:** Marquee (Running Text) HARUS tetap terlihat meskipun sedang dalam mode Slideshow, agar pengumuman darurat tetap terbaca.

## **6\. AI Output Instructions**

Tolong generate kode dengan urutan berikut:

1. pubspec.yaml dependencies.  
2. Model class untuk Settings & Jadwal Shalat.  
3. Service layer untuk Local Storage (Hive/SharedPrefs).  
4. State Machine Logic (Timer provider/manager untuk handle transisi State, TERMASUK logic *Rotation Scheme* antara Main Screen dan Slideshow).  
5. UI Layout: Pisahkan MainScreenWidget dan SlideshowWidget, lalu gabungkan di HomeView dengan AnimatedSwitcher.  
6. Admin Screen sederhana untuk mengatur variabel Controllable Settings.

Pastikan kodenya *null-safe* dan efisien dalam penggunaan memori (hindari memory leaks pada Timer rotasi maupun interval).