Spaces:
Running
Running
File size: 73,692 Bytes
660596b c21e997 bf92bc7 c21e997 bf92bc7 c21e997 bf92bc7 c21e997 bf92bc7 c21e997 660596b c21e997 bf92bc7 c21e997 bf92bc7 c21e997 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b c21e997 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b c21e997 660596b bf92bc7 660596b bf92bc7 660596b bf92bc7 660596b c21e997 bf92bc7 c21e997 bf92bc7 c21e997 bf92bc7 c21e997 660596b c21e997 bf92bc7 c21e997 660596b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ComplyVision | Compliance Intelligence Platform</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary: #4f46e5;
--primary-light: #6366f1;
--primary-dark: #4338ca;
--secondary: #10b981;
--danger: #ef4444;
--warning: #f59e0b;
--info: #3b82f6;
}
@font-face {
font-family: 'Inter';
src: url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background-color: #f9fafb;
color: #111827;
}
.sidebar-item.active {
background-color: rgba(79, 70, 229, 0.1);
color: var(--primary);
font-weight: 500;
}
.sidebar-item.active:hover {
background-color: rgba(79, 70, 229, 0.15);
}
.sidebar-item:hover:not(.active) {
background-color: rgba(0, 0, 0, 0.03);
}
.dashboard-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.dashboard-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.progress-bar {
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.notification-badge {
position: absolute;
top: -6px;
right: -6px;
font-size: 0.65rem;
min-width: 1.25rem;
height: 1.25rem;
}
.chart-container {
height: 280px;
}
.glow-shadow {
box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.1), 0 4px 20px rgba(79, 70, 229, 0.15);
}
.nav-search {
background-color: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(8px);
}
.nav-search:focus {
background-color: white;
}
.smooth-transition {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.gradient-text {
background: linear-gradient(90deg, #4f46e5 0%, #8b5cf6 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.border-gradient {
position: relative;
}
.border-gradient::before {
content: "";
position: absolute;
inset: 0;
border-radius: 0.5rem;
padding: 1px;
background: linear-gradient(135deg, rgba(79, 70, 229, 0.4), rgba(139, 92, 246, 0.4));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* Modal styles */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: white;
width: 90%;
max-width: 800px;
max-height: 90vh;
border-radius: 0.5rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex;
flex-direction: column;
}
.modal-header {
padding: 1rem 1.5rem;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-body {
padding: 1.5rem;
overflow-y: auto;
flex-grow: 1;
}
.modal-footer {
padding: 1rem 1.5rem;
border-top: 1px solid #e5e7eb;
display: flex;
justify-content: flex-end;
}
.user-story {
background-color: #f3f4f6;
border-radius: 0.375rem;
padding: 1rem;
margin-bottom: 1rem;
position: relative;
}
.user-story-title {
font-weight: 600;
color: #1f2937;
margin-bottom: 0.5rem;
}
.user-story-content {
font-family: 'Inter', sans-serif;
white-space: pre-wrap;
}
.acceptance-criteria {
margin-top: 1rem;
padding-left: 1rem;
border-left: 2px solid #d1d5db;
}
.acceptance-title {
font-weight: 500;
color: #374151;
margin-bottom: 0.5rem;
}
.copy-btn {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background-color: #e5e7eb;
border: none;
border-radius: 0.25rem;
padding: 0.25rem 0.5rem;
cursor: pointer;
font-size: 0.75rem;
}
.copy-btn:hover {
background-color: #d1d5db;
}
</style>
</head>
<body class="antialiased">
<!-- Modal Structure -->
<div id="functionModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3 class="text-lg font-semibold text-gray-900" id="modalTitle">User Story Details</h3>
<button onclick="closeModal()" class="text-gray-400 hover:text-gray-500">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-body">
<div id="modalDescription" class="text-gray-700 mb-4"></div>
<div id="userStoryContainer" class="user-story">
<button onclick="copyStoryToClipboard()" class="copy-btn">
<i class="fas fa-copy mr-1"></i> Copy
</button>
<div id="userStoryContent"></div>
</div>
</div>
<div class="modal-footer">
<button onclick="closeModal()" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200">
Close
</button>
</div>
</div>
</div>
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="hidden md:flex md:flex-shrink-0">
<div class="flex flex-col w-64 border-r border-gray-200 bg-white">
<div class="flex items-center justify-center h-20 px-6">
<div class="flex items-center">
<div class="w-8 h-8 rounded-md bg-gradient-to-br from-indigo-600 to-purple-600 flex items-center justify-center">
<i class="fas fa-shield-alt text-white text-sm"></i>
</div>
<span class="text-xl font-bold ml-3 gradient-text">ComplyVision</span>
</div>
</div>
<div class="px-4 pt-2 pb-4">
<div class="relative nav-search">
<input type="text" placeholder="Search..." class="w-full pl-9 pr-4 py-2.5 rounded-lg border border-gray-200 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-sm">
<i class="fas fa-search absolute left-3 top-3 text-gray-400 text-sm"></i>
</div>
</div>
<div class="flex flex-col flex-grow px-3 overflow-y-auto">
<nav class="space-y-1">
<a href="javascript:void(0)" onclick="showUserStoryModal('Dashboard', 'Main dashboard view showing compliance overview and key metrics.', 'As a Compliance Officer, I want to view a comprehensive dashboard that displays key compliance metrics, regulatory alerts, recent documents, task management, compliance calendar, and visual charts, so that I can quickly assess our compliance status and take appropriate actions.', '1. Dashboard must display pending documents count with overdue indicators\n2. Show completed tasks count for current week\n3. Display active alerts with priority indicators\n4. Show SLA compliance percentage with trend analysis\n5. Include regulatory alerts section with filtering\n6. Provide recent documents with quick actions\n7. Display task management with due dates\n8. Show compliance calendar with upcoming deadlines\n9. Include visual charts for case status and SLA trends\n10. Must be responsive and accessible')" class="sidebar-item active flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
<i class="fas fa-chart-pie text-lg w-6 text-center mr-3 text-indigo-600"></i>
Dashboard
</a>
<a href="javascript:void(0)" onclick="showUserStoryModal('Document Hub', 'Central repository for all compliance documents with version control.', 'As a Compliance Manager, I want a centralized document management system that stores all compliance documents with version control and metadata, so that I can easily access, track changes, and manage our compliance documentation efficiently.', '1. System must support multiple document types (PDF, Word, Excel)\n2. Provide version control and history tracking\n3. Display document metadata (last updated, author)\n4. Include quick actions (view, download, more options)\n5. Support search and filtering capabilities\n6. Show status indicators (pending review, approved)\n7. Allow bulk actions for multiple documents\n8. Support drag-and-drop upload\n9. Provide document preview functionality\n10. Implement permission-based access controls')" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
<i class="fas fa-file-contract text-lg w-6 text-center mr-3 text-gray-500"></i>
Document Hub
<span class="notification-badge bg-red-500 text-white font-semibold rounded-full flex items-center justify-center ml-auto">3</span>
</a>
<a href="javascript:void(0)" onclick="showUserStoryModal('Regulatory Alerts', 'Real-time notifications about regulatory changes and updates.', 'As a Regulatory Analyst, I want to receive and manage real-time regulatory alerts with priority classification, so that I can promptly address critical regulatory changes and ensure our compliance.', '1. System must provide real-time alert notifications\n2. Classify alerts by priority (critical, high, medium, low)\n3. Allow filtering by regulatory body (ESMA, ČNB, EU)\n4. Show detailed alert view with impact analysis\n5. Track action status (acknowledged, in progress, resolved)\n6. Support email/SMS notification options\n7. Maintain historical alert archive\n8. Track regulatory changes over time\n9. Provide clear visual indicators for priority\n10. Allow adding comments and marking as resolved')" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
<i class="fas fa-bell text-lg w-6 text-center mr-3 text-gray-500"></i>
Regulatory Alerts
<span class="notification-badge bg-indigo-500 text-white font-semibold rounded-full flex items-center justify-center ml-auto">5</span>
</a>
<a href="javascript:void(0)" onclick="showUserStoryModal('Suitability Engine', 'Tool for assessing investment suitability based on client profiles.', 'As an Investment Advisor, I want a suitability assessment tool that analyzes client profiles against products based on MiFID II requirements, so that I can ensure appropriate investment recommendations and maintain compliance.', '1. Must collect client investment profile data\n2. Analyze product suitability against MiFID II requirements\n3. Generate suitability reports\n4. Flag potential mismatches\n5. Store assessment history\n6. Provide audit trail\n7. Integrate with client database\n8. Support bulk assessments\n9. Guide users through assessment process\n10. 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">
<i class="fas fa-user-check text-lg w-6 text-center mr-3 text-gray-500"></i>
Suitability Engine
</a>
<a href="javascript:void(0)" onclick="showUserStoryModal('Transaction Reporting', 'System for preparing and submitting regulatory transaction reports.', 'As a Reporting Specialist, I want a transaction reporting system that validates and formats trade data for different regulators, so that we can submit accurate reports and meet our regulatory obligations.', '1. Must collect trade data from multiple sources\n2. Validate data against regulatory requirements\n3. Format reports for different regulators (ESMA, ČNB)\n4. Track submission status\n5. Store submission history\n6. Flag reporting errors\n7. Generate audit trails\n8. Support bulk corrections\n9. Support multiple reporting regimes (MiFIR, EMIR)\n10. Include validation checks before submission')" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
<i class="fas fa-exchange-alt text-lg w-6 text-center mr-3 text-gray-500"></i>
Transaction Reporting
</a>
<a href="javascript:void(0)" onclick="showUserStoryModal('Trade Surveillance', 'Monitoring system for detecting suspicious trading patterns.', 'As a Surveillance Analyst, I want a trade monitoring system that detects suspicious patterns and generates alerts, so that we can investigate potential market abuse and maintain market integrity.', '1. Must provide real-time trade monitoring\n2. Detect suspicious trading patterns\n3. Generate alerts for investigation\n4. Support case management workflow\n5. Include investigation tools\n6. Integrate with regulatory reporting\n7. Maintain historical analysis\n8. Allow custom rule configuration\n9. Visualize trading patterns\n10. Support exporting data for reporting')" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
<i class="fas fa-search-dollar text-lg w-6 text-center mr-3 text-gray-500"></i>
Trade Surveillance
</a>
<a href="javascript:void(0)" onclick="showUserStoryModal('Case Management', 'Workflow system for tracking compliance cases and investigations.', 'As a Compliance Investigator, I want a case management system to track compliance cases through their lifecycle, so that we can efficiently manage investigations and maintain proper documentation.', '1. Must allow case creation and assignment\n2. Track case status (open, in progress, resolved)\n3. Support document attachment\n4. Enable team collaboration\n5. Manage deadlines\n6. Provide reporting dashboards\n7. Maintain audit logging\n8. Allow custom workflow configuration\n9. Support filtering and search\n10. Include timeline views of case activity')" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
<i class="fas fa-tasks text-lg w-6 text-center mr-3 text-gray-500"></i>
Case Management
</a>
<a href="javascript:void(0)" onclick="showUserStoryModal('Analytics', 'Reporting and visualization tools for compliance metrics.', 'As a Compliance Director, I want analytics tools to track key compliance metrics and trends, so that I can make data-driven decisions and demonstrate our compliance effectiveness.', '1. Must track key compliance metrics\n2. Provide visual dashboards\n3. Support custom reporting\n4. Offer data export options\n5. Include regulatory benchmarking\n6. Track trends over time\n7. Alert on metric thresholds\n8. Integrate with other modules\n9. Include interactive charts and tables\n10. Support scheduled report generation')" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
<i class="fas fa-chart-bar text-lg w-6 text-center mr-3 text-gray-500"></i>
Analytics
</a>
</nav>
<div class="mt-auto mb-6 px-3">
<div class="bg-indigo-50 rounded-xl p-4 border-gradient">
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-question-circle text-indigo-600"></i>
</div>
<div class="ml-3">
<p class="text-sm font-semibold text-indigo-900">Need assistance?</p>
<p class="text-xs text-indigo-700 mt-1">Our support team is available 24/7</p>
<button onclick="showUserStoryModal('Support', 'Contact support team for technical assistance.', 'As a System User, I want multiple ways to contact support when I need help, so that I can quickly resolve issues and continue my compliance work efficiently.', '1. Must provide multiple contact channels (email, chat, phone)\n2. Track support ticket status\n3. Offer knowledge base access\n4. Include live chat functionality\n5. Provide estimated response times\n6. Support file attachments\n7. Include satisfaction surveys\n8. Integrate with user authentication\n9. Make submission easy with clear categories\n10. Include status tracking for open tickets')" class="mt-2 text-xs font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">
Contact Support <i class="fas fa-arrow-right ml-1 text-xs"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Main content -->
<div class="flex flex-col flex-1 overflow-hidden">
<!-- Top navigation -->
<div class="flex items-center justify-between h-16 px-6 border-b border-gray-200 bg-white">
<div class="flex items-center">
<button onclick="showUserStoryModal('Mobile Menu', 'Toggle button for mobile navigation menu.', 'As a Mobile User, I want a responsive menu toggle that works on all device sizes, so that I can easily navigate the compliance platform on my mobile device.', '1. Must work on all device sizes\n2. Include accessible aria-labels\n3. Have smooth animations\n4. Support keyboard navigation\n5. Maintain state between views\n6. Integrate with existing navigation\n7. Have proper focus management\n8. Follow mobile UX best practices\n9. Clearly indicate menu state (open/closed)\n10. Include proper touch targets')" class="md:hidden text-gray-500 hover:text-gray-600 focus:outline-none smooth-transition">
<i class="fas fa-bars text-lg"></i>
</button>
<h1 class="ml-4 text-lg font-semibold text-gray-900">Compliance Dashboard</h1>
</div>
<div class="flex items-center space-x-4">
<button onclick="showUserStoryModal('Notifications', 'System notifications and alerts center.', 'As a System User, I want a centralized notifications center to view and manage all system alerts, so that I can stay informed about important compliance events.', '1. Must aggregate system notifications\n2. Support different notification types\n3. Include unread indicators\n4. Allow marking as read\n5. Provide filtering options\n6. Store notification history\n7. Support actionable notifications\n8. Integrate with other modules\n9. Display in dropdown or dedicated view\n10. Include visual indicators for priority')" class="text-gray-500 hover:text-gray-600 relative focus:outline-none smooth-transition">
<i class="fas fa-bell text-lg"></i>
<span class="notification-badge bg-red-500 text-white font-semibold rounded-full flex items-center justify-center">5</span>
</button>
<button onclick="showUserStoryModal('Messages', 'Internal messaging system for team communication.', 'As a Team Member, I want an internal messaging system to communicate with colleagues, so that we can collaborate effectively on compliance matters.', '1. Must support direct and group messages\n2. Include read receipts\n3. Allow file attachments\n4. Provide search functionality\n5. Integrate with user directory\n6. Support message threading\n7. Offer notification preferences\n8. Maintain message history\n9. Provide clean conversation lists\n10. Show typing indicators and online status')" class="text-gray-500 hover:text-gray-600 relative focus:outline-none smooth-transition">
<i class="fas fa-envelope text-lg"></i>
<span class="notification-badge bg-indigo-500 text-white font-semibold rounded-full flex items-center justify-center">2</span>
</button>
<div class="relative">
<button onclick="showUserStoryModal('User Profile', 'User account settings and profile management.', 'As a System User, I want to manage my profile and account settings, so that I can keep my information up-to-date and control my preferences.', '1. Must display user information\n2. Allow profile editing\n3. Manage account settings\n4. Control notification preferences\n5. Show activity history\n6. Include security settings\n7. Support profile picture upload\n8. Integrate with authentication\n9. Provide comprehensive account view\n10. Include form validation for editing')" class="flex items-center focus:outline-none group">
<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="">
<span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-900 smooth-transition">John Doe</span>
<i class="fas fa-chevron-down ml-1 text-gray-500 text-xs group-hover:text-gray-700 smooth-transition"></i>
</button>
</div>
</div>
</div>
<!-- Main content area -->
<div class="flex-1 overflow-auto p-6 bg-gray-50">
<!-- Dashboard header -->
<div class="mb-8">
<div class="flex flex-col md:flex-row md:items-center md:justify-between">
<div>
<h2 class="text-2xl font-bold text-gray-900">Compliance Overview</h2>
<p class="text-gray-600 mt-1">Welcome back, John. Here's your compliance status at a glance.</p>
</div>
<div class="mt-4 md:mt-0">
<button onclick="showUserStoryModal('New Task', 'Create a new compliance task or action item.', 'As a Compliance Officer, I want to create new compliance tasks with all necessary details, so that I can assign and track compliance activities effectively.', '1. Must capture task details (title, description)\n2. Allow assignment to team members\n3. Set priority levels\n4. Add due dates\n5. Attach relevant documents\n6. Link to compliance requirements\n7. Set reminders\n8. Integrate with calendar\n9. Include validation and auto-suggestions\n10. Support task templates for common activities')" 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">
<i class="fas fa-plus mr-2"></i>
New Task
</button>
</div>
</div>
</div>
<!-- Stats cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mb-8">
<div class="dashboard-card bg-white p-5 rounded-xl border border-gray-200 hover:border-gray-300 smooth-transition">
<div class="flex items-center">
<div class="p-3 rounded-xl bg-indigo-50 text-indigo-600">
<i class="fas fa-file-alt text-xl"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-500">Pending Documents</p>
<p class="text-2xl font-semibold text-gray-900 mt-1">12</p>
</div>
</div>
<div class="mt-5">
<div class="flex items-center justify-between text-sm">
<span class="text-gray-500">3 overdue</span>
<a href="javascript:void(0)" onclick="showUserStoryModal('View Documents', 'View all pending compliance documents.', 'As a Compliance Officer, I want to view all pending compliance documents with filtering options, so that I can prioritize review and approval workflows.', '1. Must display all pending documents\n2. Allow filtering by type/status\n3. Show overdue indicators\n4. Provide quick actions\n5. Support bulk operations\n6. Include search functionality\n7. Show document metadata\n8. Integrate with approval workflow\n9. Be sortable and paginated\n10. Support exporting the document list')" class="font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">View all</a>
</div>
</div>
</div>
<div class="dashboard-card bg-white p-5 rounded-xl border border-gray-200 hover:border-gray-300 smooth-transition">
<div class="flex items-center">
<div class="p-3 rounded-xl bg-green-50 text-green-600">
<i class="fas fa-check-circle text-xl"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-500">Completed Tasks</p>
<p class="text-2xl font-semibold text-gray-900 mt-1">24</p>
</div>
</div>
<div class="mt-5">
<div class="flex items-center justify-between text-sm">
<span class="text-gray-500">This week</span>
<a href="javascript:void(0)" onclick="showUserStoryModal('View Tasks', 'View all completed compliance tasks.', 'As a Compliance Manager, I want to review completed compliance tasks with completion details, so that I can track team productivity and compliance progress.', '1. Must list completed tasks\n2. Filter by date range\n3. Show completion details\n4. Display assignee information\n5. Include approval records\n6. Support exporting data\n7. Link to related documents\n8. Integrate with reporting\n9. Provide completion pattern insights\n10. Support drill-down into details')" class="font-medium text-green-600 hover:text-green-700 smooth-transition">View all</a>
</div>
</div>
</div>
<div class="dashboard-card bg-white p-5 rounded-xl border border-gray-200 hover:border-gray-300 smooth-transition">
<div class="flex items-center">
<div class="p-3 rounded-xl bg-yellow-50 text-yellow-600">
<i class="fas fa-exclamation-triangle text-xl"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-500">Alerts</p>
<p class="text-2xl font-semibold text-gray-900 mt-1">5</p>
</div>
</div>
<div class="mt-5">
<div class="flex items-center justify-between text-sm">
<span class="text-gray-500">2 critical</span>
<a href="javascript:void(0)" onclick="showUserStoryModal('View Alerts', 'View all active compliance alerts.', 'As a Compliance Analyst, I want to view and manage all active compliance alerts, so that I can prioritize and address the most critical issues first.', '1. Must list all active alerts\n2. Highlight critical alerts\n3. Show alert details\n4. Track investigation status\n5. Allow alert resolution\n6. Support filtering/sorting\n7. Include audit trail\n8. Integrate with case management\n9. Prioritize critical alerts\n10. Support exporting alert data')" class="font-medium text-yellow-600 hover:text-yellow-700 smooth-transition">View all</a>
</div>
</div>
</div>
<div class="dashboard-card bg-white p-5 rounded-xl border border-gray-200 hover:border-gray-300 smooth-transition">
<div class="flex items-center">
<div class="p-3 rounded-xl bg-purple-50 text-purple-600">
<i class="fas fa-chart-line text-xl"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-500">SLA Compliance</p>
<p class="text-2xl font-semibold text-gray-900 mt-1">98%</p>
</div>
</div>
<div class="mt-5">
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="progress-bar bg-gradient-to-r from-purple-500 to-purple-400 h-2 rounded-full" style="width: 98%"></div>
</div>
<div class="flex items-center justify-between text-xs mt-2 text-gray-500">
<span>Last month: 96%</span>
<span>+2%</span>
</div>
</div>
</div>
</div>
<!-- Main content grid -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Left column -->
<div class="lg:col-span-2 space-y-6">
<!-- Regulatory Alerts -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div class="px-5 py-4 border-b border-gray-200 bg-white">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-gray-900">Regulatory Alerts</h3>
<a href="javascript:void(0)" onclick="showUserStoryModal('All Alerts', 'View all regulatory alerts and updates.', 'As a Regulatory Compliance Officer, I want to view all regulatory alerts from multiple sources with categorization and impact analysis, so that I can ensure our policies and procedures remain compliant.', '1. Must aggregate alerts from multiple sources\n2. Categorize by regulatory body\n3. Prioritize by impact\n4. Track acknowledgment\n5. Link to related documents\n6. Support comments\n7. Include historical archive\n8. Integrate with task management\n9. Provide centralized view with filtering\n10. Support assigning follow-up actions')" class="text-sm font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">View All</a>
</div>
</div>
<div class="divide-y divide-gray-200">
<div class="p-5 hover:bg-gray-50 smooth-transition">
<div class="flex items-start">
<div class="flex-shrink-0 pt-1">
<div class="h-10 w-10 rounded-full bg-red-100 flex items-center justify-center">
<i class="fas fa-exclamation text-red-600"></i>
</div>
</div>
<div class="ml-4 flex-1">
<div class="flex items-center justify-between">
<p class="text-sm font-semibold text-gray-900">ESMA Consultation Paper</p>
<span class="text-xs text-gray-500">2h ago</span>
</div>
<p class="text-sm text-gray-500 mt-1">New guidelines on product governance requirements under MiFID II</p>
<div class="mt-3 flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">MiFID II</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Priority</span>
</div>
</div>
</div>
</div>
<div class="p-5 hover:bg-gray-50 smooth-transition">
<div class="flex items-start">
<div class="flex-shrink-0 pt-1">
<div class="h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center">
<i class="fas fa-file-import text-yellow-600"></i>
</div>
</div>
<div class="ml-4 flex-1">
<div class="flex items-center justify-between">
<p class="text-sm font-semibold text-gray-900">ČNB Circular Update</p>
<span class="text-xs text-gray-500">5h ago</span>
</div>
<p class="text-sm text-gray-500 mt-1">Changes to reporting requirements for investment firms</p>
<div class="mt-3 flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">Reporting</span>
</div>
</div>
</div>
</div>
<div class="p-5 hover:bg-gray-50 smooth-transition">
<div class="flex items-start">
<div class="flex-shrink-0 pt-1">
<div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
<i class="fas fa-info-circle text-blue-600"></i>
</div>
</div>
<div class="ml-4 flex-1">
<div class="flex items-center justify-between">
<p class="text-sm font-semibold text-gray-900">EU Directive Update</p>
<span class="text-xs text-gray-500">1d ago</span>
</div>
<p class="text-sm text-gray-500 mt-1">New amendments to the Prospectus Regulation</p>
<div class="mt-3 flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Urgent</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Recent Documents -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div class="px-5 py-4 border-b border-gray-200 bg-white">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-gray-900">Recent Documents</h3>
<a href="javascript:void(0)" onclick="showUserStoryModal('All Documents', 'View all compliance documents in the system.', 'As a Document Controller, I want to access all compliance documents in the system with version history and access controls, so that I can manage our documentation effectively while maintaining security.', '1. Must store all compliance documents\n2. Track versions and changes\n3. Manage access controls\n4. Support document workflows\n5. Include approval processes\n6. Provide audit trails\n7. Offer bulk operations\n8. Integrate with other modules\n9. Handle various document types\n10. Support automated retention policies')" class="text-sm font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">View All</a>
</div>
</div>
<div class="divide-y divide-gray-200">
<div class="p-5 hover:bg-gray-50 smooth-transition">
<div class="flex items-center">
<div class="flex-shrink-0">
<div class="h-10 w-10 rounded-md bg-blue-100 flex items-center justify-center">
<i class="fas fa-file-pdf text-blue-600"></i>
</div>
</div>
<div class="ml-4 flex-1 min-w-0">
<p class="text-sm font-semibold text-gray-900 truncate">Investment Policy v3.2</p>
<p class="text-sm text-gray-500 truncate">Last updated by Sarah Johnson</p>
</div>
<div class="ml-4 flex-shrink-0">
<div class="flex space-x-3">
<button onclick="showUserStoryModal('View Document', 'Preview document content.', 'As a Compliance Officer, I want to preview document content without downloading, so that I can quickly review documents while maintaining version control.', '1. Must display document content\n2. Support multiple formats (PDF, Word, Excel)\n3. Include zoom controls\n4. Allow annotation\n5. Support fullscreen view\n6. Work on mobile devices\n7. Preserve formatting\n8. Integrate with permissions\n9. Handle large documents efficiently\n10. Support downloading the document')" class="text-gray-400 hover:text-gray-500 smooth-transition">
<i class="fas fa-eye"></i>
</button>
<button onclick="showUserStoryModal('Download Document', 'Download document to local device.', 'As a Compliance Officer, I want to download documents to my local device when needed, so that I can work offline or share with authorized parties.', '1. Must download the original file\n2. Track download history\n3. Support multiple formats\n4. Include virus scanning\n5. Work with large files\n6. Preserve metadata\n7. Integrate with permissions\n8. Provide download options\n9. Be reliable with progress indicator\n10. Support bulk downloads when permitted')" class="text-gray-400 hover:text-gray-500 smooth-transition">
<i class="fas fa-download"></i>
</button>
<button onclick="showUserStoryModal('Document Actions', 'Additional document management actions.', 'As a Document Controller, I want context-specific actions for each document, so that I can perform necessary document management tasks efficiently.', '1. Must provide context-specific actions\n2. Include version management\n3. Support sharing options\n4. Allow metadata editing\n5. Include workflow actions\n6. Offer export options\n7. Support bulk operations\n8. Integrate with other features\n9. Adapt based on document type\n10. Support custom actions through plugins')" class="text-gray-400 hover:text-gray-500 smooth-transition">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
</div>
</div>
<div class="p-5 hover:bg-gray-50 smooth-transition">
<div class="flex items-center">
<div class="flex-shrink-0">
<div class="h-10 w-10 rounded-md bg-green-100 flex items-center justify-center">
<i class="fas fa-file-word text-green-600"></i>
</div>
</div>
<div class="ml-4 flex-1 min-w-0">
<p class="text-sm font-semibold text-gray-900 truncate">Compliance Manual 2023</p>
<p class="text-sm text-gray-500 truncate">Pending review by Michael Brown</p>
</div>
<div class="ml-4 flex-shrink-0">
<div class="flex space-x-3">
<button onclick="showUserStoryModal('View Document', 'Preview document content.', 'As a Compliance Officer, I want to preview document content without downloading, so that I can quickly review documents while maintaining version control.', '1. Must display document content\n2. Support multiple formats (PDF, Word, Excel)\n3. Include zoom controls\n4. Allow annotation\n5. Support fullscreen view\n6. Work on mobile devices\n7. Preserve formatting\n8. Integrate with permissions\n9. Handle large documents efficiently\n10. Support downloading the document')" class="text-gray-400 hover:text-gray-500 smooth-transition">
<i class="fas fa-eye"></i>
</button>
<button onclick="showUserStoryModal('Download Document', 'Download document to local device.', 'As a Compliance Officer, I want to download documents to my local device when needed, so that I can work offline or share with authorized parties.', '1. Must download the original file\n2. Track download history\n3. Support multiple formats\n4. Include virus scanning\n5. Work with large files\n6. Preserve metadata\n7. Integrate with permissions\n8. Provide download options\n9. Be reliable with progress indicator\n10. Support bulk downloads when permitted')" class="text-gray-400 hover:text-gray-500 smooth-transition">
<i class="fas fa-download"></i>
</button>
<button onclick="showUserStoryModal('Document Actions', 'Additional document management actions.', 'As a Document Controller, I want context-specific actions for each document, so that I can perform necessary document management tasks efficiently.', '1. Must provide context-specific actions\n2. Include version management\n3. Support sharing options\n4. Allow metadata editing\n5. Include workflow actions\n6. Offer export options\n7. Support bulk operations\n8. Integrate with other features\n9. Adapt based on document type\n10. Support custom actions through plugins')" class="text-gray-400 hover:text-gray-500 smooth-transition">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
</div>
</div>
<div class="p-5 hover:bg-gray-50 smooth-transition">
<div class="flex items-center">
<div class="flex-shrink-0">
<div class="h-10 w-10 rounded-md bg-red-100 flex items-center justify-center">
<i class="fas fa-file-excel text-red-600"></i>
</div>
</div>
<div class="ml-4 flex-1 min-w-0">
<p class="text-sm font-semibold text-gray-900 truncate">Q3 Transaction Report</p>
<p class="text-sm text-gray-500 truncate">Submitted to ČNB on 15/10/2023</p>
</div>
<div class="ml-4 flex-shrink-0">
<div class="flex space-x-3">
<button onclick="showUserStoryModal('View Document', 'Preview document content.', 'As a Compliance Officer, I want to preview document content without downloading, so that I can quickly review documents while maintaining version control.', '1. Must display document content\n2. Support multiple formats (PDF, Word, Excel)\n3. Include zoom controls\n4. Allow annotation\n5. Support fullscreen view\n6. Work on mobile devices\n7. Preserve formatting\n8. Integrate with permissions\n9. Handle large documents efficiently\n10. Support downloading the document')" class="text-gray-400 hover:text-gray-500 smooth-transition">
<i class="fas fa-eye"></i>
</button>
<button onclick="showUserStoryModal('Download Document', 'Download document to local device.', 'As a Compliance Officer, I want to download documents to my local device when needed, so that I can work offline or share with authorized parties.', '1. Must download the original file\n2. Track download history\n3. Support multiple formats\n4. Include virus scanning\n5. Work with large files\n6. Preserve metadata\n7. Integrate with permissions\n8. Provide download options\n9. Be reliable with progress indicator\n10. Support bulk downloads when permitted')" class="text-gray-400 hover:text-gray-500 smooth-transition">
<i class="fas fa-download"></i>
</button>
<button onclick="showUserStoryModal('Document Actions', 'Additional document management actions.', 'As a Document Controller, I want context-specific actions for each document, so that I can perform necessary document management tasks efficiently.', '1. Must provide context-specific actions\n2. Include version management\n3. Support sharing options\n4. Allow metadata editing\n5. Include workflow actions\n6. Offer export options\n7. Support bulk operations\n8. Integrate with other features\n9. Adapt based on document type\n10. Support custom actions through plugins')" class="text-gray-400 hover:text-gray-500 smooth-transition">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right column -->
<div class="space-y-6">
<!-- Tasks -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div class="px-5 py-4 border-b border-gray-200 bg-white">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-gray-900">My Tasks</h3>
<a href="javascript:void(0)" onclick="showUserStoryModal('All Tasks', 'View all assigned compliance tasks.', 'As a Compliance Team Member, I want to view all my assigned tasks with status and priority, so that I can manage my workload and meet deadlines effectively.', '1. Must list all assigned tasks\n2. Filter by status/priority\n3. Show due dates\n4. Include progress tracking\n5. Support task delegation\n6. Provide completion reporting\n7. Integrate with calendar\n8. Offer reminder options\n9. Provide comprehensive view with sorting\n10. Support task templates for recurring activities')" class="text-sm font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">View All</a>
</div>
</div>
<div class="divide-y divide-gray-200">
<div class="p-5 hover:bg-gray-50 smooth-transition">
<div class="flex items-start">
<div class="flex-shrink-0 pt-0.5">
<input type="checkbox" onclick="showUserStoryModal('Complete Task', 'Mark task as completed.', 'As a Compliance Officer, I want to mark tasks as complete with supporting notes, so that we can track progress and maintain an audit trail of completed activities.', '1. Must mark tasks as complete\n2. Record completion time\n3. Capture completion notes\n4. Require approval when needed\n5. Update related workflows\n6. Trigger notifications\n7. Update reporting metrics\n8. Integrate with time tracking\n9. Handle complex completion workflows\n10. Support attachments for evidence')" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
</div>
<div class="ml-3 flex-1">
<div class="flex items-center justify-between">
<p class="text-sm font-semibold text-gray-900">Review new ESMA guidelines</p>
<span class="text-xs text-gray-500">Due today</span>
</div>
<p class="text-sm text-gray-500 mt-1">Analyze impact on suitability requirements</p>
<div class="mt-3 flex items-center space-x-2">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">Regulatory</span>
</div>
</div>
</div>
</div>
<div class="p-5 hover:bg-gray-50 smooth-transition">
<div class="flex items-start">
<div class="flex-shrink-0 pt-0.5">
<input type="checkbox" onclick="showUserStoryModal('Complete Task', 'Mark task as completed.', 'As a Compliance Officer, I want to mark tasks as complete with supporting notes, so that we can track progress and maintain an audit trail of completed activities.', '1. Must mark tasks as complete\n2. Record completion time\n3. Capture completion notes\n4. Require approval when needed\n5. Update related workflows\n6. Trigger notifications\n7. Update reporting metrics\n8. Integrate with time tracking\n9. Handle complex completion workflows\n10. Support attachments for evidence')" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
</div>
<div class="ml-3 flex-1">
<div class="flex items-center justify-between">
<p class="text-sm font-semibold text-gray-900">Approve Compliance Manual</p>
<span class="text-xs text-gray-500">Due in 2 days</span>
</div>
<p class="text-sm text-gray-500 mt-1">Review changes in sections 4.2 and 5.1</p>
<div class="mt-3 flex items-center space-x-2">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">Document</span>
</div>
</div>
</div>
</div>
<div class="p-5 hover:bg-gray-50 smooth-transition">
<div class="flex items-start">
<div class="flex-shrink-0 pt-0.5">
<input type="checkbox" onclick="showUserStoryModal('Complete Task', 'Mark task as completed.', 'As a Compliance Officer, I want to mark tasks as complete with supporting notes, so that we can track progress and maintain an audit trail of completed activities.', '1. Must mark tasks as complete\n2. Record completion time\n3. Capture completion notes\n4. Require approval when needed\n5. Update related workflows\n6. Trigger notifications\n7. Update reporting metrics\n8. Integrate with time tracking\n9. Handle complex completion workflows\n10. Support attachments for evidence')" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
</div>
<div class="ml-3 flex-1">
<div class="flex items-center justify-between">
<p class="text-sm font-semibold text-gray-900">Investigate trade alert</p>
<span class="text-xs text-gray-500">Due in 3 days</span>
</div>
<p class="text-sm text-gray-500 mt-1">Unusual trading pattern detected for client #45892</p>
<div class="mt-3 flex items-center space-x-2">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg yellow-100 text-yellow-800">Surveillance</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Compliance Calendar -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div class="px-5 py-4 border-b border-gray-200 bg-white">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-gray-900">Compliance Calendar</h3>
<a href="javascript:void(0)" onclick="showUserStoryModal('Full Calendar', 'View complete compliance calendar.', 'As a Compliance Manager, I want to view all compliance deadlines in a calendar format with color-coding, so that I can plan and prepare for upcoming regulatory obligations.', '1. Must display all compliance deadlines\n2. Color-code by regulation type\n3. Show recurring events\n4. Include reminder options\n5. Support filtering\n6. Allow event creation\n7. Integrate with task management\n8. Support exporting/printing\n9. Provide multiple views (day, week, month)\n10. Support integration with external calendars')" class="text-sm font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">View All</a>
</div>
</div>
<div class="p-5">
<div class="space-y-5">
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-12 w-12 rounded-xl bg-purple-100 text-purple-600">
<i class="fas fa-calendar-day text-lg"></i>
</div>
</div>
<div class="ml-4">
<p class="text-sm font-semibold text-gray-900">MiFIR Reporting Deadline</p>
<p class="text-sm text-gray-500">15 Nov 2023</p>
<p class="text-xs text-gray-400 mt-1">Quarterly transaction reporting to ESMA</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-12 w-12 rounded-xl bg-red-100 text-red-600">
<i class="fas fa-exclamation text-lg"></i>
</div>
</div>
<div class="ml-4">
<p class="text-sm font-semibold text-gray-900">Annual Compliance Review</p>
<p class="text-sm text-gray-500">30 Dec 2023</p>
<p class="text-xs text-gray-400 mt-1">Submit to Board of Directors</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-12 w-12 rounded-xl bg-blue-100 text-blue-600">
<i class="fas fa-user-check text-lg"></i>
</div>
</div>
<div class="ml-4">
<p class="text-sm font-semibold text-gray-900">Suitability Rules Update</p>
<p class="text-sm text-gray-500">5 Jan 2024</p>
<p class="text-xs text-gray-400 mt-1">Implement new ESMA guidelines</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Charts section -->
<div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Case Status -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
<div class="flex items-center justify-between mb-5">
<h3 class="text-lg font-semibold text-gray-900">Case Status</h3>
<div class="flex space-x-2">
<button onclick="showUserStoryModal('Chart Options', 'Configure chart display options.', 'As a Data Analyst, I want to configure chart display options to customize my view, so that I can analyze compliance data in the most effective way for my needs.', '1. Must 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\n9. Be intuitive with tooltips\n10. Support resetting to defaults')" class="text-gray-400 hover:text-gray-500 smooth-transition">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
<div class="chart-container">
<canvas id="caseStatusChart"></canvas>
</div>
</div>
<!-- SLA Compliance -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
<div class="flex items-center justify-between mb-5">
<h3 class="text-lg font-semibold text-gray-900">SLA Compliance</h3>
<div class="flex space-x-2">
<button onclick="showUserStoryModal('Chart Options', 'Configure chart display options.', 'As a Data Analyst, I want to configure chart display options to customize my view, so that I can analyze compliance data in the most effective way for my needs.', '1. Must 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\n9. Be intuitive with tooltips\n10. Support resetting to defaults')" class="text-gray-400 hover:text-gray-500 smooth-transition">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
<div class="chart-container">
<canvas id="slaChart"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Modal functions
function showUserStoryModal(title, description, userStory, acceptanceCriteria) {
document.getElementById('modalTitle').textContent = title;
document.getElementById('modalDescription').textContent = description;
const storyContent = document.getElementById('userStoryContent');
storyContent.innerHTML = `
<div class="user-story-title">User Story:</div>
<div class="user-story-content">${userStory}</div>
<div class="acceptance-criteria">
<div class="acceptance-title">Acceptance Criteria:</div>
<div class="user-story-content">${acceptanceCriteria}</div>
</div>
`;
document.getElementById('functionModal').style.display = 'flex';
return false; // Prevent default behavior
}
function closeModal() {
document.getElementById('functionModal').style.display = 'none';
}
function copyStoryToClipboard() {
const storyContent = document.getElementById('userStoryContent').textContent;
navigator.clipboard.writeText(storyContent).then(() => {
// Show copied feedback
const copyBtn = document.querySelector('.copy-btn');
const originalHtml = copyBtn.innerHTML;
copyBtn.innerHTML = '<i class="fas fa-check mr-1"></i> Copied!';
setTimeout(() => {
copyBtn.innerHTML = originalHtml;
}, 2000);
});
}
// Close modal when clicking outside
window.onclick = function(event) {
const modal = document.getElementById('functionModal');
if (event.target == modal) {
closeModal();
}
}
// Sidebar active state
document.querySelectorAll('.sidebar-item').forEach(item => {
item.addEventListener('click', function(e) {
if (!e.target.classList.contains('notification-badge')) {
document.querySelectorAll('.sidebar-item').forEach(i => i.classList.remove('active'));
this.classList.add('active');
}
});
});
// Prevent default behavior for all links that show modals
document.querySelectorAll('a[onclick^="showUserStoryModal"]').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
});
});
// Case Status Chart
const caseStatusCtx = document.getElementById('caseStatusChart').getContext('2d');
const caseStatusChart = new Chart(caseStatusCtx, {
type: 'doughnut',
data: {
labels: ['Open', 'In Progress', 'Pending Review', 'Closed'],
datasets: [{
data: [12, 8, 5, 24],
backgroundColor: [
'#4f46e5',
'#f59e0b',
'#10b981',
'#8b5cf6'
],
borderWidth: 0,
hoverOffset: 10
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: {
usePointStyle: true,
padding: 20,
font: {
family: 'Inter'
}
}
},
tooltip: {
backgroundColor: '#1f2937',
titleFont: {
family: 'Inter',
size: 14
},
bodyFont: {
family: 'Inter',
size: 12
},
padding: 12,
cornerRadius: 8
}
},
cutout: '75%',
animation: {
animateScale: true,
animateRotate: true
}
}
});
// SLA Compliance Chart
const slaCtx = document.getElementById('slaChart').getContext('2d');
const slaChart = new Chart(slaCtx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
datasets: [{
label: 'SLA Compliance %',
data: [92, 95, 97, 96, 98, 97, 99, 98, 97, 98],
backgroundColor: '#4f46e5',
borderRadius: 6,
hoverBackgroundColor: '#6366f1'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
tooltip: {
backgroundColor: '#1f2937',
titleFont: {
family: 'Inter',
size: 14
},
bodyFont: {
family: 'Inter',
size: 12
},
padding: 12,
cornerRadius: 8,
callbacks: {
label: function(context) {
return context.parsed.y + '%';
}
}
}
},
scales: {
y: {
beginAtZero: false,
min: 90,
max: 100,
grid: {
drawBorder: false
},
ticks: {
callback: function(value) {
return value + '%';
},
font: {
family: 'Inter'
}
}
},
x: {
grid: {
display: false,
drawBorder: false
},
ticks: {
font: {
family: 'Inter'
}
}
}
}
}
});
// Simulate loading
setTimeout(() => {
document.querySelectorAll('.progress-bar').forEach(bar => {
bar.style.width = bar.parentElement.getAttribute('data-percent');
});
}, 300);
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=LukasBe/complyvision" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |