implement the new cbom, import cbom, risk assessment and generate report floating windows in the dashboard - Follow Up Deployment

cboms.html

@@ -339,6 +339,103 @@
         </main>
     </div>
 
+    <!-- CBOM Details Floating Window -->
+    <div id="cbomDetailsModal" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-50">
+        <div class="bg-white rounded-xl shadow-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+            <div class="p-6">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="text-xl font-semibold" id="cbomModalTitle">CBOM Details</h3>
+                    <button onclick="closeCbomModal()" class="text-gray-500 hover:text-gray-700">
+                        <i data-feather="x" class="w-6 h-6"></i>
+                    </button>
+                </div>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+                    <div class="p-4 bg-gray-50 rounded-lg">
+                        <p class="text-sm text-gray-500">Name</p>
+                        <p class="font-medium" id="cbomName">-</p>
+                    </div>
+                    <div class="p-4 bg-gray-50 rounded-lg">
+                        <p class="text-sm text-gray-500">Version</p>
+                        <p class="font-medium" id="cbomVersion">-</p>
+                    </div>
+                    <div class="p-4 bg-gray-50 rounded-lg">
+                        <p class="text-sm text-gray-500">Status</p>
+                        <p class="font-medium" id="cbomStatus">-</p>
+                    </div>
+                    <div class="p-4 bg-gray-50 rounded-lg">
+                        <p class="text-sm text-gray-500">Last Modified</p>
+                        <p class="font-medium" id="cbomModified">-</p>
+                    </div>
+                </div>
+
+                <div class="mb-6">
+                    <h4 class="font-medium mb-2">Assets Breakdown</h4>
+                    <div class="grid grid-cols-4 gap-2 text-center">
+                        <div class="p-3 bg-blue-50 rounded-lg">
+                            <p class="text-xl font-bold text-blue-600" id="cbomAlgorithms">0</p>
+                            <p class="text-xs text-gray-600">Algorithms</p>
+                        </div>
+                        <div class="p-3 bg-purple-50 rounded-lg">
+                            <p class="text-xl font-bold text-purple-600" id="cbomProtocols">0</p>
+                            <p class="text-xs text-gray-600">Protocols</p>
+                        </div>
+                        <div class="p-3 bg-yellow-50 rounded-lg">
+                            <p class="text-xl font-bold text-yellow-600" id="cbomCertificates">0</p>
+                            <p class="text-xs text-gray-600">Certificates</p>
+                        </div>
+                        <div class="p-3 bg-green-50 rounded-lg">
+                            <p class="text-xl font-bold text-green-600" id="cbomTotal">0</p>
+                            <p class="text-xs text-gray-600">Total</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="mb-6">
+                    <h4 class="font-medium mb-2">Risk Assessment</h4>
+                    <div class="space-y-3">
+                        <div>
+                            <div class="flex justify-between text-sm mb-1">
+                                <span>High Risk</span>
+                                <span id="cbomHighRisk">0%</span>
+                            </div>
+                            <div class="w-full bg-gray-200 rounded-full h-2">
+                                <div class="bg-red-500 h-2 rounded-full" id="cbomHighRiskBar" style="width: 0%"></div>
+                            </div>
+                        </div>
+                        <div>
+                            <div class="flex justify-between text-sm mb-1">
+                                <span>Medium Risk</span>
+                                <span id="cbomMediumRisk">0%</span>
+                            </div>
+                            <div class="w-full bg-gray-200 rounded-full h-2">
+                                <div class="bg-yellow-500 h-2 rounded-full" id="cbomMediumRiskBar" style="width: 0%"></div>
+                            </div>
+                        </div>
+                        <div>
+                            <div class="flex justify-between text-sm mb-1">
+                                <span>Low Risk</span>
+                                <span id="cbomLowRisk">0%</span>
+                            </div>
+                            <div class="w-full bg-gray-200 rounded-full h-2">
+                                <div class="bg-green-500 h-2 rounded-full" id="cbomLowRiskBar" style="width: 0%"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex justify-end space-x-3">
+                    <button onclick="closeCbomModal()" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
+                        Close
+                    </button>
+                    <button class="px-4 py-2 bg-yellow-400 text-gray-900 rounded-lg hover:bg-yellow-500">
+                        View Full Details
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script>
         AOS.init();
         feather.replace();
@@ -354,6 +451,64 @@
                 this.classList.remove('text-gray-500', 'hover:text-gray-700');
             });
         });
