-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathtemp_old.html
More file actions
212 lines (202 loc) · 12.9 KB
/
temp_old.html
File metadata and controls
212 lines (202 loc) · 12.9 KB
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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leave Management - RevWorkForce</title>
<link rel="stylesheet" href="../../css/style.css">
<style>
.grid-2 {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.5rem;
}
@media (max-width: 992px) {
.grid-2 {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="app-container">
<app-sidebar></app-sidebar>
<main class="main-content">
<app-navbar page-title="Leave Management"></app-navbar>
<div class="page-wrapper">
<div class="card">
<div class="tabs">
<button class="tab-btn active" data-target="apply-leave">Apply / History</button>
<button class="tab-btn" data-target="leave-balances">My Balances</button>
<button class="tab-btn" data-target="holiday-calendar">Holiday Calendar</button>
</div>
<!-- Apply Leave & History -->
<div id="apply-leave" class="tab-content active">
<div class="grid-2">
<div>
<h3 class="mb-3">Apply for Leave</h3>
<form
onsubmit="event.preventDefault(); alert('Leave Application Submitted Successfully! Status: PENDING');"
style="background: #f8fafc; padding: 1.5rem; border: 1px solid var(--border-color); border-radius: 8px;">
<div class="form-group">
<label class="form-label">Leave Type</label>
<select class="form-control" required>
<option value="">Select leave type...</option>
<option>Sick Leave</option>
<option>Casual Leave</option>
<option>Earned Leave</option>
</select>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
<div class="form-group">
<label class="form-label">Start Date</label>
<input type="date" class="form-control" required>
</div>
<div class="form-group">
<label class="form-label">End Date</label>
<input type="date" class="form-control" required>
</div>
</div>
<div class="form-group">
<label class="form-label">Reason</label>
<textarea class="form-control" rows="3"
placeholder="Briefly explain the reason for your leave..."
required></textarea>
</div>
<button type="submit" class="btn btn-primary"><i class="fas fa-paper-plane"></i>
Submit Application</button>
</form>
</div>
<div>
<h3 class="mb-3">Recent Requests</h3>
<div style="display: flex; flex-direction: column; gap: 1rem;">
<div
style="border: 1px solid var(--border-color); border-radius: 8px; padding: 1rem;">
<div class="flex-space-between mb-1">
<span style="font-weight: 500;">Sick Leave (2 Days)</span>
<span class="badge badge-pending">Pending</span>
</div>
<div class="flex-space-between mt-2">
<p class="text-muted mb-0" style="font-size: 0.85rem;">Mar 2, 2026 - Mar 3,
2026</p>
<button class="btn btn-danger btn-sm"
onclick="alert('Are you sure you want to cancel this request?')"><i
class="fas fa-times"></i> Cancel Request</button>
</div>
</div>
<div
style="border: 1px solid var(--border-color); border-radius: 8px; padding: 1rem;">
<div class="flex-space-between mb-1">
<span style="font-weight: 500;">Casual Leave (1 Day)</span>
<span class="badge badge-rejected">Rejected</span>
</div>
<p class="text-muted mb-0" style="font-size: 0.85rem;">Feb 14, 2026</p>
<p class="text-danger mt-1 mb-0" style="font-size: 0.8rem;"><i
class="fas fa-info-circle"></i> Reason: Project deadline</p>
</div>
</div>
<button class="btn btn-secondary mt-3 w-100" style="width: 100%;">View Full
History</button>
</div>
</div>
</div>
<!-- My Balances Tab -->
<div id="leave-balances" class="tab-content">
<div
style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem;">
<!-- Balance Card -->
<div
style="border: 1px solid var(--border-color); border-radius: 8px; padding: 1.5rem; text-align: center; background: #fff;">
<h4 class="text-muted mb-3" style="font-weight: 500;">Sick Leave</h4>
<div
style="position: relative; width: 100px; height: 100px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--primary) calc(58%), #e2e8f0 0);">
<div
style="position: absolute; width: 80px; height: 80px; background: white; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
<span
style="font-size: 1.5rem; font-weight: bold; color: var(--text-dark); line-height: 1;">7</span>
<span style="font-size: 0.7rem; color: var(--text-muted);">Available</span>
</div>
</div>
<p class="mt-3 text-muted" style="font-size: 0.85rem;">Total Quota: 12 days</p>
</div>
<!-- Balance Card -->
<div
style="border: 1px solid var(--border-color); border-radius: 8px; padding: 1.5rem; text-align: center; background: #fff;">
<h4 class="text-muted mb-3" style="font-weight: 500;">Casual Leave</h4>
<div
style="position: relative; width: 100px; height: 100px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--primary) calc(75%), #e2e8f0 0);">
<div
style="position: absolute; width: 80px; height: 80px; background: white; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
<span
style="font-size: 1.5rem; font-weight: bold; color: var(--text-dark); line-height: 1;">11.5</span>
<span style="font-size: 0.7rem; color: var(--text-muted);">Available</span>
</div>
</div>
<p class="mt-3 text-muted" style="font-size: 0.85rem;">Total Quota: 15 days</p>
</div>
<!-- Balance Card -->
<div
style="border: 1px solid var(--border-color); border-radius: 8px; padding: 1.5rem; text-align: center; background: #fff;">
<h4 class="text-muted mb-3" style="font-weight: 500;">Earned Leave</h4>
<div
style="position: relative; width: 100px; height: 100px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--primary) calc(90%), #e2e8f0 0);">
<div
style="position: absolute; width: 80px; height: 80px; background: white; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
<span
style="font-size: 1.5rem; font-weight: bold; color: var(--text-dark); line-height: 1;">18</span>
<span style="font-size: 0.7rem; color: var(--text-muted);">Available</span>
</div>
</div>
<p class="mt-3 text-muted" style="font-size: 0.85rem;">Total Quota: 20 days</p>
</div>
</div>
</div>
<!-- Holiday Calendar Tab -->
<div id="holiday-calendar" class="tab-content">
<div class="flex-space-between mb-3">
<h3>Company Holidays - 2026</h3>
<button class="btn btn-secondary"><i class="fas fa-file-pdf"></i> Download PDF</button>
</div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Day</th>
<th>Holiday Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>January 1, 2026</td>
<td>Thursday</td>
<td>New Year's Day</td>
</tr>
<tr>
<td>May 1, 2026</td>
<td>Friday</td>
<td>Labor Day</td>
</tr>
<tr>
<td>July 4, 2026</td>
<td>Saturday</td>
<td>Independence Day</td>
</tr>
<tr>
<td>December 25, 2026</td>
<td>Friday</td>
<td>Christmas Day</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- Load Scripts -->
<script src="../../js/components.js"></script>
<script src="../../js/app.js"></script>
</body>
</html>