Prompt
Buatkan aplikasi Sales Dashboard dinamis berbasis:
- Google Sheets sebagai database
- Google Apps Script sebagai backend/API
- HTML5 + CSS3 + JavaScript sebagai frontend
- Chart.js untuk visualisasi
- Responsive Design
- Light Theme
- Tidak menggunakan framework frontend berat
SUMBER DATA
Gunakan Google Spreadsheet dengan nama sheet:
Transactions
Struktur kolom:
id
date
channel
order_id
product
category
quantity
price_per_unit
total_price
customer_name
city
payment_method
sales_rep
APLIKASI HARUS DINAMIS
Jangan menyimpan data transaksi secara hard-code di HTML.
Data harus selalu diambil dari Google Sheets melalui Google Apps Script.
Gunakan arsitektur:
Google Sheets
↓
Google Apps Script
↓
getData()
↓
JavaScript
↓
Dashboard
↓
Chart.js
BACKEND GOOGLE APPS SCRIPT
Buat file Code.gs dengan:
1. doGet()
- Menampilkan halaman dashboard index.html.
- Gunakan HtmlService.
2. getData()
- Membaca seluruh data dari sheet Transactions.
- Menggunakan baris pertama sebagai nama field/header.
- Mengubah setiap baris menjadi object JSON.
- Mengembalikan data ke frontend.
3. getLastUpdated()
- Mengembalikan waktu terakhir data dibaca.
4. Buat fungsi yang aman terhadap:
- baris kosong
- nilai null
- tanggal kosong
- angka kosong
- data tidak valid
FRONTEND
Buat index.html dengan:
HEADER
- Judul: Sales Dashboard
- Subtitle: Monitoring Penjualan
- Tombol Refresh
- Informasi Last Updated
FILTER
Buat filter interaktif:
1. Date From
2. Date To
3. Channel
4. Category
5. Product
6. Sales Rep
7. Payment Method
8. City
Tambahkan tombol:
- Apply Filter
- Reset Filter
- Refresh Data
- Download CSV
KPI CARD
Tampilkan:
1. Total Sales
SUM(total_price)
2. Total Transactions
COUNT(order_id)
3. Units Sold
SUM(quantity)
4. Average Transaction Value
Total Sales / Total Transactions
5. Average Units per Transaction
Total Quantity / Total Transactions
CHART
Gunakan Chart.js.
Buat visualisasi:
1. Sales by Date
- Line Chart
2. Sales by Category
- Bar Chart
3. Sales by Channel
- Doughnut Chart
4. Sales by Payment Method
- Doughnut Chart
5. Top 10 Products by Sales
- Horizontal Bar Chart
6. Sales by City
- Bar Chart
7. Sales by Sales Rep
- Bar Chart
TABLE
Buat tabel:
PRODUCT PERFORMANCE
Kolom:
- Product
- Category
- Units
- Transactions
- Sales
- Average Price
SALES REP PERFORMANCE
Kolom:
- Sales Rep
- Transactions
- Units
- Sales
- ATV
CHANNEL PERFORMANCE
Kolom:
- Channel
- Transactions
- Units
- Sales
- ATV
INTERAKTIVITAS
Ketika filter berubah:
- KPI diperbarui
- seluruh chart diperbarui
- tabel diperbarui
Ketika tombol Refresh ditekan:
- ambil ulang data dari Google Sheets
- update dashboard
- update Last Updated
DOWNLOAD
Buat tombol Download CSV untuk mengunduh data yang sedang ditampilkan setelah filter.
DESIGN
Gunakan desain:
- Light Theme
- Background putih / abu-abu muda
- Card modern
- Border radius
- Shadow ringan
- Typography modern
- Responsive
- Desktop / tablet / mobile
- Grid layout
- Dashboard terlihat profesional
Tambahkan:
- Loading indicator
- Empty state
- Error message
- Format Rupiah Indonesia
- Format angka Indonesia
- Format tanggal Indonesia
PERFORMA
Optimalkan agar:
- Google Sheets hanya dibaca ketika diperlukan
- Data diambil sekali saat dashboard dibuka
- Filtering dilakukan di browser
- Chart tidak dibuat berulang tanpa menghancurkan chart sebelumnya
- Gunakan Promise/callback Google Apps Script dengan benar
STRUKTUR PROJECT
Buat:
Code.gs
index.html
Jangan menggunakan database eksternal.
Jangan menggunakan PHP.
Jangan menggunakan MySQL.
Jangan menggunakan Firebase.
HASIL AKHIR
Berikan:
1. Code.gs lengkap
2. index.html lengkap
3. Struktur Google Spreadsheet
4. Langkah deployment Google Apps Script
5. Cara menghubungkan spreadsheet
6. Cara membuka dashboard
7. Cara memperbarui data
8. Cara menambahkan transaksi baru
9. Penjelasan arsitektur sistem
Pastikan aplikasi dapat langsung digunakan setelah Code.gs dan index.html ditempatkan pada Google Apps Script.
Tidak ada komentar:
Posting Komentar