executive-course-dashboard

エグゼクティブ向けコースダッシュボード 📊

executive-course-dashboard は、教員（または学部・学校の責任者）が、個別のスプレッドシートを何十個も開かずに、1画面でクラスの学業状況を把握できる、モダンで洗練された情報密度の高いWebダッシュボードを作成します。

---

📱 モバイルビュー優先の設計基準と視覚的階層

基本方針に従い、このインターフェースは モバイルビュー優先 の原則に基づいて設計されています。

1. 完璧なレスポンシブ対応：スマートフォンの360px画面から、タブレット、ノートパソコン、教室の4Kプロジェクターモニターまで、整然と表示されます。
2. メインテーマは高コントラストのライトモード：
   • 白い背景（#ffffff）と明確な境界線（#e2e8f0）のカードに、鮮明な文字色（見出しにはSlateの#0f172a、本文には#334155）を使用します。
   • 薄い灰色の文字や、明るい背景上の白い文字は使用しません。
3. 1画面での概要表示（Single-Screen Overview）：
   • メトリクスパネルはCSS Grid / Flexboxを使ってモジュール式に設計されており、長いスクロールをせずに、必要な概要をひと目で確認できます。

---

🎛️ エグゼクティブダッシュボードのウィジェットコンポーネント

┌─────────────────────────────────────────────────────────────┐
│ 🎓 REKAYASA PERANGKAT LUNAK (CS302) - SEMESTER GANJIL      │
│ [Status Kelas: Aktif]  [Sesi Berjalan: 04/14]   [👥 38 Mhs] │
├──────────────┬──────────────┬──────────────┬────────────────┤
│ 📈 Rata-Rata │ 📥 Pengumpulan│ 🏆 Ketuntasan│ ⚠️ Butuh       │
│    84.6/100  │     94.7%    │   CPMK: 89%  │   Perhatian: 3 │
├──────────────┴──────────────┴──────────────┴────────────────┤
│ 🎯 Radar Capaian CPMK         │ 📊 Distribusi Nilai Kelas   │
│ CPMK-1 [██████████░] 91%      │ [A: 14]  [AB: 12]  [B: 8]   │
│ CPMK-2 [████████░░░] 82%      │ [C: 3]   [Remedial: 1]      │
├───────────────────────────────┴─────────────────────────────┤
│ 🚨 Early Warning Alert: Mahasiswa Perlu Pendampingan        │
│ • Budi Santoso (Tugas 3 belum kumpul - Rekomendasi: Kontak) │
│ • Sinta Dewi (Nilai Sesi 2 < 65 - Rekomendasi: Remedial L1) │
└─────────────────────────────────────────────────────────────┘

---

🔒 セキュリティプロトコルと認証情報の漏えい防止

• このindex.htmlファイルは 100%クライアント側 で動作します。
• エージェントが生成したローカルのdata_ringkasan.jsonファイルから、成績の概要データを読み込みます。
• API Key、パスワード、データベーストークン、認証情報はフロントエンドに埋め込まれていません。