Masjid Digital adalah sistem informasi manajemen terpadu berbasis web yang dirancang khusus untuk mengelola konten pada layar TV Informasi (Live Display) di Masjid. Dibangun dengan antarmuka yang modern, elegan (Emerald Glassmorphism Theme), dan sangat interaktif.

Aplikasi ini memudahkan pengurus masjid (Takmir, Humas, Operator) untuk mengatur jadwal sholat, pengumuman, petugas dakwah, hingga running text secara real-time tanpa perlu me-refresh layar TV.

✨ Fitur Unggulan

🔐 1. Role-Based Access Control (RBAC) yang Ketat

Aplikasi dilengkapi dengan sistem hak akses cerdas. Hanya role Superadmin, Operator, dan Humas yang dapat melakukan manipulasi data (Tambah, Edit, Hapus). Role lain hanya akan melihat antarmuka mode Read-Only (Lihat Saja).

🖼️ 2. Manajemen Banner (Smart Image Compression)

Upload banner untuk promosi/informasi masjid.
Auto-Compression & Resize: Didukung oleh algoritma Canvas Alpine.js di sisi client (browser). Gambar besar otomatis di-resize maksimal resolusi Full HD (1920px) dan dikompres hingga 50% sebelum dikirim ke server. Sangat menghemat storage!
Status otomatis mendeteksi banner kedaluwarsa berdasarkan tanggal.

🕋 3. Jadwal Sholat Terintegrasi API

Sinkronisasi otomatis dengan API Kemenag / MyQuran untuk akurasi waktu sholat.
Terintegrasi dengan API Hijriah untuk penanggalan Islam.
Dilengkapi animasi Progress Bar Loading dan Live Status (Sukses/Gagal/Error) per tanggal saat melakukan sinkronisasi satu bulan penuh.
Fitur Inline Edit untuk mengubah tanggal Hijriah secara manual jika ada selisih hari raya.

🎤 4. Manajemen Jadwal Dakwah (Schedule Manager)

Sistem tab rapi untuk mengelola berbagai agenda dakwah:

Jumat: Mengatur Khatib, Imam, Muadzin, dan Bilal.
Ramadhan: Mengatur Penceramah dan Imam berdasarkan "Malam Ke-". Otomatis memfilter daftar tanggal dari data Jadwal Sholat.
Sholat Ied: Mengatur jadwal Idul Fitri & Idul Adha.
Pengajian Rutin: Mengatur penceramah dan tema materi kajian.

📖 5. Doa & Hadist (Content Edukasi)

Menampilkan konten edukasi agama di layar TV.
Mendukung input teks Arab (dengan font khusus Amiri RTL) dan teks terjemahan.
Pengaturan durasi tampil per konten dan kategori (Doa / Hadist).

🏃‍♂️ 6. Running Text (Marquee)

Manajemen teks berjalan dengan indikator warna sesuai kategori (Informasi, Ayat, Hadits, Ucapan).
Pengaturan Global Speed dan Individual Speed per teks.
Fitur Live Preview di halaman admin panel sebelum teks tayang di layar TV.

🎨 7. Theme Color Manager

Bebas custom warna tema tampilan TV Display sesuai identitas masjid.
Input warna Main, Dark, dan Light secara presisi.

🛠️ Stack Teknologi

Framework Backend: Laravel
Frontend Stack: Livewire (Full-page components), Alpine.js (DOM manipulation & client-side logic)
Styling: Tailwind CSS (Custom Work Sans & Amiri fonts, Glassmorphism UI)
Database: MySQL / PostgreSQL

🚀 Panduan Instalasi

Clone Repository

git clone https://github.com/radevankaproject/masjid-digital.git
cd masjid-digital

Install Dependency
```
composer install
npm install
npm run build
```
Tips Keamanan & Troubleshooting:

Jika Anda menemui pesan error EBADPLATFORM saat menjalankan npm install seperti ini:
```
npm error code EBADPLATFORM
npm error notsup Unsupported platform for lightningcss-win32-x64-msvc...
npm error notsup Valid os: win32
npm error notsup Actual os: linux
```
Hal ini terjadi karena perbedaan environment (Aplikasi dikembangkan di Windows dan di-deploy ke Linux).

Solusinya: Gunakan perintah --force untuk memaksa instalasi paket yang sesuai dengan OS server:
```
npm install --force
npm run build
```
Konfigurasi Environment
Salin file .env.example menjadi .env lalu sesuaikan konfigurasi database dan variabel sistem.
```
cp .env.example .env
php artisan key:generate
```
Migrasi Database & Seeder
```
php artisan migrate --seed
```
Link Storage (Penting untuk Banner)
```
php artisan storage:link
```
Jalankan Aplikasi
```
npm run build
php artisan serve
```

Akun Login

username: [email protected]
password: masjid123

🌐 Link Test / Demo

🔗 https://demo-masjid.radevankaproject.web.id

   username : [email protected]
   password : masjid123

💡 Catatan Penting: Untuk pengalaman pengguna yang maksimal dan kelancaran fungsi antarmuka, sangat disarankan untuk mengelola aplikasi ini menggunakan perangkat Desktop (PC/Laptop).

👨‍💻 Dikembangkan Oleh

RadevankaProject

🧑‍💻 Developer: @bangameck
📍 Lokasi: Pekanbaru, Riau, Indonesia 🇮🇩
🎯 Tujuan Aplikasi ini: Membangun digitalisasi masjid untuk umat yang lebih baik.

☕ Support Developer

Jika aplikasi Masjid Digital ini bermanfaat untuk masjid di tempatmu, dukung pengembangannya agar terus di-update dan bebas bug!

Kamu bisa mentraktir saya segelas kopi melalui link di bawah ini:

🤝 Kontribusi & Kolaborasi

Project ini dikembangkan secara terbuka! Kami sangat menyambut kontribusi dari developer lain untuk menjadikan aplikasi ini lebih baik bagi umat. Jika Anda ingin berkontribusi:

Fork repository ini.
Buat branch fitur Anda (git checkout -b fitur-keren).
Commit perubahan Anda (git commit -m 'Menambahkan fitur keren').
Push ke branch (git push origin fitur-keren).
Buat Pull Request.

📄 Lisensi

Aplikasi ini dirilis di bawah MIT License dengan Ketentuan Tambahan (Additional Terms) mengenai kewajiban atribusi kepemilikan dan kolaborasi. Silakan baca selengkapnya di file LICENSE.md.