Skip to content
This repository was archived by the owner on Sep 8, 2025. It is now read-only.

Commit 00e5258

Browse files
Arcka1nArcka1n
committed
atte
1 parent d2c0cda commit 00e5258

10 files changed

Lines changed: 777 additions & 10 deletions

File tree

‎client/.env‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
#CLIENT_URL=http://localhost:3000
2-
#VITE_APP_BASE_URL= http://localhost:5053
1+
CLIENT_URL=http://localhost:3000
2+
VITE_APP_BASE_URL= http://localhost:5053
33

4-
VITE_APP_BASE_URL=https://backend-admin.axleshift.com
5-
CLIENT_URL=https://backend-admin.axleshift.com
4+
#VITE_APP_BASE_URL=https://backend-admin.axleshift.com
5+
#CLIENT_URL=https://backend-admin.axleshift.com
66

‎client/src/_nav.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -336,6 +336,12 @@ const _nav = () => {
336336
name:'Employee Leaves',
337337
icon: <FontAwesomeIcon icon={faSquarePersonConfined} style={{ marginRight: '8px' }} />,
338338
to:'/hr3leaverequest'
339+
},
340+
{
341+
component: CNavItem,
342+
name:'Employee Attendance',
343+
icon: <FontAwesomeIcon icon={faCalendarDays} style={{ marginRight: '8px' }} />,
344+
to:'/attendance'
339345
}
340346

341347
);

‎client/src/routes.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const Worker = React.lazy(() => import('./views/pages/integrate/hr/works'));
2323
const Jobpost = React.lazy(() => import('./views/pages/integrate/hr/jobposting'));
2424
const Payroll = React.lazy(() => import('./views/pages/integrate/hr/payroll'));
2525
const LeaveRequest = React.lazy(() => import('./views/pages/integrate/hr/h3leaverequest'));
26-
26+
const Attendance = React.lazy(() => import('./views/pages/integrate/hr/attendance'));
2727

