Hugging Face's logo

Spaces:
cyberZag
/
timewizard
Running

App Files Community
cyberZag commited on
Commit
52ce0b0
·
verified ·
1 Parent(s): 5fde122

add add plese roports page too

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