Spaces:
Running
Running
| <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> |