Hugging Face's logo

Spaces:
cyberZag
/
timewizard
Running

App Files Community
cyberZag commited on
Commit
7717be6
·
verified ·
1 Parent(s): 970e080

i cant not click the menus like dashboard time vacation reports

Browse files
Files changed (4) hide show
  1. admin-dashboard.html +7 -7
  2. index.html +6 -6
  3. time-tracking.html +158 -0
  4. vacation.html +6 -6
admin-dashboard.html CHANGED
@@ -41,25 +41,25 @@
41
  </div>
42
 
43
  <nav class="mt-8 px-4 space-y-1">
44
- <a href="#" class="sidebar-link active flex items-center px-4 py-3 text-sm font-medium text-dark rounded-lg">
45
  <i data-feather="home" class="mr-3 text-primary"></i> Dashboard
46
  </a>
47
- <a href="#" 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="users" class="mr-3"></i> Employees
49
  </a>
50
- <a href="#" 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="clock" class="mr-3"></i> Time Tracking
52
  </a>
53
- <a href="#" 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="calendar" class="mr-3"></i> Vacation
55
  </a>
56
- <a href="#" 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="#" 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>
63
  </div>
64
 
65
  <!-- Main Content -->
 
41
  </div>
42
 
43
  <nav class="mt-8 px-4 space-y-1">
44
+ <a href="admin-dashboard.html" class="sidebar-link active flex items-center px-4 py-3 text-sm font-medium text-dark rounded-lg">
45
  <i data-feather="home" class="mr-3 text-primary"></i> Dashboard
46
  </a>
47
+ <a href="employees.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="users" class="mr-3"></i> Employees
49
  </a>
50
+ <a href="admin-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">
51
  <i data-feather="clock" class="mr-3"></i> Time Tracking
52
  </a>
53
+ <a href="admin-vacation.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="calendar" class="mr-3"></i> Vacation
55
  </a>
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>
63
  </div>
64
 
65
  <!-- Main Content -->
index.html CHANGED
@@ -133,22 +133,22 @@
133
  </div>
134
 
135
  <nav class="mt-8 px-4 space-y-1">
136
- <a href="#" class="sidebar-link active flex items-center px-4 py-3 text-sm font-medium text-dark rounded-lg">
137
  <i data-feather="home" class="mr-3 text-primary"></i> Dashboard
138
  </a>
139
- <a href="#" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium text-gray-600 hover:text-dark rounded-lg">
140
  <i data-feather="clock" class="mr-3"></i> Time Tracking
141
  </a>
142
- <a href="#" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium text-gray-600 hover:text-dark rounded-lg">
143
  <i data-feather="calendar" class="mr-3"></i> Vacation
144
  </a>
145
- <a href="#" 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="#" 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>
152
  </div>
153
 
154
  <!-- Main Content -->
 
133
  </div>
134
 
135
  <nav class="mt-8 px-4 space-y-1">
136
+ <a href="index.html" class="sidebar-link active flex items-center px-4 py-3 text-sm font-medium text-dark rounded-lg">
137
  <i data-feather="home" class="mr-3 text-primary"></i> Dashboard
138
  </a>
139
+ <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">
140
  <i data-feather="clock" class="mr-3"></i> Time Tracking
141
  </a>
142
+ <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">
143
  <i data-feather="calendar" class="mr-3"></i> Vacation
144
  </a>
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>
152
  </div>
153
 
154
  <!-- Main Content -->