+
+        // CBOM Modal Functions
+        function openCbomModal(cbomData) {
+            document.getElementById('cbomModalTitle').textContent = cbomData.name;
+            document.getElementById('cbomName').textContent = cbomData.name;
+            document.getElementById('cbomVersion').textContent = cbomData.version;
+            document.getElementById('cbomStatus').textContent = cbomData.status;
+            document.getElementById('cbomModified').textContent = cbomData.modified;
+            document.getElementById('cbomAlgorithms').textContent = cbomData.assets.algorithms;
+            document.getElementById('cbomProtocols').textContent = cbomData.assets.protocols;
+            document.getElementById('cbomCertificates').textContent = cbomData.assets.certificates;
+            document.getElementById('cbomTotal').textContent = cbomData.assets.total;
+            
+            document.getElementById('cbomHighRisk').textContent = cbomData.risks.high + '%';
+            document.getElementById('cbomMediumRisk').textContent = cbomData.risks.medium + '%';
+            document.getElementById('cbomLowRisk').textContent = cbomData.risks.low + '%';
+            
+            document.getElementById('cbomHighRiskBar').style.width = cbomData.risks.high + '%';
+            document.getElementById('cbomMediumRiskBar').style.width = cbomData.risks.medium + '%';
+            document.getElementById('cbomLowRiskBar').style.width = cbomData.risks.low + '%';
+
+            document.getElementById('cbomDetailsModal').classList.remove('hidden');
+        }
+
+        function closeCbomModal() {
+            document.getElementById('cbomDetailsModal').classList.add('hidden');
+        }
+
+        // Sample data for CBOM cards
+        const cbomCards = document.querySelectorAll('.p-4.border.border-gray-200.rounded-lg');
+        cbomCards.forEach(card => {
+            card.addEventListener('click', function() {
+                const title = this.querySelector('h4').textContent;
+                const status = this.querySelector('span').textContent;
+                const versionText = this.querySelector('p:nth-of-type(1)').textContent;
+                const modifiedText = this.querySelector('p:nth-of-type(2)').textContent;
+                
+                const cbomData = {
+                    name: title,
+                    status: status,
+                    version: versionText.split('•')[0].replace('Version', '').trim(),
+                    modified: modifiedText.replace('Last modified:', '').trim(),
+                    assets: {
+                        algorithms: Math.floor(Math.random() * 50) + 10,
+                        protocols: Math.floor(Math.random() * 30) + 5,
+                        certificates: Math.floor(Math.random() * 300) + 50,
+                        total: Math.floor(Math.random() * 400) + 100
+                    },
+                    risks: {
+                        high: Math.floor(Math.random() * 30) + 5,
+                        medium: Math.floor(Math.random() * 40) + 20,
+                        low: Math.floor(Math.random() * 40) + 30
+                    }
+                };
+                
+                openCbomModal(cbomData);
+            });
+        });
     </script>
 </body>
 

index.html

@@ -355,10 +355,223 @@
         </main>
     </div>
 
