Add 2 files

index.html

@@ -157,14 +157,35 @@
             justify-content: flex-end;
         }
         
-        .prompt-code {
+        .user-story {
             background-color: #f3f4f6;
             border-radius: 0.375rem;
             padding: 1rem;
-            font-family: 'Courier New', Courier, monospace;
+            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;
-            position: relative;
+            padding-left: 1rem;
+            border-left: 2px solid #d1d5db;
+        }
+        
+        .acceptance-title {
+            font-weight: 500;
+            color: #374151;
+            margin-bottom: 0.5rem;
         }
         
         .copy-btn {
@@ -189,21 +210,18 @@
     <div id="functionModal" class="modal">
         <div class="modal-content">
             <div class="modal-header">
-                <h3 class="text-lg font-semibold text-gray-900" id="modalTitle">Function Details</h3>
+                <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"></div>
-                <div class="mt-4">
-                    <h4 class="font-medium text-gray-900 mb-2">ChatGPT Prompt:</h4>
-                    <div class="prompt-code">
-                        <button onclick="copyPromptToClipboard()" class="copy-btn">
-                            <i class="fas fa-copy mr-1"></i> Copy
-                        </button>
-                        <div id="promptText"></div>
-                    </div>
+                <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">
@@ -236,37 +254,37 @@
                 
                 <div class="flex flex-col flex-grow px-3 overflow-y-auto">
                     <nav class="space-y-1">
-                        <a href="javascript:void(0)" onclick="showFunctionModal('Dashboard', 'Main dashboard view showing compliance overview and key metrics.', 'Create a comprehensive compliance dashboard for a financial services company. The dashboard should display:\n\n1. Key compliance metrics (pending documents, completed tasks, alerts, SLA compliance)\n2. Regulatory alerts section with priority indicators\n3. Recent documents section with quick actions\n4. Task management with due dates\n5. Compliance calendar with upcoming deadlines\n6. Visual charts for case status and SLA trends\n\nUse a clean, professional design with a color scheme of indigo/purple as primary colors. Implement interactive elements with hover effects and smooth transitions. The dashboard should be fully responsive and accessible. Include a sidebar navigation with 8 main sections and a help widget.')" class="sidebar-item active flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
+                        <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="showFunctionModal('Document Hub', 'Central repository for all compliance documents with version control.', 'Build a document management hub for compliance documents with these features:\n\n1. Document listing with type icons (PDF, Word, Excel)\n2. Version control and history tracking\n3. Metadata display (last updated, author)\n4. Quick actions (view, download, more options)\n5. Search and filtering capabilities\n6. Status indicators (pending review, approved, etc.)\n7. Bulk actions for multiple documents\n8. Upload new documents with drag-and-drop\n\nDocuments should be organized in a card/list view with clear status indicators. Include document preview functionality and permission-based access controls.')" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
+                        <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="showFunctionModal('Regulatory Alerts', 'Real-time notifications about regulatory changes and updates.', 'Develop a regulatory alerts system with:\n\n1. Real-time alert notifications\n2. Priority classification (critical, high, medium, low)\n3. Regulatory body filtering (ESMA, ČNB, EU, etc.)\n4. Detailed alert view with impact analysis\n5. Action tracking (acknowledged, in progress, resolved)\n6. Email/SMS notification options\n7. Historical alert archive\n8. Regulatory change tracking\n\nAlerts should be displayed with clear visual indicators for priority. Include a mechanism for users to add comments and mark alerts as resolved.')" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
+                        <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="showFunctionModal('Suitability Engine', 'Tool for assessing investment suitability based on client profiles.', 'Create a suitability assessment engine that:\n\n1. Collects client investment profile data\n2. Analyzes product suitability based on MiFID II requirements\n3. Generates suitability reports\n4. Flags potential mismatches\n5. Stores assessment history\n6. Provides audit trail\n7. Integrates with client database\n8. Supports bulk assessments\n\nThe interface should guide users through the assessment process with clear steps. Include visual indicators for risk levels and compatibility scores. Generate PDF reports with compliance documentation.')" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
+                        <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="showFunctionModal('Transaction Reporting', 'System for preparing and submitting regulatory transaction reports.', 'Build a transaction reporting module that:\n\n1. Collects trade data from multiple sources\n2. Validates data against regulatory requirements\n3. Formats reports for different regulators (ESMA, ČNB, etc.)\n4. Tracks submission status\n5. Stores submission history\n6. Flags reporting errors\n7. Generates audit trails\n8. Supports bulk corrections\n\nThe system should support multiple reporting regimes (MiFIR, EMIR, etc.) with configurable rules. Include validation checks before submission and confirmation receipts.')" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
+                        <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="showFunctionModal('Trade Surveillance', 'Monitoring system for detecting suspicious trading patterns.', 'Develop a trade surveillance system with:\n\n1. Real-time trade monitoring\n2. Pattern detection algorithms\n3. Alert generation for suspicious activity\n4. Case management workflow\n5. Investigation tools\n6. Regulatory reporting integration\n7. Historical analysis\n8. Custom rule configuration\n\nThe interface should provide visualizations of trading patterns and clear alert details. Include tools for annotating cases and marking them as resolved. Support exporting data for regulatory reporting.')" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
+                        <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="showFunctionModal('Case Management', 'Workflow system for tracking compliance cases and investigations.', 'Create a case management system with:\n\n1. Case creation and assignment\n2. Status tracking (open, in progress, resolved)\n3. Document attachment\n4. Team collaboration\n5. Deadline management\n6. Reporting dashboards\n7. Audit logging\n8. Custom workflow configuration\n\nCases should be organized with filters and search. Include timeline views of case activity and email notifications for updates. Support exporting case data for regulatory purposes.')" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
+                        <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="showFunctionModal('Analytics', 'Reporting and visualization tools for compliance metrics.', 'Build an analytics module that:\n\n1. Tracks key compliance metrics\n2. Provides visual dashboards\n3. Supports custom reporting\n4. Offers data export options\n5. Includes regulatory benchmarking\n6. Tracks trends over time\n7. Alerts on metric thresholds\n8. Integrates with other modules\n\nThe analytics should include interactive charts and tables. Support scheduled report generation and distribution. Include drill-down capabilities for detailed analysis.')" class="sidebar-item flex items-center px-3 py-2.5 text-sm font-medium rounded-lg smooth-transition">
+                        <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>
@@ -281,7 +299,7 @@
                                 <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="showFunctionModal('Support', 'Contact support team for technical assistance.', 'Create a support contact system that:\n\n1. Provides multiple contact channels (email, chat, phone)\n2. Tracks support ticket status\n3. Offers knowledge base access\n4. Includes live chat functionality\n5. Provides estimated response times\n6. Supports file attachments\n7. Includes satisfaction surveys\n8. Integrates with user authentication\n\nThe interface should make it easy to submit support requests with clear categories. Include status tracking for open tickets and historical view of past interactions.')" class="mt-2 text-xs font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">
+                                    <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>
@@ -297,22 +315,22 @@
             <!-- 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="showFunctionModal('Mobile Menu', 'Toggle button for mobile navigation menu.', 'Create a responsive mobile menu toggle that:\n\n1. Works on all device sizes\n2. Has accessible aria-labels\n3. Includes smooth animations\n4. Supports keyboard navigation\n5. Maintains state between views\n6. Integrates with existing navigation\n7. Has proper focus management\n8. Follows mobile UX best practices\n\nThe button should clearly indicate menu state (open/closed) and work with the existing sidebar navigation. Include proper touch targets for mobile devices.')" class="md:hidden text-gray-500 hover:text-gray-600 focus:outline-none smooth-transition">
+                    <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="showFunctionModal('Notifications', 'System notifications and alerts center.', 'Create a notifications center that:\n\n1. Aggregates system notifications\n2. Supports different notification types\n3. Includes unread indicators\n4. Allows marking as read\n5. Provides filtering options\n6. Stores notification history\n7. Supports actionable notifications\n8. Integrates with other modules\n\nThe interface should display notifications in a dropdown or dedicated view. Include visual indicators for priority and type. Support bulk actions for managing multiple notifications.')" class="text-gray-500 hover:text-gray-600 relative focus:outline-none smooth-transition">
+                    <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="showFunctionModal('Messages', 'Internal messaging system for team communication.', 'Build a messaging system that:\n\n1. Supports direct and group messages\n2. Includes read receipts\n3. Allows file attachments\n4. Provides search functionality\n5. Integrates with user directory\n6. Supports message threading\n7. Offers notification preferences\n8. Maintains message history\n\nThe interface should provide a clean messaging experience with conversation lists and message views. Include typing indicators and online status for users.')" class="text-gray-500 hover:text-gray-600 relative focus:outline-none smooth-transition">
+                    <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="showFunctionModal('User Profile', 'User account settings and profile management.', 'Create a user profile section that:\n\n1. Displays user information\n2. Allows profile editing\n3. Manages account settings\n4. Controls notification preferences\n5. Shows activity history\n6. Includes security settings\n7. Supports profile picture upload\n8. Integrates with authentication\n\nThe interface should provide a comprehensive view of user account with clear sections. Include form validation for editing and proper error handling. Support two-factor authentication setup.')" class="flex items-center focus:outline-none group">
+                        <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>
@@ -331,7 +349,7 @@
                             <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="showFunctionModal('New Task', 'Create a new compliance task or action item.', 'Create a task creation form that:\n\n1. Captures task details (title, description)\n2. Assigns to team members\n3. Sets priority levels\n4. Adds due dates\n5. Attaches relevant documents\n6. Links to compliance requirements\n7. Sets reminders\n8. Integrates with calendar\n\nThe form should include validation and auto-suggestions for assignees. Support task templates for common compliance activities. Include proper error handling and confirmation messages.')" class="bg-gradient-to-br from-indigo-600 to-indigo-500 hover:from-indigo-700 hover:to-indigo-600 text-white px-5 py-2.5 rounded-lg flex items-center shadow-md hover:shadow-lg smooth-transition">
+                            <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>
@@ -354,7 +372,7 @@
                         <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="showFunctionModal('View Documents', 'View all pending compliance documents.', 'Create a document listing view that:\n\n1. Displays all pending documents\n2. Allows filtering by type/status\n3. Shows overdue indicators\n4. Provides quick actions\n5. Supports bulk operations\n6. Includes search functionality\n7. Shows document metadata\n8. Integrates with approval workflow\n\nThe view should be sortable and paginated for large document sets. Include visual indicators for document status and priority. Support exporting the document list.')" class="font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">View all</a>
+                                <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>
@@ -372,7 +390,7 @@
                         <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="showFunctionModal('View Tasks', 'View all completed compliance tasks.', 'Create a task history view that:\n\n1. Lists completed tasks\n2. Filters by date range\n3. Shows completion details\n4. Displays assignee information\n5. Includes approval records\n6. Supports exporting data\n7. Links to related documents\n8. Integrates with reporting\n\nThe view should provide insights into task completion patterns. Include visual indicators for on-time vs. late completion. Support drill-down into task details.')" class="font-medium text-green-600 hover:text-green-700 smooth-transition">View all</a>
+                                <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>
@@ -390,7 +408,7 @@
                         <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="showFunctionModal('View Alerts', 'View all active compliance alerts.', 'Create an alert management view that:\n\n1. Lists all active alerts\n2. Highlights critical alerts\n3. Shows alert details\n4. Tracks investigation status\n5. Allows alert resolution\n6. Supports filtering/sorting\n7. Includes audit trail\n8. Integrates with case management\n\nThe view should prioritize critical alerts and show investigation progress. Include tools for assigning alerts and adding notes. Support exporting alert data.')" class="font-medium text-yellow-600 hover:text-yellow-700 smooth-transition">View all</a>
+                                <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>
@@ -426,7 +444,7 @@
                             <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="showFunctionModal('All Alerts', 'View all regulatory alerts and updates.', 'Create a comprehensive regulatory alert system that:\n\n1. Aggregates alerts from multiple sources\n2. Categorizes by regulatory body\n3. Prioritizes by impact\n4. Tracks acknowledgment\n5. Links to related documents\n6. Supports comments\n7. Includes historical archive\n8. Integrates with task management\n\nThe system should provide a centralized view of all regulatory changes with filtering options. Include tools for assigning follow-up actions and tracking implementation.')" class="text-sm font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">View All</a>
+                                    <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">
@@ -496,7 +514,7 @@
                             <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="showFunctionModal('All Documents', 'View all compliance documents in the system.', 'Create a comprehensive document management system that:\n\n1. Stores all compliance documents\n2. Tracks versions and changes\n3. Manages access controls\n4. Supports document workflows\n5. Includes approval processes\n6. Provides audit trails\n7. Offers bulk operations\n8. Integrates with other modules\n\nThe system should handle documents of various types with proper metadata. Include tools for document comparison and change tracking. Support automated retention policies.')" class="text-sm font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">View All</a>
+                                    <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">
@@ -513,13 +531,13 @@
                                         </div>
                                         <div class="ml-4 flex-shrink-0">
                                             <div class="flex space-x-3">
-                                                <button onclick="showFunctionModal('View Document', 'Preview document content.', 'Create a document preview feature that:\n\n1. Displays document content\n2. Supports multiple formats (PDF, Word, Excel)\n3. Includes zoom controls\n4. Allows annotation\n5. Supports fullscreen view\n6. Works on mobile devices\n7. Preserves formatting\n8. Integrates with permissions\n\nThe preview should handle large documents efficiently. Include tools for highlighting and commenting. Support downloading the document.')" class="text-gray-400 hover:text-gray-500 smooth-transition">
+                                                <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="showFunctionModal('Download Document', 'Download document to local device.', 'Create a document download feature that:\n\n1. Downloads the original file\n2. Tracks download history\n3. Supports multiple formats\n4. Includes virus scanning\n5. Works with large files\n6. Preserves metadata\n7. Integrates with permissions\n8. Provides download options\n\nThe download should be reliable and show progress. Include options for downloading specific versions. Support bulk downloads when permitted.')" class="text-gray-400 hover:text-gray-500 smooth-transition">
+                                                <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="showFunctionModal('Document Actions', 'Additional document management actions.', 'Create a document actions menu that:\n\n1. Provides context-specific actions\n2. Includes version management\n3. Supports sharing options\n4. Allows metadata editing\n5. Includes workflow actions\n6. Offers export options\n7. Supports bulk operations\n8. Integrates with other features\n\nThe menu should adapt based on document type and user permissions. Include tools for comparing versions and managing access. Support custom actions through plugins.')" class="text-gray-400 hover:text-gray-500 smooth-transition">
+                                                <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>
@@ -539,13 +557,13 @@
                                         </div>
                                         <div class="ml-4 flex-shrink-0">
                                             <div class="flex space-x-3">
-                                                <button onclick="showFunctionModal('View Document', 'Preview document content.', 'Create a document preview feature that:\n\n1. Displays document content\n2. Supports multiple formats (PDF, Word, Excel)\n3. Includes zoom controls\n4. Allows annotation\n5. Supports fullscreen view\n6. Works on mobile devices\n7. Preserves formatting\n8. Integrates with permissions\n\nThe preview should handle large documents efficiently. Include tools for highlighting and commenting. Support downloading the document.')" class="text-gray-400 hover:text-gray-500 smooth-transition">
+                                                <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="showFunctionModal('Download Document', 'Download document to local device.', 'Create a document download feature that:\n\n1. Downloads the original file\n2. Tracks download history\n3. Supports multiple formats\n4. Includes virus scanning\n5. Works with large files\n6. Preserves metadata\n7. Integrates with permissions\n8. Provides download options\n\nThe download should be reliable and show progress. Include options for downloading specific versions. Support bulk downloads when permitted.')" class="text-gray-400 hover:text-gray-500 smooth-transition">
+                                                <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="showFunctionModal('Document Actions', 'Additional document management actions.', 'Create a document actions menu that:\n\n1. Provides context-specific actions\n2. Includes version management\n3. Supports sharing options\n4. Allows metadata editing\n5. Includes workflow actions\n6. Offers export options\n7. Supports bulk operations\n8. Integrates with other features\n\nThe menu should adapt based on document type and user permissions. Include tools for comparing versions and managing access. Support custom actions through plugins.')" class="text-gray-400 hover:text-gray-500 smooth-transition">
+                                                <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>
@@ -565,13 +583,13 @@
                                         </div>
                                         <div class="ml-4 flex-shrink-0">
                                             <div class="flex space-x-3">
-                                                <button onclick="showFunctionModal('View Document', 'Preview document content.', 'Create a document preview feature that:\n\n1. Displays document content\n2. Supports multiple formats (PDF, Word, Excel)\n3. Includes zoom controls\n4. Allows annotation\n5. Supports fullscreen view\n6. Works on mobile devices\n7. Preserves formatting\n8. Integrates with permissions\n\nThe preview should handle large documents efficiently. Include tools for highlighting and commenting. Support downloading the document.')" class="text-gray-400 hover:text-gray-500 smooth-transition">
+                                                <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="showFunctionModal('Download Document', 'Download document to local device.', 'Create a document download feature that:\n\n1. Downloads the original file\n2. Tracks download history\n3. Supports multiple formats\n4. Includes virus scanning\n5. Works with large files\n6. Preserves metadata\n7. Integrates with permissions\n8. Provides download options\n\nThe download should be reliable and show progress. Include options for downloading specific versions. Support bulk downloads when permitted.')" class="text-gray-400 hover:text-gray-500 smooth-transition">
+                                                <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="showFunctionModal('Document Actions', 'Additional document management actions.', 'Create a document actions menu that:\n\n1. Provides context-specific actions\n2. Includes version management\n3. Supports sharing options\n4. Allows metadata editing\n5. Includes workflow actions\n6. Offers export options\n7. Supports bulk operations\n8. Integrates with other features\n\nThe menu should adapt based on document type and user permissions. Include tools for comparing versions and managing access. Support custom actions through plugins.')" class="text-gray-400 hover:text-gray-500 smooth-transition">
+                                                <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>
@@ -589,14 +607,14 @@
                             <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="showFunctionModal('All Tasks', 'View all assigned compliance tasks.', 'Create a task management system that:\n\n1. Lists all assigned tasks\n2. Filters by status/priority\n3. Shows due dates\n4. Includes progress tracking\n5. Supports task delegation\n6. Provides completion reporting\n7. Integrates with calendar\n8. Offers reminder options\n\nThe system should provide a comprehensive view of all tasks with sorting options. Include tools for updating task status and adding comments. Support task templates for recurring activities.')" class="text-sm font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">View All</a>
+                                    <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="showFunctionModal('Complete Task', 'Mark task as completed.', 'Create a task completion feature that:\n\n1. Marks tasks as complete\n2. Records completion time\n3. Captures completion notes\n4. Requires approval when needed\n5. Updates related workflows\n6. Triggers notifications\n7. Updates reporting metrics\n8. Integrates with time tracking\n\nThe feature should handle both simple and complex task completion workflows. Include options for partial completion when applicable. Support attachments for completion evidence.')" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
+                                            <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">
@@ -613,7 +631,7 @@
                                 <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="showFunctionModal('Complete Task', 'Mark task as completed.', 'Create a task completion feature that:\n\n1. Marks tasks as complete\n2. Records completion time\n3. Captures completion notes\n4. Requires approval when needed\n5. Updates related workflows\n6. Triggers notifications\n7. Updates reporting metrics\n8. Integrates with time tracking\n\nThe feature should handle both simple and complex task completion workflows. Include options for partial completion when applicable. Support attachments for completion evidence.')" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
+                                            <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">
@@ -630,7 +648,7 @@
                                 <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="showFunctionModal('Complete Task', 'Mark task as completed.', 'Create a task completion feature that:\n\n1. Marks tasks as complete\n2. Records completion time\n3. Captures completion notes\n4. Requires approval when needed\n5. Updates related workflows\n6. Triggers notifications\n7. Updates reporting metrics\n8. Integrates with time tracking\n\nThe feature should handle both simple and complex task completion workflows. Include options for partial completion when applicable. Support attachments for completion evidence.')" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
+                                            <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">
@@ -652,7 +670,7 @@
                             <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="showFunctionModal('Full Calendar', 'View complete compliance calendar.', 'Create a comprehensive compliance calendar that:\n\n1. Displays all compliance deadlines\n2. Color-codes by regulation type\n3. Shows recurring events\n4. Includes reminder options\n5. Supports filtering\n6. Allows event creation\n7. Integrates with task management\n8. Supports exporting/printing\n\nThe calendar should provide multiple views (day, week, month, agenda). Include tools for setting up recurring deadlines and delegation. Support integration with external calendars.')" class="text-sm font-medium text-indigo-600 hover:text-indigo-700 smooth-transition">View All</a>
+                                    <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">
@@ -706,7 +724,7 @@
                         <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="showFunctionModal('Chart Options', 'Configure chart display options.', 'Create chart configuration options that:\n\n1. Allow changing chart types\n2. Support date range selection\n3. Enable data filtering\n4. Include export options\n5. Support annotation\n6. Allow comparison periods\n7. Include accessibility options\n8. Support custom metrics\n\nThe options should be intuitive and preserve user preferences. Include tooltips explaining each option. Support resetting to default settings.')" class="text-gray-400 hover:text-gray-500 smooth-transition">
+                                <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>
@@ -721,7 +739,7 @@
                         <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="showFunctionModal('Chart Options', 'Configure chart display options.', 'Create chart configuration options that:\n\n1. Allow changing chart types\n2. Support date range selection\n3. Enable data filtering\n4. Include export options\n5. Support annotation\n6. Allow comparison periods\n7. Include accessibility options\n8. Support custom metrics\n\nThe options should be intuitive and preserve user preferences. Include tooltips explaining each option. Support resetting to default settings.')" class="text-gray-400 hover:text-gray-500 smooth-transition">
+                                <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>
@@ -738,10 +756,20 @@
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script>
         // Modal functions
-        function showFunctionModal(title, description, prompt) {
+        function showUserStoryModal(title, description, userStory, acceptanceCriteria) {
             document.getElementById('modalTitle').textContent = title;
             document.getElementById('modalDescription').textContent = description;
-            document.getElementById('promptText').textContent = prompt;
+            
+            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
         }
@@ -750,9 +778,9 @@
             document.getElementById('functionModal').style.display = 'none';
         }
 
-        function copyPromptToClipboard() {
-            const promptText = document.getElementById('promptText').textContent;
-            navigator.clipboard.writeText(promptText).then(() => {
+        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;
@@ -782,7 +810,7 @@
         });
 
         // Prevent default behavior for all links that show modals
-        document.querySelectorAll('a[onclick^="showFunctionModal"]').forEach(link => {
+        document.querySelectorAll('a[onclick^="showUserStoryModal"]').forEach(link => {
             link.addEventListener('click', function(e) {
                 e.preventDefault();
             });

prompts.txt

@@ -1,4 +1 @@
-Epic 1: Legislativní monitoring & alerting Popis: Automatizovaný sběr, zpracování a notifikace nových regulatorních změn.  US-1.1  Jako MiFID compliance specialista  chci automaticky ingestovat nové právní dokumenty (ESMA, EU, ČNB) z RSS/API  abych měl vždy aktuální přehled bez manuálního hledání  US-1.2  Jako compliance tým  chceme definovat klíčová slova (např. “suitability”, “best execution”)  abychom dostávali upozornění jen na relevantní změny  US-1.3  Jako vedoucí compliance  chci dostávat denní/týdenní e-mailové nebo Teams notifikace s přehledem novinek  abych mohl rychle eskalovat urgentní změny  Epic 2: Policy & dokument management Popis: Plně verziovaný repository interních směrnic s workflow schválení.  US-2.1  Jako compliance specialist  chci vytvářet a nahrávat nové verze politik přímo v systému  abych měl vždy jedno centrální místo pro všechny směrnice  US-2.2  Jako reviewer  chci dostávat notifikaci, když je dokument připraven k posouzení  abych mohl včas schválit nebo vrátit k úpravám  US-2.3  Jako auditor  chci vidět kompletní audit log každé změny dokumentu  abych mohl doložit, kdo kdy co upravil  Epic 3: Suitability & appropriateness engine Popis: Interaktivní otázkovník a scoringové pravidlo pro hodnocení klientovy vhodnosti investic.  US-3.1  Jako privátní bankéř  chci spustit dotazník s klientem přímo v aplikaci  abych mohl okamžitě vyhodnotit jeho investiční profil  US-3.2  Jako compliance specialist  chci snadno upravovat scoring rules (váhy, thresholdy)  abych reflektoval nové regulatorní guideline  US-3.3  Jako klient  chci obdržet PDF s výsledkem suitability testu  abych měl jasný doklad o doporučení  Epic 4: Transaction & MiFIR reporting Popis: Generování, validace a odeslání reportů dle šablon ČNB/ESMA.  US-4.1  Jako compliance specialist  chci spouštět ETL proces, který vytáhne veškeré transakce z core-bankingu  abych mohl bez manuálního zásahu připravit data  US-4.2  Jako compliance specialist  chci zobrazit validační chyby (chybějící povinná pole, špatné formáty)  abych opravil data před odesláním  US-4.3  Jako Head of Compliance  chci mít v aplikaci historii všech odeslaných reportů s potvrzením ČNB/ESMA  abych mohl doložit včasné odeslání  Epic 5: Trade Surveillance & Alerting Popis: Definice pravidel a realtime alerty na podezřelé transakce.  US-5.1  Jako compliance specialist  chci vytvořit nové pravidlo (např. objem X v čase Y) bez podpory IT  abych mohl rychle reagovat na nové typy rizik  US-5.2  Jako compliance specialist  chci dostávat okamžité upozornění do dashboardu či e-mailu  abych mohl ihned zahájit interní šetření  US-5.3  Jako auditor  chci zobrazit historii všech alertů včetně kroků jejich uzavření  abych dokázal auditní trail vyšetřování  Epic 6: Case & Incident Management Popis: Kompletní workflow pro vyřizování compliance eventů a interních hlášení.  US-6.1  Jako compliance specialist  chci založit nový incident z alertu stiskem tlačítka  abych začal proces šetření okamžitě  US-6.2  Jako compliance manager  chci přiřazovat úkoly jednotlivým členům týmu a sledovat SLA  abych nezmeškal žádný termín  US-6.3  Jako člen týmu  chci dostávat připomínky, když se blíží deadline mého úkolu  abych stihl včas uzavřít case  Epic 7: Reporting & Dashboarding Popis: Vizualizace klíčových KPI a stavů procesů pro vedení compliance.  US-7.1  Jako Head of Compliance  chci vidět metriky best execution, počet otevřených případů a průměrnou dobu řešení  abych sledoval výkon týmu  US-7.2  Jako compliance analyst  chci mít možnost ad-hoc filtrovat data podle business unit, timeframe či typu incidentu  abych mohl připravit detailní report na míru  US-7.3  Jako auditor  chci exportovat dashboard do PDF či XLSX  abych mohl přímo dodat materiály externím auditorům  Epic 8: Integrace & API layer Popis: Jednotný konektor k interním systémům (core banking, CRM, DMS).  US-8.1  Jako developer low-code aplikace  chci využít konfigurovatelné REST/OData konektory  abych snadno napojil core banking bez vlastní vrstvy kódu  US-8.2  Jako compliance specialist  chci vidět v jednom okně profil klienta i poslední transakce z CRM  abych nemusel přesouvat data mezi více aplikacemi  Epic 9: Notifikace & Eskalace Popis: Pravidla pro připomínky a automatické eskalace zpožděných úkolů.  US-9.1  Jako compliance specialist  chci definovat prahové časy pro jednotlivé kroky workflow  abych měl jistotu, že nikde nedojde k prodlení  US-9.2  Jako vedoucí compliance  chci dostávat eskalační notifikace, když se blíží nebo překročí SLA  abych mohl okamžitě zasáhnout  Epic 10: Security & Audit Trail Popis: Role-based access, detailní logy změn a přístupů pro plnou trasovatelnost.  US-10.1  Jako systémový administrátor  chci spravovat přístupy podle rolí (Advisor, Reviewer, Auditor, Admin)  abych zajistil minimáln�� oprávnění uživatelů  US-10.2  Jako auditor  chci získat auditní report, kdo kdy co vytvořil, upravil či schválil  abych mohl doložit kompletní historií změn
-Act as silicon valley top UI/UX designer and polisht the look and feel to top standards of global unicorns.
-Make each user function (button or link etc.) clickable showing a modal with a ChatGPT prompt text that is fully self contained (includes full information about the project and also specifically about the user function that has been clicked for a GPT based code to be able to code it) ... also add a copy to clipboard function to the modal so the prompt can be copies ...
-Make the modal once clicked stay visible, now all modals get invisible in a secend because the former link target # gets loaded.
+Transform the "chatgpt prompt texts" into user-story format (agile product owner user stories type).