Hugging Face's logo

Spaces:
LukasBe
/
complyvision
Running

App Files Community
LukasBe commited on
Commit
c21e997
·
verified ·
1 Parent(s): 660596b

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +185 -40
  2. prompts.txt +3 -1
index.html CHANGED
@@ -109,9 +109,111 @@
109
  mask-composite: exclude;
110
  pointer-events: none;
111
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
112
  </style>
113
  </head>
114
  <body class="antialiased">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
115
  <div class="flex h-screen overflow-hidden">
116
  <!-- Sidebar -->
117
  <div class="hidden md:flex md:flex-shrink-0">
@@ -134,37 +236,37 @@
134
 
135
  <div class="flex flex-col flex-grow px-3 overflow-y-auto">
136
  <nav class="space-y-1">
137
- <a href="#" class="sidebar-item active flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
138
  <i class="fas fa-chart-pie text-lg w-6 text-center mr-3 text-indigo-600"></i>
139
  Dashboard
140
  </a>
141
- <a href="#" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
142
  <i class="fas fa-file-contract text-lg w-6 text-center mr-3 text-gray-500"></i>
143
  Document Hub
144
  <span class="notification-badge bg-red-500 text-white font-semibold rounded-full flex items-center justify-center ml-auto">3</span>
145
  </a>
146
- <a href="#" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
147
  <i class="fas fa-bell text-lg w-6 text-center mr-3 text-gray-500"></i>
148
  Regulatory Alerts
149
  <span class="notification-badge bg-indigo-500 text-white font-semibold rounded-full flex items-center justify-center ml-auto">5</span>
150
  </a>
151
- <a href="#" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
152
  <i class="fas fa-user-check text-lg w-6 text-center mr-3 text-gray-500"></i>
153
  Suitability Engine
154
  </a>
155
- <a href="#" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
156
  <i class="fas fa-exchange-alt text-lg w-6 text-center mr-3 text-gray-500"></i>
157
  Transaction Reporting
158
  </a>
159
- <a href="#" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
160
  <i class="fas fa-search-dollar text-lg w-6 text-center mr-3 text-gray-500"></i>
161
  Trade Surveillance
162
  </a>
163
- <a href="#" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
164
  <i class="fas fa-tasks text-lg w-6 text-center mr-3 text-gray-500"></i>
165
  Case Management
166
  </a>
167
- <a href="#" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
168
  <i class="fas fa-chart-bar text-lg w-6 text-center mr-3 text-gray-500"></i>
169
  Analytics
170
  </a>
@@ -179,7 +281,7 @@
179
  <div class="ml-3">
180
  <p class="text-sm font-semibold text-indigo-900">Need assistance?</p>
181
  <p class="text-xs text-indigo-700 mt-1">Our support team is available 24/7</p>
182
- <button class="mt-2 text-xs font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">
183
  Contact Support <i class="fas fa-arrow-right ml-1 text-xs"></i>
184
  </button>
185
  </div>
@@ -195,22 +297,22 @@
195
  <!-- Top navigation -->
196
  <div class="flex items-center justify-between h-16 px-6 border-b border-gray-200 bg-white">
197
  <div class="flex items-center">
198
- <button class="md:hidden text-gray-500 hover:text-gray-600 focus:outline-none smooth-transition">
199
  <i class="fas fa-bars text-lg"></i>
200
  </button>
201
  <h1 class="ml-4 text-lg font-semibold text-gray-900">Compliance Dashboard</h1>
202
  </div>
203
  <div class="flex items-center space-x-4">
204
- <button class="text-gray-500 hover:text-gray-600 relative focus:outline-none smooth-transition">
205
  <i class="fas fa-bell text-lg"></i>
206
  <span class="notification-badge bg-red-500 text-white font-semibold rounded-full flex items-center justify-center">5</span>
207
  </button>
208
- <button class="text-gray-500 hover:text-gray-600 relative focus:outline-none smooth-transition">
209
  <i class="fas fa-envelope text-lg"></i>
210
  <span class="notification-badge bg-indigo-500 text-white font-semibold rounded-full flex items-center justify-center">2</span>
211
  </button>
212
  <div class="relative">
213
- <button class="flex items-center focus:outline-none group">
214
  <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
215
  <span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-900 smooth-transition">John Doe</span>
216
  <i class="fas fa-chevron-down ml-1 text-gray-500 text-xs group-hover:text-gray-700 smooth-transition"></i>
@@ -229,7 +331,7 @@
229
  <p class="text-gray-600 mt-1">Welcome back, John. Here's your compliance status at a glance.</p>
230
  </div>
231
  <div class="mt-4 md:mt-0">
232
- <button class="bg-gradient-to-br from-indigo-600 to-indigo-500 hover:from-indigo-700 hover:to-indigo-600 text-white px-5 py-2.5 rounded-lg flex items-center shadow-md hover:shadow-lg smooth-transition">
233
  <i class="fas fa-plus mr-2"></i>
234
  New Task
235
  </button>
@@ -252,7 +354,7 @@
252
  <div class="mt-5">
253
  <div class="flex items-center justify-between text-sm">
254
  <span class="text-gray-500">3 overdue</span>
255
- <a href="#" class="font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">View all</a>
256
  </div>
257
  </div>
258
  </div>
@@ -270,7 +372,7 @@
270
  <div class="mt-5">
271
  <div class="flex items-center justify-between text-sm">
272
  <span class="text-gray-500">This week</span>
273
- <a href="#" class="font-medium text-green-600 hover:text-green-700 smooth-transition">View all</a>
274
  </div>
275
  </div>
276
  </div>
@@ -288,7 +390,7 @@
288
  <div class="mt-5">
289
  <div class="flex items-center justify-between text-sm">
290
  <span class="text-gray-500">2 critical</span>
291
- <a href="#" class="font-medium text-yellow-600 hover:text-yellow-700 smooth-transition">View all</a>
292
  </div>
293
  </div>
294
  </div>
@@ -324,7 +426,7 @@
324
  <div class="px-5 py-4 border-b border-gray-200 bg-white">
325
  <div class="flex items-center justify-between">
326
  <h3 class="text-lg font-semibold text-gray-900">Regulatory Alerts</h3>
327
- <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">View All</a>
328
  </div>
329
  </div>
330
  <div class="divide-y divide-gray-200">
@@ -394,7 +496,7 @@
394
  <div class="px-5 py-4 border-b border-gray-200 bg-white">
395
  <div class="flex items-center justify-between">
396
  <h3 class="text-lg font-semibold text-gray-900">Recent Documents</h3>
397
- <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">View All</a>
398
  </div>
399
  </div>
400
  <div class="divide-y divide-gray-200">
@@ -402,7 +504,7 @@
402
  <div class="flex items-center">
403
  <div class="flex-shrink-0">
404
  <div class="h-10 w-10 rounded-md bg-blue-100 flex items-center justify-center">
405
- <i class="fas fa-file-pdf text-blue-600"></i>
406
  </div>
407
  </div>
408
  <div class="ml-4 flex-1 min-w-0">
@@ -411,13 +513,13 @@
411
  </div>
412
  <div class="ml-4 flex-shrink-0">
