Hugging Face's logo

Spaces:
Cg16
/
cg-data-analytics
Running

App Files Community
Cg16 commited on
Commit
9fb0f03
·
verified ·
1 Parent(s): 6366b24

undefined - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +651 -18
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cg Data Analytics
3
- emoji: 👁
4
- colorFrom: indigo
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: cg-data-analytics
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,652 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Data Visualization AI</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
12
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
13
+ <style>
14
+ .dropzone {
15
+ border: 2px dashed #3b82f6;
16
+ border-radius: 0.5rem;
17
+ transition: all 0.3s ease;
18
+ }
19
+ .dropzone:hover {
20
+ background-color: #eff6ff;
21
+ }
22
+ .dropzone.active {
23
+ border-color: #10b981;
24
+ background-color: #ecfdf5;
25
+ }
26
+ .chart-container {
27
+ transition: all 0.3s ease;
28
+ }
29
+ .chart-container:hover {
30
+ transform: translateY(-5px);
31
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-50 min-h-screen flex flex-col">
36
+ <header id="header" class="bg-white shadow-sm">
37
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
38
+ <div id="branding" class="flex items-center space-x-2">
39
+ <img id="companyLogo" src="http://static.photos/technology/200x200/1" alt="Company Logo" class="h-10 w-10 rounded-full">
40
+ <h1 id="reportHeader" class="text-xl font-bold text-gray-800">Data Visualization Dashboard</h1>
41
+ </div>
42
+ <div id="headerControls" class="hidden space-x-4">
43
+ <div id="editControls" class="flex space-x-4">
44
+ <button id="uploadLogoBtn" class="text-blue-600 hover:text-blue-800 flex items-center">
45
+ <i data-feather="image" class="mr-1"></i> Upload Logo
46
+ </button>
47
+ <button id="editHeaderBtn" class="text-blue-600 hover:text-blue-800 flex items-center">
48
+ <i data-feather="edit" class="mr-1"></i> Edit Header
49
+ </button>
50
+ </div>
51
+ <button id="doneEditingBtn" class="bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded-md text-sm hidden">
52
+ <i data-feather="check" class="mr-1"></i> Done
53
+ </button>
54
+ <button id="shareReportBtn" class="text-blue-600 hover:text-blue-800 flex items-center">
55
+ <i data-feather="share-2" class="mr-1"></i> Share Report
56
+ </button>
57
+ </div>
58
+ </div>
59
+ </header>
60
+
61
+ <main class="flex-grow container mx-auto px-4 py-8">
62
+ <section class="mb-12" data-aos="fade-up">
63
+ <div class="text-center mb-8">
64
+ <h2 class="text-3xl font-bold text-gray-800 mb-2">AI-Powered Data Visualization</h2>
65
+ <p class="text-gray-600 max-w-2xl mx-auto">Upload your Excel, CSV files or paste a file URL to generate dynamic visualizations with AI analysis</p>
66
+ </div>
67
+
68
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
69
+ <div class="dropzone p-8 text-center cursor-pointer" id="dropzone">
70
+ <div class="flex flex-col items-center justify-center h-full">
71
+ <i data-feather="upload" class="w-12 h-12 text-blue-500 mb-4"></i>
72
+ <h3 class="text-lg font-medium text-gray-700 mb-2">Drag & Drop Files Here</h3>
73
+ <p class="text-gray-500 mb-4">or</p>
74
+ <label for="fileInput" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md cursor-pointer transition">
75
+ Select Files
76
+ </label>
77
+ <input type="file" id="fileInput" class="hidden" accept=".csv, .xlsx, .xls">
78
+ </div>
79
+ </div>
80
+
81
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
82
+ <h3 class="text-lg font-medium text-gray-700 mb-4">Or paste a file URL</h3>
83
+ <div class="flex space-x-2">
84
+ <input type="url" id="fileUrl" placeholder="https://example.com/data.csv" class="flex-grow px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
85
+ <button id="fetchUrlBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition">
86
+ <i data-feather="download" class="w-4 h-4"></i>
87
+ </button>
88
+ </div>
89
+ <div class="mt-4">
90
+ <p class="text-sm text-gray-500">Supported formats: CSV, Excel (.xlsx, .xls)</p>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </section>
95
+
96
+ <section id="visualizationSection" class="hidden" data-aos="fade-up">
97
+ <div class="flex justify-between items-center mb-6">
98
+ <h2 class="text-2xl font-bold text-gray-800">AI-Generated Visualizations</h2>
99
+ <div id="chartControls" class="hidden space-x-2">
100
+ <button id="editChartTitlesBtn" class="text-blue-600 hover:text-blue-800 flex items-center">
101
+ <i data-feather="edit-2" class="mr-1"></i> Edit Titles
102
+ </button>
103
+ </div>
104
+ </div>
105
+
106
+ <div id="chartContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
107
+ <!-- Charts will be dynamically inserted here -->
108
+ </div>
109
+
110
+ <div id="aiInsights" class="mt-12 bg-white p-6 rounded-lg shadow-sm border border-gray-200">
111
+ <h3 class="text-xl font-medium text-gray-700 mb-4 flex items-center">
112
+ <i data-feather="zap" class="text-yellow-500 mr-2"></i> AI Analysis
113
+ </h3>
114
+ <div id="insightsContent" class="text-gray-600">
115
+ <!-- AI insights will be dynamically inserted here -->
116
+ </div>
117
+ </div>
118
+ </section>
119
+ </main>
120
+
121
+ <footer class="bg-gray-100 py-6">
122
+ <div class="container mx-auto px-4 text-center">
123
+ <p class="text-gray-600">
124
+ <a href="#" id="footerLink" class="hover:text-blue-600 transition">Created by CG. All rights reserved</a><br>
125
+ <span class="text-xs text-gray-500">For internal use only. Uses company security policies.</span>
126
+ </p>
127
+ </div>
128
+ </footer>
129
+
130
+ <!-- Modals -->
131
+ <div id="pinModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
132
+ <div class="bg-white p-6 rounded-lg shadow-xl max-w-sm w-full">
133
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Enter Credentials</h3>
134
+ <input type="password" id="pinInput" placeholder="Enter PIN" class="w-full px-4 py-2 border border-gray-300 rounded-md mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
135
+ <input type="text" id="usernameInput" placeholder="Enter Username (except Super Admin)" class="w-full px-4 py-2 border border-gray-300 rounded-md mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500 hidden">
136
+ <div class="flex justify-end space-x-3">
137
+ <button id="cancelPinBtn" class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100">Cancel</button>
138
+ <button id="submitPinBtn" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Submit</button>
139
+ </div>
140
+ </div>
141
+ </div>
142
+
143
+ <div id="logoModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
144
+ <div class="bg-white p-6 rounded-lg shadow-xl max-w-sm w-full">
145
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Upload Company Logo</h3>
146
+ <input type="file" id="logoUpload" accept="image/*" class="w-full mb-4">
147
+ <div class="flex justify-end space-x-3">
148
+ <button id="cancelLogoBtn" class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100">Cancel</button>
149
+ <button id="saveLogoBtn" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Save</button>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <div id="headerModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
155
+ <div class="bg-white p-6 rounded-lg shadow-xl max-w-sm w-full">
156
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Edit Report Header</h3>
157
+ <input type="text" id="headerInput" placeholder="Enter new header" class="w-full px-4 py-2 border border-gray-300 rounded-md mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
158
+ <div class="flex justify-end space-x-3">
159
+ <button id="cancelHeaderBtn" class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100">Cancel</button>
160
+ <button id="saveHeaderBtn" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Save</button>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ <div id="doneBtnContainer" class="text-center mt-8 hidden">
166
+ <button id="doneBtn" class="bg-green-500 hover:bg-green-600 text-white px-6 py-3 rounded-md transition flex items-center mx-auto">
167
+ <i data-feather="check-circle" class="mr-2"></i> Done
168
+ </button>
169
+ </div>
170
+
171
+ <div id="shareModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
172
+ <div class="bg-white p-6 rounded-lg shadow-xl max-w-md w-full">
173
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Share Report</h3>
174
+ <p class="text-gray-600 mb-4">Share this link for view-only access:</p>
175
+ <div class="flex items-center mb-4">
176
+ <input type="text" id="shareLink" readonly class="flex-grow px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none">
177
+ <button id="copyLinkBtn" class="bg-blue-500 text-white px-4 py-2 rounded-r-md hover:bg-blue-600">
178
+ <i data-feather="copy"></i>
179
+ </button>
180
+ </div>
181
+ <div class="flex justify-end">
182
+ <button id="closeShareBtn" class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600">Close</button>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <div id="chartTitleModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
188
+ <div class="bg-white p-6 rounded-lg shadow-xl max-w-sm w-full">
189
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Edit Chart Title</h3>
190
+ <input type="text" id="chartTitleInput" placeholder="Enter new title" class="w-full px-4 py-2 border border-gray-300 rounded-md mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
191
+ <div class="flex justify-end space-x-3">
192
+ <button id="cancelTitleBtn" class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100">Cancel</button>
193
+ <button id="saveTitleBtn" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Save</button>
194
+ </div>
195
+ </div>
196
+ </div>
197
+
198
+ <script>
199
+ // User management modal
200
+ const userManagementModal = `
201
+ <div id="userManagementModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
202
+ <div class="bg-white p-6 rounded-lg shadow-xl max-w-md w-full">
203
+ <h3 class="text-xl font-bold text-gray-800 mb-4">User Management</h3>
204
+ <div class="mb-4 max-h-60 overflow-y-auto">
205
+ <table class="w-full text-sm">
206
+ <thead>
207
+ <tr class="border-b">
208
+ <th class="text-left py-2">Username</th>
209
+ <th class="text-left py-2">PIN</th>
210
+ <th class="text-left py-2">Actions</th>
211
+ </tr>
212
+ </thead>
213
+ <tbody id="userList">
214
+ <!-- Users will be populated here -->
215
+ </tbody>
216
+ </table>
217
+ </div>
218
+ <div class="flex space-x-2 mb-4">
219
+ <input type="text" id="newUsername" placeholder="New Username" class="flex-1 px-3 py-2 border rounded">
220
+ <input type="text" id="newPin" placeholder="New PIN" class="w-24 px-3 py-2 border rounded">
221
+ <button id="addUserBtn" class="bg-blue-500 text-white px-3 py-2 rounded">Add</button>
222
+ </div>
223
+ <div class="flex justify-end space-x-3">
224
+ <button id="closeUserModalBtn" class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100">Close</button>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ `;
229
+ document.body.insertAdjacentHTML('beforeend', userManagementModal);
230
+
231
+ document.addEventListener('DOMContentLoaded', function() {
232
+ feather.replace();
233
+ AOS.init();
234
+
235
+ // Sample data for demonstration
236
+ const sampleData = {
237
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
238
+ datasets: [{
239
+ label: 'Sales',
240
+ data: [65, 59, 80, 81, 56, 55],
241
+ backgroundColor: 'rgba(59, 130, 246, 0.2)',
242
+ borderColor: 'rgba(59, 130, 246, 1)',
243
+ borderWidth: 1
244
+ }]
245
+ };
246
+
247
+ const aiInsights = [
248
+ "The data shows a peak in sales during March and April, suggesting a seasonal trend.",
249
+ "February had the lowest sales, which might indicate a need for promotional activities during this period.",
250
+ "Overall, the first half of the year shows positive growth compared to previous years."
251
+ ];
252
+
253
+ // Dropzone functionality
254
+ const dropzone = document.getElementById('dropzone');
255
+ const fileInput = document.getElementById('fileInput');
256
+ const fileUrl = document.getElementById('fileUrl');
257
+ const fetchUrlBtn = document.getElementById('fetchUrlBtn');
258
+ const visualizationSection = document.getElementById('visualizationSection');
259
+ const chartContainer = document.getElementById('chartContainer');
260
+ const insightsContent = document.getElementById('insightsContent');
261
+
262
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
263
+ dropzone.addEventListener(eventName, preventDefaults, false);
264
+ });
265
+
266
+ function preventDefaults(e) {
267
+ e.preventDefault();
268
+ e.stopPropagation();
269
+ }
270
+
271
+ ['dragenter', 'dragover'].forEach(eventName => {
272
+ dropzone.addEventListener(eventName, highlight, false);
273
+ });
274
+
275
+ ['dragleave', 'drop'].forEach(eventName => {
276
+ dropzone.addEventListener(eventName, unhighlight, false);
277
+ });
278
+
279
+ function highlight() {
280
+ dropzone.classList.add('active');
281
+ }
282
+
283
+ function unhighlight() {
284
+ dropzone.classList.remove('active');
285
+ }
286
+
287
+ dropzone.addEventListener('drop', handleDrop, false);
288
+ fileInput.addEventListener('change', handleFiles, false);
289
+ fetchUrlBtn.addEventListener('click', handleUrlFetch);
290
+
291
+ function handleDrop(e) {
292
+ const dt = e.dataTransfer;
293
+ const files = dt.files;
294
+ handleFiles({ target: { files } });
295
+ }
296
+
297
+ function handleFiles(e) {
298
+ const files = e.target.files;
299
+ if (files.length) {
300
+ processFiles(files);
301
+ }
302
+ }
303
+
304
+ function handleUrlFetch() {
305
+ const url = fileUrl.value.trim();
306
+ if (url) {
307
+ // In a real app, you would fetch the file from the URL
308
+ // For demo purposes, we'll just simulate processing
309
+ setTimeout(() => {
310
+ processFiles([{ name: url.split('/').pop() }]);
311
+ }, 1000);
312
+ }
313
+ }
314
+
315
+ function processFiles(files) {
316
+ // Show loading state
317
+ dropzone.innerHTML = '<div class="flex flex-col items-center justify-center h-full"><i data-feather="loader" class="animate-spin w-12 h-12 text-blue-500 mb-4"></i><p class="text-gray-700">Processing file...</p></div>';
318
+ feather.replace();
319
+
320
+ // Simulate file processing and AI analysis
321
+ setTimeout(() => {
322
+ generateVisualizations();
323
+ showAIInsights();
324
+ visualizationSection.classList.remove('hidden');
325
+ document.getElementById('doneBtnContainer').classList.remove('hidden');
326
+ feather.replace();
327
+ }, 1500);
328
+ }
329
+
330
+ // Done button functionality
331
+ document.getElementById('doneBtn').addEventListener('click', function() {
332
+ alert('Your report has been processed successfully!');
333
+ });
334
+
335
+ // Share functionality
336
+ const shareReportBtn = document.getElementById('shareReportBtn');
337
+ const shareModal = document.getElementById('shareModal');
338
+ const shareLink = document.getElementById('shareLink');
339
+ const copyLinkBtn = document.getElementById('copyLinkBtn');
340
+ const closeShareBtn = document.getElementById('closeShareBtn');
341
+
342
+ shareReportBtn.addEventListener('click', function() {
343
+ // Check if viewer needs approval
344
+ if (window.location.search.includes('view=true')) {
345
+ alert('This report requires approval from the creator to share further.');
346
+ return;
347
+ }
348
+
349
+ // Generate unique URL
350
+ const reportId = Math.random().toString(36).substring(2, 8);
351
+ shareLink.value = window.location.href.split('?')[0] + `?view=true&report=${reportId}`;
352
+ shareModal.classList.remove('hidden');
353
+
354
+ // Show download prompt for first-time viewers
355
+ if (!localStorage.getItem('downloadedApp')) {
356
+ setTimeout(() => {
357
+ if (confirm('Download the HTML App shortcut to your desktop?')) {
358
+ const blob = new Blob([document.documentElement.outerHTML], {type: 'text/html'});
359
+ const url = URL.createObjectURL(blob);
360
+ const a = document.createElement('a');
361
+ a.href = url;
362
+ a.download = 'Data_Visualization_App.html';
363
+ document.body.appendChild(a);
364
+ a.click();
365
+ document.body.removeChild(a);
366
+ URL.revokeObjectURL(url);
367
+ localStorage.setItem('downloadedApp', 'true');
368
+ }
369
+ }, 1000);
370
+ }
371
+ });
372
+
373
+ copyLinkBtn.addEventListener('click', function() {
374
+ shareLink.select();
375
+ document.execCommand('copy');
376
+ feather.replace();
377
+ alert('Link copied to clipboard!');
378
+ });
379
+
380
+ closeShareBtn.addEventListener('click', function() {
381
+ shareModal.classList.add('hidden');
382
+ });
383
+
384
+ // Check for view-only mode
385
+ if (window.location.search.includes('view=true')) {
386
+ document.getElementById('headerControls').classList.add('hidden');
387
+ document.getElementById('chartControls').classList.add('hidden');
388
+ document.getElementById('dropzone').classList.add('hidden');
389
+ document.getElementById('fileInput').classList.add('hidden');
390
+ document.querySelector('input[type="url"]').parentElement.classList.add('hidden');
391
+ document.getElementById('doneBtnContainer').classList.add('hidden');
392
+ }
393
+
394
+ function generateVisualizations() {
395
+ // Clear previous charts
396
+ chartContainer.innerHTML = '';
397
+
398
+ // Generate sample charts (in a real app, this would be dynamic based on the data)
399
+ const chartTypes = ['bar', 'line', 'pie', 'doughnut', 'radar', 'polarArea'];
400
+
401
+ chartTypes.forEach((type, index) => {
402
+ const chartCard = document.createElement('div');
403
+ chartCard.className = 'chart-container bg-white p-4 rounded-lg shadow-sm border border-gray-200';
404
+ chartCard.innerHTML = `
405
+ <div class="flex justify-between items-center mb-3">
406
+ <h3 class="font-medium text-gray-700 chart-title">${type.charAt(0).toUpperCase() + type.slice(1)} Chart</h3>
407
+ <i data-feather="chevron-right" class="text-gray-400"></i>
408
+ </div>
409
+ <div class="h-64">
410
+ <canvas id="chart-${index}"></canvas>
411
+ </div>
412
+ `;
413
+ chartContainer.appendChild(chartCard);
414
+
415
+ // Initialize chart
416
+ const ctx = document.getElementById(`chart-${index}`).getContext('2d');
417
+ new Chart(ctx, {
418
+ type: type,
419
+ data: sampleData,
420
+ options: {
421
+ responsive: true,
422
+ maintainAspectRatio: false,
423
+ plugins: {
424
+ legend: {
425
+ position: 'bottom'
426
+ }
427
+ }
428
+ }
429
+ });
430
+ });
431
+
432
+ feather.replace();
433
+ }
434
+
435
+ function showAIInsights() {
436
+ insightsContent.innerHTML = '';
437
+ aiInsights.forEach(insight => {
438
+ const insightItem = document.createElement('p');
439
+ insightItem.className = 'mb-3 pl-4 border-l-4 border-blue-500';
440
+ insightItem.textContent = insight;
441
+ insightsContent.appendChild(insightItem);
442
+ });
443
+ }
444
+
445
+ // User management functionality
446
+ const userManagementBtn = document.createElement('button');
447
+ userManagementBtn.id = 'userManagementBtn';
448
+ userManagementBtn.className = 'text-blue-600 hover:text-blue-800 flex items-center hidden';
449
+ userManagementBtn.innerHTML = '<i data-feather="users" class="mr-1"></i> Manage Users';
450
+ document.getElementById('headerControls').prepend(userManagementBtn);
451
+
452
+ userManagementBtn.addEventListener('click', function() {
453
+ document.getElementById('userManagementModal').classList.remove('hidden');
454
+ // Populate user list
455
+ const userList = document.getElementById('userList');
456
+ userList.innerHTML = `
457
+ <tr>
458
+ <td class="py-2">Celine</td>
459
+ <td class="py-2">1111</td>
460
+ <td class="py-2"><i data-feather="trash-2" class="text-red-500 cursor-pointer"></i></td>
461
+ </tr>
462
+ <tr>
463
+ <td class="py-2">Jason</td>
464
+ <td class="py-2">C-1111</td>
465
+ <td class="py-2"><i data-feather="trash-2" class="text-red-500 cursor-pointer"></i></td>
466
+ </tr>
467
+ <tr>
468
+ <td class="py-2">Chris</td>
469
+ <td class="py-2">C-2222</td>
470
+ <td class="py-2"><i data-feather="trash-2" class="text-red-500 cursor-pointer"></i></td>
471
+ </tr>
472
+ <tr>
473
+ <td class="py-2">MNL1</td>
474
+ <td class="py-2">M-1111</td>
475
+ <td class="py-2"><i data-feather="trash-2" class="text-red-500 cursor-pointer"></i></td>
476
+ </tr>
477
+ <tr>
478
+ <td class="py-2">MNL2</td>
479
+ <td class="py-2">M-2222</td>
480
+ <td class="py-2"><i data-feather="trash-2" class="text-red-500 cursor-pointer"></i></td>
481
+ </tr>
482
+ <tr>
483
+ <td class="py-2">CEB3</td>
484
+ <td class="py-2">C-3333</td>
485
+ <td class="py-2"><i data-feather="trash-2" class="text-red-500 cursor-pointer"></i></td>
486
+ </tr>
487
+ `;
488
+ feather.replace();
489
+ });
490
+
491
+ document.getElementById('closeUserModalBtn').addEventListener('click', function() {
492
+ document.getElementById('userManagementModal').classList.add('hidden');
493
+ });
494
+
495
+ // Admin functionality
496
+ const footerLink = document.getElementById('footerLink');
497
+ const pinModal = document.getElementById('pinModal');
498
+ const pinInput = document.getElementById('pinInput');
499
+ const submitPinBtn = document.getElementById('submitPinBtn');
500
+ const cancelPinBtn = document.getElementById('cancelPinBtn');
501
+ const headerControls = document.getElementById('headerControls');
502
+ const chartControls = document.getElementById('chartControls');
503
+
504
+ footerLink.addEventListener('click', function(e) {
505
+ e.preventDefault();
506
+ pinModal.classList.remove('hidden');
507
+ document.getElementById('usernameInput').classList.remove('hidden');
508
+ if (pinInput.value === '1123') {
509
+ document.getElementById('usernameInput').classList.add('hidden');
510
+ }
511
+ });
512
+
513
+ cancelPinBtn.addEventListener('click', function() {
514
+ pinModal.classList.add('hidden');
515
+ pinInput.value = '';
516
+ });
517
+
518
+ submitPinBtn.addEventListener('click', function() {
519
+ const pin = pinInput.value;
520
+ const username = document.getElementById('usernameInput').value;
521
+
522
+ // Super Admin
523
+ if (pin === '1123') {
524
+ headerControls.classList.remove('hidden');
525
+ document.getElementById('editControls').classList.remove('hidden');
526
+ document.getElementById('doneEditingBtn').classList.remove('hidden');
527
+ chartControls.classList.remove('hidden');
528
+ pinModal.classList.add('hidden');
529
+ pinInput.value = '';
530
+ document.getElementById('usernameInput').classList.add('hidden');
531
+ }
532
+ // Admin
533
+ else if (pin === '1111' && username === 'Celine') {
534
+ headerControls.classList.remove('hidden');
535
+ document.getElementById('editControls').classList.remove('hidden');
536
+ document.getElementById('doneEditingBtn').classList.remove('hidden');
537
+ chartControls.classList.remove('hidden');
538
+ pinModal.classList.add('hidden');
539
+ pinInput.value = '';
540
+ document.getElementById('usernameInput').value = '';
541
+ }
542
+ // Regular Users
543
+ else if (
544
+ (pin === 'C-1111' && username === 'Jason') ||
545
+ (pin === 'C-2222' && username === 'Chris') ||
546
+ (pin === 'M-1111' && username === 'MNL1') ||
547
+ (pin === 'M-2222' && username === 'MNL2') ||
548
+ (pin === 'C-3333' && username === 'CEB3')
549
+ ) {
550
+ headerControls.classList.remove('hidden');
551
+ document.getElementById('uploadLogoBtn').classList.add('hidden');
552
+ document.getElementById('editHeaderBtn').classList.add('hidden');
553
+ document.getElementById('doneEditingBtn').classList.add('hidden');
554
+ chartControls.classList.remove('hidden');
555
+ pinModal.classList.add('hidden');
556
+ pinInput.value = '';
557
+ document.getElementById('usernameInput').value = '';
558
+ } else {
559
+ alert('Incorrect PIN or Username');
560
+ }
561
+ });
562
+
563
+ // Show user management button only for super admin
564
+ if (pin === '1123') {
565
+ document.getElementById('userManagementBtn').classList.remove('hidden');
566
+ }
567
+
568
+ // Logo upload
569
+ const uploadLogoBtn = document.getElementById('uploadLogoBtn');
570
+ const logoModal = document.getElementById('logoModal');
571
+ const logoUpload = document.getElementById('logoUpload');
572
+ const saveLogoBtn = document.getElementById('saveLogoBtn');
573
+ const cancelLogoBtn = document.getElementById('cancelLogoBtn');
574
+ const companyLogo = document.getElementById('companyLogo');
575
+
576
+ uploadLogoBtn.addEventListener('click', function() {
577
+ logoModal.classList.remove('hidden');
578
+ });
579
+
580
+ cancelLogoBtn.addEventListener('click', function() {
581
+ logoModal.classList.add('hidden');
582
+ logoUpload.value = '';
583
+ });
584
+
585
+ saveLogoBtn.addEventListener('click', function() {
586
+ if (logoUpload.files.length) {
587
+ const file = logoUpload.files[0];
588
+ const reader = new FileReader();
589
+ reader.onload = function(e) {
590
+ companyLogo.src = e.target.result;
591
+ };
592
+ reader.readAsDataURL(file);
593
+ logoModal.classList.add('hidden');
594
+ }
595
+ });
596
+
597
+ // Header edit
598
+ const editHeaderBtn = document.getElementById('editHeaderBtn');
599
+ const headerModal = document.getElementById('headerModal');
600
+ const headerInput = document.getElementById('headerInput');
601
+ const saveHeaderBtn = document.getElementById('saveHeaderBtn');
602
+ const cancelHeaderBtn = document.getElementById('cancelHeaderBtn');
603
+ const reportHeader = document.getElementById('reportHeader');
604
+
605
+ editHeaderBtn.addEventListener('click', function() {
606
+ headerInput.value = reportHeader.textContent;
607
+ headerModal.classList.remove('hidden');
608
+ });
609
+
610
+ cancelHeaderBtn.addEventListener('click', function() {
611
+ headerModal.classList.add('hidden');
612
+ });
613
+
614
+ saveHeaderBtn.addEventListener('click', function() {
615
+ reportHeader.textContent = headerInput.value;
616
+ headerModal.classList.add('hidden');
617
+ });
618
+
619
+ // Chart title edit
620
+ const editChartTitlesBtn = document.getElementById('editChartTitlesBtn');
621
+ const chartTitleModal = document.getElementById('chartTitleModal');
622
+ const chartTitleInput = document.getElementById('chartTitleInput');
623
+ const saveTitleBtn = document.getElementById('saveTitleBtn');
624
+ const cancelTitleBtn = document.getElementById('cancelTitleBtn');
625
+ let currentChartTitle = null;
626
+
627
+ editChartTitlesBtn.addEventListener('click', function() {
628
+ const chartTitles = document.querySelectorAll('.chart-title');
629
+ chartTitles.forEach(title => {
630
+ title.style.cursor = 'pointer';
631
+ title.addEventListener('click', function() {
632
+ currentChartTitle = this;
633
+ chartTitleInput.value = this.textContent;
634
+ chartTitleModal.classList.remove('hidden');
635
+ });
636
+ });
637
+ });
638
+
639
+ cancelTitleBtn.addEventListener('click', function() {
640
+ chartTitleModal.classList.add('hidden');
641
+ });
642
+
643
+ saveTitleBtn.addEventListener('click', function() {
644
+ if (currentChartTitle) {
645
+ currentChartTitle.textContent = chartTitleInput.value;
646
+ chartTitleModal.classList.add('hidden');
647
+ }
648
+ });
649
+ });
650
+ </script>
651
+ </body>
652
  </html>
prompts.txt ADDED
File without changes