import React, { useState } from 'react'; import { LayoutDashboard, Lightbulb, CalendarDays, ShoppingBag, BarChart3, Settings, Search, Bell, Plus, Filter, Download, ArrowUpRight, ArrowDownRight, Instagram, Music, Store, CheckCircle2, Clock, Target, Users, Activity } from 'lucide-react'; // ========================================== // MOCK DATA // ========================================== const benchmarkData = [ { brand: 'Swarovski', focus: 'Kemewahan Visual', strength: 'Pencahayaan sinematik, Shoppable content', weakness: 'Kurang personal/emosional', priceRange: 'Rp 1.5Jt - 10Jt+', strategy: 'Buat visual setara, tapi dengan narasi yang lebih hangat.' }, { brand: 'Pandora', focus: 'Storytelling (Kenangan)', strength: 'UGC kuat, Loyalitas tinggi, Gifting', weakness: 'Desain charm kadang terlalu ramai', priceRange: 'Rp 800rb - 5Jt+', strategy: 'Ambil konsep emosionalnya, tapi ubah angle ke "Self-Worth".' }, { brand: 'Panlandwoo', focus: 'Aksesibilitas Lokal', strength: 'Dominasi marketplace, Edukasi anti-karat', weakness: 'Kurang eksklusif, terlalu mass-market', priceRange: 'Rp 100rb - 300rb', strategy: 'Tiru agresivitas promosinya di Shopee/TikTok.' }, ]; const contentData = [ { id: 1, platform: 'Instagram', format: 'Reels', title: 'The Vision (Teaser)', stage: 'Published', date: '04 Ags 2026', views: '12.4K' }, { id: 2, platform: 'TikTok', format: 'Video', title: 'A Day in the Life w/ Bonhera', stage: 'Ready', date: '05 Ags 2026', views: '-' }, { id: 3, platform: 'Instagram', format: 'Carousel', title: 'Kenapa Harus Titanium?', stage: 'Production', date: '06 Ags 2026', views: '-' }, { id: 4, platform: 'TikTok', format: 'Video', title: 'Packing Orders (ASMR)', stage: 'Ideation', date: '07 Ags 2026', views: '-' }, ]; const orderData = [ { id: 'SHP-9021', name: 'Amanda R.', product: 'The Clarity Ring (Silver)', source: 'Shopee', status: 'Perlu Dikirim', total: 299000, date: '04 Ags' }, { id: 'TTS-8812', name: 'Budi S.', product: 'The Resilience Chain', source: 'TikTok Shop', status: 'Dikirim', total: 459000, date: '03 Ags' }, { id: 'SHP-9022', name: 'Citra K.', product: 'The Dawn Necklace', source: 'Shopee', status: 'Selesai', total: 349000, date: '02 Ags' }, { id: 'TTS-8813', name: 'Diana P.', product: 'Bundling: The Weekend Set', source: 'TikTok Shop', status: 'Perlu Dikirim', total: 650000, date: '04 Ags' }, ]; const reportData = { daily: [ { label: '01:00', sales: 0, traffic: 12 }, { label: '06:00', sales: 1, traffic: 45 }, { label: '12:00', sales: 4, traffic: 150 }, { label: '18:00', sales: 7, traffic: 320 }, { label: '21:00', sales: 12, traffic: 410 }, { label: '23:00', sales: 2, traffic: 80 } ], weekly: [ { label: 'Sen', sales: 12, traffic: 450 }, { label: 'Sel', sales: 19, traffic: 600 }, { label: 'Rab', sales: 15, traffic: 520 }, { label: 'Kam', sales: 22, traffic: 710 }, { label: 'Jum', sales: 28, traffic: 890 }, { label: 'Sab', sales: 35, traffic: 1200 }, { label: 'Min', sales: 42, traffic: 1500 } ], monthly: [ { label: 'Minggu 1', sales: 85, traffic: 3200 }, { label: 'Minggu 2', sales: 112, traffic: 4500 }, { label: 'Minggu 3', sales: 145, traffic: 5800 }, { label: 'Minggu 4', sales: 190, traffic: 7200 } ] }; // ========================================== // COMPONENTS // ========================================== const CustomLineChart = ({ data }) => { const maxSales = Math.max(...data.map(d => d.sales)) * 1.2; return (
{Math.round(maxSales)}
{Math.round(maxSales / 2)}
0
{data.map((point, i) => { const height = (point.sales / maxSales) * 100; return (
{/* Tooltip */}
{point.sales} Penjualan
{point.traffic} Traffic
{/* Bar/Line representation */}
{point.label}
); })}
); }; const FunnelChart = () => (
1. Awareness (Reach IG & TikTok) 45,200
2. Interest (Profile Visits & Clicks) 5,430 (12%)
3. Desire (Add to Cart / Checkout) 890 (16%)
4. Action (Pesanan Berhasil) 173 (19%)
Total Tingkat Konversi (Awareness {'->'} Action): 0.38%
); // ========================================== // MAIN APP COMPONENT // ========================================== export default function App() { const [activeMenu, setActiveMenu] = useState('reports'); // Default to reports to show the A-Z hilir const [reportPeriod, setReportPeriod] = useState('weekly'); const formatIDR = (num) => new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(num); // --- VIEWS --- const renderDashboard = () => (