413
  <div class="flex space-x-3">
414
- <button class="text-gray-400 hover:text-gray-500 smooth-transition">
415
  <i class="fas fa-eye"></i>
416
  </button>
417
- <button class="text-gray-400 hover:text-gray-500 smooth-transition">
418
  <i class="fas fa-download"></i>
419
  </button>
420
- <button class="text-gray-400 hover:text-gray-500 smooth-transition">
421
  <i class="fas fa-ellipsis-v"></i>
422
  </button>
423
  </div>
@@ -437,13 +539,13 @@
437
  </div>
438
  <div class="ml-4 flex-shrink-0">
439
  <div class="flex space-x-3">
440
- <button class="text-gray-400 hover:text-gray-500 smooth-transition">
441
  <i class="fas fa-eye"></i>
442
  </button>
443
- <button class="text-gray-400 hover:text-gray-500 smooth-transition">
444
  <i class="fas fa-download"></i>
445
  </button>
446
- <button class="text-gray-400 hover:text-gray-500 smooth-transition">
447
  <i class="fas fa-ellipsis-v"></i>
448
  </button>
449
  </div>
@@ -463,13 +565,13 @@
463
  </div>
464
  <div class="ml-4 flex-shrink-0">
465
  <div class="flex space-x-3">
466
- <button class="text-gray-400 hover:text-gray-500 smooth-transition">
467
  <i class="fas fa-eye"></i>
468
  </button>
469
- <button class="text-gray-400 hover:text-gray-500 smooth-transition">
470
  <i class="fas fa-download"></i>
471
  </button>
472
- <button class="text-gray-400 hover:text-gray-500 smooth-transition">
473
  <i class="fas fa-ellipsis-v"></i>
474
  </button>
475
  </div>
@@ -487,14 +589,14 @@
487
  <div class="px-5 py-4 border-b border-gray-200 bg-white">
488
  <div class="flex items-center justify-between">
489
  <h3 class="text-lg font-semibold text-gray-900">My Tasks</h3>
490
- <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">View All</a>
491
  </div>
492
  </div>
493
  <div class="divide-y divide-gray-200">
494
  <div class="p-5 hover:bg-gray-50 smooth-transition">
495
  <div class="flex items-start">
496
  <div class="flex-shrink-0 pt-0.5">
497
- <input type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
498
  </div>
499
  <div class="ml-3 flex-1">
500
  <div class="flex items-center justify-between">
@@ -511,7 +613,7 @@
511
  <div class="p-5 hover:bg-gray-50 smooth-transition">
512
  <div class="flex items-start">
513
  <div class="flex-shrink-0 pt-0.5">
514
- <input type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
515
  </div>
516
  <div class="ml-3 flex-1">
517
  <div class="flex items-center justify-between">
@@ -528,7 +630,7 @@
528
  <div class="p-5 hover:bg-gray-50 smooth-transition">
529
  <div class="flex items-start">
530
  <div class="flex-shrink-0 pt-0.5">
531
- <input type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
532
  </div>
533
  <div class="ml-3 flex-1">
534
  <div class="flex items-center justify-between">
@@ -537,7 +639,7 @@
537
  </div>
538
  <p class="text-sm text-gray-500 mt-1">Unusual trading pattern detected for client #45892</p>
539
  <div class="mt-3 flex items-center space-x-2">
540
- <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">Surveillance</span>
541
  </div>
542
  </div>
543
  </div>
@@ -550,7 +652,7 @@
550
  <div class="px-5 py-4 border-b border-gray-200 bg-white">
551
  <div class="flex items-center justify-between">
552
  <h3 class="text-lg font-semibold text-gray-900">Compliance Calendar</h3>
553
- <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">View All</a>
554
  </div>
555
  </div>
556
  <div class="p-5">
@@ -604,7 +706,7 @@
604
  <div class="flex items-center justify-between mb-5">
605
  <h3 class="text-lg font-semibold text-gray-900">Case Status</h3>
606
  <div class="flex space-x-2">
607
- <button class="text-gray-400 hover:text-gray-500 smooth-transition">
608
  <i class="fas fa-ellipsis-v"></i>
609
  </button>
610
  </div>
@@ -619,7 +721,7 @@
619
  <div class="flex items-center justify-between mb-5">
620
  <h3 class="text-lg font-semibold text-gray-900">SLA Compliance</h3>
621
  <div class="flex space-x-2">
622
- <button class="text-gray-400 hover:text-gray-500 smooth-transition">
623
  <i class="fas fa-ellipsis-v"></i>
624
  </button>
625
  </div>
@@ -635,11 +737,54 @@
635
 
636
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
637
  <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
638
  // Sidebar active state
639
  document.querySelectorAll('.sidebar-item').forEach(item => {
640
- item.addEventListener('click', function() {
641
- document.querySelectorAll('.sidebar-item').forEach(i => i.classList.remove('active'));
642
- this.classList.add('active');
 
 
 
 
 
 
 
 
 
643
  });
644
  });
645
 
 
109
  mask-composite: exclude;
110
  pointer-events: none;
111
  }
112
+
113
+ /* Modal styles */
114
+ .modal {
115
+ display: none;
116
+ position: fixed;
117
+ top: 0;
118
+ left: 0;
119
+ width: 100%;
120
+ height: 100%;
121
+ background-color: rgba(0, 0, 0, 0.5);
122
+ z-index: 1000;
123
+ justify-content: center;
124
+ align-items: center;
125
+ }
126
+
127
+ .modal-content {
128
+ background-color: white;
129
+ width: 90%;
130
+ max-width: 800px;
131
+ max-height: 90vh;
132
+ border-radius: 0.5rem;
133
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
134
+ overflow: hidden;
135
+ display: flex;
136
+ flex-direction: column;
137
+ }
138
+
139
+ .modal-header {
140
+ padding: 1rem 1.5rem;
141
+ border-bottom: 1px solid #e5e7eb;
142
+ display: flex;
143
+ justify-content: space-between;
144
+ align-items: center;
145
+ }
146
+
147
+ .modal-body {
148
+ padding: 1.5rem;
149
+ overflow-y: auto;
150
+ flex-grow: 1;
151
+ }
152
+
153
+ .modal-footer {
154
+ padding: 1rem 1.5rem;
155
+ border-top: 1px solid #e5e7eb;
156
+ display: flex;
157
+ justify-content: flex-end;
158
+ }
159
+
160
+ .prompt-code {
161
+ background-color: #f3f4f6;
162
+ border-radius: 0.375rem;
163
+ padding: 1rem;
164
+ font-family: 'Courier New', Courier, monospace;
165
+ white-space: pre-wrap;
166
+ margin-top: 1rem;
167
+ position: relative;
168
+ }
169
+
170
+ .copy-btn {
171
+ position: absolute;
172
+ top: 0.5rem;
173
+ right: 0.5rem;
174
+ background-color: #e5e7eb;
175
+ border: none;
176
+ border-radius: 0.25rem;
177
+ padding: 0.25rem 0.5rem;
178
+ cursor: pointer;
179
+ font-size: 0.75rem;
180
+ }
181
+
182
+ .copy-btn:hover {
183
+ background-color: #d1d5db;
184
+ }
185
  </style>
