Final-Project-AKB/dashboard.html at main · addaan1/Final-Project-AKB · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard — Galbay Predictor | Data Mining & BMC</title>
<meta name="description" content="Dashboard analisis data mining perilaku galbay Gen Z + hasil modelling + Business Model Canvas.">
<link rel="stylesheet" href="style.css">
<script src="data.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script defer src="script.js"></script>
</head>
<body>

<!-- SIDEBAR (navigasi berbasis TEKS) -->
<aside class="sidebar">
  <div class="sidebar-logo">
    <div class="logo-text">GALBAY<br>PREDICTOR</div>
  </div>
  <a href="index.html" class="nav-item"><span class="nav-label">Kembali ke Beranda</span></a>
  <a href="#ringkasan" class="nav-item active" data-section="ringkasan"><span class="nav-label">A. Ringkasan Eksekutif</span></a>
  <a href="#datamining" class="nav-item" data-section="datamining"><span class="nav-label">B. Data Mining &amp; Analisis</span></a>
  <a href="#model" class="nav-item" data-section="model"><span class="nav-label">Hasil Modelling</span></a>
  <a href="#kritis" class="nav-item" data-section="kritis"><span class="nav-label">C. Critical Analysis</span></a>
  <a href="#inovasi" class="nav-item" data-section="inovasi"><span class="nav-label">D. Inovasi Bisnis</span></a>
  <a href="#bmc" class="nav-item" data-section="bmc"><span class="nav-label">E. Business Model Canvas</span></a>
  <a href="#risiko" class="nav-item" data-section="risiko"><span class="nav-label">F. Risiko &amp; Kelayakan</span></a>
  <a href="#kesimpulan" class="nav-item" data-section="kesimpulan"><span class="nav-label">G. Kesimpulan &amp; Referensi</span></a>
</aside>

<!-- TOPBAR -->
<header class="topbar">
  <div class="topbar-left">
    <span class="topbar-subtitle">Data Mining → Business Model Canvas</span>
    <span class="topbar-title">Dashboard Analisis — Galbay Predictor</span>
  </div>
  <div class="topbar-right">
    <span class="badge-tag">Data Asli · <span data-fill="total_relevant">—</span> ulasan relevan</span>
    <a href="#" class="btn-primary" onclick="window.print();return false;">Ekspor / Print</a>
  </div>
</header>

