-
-
CURHAT DENGAN AL-QUR’AN
Rp 1.000.000
Rp 500.000
Eksklusif & Private bersama Bang Luthfan
🔒- Khusus 3 Orang Pertama

Sahabat Dermawan yang Allah muliakan…

Selama ini Sahabat telah membersamai perjuangan Al-Qur’an.
Sahabat ikut menghadirkan cahaya bagi para santri.
Kini, izinkan kami menghadirkan ruang cahaya itu… untuk Sahabat sendiri.

Bukan kajian umum.
Bukan forum terbuka.
Tapi ruang tenang untuk duduk, bercerita, dan menemukan jawaban langsung dari ayat-ayat Allah.

Karena kami yakin…
✨- Tidak ada pertanyaan yang tidak ada jawabannya.
✨- Tidak ada masalah yang tidak Allah siapkan solusinya.

Dalam program ini, Sahabat akan mendapatkan:
✔- Konsultasi pribadi berbasis ayat Al-Qur’an
✔- Pendekatan spiritual yang lembut & solutif
✔- Pendalaman ayat sesuai kondisi pribadi
✔- Arahan langkah konkret setelah sesi
✔- Doa dan penguatan ruhiyah
✔- Fleksibel: Bisa Online maupun Offline
✔- Eksklusif & benar-benar private

🔒- Hanya untuk 3 Sahabat pertama.

Sahabat Dermawan…
Mungkin selama ini Sahabat sibuk menjadi penenang bagi banyak orang.
Kini saatnya Al-Qur’an menenangkan Sahabat.

📲- Silakan hubungi admin untuk reservasi.
Sebelum kuota penuh.