186
  </head>
187
  <body class="antialiased">
188
+ <!-- Modal Structure -->
189
+ <div id="functionModal" class="modal">
190
+ <div class="modal-content">
191
+ <div class="modal-header">
192
+ <h3 class="text-lg font-semibold text-gray-900" id="modalTitle">Function Details</h3>
193
+ <button onclick="closeModal()" class="text-gray-400 hover:text-gray-500">
194
+ <i class="fas fa-times"></i>
195
+ </button>
196
+ </div>
197
+ <div class="modal-body">
198
+ <div id="modalDescription" class="text-gray-700"></div>
199
+ <div class="mt-4">
200
+ <h4 class="font-medium text-gray-900 mb-2">ChatGPT Prompt:</h4>
201
+ <div class="prompt-code">
202
+ <button onclick="copyPromptToClipboard()" class="copy-btn">
203
+ <i class="fas fa-copy mr-1"></i> Copy
204
+ </button>
205
+ <div id="promptText"></div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ <div class="modal-footer">
210
+ <button onclick="closeModal()" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200">
211
+ Close
212
+ </button>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
  <div class="flex h-screen overflow-hidden">
218
  <!-- Sidebar -->
219
  <div class="hidden md:flex md:flex-shrink-0">
 
236
 
237
  <div class="flex flex-col flex-grow px-3 overflow-y-auto">
238
  <nav class="space-y-1">
239
+ <a href="javascript:void(0)" onclick="showFunctionModal('Dashboard', 'Main dashboard view showing compliance overview and key metrics.', 'Create a comprehensive compliance dashboard for a financial services company. The dashboard should display:\n\n1. Key compliance metrics (pending documents, completed tasks, alerts, SLA compliance)\n2. Regulatory alerts section with priority indicators\n3. Recent documents section with quick actions\n4. Task management with due dates\n5. Compliance calendar with upcoming deadlines\n6. Visual charts for case status and SLA trends\n\nUse a clean, professional design with a color scheme of indigo/purple as primary colors. Implement interactive elements with hover effects and smooth transitions. The dashboard should be fully responsive and accessible. Include a sidebar navigation with 8 main sections and a help widget.')" class="sidebar-item active flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
240
  <i class="fas fa-chart-pie text-lg w-6 text-center mr-3 text-indigo-600"></i>
241
  Dashboard
242
  </a>
243
+ <a href="javascript:void(0)" onclick="showFunctionModal('Document Hub', 'Central repository for all compliance documents with version control.', 'Build a document management hub for compliance documents with these features:\n\n1. Document listing with type icons (PDF, Word, Excel)\n2. Version control and history tracking\n3. Metadata display (last updated, author)\n4. Quick actions (view, download, more options)\n5. Search and filtering capabilities\n6. Status indicators (pending review, approved, etc.)\n7. Bulk actions for multiple documents\n8. Upload new documents with drag-and-drop\n\nDocuments should be organized in a card/list view with clear status indicators. Include document preview functionality and permission-based access controls.')" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
244
  <i class="fas fa-file-contract text-lg w-6 text-center mr-3 text-gray-500"></i>
245
  Document Hub
246
  <span class="notification-badge bg-red-500 text-white font-semibold rounded-full flex items-center justify-center ml-auto">3</span>
247
  </a>
248
+ <a href="javascript:void(0)" onclick="showFunctionModal('Regulatory Alerts', 'Real-time notifications about regulatory changes and updates.', 'Develop a regulatory alerts system with:\n\n1. Real-time alert notifications\n2. Priority classification (critical, high, medium, low)\n3. Regulatory body filtering (ESMA, ČNB, EU, etc.)\n4. Detailed alert view with impact analysis\n5. Action tracking (acknowledged, in progress, resolved)\n6. Email/SMS notification options\n7. Historical alert archive\n8. Regulatory change tracking\n\nAlerts should be displayed with clear visual indicators for priority. Include a mechanism for users to add comments and mark alerts as resolved.')" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
249
  <i class="fas fa-bell text-lg w-6 text-center mr-3 text-gray-500"></i>
250
  Regulatory Alerts
251
  <span class="notification-badge bg-indigo-500 text-white font-semibold rounded-full flex items-center justify-center ml-auto">5</span>
252
  </a>
253
+ <a href="javascript:void(0)" onclick="showFunctionModal('Suitability Engine', 'Tool for assessing investment suitability based on client profiles.', 'Create a suitability assessment engine that:\n\n1. Collects client investment profile data\n2. Analyzes product suitability based on MiFID II requirements\n3. Generates suitability reports\n4. Flags potential mismatches\n5. Stores assessment history\n6. Provides audit trail\n7. Integrates with client database\n8. Supports bulk assessments\n\nThe interface should guide users through the assessment process with clear steps. Include visual indicators for risk levels and compatibility scores. Generate PDF reports with compliance documentation.')" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
254
  <i class="fas fa-user-check text-lg w-6 text-center mr-3 text-gray-500"></i>
255
  Suitability Engine
256
  </a>
257
+ <a href="javascript:void(0)" onclick="showFunctionModal('Transaction Reporting', 'System for preparing and submitting regulatory transaction reports.', 'Build a transaction reporting module that:\n\n1. Collects trade data from multiple sources\n2. Validates data against regulatory requirements\n3. Formats reports for different regulators (ESMA, ČNB, etc.)\n4. Tracks submission status\n5. Stores submission history\n6. Flags reporting errors\n7. Generates audit trails\n8. Supports bulk corrections\n\nThe system should support multiple reporting regimes (MiFIR, EMIR, etc.) with configurable rules. Include validation checks before submission and confirmation receipts.')" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
258
  <i class="fas fa-exchange-alt text-lg w-6 text-center mr-3 text-gray-500"></i>
259
  Transaction Reporting
260
  </a>
261
+ <a href="javascript:void(0)" onclick="showFunctionModal('Trade Surveillance', 'Monitoring system for detecting suspicious trading patterns.', 'Develop a trade surveillance system with:\n\n1. Real-time trade monitoring\n2. Pattern detection algorithms\n3. Alert generation for suspicious activity\n4. Case management workflow\n5. Investigation tools\n6. Regulatory reporting integration\n7. Historical analysis\n8. Custom rule configuration\n\nThe interface should provide visualizations of trading patterns and clear alert details. Include tools for annotating cases and marking them as resolved. Support exporting data for regulatory reporting.')" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
262
  <i class="fas fa-search-dollar text-lg w-6 text-center mr-3 text-gray-500"></i>
263
  Trade Surveillance
264
  </a>
265
+ <a href="javascript:void(0)" onclick="showFunctionModal('Case Management', 'Workflow system for tracking compliance cases and investigations.', 'Create a case management system with:\n\n1. Case creation and assignment\n2. Status tracking (open, in progress, resolved)\n3. Document attachment\n4. Team collaboration\n5. Deadline management\n6. Reporting dashboards\n7. Audit logging\n8. Custom workflow configuration\n\nCases should be organized with filters and search. Include timeline views of case activity and email notifications for updates. Support exporting case data for regulatory purposes.')" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
266
  <i class="fas fa-tasks text-lg w-6 text-center mr-3 text-gray-500"></i>