<main class="main">

  <!-- A. RINGKASAN EKSEKUTIF -->
  <section class="section" id="ringkasan">
    <div class="section-header">
      <span class="section-tag">A · Ringkasan Eksekutif</span>
      <h2 class="section-title">Peluang Bisnis yang <span>Ditemukan dari Data</span></h2>
      <p class="section-desc">Analisis terhadap <strong><span data-fill="total_reviews">—</span></strong> ulasan aplikasi fintech (<strong><span data-fill="total_relevant">—</span></strong> relevan, dari <span data-fill="n_apps">—</span> aplikasi, periode <span data-fill="date_min">—</span> s/d <span data-fill="date_max">—</span>) menunjukkan sinyal kuat kebutuhan akan pendampingan perilaku finansial bagi anak muda.</p>
    </div>

    <div class="kpi-bar">
      <div class="kpi-item"><div class="kpi-value" data-fill="total_relevant">—</div><div class="kpi-label">Ulasan relevan dianalisis</div></div>
      <div class="kpi-divider"></div>
      <div class="kpi-item"><div class="kpi-value" data-fill="distress_pct">—</div><div class="kpi-label">Mengandung sinyal distress galbay</div></div>
      <div class="kpi-divider"></div>
      <div class="kpi-item"><div class="kpi-value" data-fill="acc">—</div><div class="kpi-label">Akurasi model sentimen</div></div>
      <div class="kpi-divider"></div>
      <div class="kpi-item"><div class="kpi-value" data-fill="n_apps">—</div><div class="kpi-label">Aplikasi fintech dipantau</div></div>
    </div>

    <div class="grid-3">
      <div class="card"><h3>Peluang</h3><p>Pasar besar Gen Z terjebak siklus utang digital namun belum tersentuh produk financial coaching yang preventif dan berbasis data.</p></div>
      <div class="card"><h3>Solusi</h3><p>Aplikasi Galbay Predictor: skor risiko galbay personal plus coaching perilaku finansial bergaya anak muda.</p></div>
      <div class="card"><h3>Model Bisnis</h3><p>Freemium B2C, langganan premium, serta kemitraan B2B dengan fintech dan program literasi keuangan.</p></div>
    </div>
    <div class="insight-box">
      <h4>Insight Kunci</h4>
      <p>Mayoritas keluhan negatif berpusat pada <strong>bunga/biaya</strong> dan <strong>praktik penagihan</strong> — menandakan kebutuhan edukasi dan pendampingan, bukan sekadar penagihan.</p>
    </div>
  </section>

  <!-- B. DATA MINING -->
  <section class="section section-alt" id="datamining">
    <div class="section-header">
      <span class="section-tag">B · Data Mining &amp; Analisis</span>
      <h2 class="section-title">Dari <span>Data Mentah</span> Menuju Insight</h2>
      <p class="section-desc">Data dikumpulkan dari Google Play, forum Kaskus (<span data-fill="n_forum">—</span> thread), dan berita/OJK (<span data-fill="n_news">—</span> artikel), lalu dibersihkan, divalidasi relevansinya, dan dianalisis.</p>
    </div>

    <div class="source-badges" style="margin-bottom:24px;">
      <span class="source-badge badge-google">Google Play Reviews</span>
      <span class="source-badge badge-twitter">Forum Kaskus</span>
      <span class="source-badge badge-news">Berita &amp; OJK</span>
    </div>

    <div class="grid-2">
      <div class="chart-card">
        <div class="chart-title">Distribusi Rating Ulasan</div>
        <div class="chart-subtitle">Polarisasi tinggi: dominan bintang 1 dan 5</div>
        <div class="chart-wrap"><canvas id="chartScoreDist"></canvas></div>
      </div>
      <div class="chart-card">
        <div class="chart-title">Jumlah Ulasan Relevan per Kategori</div>
        <div class="chart-subtitle">Pinjol mendominasi percakapan</div>
        <div class="chart-wrap"><canvas id="chartCategory"></canvas></div>
      </div>
    </div>

    <div class="chart-card" style="margin-top:20px;">
      <div class="chart-title">Tren Bulanan Volume Ulasan &amp; Sinyal Distress Galbay</div>
      <div class="chart-subtitle">Volume ulasan relevan, kategori pinjol, dan sinyal distress dari waktu ke waktu</div>
      <div class="chart-wrap" style="height:300px;"><canvas id="chartTimeline"></canvas></div>
    </div>

    <div class="insight-box" style="margin-top:20px;">
      <h4>Metode Pengumpulan &amp; Pengolahan</h4>
      <p>Scraping ulasan Google Play per aplikasi → pelabelan relevansi berdasarkan kata kunci kategori (produk fintech, bunga &amp; biaya, tagihan &amp; penagihan, psikologi) → pembersihan teks → analisis frekuensi &amp; sentimen. Total <span data-fill="total_relevant">—</span> dari <span data-fill="total_reviews">—</span> ulasan lolos sebagai relevan.</p>
    </div>
  </section>

  <!-- HASIL MODELLING -->
  <section class="section" id="model">
    <div class="section-header">
      <span class="section-tag">Pemodelan &amp; Pengujian</span>
      <h2 class="section-title">Hasil <span>Modelling</span> Klasifikasi Sentimen</h2>
      <p class="section-desc">Model <strong>Multinomial Naive Bayes</strong> dilatih untuk membedakan ulasan negatif (bintang 1-2) vs positif (bintang 4-5). Dilatih pada <span data-fill="n_train">—</span> data dan diuji pada <span data-fill="n_test">—</span> data, dengan kosakata <span data-fill="vocab">—</span> kata.</p>
    </div>

    <div class="metric-grid">
      <div class="metric-card"><div class="metric-value" data-fill="acc">—</div><div class="metric-label">Accuracy</div></div>
      <div class="metric-card"><div class="metric-value" data-fill="prec">—</div><div class="metric-label">Precision</div></div>
      <div class="metric-card"><div class="metric-value" data-fill="rec">—</div><div class="metric-label">Recall</div></div>
      <div class="metric-card"><div class="metric-value" data-fill="f1">—</div><div class="metric-label">F1-Score</div></div>
    </div>

    <div class="grid-2">
      <div class="chart-card">
        <div class="chart-title">Metrik Evaluasi Model</div>
        <div class="chart-subtitle">Performa pada data uji</div>
        <div class="chart-wrap"><canvas id="chartModel"></canvas></div>
      </div>
      <div class="chart-card">
        <div class="chart-title">Confusion Matrix</div>
        <div class="chart-subtitle">Prediksi vs aktual pada data uji</div>
        <img class="model-img" src="assets/confusion_matrix.png" alt="Confusion Matrix">
      </div>
    </div>

    <div class="grid-2" style="margin-top:20px;">
      <div class="chart-card">
        <div class="chart-title">Kata Penanda Sentimen Negatif</div>
        <div class="chart-subtitle">Kata dengan bobot indikator negatif tertinggi</div>
        <img class="model-img" src="assets/top_neg_words.png" alt="Top kata negatif">
      </div>
      <div class="chart-card">
        <div class="chart-title">Kata Kunci Paling Prediktif</div>
        <div class="chart-subtitle">Hasil dari model Naive Bayes</div>
        <p style="color:var(--text-secondary);font-size:13px;margin-bottom:6px;">Penanda <strong>negatif</strong>:</p>
        <div class="tag-list" id="negWords"></div>
        <p style="color:var(--text-secondary);font-size:13px;margin:16px 0 6px;">Penanda <strong>positif</strong>:</p>
        <div class="tag-list" id="posWords"></div>
      </div>
    </div>
  </section>

  <!-- C. CRITICAL ANALYSIS -->
  <section class="section section-alt" id="kritis">
    <div class="section-header">
      <span class="section-tag">C · Critical Analysis</span>
      <h2 class="section-title">Membaca <span>Sebab &amp; Implikasi</span></h2>
      <p class="section-desc">Analisis perilaku berdasarkan kategori bermakna dan kata kunci galbay yang muncul di ulasan.</p>
    </div>

    <div class="grid-2">
      <div class="chart-card">
        <div class="chart-title">Analisis Perilaku (Kategori Bermakna)</div>
        <div class="chart-subtitle">Berapa banyak ulasan menyentuh tiap tema</div>
        <div class="chart-wrap" style="height:300px;"><canvas id="chartBehavior"></canvas></div>
      </div>
      <div class="chart-card">
        <div class="chart-title">Frekuensi Kata Kunci Galbay</div>
        <div class="chart-subtitle">Sinyal kesulitan bayar di teks ulasan</div>
        <div class="chart-wrap" style="height:300px;"><canvas id="chartKeywords"></canvas></div>
      </div>
    </div>

    <div class="grid-2" style="margin-top:20px;">
      <div class="chart-card">
        <div class="chart-title">Sentimen Negatif vs Positif per Kategori</div>
        <div class="chart-subtitle">Kategori mana yang paling banyak keluhan</div>
        <div class="chart-wrap" style="height:300px;"><canvas id="chartSentimentCat"></canvas></div>
      </div>
      <div class="chart-card">
        <div class="chart-title">Aplikasi dengan Rasio Ulasan Negatif Tertinggi</div>
        <div class="chart-subtitle">Minimal 200 ulasan relevan</div>
        <div class="chart-wrap" style="height:300px;"><canvas id="chartTopApps"></canvas></div>
      </div>
    </div>

    <div class="grid-2" style="margin-top:20px;">
      <div class="insight-box"><h4>Peluang &amp; Masalah</h4><p>Keluhan bunga/biaya dan penagihan mendominasi. Ini masalah bagi pengguna, tetapi peluang bagi produk yang menawarkan pendampingan preventif dan transparansi.</p></div>
      <div class="insight-box"><h4>Keterbatasan Data &amp; Asumsi</h4><p>Data ulasan cenderung bias ke pengguna yang sangat puas/kecewa (polarisasi bintang 1 &amp; 5). Sentimen diturunkan dari rating; teks sarkas bisa salah klasifikasi. Demografi usia tidak tersedia langsung dari ulasan.</p></div>
    </div>
  </section>

  <!-- D. INOVASI -->
  <section class="section" id="inovasi">
    <div class="section-header">
      <span class="section-tag">D · Inovasi Bisnis</span>
      <h2 class="section-title">Solusi yang <span>Ditawarkan</span></h2>
    </div>
    <div class="grid-3">
      <div class="card"><h3>Skor Risiko Galbay</h3><p>Penilaian risiko gagal bayar personal berbasis pola perilaku finansial digital pengguna.</p></div>
      <div class="card"><h3>Coaching Perilaku</h3><p>Nudging, pengingat, dan modul edukasi bergaya anak muda — gamifikasi agar konsisten.</p></div>
      <div class="card"><h3>Deteksi Dini</h3><p>Peringatan saat pola pengeluaran menuju zona berisiko, sebelum benar-benar galbay.</p></div>
    </div>
    <div class="grid-2" style="margin-top:20px;">
      <div class="insight-box"><h4>Diferensiasi</h4><p>Berbeda dari aplikasi pinjol (yang memberi utang) maupun aplikasi budgeting biasa — Galbay Predictor fokus pada pencegahan perilaku dengan pendekatan coaching.</p></div>
      <div class="insight-box"><h4>Nilai Tambah</h4><p>Membantu pengguna keluar dari siklus utang, meningkatkan skor kredit, dan membangun kebiasaan finansial sehat — didukung bukti data.</p></div>
    </div>
  </section>

  <!-- E. BMC -->
  <section class="section section-alt" id="bmc">
    <div class="section-header">
      <span class="section-tag">E · Business Model Canvas</span>
      <h2 class="section-title">9 Blok <span>Berbasis Bukti Data</span></h2>
    </div>
    <div class="bmc-container">
      <div class="bmc-row bmc-row-2">
        <div class="bmc-block"><div class="bmc-block-title">Key Partnerships</div><ul class="bmc-list"><li>Fintech &amp; bank digital</li><li>OJK &amp; lembaga literasi keuangan</li><li>Kampus &amp; komunitas Gen Z</li><li>Psikolog/financial planner</li></ul></div>
        <div class="bmc-block"><div class="bmc-block-title">Key Activities</div><ul class="bmc-list"><li>Data mining &amp; scoring risiko</li><li>Pengembangan modul coaching</li><li>Analisis perilaku finansial</li><li>Edukasi &amp; konten</li></ul></div>
        <div class="bmc-block bmc-highlight"><div class="bmc-block-title">Value Propositions</div><ul class="bmc-list"><li>Skor risiko galbay personal</li><li>Coaching preventif bergaya anak muda</li><li>Deteksi dini &amp; nudging</li><li>Keluar dari siklus utang</li></ul></div>
        <div class="bmc-block"><div class="bmc-block-title">Customer Relationships</div><ul class="bmc-list"><li>Gamifikasi &amp; reward</li><li>Komunitas dukungan</li><li>Notifikasi personal</li></ul></div>
        <div class="bmc-block"><div class="bmc-block-title">Customer Segments</div><ul class="bmc-list"><li>Gen Z &amp; milenial muda</li><li>Pengguna pinjol/paylater</li><li>First jobber &amp; mahasiswa</li></ul></div>
      </div>
      <div class="bmc-row bmc-row-3">
        <div class="bmc-block"><div class="bmc-block-title">Key Resources</div><ul class="bmc-list"><li>Dataset perilaku finansial</li><li>Model machine learning</li><li>Tim data &amp; konten</li></ul></div>
        <div class="bmc-block"><div class="bmc-block-title">Channels</div><ul class="bmc-list"><li>Aplikasi mobile</li><li>Media sosial (TikTok, IG)</li><li>Kemitraan kampus/fintech</li></ul></div>
      </div>
      <div class="bmc-row bmc-row-3">
        <div class="bmc-block"><div class="bmc-block-title">Cost Structure</div><ul class="bmc-list"><li>Pengembangan &amp; infrastruktur data</li><li>Tim &amp; konten edukasi</li><li>Pemasaran &amp; akuisisi pengguna</li></ul></div>
        <div class="bmc-block"><div class="bmc-block-title">Revenue Streams</div><ul class="bmc-list"><li>Langganan premium (freemium)</li><li>Kemitraan B2B fintech/HR</li><li>Program literasi berbayar</li></ul></div>
      </div>
    </div>
  </section>

  <!-- F. RISIKO -->
  <section class="section" id="risiko">
    <div class="section-header">
      <span class="section-tag">F · Analisis Risiko &amp; Kelayakan</span>
      <h2 class="section-title">Risiko &amp; <span>Strategi Mitigasi</span></h2>
    </div>
    <table class="risk-table">
      <tr><th>Risiko</th><th>Jenis</th><th>Tingkat</th><th>Strategi Mitigasi</th></tr>
      <tr><td>Persaingan dengan fintech besar</td><td>Pasar</td><td><span class="risk-badge high">Tinggi</span></td><td>Fokus pada niche coaching preventif &amp; diferensiasi pengalaman Gen Z</td></tr>
      <tr><td>Regulasi data keuangan (OJK)</td><td>Operasional</td><td><span class="risk-badge high">Tinggi</span></td><td>Kepatuhan sejak awal, kemitraan resmi, transparansi data</td></tr>
      <tr><td>Privasi &amp; keamanan data</td><td>Operasional</td><td><span class="risk-badge med">Sedang</span></td><td>Enkripsi, consent eksplisit, audit keamanan berkala</td></tr>
      <tr><td>Monetisasi lambat</td><td>Pasar</td><td><span class="risk-badge med">Sedang</span></td><td>Mulai dari B2B partnership untuk arus kas awal</td></tr>
      <tr><td>Akurasi model masih terbatas</td><td>Teknis</td><td><span class="risk-badge low">Rendah</span></td><td>Iterasi model, tambah data, validasi berkelanjutan</td></tr>
    </table>
    <div class="insight-box" style="margin-top:20px;"><h4>Kelayakan</h4><p>Dengan basis data nyata <span data-fill="total_relevant">—</span> ulasan dan model awal berakurasi <span data-fill="acc">—</span>, konsep ini layak dilanjutkan ke tahap prototipe. Risiko terbesar bersifat regulasi &amp; persaingan, yang dapat dimitigasi lewat kepatuhan dan diferensiasi.</p></div>
  </section>

  <!-- G. KESIMPULAN -->
  <section class="section section-alt" id="kesimpulan">
    <div class="section-header">
      <span class="section-tag">G · Kesimpulan &amp; Referensi</span>
      <h2 class="section-title">Penutup</h2>
    </div>
    <div class="insight-box"><h4>Kesimpulan</h4><p>Data mining terhadap ratusan ribu ulasan fintech mengonfirmasi adanya masalah perilaku finansial Gen Z yang nyata dan masif. Galbay Predictor menjawabnya dengan pendekatan coaching preventif berbasis data — sebuah peluang bisnis yang layak, terdiferensiasi, dan didukung bukti.</p></div>
    <div class="card" style="margin-top:20px;">
      <h3>Referensi &amp; Transparansi AI</h3>
      <ul class="bmc-list">
        <li>Sumber data: ulasan Google Play, forum Kaskus, siaran pers OJK.</li>
        <li>Tools: Python (pandas, numpy), Multinomial Naive Bayes, matplotlib.</li>
        <li>Bantuan AI: ChatGPT/Claude untuk eksplorasi ide, penyusunan analisis, dan pembuatan dashboard. Seluruh angka dihitung dari data nyata.</li>
      </ul>
    </div>
  </section>

  <footer class="footer">
    <p>Galbay Predictor — Tugas Data Mining &amp; Business Model Canvas · Dashboard berbasis data ulasan nyata aplikasi fintech</p>
  </footer>

</main>

<script>
// Render kata kunci prediktif sebagai pill teks
document.addEventListener('DOMContentLoaded', () => {
  const d = window.GALBAY_DATA || {}; const mo = d.model || {};
  const neg = document.getElementById('negWords'); const pos = document.getElementById('posWords');
  (mo.top_neg_words||[]).forEach(w => { const s=document.createElement('span'); s.className='tag-pill'; s.textContent=w; neg && neg.appendChild(s); });
  (mo.top_pos_words||[]).forEach(w => { const s=document.createElement('span'); s.className='tag-pill pos'; s.textContent=w; pos && pos.appendChild(s); });
});
</script>
</body>
</html>