deploy: hr-portal-designs
This commit is contained in:
TenX PM
@@ -0,0 +1,208 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HR Portal — Sign In</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #0F172A;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
body::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -200px; left: -200px;
|
||||
width: 600px; height: 600px;
|
||||
background: radial-gradient(circle, rgba(79,70,229,0.15) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
body::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -200px; right: -200px;
|
||||
width: 600px; height: 600px;
|
||||
background: radial-gradient(circle, rgba(79,70,229,0.10) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.login-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 16px;
|
||||
padding: 48px 40px;
|
||||
width: 440px;
|
||||
box-shadow: 0 25px 60px rgba(0,0,0,0.4);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.logo-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.logo-icon {
|
||||
width: 56px; height: 56px;
|
||||
background: #4F46E5;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.logo-icon svg { color: #fff; }
|
||||
.logo-name {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #0F172A;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
.logo-sub {
|
||||
font-size: 12px;
|
||||
color: #64748B;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.divider {
|
||||
border: none;
|
||||
border-top: 1px solid #E2E8F0;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #0F172A;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
color: #64748B;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 11px 14px;
|
||||
border: 1.5px solid #E2E8F0;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #0F172A;
|
||||
background: #F8FAFC;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
input:focus {
|
||||
border-color: #4F46E5;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
|
||||
}
|
||||
input::placeholder { color: #94A3B8; }
|
||||
.forgot-row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: -12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.forgot-link {
|
||||
font-size: 13px;
|
||||
color: #4F46E5;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
.forgot-link:hover { text-decoration: underline; }
|
||||
.btn-signin {
|
||||
width: 100%;
|
||||
padding: 13px;
|
||||
background: #4F46E5;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
font-family: 'Inter', sans-serif;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
.btn-signin:hover { background: #4338CA; }
|
||||
.help-text {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #94A3B8;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.help-text a { color: #4F46E5; text-decoration: none; }
|
||||
.badge-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.badge-bottom span {
|
||||
font-size: 11px;
|
||||
color: #94A3B8;
|
||||
}
|
||||
.lock-icon {
|
||||
width: 12px; height: 12px;
|
||||
fill: #94A3B8;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-card">
|
||||
<div class="logo-wrapper">
|
||||
<div class="logo-icon">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="logo-name">TechCorp HR Portal</div>
|
||||
<div class="logo-sub">Human Resource Management System</div>
|
||||
</div>
|
||||
<hr class="divider" />
|
||||
<h2>Welcome back</h2>
|
||||
<p class="subtitle">Sign in to access your HR portal</p>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="empid">Employee ID</label>
|
||||
<input type="text" id="empid" placeholder="e.g. EMP-00247" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" placeholder="Enter your password" />
|
||||
</div>
|
||||
<div class="forgot-row">
|
||||
<a href="#" class="forgot-link">Forgot password?</a>
|
||||
</div>
|
||||
<button class="btn-signin">Sign In</button>
|
||||
|
||||
<div class="badge-bottom">
|
||||
<svg class="lock-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 1C8.676 1 6 3.676 6 7v1H4a1 1 0 00-1 1v13a1 1 0 001 1h16a1 1 0 001-1V9a1 1 0 00-1-1h-2V7c0-3.324-2.676-6-6-6zm0 2c2.276 0 4 1.724 4 4v1H8V7c0-2.276 1.724-4 4-4zm0 9a2 2 0 110 4 2 2 0 010-4z"/>
|
||||
</svg>
|
||||
<span>Secured with 256-bit SSL encryption</span>
|
||||
</div>
|
||||
<p class="help-text">Need help? <a href="#">Contact IT Support</a></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,409 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HR Portal — Employee Dashboard</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; background: #F8FAFC; color: #0F172A; display: flex; min-height: 100vh; }
|
||||
|
||||
/* SIDEBAR */
|
||||
.sidebar {
|
||||
width: 240px; min-height: 100vh; background: #1E293B;
|
||||
display: flex; flex-direction: column; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0;
|
||||
}
|
||||
.sidebar-logo {
|
||||
padding: 20px 20px 16px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
}
|
||||
.sidebar-logo-icon {
|
||||
width: 36px; height: 36px; background: #4F46E5; border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||
}
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.sidebar-nav { padding: 16px 0; flex: 1; }
|
||||
.nav-section-label {
|
||||
font-size: 10px; font-weight: 600; color: #475569; text-transform: uppercase;
|
||||
letter-spacing: 0.8px; padding: 12px 20px 6px;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 10px 20px; font-size: 14px; font-weight: 500; color: #94A3B8;
|
||||
cursor: pointer; border-left: 3px solid transparent; transition: all 0.15s;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.nav-item.active {
|
||||
color: #818CF8; background: rgba(79,70,229,0.15);
|
||||
border-left-color: #4F46E5; font-weight: 600;
|
||||
}
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.sidebar-footer {
|
||||
padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
.sidebar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm {
|
||||
width: 34px; height: 34px; border-radius: 50%; background: #4F46E5;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0;
|
||||
}
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #E2E8F0; }
|
||||
.sidebar-user-role { font-size: 11px; color: #64748B; }
|
||||
|
||||
/* MAIN */
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
|
||||
/* TOP BAR */
|
||||
.topbar {
|
||||
height: 64px; background: #fff; border-bottom: 1px solid #E2E8F0;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 0 28px; position: sticky; top: 0; z-index: 10;
|
||||
}
|
||||
.topbar-greeting { font-size: 16px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-greeting span { font-weight: 400; color: #64748B; font-size: 14px; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.icon-btn {
|
||||
width: 38px; height: 38px; border-radius: 8px; background: #F1F5F9;
|
||||
border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot {
|
||||
position: absolute; top: 8px; right: 8px;
|
||||
width: 8px; height: 8px; background: #EF4444; border-radius: 50%;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
.topbar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar {
|
||||
width: 38px; height: 38px; border-radius: 50%; background: #4F46E5;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0;
|
||||
}
|
||||
.topbar-user-info { text-align: right; }
|
||||
.topbar-user-name { font-size: 14px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-user-id { font-size: 12px; color: #64748B; }
|
||||
|
||||
/* CONTENT */
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-title { font-size: 20px; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
|
||||
.page-subtitle { font-size: 13px; color: #64748B; margin-bottom: 24px; }
|
||||
|
||||
/* CARDS GRID */
|
||||
.cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 28px; }
|
||||
.card {
|
||||
background: #fff; border-radius: 12px; padding: 20px 24px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
|
||||
border: 1px solid #F1F5F9;
|
||||
}
|
||||
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
|
||||
.card-label { font-size: 12px; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.card-icon {
|
||||
width: 36px; height: 36px; border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.card-icon.indigo { background: #EEF2FF; }
|
||||
.card-icon.green { background: #ECFDF5; }
|
||||
.card-icon.amber { background: #FFFBEB; }
|
||||
.card-icon.blue { background: #EFF6FF; }
|
||||
.card-icon svg { width: 18px; height: 18px; }
|
||||
.card-icon.indigo svg { color: #4F46E5; }
|
||||
.card-icon.green svg { color: #10B981; }
|
||||
.card-icon.amber svg { color: #F59E0B; }
|
||||
.card-icon.blue svg { color: #3B82F6; }
|
||||
.card-value { font-size: 26px; font-weight: 700; color: #0F172A; margin-bottom: 4px; line-height: 1; }
|
||||
.card-meta { font-size: 12px; color: #64748B; }
|
||||
.card-leave-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
|
||||
.leave-chip { text-align: center; background: #F8FAFC; border-radius: 6px; padding: 8px 4px; }
|
||||
.leave-chip-label { font-size: 10px; font-weight: 600; color: #64748B; text-transform: uppercase; }
|
||||
.leave-chip-val { font-size: 18px; font-weight: 700; color: #0F172A; margin: 2px 0; }
|
||||
.leave-chip-sub { font-size: 10px; color: #94A3B8; }
|
||||
|
||||
/* SECTION */
|
||||
.section-title { font-size: 15px; font-weight: 700; color: #0F172A; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.view-all { font-size: 12px; font-weight: 500; color: #4F46E5; cursor: pointer; text-decoration: none; }
|
||||
|
||||
/* ANNOUNCEMENTS */
|
||||
.announcements-list { display: flex; flex-direction: column; gap: 12px; }
|
||||
.announcement-item {
|
||||
background: #fff; border-radius: 10px; padding: 16px 20px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
border: 1px solid #F1F5F9;
|
||||
display: flex; align-items: flex-start; gap: 14px;
|
||||
}
|
||||
.ann-dot { width: 8px; height: 8px; border-radius: 50%; background: #4F46E5; margin-top: 5px; flex-shrink: 0; }
|
||||
.ann-title { font-size: 14px; font-weight: 600; color: #0F172A; margin-bottom: 4px; }
|
||||
.ann-body { font-size: 13px; color: #64748B; margin-bottom: 8px; line-height: 1.5; }
|
||||
.ann-meta { display: flex; align-items: center; gap: 8px; }
|
||||
.badge {
|
||||
display: inline-flex; align-items: center; padding: 3px 9px;
|
||||
border-radius: 999px; font-size: 11px; font-weight: 600;
|
||||
}
|
||||
.badge-indigo { background: #EEF2FF; color: #4F46E5; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-amber { background: #FFFBEB; color: #D97706; }
|
||||
.badge-red { background: #FEF2F2; color: #DC2626; }
|
||||
.badge-gray { background: #F1F5F9; color: #475569; }
|
||||
.ann-date { font-size: 11px; color: #94A3B8; }
|
||||
|
||||
/* TWO COLS */
|
||||
.two-cols { display: grid; grid-template-columns: 1fr 340px; gap: 20px; }
|
||||
|
||||
/* QUICK ACTIONS */
|
||||
.quick-actions { display: flex; flex-direction: column; gap: 12px; }
|
||||
.quick-action-btn {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 14px 18px; background: #fff; border: 1.5px solid #E2E8F0;
|
||||
border-radius: 10px; cursor: pointer; font-family: 'Inter', sans-serif;
|
||||
font-size: 14px; font-weight: 600; color: #4F46E5; transition: all 0.15s;
|
||||
}
|
||||
.quick-action-btn:hover { background: #EEF2FF; border-color: #4F46E5; }
|
||||
.quick-action-btn svg { width: 20px; height: 20px; color: #4F46E5; }
|
||||
.quick-action-btn .action-desc { font-size: 11px; font-weight: 400; color: #94A3B8; margin-top: 1px; }
|
||||
.action-text { display: flex; flex-direction: column; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- SIDEBAR -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="sidebar-logo-text">TechCorp HR</div>
|
||||
<div class="sidebar-logo-sub">Employee Portal</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main Menu</div>
|
||||
<a class="nav-item active" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
||||
Dashboard
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
My Profile
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
Attendance
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
|
||||
Leave
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||
Payslips
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
|
||||
Reimbursements
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
||||
Tax & Form 16
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
Announcements
|
||||
</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-user">
|
||||
<div class="avatar-sm">RS</div>
|
||||
<div>
|
||||
<div class="sidebar-user-name">Rahul Sharma</div>
|
||||
<div class="sidebar-user-role">EMP-00247 · Engineering</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- MAIN -->
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div>
|
||||
<div class="topbar-greeting">Good morning, Rahul Sharma <span>— Monday, 4 May 2026</span></div>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<button class="icon-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
<span class="notif-dot"></span>
|
||||
</button>
|
||||
<div class="topbar-user">
|
||||
<div>
|
||||
<div class="topbar-user-name">Rahul Sharma</div>
|
||||
<div class="topbar-user-id">EMP-00247</div>
|
||||
</div>
|
||||
<div class="avatar">RS</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-title">My Dashboard</div>
|
||||
<div class="page-subtitle">Here's what's happening with your account today.</div>
|
||||
|
||||
<!-- SUMMARY CARDS -->
|
||||
<div class="cards-grid">
|
||||
<!-- Leave Balance -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-label">Leave Balance</div>
|
||||
<div class="card-icon indigo">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-leave-grid">
|
||||
<div class="leave-chip">
|
||||
<div class="leave-chip-label">CL</div>
|
||||
<div class="leave-chip-val">8</div>
|
||||
<div class="leave-chip-sub">of 12</div>
|
||||
</div>
|
||||
<div class="leave-chip">
|
||||
<div class="leave-chip-label">SL</div>
|
||||
<div class="leave-chip-val">10</div>
|
||||
<div class="leave-chip-sub">of 12</div>
|
||||
</div>
|
||||
<div class="leave-chip">
|
||||
<div class="leave-chip-label">EL</div>
|
||||
<div class="leave-chip-val">12</div>
|
||||
<div class="leave-chip-sub">of 15</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Attendance -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-label">Attendance — May</div>
|
||||
<div class="card-icon green">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-value">21 <span style="font-size:15px;color:#64748B;font-weight:500">/ 22</span></div>
|
||||
<div class="card-meta" style="margin-top:6px;">
|
||||
<span style="color:#10B981;font-weight:600;">95.4%</span> attendance rate this month
|
||||
</div>
|
||||
<div style="margin-top:10px;height:6px;background:#F1F5F9;border-radius:999px;">
|
||||
<div style="width:95.4%;height:100%;background:#10B981;border-radius:999px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reimbursements -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-label">Pending Reimbursement</div>
|
||||
<div class="card-icon amber">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-value">₹4,500</div>
|
||||
<div class="card-meta">2 claims awaiting approval</div>
|
||||
</div>
|
||||
|
||||
<!-- Holidays -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-label">Upcoming Holidays</div>
|
||||
<div class="card-icon blue">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-value">2</div>
|
||||
<div class="card-meta" style="line-height:1.6;">Buddha Purnima · May 12<br/>Maharashtra Day · May 19</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BOTTOM TWO-COL -->
|
||||
<div class="two-cols">
|
||||
<!-- ANNOUNCEMENTS -->
|
||||
<div>
|
||||
<div class="section-title">
|
||||
Recent Announcements
|
||||
<a href="#" class="view-all">View all →</a>
|
||||
</div>
|
||||
<div class="announcements-list">
|
||||
<div class="announcement-item">
|
||||
<div class="ann-dot"></div>
|
||||
<div style="flex:1;">
|
||||
<div class="ann-title">Annual Performance Review — FY 2025-26</div>
|
||||
<div class="ann-body">The annual appraisal cycle begins on May 15. All employees must complete their self-assessment by May 25. Managers to complete final ratings by June 5.</div>
|
||||
<div class="ann-meta">
|
||||
<span class="badge badge-indigo">HR</span>
|
||||
<span class="ann-date">Posted May 1, 2026</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="announcement-item">
|
||||
<div class="ann-dot" style="background:#10B981;"></div>
|
||||
<div style="flex:1;">
|
||||
<div class="ann-title">New Health Insurance Benefits — Effective June 2026</div>
|
||||
<div class="ann-body">The company has upgraded health insurance coverage. Individual limit increases to ₹5L, family floater to ₹10L. Enrolment window opens May 20.</div>
|
||||
<div class="ann-meta">
|
||||
<span class="badge badge-green">Benefits</span>
|
||||
<span class="ann-date">Posted April 28, 2026</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="announcement-item">
|
||||
<div class="ann-dot" style="background:#F59E0B;"></div>
|
||||
<div style="flex:1;">
|
||||
<div class="ann-title">Office Relocation — Andheri East Floor 3</div>
|
||||
<div class="ann-body">Engineering and Product teams will move to Floor 3 of the Andheri East office effective May 10. Facilities team will assist with migration.</div>
|
||||
<div class="ann-meta">
|
||||
<span class="badge badge-amber">Admin</span>
|
||||
<span class="ann-date">Posted April 25, 2026</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- QUICK ACTIONS -->
|
||||
<div>
|
||||
<div class="section-title">Quick Actions</div>
|
||||
<div class="quick-actions">
|
||||
<button class="quick-action-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
<div class="action-text">
|
||||
<span>Apply for Leave</span>
|
||||
<span class="action-desc">Submit a new leave request</span>
|
||||
</div>
|
||||
</button>
|
||||
<button class="quick-action-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
|
||||
<div class="action-text">
|
||||
<span>Mark Attendance</span>
|
||||
<span class="action-desc">Log today's attendance status</span>
|
||||
</div>
|
||||
</button>
|
||||
<button class="quick-action-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/></svg>
|
||||
<div class="action-text">
|
||||
<span>Submit Reimbursement</span>
|
||||
<span class="action-desc">Upload and claim expenses</span>
|
||||
</div>
|
||||
</button>
|
||||
<button class="quick-action-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
<div class="action-text">
|
||||
<span>Download April Payslip</span>
|
||||
<span class="action-desc">Net Pay: ₹68,500</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,389 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HR Portal — Admin Dashboard</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; background: #F8FAFC; color: #0F172A; display: flex; min-height: 100vh; }
|
||||
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #1E293B; display: flex; flex-direction: column; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-logo-icon { width: 36px; height: 36px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.sidebar-nav { padding: 16px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.8px; padding: 12px 20px 6px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 14px; font-weight: 500; color: #94A3B8; cursor: pointer; border-left: 3px solid transparent; transition: all 0.15s; text-decoration: none; }
|
||||
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.nav-item.active { color: #818CF8; background: rgba(79,70,229,0.15); border-left-color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #EF4444; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
|
||||
.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.08); }
|
||||
.sidebar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: #7C3AED; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #E2E8F0; }
|
||||
.sidebar-user-role { font-size: 11px; color: #64748B; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #fff; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 10; }
|
||||
.topbar-left { display: flex; align-items: center; gap: 12px; }
|
||||
.topbar-title { font-size: 16px; font-weight: 600; color: #0F172A; }
|
||||
.role-badge { background: #7C3AED; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: 0.3px; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.icon-btn { width: 38px; height: 38px; border-radius: 8px; background: #F1F5F9; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: #EF4444; border-radius: 50%; border: 2px solid #fff; }
|
||||
.topbar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #7C3AED; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.topbar-user-name { font-size: 14px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-user-id { font-size: 12px; color: #64748B; }
|
||||
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-title { font-size: 20px; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
|
||||
.page-subtitle { font-size: 13px; color: #64748B; margin-bottom: 24px; }
|
||||
|
||||
.cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 28px; }
|
||||
.card { background: #fff; border-radius: 12px; padding: 20px 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; }
|
||||
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
|
||||
.card-label { font-size: 12px; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.card-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
|
||||
.card-icon.indigo { background: #EEF2FF; } .card-icon.indigo svg { color: #4F46E5; }
|
||||
.card-icon.red { background: #FEF2F2; } .card-icon.red svg { color: #EF4444; }
|
||||
.card-icon.green { background: #ECFDF5; } .card-icon.green svg { color: #10B981; }
|
||||
.card-icon.amber { background: #FFFBEB; } .card-icon.amber svg { color: #F59E0B; }
|
||||
.card-icon svg { width: 18px; height: 18px; }
|
||||
.card-value { font-size: 30px; font-weight: 700; color: #0F172A; line-height: 1; }
|
||||
.card-meta { font-size: 12px; color: #64748B; margin-top: 6px; }
|
||||
.card-trend { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; margin-top: 6px; }
|
||||
.trend-up { color: #10B981; } .trend-down { color: #EF4444; }
|
||||
|
||||
.section-title { font-size: 15px; font-weight: 700; color: #0F172A; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.view-all { font-size: 12px; font-weight: 500; color: #4F46E5; cursor: pointer; text-decoration: none; }
|
||||
|
||||
.two-cols { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }
|
||||
|
||||
/* TABLE */
|
||||
.table-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; overflow: hidden; margin-bottom: 20px; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead th { background: #F8FAFC; padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #E2E8F0; }
|
||||
tbody td { padding: 14px 16px; font-size: 13px; color: #374151; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
|
||||
tbody tr:last-child td { border-bottom: none; }
|
||||
tbody tr:hover { background: #FAFBFC; }
|
||||
.emp-name { font-weight: 600; color: #0F172A; }
|
||||
.emp-id { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
|
||||
.badge-indigo { background: #EEF2FF; color: #4F46E5; }
|
||||
.badge-amber { background: #FFFBEB; color: #D97706; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-red { background: #FEF2F2; color: #DC2626; }
|
||||
.btn-sm { padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; font-family: 'Inter', sans-serif; }
|
||||
.btn-approve { background: #ECFDF5; color: #059669; }
|
||||
.btn-approve:hover { background: #D1FAE5; }
|
||||
.btn-reject { background: #FEF2F2; color: #DC2626; margin-left: 4px; }
|
||||
.btn-reject:hover { background: #FEE2E2; }
|
||||
|
||||
/* PAYROLL CARD */
|
||||
.payroll-card { background: #fff; border-radius: 12px; padding: 20px 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; }
|
||||
.payroll-month { font-size: 18px; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
|
||||
.payroll-status { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
|
||||
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
|
||||
.payroll-stats { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
|
||||
.payroll-stat { display: flex; justify-content: space-between; align-items: center; }
|
||||
.payroll-stat-label { font-size: 12px; color: #64748B; }
|
||||
.payroll-stat-val { font-size: 13px; font-weight: 600; color: #0F172A; }
|
||||
.btn-primary { background: #4F46E5; color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; width: 100%; }
|
||||
.btn-primary:hover { background: #4338CA; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="sidebar-logo-text">TechCorp HR</div>
|
||||
<div class="sidebar-logo-sub">Admin Portal</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Administration</div>
|
||||
<a class="nav-item active" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
||||
Dashboard
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
Employees
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
Attendance
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
|
||||
Leave Approvals
|
||||
<span class="nav-badge">12</span>
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||
Payroll
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
||||
Reimbursements
|
||||
<span class="nav-badge">8</span>
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
Announcements
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
||||
Reports
|
||||
</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-user">
|
||||
<div class="avatar-sm">PK</div>
|
||||
<div>
|
||||
<div class="sidebar-user-name">Priya Kapoor</div>
|
||||
<div class="sidebar-user-role">HR Admin · EMP-00012</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-left">
|
||||
<div class="topbar-title">Admin Dashboard</div>
|
||||
<span class="role-badge">HR ADMIN</span>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<button class="icon-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
<span class="notif-dot"></span>
|
||||
</button>
|
||||
<div class="topbar-user">
|
||||
<div>
|
||||
<div class="topbar-user-name">Priya Kapoor</div>
|
||||
<div class="topbar-user-id">HR Admin</div>
|
||||
</div>
|
||||
<div class="avatar">PK</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-title">Admin Dashboard</div>
|
||||
<div class="page-subtitle">Monday, 4 May 2026 — Overview of all HR operations</div>
|
||||
|
||||
<div class="cards-grid">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-label">Total Employees</div>
|
||||
<div class="card-icon indigo">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-value">247</div>
|
||||
<div class="card-trend trend-up">↑ 3 <span style="color:#64748B;font-weight:400;">new this month</span></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-label">Pending Leave Approvals</div>
|
||||
<div class="card-icon red">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-value">12</div>
|
||||
<div class="card-meta">5 urgent — older than 48 hrs</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-label">Today's Attendance Rate</div>
|
||||
<div class="card-icon green">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-value">94<span style="font-size:16px;color:#64748B;">%</span></div>
|
||||
<div class="card-meta">232 / 247 employees present</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-label">Pending Reimbursements</div>
|
||||
<div class="card-icon amber">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-value">8</div>
|
||||
<div class="card-meta">Total value: ₹32,400</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="two-cols">
|
||||
<!-- PENDING APPROVALS TABLE -->
|
||||
<div>
|
||||
<div class="section-title">
|
||||
Pending Approvals
|
||||
<a href="#" class="view-all">View all →</a>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Employee</th>
|
||||
<th>Type</th>
|
||||
<th>Details</th>
|
||||
<th>Requested On</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name">Arjun Mehta</div>
|
||||
<div class="emp-id">EMP-00183 · Engineering</div>
|
||||
</td>
|
||||
<td><span class="badge badge-indigo">Casual Leave</span></td>
|
||||
<td>May 7–9 (3 days)</td>
|
||||
<td>May 2, 2026</td>
|
||||
<td>
|
||||
<button class="btn-sm btn-approve">Approve</button>
|
||||
<button class="btn-sm btn-reject">Reject</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name">Sunita Rao</div>
|
||||
<div class="emp-id">EMP-00091 · Finance</div>
|
||||
</td>
|
||||
<td><span class="badge badge-amber">Reimbursement</span></td>
|
||||
<td>Travel claim — ₹3,200</td>
|
||||
<td>May 1, 2026</td>
|
||||
<td>
|
||||
<button class="btn-sm btn-approve">Approve</button>
|
||||
<button class="btn-sm btn-reject">Reject</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name">Vikram Nair</div>
|
||||
<div class="emp-id">EMP-00147 · Sales</div>
|
||||
</td>
|
||||
<td><span class="badge badge-indigo">Sick Leave</span></td>
|
||||
<td>May 5–6 (2 days)</td>
|
||||
<td>May 3, 2026</td>
|
||||
<td>
|
||||
<button class="btn-sm btn-approve">Approve</button>
|
||||
<button class="btn-sm btn-reject">Reject</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name">Meera Iyer</div>
|
||||
<div class="emp-id">EMP-00229 · HR</div>
|
||||
</td>
|
||||
<td><span class="badge badge-amber">Reimbursement</span></td>
|
||||
<td>Medical claim — ₹1,800</td>
|
||||
<td>Apr 30, 2026</td>
|
||||
<td>
|
||||
<button class="btn-sm btn-approve">Approve</button>
|
||||
<button class="btn-sm btn-reject">Reject</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name">Deepak Joshi</div>
|
||||
<div class="emp-id">EMP-00064 · Operations</div>
|
||||
</td>
|
||||
<td><span class="badge badge-indigo">Earned Leave</span></td>
|
||||
<td>May 12–16 (5 days)</td>
|
||||
<td>Apr 28, 2026</td>
|
||||
<td>
|
||||
<button class="btn-sm btn-approve">Approve</button>
|
||||
<button class="btn-sm btn-reject">Reject</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAYROLL MINI CARD -->
|
||||
<div>
|
||||
<div class="section-title">Payroll Status</div>
|
||||
<div class="payroll-card">
|
||||
<div class="payroll-month">May 2026</div>
|
||||
<div class="payroll-status">
|
||||
<div class="status-dot" style="background:#F59E0B;"></div>
|
||||
<span style="font-size:13px;font-weight:600;color:#D97706;">Not Generated</span>
|
||||
</div>
|
||||
<div class="payroll-stats">
|
||||
<div class="payroll-stat">
|
||||
<span class="payroll-stat-label">Eligible Employees</span>
|
||||
<span class="payroll-stat-val">247</span>
|
||||
</div>
|
||||
<div class="payroll-stat">
|
||||
<span class="payroll-stat-label">Processing Period</span>
|
||||
<span class="payroll-stat-val">May 1–31, 2026</span>
|
||||
</div>
|
||||
<div class="payroll-stat">
|
||||
<span class="payroll-stat-label">Pay Date</span>
|
||||
<span class="payroll-stat-val">May 31, 2026</span>
|
||||
</div>
|
||||
<div class="payroll-stat">
|
||||
<span class="payroll-stat-label">Estimated Total</span>
|
||||
<span class="payroll-stat-val">~₹1,24,35,000</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:1px;background:#F1F5F9;margin-bottom:16px;"></div>
|
||||
<button class="btn-primary">Generate Payroll</button>
|
||||
<div style="margin-top:8px;text-align:center;font-size:11px;color:#94A3B8;">Attendance data locks on May 28</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:20px;">
|
||||
<div class="section-title">Dept. Headcount</div>
|
||||
<div class="card" style="padding:16px 20px;">
|
||||
<div style="display:flex;flex-direction:column;gap:10px;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||||
<span style="font-size:13px;color:#374151;">Engineering</span>
|
||||
<span style="font-size:13px;font-weight:600;color:#0F172A;">89</span>
|
||||
</div>
|
||||
<div style="height:4px;background:#F1F5F9;border-radius:999px;"><div style="width:36%;height:100%;background:#4F46E5;border-radius:999px;"></div></div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||||
<span style="font-size:13px;color:#374151;">Sales</span>
|
||||
<span style="font-size:13px;font-weight:600;color:#0F172A;">62</span>
|
||||
</div>
|
||||
<div style="height:4px;background:#F1F5F9;border-radius:999px;"><div style="width:25%;height:100%;background:#10B981;border-radius:999px;"></div></div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||||
<span style="font-size:13px;color:#374151;">Finance</span>
|
||||
<span style="font-size:13px;font-weight:600;color:#0F172A;">38</span>
|
||||
</div>
|
||||
<div style="height:4px;background:#F1F5F9;border-radius:999px;"><div style="width:15%;height:100%;background:#F59E0B;border-radius:999px;"></div></div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||||
<span style="font-size:13px;color:#374151;">Operations</span>
|
||||
<span style="font-size:13px;font-weight:600;color:#0F172A;">41</span>
|
||||
</div>
|
||||
<div style="height:4px;background:#F1F5F9;border-radius:999px;"><div style="width:17%;height:100%;background:#3B82F6;border-radius:999px;"></div></div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||||
<span style="font-size:13px;color:#374151;">HR</span>
|
||||
<span style="font-size:13px;font-weight:600;color:#0F172A;">17</span>
|
||||
</div>
|
||||
<div style="height:4px;background:#F1F5F9;border-radius:999px;"><div style="width:7%;height:100%;background:#8B5CF6;border-radius:999px;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,398 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HR Portal — Employee List</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; background: #F8FAFC; color: #0F172A; display: flex; min-height: 100vh; }
|
||||
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #1E293B; display: flex; flex-direction: column; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-logo-icon { width: 36px; height: 36px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.sidebar-nav { padding: 16px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.8px; padding: 12px 20px 6px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 14px; font-weight: 500; color: #94A3B8; cursor: pointer; border-left: 3px solid transparent; transition: all 0.15s; text-decoration: none; }
|
||||
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.nav-item.active { color: #818CF8; background: rgba(79,70,229,0.15); border-left-color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #EF4444; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
|
||||
.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.08); }
|
||||
.sidebar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: #7C3AED; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #E2E8F0; }
|
||||
.sidebar-user-role { font-size: 11px; color: #64748B; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #fff; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 10; }
|
||||
.topbar-left { display: flex; align-items: center; gap: 12px; }
|
||||
.topbar-title { font-size: 16px; font-weight: 600; color: #0F172A; }
|
||||
.role-badge { background: #7C3AED; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.icon-btn { width: 38px; height: 38px; border-radius: 8px; background: #F1F5F9; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.topbar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #7C3AED; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.topbar-user-name { font-size: 14px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-user-id { font-size: 12px; color: #64748B; }
|
||||
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
|
||||
.page-title { font-size: 20px; font-weight: 700; color: #0F172A; }
|
||||
.page-count { font-size: 13px; color: #64748B; margin-top: 3px; }
|
||||
.btn-primary { background: #4F46E5; color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 8px; }
|
||||
.btn-primary:hover { background: #4338CA; }
|
||||
.btn-primary svg { width: 16px; height: 16px; }
|
||||
|
||||
/* FILTERS BAR */
|
||||
.filters-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
|
||||
.search-box { position: relative; flex: 1; max-width: 360px; }
|
||||
.search-box svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #94A3B8; }
|
||||
.search-input { width: 100%; padding: 9px 12px 9px 38px; border: 1.5px solid #E2E8F0; border-radius: 8px; font-size: 13px; font-family: 'Inter', sans-serif; color: #0F172A; background: #fff; outline: none; }
|
||||
.search-input:focus { border-color: #4F46E5; }
|
||||
.search-input::placeholder { color: #94A3B8; }
|
||||
select { padding: 9px 32px 9px 12px; border: 1.5px solid #E2E8F0; border-radius: 8px; font-size: 13px; font-family: 'Inter', sans-serif; color: #374151; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center; -webkit-appearance: none; outline: none; cursor: pointer; }
|
||||
select:focus { border-color: #4F46E5; }
|
||||
.toggle-group { display: flex; background: #F1F5F9; border-radius: 8px; padding: 3px; gap: 2px; }
|
||||
.toggle-btn { padding: 6px 14px; border-radius: 6px; border: none; font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; background: transparent; color: #64748B; }
|
||||
.toggle-btn.active { background: #fff; color: #0F172A; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
|
||||
|
||||
/* TABLE */
|
||||
.table-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; overflow: hidden; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead th { background: #F8FAFC; padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #E2E8F0; white-space: nowrap; }
|
||||
thead th:first-child { padding-left: 20px; }
|
||||
tbody td { padding: 14px 16px; font-size: 13px; color: #374151; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
|
||||
tbody td:first-child { padding-left: 20px; }
|
||||
tbody tr:last-child td { border-bottom: none; }
|
||||
tbody tr:hover { background: #FAFBFC; }
|
||||
.emp-cell { display: flex; align-items: center; gap: 12px; }
|
||||
.emp-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.emp-name { font-weight: 600; color: #0F172A; font-size: 14px; }
|
||||
.emp-email { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-red { background: #FEF2F2; color: #DC2626; }
|
||||
.badge-gray { background: #F1F5F9; color: #475569; }
|
||||
.dept-badge { background: #EEF2FF; color: #4F46E5; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
|
||||
.action-icons { display: flex; align-items: center; gap: 8px; }
|
||||
.action-icon { width: 30px; height: 30px; border-radius: 6px; border: 1px solid #E2E8F0; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
|
||||
.action-icon:hover { background: #F1F5F9; }
|
||||
.action-icon svg { width: 14px; height: 14px; color: #64748B; }
|
||||
.action-icon.danger svg { color: #EF4444; }
|
||||
.action-icon.danger:hover { background: #FEF2F2; border-color: #FCA5A5; }
|
||||
|
||||
/* PAGINATION */
|
||||
.pagination { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-top: 1px solid #E2E8F0; }
|
||||
.pagination-info { font-size: 13px; color: #64748B; }
|
||||
.pagination-btns { display: flex; align-items: center; gap: 6px; }
|
||||
.page-btn { width: 32px; height: 32px; border-radius: 6px; border: 1px solid #E2E8F0; background: #fff; font-size: 13px; font-weight: 500; color: #374151; cursor: pointer; display: flex; align-items: center; justify-content: center; }
|
||||
.page-btn.active { background: #4F46E5; color: #fff; border-color: #4F46E5; }
|
||||
.page-btn:hover:not(.active) { background: #F1F5F9; }
|
||||
.page-btn svg { width: 14px; height: 14px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="sidebar-logo-text">TechCorp HR</div>
|
||||
<div class="sidebar-logo-sub">Admin Portal</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Administration</div>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
|
||||
<a class="nav-item active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Employees</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Attendance</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>Leave Approvals<span class="nav-badge">12</span></a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>Payroll</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Reimbursements<span class="nav-badge">8</span></a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>Announcements</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Reports</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-user">
|
||||
<div class="avatar-sm">PK</div>
|
||||
<div>
|
||||
<div class="sidebar-user-name">Priya Kapoor</div>
|
||||
<div class="sidebar-user-role">HR Admin · EMP-00012</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-left">
|
||||
<div class="topbar-title">Employees</div>
|
||||
<span class="role-badge">HR ADMIN</span>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<button class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></button>
|
||||
<div class="topbar-user">
|
||||
<div><div class="topbar-user-name">Priya Kapoor</div><div class="topbar-user-id">HR Admin</div></div>
|
||||
<div class="avatar">PK</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="page-title">All Employees</div>
|
||||
<div class="page-count">247 employees · 243 active</div>
|
||||
</div>
|
||||
<button class="btn-primary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
Add Employee
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="filters-bar">
|
||||
<div class="search-box">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||||
<input type="text" class="search-input" placeholder="Search by name, ID, or email..." />
|
||||
</div>
|
||||
<select>
|
||||
<option>All Departments</option>
|
||||
<option>Engineering</option>
|
||||
<option>Finance</option>
|
||||
<option>HR</option>
|
||||
<option>Sales</option>
|
||||
<option>Operations</option>
|
||||
</select>
|
||||
<select>
|
||||
<option>All Designations</option>
|
||||
<option>Software Engineer</option>
|
||||
<option>Senior Engineer</option>
|
||||
<option>Manager</option>
|
||||
<option>Analyst</option>
|
||||
<option>Executive</option>
|
||||
</select>
|
||||
<div class="toggle-group">
|
||||
<button class="toggle-btn active">All</button>
|
||||
<button class="toggle-btn">Active</button>
|
||||
<button class="toggle-btn">Inactive</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Employee</th>
|
||||
<th>Employee ID</th>
|
||||
<th>Department</th>
|
||||
<th>Designation</th>
|
||||
<th>Join Date</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#4F46E5;">RS</div>
|
||||
<div>
|
||||
<div class="emp-name">Rahul Sharma</div>
|
||||
<div class="emp-email">rahul.sharma@techcorp.in</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>EMP-00247</td>
|
||||
<td><span class="dept-badge">Engineering</span></td>
|
||||
<td>Senior Software Engineer</td>
|
||||
<td>Mar 15, 2021</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>
|
||||
<div class="action-icons">
|
||||
<div class="action-icon" title="View"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></div>
|
||||
<div class="action-icon" title="Edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#10B981;">SM</div>
|
||||
<div>
|
||||
<div class="emp-name">Sunita Mehta</div>
|
||||
<div class="emp-email">sunita.mehta@techcorp.in</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>EMP-00091</td>
|
||||
<td><span class="dept-badge" style="background:#ECFDF5;color:#059669;">Finance</span></td>
|
||||
<td>Senior Finance Analyst</td>
|
||||
<td>Jul 1, 2019</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>
|
||||
<div class="action-icons">
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></div>
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#F59E0B;">VN</div>
|
||||
<div>
|
||||
<div class="emp-name">Vikram Nair</div>
|
||||
<div class="emp-email">vikram.nair@techcorp.in</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>EMP-00147</td>
|
||||
<td><span class="dept-badge" style="background:#FFFBEB;color:#D97706;">Sales</span></td>
|
||||
<td>Regional Sales Manager</td>
|
||||
<td>Jan 12, 2020</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>
|
||||
<div class="action-icons">
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></div>
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#8B5CF6;">MI</div>
|
||||
<div>
|
||||
<div class="emp-name">Meera Iyer</div>
|
||||
<div class="emp-email">meera.iyer@techcorp.in</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>EMP-00229</td>
|
||||
<td><span class="dept-badge" style="background:#F5F3FF;color:#7C3AED;">HR</span></td>
|
||||
<td>HR Business Partner</td>
|
||||
<td>Sep 5, 2022</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>
|
||||
<div class="action-icons">
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></div>
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#EF4444;">DJ</div>
|
||||
<div>
|
||||
<div class="emp-name">Deepak Joshi</div>
|
||||
<div class="emp-email">deepak.joshi@techcorp.in</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>EMP-00064</td>
|
||||
<td><span class="dept-badge" style="background:#FFF7ED;color:#C2410C;">Operations</span></td>
|
||||
<td>Operations Lead</td>
|
||||
<td>Feb 28, 2018</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>
|
||||
<div class="action-icons">
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></div>
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#3B82F6;">AG</div>
|
||||
<div>
|
||||
<div class="emp-name">Ananya Gupta</div>
|
||||
<div class="emp-email">ananya.gupta@techcorp.in</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>EMP-00198</td>
|
||||
<td><span class="dept-badge">Engineering</span></td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Jun 20, 2023</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>
|
||||
<div class="action-icons">
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></div>
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#64748B;">KP</div>
|
||||
<div>
|
||||
<div class="emp-name">Karthik Pillai</div>
|
||||
<div class="emp-email">karthik.pillai@techcorp.in</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>EMP-00033</td>
|
||||
<td><span class="dept-badge" style="background:#ECFDF5;color:#059669;">Finance</span></td>
|
||||
<td>Finance Manager</td>
|
||||
<td>Nov 10, 2016</td>
|
||||
<td><span class="badge badge-red">Inactive</span></td>
|
||||
<td>
|
||||
<div class="action-icons">
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></div>
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#EC4899;">NR</div>
|
||||
<div>
|
||||
<div class="emp-name">Neha Reddy</div>
|
||||
<div class="emp-email">neha.reddy@techcorp.in</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>EMP-00215</td>
|
||||
<td><span class="dept-badge" style="background:#FFFBEB;color:#D97706;">Sales</span></td>
|
||||
<td>Sales Executive</td>
|
||||
<td>Jan 8, 2024</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>
|
||||
<div class="action-icons">
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></div>
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<div class="pagination-info">Showing 1–8 of 247 employees</div>
|
||||
<div class="pagination-btns">
|
||||
<button class="page-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg></button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">...</button>
|
||||
<button class="page-btn">31</button>
|
||||
<button class="page-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,347 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HR Portal — Attendance</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; background: #F8FAFC; color: #0F172A; display: flex; min-height: 100vh; }
|
||||
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #1E293B; display: flex; flex-direction: column; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-logo-icon { width: 36px; height: 36px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.sidebar-nav { padding: 16px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.8px; padding: 12px 20px 6px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 14px; font-weight: 500; color: #94A3B8; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; }
|
||||
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.nav-item.active { color: #818CF8; background: rgba(79,70,229,0.15); border-left-color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.08); }
|
||||
.sidebar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #E2E8F0; }
|
||||
.sidebar-user-role { font-size: 11px; color: #64748B; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #fff; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 10; }
|
||||
.topbar-title { font-size: 16px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.icon-btn { width: 38px; height: 38px; border-radius: 8px; background: #F1F5F9; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: #EF4444; border-radius: 50%; border: 2px solid #fff; }
|
||||
.topbar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #4F46E5; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.topbar-user-name { font-size: 14px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-user-id { font-size: 12px; color: #64748B; }
|
||||
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-title { font-size: 20px; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
|
||||
.page-subtitle { font-size: 13px; color: #64748B; margin-bottom: 24px; }
|
||||
|
||||
.attendance-layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; }
|
||||
|
||||
/* CALENDAR */
|
||||
.calendar-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; }
|
||||
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
|
||||
.cal-title { font-size: 18px; font-weight: 700; color: #0F172A; }
|
||||
.cal-nav { display: flex; align-items: center; gap: 8px; }
|
||||
.cal-nav-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #E2E8F0; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
|
||||
.cal-nav-btn:hover { background: #F1F5F9; }
|
||||
.cal-nav-btn svg { width: 16px; height: 16px; color: #64748B; }
|
||||
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
|
||||
.cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 0 10px; }
|
||||
.cal-cell {
|
||||
aspect-ratio: 1; border-radius: 8px; display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center; font-size: 13px; font-weight: 500; color: #374151;
|
||||
cursor: default; position: relative;
|
||||
}
|
||||
.cal-cell .day-num { font-size: 13px; font-weight: 600; }
|
||||
.cal-cell.weekend { background: #F8FAFC; color: #94A3B8; }
|
||||
.cal-cell.present { background: #ECFDF5; color: #065F46; }
|
||||
.cal-cell.present .day-num { color: #065F46; }
|
||||
.cal-cell.absent { background: #FEF2F2; color: #991B1B; }
|
||||
.cal-cell.wfh { background: #EFF6FF; color: #1E40AF; }
|
||||
.cal-cell.half-day { background: #FFF7ED; color: #9A3412; }
|
||||
.cal-cell.holiday { background: #F5F3FF; color: #5B21B6; }
|
||||
.cal-cell.future { background: transparent; color: #CBD5E1; border: 1px dashed #E2E8F0; }
|
||||
.cal-cell.today {
|
||||
border: 2px solid #4F46E5 !important;
|
||||
background: #EEF2FF;
|
||||
}
|
||||
.cal-cell .day-label { font-size: 9px; font-weight: 600; margin-top: 2px; text-transform: uppercase; }
|
||||
.cal-cell .mark-btn {
|
||||
font-size: 9px; font-weight: 700; background: #4F46E5; color: #fff;
|
||||
padding: 2px 6px; border-radius: 4px; margin-top: 3px; border: none; cursor: pointer;
|
||||
}
|
||||
.cal-cell.empty { background: transparent; }
|
||||
|
||||
/* LEGEND */
|
||||
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #F1F5F9; }
|
||||
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #64748B; }
|
||||
.legend-dot { width: 12px; height: 12px; border-radius: 3px; }
|
||||
|
||||
/* SIDE PANEL */
|
||||
.side-panel { display: flex; flex-direction: column; gap: 16px; }
|
||||
.summary-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; }
|
||||
.summary-title { font-size: 13px; font-weight: 700; color: #0F172A; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.summary-rows { display: flex; flex-direction: column; gap: 12px; }
|
||||
.summary-row { display: flex; justify-content: space-between; align-items: center; }
|
||||
.summary-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; }
|
||||
.summary-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
|
||||
.summary-val { font-size: 16px; font-weight: 700; color: #0F172A; }
|
||||
.divider { border: none; border-top: 1px solid #F1F5F9; }
|
||||
.total-row { display: flex; justify-content: space-between; align-items: center; padding-top: 4px; }
|
||||
.total-label { font-size: 13px; font-weight: 700; color: #0F172A; }
|
||||
.total-val { font-size: 16px; font-weight: 700; color: #0F172A; }
|
||||
.attendance-pct { text-align: center; padding: 12px 0 0; }
|
||||
.pct-num { font-size: 32px; font-weight: 800; color: #10B981; }
|
||||
.pct-label { font-size: 12px; color: #64748B; margin-top: 2px; }
|
||||
.pct-bar { height: 8px; background: #F1F5F9; border-radius: 999px; margin-top: 10px; }
|
||||
.pct-fill { height: 100%; border-radius: 999px; background: #10B981; }
|
||||
|
||||
/* TODAY STATUS CARD */
|
||||
.today-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; }
|
||||
.today-header { font-size: 14px; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
|
||||
.today-date { font-size: 12px; color: #64748B; margin-bottom: 16px; }
|
||||
select { width: 100%; padding: 9px 12px; border: 1.5px solid #E2E8F0; border-radius: 8px; font-size: 13px; font-family: 'Inter', sans-serif; color: #374151; background: #fff; outline: none; margin-bottom: 10px; }
|
||||
select:focus { border-color: #4F46E5; }
|
||||
.btn-submit { width: 100%; padding: 11px; background: #4F46E5; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; font-family: 'Inter', sans-serif; cursor: pointer; }
|
||||
.btn-submit:hover { background: #4338CA; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="sidebar-logo-text">TechCorp HR</div>
|
||||
<div class="sidebar-logo-sub">Employee Portal</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main Menu</div>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>My Profile</a>
|
||||
<a class="nav-item active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Attendance</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>Leave</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>Payslips</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Reimbursements</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>Tax & Form 16</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>Announcements</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-user">
|
||||
<div class="avatar-sm">RS</div>
|
||||
<div>
|
||||
<div class="sidebar-user-name">Rahul Sharma</div>
|
||||
<div class="sidebar-user-role">EMP-00247 · Engineering</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-title">My Attendance</div>
|
||||
<div class="topbar-right">
|
||||
<button class="icon-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
<span class="notif-dot"></span>
|
||||
</button>
|
||||
<div class="topbar-user">
|
||||
<div><div class="topbar-user-name">Rahul Sharma</div><div class="topbar-user-id">EMP-00247</div></div>
|
||||
<div class="avatar">RS</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-title">Attendance Calendar</div>
|
||||
<div class="page-subtitle">Your monthly attendance record — May 2026</div>
|
||||
|
||||
<div class="attendance-layout">
|
||||
<!-- CALENDAR -->
|
||||
<div>
|
||||
<div class="calendar-card">
|
||||
<div class="cal-header">
|
||||
<div class="cal-title">May 2026</div>
|
||||
<div class="cal-nav">
|
||||
<button class="cal-nav-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg></button>
|
||||
<button class="cal-nav-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cal-grid">
|
||||
<!-- Day of week headers -->
|
||||
<div class="cal-dow">Sun</div>
|
||||
<div class="cal-dow">Mon</div>
|
||||
<div class="cal-dow">Tue</div>
|
||||
<div class="cal-dow">Wed</div>
|
||||
<div class="cal-dow">Thu</div>
|
||||
<div class="cal-dow">Fri</div>
|
||||
<div class="cal-dow">Sat</div>
|
||||
|
||||
<!-- Week 1: May starts on Friday -->
|
||||
<div class="cal-cell empty"></div>
|
||||
<div class="cal-cell empty"></div>
|
||||
<div class="cal-cell empty"></div>
|
||||
<div class="cal-cell empty"></div>
|
||||
<div class="cal-cell present"><div class="day-num">1</div><div class="day-label">P</div></div>
|
||||
<div class="cal-cell present"><div class="day-num">2</div><div class="day-label">P</div></div>
|
||||
<div class="cal-cell weekend"><div class="day-num">3</div></div>
|
||||
|
||||
<!-- Week 2 -->
|
||||
<div class="cal-cell weekend"><div class="day-num">4</div></div>
|
||||
<div class="cal-cell today">
|
||||
<div class="day-num">5</div>
|
||||
<button class="mark-btn">Mark</button>
|
||||
</div>
|
||||
<div class="cal-cell future"><div class="day-num">6</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">7</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">8</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">9</div></div>
|
||||
<div class="cal-cell weekend"><div class="day-num">10</div></div>
|
||||
|
||||
<!-- Week 3 -->
|
||||
<div class="cal-cell weekend"><div class="day-num">11</div></div>
|
||||
<div class="cal-cell holiday"><div class="day-num">12</div><div class="day-label" style="font-size:8px;">Holiday</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">13</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">14</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">15</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">16</div></div>
|
||||
<div class="cal-cell weekend"><div class="day-num">17</div></div>
|
||||
|
||||
<!-- Week 4 - back-fill April data -->
|
||||
<div class="cal-cell weekend"><div class="day-num">18</div></div>
|
||||
<div class="cal-cell holiday"><div class="day-num">19</div><div class="day-label" style="font-size:8px;">Holiday</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">20</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">21</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">22</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">23</div></div>
|
||||
<div class="cal-cell weekend"><div class="day-num">24</div></div>
|
||||
|
||||
<!-- Week 5 -->
|
||||
<div class="cal-cell weekend"><div class="day-num">25</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">26</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">27</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">28</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">29</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">30</div></div>
|
||||
<div class="cal-cell weekend"><div class="day-num">31</div></div>
|
||||
</div>
|
||||
|
||||
<div class="legend">
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#ECFDF5;border:1px solid #D1FAE5;"></div>Present</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#FEF2F2;border:1px solid #FECACA;"></div>Absent</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#EFF6FF;border:1px solid #BFDBFE;"></div>WFH</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#FFF7ED;border:1px solid #FED7AA;"></div>Half-day</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#F5F3FF;border:1px solid #DDD6FE;"></div>Holiday</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#F8FAFC;border:1px solid #E2E8F0;"></div>Weekend</div>
|
||||
</div>
|
||||
|
||||
<!-- Note: Showing April data below for a fuller view -->
|
||||
<div style="margin-top:20px;padding-top:20px;border-top:1px solid #F1F5F9;">
|
||||
<div style="font-size:12px;font-weight:600;color:#64748B;margin-bottom:12px;text-transform:uppercase;letter-spacing:0.5px;">April 2026 — Recent History</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:6px;">
|
||||
<span style="padding:4px 10px;background:#ECFDF5;color:#065F46;font-size:11px;font-weight:600;border-radius:6px;">Apr 1 — Present</span>
|
||||
<span style="padding:4px 10px;background:#EFF6FF;color:#1E40AF;font-size:11px;font-weight:600;border-radius:6px;">Apr 2 — WFH</span>
|
||||
<span style="padding:4px 10px;background:#ECFDF5;color:#065F46;font-size:11px;font-weight:600;border-radius:6px;">Apr 3 — Present</span>
|
||||
<span style="padding:4px 10px;background:#ECFDF5;color:#065F46;font-size:11px;font-weight:600;border-radius:6px;">Apr 4 — Present</span>
|
||||
<span style="padding:4px 10px;background:#ECFDF5;color:#065F46;font-size:11px;font-weight:600;border-radius:6px;">Apr 7 — Present</span>
|
||||
<span style="padding:4px 10px;background:#ECFDF5;color:#065F46;font-size:11px;font-weight:600;border-radius:6px;">Apr 8 — Present</span>
|
||||
<span style="padding:4px 10px;background:#EFF6FF;color:#1E40AF;font-size:11px;font-weight:600;border-radius:6px;">Apr 9 — WFH</span>
|
||||
<span style="padding:4px 10px;background:#FFF7ED;color:#9A3412;font-size:11px;font-weight:600;border-radius:6px;">Apr 10 — Half-day</span>
|
||||
<span style="padding:4px 10px;background:#ECFDF5;color:#065F46;font-size:11px;font-weight:600;border-radius:6px;">Apr 11 — Present</span>
|
||||
<span style="padding:4px 10px;background:#FEF2F2;color:#991B1B;font-size:11px;font-weight:600;border-radius:6px;">Apr 14 — Absent</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SIDE PANEL -->
|
||||
<div class="side-panel">
|
||||
<div class="summary-card">
|
||||
<div class="summary-title">May Summary</div>
|
||||
<div class="attendance-pct">
|
||||
<div class="pct-num">81.8%</div>
|
||||
<div class="pct-label">Attendance Rate (2 days so far)</div>
|
||||
<div class="pct-bar"><div class="pct-fill" style="width:81.8%;"></div></div>
|
||||
</div>
|
||||
<div style="height:1px;background:#F1F5F9;margin:16px 0;"></div>
|
||||
<div class="summary-rows">
|
||||
<div class="summary-row">
|
||||
<div class="summary-label">
|
||||
<div class="summary-dot" style="background:#ECFDF5;border:1px solid #D1FAE5;"></div>
|
||||
Present
|
||||
</div>
|
||||
<div class="summary-val" style="color:#10B981;">2</div>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<div class="summary-label">
|
||||
<div class="summary-dot" style="background:#FEF2F2;border:1px solid #FECACA;"></div>
|
||||
Absent
|
||||
</div>
|
||||
<div class="summary-val" style="color:#EF4444;">0</div>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<div class="summary-label">
|
||||
<div class="summary-dot" style="background:#EFF6FF;border:1px solid #BFDBFE;"></div>
|
||||
WFH
|
||||
</div>
|
||||
<div class="summary-val" style="color:#3B82F6;">0</div>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<div class="summary-label">
|
||||
<div class="summary-dot" style="background:#FFF7ED;border:1px solid #FED7AA;"></div>
|
||||
Half-day
|
||||
</div>
|
||||
<div class="summary-val" style="color:#F59E0B;">0</div>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<div class="summary-label">
|
||||
<div class="summary-dot" style="background:#F5F3FF;border:1px solid #DDD6FE;"></div>
|
||||
Holidays
|
||||
</div>
|
||||
<div class="summary-val" style="color:#7C3AED;">2</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="divider" style="margin:12px 0;" />
|
||||
<div class="total-row">
|
||||
<span class="total-label">Total Working Days</span>
|
||||
<span class="total-val">23</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="today-card">
|
||||
<div class="today-header">Mark Today's Attendance</div>
|
||||
<div class="today-date">Monday, May 4, 2026</div>
|
||||
<select>
|
||||
<option value="">Select attendance status</option>
|
||||
<option value="present">Present (Office)</option>
|
||||
<option value="wfh">Work From Home</option>
|
||||
<option value="half-day">Half-day</option>
|
||||
</select>
|
||||
<select style="margin-bottom:14px;">
|
||||
<option>Select check-in time</option>
|
||||
<option>8:30 AM</option>
|
||||
<option>9:00 AM</option>
|
||||
<option>9:30 AM</option>
|
||||
<option>10:00 AM</option>
|
||||
</select>
|
||||
<button class="btn-submit">Submit Attendance</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,346 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HR Portal — Leave Management</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; background: #F8FAFC; color: #0F172A; display: flex; min-height: 100vh; }
|
||||
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #1E293B; display: flex; flex-direction: column; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-logo-icon { width: 36px; height: 36px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.sidebar-nav { padding: 16px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.8px; padding: 12px 20px 6px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 14px; font-weight: 500; color: #94A3B8; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; }
|
||||
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.nav-item.active { color: #818CF8; background: rgba(79,70,229,0.15); border-left-color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.08); }
|
||||
.sidebar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #E2E8F0; }
|
||||
.sidebar-user-role { font-size: 11px; color: #64748B; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #fff; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 10; }
|
||||
.topbar-title { font-size: 16px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.icon-btn { width: 38px; height: 38px; border-radius: 8px; background: #F1F5F9; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: #EF4444; border-radius: 50%; border: 2px solid #fff; }
|
||||
.topbar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #4F46E5; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.topbar-user-name { font-size: 14px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-user-id { font-size: 12px; color: #64748B; }
|
||||
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
|
||||
.page-title { font-size: 20px; font-weight: 700; color: #0F172A; }
|
||||
.page-subtitle { font-size: 13px; color: #64748B; margin-top: 3px; }
|
||||
.btn-primary { background: #4F46E5; color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 8px; }
|
||||
.btn-primary svg { width: 16px; height: 16px; }
|
||||
|
||||
/* LEAVE BALANCE CARDS */
|
||||
.balance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
|
||||
.balance-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; }
|
||||
.balance-type { font-size: 12px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.balance-ring { display: flex; align-items: center; gap: 14px; }
|
||||
.ring-wrapper { position: relative; width: 56px; height: 56px; }
|
||||
.ring-wrapper svg { transform: rotate(-90deg); }
|
||||
.ring-bg { fill: none; stroke: #F1F5F9; stroke-width: 5; }
|
||||
.ring-fg { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 0.5s; }
|
||||
.ring-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; font-weight: 800; color: #0F172A; }
|
||||
.balance-info {}
|
||||
.balance-remaining { font-size: 24px; font-weight: 800; color: #0F172A; }
|
||||
.balance-total { font-size: 12px; color: #94A3B8; }
|
||||
.balance-used { font-size: 11px; font-weight: 600; margin-top: 4px; }
|
||||
|
||||
/* APPLY LEAVE FORM */
|
||||
.form-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; margin-bottom: 24px; }
|
||||
.form-title { font-size: 15px; font-weight: 700; color: #0F172A; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
|
||||
.form-title svg { width: 18px; height: 18px; color: #4F46E5; }
|
||||
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
|
||||
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||||
.form-group.full { grid-column: 1 / -1; }
|
||||
label { font-size: 12px; font-weight: 600; color: #374151; }
|
||||
input, select, textarea { padding: 9px 12px; border: 1.5px solid #E2E8F0; border-radius: 8px; font-size: 13px; font-family: 'Inter', sans-serif; color: #0F172A; background: #fff; outline: none; width: 100%; }
|
||||
input:focus, select:focus, textarea:focus { border-color: #4F46E5; }
|
||||
textarea { resize: vertical; min-height: 80px; }
|
||||
.form-actions { display: flex; gap: 10px; justify-content: flex-end; }
|
||||
.btn-outline { background: #fff; color: #64748B; border: 1.5px solid #E2E8F0; border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; }
|
||||
.btn-submit { background: #4F46E5; color: #fff; border: none; border-radius: 8px; padding: 9px 20px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; }
|
||||
.duration-note { background: #EEF2FF; border-radius: 8px; padding: 10px 14px; font-size: 12px; color: #4F46E5; font-weight: 600; margin-bottom: 16px; }
|
||||
|
||||
/* TABLE */
|
||||
.table-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; overflow: hidden; }
|
||||
.table-header { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #F1F5F9; }
|
||||
.table-title { font-size: 14px; font-weight: 700; color: #0F172A; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead th { background: #F8FAFC; padding: 11px 16px; text-align: left; font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #E2E8F0; }
|
||||
tbody td { padding: 13px 16px; font-size: 13px; color: #374151; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
|
||||
tbody tr:last-child td { border-bottom: none; }
|
||||
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-amber { background: #FFFBEB; color: #D97706; }
|
||||
.badge-red { background: #FEF2F2; color: #DC2626; }
|
||||
.badge-indigo { background: #EEF2FF; color: #4F46E5; }
|
||||
.badge-gray { background: #F1F5F9; color: #475569; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="sidebar-logo-text">TechCorp HR</div>
|
||||
<div class="sidebar-logo-sub">Employee Portal</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main Menu</div>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>My Profile</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Attendance</a>
|
||||
<a class="nav-item active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>Leave</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>Payslips</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Reimbursements</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>Tax & Form 16</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>Announcements</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-user">
|
||||
<div class="avatar-sm">RS</div>
|
||||
<div>
|
||||
<div class="sidebar-user-name">Rahul Sharma</div>
|
||||
<div class="sidebar-user-role">EMP-00247 · Engineering</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-title">Leave Management</div>
|
||||
<div class="topbar-right">
|
||||
<button class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><span class="notif-dot"></span></button>
|
||||
<div class="topbar-user">
|
||||
<div><div class="topbar-user-name">Rahul Sharma</div><div class="topbar-user-id">EMP-00247</div></div>
|
||||
<div class="avatar">RS</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="page-title">My Leave</div>
|
||||
<div class="page-subtitle">FY 2025–26 · Balance and history</div>
|
||||
</div>
|
||||
<button class="btn-primary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
Apply Leave
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- LEAVE BALANCE CARDS -->
|
||||
<div class="balance-grid">
|
||||
<!-- CL -->
|
||||
<div class="balance-card">
|
||||
<div class="balance-type">Casual Leave <span style="color:#4F46E5;">CL</span></div>
|
||||
<div class="balance-ring">
|
||||
<div class="ring-wrapper">
|
||||
<svg width="56" height="56" viewBox="0 0 56 56">
|
||||
<circle class="ring-bg" cx="28" cy="28" r="22"/>
|
||||
<circle class="ring-fg" cx="28" cy="28" r="22" stroke="#4F46E5" stroke-dasharray="138.23" stroke-dashoffset="46"/>
|
||||
</svg>
|
||||
<div class="ring-text">8</div>
|
||||
</div>
|
||||
<div class="balance-info">
|
||||
<div class="balance-remaining">8 <span style="font-size:13px;color:#94A3B8;font-weight:500;">left</span></div>
|
||||
<div class="balance-total">of 12 total</div>
|
||||
<div class="balance-used" style="color:#4F46E5;">4 used</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- SL -->
|
||||
<div class="balance-card">
|
||||
<div class="balance-type">Sick Leave <span style="color:#10B981;">SL</span></div>
|
||||
<div class="balance-ring">
|
||||
<div class="ring-wrapper">
|
||||
<svg width="56" height="56" viewBox="0 0 56 56">
|
||||
<circle class="ring-bg" cx="28" cy="28" r="22"/>
|
||||
<circle class="ring-fg" cx="28" cy="28" r="22" stroke="#10B981" stroke-dasharray="138.23" stroke-dashoffset="23"/>
|
||||
</svg>
|
||||
<div class="ring-text">10</div>
|
||||
</div>
|
||||
<div class="balance-info">
|
||||
<div class="balance-remaining">10 <span style="font-size:13px;color:#94A3B8;font-weight:500;">left</span></div>
|
||||
<div class="balance-total">of 12 total</div>
|
||||
<div class="balance-used" style="color:#10B981;">2 used</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- EL -->
|
||||
<div class="balance-card">
|
||||
<div class="balance-type">Earned Leave <span style="color:#F59E0B;">EL</span></div>
|
||||
<div class="balance-ring">
|
||||
<div class="ring-wrapper">
|
||||
<svg width="56" height="56" viewBox="0 0 56 56">
|
||||
<circle class="ring-bg" cx="28" cy="28" r="22"/>
|
||||
<circle class="ring-fg" cx="28" cy="28" r="22" stroke="#F59E0B" stroke-dasharray="138.23" stroke-dashoffset="28"/>
|
||||
</svg>
|
||||
<div class="ring-text">12</div>
|
||||
</div>
|
||||
<div class="balance-info">
|
||||
<div class="balance-remaining">12 <span style="font-size:13px;color:#94A3B8;font-weight:500;">left</span></div>
|
||||
<div class="balance-total">of 15 total</div>
|
||||
<div class="balance-used" style="color:#F59E0B;">3 used</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- LOP -->
|
||||
<div class="balance-card">
|
||||
<div class="balance-type">Loss of Pay <span style="color:#EF4444;">LOP</span></div>
|
||||
<div class="balance-ring">
|
||||
<div style="text-align:center;width:100%;">
|
||||
<div style="font-size:28px;font-weight:800;color:#EF4444;">1</div>
|
||||
<div style="font-size:12px;color:#94A3B8;">day applied</div>
|
||||
<div style="margin-top:8px;font-size:11px;color:#64748B;line-height:1.5;">Deducted from salary.<br/>Use only when other leaves exhausted.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- APPLY LEAVE FORM -->
|
||||
<div class="form-card">
|
||||
<div class="form-title">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
Apply for Leave
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label>Leave Type</label>
|
||||
<select>
|
||||
<option>Casual Leave (CL)</option>
|
||||
<option>Sick Leave (SL)</option>
|
||||
<option>Earned Leave (EL)</option>
|
||||
<option>Loss of Pay (LOP)</option>
|
||||
<option>Maternity Leave</option>
|
||||
<option>Paternity Leave</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>From Date</label>
|
||||
<input type="date" value="2026-05-07" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>To Date</label>
|
||||
<input type="date" value="2026-05-09" />
|
||||
</div>
|
||||
<div class="form-group full">
|
||||
<label>Reason</label>
|
||||
<textarea placeholder="Please provide a brief reason for the leave request...">Planning a family trip to Ooty. Have completed all pending tasks and briefed the team.</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="duration-note">
|
||||
Duration: <strong>3 days</strong> (Thu May 7 to Sat May 9) · After deduction: CL balance will be <strong>5 days</strong>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button class="btn-outline">Cancel</button>
|
||||
<button class="btn-submit">Submit Request</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LEAVE HISTORY TABLE -->
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<div class="table-title">Leave History</div>
|
||||
<select style="width:auto;padding:6px 12px;font-size:12px;">
|
||||
<option>FY 2025-26</option>
|
||||
<option>FY 2024-25</option>
|
||||
</select>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Leave Type</th>
|
||||
<th>From</th>
|
||||
<th>To</th>
|
||||
<th>Days</th>
|
||||
<th>Reason</th>
|
||||
<th>Status</th>
|
||||
<th>Applied On</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="badge badge-indigo">Casual Leave</span></td>
|
||||
<td>Apr 14, 2026</td>
|
||||
<td>Apr 14, 2026</td>
|
||||
<td>1</td>
|
||||
<td>Personal work</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
<td>Apr 12, 2026</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge" style="background:#ECFDF5;color:#059669;">Sick Leave</span></td>
|
||||
<td>Mar 22, 2026</td>
|
||||
<td>Mar 23, 2026</td>
|
||||
<td>2</td>
|
||||
<td>Fever and flu — medical certificate attached</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
<td>Mar 22, 2026</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge badge-indigo">Casual Leave</span></td>
|
||||
<td>Mar 10, 2026</td>
|
||||
<td>Mar 11, 2026</td>
|
||||
<td>2</td>
|
||||
<td>Family function — brother's engagement</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
<td>Mar 5, 2026</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge" style="background:#FFF7ED;color:#C2410C;">Earned Leave</span></td>
|
||||
<td>Feb 16, 2026</td>
|
||||
<td>Feb 20, 2026</td>
|
||||
<td>5</td>
|
||||
<td>Vacation — Rajasthan trip</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
<td>Feb 3, 2026</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge badge-indigo">Casual Leave</span></td>
|
||||
<td>May 7, 2026</td>
|
||||
<td>May 9, 2026</td>
|
||||
<td>3</td>
|
||||
<td>Family trip to Ooty</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td>May 4, 2026</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge" style="background:#ECFDF5;color:#059669;">Sick Leave</span></td>
|
||||
<td>Jan 6, 2026</td>
|
||||
<td>Jan 6, 2026</td>
|
||||
<td>1</td>
|
||||
<td>Migraine</td>
|
||||
<td><span class="badge badge-red">Rejected</span></td>
|
||||
<td>Jan 6, 2026</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,347 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HR Portal — Payslips</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; background: #F8FAFC; color: #0F172A; display: flex; min-height: 100vh; }
|
||||
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #1E293B; display: flex; flex-direction: column; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-logo-icon { width: 36px; height: 36px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.sidebar-nav { padding: 16px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.8px; padding: 12px 20px 6px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 14px; font-weight: 500; color: #94A3B8; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; }
|
||||
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.nav-item.active { color: #818CF8; background: rgba(79,70,229,0.15); border-left-color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.08); }
|
||||
.sidebar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #E2E8F0; }
|
||||
.sidebar-user-role { font-size: 11px; color: #64748B; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #fff; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 10; }
|
||||
.topbar-title { font-size: 16px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.icon-btn { width: 38px; height: 38px; border-radius: 8px; background: #F1F5F9; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: #EF4444; border-radius: 50%; border: 2px solid #fff; }
|
||||
.topbar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #4F46E5; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.topbar-user-name { font-size: 14px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-user-id { font-size: 12px; color: #64748B; }
|
||||
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
|
||||
.page-title { font-size: 20px; font-weight: 700; color: #0F172A; }
|
||||
.page-subtitle { font-size: 13px; color: #64748B; margin-top: 3px; }
|
||||
|
||||
.two-cols { display: grid; grid-template-columns: 1fr 340px; gap: 24px; }
|
||||
|
||||
/* PAYSLIP GRID */
|
||||
.year-filter { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
|
||||
.year-filter label { font-size: 13px; font-weight: 600; color: #374151; }
|
||||
select { padding: 8px 12px; border: 1.5px solid #E2E8F0; border-radius: 8px; font-size: 13px; font-family: 'Inter', sans-serif; color: #374151; background: #fff; outline: none; }
|
||||
select:focus { border-color: #4F46E5; }
|
||||
.payslips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
||||
.payslip-card {
|
||||
background: #fff; border-radius: 12px; padding: 18px 20px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9;
|
||||
transition: box-shadow 0.15s;
|
||||
}
|
||||
.payslip-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
||||
.payslip-card.highlighted { border: 2px solid #4F46E5; background: #FAFAFE; }
|
||||
.payslip-month { font-size: 15px; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
|
||||
.payslip-net { font-size: 13px; color: #4F46E5; font-weight: 600; margin-bottom: 10px; }
|
||||
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-amber { background: #FFFBEB; color: #D97706; }
|
||||
.payslip-actions { margin-top: 12px; }
|
||||
.btn-download {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
width: 100%; padding: 8px 0; background: transparent; border: 1.5px solid #E2E8F0;
|
||||
border-radius: 7px; font-size: 12px; font-weight: 600; color: #64748B; cursor: pointer;
|
||||
font-family: 'Inter', sans-serif; justify-content: center;
|
||||
}
|
||||
.btn-download:hover { background: #F8FAFC; border-color: #4F46E5; color: #4F46E5; }
|
||||
.btn-download svg { width: 14px; height: 14px; }
|
||||
.payslip-card.pending .btn-download { opacity: 0.4; cursor: not-allowed; }
|
||||
|
||||
/* EXPANDED PAYSLIP */
|
||||
.payslip-detail { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; overflow: hidden; }
|
||||
.detail-header { background: #1E293B; padding: 20px 24px; color: #fff; }
|
||||
.detail-header-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
|
||||
.detail-company { font-size: 14px; font-weight: 700; color: #fff; }
|
||||
.detail-period { font-size: 12px; color: #94A3B8; }
|
||||
.detail-emp { font-size: 13px; color: #CBD5E1; }
|
||||
.detail-net { text-align: right; }
|
||||
.detail-net-label { font-size: 11px; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.detail-net-amount { font-size: 28px; font-weight: 800; color: #fff; }
|
||||
.detail-body { padding: 20px 24px; }
|
||||
.detail-section-title { font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
|
||||
.detail-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
|
||||
.detail-row { display: flex; justify-content: space-between; align-items: center; }
|
||||
.detail-row-label { font-size: 13px; color: #374151; }
|
||||
.detail-row-val { font-size: 13px; font-weight: 600; color: #0F172A; }
|
||||
.detail-divider { border: none; border-top: 1px solid #F1F5F9; margin: 8px 0 12px; }
|
||||
.detail-total-row { display: flex; justify-content: space-between; align-items: center; background: #F8FAFC; padding: 10px 12px; border-radius: 8px; margin-bottom: 16px; }
|
||||
.detail-total-label { font-size: 13px; font-weight: 700; color: #0F172A; }
|
||||
.detail-total-val { font-size: 14px; font-weight: 800; }
|
||||
.net-pay-bar { background: linear-gradient(135deg, #4F46E5, #7C3AED); padding: 14px 16px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; }
|
||||
.net-pay-label { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.8); }
|
||||
.net-pay-amount { font-size: 20px; font-weight: 800; color: #fff; }
|
||||
.btn-download-full { width: 100%; padding: 11px; background: #4F46E5; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; }
|
||||
.btn-download-full svg { width: 16px; height: 16px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="sidebar-logo-text">TechCorp HR</div>
|
||||
<div class="sidebar-logo-sub">Employee Portal</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main Menu</div>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>My Profile</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Attendance</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>Leave</a>
|
||||
<a class="nav-item active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>Payslips</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Reimbursements</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>Tax & Form 16</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>Announcements</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-user">
|
||||
<div class="avatar-sm">RS</div>
|
||||
<div>
|
||||
<div class="sidebar-user-name">Rahul Sharma</div>
|
||||
<div class="sidebar-user-role">EMP-00247 · Engineering</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-title">My Payslips</div>
|
||||
<div class="topbar-right">
|
||||
<button class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><span class="notif-dot"></span></button>
|
||||
<div class="topbar-user">
|
||||
<div><div class="topbar-user-name">Rahul Sharma</div><div class="topbar-user-id">EMP-00247</div></div>
|
||||
<div class="avatar">RS</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="page-title">Payslips</div>
|
||||
<div class="page-subtitle">View and download your monthly salary statements</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="two-cols">
|
||||
<!-- PAYSLIP LIST -->
|
||||
<div>
|
||||
<div class="year-filter">
|
||||
<label>Financial Year:</label>
|
||||
<select>
|
||||
<option>FY 2025-26</option>
|
||||
<option>FY 2024-25</option>
|
||||
<option>FY 2023-24</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="payslips-grid">
|
||||
<div class="payslip-card">
|
||||
<div class="payslip-month">May 2026</div>
|
||||
<div class="payslip-net">Net Pay: —</div>
|
||||
<span class="badge badge-amber">Not Generated</span>
|
||||
<div class="payslip-actions">
|
||||
<button class="btn-download" disabled>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
Download PDF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payslip-card highlighted">
|
||||
<div class="payslip-month">April 2026</div>
|
||||
<div class="payslip-net">Net Pay: ₹68,500</div>
|
||||
<span class="badge badge-green">Generated</span>
|
||||
<div class="payslip-actions">
|
||||
<button class="btn-download">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
Download PDF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payslip-card">
|
||||
<div class="payslip-month">March 2026</div>
|
||||
<div class="payslip-net">Net Pay: ₹68,500</div>
|
||||
<span class="badge badge-green">Generated</span>
|
||||
<div class="payslip-actions">
|
||||
<button class="btn-download">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
Download PDF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payslip-card">
|
||||
<div class="payslip-month">February 2026</div>
|
||||
<div class="payslip-net">Net Pay: ₹65,200</div>
|
||||
<span class="badge badge-green">Generated</span>
|
||||
<div class="payslip-actions">
|
||||
<button class="btn-download">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
Download PDF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payslip-card">
|
||||
<div class="payslip-month">January 2026</div>
|
||||
<div class="payslip-net">Net Pay: ₹68,500</div>
|
||||
<span class="badge badge-green">Generated</span>
|
||||
<div class="payslip-actions">
|
||||
<button class="btn-download">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
Download PDF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payslip-card">
|
||||
<div class="payslip-month">December 2025</div>
|
||||
<div class="payslip-net">Net Pay: ₹72,000</div>
|
||||
<span class="badge badge-green">Generated</span>
|
||||
<div class="payslip-actions">
|
||||
<button class="btn-download">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
Download PDF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payslip-card">
|
||||
<div class="payslip-month">November 2025</div>
|
||||
<div class="payslip-net">Net Pay: ₹68,500</div>
|
||||
<span class="badge badge-green">Generated</span>
|
||||
<div class="payslip-actions"><button class="btn-download"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>Download PDF</button></div>
|
||||
</div>
|
||||
<div class="payslip-card">
|
||||
<div class="payslip-month">October 2025</div>
|
||||
<div class="payslip-net">Net Pay: ₹68,500</div>
|
||||
<span class="badge badge-green">Generated</span>
|
||||
<div class="payslip-actions"><button class="btn-download"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>Download PDF</button></div>
|
||||
</div>
|
||||
<div class="payslip-card">
|
||||
<div class="payslip-month">September 2025</div>
|
||||
<div class="payslip-net">Net Pay: ₹68,500</div>
|
||||
<span class="badge badge-green">Generated</span>
|
||||
<div class="payslip-actions"><button class="btn-download"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>Download PDF</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAYSLIP DETAIL -->
|
||||
<div>
|
||||
<div style="font-size:13px;font-weight:700;color:#0F172A;margin-bottom:14px;">April 2026 — Breakdown</div>
|
||||
<div class="payslip-detail">
|
||||
<div class="detail-header">
|
||||
<div class="detail-header-top">
|
||||
<div>
|
||||
<div class="detail-company">TechCorp Solutions Pvt. Ltd.</div>
|
||||
<div class="detail-period">April 1–30, 2026 · 22 working days</div>
|
||||
<div class="detail-emp" style="margin-top:6px;">Rahul Sharma · EMP-00247<br/>Senior Software Engineer, Engineering</div>
|
||||
</div>
|
||||
<div class="detail-net">
|
||||
<div class="detail-net-label">Net Pay</div>
|
||||
<div class="detail-net-amount">₹68,500</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-body">
|
||||
<!-- EARNINGS -->
|
||||
<div class="detail-section-title" style="color:#10B981;">Earnings</div>
|
||||
<div class="detail-rows">
|
||||
<div class="detail-row">
|
||||
<span class="detail-row-label">Basic Salary</span>
|
||||
<span class="detail-row-val">₹40,000</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-row-label">House Rent Allowance (HRA)</span>
|
||||
<span class="detail-row-val">₹16,000</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-row-label">Dearness Allowance (DA)</span>
|
||||
<span class="detail-row-val">₹4,000</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-row-label">Special Allowance</span>
|
||||
<span class="detail-row-val">₹10,000</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-row-label">Transport Allowance</span>
|
||||
<span class="detail-row-val">₹3,200</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-total-row">
|
||||
<span class="detail-total-label">Gross Earnings</span>
|
||||
<span class="detail-total-val" style="color:#10B981;">₹73,200</span>
|
||||
</div>
|
||||
|
||||
<!-- DEDUCTIONS -->
|
||||
<div class="detail-section-title" style="color:#EF4444;">Deductions</div>
|
||||
<div class="detail-rows">
|
||||
<div class="detail-row">
|
||||
<span class="detail-row-label">Provident Fund (PF)</span>
|
||||
<span class="detail-row-val" style="color:#EF4444;">−₹4,800</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-row-label">Professional Tax (PT)</span>
|
||||
<span class="detail-row-val" style="color:#EF4444;">−₹200</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-row-label">TDS (Income Tax)</span>
|
||||
<span class="detail-row-val" style="color:#EF4444;">−₹8,700</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-row-label">ESI Contribution</span>
|
||||
<span class="detail-row-val" style="color:#EF4444;">−₹0</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-total-row">
|
||||
<span class="detail-total-label">Total Deductions</span>
|
||||
<span class="detail-total-val" style="color:#EF4444;">₹13,700</span>
|
||||
</div>
|
||||
|
||||
<div class="net-pay-bar">
|
||||
<span class="net-pay-label">NET PAY (Take Home)</span>
|
||||
<span class="net-pay-amount">₹68,500</span>
|
||||
</div>
|
||||
|
||||
<button class="btn-download-full">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
Download April 2026 Payslip PDF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,310 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HR Portal — Reimbursements</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; background: #F8FAFC; color: #0F172A; display: flex; min-height: 100vh; }
|
||||
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #1E293B; display: flex; flex-direction: column; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-logo-icon { width: 36px; height: 36px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.sidebar-nav { padding: 16px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.8px; padding: 12px 20px 6px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 14px; font-weight: 500; color: #94A3B8; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; }
|
||||
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.nav-item.active { color: #818CF8; background: rgba(79,70,229,0.15); border-left-color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.08); }
|
||||
.sidebar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #E2E8F0; }
|
||||
.sidebar-user-role { font-size: 11px; color: #64748B; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #fff; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 10; }
|
||||
.topbar-title { font-size: 16px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.icon-btn { width: 38px; height: 38px; border-radius: 8px; background: #F1F5F9; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: #EF4444; border-radius: 50%; border: 2px solid #fff; }
|
||||
.topbar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #4F46E5; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.topbar-user-name { font-size: 14px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-user-id { font-size: 12px; color: #64748B; }
|
||||
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
|
||||
.page-title { font-size: 20px; font-weight: 700; color: #0F172A; }
|
||||
.page-subtitle { font-size: 13px; color: #64748B; margin-top: 3px; }
|
||||
.btn-primary { background: #4F46E5; color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 8px; }
|
||||
.btn-primary svg { width: 16px; height: 16px; }
|
||||
|
||||
/* STATS ROW */
|
||||
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
|
||||
.stat-card { background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; }
|
||||
.stat-label { font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
|
||||
.stat-value { font-size: 22px; font-weight: 800; color: #0F172A; }
|
||||
.stat-sub { font-size: 11px; color: #94A3B8; margin-top: 4px; }
|
||||
|
||||
/* CLAIM FORM */
|
||||
.form-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; margin-bottom: 24px; }
|
||||
.form-title { font-size: 14px; font-weight: 700; color: #0F172A; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
|
||||
.form-title svg { width: 18px; height: 18px; color: #4F46E5; }
|
||||
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
|
||||
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||||
.form-group.full { grid-column: 1 / -1; }
|
||||
.form-group.two-cols { grid-column: span 2; }
|
||||
label { font-size: 12px; font-weight: 600; color: #374151; }
|
||||
input, select, textarea { padding: 9px 12px; border: 1.5px solid #E2E8F0; border-radius: 8px; font-size: 13px; font-family: 'Inter', sans-serif; color: #0F172A; background: #fff; outline: none; width: 100%; }
|
||||
input:focus, select:focus, textarea:focus { border-color: #4F46E5; }
|
||||
textarea { resize: vertical; min-height: 70px; }
|
||||
.upload-zone { border: 2px dashed #E2E8F0; border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; background: #F8FAFC; }
|
||||
.upload-zone:hover { border-color: #4F46E5; background: #EEF2FF; }
|
||||
.upload-zone svg { width: 24px; height: 24px; color: #94A3B8; margin-bottom: 6px; }
|
||||
.upload-zone p { font-size: 12px; color: #64748B; }
|
||||
.upload-zone strong { color: #4F46E5; }
|
||||
.form-actions { display: flex; gap: 10px; justify-content: flex-end; }
|
||||
.btn-outline { background: #fff; color: #64748B; border: 1.5px solid #E2E8F0; border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; }
|
||||
.btn-submit { background: #4F46E5; color: #fff; border: none; border-radius: 8px; padding: 9px 20px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; }
|
||||
|
||||
/* TABLE */
|
||||
.table-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; overflow: hidden; }
|
||||
.table-header { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #F1F5F9; }
|
||||
.table-title { font-size: 14px; font-weight: 700; color: #0F172A; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead th { background: #F8FAFC; padding: 11px 16px; text-align: left; font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #E2E8F0; }
|
||||
tbody td { padding: 13px 16px; font-size: 13px; color: #374151; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
|
||||
tbody tr:last-child td { border-bottom: none; }
|
||||
tbody tr:hover { background: #FAFBFC; }
|
||||
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-amber { background: #FFFBEB; color: #D97706; }
|
||||
.badge-red { background: #FEF2F2; color: #DC2626; }
|
||||
.badge-blue { background: #EFF6FF; color: #2563EB; }
|
||||
.badge-indigo { background: #EEF2FF; color: #4F46E5; }
|
||||
.cat-badge { font-size: 12px; font-weight: 600; }
|
||||
.view-link { font-size: 12px; color: #4F46E5; font-weight: 600; cursor: pointer; text-decoration: none; }
|
||||
.view-link:hover { text-decoration: underline; }
|
||||
.amount-col { font-weight: 700; color: #0F172A; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="sidebar-logo-text">TechCorp HR</div>
|
||||
<div class="sidebar-logo-sub">Employee Portal</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main Menu</div>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>My Profile</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Attendance</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>Leave</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>Payslips</a>
|
||||
<a class="nav-item active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/></svg>Reimbursements</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>Tax & Form 16</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>Announcements</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-user">
|
||||
<div class="avatar-sm">RS</div>
|
||||
<div>
|
||||
<div class="sidebar-user-name">Rahul Sharma</div>
|
||||
<div class="sidebar-user-role">EMP-00247 · Engineering</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-title">Reimbursements</div>
|
||||
<div class="topbar-right">
|
||||
<button class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><span class="notif-dot"></span></button>
|
||||
<div class="topbar-user">
|
||||
<div><div class="topbar-user-name">Rahul Sharma</div><div class="topbar-user-id">EMP-00247</div></div>
|
||||
<div class="avatar">RS</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="page-title">My Reimbursements</div>
|
||||
<div class="page-subtitle">Submit expense claims and track approval status</div>
|
||||
</div>
|
||||
<button class="btn-primary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
Submit Claim
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- STATS ROW -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Total Claimed (FY)</div>
|
||||
<div class="stat-value">₹24,500</div>
|
||||
<div class="stat-sub">Across all categories</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Approved</div>
|
||||
<div class="stat-value" style="color:#10B981;">₹18,000</div>
|
||||
<div class="stat-sub">8 claims approved</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Pending</div>
|
||||
<div class="stat-value" style="color:#F59E0B;">₹4,500</div>
|
||||
<div class="stat-sub">2 claims awaiting</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Rejected</div>
|
||||
<div class="stat-value" style="color:#EF4444;">₹2,000</div>
|
||||
<div class="stat-sub">1 claim rejected</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SUBMIT FORM -->
|
||||
<div class="form-card">
|
||||
<div class="form-title">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/></svg>
|
||||
Submit New Claim
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label>Category</label>
|
||||
<select>
|
||||
<option>Travel</option>
|
||||
<option>Food & Meals</option>
|
||||
<option>Medical</option>
|
||||
<option>Internet / WFH</option>
|
||||
<option>Stationery</option>
|
||||
<option>Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Expense Date</label>
|
||||
<input type="date" value="2026-05-03" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Amount (₹)</label>
|
||||
<input type="number" placeholder="0.00" value="3200" />
|
||||
</div>
|
||||
<div class="form-group two-cols">
|
||||
<label>Description</label>
|
||||
<input type="text" placeholder="Brief description of the expense..." value="Cab fare to client office — Bandra to Nariman Point (return trip)" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Receipt / Bill</label>
|
||||
<div class="upload-zone">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
||||
<p><strong>Click to upload</strong> or drag & drop<br/>JPG, PNG, PDF up to 5 MB</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group full" style="display:flex;gap:10px;justify-content:flex-end;align-items:flex-end;">
|
||||
<button class="btn-outline">Cancel</button>
|
||||
<button class="btn-submit">Submit Claim</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CLAIMS TABLE -->
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<div class="table-title">Claim History</div>
|
||||
<select style="width:auto;padding:6px 12px;font-size:12px;">
|
||||
<option>All Categories</option>
|
||||
<option>Travel</option>
|
||||
<option>Food</option>
|
||||
<option>Medical</option>
|
||||
</select>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Category</th>
|
||||
<th>Amount</th>
|
||||
<th>Description</th>
|
||||
<th>Status</th>
|
||||
<th>Receipt</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>May 3, 2026</td>
|
||||
<td><span class="badge badge-blue">Travel</span></td>
|
||||
<td class="amount-col">₹3,200</td>
|
||||
<td>Cab fare — Bandra to Nariman Point (return)</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="view-link">View</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Apr 28, 2026</td>
|
||||
<td><span class="badge badge-green">Medical</span></td>
|
||||
<td class="amount-col">₹1,800</td>
|
||||
<td>Pharmacy bill — cold & flu medication</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="view-link">View</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Apr 15, 2026</td>
|
||||
<td><span class="badge badge-blue">Travel</span></td>
|
||||
<td class="amount-col">₹5,400</td>
|
||||
<td>Train tickets — Mumbai to Pune (client visit, 2 persons)</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
<td><a href="#" class="view-link">View</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Apr 10, 2026</td>
|
||||
<td><span class="badge" style="background:#FFF7ED;color:#C2410C;">Food</span></td>
|
||||
<td class="amount-col">₹2,400</td>
|
||||
<td>Team lunch — sprint retrospective (8 members)</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
<td><a href="#" class="view-link">View</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mar 22, 2026</td>
|
||||
<td><span class="badge badge-blue">Travel</span></td>
|
||||
<td class="amount-col">₹8,200</td>
|
||||
<td>Flight — Mumbai to Bangalore (quarterly review)</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
<td><a href="#" class="view-link">View</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mar 5, 2026</td>
|
||||
<td><span class="badge" style="background:#F5F3FF;color:#7C3AED;">Internet</span></td>
|
||||
<td class="amount-col">₹2,000</td>
|
||||
<td>Home broadband upgrade for WFH — March</td>
|
||||
<td><span class="badge badge-red">Rejected</span></td>
|
||||
<td><a href="#" class="view-link">View</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Feb 18, 2026</td>
|
||||
<td><span class="badge" style="background:#FFF7ED;color:#C2410C;">Food</span></td>
|
||||
<td class="amount-col">₹1,800</td>
|
||||
<td>Client dinner — product demo at Taj</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
<td><a href="#" class="view-link">View</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,416 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HR Portal — Payroll Management</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; background: #F8FAFC; color: #0F172A; display: flex; min-height: 100vh; }
|
||||
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #1E293B; display: flex; flex-direction: column; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-logo-icon { width: 36px; height: 36px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.sidebar-nav { padding: 16px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.8px; padding: 12px 20px 6px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 14px; font-weight: 500; color: #94A3B8; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; }
|
||||
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.nav-item.active { color: #818CF8; background: rgba(79,70,229,0.15); border-left-color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #EF4444; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
|
||||
.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.08); }
|
||||
.sidebar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: #7C3AED; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #E2E8F0; }
|
||||
.sidebar-user-role { font-size: 11px; color: #64748B; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #fff; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 10; }
|
||||
.topbar-left { display: flex; align-items: center; gap: 12px; }
|
||||
.topbar-title { font-size: 16px; font-weight: 600; color: #0F172A; }
|
||||
.role-badge { background: #7C3AED; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.icon-btn { width: 38px; height: 38px; border-radius: 8px; background: #F1F5F9; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: #EF4444; border-radius: 50%; border: 2px solid #fff; }
|
||||
.topbar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #7C3AED; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.topbar-user-name { font-size: 14px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-user-id { font-size: 12px; color: #64748B; }
|
||||
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
|
||||
.page-title { font-size: 20px; font-weight: 700; color: #0F172A; }
|
||||
.page-subtitle { font-size: 13px; color: #64748B; margin-top: 3px; }
|
||||
.header-actions { display: flex; gap: 10px; }
|
||||
.btn-primary { background: #4F46E5; color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 8px; }
|
||||
.btn-primary svg { width: 16px; height: 16px; }
|
||||
.btn-outline { background: #fff; color: #374151; border: 1.5px solid #E2E8F0; border-radius: 8px; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 8px; }
|
||||
.btn-outline svg { width: 16px; height: 16px; }
|
||||
|
||||
/* CONTROLS */
|
||||
.controls-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; background: #fff; padding: 16px 20px; border-radius: 12px; border: 1px solid #F1F5F9; }
|
||||
.month-picker { display: flex; align-items: center; gap: 10px; }
|
||||
.month-picker label { font-size: 13px; font-weight: 600; color: #374151; }
|
||||
select { padding: 8px 12px; border: 1.5px solid #E2E8F0; border-radius: 8px; font-size: 13px; font-family: 'Inter', sans-serif; color: #374151; background: #fff; outline: none; }
|
||||
select:focus { border-color: #4F46E5; }
|
||||
.status-info { display: flex; align-items: center; gap: 10px; }
|
||||
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
|
||||
.status-text { font-size: 13px; font-weight: 600; }
|
||||
|
||||
/* SUMMARY CARDS */
|
||||
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
|
||||
.sum-card { background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; }
|
||||
.sum-label { font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
|
||||
.sum-value { font-size: 22px; font-weight: 800; color: #0F172A; }
|
||||
.sum-sub { font-size: 11px; color: #94A3B8; margin-top: 4px; }
|
||||
|
||||
/* TABLE */
|
||||
.table-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; overflow: hidden; }
|
||||
.table-header { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #F1F5F9; }
|
||||
.table-title { font-size: 14px; font-weight: 700; color: #0F172A; }
|
||||
table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||||
thead th { background: #F8FAFC; padding: 11px 12px; text-align: left; font-size: 10px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #E2E8F0; white-space: nowrap; }
|
||||
thead th:first-child { padding-left: 20px; }
|
||||
tbody td { padding: 13px 12px; font-size: 12px; color: #374151; border-bottom: 1px solid #F1F5F9; vertical-align: middle; white-space: nowrap; }
|
||||
tbody td:first-child { padding-left: 20px; }
|
||||
tbody tr:last-child td { border-bottom: none; }
|
||||
tbody tr:hover { background: #FAFBFC; }
|
||||
.emp-name-cell { font-weight: 600; color: #0F172A; font-size: 13px; }
|
||||
.emp-id-cell { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.amount-cell { font-weight: 600; }
|
||||
.net-cell { font-weight: 700; color: #0F172A; font-size: 13px; }
|
||||
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-amber { background: #FFFBEB; color: #D97706; }
|
||||
.download-link { font-size: 12px; color: #4F46E5; font-weight: 600; cursor: pointer; text-decoration: none; }
|
||||
.download-link:hover { text-decoration: underline; }
|
||||
.footer-totals { background: #F8FAFC; border-top: 2px solid #E2E8F0; }
|
||||
.footer-totals td { padding: 14px 12px; font-weight: 700; color: #0F172A; font-size: 12px; }
|
||||
.footer-totals td:first-child { padding-left: 20px; font-size: 13px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="sidebar-logo-text">TechCorp HR</div>
|
||||
<div class="sidebar-logo-sub">Admin Portal</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Administration</div>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Employees</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Attendance</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>Leave Approvals<span class="nav-badge">12</span></a>
|
||||
<a class="nav-item active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>Payroll</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Reimbursements<span class="nav-badge">8</span></a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>Announcements</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Reports</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-user">
|
||||
<div class="avatar-sm">PK</div>
|
||||
<div>
|
||||
<div class="sidebar-user-name">Priya Kapoor</div>
|
||||
<div class="sidebar-user-role">HR Admin · EMP-00012</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-left">
|
||||
<div class="topbar-title">Payroll Management</div>
|
||||
<span class="role-badge">HR ADMIN</span>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<button class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><span class="notif-dot"></span></button>
|
||||
<div class="topbar-user">
|
||||
<div><div class="topbar-user-name">Priya Kapoor</div><div class="topbar-user-id">HR Admin</div></div>
|
||||
<div class="avatar">PK</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="page-title">Payroll Management — May 2026</div>
|
||||
<div class="page-subtitle">Process, review and export monthly salary data</div>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="btn-outline">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
Export CSV
|
||||
</button>
|
||||
<button class="btn-primary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||||
Generate Payroll
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CONTROLS BAR -->
|
||||
<div class="controls-bar">
|
||||
<div class="month-picker">
|
||||
<label>Period:</label>
|
||||
<select>
|
||||
<option>May 2026</option>
|
||||
<option>April 2026</option>
|
||||
<option>March 2026</option>
|
||||
</select>
|
||||
<select>
|
||||
<option>All Departments</option>
|
||||
<option>Engineering</option>
|
||||
<option>Finance</option>
|
||||
<option>Sales</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="status-info">
|
||||
<div class="status-dot" style="background:#F59E0B;"></div>
|
||||
<span class="status-text" style="color:#D97706;">Status: Not Generated — Attendance closes May 28</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SUMMARY CARDS -->
|
||||
<div class="summary-grid">
|
||||
<div class="sum-card">
|
||||
<div class="sum-label">Total Employees</div>
|
||||
<div class="sum-value">247</div>
|
||||
<div class="sum-sub">All active employees</div>
|
||||
</div>
|
||||
<div class="sum-card">
|
||||
<div class="sum-label">Total Gross</div>
|
||||
<div class="sum-value" style="color:#4F46E5;">₹1,24,35,000</div>
|
||||
<div class="sum-sub">Before deductions</div>
|
||||
</div>
|
||||
<div class="sum-card">
|
||||
<div class="sum-label">Total Deductions</div>
|
||||
<div class="sum-value" style="color:#EF4444;">₹18,65,000</div>
|
||||
<div class="sum-sub">PF + TDS + PT</div>
|
||||
</div>
|
||||
<div class="sum-card">
|
||||
<div class="sum-label">Total Net Pay</div>
|
||||
<div class="sum-value" style="color:#10B981;">₹1,05,70,000</div>
|
||||
<div class="sum-sub">Take-home amount</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAYROLL TABLE -->
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<div class="table-title">Employee Payroll Details — May 2026</div>
|
||||
<div style="display:flex;gap:8px;align-items:center;">
|
||||
<span style="font-size:12px;color:#64748B;">Showing 1–10 of 247</span>
|
||||
</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Employee</th>
|
||||
<th>Basic</th>
|
||||
<th>HRA</th>
|
||||
<th>DA</th>
|
||||
<th>Gross</th>
|
||||
<th>PF</th>
|
||||
<th>TDS</th>
|
||||
<th>PT</th>
|
||||
<th>Net Pay</th>
|
||||
<th>Status</th>
|
||||
<th>Payslip</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name-cell">Rahul Sharma</div>
|
||||
<div class="emp-id-cell">EMP-00247 · Engineering</div>
|
||||
</td>
|
||||
<td class="amount-cell">₹40,000</td>
|
||||
<td class="amount-cell">₹16,000</td>
|
||||
<td class="amount-cell">₹4,000</td>
|
||||
<td class="amount-cell" style="color:#4F46E5;">₹73,200</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹4,800</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹8,700</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹200</td>
|
||||
<td class="net-cell">₹59,500</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="download-link">—</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name-cell">Sunita Mehta</div>
|
||||
<div class="emp-id-cell">EMP-00091 · Finance</div>
|
||||
</td>
|
||||
<td class="amount-cell">₹52,000</td>
|
||||
<td class="amount-cell">₹20,800</td>
|
||||
<td class="amount-cell">₹5,200</td>
|
||||
<td class="amount-cell" style="color:#4F46E5;">₹91,600</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹6,240</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹14,200</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹200</td>
|
||||
<td class="net-cell">₹70,960</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="download-link">—</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name-cell">Vikram Nair</div>
|
||||
<div class="emp-id-cell">EMP-00147 · Sales</div>
|
||||
</td>
|
||||
<td class="amount-cell">₹45,000</td>
|
||||
<td class="amount-cell">₹18,000</td>
|
||||
<td class="amount-cell">₹4,500</td>
|
||||
<td class="amount-cell" style="color:#4F46E5;">₹82,500</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹5,400</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹11,500</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹200</td>
|
||||
<td class="net-cell">₹65,400</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="download-link">—</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name-cell">Meera Iyer</div>
|
||||
<div class="emp-id-cell">EMP-00229 · HR</div>
|
||||
</td>
|
||||
<td class="amount-cell">₹38,000</td>
|
||||
<td class="amount-cell">₹15,200</td>
|
||||
<td class="amount-cell">₹3,800</td>
|
||||
<td class="amount-cell" style="color:#4F46E5;">₹68,400</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹4,560</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹7,200</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹200</td>
|
||||
<td class="net-cell">₹56,440</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="download-link">—</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name-cell">Deepak Joshi</div>
|
||||
<div class="emp-id-cell">EMP-00064 · Operations</div>
|
||||
</td>
|
||||
<td class="amount-cell">₹58,000</td>
|
||||
<td class="amount-cell">₹23,200</td>
|
||||
<td class="amount-cell">₹5,800</td>
|
||||
<td class="amount-cell" style="color:#4F46E5;">₹1,01,800</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹6,960</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹18,200</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹200</td>
|
||||
<td class="net-cell">₹76,440</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="download-link">—</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name-cell">Ananya Gupta</div>
|
||||
<div class="emp-id-cell">EMP-00198 · Engineering</div>
|
||||
</td>
|
||||
<td class="amount-cell">₹32,000</td>
|
||||
<td class="amount-cell">₹12,800</td>
|
||||
<td class="amount-cell">₹3,200</td>
|
||||
<td class="amount-cell" style="color:#4F46E5;">₹58,200</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹3,840</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹4,800</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹200</td>
|
||||
<td class="net-cell">₹49,360</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="download-link">—</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name-cell">Arun Krishnamurthy</div>
|
||||
<div class="emp-id-cell">EMP-00178 · Engineering</div>
|
||||
</td>
|
||||
<td class="amount-cell">₹70,000</td>
|
||||
<td class="amount-cell">₹28,000</td>
|
||||
<td class="amount-cell">₹7,000</td>
|
||||
<td class="amount-cell" style="color:#4F46E5;">₹1,22,500</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹8,400</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹24,000</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹200</td>
|
||||
<td class="net-cell">₹89,900</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="download-link">—</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name-cell">Neha Reddy</div>
|
||||
<div class="emp-id-cell">EMP-00215 · Sales</div>
|
||||
</td>
|
||||
<td class="amount-cell">₹28,000</td>
|
||||
<td class="amount-cell">₹11,200</td>
|
||||
<td class="amount-cell">₹2,800</td>
|
||||
<td class="amount-cell" style="color:#4F46E5;">₹51,400</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹3,360</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹3,200</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹200</td>
|
||||
<td class="net-cell">₹44,640</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="download-link">—</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name-cell">Preethi Venkataraman</div>
|
||||
<div class="emp-id-cell">EMP-00052 · Finance</div>
|
||||
</td>
|
||||
<td class="amount-cell">₹44,000</td>
|
||||
<td class="amount-cell">₹17,600</td>
|
||||
<td class="amount-cell">₹4,400</td>
|
||||
<td class="amount-cell" style="color:#4F46E5;">₹79,200</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹5,280</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹10,400</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹200</td>
|
||||
<td class="net-cell">₹63,320</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="download-link">—</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name-cell">Rohit Bhatia</div>
|
||||
<div class="emp-id-cell">EMP-00110 · Operations</div>
|
||||
</td>
|
||||
<td class="amount-cell">₹35,000</td>
|
||||
<td class="amount-cell">₹14,000</td>
|
||||
<td class="amount-cell">₹3,500</td>
|
||||
<td class="amount-cell" style="color:#4F46E5;">₹63,000</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹4,200</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹6,200</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹200</td>
|
||||
<td class="net-cell">₹52,400</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="download-link">—</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr class="footer-totals">
|
||||
<td>Totals (10 shown / 247 total)</td>
|
||||
<td>₹4,42,000</td>
|
||||
<td>₹1,76,800</td>
|
||||
<td>₹44,200</td>
|
||||
<td style="color:#4F46E5;">₹7,91,800</td>
|
||||
<td style="color:#EF4444;">₹53,040</td>
|
||||
<td style="color:#EF4444;">₹1,08,400</td>
|
||||
<td style="color:#EF4444;">₹2,000</td>
|
||||
<td style="color:#10B981;">₹6,28,360</td>
|
||||
<td colspan="2"></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,428 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HR Portal — Super Admin</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; background: #F8FAFC; color: #0F172A; display: flex; min-height: 100vh; }
|
||||
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #0F172A; display: flex; flex-direction: column; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, #7C3AED, #4F46E5); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 11px; color: #64748B; margin-top: 1px; }
|
||||
.sidebar-nav { padding: 16px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; color: #334155; text-transform: uppercase; letter-spacing: 0.8px; padding: 12px 20px 6px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 14px; font-weight: 500; color: #64748B; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; }
|
||||
.nav-item:hover { color: #CBD5E1; background: rgba(255,255,255,0.03); }
|
||||
.nav-item.active { color: #A5B4FC; background: rgba(99,102,241,0.15); border-left-color: #6366F1; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.06); }
|
||||
.sidebar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #7C3AED, #4F46E5); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #E2E8F0; }
|
||||
.sidebar-user-role { font-size: 11px; color: #475569; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #fff; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 10; }
|
||||
.topbar-left { display: flex; align-items: center; gap: 12px; }
|
||||
.topbar-title { font-size: 16px; font-weight: 600; color: #0F172A; }
|
||||
.super-badge { background: linear-gradient(135deg, #7C3AED, #4F46E5); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.icon-btn { width: 38px; height: 38px; border-radius: 8px; background: #F1F5F9; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.topbar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #7C3AED, #4F46E5); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.topbar-user-name { font-size: 14px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-user-id { font-size: 12px; color: #64748B; }
|
||||
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
|
||||
.page-title { font-size: 20px; font-weight: 700; color: #0F172A; }
|
||||
.page-subtitle { font-size: 13px; color: #64748B; margin-top: 3px; }
|
||||
.btn-primary { background: linear-gradient(135deg, #7C3AED, #4F46E5); color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 8px; }
|
||||
.btn-primary svg { width: 16px; height: 16px; }
|
||||
|
||||
/* STATS ROW */
|
||||
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
|
||||
.stat-card { background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; }
|
||||
.stat-label { font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
|
||||
.stat-value { font-size: 24px; font-weight: 800; color: #0F172A; }
|
||||
.stat-sub { font-size: 11px; color: #94A3B8; margin-top: 4px; }
|
||||
|
||||
/* TABLE */
|
||||
.table-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; overflow: hidden; margin-bottom: 24px; }
|
||||
.table-header { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #F1F5F9; }
|
||||
.table-title { font-size: 14px; font-weight: 700; color: #0F172A; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead th { background: #F8FAFC; padding: 11px 16px; text-align: left; font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #E2E8F0; }
|
||||
tbody td { padding: 14px 16px; font-size: 13px; color: #374151; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
|
||||
tbody tr:last-child td { border-bottom: none; }
|
||||
tbody tr:hover { background: #FAFBFC; }
|
||||
.admin-cell { display: flex; align-items: center; gap: 12px; }
|
||||
.admin-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.admin-name { font-weight: 600; color: #0F172A; font-size: 14px; }
|
||||
.admin-email { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-red { background: #FEF2F2; color: #DC2626; }
|
||||
.badge-purple { background: #F5F3FF; color: #7C3AED; }
|
||||
.action-btns { display: flex; gap: 8px; }
|
||||
.btn-sm { padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; font-family: 'Inter', sans-serif; }
|
||||
.btn-deactivate { background: #FEF2F2; color: #DC2626; }
|
||||
.btn-reset { background: #EEF2FF; color: #4F46E5; }
|
||||
.btn-deactivate:hover { background: #FEE2E2; }
|
||||
.btn-reset:hover { background: #E0E7FF; }
|
||||
.btn-activate { background: #ECFDF5; color: #059669; }
|
||||
.btn-activate:hover { background: #D1FAE5; }
|
||||
|
||||
/* ORG SETTINGS PREVIEW */
|
||||
.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
|
||||
.settings-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; }
|
||||
.settings-card-title { font-size: 14px; font-weight: 700; color: #0F172A; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
|
||||
.settings-card-title svg { width: 18px; height: 18px; color: #4F46E5; }
|
||||
.settings-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #F8FAFC; }
|
||||
.settings-row:last-child { border-bottom: none; }
|
||||
.settings-label { font-size: 13px; color: #374151; }
|
||||
.settings-val { font-size: 13px; font-weight: 600; color: #0F172A; }
|
||||
.toggle { width: 36px; height: 20px; border-radius: 999px; background: #4F46E5; display: flex; align-items: center; padding: 2px; cursor: pointer; }
|
||||
.toggle-knob { width: 16px; height: 16px; border-radius: 50%; background: #fff; margin-left: auto; }
|
||||
.toggle.off { background: #E2E8F0; }
|
||||
.toggle.off .toggle-knob { margin-left: 2px; margin-right: auto; }
|
||||
|
||||
/* AUDIT LOG */
|
||||
.audit-list { display: flex; flex-direction: column; gap: 0; }
|
||||
.audit-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #F1F5F9; }
|
||||
.audit-item:last-child { border-bottom: none; }
|
||||
.audit-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.audit-icon svg { width: 15px; height: 15px; }
|
||||
.audit-action { font-size: 13px; font-weight: 600; color: #0F172A; margin-bottom: 2px; }
|
||||
.audit-detail { font-size: 12px; color: #64748B; }
|
||||
.audit-time { font-size: 11px; color: #94A3B8; margin-left: auto; white-space: nowrap; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="sidebar-logo-text">TechCorp HR</div>
|
||||
<div class="sidebar-logo-sub">Super Admin</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Super Admin</div>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
|
||||
<a class="nav-item active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Admin Accounts</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M5.34 18.66l-1.41 1.41M20.49 12H22M2 12H3.51M19.07 19.07l-1.41-1.41M5.34 5.34 3.93 3.93M12 20.49V22M12 2v1.51"/></svg>Org Settings</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>Audit Log</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-user">
|
||||
<div class="avatar-sm">SA</div>
|
||||
<div>
|
||||
<div class="sidebar-user-name">Super Admin</div>
|
||||
<div class="sidebar-user-role">Root · All Permissions</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-left">
|
||||
<div class="topbar-title">Admin Accounts</div>
|
||||
<span class="super-badge">SUPER ADMIN</span>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<button class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></button>
|
||||
<div class="topbar-user">
|
||||
<div><div class="topbar-user-name">Super Admin</div><div class="topbar-user-id">Root Access</div></div>
|
||||
<div class="avatar">SA</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="page-title">HR Admin Accounts</div>
|
||||
<div class="page-subtitle">Manage HR administrators — create, deactivate, and reset passwords</div>
|
||||
</div>
|
||||
<button class="btn-primary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
Create HR Admin
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- STATS -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Total HR Admins</div>
|
||||
<div class="stat-value">8</div>
|
||||
<div class="stat-sub">Across all locations</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Active</div>
|
||||
<div class="stat-value" style="color:#10B981;">6</div>
|
||||
<div class="stat-sub">Can access system</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Inactive</div>
|
||||
<div class="stat-value" style="color:#94A3B8;">2</div>
|
||||
<div class="stat-sub">Deactivated accounts</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Last Login</div>
|
||||
<div class="stat-value" style="font-size:16px;">2 min ago</div>
|
||||
<div class="stat-sub">priya.kapoor@techcorp.in</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ADMINS TABLE -->
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<div class="table-title">HR Administrator Accounts</div>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<input type="text" placeholder="Search admins..." style="padding:6px 12px;border:1.5px solid #E2E8F0;border-radius:7px;font-size:12px;font-family:Inter,sans-serif;outline:none;width:200px;" />
|
||||
</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Administrator</th>
|
||||
<th>Email</th>
|
||||
<th>Employee ID</th>
|
||||
<th>Created On</th>
|
||||
<th>Last Login</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="admin-cell">
|
||||
<div class="admin-avatar" style="background:#7C3AED;">PK</div>
|
||||
<div>
|
||||
<div class="admin-name">Priya Kapoor</div>
|
||||
<div class="admin-email">HR Manager — Mumbai HQ</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>priya.kapoor@techcorp.in</td>
|
||||
<td>EMP-00012</td>
|
||||
<td>Jan 15, 2020</td>
|
||||
<td>2 min ago</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<button class="btn-sm btn-reset">Reset Password</button>
|
||||
<button class="btn-sm btn-deactivate">Deactivate</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="admin-cell">
|
||||
<div class="admin-avatar" style="background:#0EA5E9;">SM</div>
|
||||
<div>
|
||||
<div class="admin-name">Suresh Menon</div>
|
||||
<div class="admin-email">HR Lead — Bangalore</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>suresh.menon@techcorp.in</td>
|
||||
<td>EMP-00028</td>
|
||||
<td>Mar 8, 2021</td>
|
||||
<td>1 day ago</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<button class="btn-sm btn-reset">Reset Password</button>
|
||||
<button class="btn-sm btn-deactivate">Deactivate</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="admin-cell">
|
||||
<div class="admin-avatar" style="background:#10B981;">AR</div>
|
||||
<div>
|
||||
<div class="admin-name">Anita Rao</div>
|
||||
<div class="admin-email">HR Exec — Pune</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>anita.rao@techcorp.in</td>
|
||||
<td>EMP-00041</td>
|
||||
<td>Sep 22, 2021</td>
|
||||
<td>3 hours ago</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<button class="btn-sm btn-reset">Reset Password</button>
|
||||
<button class="btn-sm btn-deactivate">Deactivate</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="admin-cell">
|
||||
<div class="admin-avatar" style="background:#F59E0B;">NP</div>
|
||||
<div>
|
||||
<div class="admin-name">Nikhil Patel</div>
|
||||
<div class="admin-email">HR Specialist — Delhi</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>nikhil.patel@techcorp.in</td>
|
||||
<td>EMP-00075</td>
|
||||
<td>Feb 14, 2023</td>
|
||||
<td>2 days ago</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<button class="btn-sm btn-reset">Reset Password</button>
|
||||
<button class="btn-sm btn-deactivate">Deactivate</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="opacity:0.6;">
|
||||
<td>
|
||||
<div class="admin-cell">
|
||||
<div class="admin-avatar" style="background:#64748B;">RV</div>
|
||||
<div>
|
||||
<div class="admin-name">Ravi Varma</div>
|
||||
<div class="admin-email">HR Exec — Chennai (former)</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>ravi.varma@techcorp.in</td>
|
||||
<td>EMP-00031</td>
|
||||
<td>Jun 10, 2020</td>
|
||||
<td>Apr 1, 2026</td>
|
||||
<td><span class="badge badge-red">Inactive</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<button class="btn-sm btn-activate">Activate</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- ORG SETTINGS + AUDIT LOG -->
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
|
||||
<!-- ORG SETTINGS -->
|
||||
<div>
|
||||
<div style="font-size:14px;font-weight:700;color:#0F172A;margin-bottom:14px;">Organisation Settings</div>
|
||||
<div class="settings-grid">
|
||||
<div class="settings-card">
|
||||
<div class="settings-card-title">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
Leave Policy
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">CL per year</span>
|
||||
<span class="settings-val">12 days</span>
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">SL per year</span>
|
||||
<span class="settings-val">12 days</span>
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">EL per year</span>
|
||||
<span class="settings-val">15 days</span>
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">Carry forward</span>
|
||||
<div class="toggle"><div class="toggle-knob"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-card">
|
||||
<div class="settings-card-title">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M5.34 18.66l-1.41 1.41"/></svg>
|
||||
System Settings
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">Two-factor auth</span>
|
||||
<div class="toggle"><div class="toggle-knob"></div></div>
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">Email notifications</span>
|
||||
<div class="toggle"><div class="toggle-knob"></div></div>
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">Auto payroll lock</span>
|
||||
<div class="toggle off"><div class="toggle-knob"></div></div>
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">Session timeout</span>
|
||||
<span class="settings-val">8 hours</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AUDIT LOG -->
|
||||
<div>
|
||||
<div style="font-size:14px;font-weight:700;color:#0F172A;margin-bottom:14px;">Recent Audit Log</div>
|
||||
<div class="table-card">
|
||||
<div class="audit-list">
|
||||
<div class="audit-item">
|
||||
<div class="audit-icon" style="background:#EEF2FF;"><svg viewBox="0 0 24 24" fill="none" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></div>
|
||||
<div style="flex:1;">
|
||||
<div class="audit-action">Admin login — Priya Kapoor</div>
|
||||
<div class="audit-detail">IP: 203.189.x.x · Mumbai</div>
|
||||
</div>
|
||||
<div class="audit-time">2 min ago</div>
|
||||
</div>
|
||||
<div class="audit-item">
|
||||
<div class="audit-icon" style="background:#ECFDF5;"><svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/></svg></div>
|
||||
<div style="flex:1;">
|
||||
<div class="audit-action">Leave approved — Arjun Mehta (CL 3 days)</div>
|
||||
<div class="audit-detail">Approved by Priya Kapoor</div>
|
||||
</div>
|
||||
<div class="audit-time">45 min ago</div>
|
||||
</div>
|
||||
<div class="audit-item">
|
||||
<div class="audit-icon" style="background:#FFFBEB;"><svg viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></div>
|
||||
<div style="flex:1;">
|
||||
<div class="audit-action">Employee record updated — Neha Reddy</div>
|
||||
<div class="audit-detail">Designation changed by Suresh Menon</div>
|
||||
</div>
|
||||
<div class="audit-time">2 hr ago</div>
|
||||
</div>
|
||||
<div class="audit-item">
|
||||
<div class="audit-icon" style="background:#FEF2F2;"><svg viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></div>
|
||||
<div style="flex:1;">
|
||||
<div class="audit-action">Reimbursement rejected — Karthik Pillai</div>
|
||||
<div class="audit-detail">Internet bill — policy violation</div>
|
||||
</div>
|
||||
<div class="audit-time">5 hr ago</div>
|
||||
</div>
|
||||
<div class="audit-item">
|
||||
<div class="audit-icon" style="background:#F5F3FF;"><svg viewBox="0 0 24 24" fill="none" stroke="#7C3AED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="23" y1="11" x2="17" y2="11"/></svg></div>
|
||||
<div style="flex:1;">
|
||||
<div class="audit-action">New employee added — Anika Sharma</div>
|
||||
<div class="audit-detail">EMP-00248 · Engineering · Added by Anita Rao</div>
|
||||
</div>
|
||||
<div class="audit-time">Yesterday</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,505 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HR Portal — Design Mockups Gallery</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #F8FAFC;
|
||||
color: #0F172A;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
.header {
|
||||
background: #1E293B;
|
||||
padding: 48px 0 40px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -100px; left: 50%; transform: translateX(-50%);
|
||||
width: 600px; height: 400px;
|
||||
background: radial-gradient(circle, rgba(79,70,229,0.2) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.header-badge {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
background: rgba(79,70,229,0.2); border: 1px solid rgba(79,70,229,0.3);
|
||||
color: #A5B4FC; font-size: 12px; font-weight: 600;
|
||||
padding: 6px 14px; border-radius: 999px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.header-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #818CF8; }
|
||||
.header-title {
|
||||
font-size: 36px; font-weight: 800; color: #fff;
|
||||
letter-spacing: -0.5px; margin-bottom: 10px;
|
||||
}
|
||||
.header-title span { color: #818CF8; }
|
||||
.header-subtitle {
|
||||
font-size: 16px; color: #94A3B8; max-width: 540px;
|
||||
margin: 0 auto 24px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.header-meta {
|
||||
display: flex; align-items: center; justify-content: center; gap: 24px;
|
||||
font-size: 13px; color: #64748B;
|
||||
}
|
||||
.header-meta-item { display: flex; align-items: center; gap: 6px; }
|
||||
.header-meta-item svg { width: 14px; height: 14px; color: #4F46E5; }
|
||||
|
||||
/* MAIN CONTENT */
|
||||
.main { max-width: 1280px; margin: 0 auto; padding: 40px 24px 60px; }
|
||||
|
||||
/* SECTION LABELS */
|
||||
.section-divider {
|
||||
display: flex; align-items: center; gap: 12px; margin: 40px 0 24px;
|
||||
}
|
||||
.section-divider:first-child { margin-top: 0; }
|
||||
.section-label {
|
||||
font-size: 12px; font-weight: 700; color: #64748B;
|
||||
text-transform: uppercase; letter-spacing: 1px; white-space: nowrap;
|
||||
}
|
||||
.section-line { flex: 1; height: 1px; background: #E2E8F0; }
|
||||
|
||||
/* CARDS GRID */
|
||||
.cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
.mockup-card {
|
||||
background: #fff; border-radius: 16px;
|
||||
border: 1px solid #E2E8F0;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
transition: box-shadow 0.2s, transform 0.2s;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.mockup-card:hover {
|
||||
box-shadow: 0 12px 32px rgba(0,0,0,0.12);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
.card-preview {
|
||||
height: 180px; display: flex; align-items: center; justify-content: center;
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.card-preview-inner {
|
||||
width: 100%; height: 100%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.preview-icon {
|
||||
width: 56px; height: 56px; border-radius: 14px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.preview-icon svg { width: 28px; height: 28px; }
|
||||
.preview-mockup-lines {
|
||||
position: absolute; bottom: 0; left: 0; right: 0;
|
||||
display: flex; flex-direction: column; gap: 4px; padding: 0 16px 12px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.preview-line { height: 4px; border-radius: 2px; }
|
||||
|
||||
.card-body { padding: 20px 22px; flex: 1; display: flex; flex-direction: column; }
|
||||
.card-number {
|
||||
font-size: 11px; font-weight: 700; color: #94A3B8;
|
||||
text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px;
|
||||
}
|
||||
.card-title { font-size: 16px; font-weight: 700; color: #0F172A; margin-bottom: 6px; }
|
||||
.card-desc { font-size: 13px; color: #64748B; line-height: 1.5; flex: 1; margin-bottom: 16px; }
|
||||
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
|
||||
.tag {
|
||||
font-size: 11px; font-weight: 600; padding: 3px 8px;
|
||||
border-radius: 6px; background: #F1F5F9; color: #64748B;
|
||||
}
|
||||
.btn-view {
|
||||
display: flex; align-items: center; justify-content: center; gap: 8px;
|
||||
padding: 10px; background: #4F46E5; color: #fff;
|
||||
border-radius: 8px; font-size: 13px; font-weight: 600;
|
||||
text-decoration: none; transition: background 0.15s;
|
||||
}
|
||||
.btn-view:hover { background: #4338CA; }
|
||||
.btn-view svg { width: 14px; height: 14px; }
|
||||
|
||||
/* FOOTER */
|
||||
.footer {
|
||||
background: #1E293B; padding: 32px 0; text-align: center;
|
||||
}
|
||||
.footer p { font-size: 13px; color: #475569; }
|
||||
.footer strong { color: #94A3B8; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<div class="header-badge">
|
||||
<div class="header-badge-dot"></div>
|
||||
Design Mockups — HR Portal v1.0
|
||||
</div>
|
||||
<h1 class="header-title">TechCorp <span>HR Portal</span><br/>Design Mockups Gallery</h1>
|
||||
<p class="header-subtitle">
|
||||
A collection of 10 high-fidelity HTML/CSS mockups for the complete HR management system — covering employee self-service, HR admin flows, and super admin controls.
|
||||
</p>
|
||||
<div class="header-meta">
|
||||
<div class="header-meta-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
||||
10 Pages
|
||||
</div>
|
||||
<div class="header-meta-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
3 User Roles
|
||||
</div>
|
||||
<div class="header-meta-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
May 2026
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
|
||||
<!-- AUTH -->
|
||||
<div class="section-divider">
|
||||
<span class="section-label">Authentication</span>
|
||||
<div class="section-line"></div>
|
||||
</div>
|
||||
<div class="cards-grid" style="grid-template-columns: repeat(3, 1fr);">
|
||||
<a class="mockup-card" href="01-login.html">
|
||||
<div class="card-preview" style="background: linear-gradient(135deg, #0F172A, #1E293B);">
|
||||
<div class="card-preview-inner">
|
||||
<div style="width:200px;background:#fff;border-radius:12px;padding:20px;text-align:center;">
|
||||
<div style="width:40px;height:40px;background:#4F46E5;border-radius:10px;margin:0 auto 10px;"></div>
|
||||
<div style="height:8px;background:#F1F5F9;border-radius:4px;margin-bottom:8px;"></div>
|
||||
<div style="height:6px;background:#F1F5F9;border-radius:3px;width:70%;margin:0 auto 16px;"></div>
|
||||
<div style="height:28px;background:#4F46E5;border-radius:6px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">01</div>
|
||||
<div class="card-title">Login Page</div>
|
||||
<div class="card-desc">Employee sign-in with Employee ID and password. Clean, centered card on dark navy background with security badge.</div>
|
||||
<div class="card-tags">
|
||||
<span class="tag">All Users</span>
|
||||
<span class="tag">Auth</span>
|
||||
</div>
|
||||
<a href="01-login.html" class="btn-view">
|
||||
View Mockup
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- EMPLOYEE VIEWS -->
|
||||
<div class="section-divider">
|
||||
<span class="section-label">Employee Self-Service</span>
|
||||
<div class="section-line"></div>
|
||||
</div>
|
||||
<div class="cards-grid">
|
||||
<a class="mockup-card" href="02-employee-dashboard.html">
|
||||
<div class="card-preview" style="background: linear-gradient(135deg, #EEF2FF, #F0FDF4);">
|
||||
<div class="card-preview-inner">
|
||||
<div style="display:flex;gap:8px;padding:0 16px;">
|
||||
<div style="width:40px;flex-shrink:0;height:100px;background:#1E293B;border-radius:6px;"></div>
|
||||
<div style="flex:1;">
|
||||
<div style="height:12px;background:#fff;border-radius:4px;margin-bottom:8px;box-shadow:0 1px 3px rgba(0,0,0,0.1);"></div>
|
||||
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:4px;">
|
||||
<div style="height:36px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
<div style="height:36px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
<div style="height:36px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
<div style="height:36px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">02</div>
|
||||
<div class="card-title">Employee Dashboard</div>
|
||||
<div class="card-desc">Personal overview with leave balance, attendance summary, pending reimbursements, upcoming holidays, announcements, and quick actions.</div>
|
||||
<div class="card-tags">
|
||||
<span class="tag">Employee</span>
|
||||
<span class="tag">Dashboard</span>
|
||||
</div>
|
||||
<a href="02-employee-dashboard.html" class="btn-view">View Mockup <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="mockup-card" href="05-attendance.html">
|
||||
<div class="card-preview" style="background: linear-gradient(135deg, #F0FDF4, #ECFDF5);">
|
||||
<div class="card-preview-inner">
|
||||
<div style="padding:0 16px;">
|
||||
<div style="background:#fff;border-radius:8px;padding:10px;box-shadow:0 1px 4px rgba(0,0,0,0.1);">
|
||||
<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:3px;">
|
||||
<div style="height:16px;background:#F1F5F9;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#F1F5F9;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#F1F5F9;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#F1F5F9;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#F1F5F9;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#F1F5F9;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#F1F5F9;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#ECFDF5;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#ECFDF5;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#EFF6FF;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#ECFDF5;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#ECFDF5;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#FEF2F2;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#F1F5F9;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#EEF2FF;border-radius:3px;border:2px solid #4F46E5;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">05</div>
|
||||
<div class="card-title">Attendance Calendar</div>
|
||||
<div class="card-desc">Monthly attendance view with color-coded calendar (Present/Absent/WFH/Half-day/Holiday). Today's attendance marking and monthly summary.</div>
|
||||
<div class="card-tags">
|
||||
<span class="tag">Employee</span>
|
||||
<span class="tag">Attendance</span>
|
||||
</div>
|
||||
<a href="05-attendance.html" class="btn-view">View Mockup <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="mockup-card" href="06-leave-management.html">
|
||||
<div class="card-preview" style="background: linear-gradient(135deg, #EEF2FF, #F5F3FF);">
|
||||
<div class="card-preview-inner">
|
||||
<div style="display:flex;flex-direction:column;gap:8px;padding:0 16px;width:100%;">
|
||||
<div style="display:flex;gap:6px;">
|
||||
<div style="flex:1;height:50px;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.08);border-top:3px solid #4F46E5;"></div>
|
||||
<div style="flex:1;height:50px;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.08);border-top:3px solid #10B981;"></div>
|
||||
<div style="flex:1;height:50px;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.08);border-top:3px solid #F59E0B;"></div>
|
||||
</div>
|
||||
<div style="height:60px;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">06</div>
|
||||
<div class="card-title">Leave Management</div>
|
||||
<div class="card-desc">Leave balance cards with circular progress rings, apply leave form with date pickers, and complete leave history with status badges.</div>
|
||||
<div class="card-tags">
|
||||
<span class="tag">Employee</span>
|
||||
<span class="tag">Leave</span>
|
||||
</div>
|
||||
<a href="06-leave-management.html" class="btn-view">View Mockup <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="mockup-card" href="07-payslips.html">
|
||||
<div class="card-preview" style="background: linear-gradient(135deg, #F0FDF4, #ECFDF5);">
|
||||
<div class="card-preview-inner">
|
||||
<div style="display:flex;gap:10px;padding:0 16px;">
|
||||
<div style="flex:1;">
|
||||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:5px;">
|
||||
<div style="height:48px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
<div style="height:48px;background:#FAFAFE;border-radius:6px;border:2px solid #4F46E5;"></div>
|
||||
<div style="height:48px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
<div style="height:48px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
<div style="height:48px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
<div style="height:48px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:60px;background:#1E293B;border-radius:8px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">07</div>
|
||||
<div class="card-title">Payslips</div>
|
||||
<div class="card-desc">Monthly payslip cards grid with generated/pending status. Expanded breakdown showing earnings, deductions, and net pay for selected month.</div>
|
||||
<div class="card-tags">
|
||||
<span class="tag">Employee</span>
|
||||
<span class="tag">Payroll</span>
|
||||
</div>
|
||||
<a href="07-payslips.html" class="btn-view">View Mockup <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="mockup-card" href="08-reimbursements.html">
|
||||
<div class="card-preview" style="background: linear-gradient(135deg, #FFFBEB, #FFF7ED);">
|
||||
<div class="card-preview-inner">
|
||||
<div style="display:flex;flex-direction:column;gap:8px;padding:0 16px;width:100%;">
|
||||
<div style="display:flex;gap:6px;">
|
||||
<div style="flex:1;height:36px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
<div style="flex:1;height:36px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
<div style="flex:1;height:36px;background:#FFFBEB;border-radius:6px;border:1px solid #FDE68A;"></div>
|
||||
<div style="flex:1;height:36px;background:#FEF2F2;border-radius:6px;border:1px solid #FECACA;"></div>
|
||||
</div>
|
||||
<div style="height:50px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
<div style="height:4px;background:#F1F5F9;border-radius:2px;"></div>
|
||||
<div style="height:4px;background:#F1F5F9;border-radius:2px;width:80%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">08</div>
|
||||
<div class="card-title">Reimbursements</div>
|
||||
<div class="card-desc">Stats overview of claimed/approved/pending/rejected amounts. Expense claim submission form with receipt upload and claims history table.</div>
|
||||
<div class="card-tags">
|
||||
<span class="tag">Employee</span>
|
||||
<span class="tag">Expenses</span>
|
||||
</div>
|
||||
<a href="08-reimbursements.html" class="btn-view">View Mockup <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- HR ADMIN VIEWS -->
|
||||
<div class="section-divider">
|
||||
<span class="section-label">HR Admin Views</span>
|
||||
<div class="section-line"></div>
|
||||
</div>
|
||||
<div class="cards-grid">
|
||||
<a class="mockup-card" href="03-admin-dashboard.html">
|
||||
<div class="card-preview" style="background: linear-gradient(135deg, #F5F3FF, #EEF2FF);">
|
||||
<div class="card-preview-inner">
|
||||
<div style="display:flex;gap:8px;padding:0 16px;">
|
||||
<div style="width:40px;flex-shrink:0;height:110px;background:#1E293B;border-radius:6px;"></div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:5px;">
|
||||
<div style="height:14px;background:#fff;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,0.08);"></div>
|
||||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:4px;">
|
||||
<div style="height:28px;background:#fff;border-radius:5px;box-shadow:0 1px 2px rgba(0,0,0,0.08);"></div>
|
||||
<div style="height:28px;background:#fff;border-radius:5px;box-shadow:0 1px 2px rgba(0,0,0,0.08);"></div>
|
||||
<div style="height:28px;background:#fff;border-radius:5px;box-shadow:0 1px 2px rgba(0,0,0,0.08);"></div>
|
||||
<div style="height:28px;background:#fff;border-radius:5px;box-shadow:0 1px 2px rgba(0,0,0,0.08);"></div>
|
||||
</div>
|
||||
<div style="height:40px;background:#fff;border-radius:5px;box-shadow:0 1px 2px rgba(0,0,0,0.08);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">03</div>
|
||||
<div class="card-title">Admin Dashboard</div>
|
||||
<div class="card-desc">HR Admin overview showing total employees, pending approvals, attendance rate, and pending reimbursements. Pending approvals table and payroll status card.</div>
|
||||
<div class="card-tags">
|
||||
<span class="tag">HR Admin</span>
|
||||
<span class="tag">Dashboard</span>
|
||||
</div>
|
||||
<a href="03-admin-dashboard.html" class="btn-view" style="background:#7C3AED;">View Mockup <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="mockup-card" href="04-employee-list.html">
|
||||
<div class="card-preview" style="background: linear-gradient(135deg, #F8FAFC, #EFF6FF);">
|
||||
<div class="card-preview-inner">
|
||||
<div style="padding:0 12px;width:100%;">
|
||||
<div style="height:8px;background:#E2E8F0;border-radius:4px;margin-bottom:6px;"></div>
|
||||
<div style="display:flex;flex-direction:column;gap:3px;">
|
||||
<div style="display:flex;align-items:center;gap:6px;height:20px;background:#F8FAFC;border-radius:4px;padding:0 6px;">
|
||||
<div style="width:14px;height:14px;border-radius:50%;background:#4F46E5;flex-shrink:0;"></div>
|
||||
<div style="height:4px;background:#E2E8F0;border-radius:2px;flex:1;"></div>
|
||||
<div style="width:40px;height:4px;background:#EEF2FF;border-radius:2px;"></div>
|
||||
<div style="width:28px;height:4px;background:#ECFDF5;border-radius:2px;"></div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:6px;height:20px;background:#fff;border-radius:4px;padding:0 6px;">
|
||||
<div style="width:14px;height:14px;border-radius:50%;background:#10B981;flex-shrink:0;"></div>
|
||||
<div style="height:4px;background:#E2E8F0;border-radius:2px;flex:1;"></div>
|
||||
<div style="width:40px;height:4px;background:#FFFBEB;border-radius:2px;"></div>
|
||||
<div style="width:28px;height:4px;background:#ECFDF5;border-radius:2px;"></div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:6px;height:20px;background:#F8FAFC;border-radius:4px;padding:0 6px;">
|
||||
<div style="width:14px;height:14px;border-radius:50%;background:#F59E0B;flex-shrink:0;"></div>
|
||||
<div style="height:4px;background:#E2E8F0;border-radius:2px;flex:1;"></div>
|
||||
<div style="width:40px;height:4px;background:#FFF7ED;border-radius:2px;"></div>
|
||||
<div style="width:28px;height:4px;background:#ECFDF5;border-radius:2px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">04</div>
|
||||
<div class="card-title">Employee List</div>
|
||||
<div class="card-desc">Searchable, filterable employee directory with department, designation, and status filters. Table view with actions for each employee and pagination.</div>
|
||||
<div class="card-tags">
|
||||
<span class="tag">HR Admin</span>
|
||||
<span class="tag">Employees</span>
|
||||
</div>
|
||||
<a href="04-employee-list.html" class="btn-view" style="background:#7C3AED;">View Mockup <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="mockup-card" href="09-payroll-management.html">
|
||||
<div class="card-preview" style="background: linear-gradient(135deg, #ECFDF5, #F0FDF4);">
|
||||
<div class="card-preview-inner">
|
||||
<div style="display:flex;flex-direction:column;gap:6px;padding:0 16px;width:100%;">
|
||||
<div style="display:flex;gap:5px;">
|
||||
<div style="flex:1;height:32px;background:#fff;border-radius:6px;border-top:3px solid #4F46E5;"></div>
|
||||
<div style="flex:1;height:32px;background:#fff;border-radius:6px;border-top:3px solid #EF4444;"></div>
|
||||
<div style="flex:1;height:32px;background:#fff;border-radius:6px;border-top:3px solid #10B981;"></div>
|
||||
</div>
|
||||
<div style="height:70px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">09</div>
|
||||
<div class="card-title">Payroll Management</div>
|
||||
<div class="card-desc">Monthly payroll processing for HR admins. Summary cards, detailed employee-wise breakdown with Basic, HRA, DA, PF, TDS, PT and net pay. Export to CSV.</div>
|
||||
<div class="card-tags">
|
||||
<span class="tag">HR Admin</span>
|
||||
<span class="tag">Payroll</span>
|
||||
</div>
|
||||
<a href="09-payroll-management.html" class="btn-view" style="background:#7C3AED;">View Mockup <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- SUPER ADMIN VIEWS -->
|
||||
<div class="section-divider">
|
||||
<span class="section-label">Super Admin</span>
|
||||
<div class="section-line"></div>
|
||||
</div>
|
||||
<div class="cards-grid" style="grid-template-columns: repeat(3, 1fr);">
|
||||
<a class="mockup-card" href="10-super-admin.html">
|
||||
<div class="card-preview" style="background: linear-gradient(135deg, #0F172A, #1E1B4B);">
|
||||
<div class="card-preview-inner">
|
||||
<div style="display:flex;gap:8px;padding:0 16px;">
|
||||
<div style="width:36px;flex-shrink:0;height:100px;background:#0F172A;border-radius:6px;border:1px solid rgba(255,255,255,0.1);"></div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:5px;">
|
||||
<div style="height:12px;background:rgba(255,255,255,0.1);border-radius:4px;"></div>
|
||||
<div style="height:50px;background:rgba(255,255,255,0.07);border-radius:6px;"></div>
|
||||
<div style="display:flex;gap:4px;">
|
||||
<div style="flex:1;height:14px;background:rgba(79,70,229,0.3);border-radius:3px;"></div>
|
||||
<div style="flex:1;height:14px;background:rgba(255,255,255,0.07);border-radius:3px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">10</div>
|
||||
<div class="card-title">Super Admin Panel</div>
|
||||
<div class="card-desc">Root-level admin management panel with HR admin account creation, deactivation, password reset, org settings toggles, and full audit log.</div>
|
||||
<div class="card-tags">
|
||||
<span class="tag">Super Admin</span>
|
||||
<span class="tag">Security</span>
|
||||
<span class="tag">Audit</span>
|
||||
</div>
|
||||
<a href="10-super-admin.html" class="btn-view" style="background:linear-gradient(135deg,#7C3AED,#4F46E5);">View Mockup <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p><strong>TechCorp HR Portal</strong> — Design Mockups v1.0 · Built with HTML/CSS · Inter font · May 2026</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user