267
  Case Management
268
  </a>
269
+ <a href="javascript:void(0)" onclick="showFunctionModal('Analytics', 'Reporting and visualization tools for compliance metrics.', 'Build an analytics module that:\n\n1. Tracks key compliance metrics\n2. Provides visual dashboards\n3. Supports custom reporting\n4. Offers data export options\n5. Includes regulatory benchmarking\n6. Tracks trends over time\n7. Alerts on metric thresholds\n8. Integrates with other modules\n\nThe analytics should include interactive charts and tables. Support scheduled report generation and distribution. Include drill-down capabilities for detailed analysis.')" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
270
  <i class="fas fa-chart-bar text-lg w-6 text-center mr-3 text-gray-500"></i>
271
  Analytics
272
  </a>
 
281
  <div class="ml-3">
282
  <p class="text-sm font-semibold text-indigo-900">Need assistance?</p>
283
  <p class="text-xs text-indigo-700 mt-1">Our support team is available 24/7</p>
284
+ <button onclick="showFunctionModal('Support', 'Contact support team for technical assistance.', 'Create a support contact system that:\n\n1. Provides multiple contact channels (email, chat, phone)\n2. Tracks support ticket status\n3. Offers knowledge base access\n4. Includes live chat functionality\n5. Provides estimated response times\n6. Supports file attachments\n7. Includes satisfaction surveys\n8. Integrates with user authentication\n\nThe interface should make it easy to submit support requests with clear categories. Include status tracking for open tickets and historical view of past interactions.')" class="mt-2 text-xs font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">
285
  Contact Support <i class="fas fa-arrow-right ml-1 text-xs"></i>
286
  </button>
287
  </div>
 
297
  <!-- Top navigation -->
298
  <div class="flex items-center justify-between h-16 px-6 border-b border-gray-200 bg-white">
299
  <div class="flex items-center">
300
+ <button onclick="showFunctionModal('Mobile Menu', 'Toggle button for mobile navigation menu.', 'Create a responsive mobile menu toggle that:\n\n1. Works on all device sizes\n2. Has accessible aria-labels\n3. Includes smooth animations\n4. Supports keyboard navigation\n5. Maintains state between views\n6. Integrates with existing navigation\n7. Has proper focus management\n8. Follows mobile UX best practices\n\nThe button should clearly indicate menu state (open/closed) and work with the existing sidebar navigation. Include proper touch targets for mobile devices.')" class="md:hidden text-gray-500 hover:text-gray-600 focus:outline-none smooth-transition">
301
  <i class="fas fa-bars text-lg"></i>
302
  </button>
303
  <h1 class="ml-4 text-lg font-semibold text-gray-900">Compliance Dashboard</h1>
304
  </div>
305
  <div class="flex items-center space-x-4">
306
+ <button onclick="showFunctionModal('Notifications', 'System notifications and alerts center.', 'Create a notifications center that:\n\n1. Aggregates system notifications\n2. Supports different notification types\n3. Includes unread indicators\n4. Allows marking as read\n5. Provides filtering options\n6. Stores notification history\n7. Supports actionable notifications\n8. Integrates with other modules\n\nThe interface should display notifications in a dropdown or dedicated view. Include visual indicators for priority and type. Support bulk actions for managing multiple notifications.')" class="text-gray-500 hover:text-gray-600 relative focus:outline-none smooth-transition">
307
  <i class="fas fa-bell text-lg"></i>
308
  <span class="notification-badge bg-red-500 text-white font-semibold rounded-full flex items-center justify-center">5</span>
309
  </button>
310
+ <button onclick="showFunctionModal('Messages', 'Internal messaging system for team communication.', 'Build a messaging system that:\n\n1. Supports direct and group messages\n2. Includes read receipts\n3. Allows file attachments\n4. Provides search functionality\n5. Integrates with user directory\n6. Supports message threading\n7. Offers notification preferences\n8. Maintains message history\n\nThe interface should provide a clean messaging experience with conversation lists and message views. Include typing indicators and online status for users.')" class="text-gray-500 hover:text-gray-600 relative focus:outline-none smooth-transition">
311
  <i class="fas fa-envelope text-lg"></i>
312
  <span class="notification-badge bg-indigo-500 text-white font-semibold rounded-full flex items-center justify-center">2</span>
313
  </button>
314
  <div class="relative">
315
+ <button onclick="showFunctionModal('User Profile', 'User account settings and profile management.', 'Create a user profile section that:\n\n1. Displays user information\n2. Allows profile editing\n3. Manages account settings\n4. Controls notification preferences\n5. Shows activity history\n6. Includes security settings\n7. Supports profile picture upload\n8. Integrates with authentication\n\nThe interface should provide a comprehensive view of user account with clear sections. Include form validation for editing and proper error handling. Support two-factor authentication setup.')" class="flex items-center focus:outline-none group">
316
  <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
317
  <span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-900 smooth-transition">John Doe</span>
318
  <i class="fas fa-chevron-down ml-1 text-gray-500 text-xs group-hover:text-gray-700 smooth-transition"></i>
 
331
  <p class="text-gray-600 mt-1">Welcome back, John. Here's your compliance status at a glance.</p>
332
  </div>
333
  <div class="mt-4 md:mt-0">
334
+ <button onclick="showFunctionModal('New Task', 'Create a new compliance task or action item.', 'Create a task creation form that:\n\n1. Captures task details (title, description)\n2. Assigns to team members\n3. Sets priority levels\n4. Adds due dates\n5. Attaches relevant documents\n6. Links to compliance requirements\n7. Sets reminders\n8. Integrates with calendar\n\nThe form should include validation and auto-suggestions for assignees. Support task templates for common compliance activities. Include proper error handling and confirmation messages.')" class="bg-gradient-to-br from-indigo-600 to-indigo-500 hover:from-indigo-700 hover:to-indigo-600 text-white px-5 py-2.5 rounded-lg flex items-center shadow-md hover:shadow-lg smooth-transition">
335
  <i class="fas fa-plus mr-2"></i>
336
  New Task
337
  </button>
 
354
  <div class="mt-5">
355
  <div class="flex items-center justify-between text-sm">
356
  <span class="text-gray-500">3 overdue</span>
357
+ <a href="javascript:void(0)" onclick="showFunctionModal('View Documents', 'View all pending compliance documents.', 'Create a document listing view that:\n\n1. Displays all pending documents\n2. Allows filtering by type/status\n3. Shows overdue indicators\n4. Provides quick actions\n5. Supports bulk operations\n6. Includes search functionality\n7. Shows document metadata\n8. Integrates with approval workflow\n\nThe view should be sortable and paginated for large document sets. Include visual indicators for document status and priority. Support exporting the document list.')" class="font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">View all</a>
358
  </div>
359
  </div>
360
  </div>
 
372
  <div class="mt-5">
373
  <div class="flex items-center justify-between text-sm">
374
  <span class="text-gray-500">This week</span>
