create a sample visualization this trend page using power bi

index.html

@@ -42,9 +42,10 @@
             </div>
             <div class="hidden md:flex space-x-6">
                 <a href="#" class="text-navy hover:text-accent font-medium">Dashboard</a>
+                <a href="powerbi-trends.html" class="text-gray-500 hover:text-accent font-medium">Trends</a>
                 <a href="#" class="text-gray-500 hover:text-accent font-medium">Reports</a>
                 <a href="#" class="text-gray-500 hover:text-accent font-medium">Analytics</a>
-            </div>
+</div>
             <button class="md:hidden">
                 <i data-feather="menu" class="w-6 h-6 text-navy"></i>
             </button>

nps-dashboard.html

@@ -26,9 +26,9 @@
             </div>
             <div class="hidden md:flex space-x-6">
                 <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Metrics</a>
-                <a href="#" class="text-gray-500 hover:text-blue-600 font-medium">Trends</a>
+                <a href="powerbi-trends.html" class="text-gray-500 hover:text-blue-600 font-medium">Trends</a>
                 <a href="#" class="text-gray-500 hover:text-blue-600 font-medium">Benchmarks</a>
-            </div>
+</div>
             <button class="md:hidden">
                 <i data-feather="menu" class="w-6 h-6 text-gray-800"></i>
             </button>

powerbi-trends.html

@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Power BI Trend Visualizations</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <style>
+        .card-shadow {
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        }
+        .iframe-container {
+            position: relative;
+            overflow: hidden;
+            padding-top: 56.25%; /* 16:9 Aspect Ratio */
+        }
+        .responsive-iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <!-- Navigation -->
+    <nav class="bg-white shadow-sm">
+        <div class="max-w-7xl mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <i data-feather="trending-up" class="text-blue-600 w-8 h-8"></i>
+                <h1 class="text-xl font-bold text-gray-800">Power BI Trend Visualizations</h1>
+            </div>
+            <div class="hidden md:flex space-x-6">
+                <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Dashboard</a>
+                <a href="#" class="text-gray-500 hover:text-blue-600 font-medium">Reports</a>
+                <a href="#" class="text-gray-500 hover:text-blue-600 font-medium">Analytics</a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="max-w-7xl mx-auto px-4 py-8">
+        <div class="mb-8">
+            <h2 class="text-2xl font-bold text-gray-800 mb-2">Contract Value Trends</h2>
+            <p class="text-gray-600">Interactive Power BI visualization showing contract value trends across military branches</p>
+        </div>
+
+        <!-- Power BI Embedded Section -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+            <div class="bg-white rounded-xl p-6 card-shadow">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-lg font-bold text-gray-800">Quarterly Contract Values</h3>
+                    <button class="text-sm text-gray-500 hover:text-blue-600">
+                        <i data-feather="maximize" class="w-5 h-5"></i>
+                    </button>
+                </div>
+                <div class="iframe-container">
+                    <iframe class="responsive-iframe" src="https://app.powerbi.com/view?r=eyJrIjoiODJlOTY5ZjQtZGYyZS00YzA5LTk1Y2QtYmU1M2I0N2FlYjU3IiwidCI6IjcyZjk4OGJmLTg2ZjEtNDFhZi05MWFiLTJkN2NkMDExZGI0NyIsImMiOjV9" 
+                            allowfullscreen="true"></iframe>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl p-6 card-shadow">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-lg font-bold text-gray-800">Branch Comparison</h3>
+                    <button class="text-sm text-gray-500 hover:text-blue-600">
+                        <i data-feather="maximize" class="w-5 h-5"></i>
+                    </button>
+                </div>
+                <div class="iframe-container">
+                    <iframe class="responsive-iframe" src="https://app.powerbi.com/view?r=eyJrIjoiODJlOTY5ZjQtZGYyZS00YzA5LTk1Y2QtYmU1M2I0N2FlYjU3IiwidCI6IjcyZjk4OGJmLTg2ZjEtNDFhZi05MWFiLTJkN2NkMDExZGI0NyIsImMiOjV9" 
+                            allowfullscreen="true"></iframe>
+                </div>
+            </div>
+        </div>
+
+        <!-- Screenshot Section -->
+        <div class="bg-white rounded-xl p-6 card-shadow mb-8">
+            <div class="flex justify-between items-center mb-6">
+                <h3 class="text-lg font-bold text-gray-800">Detailed Trend Analysis</h3>
+                <button class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700">
+                    <i data-feather="download" class="w-4 h-4 inline mr-1"></i>
+                    Export Report
+                </button>
+            </div>
+            <div class="w-full rounded-lg overflow-hidden">
+                <img src="https://huggingface.co/spaces/Specthor/netprompter-powerdash/resolve/main/images/Screenshot%202025-10-20%20083818.png" 
+                     alt="Power BI Trend Visualization" class="w-full h-auto">
+            </div>
+            <div class="mt-4 text-sm text-gray-500">
+                <p>Above: Screenshot of Power BI trend analysis showing contract values by branch over time with filters for contract type and value range.</p>
+            </div>
+        </div>
+
+        <!-- Filters Section -->
+        <div class="bg-white rounded-xl p-6 card-shadow mb-8">
+            <h3 class="text-lg font-bold text-gray-800 mb-4">Interactive Filters</h3>
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Branch</label>
+                    <select class="w-full border border-gray-300 rounded-md py-2 px-3 text-sm">
+                        <option>All Branches</option>
+                        <option>Army</option>
+                        <option>Navy</option>
+                        <option>Air Force</option>
+                        <option>Coast Guard</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Time Period</label>
+                    <select class="w-full border border-gray-300 rounded-md py-2 px-3 text-sm">
+                        <option>Last 12 Months</option>
+                        <option>Last 3 Years</option>
+                        <option>Last 5 Years</option>
+                        <option>All Time</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Contract Type</label>
+                    <select class="w-full border border-gray-300 rounded-md py-2 px-3 text-sm">
+                        <option>All Types</option>
+                        <option>Weapons</option>
+                        <option>Vehicles</option>
+                        <option>Technology</option>
+                        <option>Services</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Value Range</label>
+                    <select class="w-full border border-gray-300 rounded-md py-2 px-3 text-sm">
+                        <option>All Values</option>
+                        <option>Under $100M</option>
+                        <option>$100M - $500M</option>
+                        <option>Over $500M</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- Footer -->
+    <footer class="bg-white border-t border-gray-200 mt-12">
+        <div class="max-w-7xl mx-auto px-4 py-6">
+            <p class="text-center text-sm text-gray-500">
+                &copy; 2023 Power BI Military Contracts Dashboard. Data refreshed daily.
+            </p>
+        </div>
+    </footer>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            feather.replace();
+        });
+    </script>
+</body>
+</html>