Chatgpt

{

  "title": "Dashboard Analisis Harga Handphone Sidoarjo 2023",

  "prompt": "Buatkan sebuah web app (dashboard web) interaktif dengan desain modern, rapi, dan responsif untuk menganalisis harga handphone bermerek terkenal di Kabupaten Sidoarjo selama tahun 2023.\n\nSpesifikasi lengkap:\n\n1. Tujuan utama\n- Menampilkan dan menganalisis data harga handphone merek-merek terkenal (misalnya: Samsung, Apple, Xiaomi, Oppo, Vivo, Realme, dan lain-lain) di berbagai wilayah atau kecamatan di Kabupaten Sidoarjo sepanjang tahun 2023.\n- Menyajikan tren harga dari waktu ke waktu dan perbandingan antar merek, model, dan kecamatan.\n\n2. Halaman utama / dashboard ringkasan\n- Ringkasan metrik utama:\n  - Rata-rata harga per merek di seluruh Sidoarjo (tahun 2023).\n  - Harga minimum dan maksimum per merek.\n  - Jumlah tipe atau model yang terdata.\n- Tampilkan metrik dalam bentuk kartu (cards) yang jelas, ringkas, dan mudah dibaca.\n- Desain harus responsif dan nyaman digunakan di perangkat desktop maupun mobile.\n\n3. Filter dan kontrol (dropdown / slicer)\n- Sediakan komponen filter berikut:\n  - Dropdown pemilihan merek handphone (Samsung, Apple, Xiaomi, Oppo, Vivo, Realme, dan lain-lain).\n  - Dropdown pemilihan model atau seri (misalnya: iPhone 14, Galaxy S23, Redmi Note 12, dan sebagainya).\n  - Dropdown pemilihan wilayah atau kecamatan di Sidoarjo.\n  - Pemilih rentang bulan (Januari–Desember 2023), bisa berupa dropdown atau range slider.\n  - Slider rentang harga (minimum–maksimum).\n- Semua dropdown utama (merek, model, kecamatan) mendukung multi-select sehingga pengguna dapat memilih lebih dari satu nilai sekaligus.\n- Sediakan tombol Reset Filter untuk mengembalikan semua filter ke kondisi awal.\n\n4. Visualisasi data utama\n- Grafik garis (line chart):\n  - Menampilkan tren harga rata-rata per bulan selama tahun 2023.\n  - Mampu menampilkan beberapa merek sekaligus (garis per merek) untuk perbandingan.\n- Grafik batang (bar chart):\n  - Menampilkan perbandingan harga rata-rata per merek di masing-masing kecamatan.\n- Peta sederhana (jika teknologi yang digunakan memungkinkan):\n  - Menampilkan rata-rata harga per kecamatan di Kabupaten Sidoarjo.\n  - Boleh berupa peta choropleth atau marker dengan nilai harga rata-rata.\n- Tabel detail data:\n  - Kolom minimal: tanggal atau bulan, nama merek, model, kecamatan, harga, dan sumber data (jika ada).\n  - Memiliki fitur sorting per kolom dan searching (pencarian teks bebas).\n- Semua visualisasi (grafik, peta, dan tabel) harus terhubung dengan filter yang disediakan. Ketika filter diubah, data di semua grafik dan tabel ikut berubah.\n\n5. Insight dan analitik\n- Buat satu bagian khusus bernama Insight Otomatis yang berisi ringkasan analisis dalam bentuk teks.\n- Insight yang dihasilkan secara dinamis dari data dan filter aktif, minimal mencakup:\n  - Merek dengan harga rata-rata tertinggi dan terendah di Sidoarjo (periode 2023 atau sesuai filter yang sedang aktif).\n  - Kecamatan dengan harga rata-rata tertinggi dan terendah.\n  - Bulan dengan kenaikan harga rata-rata tertinggi dan penurunan harga rata-rata terbesar.\n- Teks insight harus otomatis menyesuaikan dengan filter yang sedang dipilih pengguna (merek, kecamatan, bulan, dan lain-lain), bukan hard-coded.\n\n6. Desain UI dan UX\n- Gunakan tema warna modern, misalnya kombinasi biru, putih, dan abu-abu lembut.\n- Tampilan bersih (clean) dengan:\n  - Banyak ruang putih (white space).\n  - Tipografi yang jelas dan mudah dibaca.\n- Sediakan navigasi berupa sidebar atau topbar untuk berpindah antar halaman atau section:\n  - Dashboard Ringkasan.\n  - Analisis Per Merek.\n  - Analisis Per Wilayah.\n  - Tabel Detail Data.\n- Gunakan ikon-ikon sederhana untuk membantu identifikasi bagian, misalnya ikon untuk merek, wilayah, tren, dan tabel.\n\n7. Teknologi yang disarankan\n- Frontend: gunakan salah satu framework modern seperti React, Vue, Svelte, atau framework frontend modern lain. Jelaskan framework apa yang Anda pilih.\n- Library chart: gunakan salah satu library seperti Chart.js, ECharts, D3.js, atau sejenisnya. Jelaskan library apa yang Anda pilih dan alasan kesesuaiannya.\n- Layout responsif: boleh menggunakan CSS framework seperti Tailwind CSS, Bootstrap, atau framework CSS modern lain.\n- Strukturkan kode sehingga mudah dikembangkan lebih lanjut, misalnya dengan komponen terpisah untuk header, sidebar, filter, kartu metrik, grafik, dan tabel.\n\n8. Data (boleh dummy jika tidak tersedia)\n- Jika data asli tidak tersedia, buat data dummy yang realistis dengan ketentuan sebagai berikut:\n  - Periode: Januari–Desember 2023.\n  - Wilayah: daftar kecamatan di Kabupaten Sidoarjo, misalnya Sidoarjo, Waru, Candi, Taman, Krian, dan beberapa kecamatan lain.\n  - Merek: Samsung, Apple, Xiaomi, Oppo, Vivo, Realme, serta beberapa merek terkenal lainnya jika diperlukan.\n  - Harga: rentang harga yang wajar untuk handphone kelas menengah hingga atas (kurang lebih 2.000.000 sampai 25.000.000 rupiah).\n- Susun data dalam struktur yang siap diolah di frontend, misalnya dalam format array of objects JSON, dengan field minimal:\n  - date atau month.\n  - brand.\n  - model.\n  - district (kecamatan).\n  - price.\n  - source (opsional).\n\n9. Kelengkapan dan dokumentasi dalam kode\n- Sertakan komentar singkat di dalam kode yang menjelaskan:\n  - Cara menambah merek baru.\n  - Cara menambah kecamatan atau wilayah baru.\n  - Cara menambah data harga baru (misalnya di file JSON atau di dalam array data).\n- Berikan penjelasan singkat (bisa di komentar atau sebagai README singkat di dalam kode) tentang:\n  - Bagaimana alur data dari sumber data ke komponen visualisasi.\n  - Bagaimana filter memengaruhi data yang ditampilkan di grafik, peta, dan tabel.\n- Pastikan bahwa:\n  - Semua filter dan grafik saling terhubung. Ketika filter diubah, seluruh visual dan tabel diperbarui.\n  - Kode yang dihasilkan minimal berupa skeleton atau kerangka yang dapat langsung dijalankan (setelah dependensi di-install) dan mudah dikembangkan lebih lanjut.\n\n10. Output yang diharapkan dari AI atau tool pembuatan web app\n- Berikan output yang mencakup:\n  - Struktur folder atau proyek secara singkat.\n  - Contoh kode skeleton utama, misalnya file entry point, komponen utama dashboard, dan contoh komponen grafik atau tabel.\n  - Contoh struktur data dummy dalam format JSON.\n- Jika memungkinkan, gunakan penandaan kode yang jelas sehingga mudah disalin dan dikembangkan lebih lanjut.\n\nGunakan Bahasa Indonesia untuk komentar dan penjelasan teks, kecuali nama variabel, fungsi, dan komponen yang boleh menggunakan bahasa Inggris."

}