flashboard/Sidebar.html at main · sanadidari/flashboard · 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
<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <?!= include('Stylesheet'); ?>
</head>

<body>
  <div class="container">
    <!-- Header -->
    <div class="header">
      <div class="logo">⚡</div>
      <div class="title-group">
        <h1>FlashBoard AI</h1>
        <p>Instant Reporting</p>
      </div>
      <div class="credits">
        <span id="credit-count">?</span> 🪙
      </div>
    </div>

    <!-- Main Action Card -->
    <div class="card">
      <h3>1. YOUR GOAL</h3>
      <p class="subtitle">Select your data then describe your dashboard goal.</p>
      <div style="background-color: #fff3cd; color: #856404; padding: 10px; border-radius: 6px; font-size: 11px; margin-bottom: 12px; border-left: 4px solid #ffeeba;">
        <strong>⚠️ IMPORTANT:</strong> You MUST select (highlight) your data cells in the sheet before clicking Generate, otherwise the AI won't see any data.
      </div>
      <textarea id="user-prompt" placeholder="Ex: Analysis of sales by region with top 3 sellers..."></textarea>

      <button id="btn-generate" onclick="generate()">⚡ Generate Flash Dashboard</button>
    </div>

    <!-- Result View -->
    <div id="result-view" class="card" style="display:none;">
      <h3>2. AI ANALYSIS</h3>
      <div id="kpi-container" class="kpi-grid">
        <!-- KPIs will be injected here -->
      </div>
      <p id="status-msg" class="status-success"></p>
      <button id="btn-execute" class="secondary" onclick="execute()">🚀 Create Charts</button>
    </div>

    <div id="loading" class="loading" style="display:none;">
      <div class="spinner"></div>
      <p>Analyzing data with Gemini...</p>
    </div>

    <div class="footer">
      Sanadidari Analytics v1.0
    </div>
  </div>

  <script>
    let currentPlan = null;
    let currentSourceRange = null;

    function updateCredits() {
      google.script.run.withSuccessHandler(function (c) {
        document.getElementById('credit-count').innerText = c;
      }).getUserCredits(null);
    }

    window.onload = updateCredits;

    function generate() {
      const prompt = document.getElementById('user-prompt').value;
      if (!prompt) return alert("Please describe your goal.");

      document.getElementById('loading').style.display = 'block';
      document.getElementById('btn-generate').disabled = true;

      google.script.run
        .withSuccessHandler(function (res) {
          document.getElementById('loading').style.display = 'none';
          document.getElementById('btn-generate').disabled = false;

          if (res.status === 'success') {
            currentPlan = res.plan;
            currentSourceRange = res.sourceRange;
            showPlan(res.plan);
            updateCredits();
          } else {
            alert(res.message);
          }
        })
        .processFlashBoard(prompt);
    }

    function showPlan(plan) {
      document.getElementById('result-view').style.display = 'block';
      const container = document.getElementById('kpi-container');
      container.innerHTML = '';

      plan.kpis.forEach(kpi => {
        const div = document.createElement('div');
        div.className = 'kpi-box';
        div.innerHTML = `<small>${kpi.label}</small><div>${kpi.value}</div>`;
        container.appendChild(div);
      });
    }

    function execute() {
      if (!currentPlan || !currentSourceRange) return;
      document.getElementById('loading').style.display = 'block';

      google.script.run
        .withSuccessHandler(function (res) {
          document.getElementById('loading').style.display = 'none';
          if (res.status === 'success') {
            google.script.host.close();
          } else {
            alert(res.message);
          }
        })
        .executeDashboard(currentPlan, currentSourceRange);
    }
  </script>
</body>

</html>