375
+ <a href="javascript:void(0)" onclick="showFunctionModal('View Tasks', 'View all completed compliance tasks.', 'Create a task history view that:\n\n1. Lists completed tasks\n2. Filters by date range\n3. Shows completion details\n4. Displays assignee information\n5. Includes approval records\n6. Supports exporting data\n7. Links to related documents\n8. Integrates with reporting\n\nThe view should provide insights into task completion patterns. Include visual indicators for on-time vs. late completion. Support drill-down into task details.')" class="font-medium text-green-600 hover:text-green-700 smooth-transition">View all</a>
376
  </div>
377
  </div>
378
  </div>
 
390
  <div class="mt-5">
391
  <div class="flex items-center justify-between text-sm">
392
  <span class="text-gray-500">2 critical</span>
393
+ <a href="javascript:void(0)" onclick="showFunctionModal('View Alerts', 'View all active compliance alerts.', 'Create an alert management view that:\n\n1. Lists all active alerts\n2. Highlights critical alerts\n3. Shows alert details\n4. Tracks investigation status\n5. Allows alert resolution\n6. Supports filtering/sorting\n7. Includes audit trail\n8. Integrates with case management\n\nThe view should prioritize critical alerts and show investigation progress. Include tools for assigning alerts and adding notes. Support exporting alert data.')" class="font-medium text-yellow-600 hover:text-yellow-700 smooth-transition">View all</a>
394
  </div>
395
  </div>
396
  </div>
 
426
  <div class="px-5 py-4 border-b border-gray-200 bg-white">
427
  <div class="flex items-center justify-between">
428
  <h3 class="text-lg font-semibold text-gray-900">Regulatory Alerts</h3>
429
+ <a href="javascript:void(0)" onclick="showFunctionModal('All Alerts', 'View all regulatory alerts and updates.', 'Create a comprehensive regulatory alert system that:\n\n1. Aggregates alerts from multiple sources\n2. Categorizes by regulatory body\n3. Prioritizes by impact\n4. Tracks acknowledgment\n5. Links to related documents\n6. Supports comments\n7. Includes historical archive\n8. Integrates with task management\n\nThe system should provide a centralized view of all regulatory changes with filtering options. Include tools for assigning follow-up actions and tracking implementation.')" class="text-sm font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">View All</a>
430
  </div>
431
  </div>
432
  <div class="divide-y divide-gray-200">
 
496
  <div class="px-5 py-4 border-b border-gray-200 bg-white">
497
  <div class="flex items-center justify-between">
498
  <h3 class="text-lg font-semibold text-gray-900">Recent Documents</h3>
499
+ <a href="javascript:void(0)" onclick="showFunctionModal('All Documents', 'View all compliance documents in the system.', 'Create a comprehensive document management system that:\n\n1. Stores all compliance documents\n2. Tracks versions and changes\n3. Manages access controls\n4. Supports document workflows\n5. Includes approval processes\n6. Provides audit trails\n7. Offers bulk operations\n8. Integrates with other modules\n\nThe system should handle documents of various types with proper metadata. Include tools for document comparison and change tracking. Support automated retention policies.')" class="text-sm font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">View All</a>
500
  </div>
501
  </div>
502
  <div class="divide-y divide-gray-200">
 
504
  <div class="flex items-center">
505
  <div class="flex-shrink-0">
506
  <div class="h-10 w-10 rounded-md bg-blue-100 flex items-center justify-center">
507
+ <i class="fas fa-file-pdf text-blue-600"></i>
508
  </div>
509
  </div>
510
  <div class="ml-4 flex-1 min-w-0">
 
513
  </div>
514
  <div class="ml-4 flex-shrink-0">
515
  <div class="flex space-x-3">
516
+ <button onclick="showFunctionModal('View Document', 'Preview document content.', 'Create a document preview feature that:\n\n1. Displays document content\n2. Supports multiple formats (PDF, Word, Excel)\n3. Includes zoom controls\n4. Allows annotation\n5. Supports fullscreen view\n6. Works on mobile devices\n7. Preserves formatting\n8. Integrates with permissions\n\nThe preview should handle large documents efficiently. Include tools for highlighting and commenting. Support downloading the document.')" class="text-gray-400 hover:text-gray-500 smooth-transition">
517
  <i class="fas fa-eye"></i>
518
  </button>
519
+ <button onclick="showFunctionModal('Download Document', 'Download document to local device.', 'Create a document download feature that:\n\n1. Downloads the original file\n2. Tracks download history\n3. Supports multiple formats\n4. Includes virus scanning\n5. Works with large files\n6. Preserves metadata\n7. Integrates with permissions\n8. Provides download options\n\nThe download should be reliable and show progress. Include options for downloading specific versions. Support bulk downloads when permitted.')" class="text-gray-400 hover:text-gray-500 smooth-transition">
520
  <i class="fas fa-download"></i>
521
  </button>
522
+ <button onclick="showFunctionModal('Document Actions', 'Additional document management actions.', 'Create a document actions menu that:\n\n1. Provides context-specific actions\n2. Includes version management\n3. Supports sharing options\n4. Allows metadata editing\n5. Includes workflow actions\n6. Offers export options\n7. Supports bulk operations\n8. Integrates with other features\n\nThe menu should adapt based on document type and user permissions. Include tools for comparing versions and managing access. Support custom actions through plugins.')" class="text-gray-400 hover:text-gray-500 smooth-transition">
523
  <i class="fas fa-ellipsis-v"></i>
524
  </button>
525
  </div>
 
539
  </div>
540
  <div class="ml-4 flex-shrink-0">
541
  <div class="flex space-x-3">
542
+ <button onclick="showFunctionModal('View Document', 'Preview document content.', 'Create a document preview feature that:\n\n1. Displays document content\n2. Supports multiple formats (PDF, Word, Excel)\n3. Includes zoom controls\n4. Allows annotation\n5. Supports fullscreen view\n6. Works on mobile devices\n7. Preserves formatting\n8. Integrates with permissions\n\nThe preview should handle large documents efficiently. Include tools for highlighting and commenting. Support downloading the document.')" class="text-gray-400 hover:text-gray-500 smooth-transition">
543
  <i class="fas fa-eye"></i>
544
  </button>
545
+ <button onclick="showFunctionModal('Download Document', 'Download document to local device.', 'Create a document download feature that:\n\n1. Downloads the original file\n2. Tracks download history\n3. Supports multiple formats\n4. Includes virus scanning\n5. Works with large files\n6. Preserves metadata\n7. Integrates with permissions\n8. Provides download options\n\nThe download should be reliable and show progress. Include options for downloading specific versions. Support bulk downloads when permitted.')" class="text-gray-400 hover:text-gray-500 smooth-transition">
546
  <i class="fas fa-download"></i>
547
  </button>
548
+ <button onclick="showFunctionModal('Document Actions', 'Additional document management actions.', 'Create a document actions menu that:\n\n1. Provides context-specific actions\n2. Includes version management\n3. Supports sharing options\n4. Allows metadata editing\n5. Includes workflow actions\n6. Offers export options\n7. Supports bulk operations\n8. Integrates with other features\n\nThe menu should adapt based on document type and user permissions. Include tools for comparing versions and managing access. Support custom actions through plugins.')" class="text-gray-400 hover:text-gray-500 smooth-transition">
549
  <i class="fas fa-ellipsis-v"></i>