time-tracking.html ADDED
@@ -0,0 +1,158 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 - Time Tracking</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
+ .time-card {
16
+ transition: all 0.3s ease;
17
+ }
18
+ .time-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 active flex items-center px-4 py-3 text-sm font-medium text-dark rounded-lg">
48
+ <i data-feather="clock" class="mr-3 text-primary"></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 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>
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">Time Tracking</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
+ <!-- Time Tracking Controls -->
77
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
78
+ <div class="bg-white rounded-xl shadow-md p-6 time-card">
79
+ <div class="flex items-center justify-between mb-4">
80
+ <h2 class="text-lg font-medium text-dark">Clock In/Out</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
+ <div class="flex justify-between mt-4">
86
+ <button class="flex-1 mr-2 bg-primary text-white py-3 px-4 rounded-lg text-sm font-medium hover:bg-primary-dark">
87
+ Clock In
88
+ </button>
89
+ <button class="flex-1 bg-gray-200 text-gray-700 py-3 px-4 rounded-lg text-sm font-medium hover:bg-gray-300">
90
+ Clock Out
91
+ </button>
92
+ </div>
93
+ </div>
94
+
95
+ <div class="bg-white rounded-xl shadow-md p-6 time-card">
96
+ <div class="flex items-center justify-between mb-4">
97
+ <h2 class="text-lg font-medium text-dark">Break Time</h2>
98
+ <div class="bg-secondary bg-opacity-10 p-2 rounded-full">
99
+ <i data-feather="coffee" class="text-secondary w-5 h-5"></i>
100
+ </div>
101
+ </div>
102
+ <div class="flex justify-between mt-4">
103
+ <button class="flex-1 mr-2 bg-secondary text-white py-3 px-4 rounded-lg text-sm font-medium hover:bg-secondary-dark">
104
+ Start Break
105
+ </button>
106
+ <button class="flex-1 bg-gray-200 text-gray-700 py-3 px-4 rounded-lg text-sm font-medium hover:bg-gray-300">
107
+ End Break
108
+ </button>
109
+ </div>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Time History -->
114
+ <div class="bg-white rounded-xl shadow-md p-6">
115
+ <div class="flex items-center justify-between mb-6">
116
+ <h2 class="text-lg font-medium text-dark">Time History</h2>
117
+ <div class="flex space-x-2">
118
+ <button class="text-sm text-primary font-medium hover:text-primary-dark">This Week</button>
119
+ <button class="text-sm text-gray-500 font-medium hover:text-dark">This Month</button>
120
+ </div>
121
+ </div>
122
+
123
+ <div class="overflow-x-auto">
124
+ <table class="min-w-full divide-y divide-gray-200">
125
+ <thead class="bg-gray-50">
126
+ <tr>
127
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
128
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Clock In</th>
129
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Clock Out</th>
130
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Hours</th>
131
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Break Time</th>
132
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
133
+ </tr>
134
+ </thead>
135
+ <tbody class="bg-white divide-y divide-gray-200">
136
+ <tr>
137
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-dark">Mon, Jun 12</td>
138
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">9:00 AM</td>
139
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5:30 PM</td>
140
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8.5</td>
141
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0:45</td>
142
+ <td class="px-6 py-4 whitespace-nowrap">
143
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Complete</span>
144
+ </td>
145
+ </tr>
146
+ <!-- More rows would go here -->
147
+ </tbody>
148
+ </table>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <script>
155
+ feather.replace();
156
+ </script>
157
+ </body>
158
+ </html>
vacation.html CHANGED
@@ -51,22 +51,22 @@
51
  </div>
52
 
53
  <nav class="mt-8 px-4 space-y-1">
54
- <a href="#" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium text-gray-600 hover:text-dark rounded-lg">
55
  <i data-feather="home" class="mr-3"></i> Dashboard
56
  </a>
57
- <a href="#" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium text-gray-600 hover:text-dark rounded-lg">
58
  <i data-feather="clock" class="mr-3"></i> Time Tracking
59
  </a>
60
- <a href="#" class="sidebar-link active flex items-center px-4 py-3 text-sm font-medium text-dark rounded-lg">
61
  <i data-feather="calendar" class="mr-3 text-primary"></i> Vacation
62
  </a>
63
- <a href="#" 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="#" 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>
70
  </div>
71
 
72
  <!-- Main Content -->
 
51
  </div>
52
 
53
  <nav class="mt-8 px-4 space-y-1">
54
+ <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">
55
  <i data-feather="home" class="mr-3"></i> Dashboard
56
  </a>
57
+ <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">
58
  <i data-feather="clock" class="mr-3"></i> Time Tracking
59
  </a>
60
+ <a href="vacation.html" class="sidebar-link active flex items-center px-4 py-3 text-sm font-medium text-dark rounded-lg">
61
  <i data-feather="calendar" class="mr-3 text-primary"></i> Vacation
62
  </a>
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>
70
  </div>
71
 
72
  <!-- Main Content -->