+    <!-- Floating Modals -->
+    <div id="newCbomModal" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-50">
+        <div class="bg-white rounded-xl shadow-lg w-full max-w-md">
+            <div class="p-6">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="text-xl font-semibold">Create New CBOM</h3>
+                    <button onclick="closeModal('newCbomModal')" class="text-gray-500 hover:text-gray-700">
+                        <i data-feather="x" class="w-6 h-6"></i>
+                    </button>
+                </div>
+                
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">CBOM Name</label>
+                        <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
+                        <textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400" rows="3"></textarea>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Template</label>
+                        <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400">
+                            <option>Web Application</option>
+                            <option>Mobile Application</option>
+                            <option>Microservices</option>
+                            <option>Legacy System</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="flex justify-end space-x-3 mt-6">
+                    <button onclick="closeModal('newCbomModal')" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
+                        Cancel
+                    </button>
+                    <button class="px-4 py-2 bg-yellow-400 text-gray-900 rounded-lg hover:bg-yellow-500">
+                        Create CBOM
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="importCbomModal" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-50">
+        <div class="bg-white rounded-xl shadow-lg w-full max-w-md">
+            <div class="p-6">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="text-xl font-semibold">Import CBOM</h3>
+                    <button onclick="closeModal('importCbomModal')" class="text-gray-500 hover:text-gray-700">
+                        <i data-feather="x" class="w-6 h-6"></i>
+                    </button>
+                </div>
+                
+                <div class="space-y-4">
+                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
+                        <i data-feather="upload" class="w-12 h-12 mx-auto text-gray-400 mb-3"></i>
+                        <p class="text-sm text-gray-500 mb-2">Drag and drop your CBOM file here</p>
+                        <p class="text-xs text-gray-400 mb-4">Supports .json, .xml, .cbom formats</p>
+                        <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
+                            Select File
+                        </button>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <input type="checkbox" id="overwrite" class="rounded border-gray-300 text-yellow-400 focus:ring-yellow-400">
+                        <label for="overwrite" class="text-sm text-gray-700">Overwrite existing CBOM with same name</label>
+                    </div>
+                </div>
+
+                <div class="flex justify-end space-x-3 mt-6">
+                    <button onclick="closeModal('importCbomModal')" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
+                        Cancel
+                    </button>
+                    <button class="px-4 py-2 bg-yellow-400 text-gray-900 rounded-lg hover:bg-yellow-500">
+                        Import CBOM
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="riskAssessmentModal" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-50">
+        <div class="bg-white rounded-xl shadow-lg w-full max-w-md">
+            <div class="p-6">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="text-xl font-semibold">Run Risk Assessment</h3>
+                    <button onclick="closeModal('riskAssessmentModal')" class="text-gray-500 hover:text-gray-700">
+                        <i data-feather="x" class="w-6 h-6"></i>
+                    </button>
+                </div>
+                
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Select CBOM</label>
+                        <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400">
+                            <option>Enterprise Web App</option>
+                            <option>Payment Gateway</option>
+                            <option>Legacy System</option>
+                            <option>Mobile Banking</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Assessment Type</label>
+                        <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400">
+                            <option>Quantum Risk Only</option>
+                            <option>Full Cryptographic Assessment</option>
+                            <option>Compliance Check</option>
+                        </select>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <input type="checkbox" id="includeDependencies" class="rounded border-gray-300 text-yellow-400 focus:ring-yellow-400" checked>
+                        <label for="includeDependencies" class="text-sm text-gray-700">Include dependencies in assessment</label>
+                    </div>
+                </div>
+
+                <div class="flex justify-end space-x-3 mt-6">
+                    <button onclick="closeModal('riskAssessmentModal')" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
+                        Cancel
+                    </button>
+                    <button class="px-4 py-2 bg-yellow-400 text-gray-900 rounded-lg hover:bg-yellow-500">
+                        Run Assessment
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="generateReportModal" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-50">
+        <div class="bg-white rounded-xl shadow-lg w-full max-w-md">
+            <div class="p-6">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="text-xl font-semibold">Generate Report</h3>
+                    <button onclick="closeModal('generateReportModal')" class="text-gray-500 hover:text-gray-700">
+                        <i data-feather="x" class="w-6 h-6"></i>
+                    </button>
+                </div>
+                
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Report Type</label>
+                        <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400">
+                            <option>Quantum Risk Assessment</option>
+                            <option>Compliance Report</option>
+                            <option>Executive Summary</option>
+                            <option>Technical Details</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Format</label>
+                        <div class="grid grid-cols-3 gap-2">
+                            <button class="p-2 border border-gray-300 rounded-lg hover:bg-gray-50">
+                                <i data-feather="file-text" class="w-5 h-5 mx-auto text-gray-600"></i>
+                                <span class="text-xs block mt-1">PDF</span>
+                            </button>
+                            <button class="p-2 border border-gray-300 rounded-lg hover:bg-gray-50">
+                                <i data-feather="file-text" class="w-5 h-5 mx-auto text-gray-600"></i>
+                                <span class="text-xs block mt-1">DOCX</span>
+                            </button>
+                            <button class="p-2 border border-gray-300 rounded-lg hover:bg-gray-50">
+                                <i data-feather="file-text" class="w-5 h-5 mx-auto text-gray-600"></i>
+                                <span class="text-xs block mt-1">CSV</span>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <input type="checkbox" id="includeCharts" class="rounded border-gray-300 text-yellow-400 focus:ring-yellow-400" checked>
+                        <label for="includeCharts" class="text-sm text-gray-700">Include charts and graphs</label>
+                    </div>
+                </div>
+
+                <div class="flex justify-end space-x-3 mt-6">
+                    <button onclick="closeModal('generateReportModal')" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
+                        Cancel
+                    </button>
+                    <button class="px-4 py-2 bg-yellow-400 text-gray-900 rounded-lg hover:bg-yellow-500">
+                        Generate Report
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script>
         AOS.init();
         feather.replace();
 
+        // Modal functions
+        function openModal(modalId) {
+            document.getElementById(modalId).classList.remove('hidden');
+        }
+
+        function closeModal(modalId) {
+            document.getElementById(modalId).classList.add('hidden');
+        }
+
+        // Connect quick action buttons to modals
+        document.addEventListener('DOMContentLoaded', function() {
+            // New CBOM
+            document.querySelector('button:has(span:contains("New CBOM"))').addEventListener('click', function() {
+                openModal('newCbomModal');
+            });
+
+            // Import CBOM
+            document.querySelector('button:has(span:contains("Import CBOM"))').addEventListener('click', function() {
+                openModal('importCbomModal');
+            });
+
+            // Risk Assessment
+            document.querySelector('button:has(span:contains("Risk Assessment"))').addEventListener('click', function() {
+                openModal('riskAssessmentModal');
+            });
+
+            // Generate Report
+            document.querySelector('button:has(span:contains("Generate Report"))').addEventListener('click', function() {
+                openModal('generateReportModal');
+            });
+        });
+
         // Simple animation for cards on load
         document.addEventListener('DOMContentLoaded', function () {
             const cards = document.querySelectorAll('.card-hover');

prompts.txt

@@ -0,0 +1,8 @@
+can you implement the floating windows or any kind of placeholder that currently does not perform any action? i want to have a fully functional code and i want to show all the nested tabs
+implement the new cbom floating window
+implement the new cbom, import cbom, risk assessment and generate report floating window in the dashboard
+implement the new cbom, import cbom, risk assessment and generate report floating windows in the dashboard
+implement the new cbom, import cbom, risk assessment and generate report floating windows in the dashboard
+implement the new cbom, import cbom, risk assessment and generate report floating windows in the dashboard
+implement the new cbom, import cbom, risk assessment and generate report floating windows in the dashboard
+implement the new cbom, import cbom, risk assessment and generate report floating windows in the dashboard