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