deploy: hr-portal-v4-designs
This commit is contained in:
TenX PM
@@ -0,0 +1,278 @@
|
||||
<!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 — Leave Management</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 { 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: #ffffff; }
|
||||
.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; }
|
||||
.nav-badge { margin-left: auto; background: #2563eb; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 20px; }
|
||||
.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: #2563eb; 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: #ffffff; }
|
||||
.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: #ffffff; 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; color: #0f172a; flex: 1; }
|
||||
.search-box { display: flex; align-items: center; gap: 8px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 14px; width: 260px; }
|
||||
.search-box input { border: none; background: transparent; font-size: 13px; color: #374151; outline: none; width: 100%; font-family: inherit; }
|
||||
.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 { width: 34px; height: 34px; border-radius: 50%; background: #1e3a5f; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; cursor: pointer; }
|
||||
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
|
||||
.page-title { font-size: 20px; font-weight: 700; }
|
||||
.page-sub { font-size: 13px; color: #64748b; margin-top: 2px; }
|
||||
.btn-primary { display: flex; align-items: center; gap: 6px; background: #2563eb; color: #fff; border: none; border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
|
||||
.btn-primary:hover { background: #1d4ed8; }
|
||||
|
||||
/* TABS */
|
||||
.tabs { display: flex; align-items: center; gap: 4px; border-bottom: 2px solid #e2e8f0; margin-bottom: 20px; }
|
||||
.tab { padding: 10px 18px; font-size: 13.5px; font-weight: 500; color: #64748b; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s; text-decoration: none; }
|
||||
.tab:hover { color: #0f172a; }
|
||||
.tab.active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }
|
||||
.tab-count { display: inline-block; background: #eff6ff; color: #2563eb; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 20px; margin-left: 6px; }
|
||||
.tab.active .tab-count { background: #2563eb; color: #fff; }
|
||||
|
||||
/* TABLE */
|
||||
.table-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; padding: 11px 18px; text-align: left; background: #f8fafc; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
|
||||
td { padding: 13px 18px; font-size: 13px; color: #374151; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
|
||||
tr:last-child td { border-bottom: none; }
|
||||
tr:hover td { background: #fafbfd; }
|
||||
.emp-cell { display: flex; align-items: center; gap: 10px; }
|
||||
.emp-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.emp-name { font-size: 13px; font-weight: 600; color: #0f172a; }
|
||||
.emp-dept { font-size: 11px; color: #94a3b8; }
|
||||
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; }
|
||||
.badge-pending { background: #eff6ff; color: #2563eb; }
|
||||
.badge-approved { background: #f0fdf4; color: #16a34a; }
|
||||
.badge-rejected { background: #fef2f2; color: #dc2626; }
|
||||
.leave-type { display: inline-block; background: #f1f5f9; color: #475569; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; }
|
||||
.reason-text { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #64748b; font-size: 12px; }
|
||||
.action-btns { display: flex; align-items: center; gap: 6px; }
|
||||
.btn-approve { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; background: #f0fdf4; color: #16a34a; font-family: inherit; transition: background 0.15s; }
|
||||
.btn-approve:hover { background: #dcfce7; }
|
||||
.btn-reject { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; background: #fef2f2; color: #dc2626; font-family: inherit; transition: background 0.15s; }
|
||||
.btn-reject:hover { background: #fee2e2; }
|
||||
.btn-view { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid #e2e8f0; background: #f8fafc; color: #374151; font-family: inherit; }
|
||||
|
||||
/* DETAIL PANEL */
|
||||
.split-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
|
||||
.detail-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); position: sticky; top: 80px; }
|
||||
.panel-header { padding: 16px 20px; border-bottom: 1px solid #f1f5f9; }
|
||||
.panel-title { font-size: 14px; font-weight: 700; color: #0f172a; }
|
||||
.panel-sub { font-size: 12px; color: #64748b; margin-top: 2px; }
|
||||
.panel-body { padding: 20px; }
|
||||
.panel-emp { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #f1f5f9; margin-bottom: 16px; }
|
||||
.panel-emp-avatar { width: 44px; height: 44px; border-radius: 50%; background: #7c3aed; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.panel-emp-name { font-size: 14px; font-weight: 700; color: #0f172a; }
|
||||
.panel-emp-role { font-size: 12px; color: #64748b; margin-top: 2px; }
|
||||
.detail-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
|
||||
.detail-label { font-size: 12px; color: #64748b; font-weight: 500; }
|
||||
.detail-value { font-size: 13px; color: #0f172a; font-weight: 600; }
|
||||
.panel-reason { background: #f8fafc; border-radius: 8px; padding: 12px; font-size: 13px; color: #374151; line-height: 1.5; margin: 16px 0; border: 1px solid #f1f5f9; }
|
||||
.panel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
|
||||
.panel-btn { padding: 10px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.15s; }
|
||||
.panel-btn-approve { background: #16a34a; color: #fff; }
|
||||
.panel-btn-approve:hover { background: #15803d; }
|
||||
.panel-btn-reject { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
|
||||
.panel-btn-reject:hover { background: #fee2e2; }
|
||||
.days-badge { display: inline-block; background: #eff6ff; color: #2563eb; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 8px; }
|
||||
</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="#ffffff" 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">Admin Console</div></div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main</div>
|
||||
<a class="nav-item" href="02-admin-dashboard.html"><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="03-employee-list.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="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>Employees</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="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>Departments</a>
|
||||
<div class="nav-section-label" style="margin-top:8px;">Operations</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="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 Management<span class="nav-badge">5</span></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="05-payroll.html"><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>Payroll</a>
|
||||
<a class="nav-item" href="07-recruitment.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>Recruitment</a>
|
||||
<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>
|
||||
<div class="nav-section-label" style="margin-top:8px;">Analytics</div>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-avatar">AK</div>
|
||||
<div><div class="sidebar-user-name">Arun Kumar</div><div class="sidebar-user-role">Super Admin</div></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="header">
|
||||
<div class="header-title">Leave Management</div>
|
||||
<div class="search-box"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg><input type="text" placeholder="Search leaves..."></div>
|
||||
<div style="display:flex;align-items:center;gap:8px">
|
||||
<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">5</span></div>
|
||||
<div class="header-avatar">AK</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-top">
|
||||
<div>
|
||||
<div class="page-title">Leave Requests</div>
|
||||
<div class="page-sub">Manage and review employee leave applications</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:10px">
|
||||
<button style="display:flex;align-items:center;gap:6px;background:#fff;color:#374151;border:1px solid #e2e8f0;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="21 15 15 15 15 21"/><path d="M18 15V9a6 6 0 0 0-6-6H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6"/></svg>
|
||||
Export CSV
|
||||
</button>
|
||||
<button class="btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
Leave Policy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<a class="tab active" href="#">Pending <span class="tab-count">5</span></a>
|
||||
<a class="tab" href="#">Approved <span class="tab-count" style="background:#f0fdf4;color:#16a34a">18</span></a>
|
||||
<a class="tab" href="#">Rejected <span class="tab-count" style="background:#fef2f2;color:#dc2626">3</span></a>
|
||||
<a class="tab" href="#">All Requests <span class="tab-count" style="background:#f1f5f9;color:#64748b">26</span></a>
|
||||
</div>
|
||||
|
||||
<div class="split-layout">
|
||||
<div class="table-card">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Employee</th>
|
||||
<th>Leave Type</th>
|
||||
<th>From</th>
|
||||
<th>To</th>
|
||||
<th>Days</th>
|
||||
<th>Reason</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr style="background:#fffbeb">
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#7c3aed">PS</div><div><div class="emp-name">Priya Sharma</div><div class="emp-dept">Engineering</div></div></div></td>
|
||||
<td><span class="leave-type">Annual</span></td>
|
||||
<td>May 12, 2026</td>
|
||||
<td>May 14, 2026</td>
|
||||
<td><span class="days-badge">3</span></td>
|
||||
<td><div class="reason-text">Family function in Jaipur, need to travel</div></td>
|
||||
<td><span class="badge badge-pending">Pending</span></td>
|
||||
<td><div class="action-btns"><button class="btn-approve"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>Approve</button><button class="btn-reject">Reject</button></div></td>
|
||||
</tr>
|
||||
<tr style="background:#fffbeb">
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#16a34a">AP</div><div><div class="emp-name">Anjali Patel</div><div class="emp-dept">HR</div></div></div></td>
|
||||
<td><span class="leave-type">Casual</span></td>
|
||||
<td>May 15, 2026</td>
|
||||
<td>May 16, 2026</td>
|
||||
<td><span class="days-badge">2</span></td>
|
||||
<td><div class="reason-text">Personal medical appointment scheduled</div></td>
|
||||
<td><span class="badge badge-pending">Pending</span></td>
|
||||
<td><div class="action-btns"><button class="btn-approve"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>Approve</button><button class="btn-reject">Reject</button></div></td>
|
||||
</tr>
|
||||
<tr style="background:#fffbeb">
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#0891b2">NK</div><div><div class="emp-name">Neha Kapoor</div><div class="emp-dept">Marketing</div></div></div></td>
|
||||
<td><span class="leave-type">Sick</span></td>
|
||||
<td>May 9, 2026</td>
|
||||
<td>May 10, 2026</td>
|
||||
<td><span class="days-badge">2</span></td>
|
||||
<td><div class="reason-text">Fever and flu, doctor advised rest</div></td>
|
||||
<td><span class="badge badge-pending">Pending</span></td>
|
||||
<td><div class="action-btns"><button class="btn-approve"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>Approve</button><button class="btn-reject">Reject</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#d97706">VS</div><div><div class="emp-name">Vikram Singh</div><div class="emp-dept">Sales</div></div></div></td>
|
||||
<td><span class="leave-type">Annual</span></td>
|
||||
<td>May 20, 2026</td>
|
||||
<td>May 24, 2026</td>
|
||||
<td><span class="days-badge">5</span></td>
|
||||
<td><div class="reason-text">Family vacation planned to Goa</div></td>
|
||||
<td><span class="badge badge-approved">Approved</span></td>
|
||||
<td><div class="action-btns"><button class="btn-view">View</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#dc2626">MI</div><div><div class="emp-name">Meena Iyer</div><div class="emp-dept">Finance</div></div></div></td>
|
||||
<td><span class="leave-type" style="background:#fdf4ff;color:#7c3aed">Maternity</span></td>
|
||||
<td>May 1, 2026</td>
|
||||
<td>Jun 30, 2026</td>
|
||||
<td><span class="days-badge">60</span></td>
|
||||
<td><div class="reason-text">Maternity leave as per company policy</div></td>
|
||||
<td><span class="badge badge-approved">Approved</span></td>
|
||||
<td><div class="action-btns"><button class="btn-view">View</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#475569">DN</div><div><div class="emp-name">Deepak Nair</div><div class="emp-dept">Engineering</div></div></div></td>
|
||||
<td><span class="leave-type">Sick</span></td>
|
||||
<td>May 8, 2026</td>
|
||||
<td>May 9, 2026</td>
|
||||
<td><span class="days-badge">2</span></td>
|
||||
<td><div class="reason-text">No medical certificate provided as required</div></td>
|
||||
<td><span class="badge badge-rejected">Rejected</span></td>
|
||||
<td><div class="action-btns"><button class="btn-view">View</button></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Detail Panel -->
|
||||
<div class="detail-panel">
|
||||
<div class="panel-header">
|
||||
<div class="panel-title">Request Details</div>
|
||||
<div class="panel-sub">Leave Application #LV-2026-041</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="panel-emp">
|
||||
<div class="panel-emp-avatar">PS</div>
|
||||
<div>
|
||||
<div class="panel-emp-name">Priya Sharma</div>
|
||||
<div class="panel-emp-role">Senior Software Engineer • Engineering</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-row"><span class="detail-label">Leave Type</span><span class="detail-value">Annual Leave</span></div>
|
||||
<div class="detail-row"><span class="detail-label">From Date</span><span class="detail-value">May 12, 2026</span></div>
|
||||
<div class="detail-row"><span class="detail-label">To Date</span><span class="detail-value">May 14, 2026</span></div>
|
||||
<div class="detail-row"><span class="detail-label">Duration</span><span class="detail-value" style="color:#2563eb">3 Working Days</span></div>
|
||||
<div class="detail-row"><span class="detail-label">Balance Left</span><span class="detail-value">9 days remaining</span></div>
|
||||
<div class="detail-row"><span class="detail-label">Applied On</span><span class="detail-value">May 7, 2026</span></div>
|
||||
<div class="detail-row"><span class="detail-label">Status</span><span class="badge badge-pending">Pending Review</span></div>
|
||||
<div style="font-size:12px;color:#64748b;font-weight:500;margin:14px 0 6px">Reason</div>
|
||||
<div class="panel-reason">Family function in Jaipur — need to travel for a relative's wedding. Will ensure all deliverables are completed before leaving.</div>
|
||||
<div class="panel-actions">
|
||||
<button class="panel-btn panel-btn-approve">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
Approve
|
||||
</button>
|
||||
<button class="panel-btn panel-btn-reject">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user