import React, { useState, useMemo } from ‘react’; import { MapPin, Users, Building, ArrowRight, Target, Briefcase, Home, TrendingUp, Search, ExternalLink, Share2, X } from ‘lucide-react’; import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from ‘recharts’; // — RUANG EDIT (UBAH TEKS DI SINI) — // Anda boleh menukar tajuk dan footer laporan di sini pada bila-bila masa. const CONFIG = { title: “Senarai Masjid Serta Surau Sekitar Kuala Lumpur”, footer: “© 2026 Projek Misi RM1 Juta | Dijana untuk kegunaan dalaman sahaja.” }; // Data Lengkap 100 Masjid & Surau const zonesData = [ { id: “A”, name: “Zon A: Pusat Bandar & Warisan”, desc: “Lokasi Ikonik & Pelancong”, potential: “High Profile / Branding”, color: “bg-blue-600”, locations: [ “Masjid Negara”, “Masjid Wilayah Persekutuan”, “Masjid Jamek Sultan Abdul Samad”, “Masjid Asy-Syakirin (KLCC)”, “Masjid Al-Bukhary”, “Masjid Jamek Kampung Baru”, “Masjid India”, “Masjid Al-Islamiah (Kg Baru)”, “Masjid Pakistan”, “Masjid Abu Bakar As-Siddiq”, “Masjid Ar-Rimah” ] }, { id: “B”, name: “Zon B: Damansara & TTDI”, desc: “Komuniti Elit & T20”, potential: “High Ticket Clients (Corporate)”, color: “bg-purple-600”, locations: [ “Masjid At-Taqwa (TTDI)”, “Masjid Saidina Umar Al-Khattab”, “Masjid Tengku Abdul Aziz Shah”, “Masjid Al-Ghufran”, “Masjid Tun Abdul Aziz (PJ)”, “Masjid Jamek Sultan Abdul Aziz”, “Masjid Kolej Islam Malaya”, “Masjid Al-Makmuriah”, “Masjid Kota Damansara”, “Surau Mutiara Damansara” ] }, { id: “C”, name: “Zon C: Bangsar & Sunway”, desc: “Elit Moden & Pembangunan Pesat”, potential: “Mid-High Corporate & SME”, color: “bg-indigo-600”, locations: [ “Masjid Saidina Abu Bakar As-Siddiq”, “Masjid Ar-Rahman (UM)”, “Masjid Ar-Rahah (Kerinchi)”, “Masjid Jamek Al-Khadijah”, “Masjid Al-Ikhlasiah”, “Masjid Al-Husna (Sunway)”, “Masjid Darul Ehsan (Subang)”, “Masjid Al-Amin (Kelana Jaya)”, “Masjid Al-Hidayah (Kelana Jaya)” ] }, { id: “D”, name: “Zon D: Bkt Jalil & Jln Klang Lama”, desc: “Akses Lebuhraya & Trafik Tinggi”, potential: “Mass Market Exposure”, color: “bg-cyan-600”, locations: [ “Masjid Talhah Bin Ubaidillah”, “Masjid Jamek Petaling”, “Masjid Abdul Rahman Bin Auf”, “Masjid Al-Muhsinin”, “Masjid Nurullah”, “Masjid As-Salam (Puchong)”, “Masjid Al-Husna (Puchong)”, “Masjid Taman Putra Perdana”, “Surau Al-Hijrah (Bkt Jalil)”, “Masjid Al-Ehsan (Abdullah Hukum)” ] }, { id: “E”, name: “Zon E: Cheras & Sg Besi”, desc: “Kepadatan Penduduk Tertinggi”, potential: “Volume Sales & PKS”, color: “bg-orange-600”, locations: [ “Masjid Al-Najihin”, “Masjid Saidina Othman Ibnu Affan”, “Masjid Al-Mukhlisin”, “Masjid Al-Imam Ash-Shafie”, “Masjid Az-Zubair Ibnu Awwam”, “Masjid Jamek Batu 10”, “Masjid Al-Mubarakah”, “Masjid Al-Ansar (Len Seng)”, “Masjid Jamek Sg Besi”, “Masjid Ibnu Khaldun”, “Masjid Bdr Tun Hussein Onn”, “Masjid Ashabus Solihin” ] }, { id: “F”, name: “Zon F: Ampang & Keramat”, desc: “Komuniti Melayu Tradisi”, potential: “Family Products & Services”, color: “bg-teal-600”, locations: [ “Masjid Muadz Bin Jabal”, “Masjid Al-Akram”, “Masjid As-Sobirin”, “Masjid Al-Ansar (Keramat)”, “Masjid Darul Ehsan (Ampang)”, “Masjid Jamek Ampang”, “Masjid Bukit Indah”, “Masjid Al-Azim (Pandan)”, “Masjid Nurul Islam”, “Masjid Fatimah Az-Zahra”, “Surau Al-Ittihad” ] }, { id: “G”, name: “Zon G: Wangsa Maju & Setapak”, desc: “Pelajar & Keluarga Muda”, potential: “Viral Content & Youth”, color: “bg-pink-600”, locations: [ “Masjid Usamah Bin Zaid”, “Masjid Abu Ubaidah Al-Jarrah”, “Masjid Salahuddin Al-Ayubbi”, “Masjid Saidina Ali K.W.”, “Masjid Al-Iman (Kemensah)”, “Masjid Al-Hidayah (Melawati)”, “Masjid Al-Ridhuan”, “Surau Al-Falah (Danau Kota)”, “Surau Al-Iman (Setapak)” ] }, { id: “H”, name: “Zon H: Gombak & Sentul”, desc: “Kawasan Laluan Utama Utara”, potential: “Mass Market & Tradisi”, color: “bg-green-600”, locations: [ “Masjid Zaid Bin Harithah”, “Masjid Amru Ibni Al-Ass”, “Masjid Al-Hidayah (Sentul)”, “Masjid Ibnu Sina”, “Masjid Saad Bin Abi Waqqas”, “Masjid Al-Syakirin”, “Masjid Zakaria”, “Masjid Al-Khairiyah”, “Masjid Jamek Al-Amaniah”, “Masjid Annur”, “Masjid Bilal Bin Rabah” ] }, { id: “I”, name: “Zon I: Kepong & Segambut”, desc: “Industri & Perumahan Bercampur”, potential: “SME Owners & Suppliers”, color: “bg-yellow-600”, locations: [ “Masjid Amaniah (Kepong)”, “Masjid Al-Imam Al-Ghazali”, “Masjid Al-Qurtubi”, “Masjid Al-Firdaus”, “Masjid Saidina Hamzah”, “Masjid Bdr Sri Damansara”, “Masjid Al-Mukarramah”, “Masjid Jamek Sg Buloh”, “Surau Al-Ikhlas” ] }, { id: “J”, name: “Zon J: Surau Korporat & Mall”, desc: “Akses Awam & Trafik Tinggi”, potential: “Brand Awareness / Sampling”, color: “bg-slate-600”, locations: [ “Surau Tabung Haji”, “Surau Menara TM”, “Surau Plaza TBS”, “Surau KL Sentral”, “Surau Gateway Mall”, “Surau Publika”, “Surau Wangsa Walk”, “Surau IKEA/The Curve” ] } ]; const Dashboard = () => { const [activeZone, setActiveZone] = useState(“All”); const [searchQuery, setSearchQuery] = useState(“”); const [isSearching, setIsSearching] = useState(false); // Filter Data Logic (Zone Filter) const filteredData = activeZone === “All” ? zonesData : zonesData.filter(z => z.id === activeZone); // Search Logic (Global Search) const searchResults = useMemo(() => { if (!searchQuery.trim()) return []; const query = searchQuery.toLowerCase(); const results = []; zonesData.forEach(zone => { zone.locations.forEach(loc => { if (loc.toLowerCase().includes(query)) { results.push({ name: loc, zoneId: zone.id, zoneName: zone.name, potential: zone.potential, color: zone.color, mapUrl: `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(loc + ” Kuala Lumpur”)}` }); } }); }); return results; }, [searchQuery]); const handleSearch = (e) => { e.preventDefault(); if(searchQuery.trim()) setIsSearching(true); }; const handleLocationClick = (locationName) => { setSearchQuery(locationName); setIsSearching(true); // Smooth scroll if needed, though often immediate feedback is enough // window.scrollTo({ top: 300, behavior: ‘smooth’ }); }; const clearSearch = () => { setSearchQuery(“”); setIsSearching(false); }; const shareLocation = (loc) => { const text = `Jom kita pergi ke ${loc.name} (${loc.zoneName}). Lokasi: ${loc.mapUrl}`; const whatsappUrl = `https://wa.me/?text=${encodeURIComponent(text)}`; window.open(whatsappUrl, ‘_blank’); }; // Data for Chart const chartData = zonesData.map(z => ({ name: z.id, count: z.locations.length, fullName: z.name, color: z.color.replace(‘bg-‘, ”) // approximate for recharts, but we’ll use custom cell })); const totalLocations = zonesData.reduce((acc, curr) => acc + curr.locations.length, 0); return ( ); }; export default Dashboard;