deploy: hr-portal-designs
This commit is contained in:
TenX PM
@@ -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>
|
||||
Reference in New Issue
Block a user