Hugging Face's logo

Spaces:
Specthor
/
netprompter-powerdash
Running

App Files Community
netprompter-powerdash / index.html
Specthor's picture
Specthor
create a sample visualization for CSAT Trend by fiscal quarter, NPS by fiscal quarter, benchmark, i want you to structure it in a professional way using power bi
12950e6 verified
Raw History Blame Contribute Delete
16.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Military Contracts Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
navy: '#1a365d',
army: '#4a7729',
airforce: '#005f86',
coastguard: '#007373',
accent: '#b22234'
}
}
}
}
</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);
}
.glow:hover {
box-shadow: 0 0 15px rgba(178, 34, 52, 0.4);
}
</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="shield" class="text-accent w-8 h-8"></i>
<h1 class="text-xl font-bold text-navy">Military Contract Vision</h1>
</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="text-navy hover:text-accent font-medium">Dashboard</a>
<a href="csat-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>
<button class="md:hidden">
<i data-feather="menu" class="w-6 h-6 text-navy"></i>
</button>
</div>
</nav>
<!-- Main Content -->
<main class="max-w-7xl mx-auto px-4 py-8">
<div class="flex justify-between items-center mb-8">
<h2 class="text-2xl font-bold text-navy">Defense Contracts Overview</h2>
<div class="flex space-x-2">
<button class="px-4 py-2 bg-white border border-gray-200 rounded-lg text-sm font-medium hover:bg-gray-50">
<i data-feather="calendar" class="w-4 h-4 inline mr-1"></i>
Last 12 Months
</button>
<button class="px-4 py-2 bg-accent text-white rounded-lg text-sm font-medium hover:bg-red-700">
<i data-feather="download" class="w-4 h-4 inline mr-1"></i>
Export
</button>
</div>
</div>
<!-- Summary Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="bg-white rounded-xl p-6 card-shadow">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500 text-sm font-medium">Army Contracts</p>
<h3 class="text-2xl font-bold text-army mt-1">1,245</h3>
<p class="text-army font-medium mt-2">$4.2B</p>
</div>
<div class="p-3 rounded-lg bg-army bg-opacity-10">
<i data-feather="shield" class="w-6 h-6 text-army"></i>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 card-shadow">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500 text-sm font-medium">Navy Contracts</p>
<h3 class="text-2xl font-bold text-navy mt-1">986</h3>
<p class="text-navy font-medium mt-2">$6.8B</p>
</div>
<div class="p-3 rounded-lg bg-navy bg-opacity-10">
<i data-feather="anchor" class="w-6 h-6 text-navy"></i>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 card-shadow">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500 text-sm font-medium">Air Force Contracts</p>
<h3 class="text-2xl font-bold text-airforce mt-1">1,532</h3>
<p class="text-airforce font-medium mt-2">$8.1B</p>
</div>
<div class="p-3 rounded-lg bg-airforce bg-opacity-10">
<i data-feather="wind" class="w-6 h-6 text-airforce"></i>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 card-shadow">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500 text-sm font-medium">Coast Guard Contracts</p>
<h3 class="text-2xl font-bold text-coastguard mt-1">342</h3>
<p class="text-coastguard font-medium mt-2">$1.4B</p>
</div>
<div class="p-3 rounded-lg bg-coastguard bg-opacity-10">
<i data-feather="life-buoy" class="w-6 h-6 text-coastguard"></i>
</div>
</div>
</div>
</div>
<!-- Charts Section -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<!-- Contracts Count Chart -->
<div class="bg-white rounded-xl p-6 card-shadow">
<div class="flex justify-between items-center mb-6">
<h3 class="text-lg font-bold text-navy">Contracts by Branch</h3>
<button class="text-sm text-gray-500 hover:text-accent">
<i data-feather="more-horizontal" class="w-5 h-5"></i>
</button>
</div>
<div class="h-80">
<canvas id="contractsChart"></canvas>
</div>
</div>
<!-- Contract Amounts Chart -->
<div class="bg-white rounded-xl p-6 card-shadow">
<div class="flex justify-between items-center mb-6">
<h3 class="text-lg font-bold text-navy">Contract Amounts ($B)</h3>
<button class="text-sm text-gray-500 hover:text-accent">
<i data-feather="more-horizontal" class="w-5 h-5"></i>
</button>
</div>
<div class="h-80">
<canvas id="amountsChart"></canvas>
</div>
</div>
</div>
<!-- Data Table -->
<div class="bg-white rounded-xl overflow-hidden card-shadow">
<div class="p-6 border-b border-gray-100">
<h3 class="text-lg font-bold text-navy">Recent Contracts</h3>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Branch</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contract ID</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Vendor</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-4 w-4 rounded-full bg-navy"></div>
<div class="ml-2 text-sm font-medium text-gray-900">Navy</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">N0017823D2000</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Lockheed Martin</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$450M</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12/15/2023</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-4 w-4 rounded-full bg-airforce"></div>
<div class="ml-2 text-sm font-medium text-gray-900">Air Force</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">FA860423C0010</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Boeing</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$2.1B</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">11/22/2023</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-4 w-4 rounded-full bg-army"></div>
<div class="ml-2 text-sm font-medium text-gray-900">Army</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">W56HZV24C0012</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">General Dynamics</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$780M</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10/05/2023</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-4 w-4 rounded-full bg-coastguard"></div>
<div class="ml-2 text-sm font-medium text-gray-900">Coast Guard</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">70Z02324C00001</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Huntington Ingalls</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$320M</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">09/18/2023</td>
</tr>
</tbody>
</table>
</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">
<div class="md:flex md:items-center md:justify-between">
<div class="flex justify-center md:order-2 space-x-6">
<a href="#" class="text-gray-400 hover:text-gray-500">
<i data-feather="twitter" class="w-5 h-5"></i>
</a>
<a href="#" class="text-gray-400 hover:text-gray-500">
<i data-feather="linkedin" class="w-5 h-5"></i>
</a>
<a href="#" class="text-gray-400 hover:text-gray-500">
<i data-feather="facebook" class="w-5 h-5"></i>
</a>
</div>
<div class="mt-8 md:mt-0 md:order-1">
<p class="text-center text-sm text-gray-500">
&copy; 2023 Military Contract Vision. All rights reserved.
</p>
</div>
</div>
</div>
</footer>
<script>
// Initialize charts when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
feather.replace();
// Contracts Count Chart
const contractsCtx = document.getElementById('contractsChart').getContext('2d');
const contractsChart = new Chart(contractsCtx, {
type: 'bar',
data: {
labels: ['Army', 'Navy', 'Air Force', 'Coast Guard'],
datasets: [{
label: 'Number of Contracts',
data: [1245, 986, 1532, 342],
backgroundColor: [
'rgba(74, 119, 41, 0.7)', // Army
'rgba(26, 54, 93, 0.7)', // Navy
'rgba(0, 95, 134, 0.7)', // Air Force
'rgba(0, 115, 115, 0.7)' // Coast Guard
],
borderColor: [
'rgba(74, 119, 41, 1)',
'rgba(26, 54, 93, 1)',
'rgba(0, 95, 134, 1)',
'rgba(0, 115, 115, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Number of Contracts'
}
}
},
plugins: {
legend: {
display: false
}
}
}
});
// Contract Amounts Chart
const amountsCtx = document.getElementById('amountsChart').getContext('2d');
const amountsChart = new Chart(amountsCtx, {
type: 'doughnut',
data: {
labels: ['Army', 'Navy', 'Air Force', 'Coast Guard'],
datasets: [{
label: 'Amount in Billions',
data: [4.2, 6.8, 8.1, 1.4],
backgroundColor: [
'rgba(74, 119, 41, 0.7)', // Army
'rgba(26, 54, 93, 0.7)', // Navy
'rgba(0, 95, 134, 0.7)', // Air Force
'rgba(0, 115, 115, 0.7)' // Coast Guard
],
borderColor: [
'rgba(74, 119, 41, 1)',
'rgba(26, 54, 93, 1)',
'rgba(0, 95, 134, 1)',
'rgba(0, 115, 115, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right',
},
tooltip: {
callbacks: {
label: function(context) {
return `${context.label}: $${context.raw}B`;
}
}
}
}
}
});
});
</script>
</body>
</html>