TenX PM
435 lines
24 KiB
HTML
435 lines
24 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>HR Portal v4 — Employee Self-Service</title>
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8fafc; color: #0f172a; display: flex; min-height: 100vh; }
|
||
|
||
/* SIDEBAR */
|
||
.sidebar { width: 240px; min-height: 100vh; background: #1e3a5f; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; }
|
||
.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: #2563eb; 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: 10px; color: #94a3b8; margin-top: 1px; }
|
||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||
.nav-section-label { font-size: 10px; font-weight: 600; color: #64748b; letter-spacing: 0.8px; text-transform: uppercase; padding: 8px 20px 4px; }
|
||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 20px; color: #cbd5e1; font-size: 13.5px; font-weight: 500; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; }
|
||
.nav-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
|
||
.nav-item.active { background: rgba(37,99,235,0.25); color: #fff; border-left-color: #2563eb; }
|
||
.sidebar-footer { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||
.sidebar-avatar { 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: #fff; }
|
||
.sidebar-user-role { font-size: 11px; color: #94a3b8; }
|
||
|
||
.main { margin-left: 240px; display: flex; flex-direction: column; flex: 1; }
|
||
.header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid #e2e8f0; padding: 0 28px; height: 60px; display: flex; align-items: center; gap: 16px; }
|
||
.header-title { font-size: 16px; font-weight: 700; flex: 1; }
|
||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; color: #64748b; }
|
||
.notif-badge { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; background: #dc2626; border-radius: 50%; font-size: 9px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
|
||
.header-avatar-wrap { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 8px; border-radius: 8px; border: 1px solid #e2e8f0; }
|
||
.header-avatar { width: 30px; height: 30px; border-radius: 50%; background: #7c3aed; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
|
||
.header-user-name { font-size: 13px; font-weight: 600; color: #0f172a; }
|
||
|
||
.content { padding: 28px; flex: 1; }
|
||
.greeting-section { margin-bottom: 24px; }
|
||
.greeting-header { display: flex; align-items: center; justify-content: space-between; }
|
||
.greeting-text h1 { font-size: 22px; font-weight: 700; color: #0f172a; }
|
||
.greeting-text p { font-size: 13px; color: #64748b; margin-top: 4px; }
|
||
.greeting-badge { display: flex; align-items: center; gap: 8px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 8px 14px; }
|
||
.greeting-badge-text { font-size: 12px; color: #1d4ed8; font-weight: 500; }
|
||
|
||
/* KPI CARDS */
|
||
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
|
||
.kpi-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
|
||
.kpi-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
|
||
.kpi-value { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 4px; }
|
||
.kpi-label { font-size: 12px; color: #64748b; font-weight: 500; }
|
||
.kpi-sub { font-size: 11px; color: #94a3b8; margin-top: 4px; }
|
||
|
||
/* QUICK ACTIONS */
|
||
.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
|
||
.qa-btn { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; transition: all 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
|
||
.qa-btn:hover { border-color: #2563eb; box-shadow: 0 4px 12px rgba(37,99,235,0.1); transform: translateY(-2px); }
|
||
.qa-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
|
||
.qa-label { font-size: 13px; font-weight: 600; color: #374151; }
|
||
|
||
/* MAIN GRID */
|
||
.main-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-bottom: 20px; }
|
||
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
|
||
.card-header { padding: 16px 20px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; }
|
||
.card-title { font-size: 14px; font-weight: 700; }
|
||
.card-link { font-size: 12px; color: #2563eb; text-decoration: none; font-weight: 500; }
|
||
|
||
table { width: 100%; border-collapse: collapse; }
|
||
th { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 20px; text-align: left; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
|
||
td { padding: 12px 20px; font-size: 13px; color: #374151; border-bottom: 1px solid #f1f5f9; }
|
||
tr:last-child td { border-bottom: none; }
|
||
.badge { display: inline-flex; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
|
||
.badge-approved { background: #f0fdf4; color: #16a34a; }
|
||
.badge-pending { background: #eff6ff; color: #2563eb; }
|
||
.badge-rejected { background: #fef2f2; color: #dc2626; }
|
||
|
||
/* HOLIDAY LIST */
|
||
.holiday-item { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid #f1f5f9; }
|
||
.holiday-item:last-child { border-bottom: none; }
|
||
.holiday-date { width: 48px; height: 48px; border-radius: 10px; background: #eff6ff; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
|
||
.holiday-date-day { font-size: 18px; font-weight: 800; color: #2563eb; line-height: 1; }
|
||
.holiday-date-month { font-size: 10px; font-weight: 600; color: #64748b; text-transform: uppercase; }
|
||
.holiday-name { font-size: 13px; font-weight: 600; color: #0f172a; }
|
||
.holiday-type { font-size: 11px; color: #64748b; margin-top: 2px; }
|
||
.holiday-days { margin-left: auto; font-size: 12px; color: #94a3b8; white-space: nowrap; }
|
||
|
||
/* PERFORMANCE WIDGET */
|
||
.perf-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 24px; display: flex; flex-direction: column; align-items: center; }
|
||
.perf-ring-wrap { position: relative; width: 120px; height: 120px; margin: 16px auto; }
|
||
.perf-ring-bg { fill: none; stroke: #f1f5f9; stroke-width: 10; }
|
||
.perf-ring-fill { fill: none; stroke: #2563eb; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 50; transform: rotate(-90deg); transform-origin: 60px 60px; }
|
||
.perf-score { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
|
||
.perf-score-value { font-size: 24px; font-weight: 800; color: #0f172a; }
|
||
.perf-score-max { font-size: 12px; color: #64748b; }
|
||
.perf-categories { width: 100%; margin-top: 16px; }
|
||
.perf-cat { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
|
||
.perf-cat-label { font-size: 12px; color: #64748b; width: 100px; flex-shrink: 0; }
|
||
.perf-bar-bg { flex: 1; height: 6px; background: #f1f5f9; border-radius: 10px; overflow: hidden; }
|
||
.perf-bar-fill { height: 100%; border-radius: 10px; background: #2563eb; }
|
||
.perf-cat-score { font-size: 12px; font-weight: 700; color: #0f172a; width: 30px; text-align: right; flex-shrink: 0; }
|
||
|
||
.bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
||
|
||
/* MOBILE RESPONSIVE */
|
||
.sidebar-overlay {
|
||
display: none;
|
||
position: fixed; inset: 0; background: rgba(0,0,0,0.5);
|
||
z-index: 99;
|
||
}
|
||
.hamburger {
|
||
display: none;
|
||
background: none; border: none; cursor: pointer;
|
||
padding: 4px; color: #0f172a;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.sidebar {
|
||
transform: translateX(-100%);
|
||
transition: transform 0.25s ease;
|
||
}
|
||
.sidebar.open {
|
||
transform: translateX(0);
|
||
}
|
||
.sidebar-overlay.open {
|
||
display: block;
|
||
}
|
||
.main {
|
||
margin-left: 0 !important;
|
||
}
|
||
.hamburger {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.search-box {
|
||
display: none;
|
||
}
|
||
.header {
|
||
padding: 0 16px;
|
||
}
|
||
.content {
|
||
padding: 16px !important;
|
||
}
|
||
/* Stack KPI cards on mobile */
|
||
.kpi-grid, .stats-row {
|
||
grid-template-columns: repeat(2, 1fr) !important;
|
||
}
|
||
/* Hide less important table columns on mobile */
|
||
.hide-mobile {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.kpi-grid, .stats-row {
|
||
grid-template-columns: 1fr 1fr !important;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="sidebar-overlay" id="sidebarOverlay" onclick="closeSidebar()"></div>
|
||
|
||
<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="#fff" stroke-width="2.2"><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">HR Portal v4</div><div class="sidebar-logo-sub">Employee Portal</div></div>
|
||
</div>
|
||
<nav class="sidebar-nav">
|
||
<div class="nav-section-label">My Workspace</div>
|
||
<a class="nav-item active" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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 width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
|
||
|
||
<div class="nav-section-label" style="margin-top:8px;">HR Services</div>
|
||
<a class="nav-item" href="04-leave-management.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>My Leave</a>
|
||
<a class="nav-item" href="06-attendance.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
|
||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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 width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>Documents</a>
|
||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>Expenses</a>
|
||
|
||
<div class="nav-section-label" style="margin-top:8px;">Growth</div>
|
||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>Performance</a>
|
||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>Training</a>
|
||
</nav>
|
||
<div class="sidebar-footer">
|
||
<div class="sidebar-avatar">PS</div>
|
||
<div>
|
||
<div class="sidebar-user-name">Priya Sharma</div>
|
||
<div class="sidebar-user-role">Sr. Software Engineer</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="main">
|
||
<header class="header">
|
||
<button class="hamburger" onclick="toggleSidebar()" aria-label="Toggle menu">
|
||
<svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
|
||
</svg>
|
||
</button>
|
||
<div class="header-title">My Dashboard</div>
|
||
<div style="display:flex;align-items:center;gap:10px">
|
||
<div class="icon-btn">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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-badge">2</span>
|
||
</div>
|
||
<div class="header-avatar-wrap">
|
||
<div class="header-avatar">PS</div>
|
||
<div class="header-user-name">Priya Sharma</div>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="content">
|
||
<!-- Greeting -->
|
||
<div class="greeting-section">
|
||
<div class="greeting-header">
|
||
<div class="greeting-text">
|
||
<h1>Good morning, Priya</h1>
|
||
<p>Friday, May 9, 2026 • Senior Software Engineer • Engineering • EMP-0041</p>
|
||
</div>
|
||
<div class="greeting-badge">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||
<span class="greeting-badge-text">Clocked in at 09:02 AM today</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KPI Cards -->
|
||
<div class="kpi-grid">
|
||
<div class="kpi-card">
|
||
<div class="kpi-icon" style="background:#eff6ff">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2"><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 class="kpi-value" style="color:#2563eb">12</div>
|
||
<div class="kpi-label">Annual Leave Balance</div>
|
||
<div class="kpi-sub">3 used • 15 total</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-icon" style="background:#f0fdf4">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||
</div>
|
||
<div class="kpi-value" style="color:#16a34a">96%</div>
|
||
<div class="kpi-label">Attendance Rate</div>
|
||
<div class="kpi-sub">May 2026 • 25 days present</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-icon" style="background:#f5f3ff">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="2"><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 class="kpi-value" style="color:#7c3aed">May 31</div>
|
||
<div class="kpi-label">Next Payslip</div>
|
||
<div class="kpi-sub">₹96,200 net expected</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-icon" style="background:#fff7ed">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
|
||
</div>
|
||
<div class="kpi-value" style="color:#d97706">₹2,400</div>
|
||
<div class="kpi-label">Pending Expenses</div>
|
||
<div class="kpi-sub">2 claims awaiting approval</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quick Actions -->
|
||
<div style="margin-bottom:16px;font-size:14px;font-weight:700;color:#374151">Quick Actions</div>
|
||
<div class="quick-actions">
|
||
<div class="qa-btn">
|
||
<div class="qa-icon" style="background:#eff6ff">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2"><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"/><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||
</div>
|
||
<div class="qa-label">Apply Leave</div>
|
||
</div>
|
||
<div class="qa-btn">
|
||
<div class="qa-icon" style="background:#f0fdf4">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||
</div>
|
||
<div class="qa-label">Clock Out</div>
|
||
</div>
|
||
<div class="qa-btn">
|
||
<div class="qa-icon" style="background:#fff7ed">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><line x1="12" y1="5" x2="12" y2="19"/></svg>
|
||
</div>
|
||
<div class="qa-label">Submit Expense</div>
|
||
</div>
|
||
<div class="qa-btn">
|
||
<div class="qa-icon" style="background:#f5f3ff">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="2"><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>
|
||
</div>
|
||
<div class="qa-label">View Payslip</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Grid: Leave History + Performance -->
|
||
<div class="main-grid">
|
||
<!-- Leave History Table -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title">Recent Leave History</div>
|
||
<a href="#" class="card-link">View all</a>
|
||
</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Leave Type</th>
|
||
<th>Dates</th>
|
||
<th>Days</th>
|
||
<th>Status</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>Annual Leave</strong><br><span style="font-size:11px;color:#94a3b8">Family function</span></td>
|
||
<td><span style="font-size:12px">May 12–14, 2026</span></td>
|
||
<td><span style="font-weight:600">3</span></td>
|
||
<td><span class="badge badge-pending">Pending</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Sick Leave</strong><br><span style="font-size:11px;color:#94a3b8">Viral fever</span></td>
|
||
<td><span style="font-size:12px">Mar 3, 2026</span></td>
|
||
<td><span style="font-weight:600">1</span></td>
|
||
<td><span class="badge badge-approved">Approved</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Annual Leave</strong><br><span style="font-size:11px;color:#94a3b8">Festival holidays</span></td>
|
||
<td><span style="font-size:12px">Jan 14–15, 2026</span></td>
|
||
<td><span style="font-weight:600">2</span></td>
|
||
<td><span class="badge badge-approved">Approved</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Performance Score -->
|
||
<div class="perf-card">
|
||
<div class="card-title">Performance Score</div>
|
||
<div style="font-size:12px;color:#64748b;margin-top:4px">Q1 2026 — Mid-Year Review</div>
|
||
<div class="perf-ring-wrap">
|
||
<svg width="120" height="120" viewBox="0 0 120 120">
|
||
<circle class="perf-ring-bg" cx="60" cy="60" r="50"/>
|
||
<circle class="perf-ring-fill" cx="60" cy="60" r="50"/>
|
||
</svg>
|
||
<div class="perf-score">
|
||
<div class="perf-score-value">4.2</div>
|
||
<div class="perf-score-max">out of 5.0</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:16px">
|
||
<span style="background:#f0fdf4;color:#16a34a;font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px">Exceeds Expectations</span>
|
||
</div>
|
||
<div class="perf-categories" style="width:100%">
|
||
<div class="perf-cat">
|
||
<span class="perf-cat-label">Technical Skills</span>
|
||
<div class="perf-bar-bg"><div class="perf-bar-fill" style="width:90%"></div></div>
|
||
<span class="perf-cat-score">4.5</span>
|
||
</div>
|
||
<div class="perf-cat">
|
||
<span class="perf-cat-label">Collaboration</span>
|
||
<div class="perf-bar-bg"><div class="perf-bar-fill" style="width:80%"></div></div>
|
||
<span class="perf-cat-score">4.0</span>
|
||
</div>
|
||
<div class="perf-cat">
|
||
<span class="perf-cat-label">Delivery</span>
|
||
<div class="perf-bar-bg"><div class="perf-bar-fill" style="width:85%"></div></div>
|
||
<span class="perf-cat-score">4.2</span>
|
||
</div>
|
||
<div class="perf-cat">
|
||
<span class="perf-cat-label">Communication</span>
|
||
<div class="perf-bar-bg"><div class="perf-bar-fill" style="width:76%"></div></div>
|
||
<span class="perf-cat-score">3.8</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Upcoming Holidays -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title">Upcoming Holidays</div>
|
||
<a href="#" class="card-link">Full calendar</a>
|
||
</div>
|
||
<div class="holiday-item">
|
||
<div class="holiday-date">
|
||
<div class="holiday-date-day">26</div>
|
||
<div class="holiday-date-month">May</div>
|
||
</div>
|
||
<div>
|
||
<div class="holiday-name">Maharashtra Day</div>
|
||
<div class="holiday-type">State Holiday • Restricted</div>
|
||
</div>
|
||
<div class="holiday-days">17 days away</div>
|
||
</div>
|
||
<div class="holiday-item">
|
||
<div class="holiday-date" style="background:#fdf4ff">
|
||
<div class="holiday-date-day" style="color:#7c3aed">15</div>
|
||
<div class="holiday-date-month">Aug</div>
|
||
</div>
|
||
<div>
|
||
<div class="holiday-name">Independence Day</div>
|
||
<div class="holiday-type">National Holiday • Mandatory</div>
|
||
</div>
|
||
<div class="holiday-days">98 days away</div>
|
||
</div>
|
||
<div class="holiday-item">
|
||
<div class="holiday-date" style="background:#fff7ed">
|
||
<div class="holiday-date-day" style="color:#d97706">2</div>
|
||
<div class="holiday-date-month">Oct</div>
|
||
</div>
|
||
<div>
|
||
<div class="holiday-name">Gandhi Jayanti</div>
|
||
<div class="holiday-type">National Holiday • Mandatory</div>
|
||
</div>
|
||
<div class="holiday-days">146 days away</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
function toggleSidebar() {
|
||
document.querySelector('.sidebar').classList.toggle('open');
|
||
document.getElementById('sidebarOverlay').classList.toggle('open');
|
||
}
|
||
function closeSidebar() {
|
||
document.querySelector('.sidebar').classList.remove('open');
|
||
document.getElementById('sidebarOverlay').classList.remove('open');
|
||
}
|
||
// Close sidebar on nav item click (mobile UX)
|
||
document.querySelectorAll('.nav-item').forEach(function(item) {
|
||
item.addEventListener('click', function() {
|
||
if (window.innerWidth <= 768) closeSidebar();
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|