2828
const Shipment = React.lazy(() => import("./views/pages/integrate/core/shipment"));
2929
const ShipmentTable = React.lazy(() => import("./views/pages/integrate/core/scene/shipmentTable"));
@@ -105,6 +105,7 @@ const routes = [
105105
{ path: '/jobposting', name: 'Job Posting', element: <ProtectedRoute><Jobpost /></ProtectedRoute> },
106106
{ path: '/payroll', name: 'Payroll', element: <ProtectedRoute><Payroll /></ProtectedRoute> },
107107
{ path: '/hr3leaverequest', name: 'Leave Request', element: <ProtectedRoute><LeaveRequest /></ProtectedRoute> },
108+
{ path: '/attendance', name: 'Attendance', element: <ProtectedRoute><Attendance/></ProtectedRoute> },
108109

109110
{ path: '/profile', name: 'Profile Page', element: <ProtectedRoute><Profile /></ProtectedRoute> },
110111
{ path: '/freight/land', name: 'Freight Land', element: <ProtectedRoute><Land /></ProtectedRoute> },

‎client/src/scss/attendance.scss‎

Lines changed: 326 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,326 @@
1+
/* AttendanceDashboard.css */
2+
.attendance-dashboard {
3+
max-width: 1200px;
4+
margin: 0 auto;
5+
padding: 20px;
6+
font-family: 'Arial', sans-serif;
7+
}
8+
9+
.dashboard-header {
10+
text-align: center;
11+
margin-bottom: 30px;
12+
padding-bottom: 20px;
13+
border-bottom: 2px solid #f0f0f0;
14+
}
15+
16+
.dashboard-header h1 {
17+
color: #2c3e50;
18+
margin: 0;
19+
font-size: 28px;
20+
}
21+
22+
.filter-section {
23+
display: flex;
24+
flex-wrap: wrap;
25+
gap: 20px;
26+
margin-bottom: 30px;
27+
padding: 20px;
28+
background-color: #f9f9f9;
29+
border-radius: 8px;
30+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
31+
}
32+
33+
.date-filter, .employee-filter {
34+
flex: 1;
35+
min-width: 300px;
36+
}
37+
38+
.date-filter h3, .employee-filter h3 {
39+
color: #34495e;
40+
font-size: 18px;
41+
margin-top: 0;
42+
margin-bottom: 15px;
43+
}
44+
45+
.date-inputs, .employee-inputs {
46+
display: flex;
47+
flex-wrap: wrap;
48+
gap: 10px;
49+
align-items: flex-end;
50+
}
51+
52+
.input-group {
53+
display: flex;
54+
flex-direction: column;
55+
flex: 1;
56+
min-width: 120px;
57+
}
58+
59+
.input-group label {
60+
margin-bottom: 5px;
61+
font-size: 14px;
62+
color: #7f8c8d;
63+
}
64+
65+
.input-group input {
66+
padding: 8px 12px;
67+
border: 1px solid #ddd;
68+
border-radius: 4px;
69+
font-size: 14px;
70+
}
71+
72+
.filter-button, .reset-button {
73+
padding: 8px 16px;
74+
background-color: #3498db;
75+
color: white;
76+
border: none;
77+
border-radius: 4px;
78+
cursor: pointer;
79+
font-size: 14px;
80+
transition: background-color 0.3s;
81+
}
82+
83+
.filter-button:hover, .reset-button:hover {
84+
background-color: #2980b9;
85+
}
86+
87+
.filter-button:disabled {
88+
background-color: #bdc3c7;
89+
cursor: not-allowed;
90+
}
91+
92+
.reset-button {
93+
background-color: #e74c3c;
94+
margin-left: auto;
95+
align-self: flex-end;
96+
}
97+
98+
.reset-button:hover {
99+
background-color: #c0392b;
100+
}
101+
102+
.error-message {
103+
padding: 12px;
104+
background-color: #fadbd8;
105+
color: #c0392b;
106+
border-radius: 4px;
107+
margin-bottom: 20px;
108+
font-size: 14px;
109+
}
110+
111+
.attendance-data {
112+
margin-top: 20px;
113+
}
114+
115+
.attendance-data h2 {
116+
color: #2c3e50;
117+
font-size: 22px;
118+
margin-bottom: 15px;
119+
}
120+
121+
.loading, .no-data {
122+
text-align: center;
123+
padding: 40px;
124+
color: #7f8c8d;
125+
font-size: 16px;
126+
background-color: #f9f9f9;
127+
border-radius: 8px;
128+
}
129+
130+
.table-container {
131+
overflow-x: auto;
132+
background-color: white;
133+
border-radius: 8px;
134+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
135+
}
136+
137+
.attendance-table {
138+
width: 100%;
139+
border-collapse: collapse;
140+
font-size: 14px;
141+
}
142+
143+
.attendance-table th {
144+
background-color: #34495e;
145+
color: white;
146+
text-align: left;
147+
padding: 12px 15px;
148+
font-weight: 600;
149+
}
150+
151+
.attendance-table tr {
152+
border-bottom: 1px solid #ecf0f1;
153+
}
154+
155+
.attendance-table tr:last-child {
156+
border-bottom: none;
157+
}
158+
159+
.attendance-table td {
160+
padding: 12px 15px;
161+
color: #2c3e50;
162+
}
163+
164+
.attendance-table tr:nth-child(even) {
165+
background-color: #f9f9f9;
166+
}
167+
168+
.attendance-table tr:hover {
169+
background-color: #ecf0f1;
170+
}
171+
172+
.absent-row {
173+
background-color: #ffebee !important;
174+
}
175+
176+
.check-in {
177+
color: #27ae60;
178+
}
179+
180+
.check-out {
181+
color: #e67e22;
182+
}
183+
184+
.no-check {
185+
color: #95a5a6;
186+
}
187+
188+
.status-present {
189+
color: #27ae60;
190+
font-weight: 600;
191+
}
192+
193+
.status-absent {
194+
color: #e74c3c;
195+
font-weight: 600;
196+
}
197+
198+
.status-late {
199+
color: #f39c12;
200+
font-weight: 600;
201+
}
202+
203+
.status-halfday {
204+
color: #9b59b6;
205+
font-weight: 600;
206+
}
207+
208+
.status-unknown {
209+
color: #95a5a6;
210+
}
211+
212+
/* Pagination styles */
213+
.pagination-container {
214+
display: flex;
215+
flex-direction: column;
216+
align-items: center;
217+
margin-top: 20px;
218+
padding: 15px;
219+
background-color: white;
220+
border-radius: 8px;
221+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
222+
}
223+
224+
.pagination-info {
225+
margin-bottom: 15px;
226+
color: #7f8c8d;
227+
font-size: 14px;
228+
}
229+
230+
.pagination-controls {
231+
display: flex;
232+
align-items: center;
233+
gap: 10px;
234+
}
235+
236+
.pagination-pages {
237+
display: flex;
238+
gap: 5px;
239+
}
240+
241+
.pagination-button {
242+
padding: 8px 16px;
243+
background-color: #3498db;
244+
color: white;
245+
border: none;
246+
border-radius: 4px;
247+
cursor: pointer;
248+
font-size: 14px;
249+
transition: background-color 0.3s;
250+
}
251+
252+
.pagination-button:hover:not(:disabled) {
253+
background-color: #2980b9;
254+
}
255+
256+
.pagination-button:disabled {
257+
background-color: #bdc3c7;
258+
cursor: not-allowed;
259+
}
260+
261+
.pagination-number {
262+
width: 36px;
263+
height: 36px;
264+
display: flex;
265+
align-items: center;
266+
justify-content: center;
267+
background-color: #f5f5f5;
268+
border: 1px solid #ddd;
269+
border-radius: 4px;
270+
cursor: pointer;
271+
font-size: 14px;
272+
transition: all 0.3s;
273+
}
274+
275+
.pagination-number:hover {
276+
background-color: #e0e0e0;
277+
}
278+
279+
.pagination-number.active {
280+
background-color: #3498db;
281+
color: white;
282+
border-color: #3498db;
283+
}
284+
285+
@media (max-width: 768px) {
286+
.filter-section {
287+
flex-direction: column;
288+
}
289+
290+
.date-filter, .employee-filter {
291+
width: 100%;
292+
}
293+
294+
.reset-button {
295+
margin-left: 0;
296+
width: 100%;
297+
}
298+
299+
.attendance-table th, .attendance-table td {
300+
padding: 8px 10px;
301+
font-size: 13px;
302+
}
303+
304+
.pagination-container {
305+
padding: 10px;
306+
}
307+
308+
.pagination-controls {
309+
flex-wrap: wrap;
310+
justify-content: center;
311+
}
312+
313+
.pagination-pages {
314+
display: flex;
315+
flex-wrap: wrap;
316+
justify-content: center;
317+
gap: 5px;
318+
margin: 10px 0;
319+
}
320+
321+
.pagination-number {
322+
width: 30px;
323+
height: 30px;
324+
font-size: 12px;
325+
}
326+
}

0 commit comments

Comments
 (0)