import React, { useState, useMemo } from 'react'; // --- MOCK DATA --- const MOCK_PRODUCTS = [ { id: 1, name: 'Pompa Air Shimizu PS-135 E', price: 550000, category: 'Pompa', type: 'product', rating: 4.8, sold: 124, image: 'pompa', desc: 'Pompa air sumur dangkal otomatis dengan daya hisap maksimal 9 meter. Cocok untuk kebutuhan rumah tangga.' }, { id: 2, name: 'Kaporit Kolam Renang TCCA 90% (1kg)', price: 45000, category: 'Obat Kolam', type: 'product', rating: 4.9, sold: 300, image: 'kaporit', desc: 'Kaporit granular berkualitas tinggi untuk menjaga kejernihan air kolam renang dari lumut dan bakteri.' }, { id: 3, name: 'Jasa Kuras & Pembersihan Kolam', price: 350000, category: 'Jasa', type: 'service', rating: 5.0, sold: 45, image: 'jasa', desc: 'Layanan pembersihan kolam renang profesional area Jawa Tengah. Termasuk sikat kerak, vakum dasar, dan pengecekan filter.' }, { id: 4, name: 'Filter Tabung Sand Filter 16 Inch', price: 2100000, category: 'Pompa', type: 'product', rating: 4.7, sold: 12, image: 'filter', desc: 'Sand filter untuk kolam renang kapasitas sedang. Tahan tekanan tinggi dan anti karat.' }, { id: 5, name: 'PAC (Poly Aluminium Chloride) 1kg', price: 25000, category: 'Obat Kolam', type: 'product', rating: 4.6, sold: 150, image: 'pac', desc: 'Penjernih air kolam renang yang ampuh mengikat kotoran agar mengendap ke dasar kolam.' }, { id: 6, name: 'Jasa Service Pompa Air', price: 150000, category: 'Jasa', type: 'service', rating: 4.8, sold: 88, image: 'service', desc: 'Perbaikan pompa air mati total, suara bising, atau daya hisap lemah. Bergaransi 1 minggu.' }, ]; // --- ICONS (Inline SVGs) --- const Icons = { Search: () => , Cart: () => , User: () => , Star: () => , Location: () => , Store: () => , WhatsApp: () => }; // --- HELPER COMPONENT: IMAGE PLACEHOLDER --- const ProductImage = ({ type, className }) => { const bgColor = type === 'pompa' || type === 'filter' ? 'bg-blue-100' : type === 'kaporit' || type === 'pac' ? 'bg-cyan-100' : 'bg-sky-100'; const textColor = type === 'pompa' || type === 'filter' ? 'text-blue-500' : type === 'kaporit' || type === 'pac' ? 'text-cyan-500' : 'text-sky-500'; return (
{type}
); }; // --- MAIN APP COMPONENT --- export default function App() { const [currentView, setCurrentView] = useState('home'); // home, catalog, detail, cart, user, admin const [selectedProduct, setSelectedProduct] = useState(null); const [cart, setCart] = useState([]); const [searchQuery, setSearchQuery] = useState(''); // Formatter Rupiah const formatRp = (number) => { return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(number); }; const navigateTo = (view, product = null) => { setCurrentView(view); if (product) setSelectedProduct(product); window.scrollTo(0, 0); }; const addToCart = (product, qty = 1) => { setCart(prev => { const existing = prev.find(item => item.id === product.id); if (existing) { return prev.map(item => item.id === product.id ? { ...item, qty: item.qty + qty } : item); } return [...prev, { ...product, qty }]; }); alert(`${product.name} ditambahkan ke keranjang!`); }; // --- SUB-COMPONENTS (VIEWS) --- const Navbar = () => (
{/* Logo */}
navigateTo('home')}>

Jateng Pool Store

{/* Search Bar */}
setSearchQuery(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && navigateTo('catalog')} />
{/* Navigation & Icons */}
); const Footer = () => ( ); const HomeView = () => (
{/* Hero Banner */}

Solusi Air & Kolam Renang Terbaik di Jawa Tengah

Beli pompa air, perlengkapan kolam, atau pesan jasa kuras langsung melalui WhatsApp. Mudah, Cepat & Terpercaya.

{/* Decorative elements */}
{/* Grid Kategori */}

Kategori Pilihan

{[ { name: 'Pompa Air', icon: '๐Ÿ’ง', color: 'bg-blue-100 text-blue-600' }, { name: 'Obat Kolam', icon: '๐Ÿงช', color: 'bg-cyan-100 text-cyan-600' }, { name: 'Jasa Kuras', icon: '๐Ÿงน', color: 'bg-sky-100 text-sky-600' }, { name: 'Filter', icon: '๐Ÿ›ข๏ธ', color: 'bg-gray-100 text-gray-600' }, { name: 'Aksesoris', icon: '๐ŸŠ', color: 'bg-indigo-100 text-indigo-600' }, { name: 'Semua', icon: 'โžก๏ธ', color: 'bg-blue-100 text-blue-600' }, ].map(cat => (
navigateTo('catalog')} className="flex flex-col items-center justify-center p-4 bg-white rounded-xl shadow-sm border border-gray-100 cursor-pointer hover:shadow-md transition">
{cat.icon}
{cat.name}
))}
{/* Terlaris */}

