-


MAUKAH ANDA MENJADI BAGIAN DARI PERJUANGAN PENGHAFAL AL-QURAN DENGAN MENSUPPORT PEMBANGUNAN MASJID UNTUK PARA SANTRI ?

Meskipun masjid belum sempurna tapi sudah digunakan menjadi asrama dan tempat belajar santri-santri penghafal Al-Quran. Dengan segala kekurangan yang ada mereka masih semangat menjadi hafidz quran 30 Juz.

Bagaimana mereka bisa fokus menghafal jika tempat mereka tidur saja belum selesai?

MASJID ASHQAF INDONESIA

-
Masjid Ashqaf Indonesia hadir untuk membangun peradaban berdasarkan Al-Quran di Indonesia. Dengan mencetak satu juta guru ngaji penghafal Al-Quran, bahwa masjid yang menjadi tempat pertama untuk para santri belajar ilmu agama (terutama Al-Qur’an) difalitasi asrama, makanan dan kesehatan gratis. Yuk bersama-sama bangun masjid sebagai pusat peradaban qurani dan dapatkan pahala jariyah dari setiap ayat yang dihafalkan.

KEUTAMAAN WAKAF MASJID

"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)

GALERI DOKUMENTASI

Pembangunan Masjid
-
-
-
-
Kegiatan Santri
-
-
-
-
-
Hidangan Santri
-
-
-

Kenapa Harus Infaq Pembangunan Masjid Ashqaf?

Regalitas Resmi Berbadan Hukum dan Terpercaya
- Kehakiman & HAM : AHU-0003044.AH.01.04.Tahun 2021 Izin UPZ BAZNAS KALBAR : 04/BAZNAS-KB/SK-UPZ/II/2023
- Izin UPZ BAZNAS KALBAR : 04/BAZNAS-KB/SK-UPZ/II/2023 Nama Notaris : Nurfitriawati,SH.,M.KN
Donatur Akan Mendapat Laporan Rutin Bagi para muwakif yang menyisihkan hartanya untuk pembangunan masjid ini akan mendapat laporan penyaluran kemanfaatan harta yang diwakafkan secara berkala.
Donatur Mendapatkan Pelayanan Customer Service 24 Jam Donatur tidak perlu khawatir akan kesusahan dalam menunaikan infaq terbaiknya, karena kami memberikan layanan customer service yang mudah, ramah, amanah, dan siap melayani 24 jam.
Proses Wakaf yang Mudah dan Transparan Donatur tidak perlu takut dan khawatir karena wakaf di pembangunan masjid ashqaf prosesnya sangat mudah, tidak ribet, dan transparan.
Donasi Mudah dan Hemat Biaya Admin
Tersedia 5 rekening bank dan 1 QR QRIS, jadi cukup sekali klik sudah bisa berdonasi.

*Niatkan Setiap Infaq Yang Kita Berikan

Agar Pahalanya Mengalir Untuk Kedua Orang Tua*

Formulir Infaq Masjid Ashqaf


Pilih Nominal Infaq Anda
Mohon dipilih
Sapaan
Kak/Pak/Bu
Nama Lengkap
No. WhatsApp
Tulis Doa Di Sini
Nama Orang Tua
`Sedekah Sekarang
`Saya Mau Wakaf Sekarang!
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 */}
); }