Ringkasan Eksekutif

Overview performa Bonhera Jewelry hari ini.

{[ { title: 'Pendapatan (Agustus)', val: 'Rp 45.5Jt', icon: Activity, trend: '+12%', color: 'text-emerald-600' }, { title: 'Total Pesanan', val: '173', icon: ShoppingBag, trend: '+5', color: 'text-emerald-600' }, { title: 'Followers Baru', val: '842', icon: Users, trend: '+22%', color: 'text-emerald-600' }, { title: 'ROAS Iklan', val: '3.2x', icon: Target, trend: '-0.1', color: 'text-red-500' }, ].map((stat, i) => (
{stat.title}
{stat.val} {stat.trend.includes('+') ? : } {stat.trend}
))}
); const renderResearch = () => (

Riset & Strategi (Hulu)

Benchmarking kompetitor & pondasi kampanye "Self-Worth".

Analisis Lanskap Kompetisi

{benchmarkData.map((b, i) => ( ))}
Brand Benchmark Fokus Utama Kekuatan & Kelemahan Strategi untuk Bonhera
{b.brand}
{b.priceRange}		 {b.focus}
+ {b.strength}
- {b.weakness}
 {b.strategy}

Core Emotional Value: "Self-Worth"

Bonhera tidak menjual perhiasan untuk menarik perhatian orang lain. Bonhera menjual pengingat fisik bahwa pemakainya tangguh, mandiri, dan berharga.

"Forged by resilience, worn with pride."
); const renderContent = () => (

Manajemen Konten (Tengah)

Perencanaan Instagram & TikTok.

{contentData.map(c => ( ))}
Tanggal Platform Topik Konten Status Performa
{c.date}
{c.platform === 'Instagram' ? : } {c.platform} ({c.format})
{c.title} {c.stage} {c.views}
); const renderOrders = () => (

Manajemen Pesanan (Tengah)

Sinkronisasi Shopee & TikTok Shop.

Pesanan Shopee

128

Pesanan TikTok Shop

45

Perlu Diproses

22

{orderData.map(o => ( ))}
ID / Platform Pelanggan Produk Total Status
{o.id}
{o.source}
 {o.name} {o.product} {formatIDR(o.total)} {o.status === 'Selesai' ? : } {o.status}
); const renderReports = () => (

Laporan & Analitik (Hilir)

Hasil performa dari hulu ke hilir (A-Z).

{/* CHART SECTION */}

Tren Penjualan & Traffic

{['daily', 'weekly', 'monthly'].map(period => ( ))}
{/* FUNNEL SECTION */}

Marketing Funnel (Corong Konversi)

Menganalisis efektivitas konten media sosial (Awareness) yang berubah menjadi penjualan (Action).

Kesimpulan Kinerja Bisnis (A-Z)

1. Performa Konten (Hulu)

Strategi visual setara Swarovski dan narasi "Self-Worth" berhasil mendatangkan 45.200 impresi organik di IG & TikTok minggu ini.

2. Efektivitas Platform (Tengah)

Shopee menyumbang 65% total pesanan, membuktikan strategi agresivitas ala Panlandwoo bekerja baik di marketplace.

3. Konversi & Penjualan (Hilir)

Tingkat konversi toko stabil di 3.2%. Total pendapatan melampaui target awal sebesar 12%. Bisnis berjalan sangat sehat.

); // --- LAYOUT --- return (
{/* SIDEBAR */} {/* MAIN AREA */}
{/* HEADER */}
Selasa, 4 Agustus 2026
{/* SCROLLABLE CONTENT */}
{activeMenu === 'dashboard' && renderDashboard()} {activeMenu === 'research' && renderResearch()} {activeMenu === 'content' && renderContent()} {activeMenu === 'orders' && renderOrders()} {activeMenu === 'reports' && renderReports()}
); }Hatori 2026
-