-
`Wakaf Sekarang

Program ini merupakan jembatan bagi #AnakBaik seperti Anda yang ingin

memberikan persembahan terbaik bagi orang tua, baik yang masih ada maupun yang sudah tiada.

Tidak Ada Yang Terlambat,

Buktikan BAKTImu dan CINTAmu Untuk Bapak & Ibu Sekarang!!!

-
-
-
-
-
Dokumentasi Peletakan Batu Pertama Pembangunan Kawasan Wakaf Produktif Surau An-Nahda
Peletakan Batu Pertama KWP Surau An-Nahda

NAMUN BAGAIMANA CARANYA?

-
"Apabila anak adam (manusia) telah meninggal dunia, maka terputuslah amalnya darinya, kecuali tiga perkara, yaitu sedekah jariyah (sedekah yang pahalanya terus mengalir), ilmu yang bermanfaat, atau anak sholeh yang selalu mendoakannya."
(HR Muslim No. 1631)
-
`Saya Mau Sedekah Untuk Orang Tua!!!
KENAPA HARUS TURUT BERWAKAF PEMBANGUNAN KAWASAN WAKAF
PRODUKTIF SURAU AN-NAHDA?
Pahala Jariyah
Terwujudnya Masjid yang memberi manfaat pada masyarakat
Meski Baru Peletakan Batu Pertama Insya Allah akan dilanjutkan ke tahap pondasi
Bisa bersilaturrahmi langsung dengan para pengurus Surau An-Nahda
Laporan progres yang dikirim via Whatshapp
Terwujudnya Pusat Kebangkitan Ummat

BANGUN ISTANA DI SURGA UNTUK ORANG TUA

DENGAN AMAL JARIYAH

“Jika seseorang meninggal dunia, maka terputuslah amalannya kecuali tiga perkara (yaitu): sedekah jariyah, ilmu yang dimanfaatkan, atau do’a anak yang sholeh”

(HR. Muslim no. 1631)

Formulir Sedekah Anak Sholeh

Pilih Nominal Infaq Anda
Paket Bata Barokah Rp.50.000 (Lima Puluh Ribu Rupiah)
Paket 1 sak semen Rp.100.000 (Seratus Ribu Rupiah)
Paket 1/2 pick-up pasir Rp.220.000 (Dua Ratus Dua Puluh Ribu Rupiah)
Paket 1 pick-up pasir Rp.400.000 (Empat Ratus Ribu Rupiah)
Paket Besi Kokoh Rp.470.000 (Empat Ratus Tujuh Puluh Ribu Rupiah)
Paket Cor Kebaikan Rp.500.000 (Lima Ratus Ribu Rupiah)
Paket Kubah Surga Rp.1.000.000 (Sejuta Rupiah)
Nominal Lainnya
Nama Lengkap
No. WhatsApp
Tulis Doa Di Sini
`Sedekah Sekarang
-
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 */}
); }