550
  </button>
551
  </div>
 
565
  </div>
566
  <div class="ml-4 flex-shrink-0">
567
  <div class="flex space-x-3">
568
+ <button onclick="showFunctionModal('View Document', 'Preview document content.', 'Create a document preview feature that:\n\n1. Displays document content\n2. Supports multiple formats (PDF, Word, Excel)\n3. Includes zoom controls\n4. Allows annotation\n5. Supports fullscreen view\n6. Works on mobile devices\n7. Preserves formatting\n8. Integrates with permissions\n\nThe preview should handle large documents efficiently. Include tools for highlighting and commenting. Support downloading the document.')" class="text-gray-400 hover:text-gray-500 smooth-transition">
569
  <i class="fas fa-eye"></i>
570
  </button>
571
+ <button onclick="showFunctionModal('Download Document', 'Download document to local device.', 'Create a document download feature that:\n\n1. Downloads the original file\n2. Tracks download history\n3. Supports multiple formats\n4. Includes virus scanning\n5. Works with large files\n6. Preserves metadata\n7. Integrates with permissions\n8. Provides download options\n\nThe download should be reliable and show progress. Include options for downloading specific versions. Support bulk downloads when permitted.')" class="text-gray-400 hover:text-gray-500 smooth-transition">
572
  <i class="fas fa-download"></i>
573
  </button>
574
+ <button onclick="showFunctionModal('Document Actions', 'Additional document management actions.', 'Create a document actions menu that:\n\n1. Provides context-specific actions\n2. Includes version management\n3. Supports sharing options\n4. Allows metadata editing\n5. Includes workflow actions\n6. Offers export options\n7. Supports bulk operations\n8. Integrates with other features\n\nThe menu should adapt based on document type and user permissions. Include tools for comparing versions and managing access. Support custom actions through plugins.')" class="text-gray-400 hover:text-gray-500 smooth-transition">
575
  <i class="fas fa-ellipsis-v"></i>
576
  </button>
577
  </div>
 
589
  <div class="px-5 py-4 border-b border-gray-200 bg-white">
590
  <div class="flex items-center justify-between">
591
  <h3 class="text-lg font-semibold text-gray-900">My Tasks</h3>
592
+ <a href="javascript:void(0)" onclick="showFunctionModal('All Tasks', 'View all assigned compliance tasks.', 'Create a task management system that:\n\n1. Lists all assigned tasks\n2. Filters by status/priority\n3. Shows due dates\n4. Includes progress tracking\n5. Supports task delegation\n6. Provides completion reporting\n7. Integrates with calendar\n8. Offers reminder options\n\nThe system should provide a comprehensive view of all tasks with sorting options. Include tools for updating task status and adding comments. Support task templates for recurring activities.')" class="text-sm font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">View All</a>
593
  </div>
594
  </div>
595
  <div class="divide-y divide-gray-200">
596
  <div class="p-5 hover:bg-gray-50 smooth-transition">
597
  <div class="flex items-start">
598
  <div class="flex-shrink-0 pt-0.5">
599
+ <input type="checkbox" onclick="showFunctionModal('Complete Task', 'Mark task as completed.', 'Create a task completion feature that:\n\n1. Marks tasks as complete\n2. Records completion time\n3. Captures completion notes\n4. Requires approval when needed\n5. Updates related workflows\n6. Triggers notifications\n7. Updates reporting metrics\n8. Integrates with time tracking\n\nThe feature should handle both simple and complex task completion workflows. Include options for partial completion when applicable. Support attachments for completion evidence.')" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
600
  </div>
601
  <div class="ml-3 flex-1">
602
  <div class="flex items-center justify-between">
 
613
  <div class="p-5 hover:bg-gray-50 smooth-transition">
614
  <div class="flex items-start">
615
  <div class="flex-shrink-0 pt-0.5">
616
+ <input type="checkbox" onclick="showFunctionModal('Complete Task', 'Mark task as completed.', 'Create a task completion feature that:\n\n1. Marks tasks as complete\n2. Records completion time\n3. Captures completion notes\n4. Requires approval when needed\n5. Updates related workflows\n6. Triggers notifications\n7. Updates reporting metrics\n8. Integrates with time tracking\n\nThe feature should handle both simple and complex task completion workflows. Include options for partial completion when applicable. Support attachments for completion evidence.')" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
617
  </div>
618
  <div class="ml-3 flex-1">
619
  <div class="flex items-center justify-between">
 
630
  <div class="p-5 hover:bg-gray-50 smooth-transition">
631
  <div class="flex items-start">
632
  <div class="flex-shrink-0 pt-0.5">
633
+ <input type="checkbox" onclick="showFunctionModal('Complete Task', 'Mark task as completed.', 'Create a task completion feature that:\n\n1. Marks tasks as complete\n2. Records completion time\n3. Captures completion notes\n4. Requires approval when needed\n5. Updates related workflows\n6. Triggers notifications\n7. Updates reporting metrics\n8. Integrates with time tracking\n\nThe feature should handle both simple and complex task completion workflows. Include options for partial completion when applicable. Support attachments for completion evidence.')" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
634
  </div>
635
  <div class="ml-3 flex-1">
636
  <div class="flex items-center justify-between">
 
639
  </div>
640
  <p class="text-sm text-gray-500 mt-1">Unusual trading pattern detected for client #45892</p>
641
  <div class="mt-3 flex items-center space-x-2">
642
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg yellow-100 text-yellow-800">Surveillance</span>
643
  </div>
644
  </div>
645
  </div>
 
652
  <div class="px-5 py-4 border-b border-gray-200 bg-white">
653
  <div class="flex items-center justify-between">
654
  <h3 class="text-lg font-semibold text-gray-900">Compliance Calendar</h3>
655
+ <a href="javascript:void(0)" onclick="showFunctionModal('Full Calendar', 'View complete compliance calendar.', 'Create a comprehensive compliance calendar that:\n\n1. Displays all compliance deadlines\n2. Color-codes by regulation type\n3. Shows recurring events\n4. Includes reminder options\n5. Supports filtering\n6. Allows event creation\n7. Integrates with task management\n8. Supports exporting/printing\n\nThe calendar should provide multiple views (day, week, month, agenda). Include tools for setting up recurring deadlines and delegation. Support integration with external calendars.')" class="text-sm font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">View All</a>
656
  </div>
657
  </div>
658
  <div class="p-5">
 
706
  <div class="flex items-center justify-between mb-5">
707
  <h3 class="text-lg font-semibold text-gray-900">Case Status</h3>
708
  <div class="flex space-x-2">
709
+ <button onclick="showFunctionModal('Chart Options', 'Configure chart display options.', 'Create chart configuration options that:\n\n1. Allow changing chart types\n2. Support date range selection\n3. Enable data filtering\n4. Include export options\n5. Support annotation\n6. Allow comparison periods\n7. Include accessibility options\n8. Support custom metrics\n\nThe options should be intuitive and preserve user preferences. Include tooltips explaining each option. Support resetting to default settings.')" class="text-gray-400 hover:text-gray-500 smooth-transition">
710
  <i class="fas fa-ellipsis-v"></i>
