Hugging Face's logo

Spaces:
BrandonMoodaley
/
ppp
Running

App Files Community
ppp / index.html
BrandonMoodaley's picture
BrandonMoodaley
create an application that uses an excel to create reports, this is an example of the Excel :
e4374bb verified
Raw History Blame Contribute Delete
20 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Incident Visualization Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<style>
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
</style>
</head>
<body class="bg-gray-50">
<div class="min-h-screen">
<!-- Navigation -->
<nav class="bg-white shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<i data-feather="activity" class="text-blue-500 mr-2"></i>
<span class="text-xl font-semibold text-gray-900">VWSA Incident Dashboard</span>
</div>
<div class="flex items-center space-x-4">
<button class="px-3 py-1 rounded-md bg-blue-50 text-blue-600 text-sm font-medium">
<i data-feather="refresh-cw" class="w-4 h-4 inline mr-1"></i> Refresh
</button>
<button class="px-3 py-1 rounded-md bg-gray-100 text-gray-700 text-sm font-medium">
<i data-feather="download" class="w-4 h-4 inline mr-1"></i> Export
</button>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Summary Cards -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<div class="bg-white rounded-lg shadow p-6 card-hover transition-all duration-300" data-aos="fade-up">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">Total Incidents</p>
<p class="text-3xl font-semibold text-gray-900">1,234</p>
</div>
<div class="p-3 rounded-full bg-blue-50">
<i data-feather="alert-circle" class="text-blue-500"></i>
</div>
</div>
<div class="mt-4">
<div class="flex items-center text-sm text-green-600">
<i data-feather="trending-up" class="w-4 h-4 mr-1"></i>
<span>12% from last month</span>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6 card-hover transition-all duration-300" data-aos="fade-up" data-aos-delay="100">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">Open Incidents</p>
<p class="text-3xl font-semibold text-gray-900">156</p>
</div>
<div class="p-3 rounded-full bg-yellow-50">
<i data-feather="alert-triangle" class="text-yellow-500"></i>
</div>
</div>
<div class="mt-4">
<div class="flex items-center text-sm text-red-600">
<i data-feather="trending-down" class="w-4 h-4 mr-1"></i>
<span>8% from last month</span>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6 card-hover transition-all duration-300" data-aos="fade-up" data-aos-delay="200">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">Avg Resolution Time</p>
<p class="text-3xl font-semibold text-gray-900">18.5d</p>
</div>
<div class="p-3 rounded-full bg-purple-50">
<i data-feather="clock" class="text-purple-500"></i>
</div>
64">
<canvas id="assignmentGroupsChart"></canvas>
</div>
</div>
<!-- Resolution Time -->
<div class="bg-white p-6 rounded-lg shadow col-span-2" data-aos="fade-up" data-aos-delay="100">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-medium text-gray-900">Resolution Time Analysis</h2>
<div class="flex space-x-2">
<button class="px-3 py-1 text-xs rounded-md bg-blue-50 text-blue-600">By Group</button>
<button class="px-3 py-1 text-xs rounded-md bg-gray-100 text-gray-700">By Priority</button>
</div>
</div>
<div class="h-64">
<canvas id="resolutionTimeChart"></canvas>
</div>
</div>
</div>
<!-- Recent Incidents Table -->
<div class="bg-white shadow rounded-lg overflow-hidden" data-aos="fade-up">
<div class="px-6 py-4 border-b border-gray-200">
<div class="flex items-center justify-between">
<h2 class="text-lg font-medium text-gray-900">Recent Incidents</h2>
<button class="text-sm text-blue-600 hover:text-blue-800">View All</button>
</div>
</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">ID</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Group</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Days Open</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Timing</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 text-sm font-medium text-blue-600">IR22893551</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">UTH-OLA-Online Leave Application</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">HR Support</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Closed</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">121</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">> 60 days</span>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">IR24498804</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">UTH Divisional Development Plan</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">HR Support</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Closed</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">129</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">> 60 days</span>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">IR24598724</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">UTH-Frozen Idea</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">HR Support</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Closed</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">72</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">> 60 days</span>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">IR25143913</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">UTH - Notification - Allowance</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">HR Support</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Closed</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">36</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">31-60 days</span>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">IR25219677</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Appropriation Request Failing</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">FINANCE Support</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Closed</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">54</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">31-60 days</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="px-6 py-4 border-t border-gray-200">
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Showing <span class="font-medium">5</span> of <span class="font-medium">1,234</span> incidents</p>
<div class="flex space-x-2">
<button class="px-3 py-1 rounded-md bg-gray-100 text-gray-700 text-sm">Previous</button>
<button class="px-3 py-1 rounded-md bg-blue-50 text-blue-600 text-sm">Next</button>
</div>
</div>
</div>
</div>
</main>
</div>
<script>
// Initialize AOS
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
// Initialize Feather Icons
feather.replace();
// Chart Data and Configuration
document.addEventListener('DOMContentLoaded', function() {
// Incident Trends Chart
const trendsCtx = document.getElementById('incidentTrendsChart').getContext('2d');
const trendsChart = new Chart(trendsCtx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [
{
label: 'Total Incidents',
data: [120, 190, 170, 210, 230, 200],
borderColor: '#3B82F6',
backgroundColor: 'rgba(59, 130, 246, 0.05)',
borderWidth: 2,
tension: 0.3,
fill: true
},
{
label: 'Open Incidents',
data: [40, 60, 55, 80, 70, 50],
borderColor: '#F59E0B',
backgroundColor: 'rgba(245, 158, 11, 0.05)',
borderWidth: 2,
tension: 0.3,
fill: true
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
},
tooltip: {
mode: 'index',
intersect: false,
}
},
scales: {
y: {
beginAtZero: true
}
}
}
});
// Status Distribution Chart
const statusCtx = document.getElementById('statusDistributionChart').getContext('2d');
const statusChart = new Chart(statusCtx, {
type: 'doughnut',
data: {
labels: ['Closed', 'Open', 'In Progress', 'Pending'],
datasets: [{
data: [65, 15, 12, 8],
backgroundColor: [
'#10B981',
'#EF4444',
'#F59E0B',
'#6366F1'
],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
}
},
cutout: '70%'
}
});
// Assignment Groups Chart
const groupsCtx = document.getElementById('assignmentGroupsChart').getContext('2d');
const groupsChart = new Chart(groupsCtx, {
type: 'bar',
data: {
labels: ['HR Support', 'FINANCE', 'SALES', 'QA', 'IT'],
datasets: [{
label: 'Incidents',
data: [320, 180, 150, 90, 70],
backgroundColor: [
'#3B82F6',
'#10B981',
'#F59E0B',
'#6366F1',
'#EC4899'
],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true
}
}
}
});
// Resolution Time Chart
const resolutionCtx = document.getElementById('resolutionTimeChart').getContext('2d');
const resolutionChart = new Chart(resolutionCtx, {
type: 'bar',
data: {
labels: ['HR Support', 'FINANCE', 'SALES', 'QA', 'IT'],
datasets: [
{
label: 'Avg Days to Resolve',
data: [45, 32, 28, 22, 18],
backgroundColor: '#3B82F6',
borderWidth: 0
},
{
label: 'Median Days',
data: [38, 25, 20, 15, 12],
backgroundColor: '#10B981',
borderWidth: 0
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
}
},
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Days'
}
}
}
}
});
});
</script>
</body>
</html>