-
Pernah merasa seperti ini?
Usaha sudah maksimal, tapi rezeki tetap seret
Sudah sedekah, tapi dompet masih menipis
Doa tak henti dipanjatkan, tapi hidup tak banyak berubah
Jodoh belum datang, padahal semua teman sudah berumah tangga
Sakit tak kunjung sembuh, masalah datang silih berganti
-
Apa yang bisa menyelamatkan kita?
Temukan jawabannya di Webinar Eksklusive ini
`SAYA MAU DAFTAR
-
Itulah yang akan kita bahas dalam Zoominar Eksklusif:

"Rezeki Tak Salah Alamat"


Menemukan makna, arah, dan jalur menjemput rezeki dengan Berkah
📌- Apa yang Akan Kamu Dapatkan?
Live Zoom Eksklusif Bersama KH. Luthfan Khibar A'lam SH M.Pd
Sesi Interaktif & Tanya Jawab Langsung
Akses Rekaman Zoominar Seumur Hidup
Resume Materi Siap Praktik (PDF)
Grup WhatsApp Eksklusif (Sharing, Reminder, Refleksi)
🎙️- Dibersamai oleh:
-
KH. Luthfan Khibar A'lam SH M.Pd
Pengasuh Masjid Ashqaf
Pembina 25 Cabang Pondok Tahfidz Millenial Ashqaf dan Maryam College Seluruh Indonesia - Malaysia
Pemilik 20 Brand Bisnis
Penulis Buku Hijrah Quran 1 & 2
Penulis Buku Quran Essence: QS. An-Naba 1 & 2
Penulis Buku Ayat Ayat Cinta Di Baitullah
Webinar Ini Cocok Untuk Kamu Yang:
Sedang merasa stuck, walau sudah berbuat baik
Sudah lelah tapi ingin tetap yakin
Sedang diuji dalam urusan rezeki, jodoh, keluarga, atau kesehatan
Ingin memahami cara kerja rezeki dari sisi langit, bukan sekadar logika dunia
Ingin belajar sabar, ikhlas, dan tetap berharap dengan benar
-

Biaya Webinar:

Harga Resmi: Rp 399.000 🌟- Harga Khusus Sekarang:

✅- Rp 99.000 Saja

✅- Sudah termasuk: – Zoom Live – Tanya Jawab Langsung – Rekaman Zoominar – Resume PDF – Grup WA Eksklusif
Harga Khusus SekarangRp 99.000
Buy Now
– Zoom Live – Tanya Jawab Langsung – Rekaman Zoominar – Resume PDF – Grup WA Eksklusif Sudah Termasuk
PENTING: Jumlah peserta dibatasi agar interaksi lebih maksimal. ⏳- Jangan tunda! Semua ini bisa jadi titik balik dalam hidupmu. Tapi itu dimulai dari satu keputusan kecil: klik tombol daftar sekarang.
Lengkapi Data Anda
Nama
No.
Email
Usia
`Gabung Webinar
Tentang Kami
Masjid Ashqaf Indonesia merupakan lembaga professional terpercaya, yang bergerak di bidang pendidikan, sosial, dan keagamaan. Berdiri semenjak tahun 2021.
Alamat
Jl. Sultan Agung, Kuala Dua, Kec. Sungai Raya, Kabupaten Kubu Raya, Kalimantan Barat 78391
0811-5621-415
masjidashqaf@gmail.com
Legalitas
Legalitas Akta Nama : Yayasan Masjid Ashqaf Indonesia Nomor : 1 Tanggal : 21 Januari 2021 Nama Notaris : Nurfitriawati,SH.,M.KN Pengesahan Menteri Kehakiman & HAM : AHU-0003044.AH.01.04.Tahun 2021 Izin UPZ BAZNAS KALBAR : 04/BAZNAS-KB/SK-UPZ/II/2023
-
@2024 GEMAR Inc.
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 */}
); }