Produk & Jasa Terlaris

{MOCK_PRODUCTS.slice(0, 4).map(product => (
navigateTo('detail', product)}>
{product.type === 'service' && ( JASA )}

{product.name}

{formatRp(product.price)}
{product.rating} Terjual {product.sold}
))}
); const CatalogView = () => { const [filterCategory, setFilterCategory] = useState('Semua'); const [sortBy, setSortBy] = useState('Terbaru'); const filteredProducts = MOCK_PRODUCTS.filter(p => { if (filterCategory !== 'Semua' && p.category !== filterCategory) return false; if (searchQuery && !p.name.toLowerCase().includes(searchQuery.toLowerCase())) return false; return true; }).sort((a, b) => { if (sortBy === 'Termurah') return a.price - b.price; if (sortBy === 'Termahal') return b.price - a.price; return b.id - a.id; // Default Terbaru }); return (
{/* Sidebar Filter */}

Filter

Kategori

{['Semua', 'Pompa', 'Obat Kolam', 'Jasa'].map(cat => ( ))}

Urutkan

{/* Main Grid */}

{searchQuery ? `Hasil Pencarian: "${searchQuery}"` : 'Katalog Produk & Jasa'}

{filteredProducts.length === 0 ? (

Barang atau jasa tidak ditemukan.

) : ( <>
{filteredProducts.map(product => (
navigateTo('detail', product)}>
{product.type === 'service' && ( JASA )}
{product.category}

{product.name}

{formatRp(product.price)}
{product.rating} {product.sold} Terjual
))}
{/* Pagination (Mock) */}
)}
); }; const ProductDetailView = () => { if (!selectedProduct) return null; const isService = selectedProduct.type === 'service'; return (
navigateTo('home')}>Beranda / navigateTo('catalog')}>Katalog / {selectedProduct.name}
{/* Gallery */}
{/* Details */}

{selectedProduct.name}

Terjual {selectedProduct.sold} {selectedProduct.rating}
{formatRp(selectedProduct.price)}

Deskripsi {isService ? 'Layanan' : 'Produk'}:

{selectedProduct.desc}

{/* Action Box */}

Atur Pesanan

{isService ? (
) : (
Stok: Tersedia
)}
Subtotal {formatRp(selectedProduct.price)}
); }; const CartCheckoutView = () => { const [custName, setCustName] = useState(''); const [custPhone, setCustPhone] = useState(''); const [custAddress, setCustAddress] = useState(''); const subtotal = cart.reduce((sum, item) => sum + (item.price * item.qty), 0); const hasService = cart.some(item => item.type === 'service'); const shippingCost = hasService ? 0 : (subtotal > 0 ? 25000 : 0); // Flat ongkir atau gratis jika jasa const handleWhatsAppCheckout = () => { if (cart.length === 0) return alert("Keranjang kosong!"); if (!custName || !custPhone || !custAddress) return alert("Mohon lengkapi data pengiriman Anda."); const waNumber = "6281234567890"; // Nomor WA Toko (Ganti sesuai kebutuhan) let message = `Halo *Jateng Pool Store*, saya ingin memesan:\n\n`; cart.forEach((item, idx) => { message += `${idx + 1}. ${item.name} (${item.qty}x) - ${formatRp(item.price * item.qty)}\n`; }); message += `\n*Total Belanja (belum termasuk ongkir jika ada): ${formatRp(subtotal)}*\n\n`; message += `*Data Pengiriman:*\n`; message += `Nama: ${custName}\n`; message += `No. HP/WA: ${custPhone}\n`; message += `Alamat Lengkap: ${custAddress}\n\n`; message += `Mohon konfirmasi total tagihan akhir dan metode pembayarannya. Terima kasih.`; const waUrl = `https://wa.me/${waNumber}?text=${encodeURIComponent(message)}`; window.open(waUrl, '_blank'); setCart([]); // Clear cart after redirect navigateTo('home'); }; return (

Keranjang Belanja

{/* Cart Items & Address */}
{/* Items List */}

Daftar Item

{cart.length === 0 ? (

Keranjang Anda masih kosong. Ayo belanja!

) : ( cart.map((item, idx) => (

{item.name}

{formatRp(item.price)}

{item.qty}
)) )}
{/* Address Form */} {cart.length > 0 && (

Lokasi Pengiriman / Pengerjaan Jasa

setCustName(e.target.value)} className="w-full border rounded-lg p-2 focus:ring-1 focus:ring-blue-500 outline-none" />
setCustPhone(e.target.value)} className="w-full border rounded-lg p-2 focus:ring-1 focus:ring-blue-500 outline-none" />
)}
{/* Summary Box */}