711
  </button>
712
  </div>
 
721
  <div class="flex items-center justify-between mb-5">
722
  <h3 class="text-lg font-semibold text-gray-900">SLA Compliance</h3>
723
  <div class="flex space-x-2">
724
+ <button onclick="showFunctionModal('Chart Options', 'Configure chart display options.', 'Create chart configuration options that:\n\n1. Allow changing chart types\n2. Support date range selection\n3. Enable data filtering\n4. Include export options\n5. Support annotation\n6. Allow comparison periods\n7. Include accessibility options\n8. Support custom metrics\n\nThe options should be intuitive and preserve user preferences. Include tooltips explaining each option. Support resetting to default settings.')" class="text-gray-400 hover:text-gray-500 smooth-transition">
725
  <i class="fas fa-ellipsis-v"></i>
726
  </button>
727
  </div>
 
737
 
738
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
739
  <script>
740
+ // Modal functions
741
+ function showFunctionModal(title, description, prompt) {
742
+ document.getElementById('modalTitle').textContent = title;
743
+ document.getElementById('modalDescription').textContent = description;
744
+ document.getElementById('promptText').textContent = prompt;
745
+ document.getElementById('functionModal').style.display = 'flex';
746
+ return false; // Prevent default behavior
747
+ }
748
+
749
+ function closeModal() {
750
+ document.getElementById('functionModal').style.display = 'none';
751
+ }
752
+
753
+ function copyPromptToClipboard() {
754
+ const promptText = document.getElementById('promptText').textContent;
755
+ navigator.clipboard.writeText(promptText).then(() => {
756
+ // Show copied feedback
757
+ const copyBtn = document.querySelector('.copy-btn');
758
+ const originalHtml = copyBtn.innerHTML;
759
+ copyBtn.innerHTML = '<i class="fas fa-check mr-1"></i> Copied!';
760
+ setTimeout(() => {
761
+ copyBtn.innerHTML = originalHtml;
762
+ }, 2000);
763
+ });
764
+ }
765
+
766
+ // Close modal when clicking outside
767
+ window.onclick = function(event) {
768
+ const modal = document.getElementById('functionModal');
769
+ if (event.target == modal) {
770
+ closeModal();
771
+ }
772
+ }
773
+
774
  // Sidebar active state
775
  document.querySelectorAll('.sidebar-item').forEach(item => {
776
+ item.addEventListener('click', function(e) {
777
+ if (!e.target.classList.contains('notification-badge')) {
778
+ document.querySelectorAll('.sidebar-item').forEach(i => i.classList.remove('active'));
779
+ this.classList.add('active');
780
+ }
781
+ });
782
+ });
783
+
784
+ // Prevent default behavior for all links that show modals
785
+ document.querySelectorAll('a[onclick^="showFunctionModal"]').forEach(link => {
786
+ link.addEventListener('click', function(e) {
787
+ e.preventDefault();
788
  });
789
  });
790
 
prompts.txt CHANGED
@@ -1,2 +1,4 @@
1
  Epic 1: Legislativní monitoring & alerting Popis: Automatizovaný sběr, zpracování a notifikace nových regulatorních změn. US-1.1 Jako MiFID compliance specialista chci automaticky ingestovat nové právní dokumenty (ESMA, EU, ČNB) z RSS/API abych měl vždy aktuální přehled bez manuálního hledání US-1.2 Jako compliance tým chceme definovat klíčová slova (např. “suitability”, “best execution”) abychom dostávali upozornění jen na relevantní změny US-1.3 Jako vedoucí compliance chci dostávat denní/týdenní e-mailové nebo Teams notifikace s přehledem novinek abych mohl rychle eskalovat urgentní změny Epic 2: Policy & dokument management Popis: Plně verziovaný repository interních směrnic s workflow schválení. US-2.1 Jako compliance specialist chci vytvářet a nahrávat nové verze politik přímo v systému abych měl vždy jedno centrální místo pro všechny směrnice US-2.2 Jako reviewer chci dostávat notifikaci, když je dokument připraven k posouzení abych mohl včas schválit nebo vrátit k úpravám US-2.3 Jako auditor chci vidět kompletní audit log každé změny dokumentu abych mohl doložit, kdo kdy co upravil Epic 3: Suitability & appropriateness engine Popis: Interaktivní otázkovník a scoringové pravidlo pro hodnocení klientovy vhodnosti investic. US-3.1 Jako privátní bankéř chci spustit dotazník s klientem přímo v aplikaci abych mohl okamžitě vyhodnotit jeho investiční profil US-3.2 Jako compliance specialist chci snadno upravovat scoring rules (váhy, thresholdy) abych reflektoval nové regulatorní guideline US-3.3 Jako klient chci obdržet PDF s výsledkem suitability testu abych měl jasný doklad o doporučení Epic 4: Transaction & MiFIR reporting Popis: Generování, validace a odeslání reportů dle šablon ČNB/ESMA. US-4.1 Jako compliance specialist chci spouštět ETL proces, který vytáhne veškeré transakce z core-bankingu abych mohl bez manuálního zásahu připravit data US-4.2 Jako compliance specialist chci zobrazit validační chyby (chybějící povinná pole, špatné formáty) abych opravil data před odesláním US-4.3 Jako Head of Compliance chci mít v aplikaci historii všech odeslaných reportů s potvrzením ČNB/ESMA abych mohl doložit včasné odeslání Epic 5: Trade Surveillance & Alerting Popis: Definice pravidel a realtime alerty na podezřelé transakce. US-5.1 Jako compliance specialist chci vytvořit nové pravidlo (např. objem X v čase Y) bez podpory IT abych mohl rychle reagovat na nové typy rizik US-5.2 Jako compliance specialist chci dostávat okamžité upozornění do dashboardu či e-mailu abych mohl ihned zahájit interní šetření US-5.3 Jako auditor chci zobrazit historii všech alertů včetně kroků jejich uzavření abych dokázal auditní trail vyšetřování Epic 6: Case & Incident Management Popis: Kompletní workflow pro vyřizování compliance eventů a interních hlášení. US-6.1 Jako compliance specialist chci založit nový incident z alertu stiskem tlačítka abych začal proces šetření okamžitě US-6.2 Jako compliance manager chci přiřazovat úkoly jednotlivým členům týmu a sledovat SLA abych nezmeškal žádný termín US-6.3 Jako člen týmu chci dostávat připomínky, když se blíží deadline mého úkolu abych stihl včas uzavřít case Epic 7: Reporting & Dashboarding Popis: Vizualizace klíčových KPI a stavů procesů pro vedení compliance. US-7.1 Jako Head of Compliance chci vidět metriky best execution, počet otevřených případů a průměrnou dobu řešení abych sledoval výkon týmu US-7.2 Jako compliance analyst chci mít možnost ad-hoc filtrovat data podle business unit, timeframe či typu incidentu abych mohl připravit detailní report na míru US-7.3 Jako auditor chci exportovat dashboard do PDF či XLSX abych mohl přímo dodat materiály externím auditorům Epic 8: Integrace & API layer Popis: Jednotný konektor k interním systémům (core banking, CRM, DMS). US-8.1 Jako developer low-code aplikace chci využít konfigurovatelné REST/OData konektory abych snadno napojil core banking bez vlastní vrstvy kódu US-8.2 Jako compliance specialist chci vidět v jednom okně profil klienta i poslední transakce z CRM abych nemusel přesouvat data mezi více aplikacemi Epic 9: Notifikace & Eskalace Popis: Pravidla pro připomínky a automatické eskalace zpožděných úkolů. US-9.1 Jako compliance specialist chci definovat prahové časy pro jednotlivé kroky workflow abych měl jistotu, že nikde nedojde k prodlení US-9.2 Jako vedoucí compliance chci dostávat eskalační notifikace, když se blíží nebo překročí SLA abych mohl okamžitě zasáhnout Epic 10: Security & Audit Trail Popis: Role-based access, detailní logy změn a přístupů pro plnou trasovatelnost. US-10.1 Jako systémový administrátor chci spravovat přístupy podle rolí (Advisor, Reviewer, Auditor, Admin) abych zajistil minimální oprávnění uživatelů US-10.2 Jako auditor chci získat auditní report, kdo kdy co vytvořil, upravil či schválil abych mohl doložit kompletní historií změn
