Spaces:
Running
Running
File size: 10,889 Bytes
52ce0b0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TimeWizard - Reports</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
.dashboard-bg {
background-color: #F8FAFC;
}
.report-card {
transition: all 0.3s ease;
}
.report-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.sidebar-link.active {
border-left: 4px solid #4F46E5;
background-color: rgba(79, 70, 229, 0.1);
}
</style>
</head>
<body class="font-sans antialiased">
<!-- Employee Dashboard -->
<div class="min-h-screen flex">
<!-- Sidebar -->
<div class="w-64 bg-white shadow-md">
<div class="p-6 flex items-center space-x-3">
<div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center">
<i data-feather="user" class="text-white w-5 h-5"></i>
</div>
<div>
<p class="font-medium text-dark">John Doe</p>
<p class="text-xs text-gray-500">Employee</p>
</div>
</div>
<nav class="mt-8 px-4 space-y-1">
<a href="index.html" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium text-gray-600 hover:text-dark rounded-lg">
<i data-feather="home" class="mr-3"></i> Dashboard
</a>
<a href="time-tracking.html" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium text-gray-600 hover:text-dark rounded-lg">
<i data-feather="clock" class="mr-3"></i> Time Tracking
</a>
<a href="vacation.html" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium text-gray-600 hover:text-dark rounded-lg">
<i data-feather="calendar" class="mr-3"></i> Vacation
</a>
<a href="reports.html" class="sidebar-link active flex items-center px-4 py-3 text-sm font-medium text-dark rounded-lg">
<i data-feather="file-text" class="mr-3 text-primary"></i> Reports
</a>
<a href="settings.html" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium text-gray-600 hover:text-dark rounded-lg">
<i data-feather="settings" class="mr-3"></i> Settings
</a>
</nav>
</div>
<!-- Main Content -->
<div class="flex-1 dashboard-bg p-8">
<div class="flex justify-between items-center mb-8">
<h1 class="text-2xl font-bold text-dark">Reports</h1>
<div class="flex items-center space-x-4">
<button class="p-2 rounded-full bg-white shadow hover:bg-gray-50">
<i data-feather="bell"></i>
</button>
<button class="p-2 rounded-full bg-white shadow hover:bg-gray-50">
<i data-feather="help-circle"></i>
</button>
</div>
</div>
<!-- Report Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-white rounded-xl shadow-md p-6 report-card">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-medium text-dark">Time Summary</h2>
<div class="bg-primary bg-opacity-10 p-2 rounded-full">
<i data-feather="clock" class="text-primary w-5 h-5"></i>
</div>
</div>
<p class="text-sm text-gray-500 mb-4">View your weekly and monthly time tracking summaries</p>
<button class="w-full mt-4 bg-primary text-white py-2 px-4 rounded-lg text-sm font-medium hover:bg-primary-dark">
Generate Report
</button>
</div>
<div class="bg-white rounded-xl shadow-md p-6 report-card">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-medium text-dark">Vacation Summary</h2>
<div class="bg-secondary bg-opacity-10 p-2 rounded-full">
<i data-feather="calendar" class="text-secondary w-5 h-5"></i>
</div>
</div>
<p class="text-sm text-gray-500 mb-4">View your vacation days used and remaining</p>
<button class="w-full mt-4 bg-secondary text-white py-2 px-4 rounded-lg text-sm font-medium hover:bg-secondary-dark">
Generate Report
</button>
</div>
<div class="bg-white rounded-xl shadow-md p-6 report-card">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-medium text-dark">Activity Log</h2>
<div class="bg-yellow-400 bg-opacity-10 p-2 rounded-full">
<i data-feather="activity" class="text-yellow-400 w-5 h-5"></i>
</div>
</div>
<p class="text-sm text-gray-500 mb-4">View your recent activity and time corrections</p>
<button class="w-full mt-4 bg-yellow-400 text-white py-2 px-4 rounded-lg text-sm font-medium hover:bg-yellow-500">
Generate Report
</button>
</div>
</div>
<!-- Recent Reports -->
<div class="bg-white rounded-xl shadow-md p-6">
<div class="flex items-center justify-between mb-6">
<h2 class="text-lg font-medium text-dark">Recent Reports</h2>
<button class="text-sm text-primary font-medium hover:text-primary-dark">View All</button>
</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">Report Name</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date Range</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Generated On</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-dark">Weekly Time Summary</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Time Tracking</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 12 - Jun 18</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 19, 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-primary hover:text-primary-dark mr-3">View</button>
<button class="text-gray-600 hover:text-dark">Download</button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-dark">Monthly Vacation Summary</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Vacation</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jan 1 - Jun 30</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 15, 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-primary hover:text-primary-dark mr-3">View</button>
<button class="text-gray-600 hover:text-dark">Download</button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-dark">Activity Log</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Activity</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 1 - Jun 15</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 16, 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-primary hover:text-primary-dark mr-3">View</button>
<button class="text-gray-600 hover:text-dark">Download</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
feather.replace();
// Simple report generation demo
document.querySelectorAll('button.bg-primary, button.bg-secondary, button.bg-yellow-400').forEach(button => {
button.addEventListener('click', function(e) {
e.preventDefault();
const reportType = this.parentElement.querySelector('h2').textContent;
alert(`Generating ${reportType} report...`);
});
});
</script>
</body>
</html> |