Ringkasan Belanja

Total Harga ({cart.length} barang) {formatRp(subtotal)}
Estimasi Ongkir {shippingCost === 0 ? 'Gratis' : formatRp(shippingCost)}
Total Estimasi {formatRp(subtotal + shippingCost)}
Pesanan Anda akan dikirimkan ke WhatsApp admin kami untuk konfirmasi ketersediaan stok dan total tagihan akhir.
); }; const UserDashboardView = () => (
{/* Profile Sidebar */}
B

Bapak Budi

budi@email.com

Member Silver
  • Pesanan Saya
  • Daftar Keinginan
  • Alamat Saya
  • Pengaturan Akun
{/* Order History */}

Riwayat Pesanan

{/* Status Tabs */}
{/* Order Cards Mockup */}
{/* Ongoing Order */}
Diproses 12 Jun 2026 TRX-123456
Jateng Pool Store

Jasa Kuras & Pembersihan Kolam

1 x Rp 350.000

Jadwal: 15 Jun 2026

Total Belanja Rp 350.000
{/* Completed Order */}
Selesai 01 Mei 2026 TRX-987654

Kaporit Kolam Renang TCCA 90% (1kg)

2 x Rp 45.000

Total Belanja Rp 115.000
); const AdminDashboardView = () => { const [adminTab, setAdminTab] = useState('dashboard'); // dashboard, catalog, crm, promo return (

Pusat Komando Admin

Kelola operasional Jateng Pool Store

{/* Admin Sidebar */}
    {[ { id: 'dashboard', name: 'Dashboard' }, { id: 'catalog', name: 'Manajemen Katalog' }, { id: 'crm', name: 'Pelanggan (CRM)' }, { id: 'promo', name: 'Promosi & Diskon' } ].map(tab => (
  • setAdminTab(tab.id)} className={`px-4 py-3 border-b cursor-pointer font-medium ${adminTab === tab.id ? 'bg-blue-50 text-blue-600 border-l-4 border-l-blue-600' : 'text-gray-600 hover:bg-gray-50'}`} > {tab.name}
    • ))}
{/* Admin Content Area */}
{adminTab === 'dashboard' && (
{/* Stats Cards */}

Total Penjualan Hari Ini

Rp 1.250.000

Pesanan Baru (WA)

4 pesanan

Jadwal Jasa Mendatang

2 layanan

{/* Kanban Board Mockup */}

Status Transaksi Berjalan

{/* Column 1 */}

Pesanan Masuk 2

INV/2026/06/14

Pompa Shimizu (1x)

{/* Column 2 */}

Sedang Diproses 1

JASA/2026/06/15

Kuras Kolam (Bpk. Budi)

{/* Column 3 */}

Selesai Hari Ini 0

Belum ada pesanan selesai

)} {adminTab === 'catalog' && (

Daftar Produk & Jasa

{MOCK_PRODUCTS.map(product => ( ))}
ID Nama Item Kategori Harga Aksi
#{product.id} {product.name} {product.category} {formatRp(product.price)}
)} {adminTab === 'crm' && (
๐Ÿ‘ฅ

Manajemen Pelanggan

Tabel database pengguna, tiering loyalty, dan tombol Export CSV akan dirender di sini.

)} {adminTab === 'promo' && (
๐ŸŽŸ๏ธ

Manajemen Voucher

Pembuatan kode kupon promo dan pelacakan klaim akan dikelola di panel ini.

)}
); }; // --- RENDER ROUTER --- return (
{currentView === 'home' && } {currentView === 'catalog' && } {currentView === 'detail' && } {currentView === 'cart' && } {currentView === 'user' && } {currentView === 'admin' && }
{currentView !== 'admin' &&
); }