2
- Act as silicon valley top UI/UX designer and polisht the look and feel to top standards of global unicorns.
 
 
 
1
  Epic 1: Legislativní monitoring & alerting Popis: Automatizovaný sběr, zpracování a notifikace nových regulatorních změn. US-1.1 Jako MiFID compliance specialista chci automaticky ingestovat nové právní dokumenty (ESMA, EU, ČNB) z RSS/API abych měl vždy aktuální přehled bez manuálního hledání US-1.2 Jako compliance tým chceme definovat klíčová slova (např. “suitability”, “best execution”) abychom dostávali upozornění jen na relevantní změny US-1.3 Jako vedoucí compliance chci dostávat denní/týdenní e-mailové nebo Teams notifikace s přehledem novinek abych mohl rychle eskalovat urgentní změny Epic 2: Policy & dokument management Popis: Plně verziovaný repository interních směrnic s workflow schválení. US-2.1 Jako compliance specialist chci vytvářet a nahrávat nové verze politik přímo v systému abych měl vždy jedno centrální místo pro všechny směrnice US-2.2 Jako reviewer chci dostávat notifikaci, když je dokument připraven k posouzení abych mohl včas schválit nebo vrátit k úpravám US-2.3 Jako auditor chci vidět kompletní audit log každé změny dokumentu abych mohl doložit, kdo kdy co upravil Epic 3: Suitability & appropriateness engine Popis: Interaktivní otázkovník a scoringové pravidlo pro hodnocení klientovy vhodnosti investic. US-3.1 Jako privátní bankéř chci spustit dotazník s klientem přímo v aplikaci abych mohl okamžitě vyhodnotit jeho investiční profil US-3.2 Jako compliance specialist chci snadno upravovat scoring rules (váhy, thresholdy) abych reflektoval nové regulatorní guideline US-3.3 Jako klient chci obdržet PDF s výsledkem suitability testu abych měl jasný doklad o doporučení Epic 4: Transaction & MiFIR reporting Popis: Generování, validace a odeslání reportů dle šablon ČNB/ESMA. US-4.1 Jako compliance specialist chci spouštět ETL proces, který vytáhne veškeré transakce z core-bankingu abych mohl bez manuálního zásahu připravit data US-4.2 Jako compliance specialist chci zobrazit validační chyby (chybějící povinná pole, špatné formáty) abych opravil data před odesláním US-4.3 Jako Head of Compliance chci mít v aplikaci historii všech odeslaných reportů s potvrzením ČNB/ESMA abych mohl doložit včasné odeslání Epic 5: Trade Surveillance & Alerting Popis: Definice pravidel a realtime alerty na podezřelé transakce. US-5.1 Jako compliance specialist chci vytvořit nové pravidlo (např. objem X v čase Y) bez podpory IT abych mohl rychle reagovat na nové typy rizik US-5.2 Jako compliance specialist chci dostávat okamžité upozornění do dashboardu či e-mailu abych mohl ihned zahájit interní šetření US-5.3 Jako auditor chci zobrazit historii všech alertů včetně kroků jejich uzavření abych dokázal auditní trail vyšetřování Epic 6: Case & Incident Management Popis: Kompletní workflow pro vyřizování compliance eventů a interních hlášení. US-6.1 Jako compliance specialist chci založit nový incident z alertu stiskem tlačítka abych začal proces šetření okamžitě US-6.2 Jako compliance manager chci přiřazovat úkoly jednotlivým členům týmu a sledovat SLA abych nezmeškal žádný termín US-6.3 Jako člen týmu chci dostávat připomínky, když se blíží deadline mého úkolu abych stihl včas uzavřít case Epic 7: Reporting & Dashboarding Popis: Vizualizace klíčových KPI a stavů procesů pro vedení compliance. US-7.1 Jako Head of Compliance chci vidět metriky best execution, počet otevřených případů a průměrnou dobu řešení abych sledoval výkon týmu US-7.2 Jako compliance analyst chci mít možnost ad-hoc filtrovat data podle business unit, timeframe či typu incidentu abych mohl připravit detailní report na míru US-7.3 Jako auditor chci exportovat dashboard do PDF či XLSX abych mohl přímo dodat materiály externím auditorům Epic 8: Integrace & API layer Popis: Jednotný konektor k interním systémům (core banking, CRM, DMS). US-8.1 Jako developer low-code aplikace chci využít konfigurovatelné REST/OData konektory abych snadno napojil core banking bez vlastní vrstvy kódu US-8.2 Jako compliance specialist chci vidět v jednom okně profil klienta i poslední transakce z CRM abych nemusel přesouvat data mezi více aplikacemi Epic 9: Notifikace & Eskalace Popis: Pravidla pro připomínky a automatické eskalace zpožděných úkolů. US-9.1 Jako compliance specialist chci definovat prahové časy pro jednotlivé kroky workflow abych měl jistotu, že nikde nedojde k prodlení US-9.2 Jako vedoucí compliance chci dostávat eskalační notifikace, když se blíží nebo překročí SLA abych mohl okamžitě zasáhnout Epic 10: Security & Audit Trail Popis: Role-based access, detailní logy změn a přístupů pro plnou trasovatelnost. US-10.1 Jako systémový administrátor chci spravovat přístupy podle rolí (Advisor, Reviewer, Auditor, Admin) abych zajistil minimální oprávnění uživatelů US-10.2 Jako auditor chci získat auditní report, kdo kdy co vytvořil, upravil či schválil abych mohl doložit kompletní historií změn
2
+ Act as silicon valley top UI/UX designer and polisht the look and feel to top standards of global unicorns.
3
+ Make each user function (button or link etc.) clickable showing a modal with a ChatGPT prompt text that is fully self contained (includes full information about the project and also specifically about the user function that has been clicked for a GPT based code to be able to code it) ... also add a copy to clipboard function to the modal so the prompt can be copies ...
4
+ Make the modal once clicked stay visible, now all modals get invisible in a secend because the former link target # gets loaded.