Semoga Allah membalas setiap kebaikan Sahabat dengan ketenangan hati yang luas dan keberkahan hidup yang tak terduga. 🤲✨-✨-
`Beli Tiket
-
import React, { useState, useEffect, useMemo } from 'react'; import { initializeApp } from 'firebase/app'; import { getAuth, signInWithCustomToken, signInAnonymously, onAuthStateChanged } from 'firebase/auth'; import { getFirestore, collection, query, onSnapshot, doc, addDoc, updateDoc, deleteDoc } from 'firebase/firestore'; import { Moon, Sun, BookOpen, HeartPulse, Zap, Plus, Home, BarChart2, CheckCircle2, Circle, Trash2, CalendarDays, ChevronLeft, ChevronRight } from 'lucide-react'; // --- FIREBASE INITIALIZATION --- // Initialize Firebase outside the component to prevent re-initialization const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {}; const app = initializeApp(firebaseConfig); const auth = getAuth(app); const db = getFirestore(app); const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id'; // --- KATEGORI HABIT --- const CATEGORIES = { Ibadah: { icon: Moon, color: 'text-[#109ef0]', bg: 'bg-[#9fedfb]/30', border: 'border-[#109ef0]' }, Ilmu: { icon: BookOpen, color: 'text-[#03d6fa]', bg: 'bg-[#9fedfb]/20', border: 'border-[#03d6fa]' }, Kesehatan: { icon: HeartPulse, color: 'text-[#109ef0]', bg: 'bg-[#109ef0]/10', border: 'border-[#109ef0]' }, Produktivitas: { icon: Zap, color: 'text-[#03d6fa]', bg: 'bg-[#03d6fa]/10', border: 'border-[#03d6fa]' }, }; // --- DATA HABIT BAWAAN (DEFAULT) --- const DEFAULT_HABITS = [ { name: '🧎 Shalat Tahajud', category: 'Ibadah', order: 1 }, { name: '📿 Dzikir Pagi', category: 'Ibadah', order: 2 }, { name: '📖 Tilawah Quran', category: 'Ibadah', order: 3 }, { name: '📿 Dzikir Petang', category: 'Ibadah', order: 4 }, { name: '💡 Hafalan Quran', category: 'Ilmu', order: 5 }, { name: '📚 Membaca Buku', category: 'Ilmu', order: 6 }, { name: '🤲 Sedekah', category: 'Produktivitas', order: 7 }, { name: '🏋️ Olahraga', category: 'Kesehatan', order: 8 } ]; export default function IslamicHabitTracker() { // --- STATE --- const [user, setUser] = useState(null); const [habits, setHabits] = useState([]); const [loading, setLoading] = useState(true); const [activeTab, setActiveTab] = useState('dashboard'); // 'dashboard', 'add', 'stats' const [selectedDate, setSelectedDate] = useState(new Date()); const [statsDate, setStatsDate] = useState(new Date()); const [isDarkMode, setIsDarkMode] = useState(() => { const saved = localStorage.getItem('habbitqu_theme'); return saved === 'dark'; }); useEffect(() => { localStorage.setItem('habbitqu_theme', isDarkMode ? 'dark' : 'light'); }, [isDarkMode]); // Form State const [newHabitName, setNewHabitName] = useState(''); const [newHabitCategory, setNewHabitCategory] = useState('Ibadah'); // --- 1. FIREBASE AUTHENTICATION --- useEffect(() => { const initAuth = async () => { try { if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) { await signInWithCustomToken(auth, __initial_auth_token); } else { await signInAnonymously(auth); } } catch (error) { console.error("Auth error:", error); } }; initAuth(); const unsubscribe = onAuthStateChanged(auth, (currentUser) => { setUser(currentUser); if (!currentUser) setLoading(false); }); return () => unsubscribe(); }, []); // --- 2. FIREBASE DATA FETCHING --- useEffect(() => { if (!user) return; // RULE 1: Strict path for private user data const habitsRef = collection(db, 'artifacts', appId, 'users', user.uid, 'habits'); // RULE 2: No complex queries. Fetch all, sort in memory. const q = query(habitsRef); const unsubscribe = onSnapshot(q, async (snapshot) => { // --- AUTO-POPULATE HABIT DEFAULT --- if (snapshot.empty) { const hasSeeded = localStorage.getItem(`seeded_habbitqu_${user.uid}`); if (!hasSeeded) { localStorage.setItem(`seeded_habbitqu_${user.uid}`, 'true'); try { for (const habit of DEFAULT_HABITS) { await addDoc(habitsRef, { name: habit.name, category: habit.category, order: habit.order, completedDates: [], createdAt: Date.now() }); } } catch (error) { console.error("Gagal menambahkan habit default:", error); } return; } } const fetchedHabits = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })); fetchedHabits.sort((a, b) => { if (a.order && b.order) return a.order - b.order; if (a.order) return -1; if (b.order) return 1; return b.createdAt - a.createdAt; }); setHabits(fetchedHabits); setLoading(false); }, (error) => { console.error("Firestore error:", error); setLoading(false); }); return () => unsubscribe(); }, [user]); // --- HELPER FUNCTIONS --- const getFormattedDate = (date) => { const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); return `${year}-${month}-${day}`; }; const selectedDateStr = getFormattedDate(selectedDate); const calendarDays = useMemo(() => { const days = []; for (let i = -3; i <= 3; i++) { const d = new Date(selectedDate); d.setDate(d.getDate() + i); days.push(d); } return days; }, [selectedDate]); // --- CRUD OPERATIONS --- const handleAddHabit = async (e) => { e.preventDefault(); if (!user || !newHabitName.trim()) return; try { const habitsRef = collection(db, 'artifacts', appId, 'users', user.uid, 'habits'); await addDoc(habitsRef, { name: newHabitName.trim(), category: newHabitCategory, completedDates: [], createdAt: Date.now() }); setNewHabitName(''); setActiveTab('dashboard'); } catch (error) { console.error("Error adding habit:", error); } }; const toggleHabitCompletion = async (habit) => { if (!user) return; const habitRef = doc(db, 'artifacts', appId, 'users', user.uid, 'habits', habit.id); const isCompleted = habit.completedDates?.includes(selectedDateStr); let updatedDates = [...(habit.completedDates || [])]; if (isCompleted) { updatedDates = updatedDates.filter(d => d !== selectedDateStr); } else { updatedDates.push(selectedDateStr); } try { await updateDoc(habitRef, { completedDates: updatedDates }); } catch (error) { console.error("Error updating habit:", error); } }; const deleteHabit = async (habitId) => { if (!user) return; try { const habitRef = doc(db, 'artifacts', appId, 'users', user.uid, 'habits', habitId); await deleteDoc(habitRef); } catch (error) { console.error("Error deleting habit:", error); } }; // --- RENDER COMPONENTS --- const renderDashboard = () => (
{/* Calendar Strip */}

{selectedDate.toLocaleDateString('id-ID', { month: 'long', year: 'numeric' })}

{calendarDays.map((date, i) => { const isSelected = getFormattedDate(date) === selectedDateStr; const isToday = getFormattedDate(date) === getFormattedDate(new Date()); return ( ); })}
{/* Habit List */}
{habits.length === 0 ? (

Belum ada Habit

Mulai bangun rutinitas positif Anda hari ini.

) : ( habits.map(habit => { const isCompleted = habit.completedDates?.includes(selectedDateStr); const cat = CATEGORIES[habit.category] || CATEGORIES['Ibadah']; const Icon = cat.icon; return (

{habit.name}

{habit.category}

); }) )}
); const renderAddHabit = () => (

Tambah Habit

setNewHabitName(e.target.value)} placeholder="Contoh: Tilawah 1 Juz..." className="w-full px-5 py-4 rounded-2xl border border-gray-200 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#109ef0] focus:border-transparent bg-white dark:bg-gray-800 shadow-sm font-medium text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition-colors" required />
{Object.entries(CATEGORIES).map(([catName, catData]) => { const Icon = catData.icon; const isSelected = newHabitCategory === catName; return ( ); })}
); const renderStats = () => { const targetMonth = String(statsDate.getMonth() + 1).padStart(2, '0'); const targetYear = statsDate.getFullYear(); const daysInMonth = new Date(targetYear, statsDate.getMonth() + 1, 0).getDate(); let totalPossible = habits.length * daysInMonth; let totalCompleted = 0; const habitStats = habits.map(habit => { const completedThisMonth = (habit.completedDates || []).filter(d => d.startsWith(`${targetYear}-${targetMonth}`)).length; totalCompleted += completedThisMonth; return { ...habit, completedThisMonth, percentage: Math.round((completedThisMonth / daysInMonth) * 100) }; }); const globalAverage = totalPossible > 0 ? Math.round((totalCompleted / totalPossible) * 100) : 0; return (

Pencapaian

{/* Month Navigator */}

{statsDate.toLocaleDateString('id-ID', { month: 'long', year: 'numeric' })}

{statsDate.getMonth() === new Date().getMonth() && statsDate.getFullYear() === new Date().getFullYear() ? 'Bulan Ini' : statsDate.getMonth() === new Date().getMonth() + 1 && statsDate.getFullYear() === new Date().getFullYear() ? 'Bulan Depan' : statsDate.getMonth() === new Date().getMonth() - 1 && statsDate.getFullYear() === new Date().getFullYear() ? 'Bulan Lalu' : 'Periode'}

{/* Global Summary Card */}

Rata-rata Pencapaian

{globalAverage}% dari {habits.length} kebiasaan

Detail per Habit

{habitStats.length === 0 ? (

Belum ada data untuk dianalisis.

) : ( habitStats.map(habit => { return (

{habit.name}

{habit.completedThisMonth} dari {daysInMonth} hari {habit.percentage}%
{/* Progress Bar */}
); }) )}
); }; if (loading) { return (
Memuat Data...
); } return (
{/* Mobile App Container */}
{/* App Header */}

HabbitQu

Assalamu'alaikum

{/* Main Content Area */} {activeTab === 'dashboard' && renderDashboard()} {activeTab === 'add' && renderAddHabit()} {activeTab === 'stats' && renderStats()} {/* Bottom Navigation */}
); }