-

Ramadhan hampir datang, tapi orang tua anda masih punya hutang puasa?

Mari tebarkan manfaat kepada sesama dengan tunaikan fidyah
Manfaatnya mengalir deras, insya Allah utang puasa terbayar lunas

Bayar Fidyah Mudah di MasjidAshqaf.com

`Lunasi Hutang Puasa



Tentang Program



Fidyah adalah tebusan atau pengganti puasa dengan cara memberikan makan dalam kadar tertentu kepada fakir miskin yang harus ditunaikan oleh seseorang yang tidak mampu melaksanakan puasa Ramadhan karena terhalang beberapa uzur syar’i.

Hal ini sesuai dengan Firman Allah, “Dan wajib bagi orang yang berat menjalankannya (jika mereka tidak berpuasa) membayar fidyah, (yaitu) memberi makan orang miskin”. (QS. Al Baqarah: 184)
-

Keutamaan Fidyah

Membayar Fidyah hukumnya wajib sebagai wujud menaati aturan dan mendekatkan diri pada Allah SWT, melatih rasa tanggung jawab muslim, dan sebagai bentuk kepekaan serta kepedulian muslim kepada sesama.
Menjalankan aturan dan syariat Islam
Upaya mendekatkan diri pada Allah
Melatih rasa tanggung jawab terhadap diri sendiri
Meningkatkan rasa kepekaan sosial terhadap sekitar
Melatih rasa kepedulian terhadap sesama
Memberikan rasa bahagia kepada fakir dan miskin
-

PERNAHKAH ANDA TIDAK BERPUASA KARENA ALASAN YANG DIBOLEHKAN SYARIAT?



"Dan wajib bagi orang-orang yang berat menjalankannya (jika mereka tidak berpuasa) membayar fidyah, (yaitu): memberi makan seorang miskin." (QS. Al-Baqarah: 184)

Siapa Yang Harus Membayar Fidyah Jika Meninggalkan Puasa Ramadhan?

Ibu Hamil/Menyusui
Orang Tua Lanjut Usia (Tua Renta)
Orang Sakit yang Tidak Ada Harapan Untuk Sembuh
Orang Yang Menunda Qodha’ Puasa sampai datang Ramdhan Selanjutnya

Kapan Waktu Melaksanakan Fidyah?


Membayar fidyah dapat dilakukan pada hari itu juga saat meninggalkan puasa atau sehari setelah meninggalkan puasa bisa juga dibayarkan diluar bulan ramadhan yaitu sebelum bertemu ramadhan selanjutnya.

Bagaimana Cara Menghitung Fidyah?

1 hari 1 mud atau setara dengan ¾ liter makanan pokok. Jadi jika anda meninggalkan puasa maka fidyahnya ialah memberi makan 3x sehari untuk fakir miskin.

(Jumlah hutang puasa) x (Biaya makan 1 hari) = Jumlah fidyah yang harus dibayarkan


Jika dikonversikan sekali makan sebesar Rp.15.000,- maka untuk nominal fidyah sebesar Rp.45.000,- untuk 3x makan mustahik dalam sehari lengkap dengan lauk.


Kenapa Harus Bayar Fidyah Di Masjid Ashqaf ?

Yayasan berbadan hukum dan
terpercayaPengelola dana fidyah amanah
Fidyah dikelola oleh tenaga profesional
Pelaporan transparan
Distribusi tepat sasaran

Bayar fidyah untuk orang tua mu adalah bukti baktimu Bantu Sesama dengan Menunaikan Hutang Puasa Atas Nama Orang Tua!Tuntaskan Hutang Puasa, Maksimalkan Amalan di Bulan yang Mulia!

`BAYAR FIDYAH 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 */}
); }