TenX PM
537 lines
22 KiB
HTML
537 lines
22 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 — Admin Dashboard</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: #ffffff; letter-spacing: -0.2px; }
|
||
.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; transition: background 0.15s, color 0.15s;
|
||
border-left: 3px solid transparent;
|
||
text-decoration: none;
|
||
}
|
||
.nav-item:hover { background: rgba(255,255,255,0.07); color: #ffffff; }
|
||
.nav-item.active {
|
||
background: rgba(37,99,235,0.25); color: #ffffff;
|
||
border-left-color: #2563eb;
|
||
}
|
||
.nav-item svg { flex-shrink: 0; opacity: 0.8; }
|
||
.nav-item.active svg { opacity: 1; }
|
||
.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;
|
||
}
|
||
.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; }
|
||
|
||
/* HEADER */
|
||
.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;
|
||
}
|
||
.search-box input::placeholder { color: #94a3b8; }
|
||
.header-actions { display: flex; align-items: center; gap: 8px; }
|
||
.icon-btn {
|
||
width: 36px; height: 36px; border-radius: 8px; border: 1px solid #e2e8f0;
|
||
background: #ffffff; display: flex; align-items: center; justify-content: center;
|
||
cursor: pointer; position: relative; color: #64748b;
|
||
transition: background 0.15s;
|
||
}
|
||
.icon-btn:hover { background: #f8fafc; }
|
||
.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 */
|
||
.content { padding: 28px; flex: 1; }
|
||
.page-header { margin-bottom: 24px; }
|
||
.page-header h1 { font-size: 22px; font-weight: 700; color: #0f172a; }
|
||
.page-header p { font-size: 13px; color: #64748b; margin-top: 3px; }
|
||
|
||
/* KPI CARDS */
|
||
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
|
||
.kpi-card {
|
||
background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
|
||
padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||
display: flex; flex-direction: column; gap: 12px;
|
||
}
|
||
.kpi-header { display: flex; align-items: flex-start; justify-content: space-between; }
|
||
.kpi-icon {
|
||
width: 42px; height: 42px; border-radius: 10px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.kpi-icon.blue { background: #eff6ff; color: #2563eb; }
|
||
.kpi-icon.green { background: #f0fdf4; color: #16a34a; }
|
||
.kpi-icon.orange { background: #fff7ed; color: #d97706; }
|
||
.kpi-icon.purple { background: #f5f3ff; color: #7c3aed; }
|
||
.kpi-trend {
|
||
display: flex; align-items: center; gap: 3px;
|
||
font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 20px;
|
||
}
|
||
.kpi-trend.up { color: #16a34a; background: #f0fdf4; }
|
||
.kpi-trend.down { color: #dc2626; background: #fef2f2; }
|
||
.kpi-value { font-size: 30px; font-weight: 800; color: #0f172a; letter-spacing: -0.5px; }
|
||
.kpi-label { font-size: 13px; color: #64748b; font-weight: 500; }
|
||
|
||
/* BOTTOM GRID */
|
||
.bottom-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-bottom: 20px; }
|
||
.card {
|
||
background: #ffffff; 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; color: #0f172a; }
|
||
.card-link { font-size: 12px; color: #2563eb; text-decoration: none; font-weight: 500; }
|
||
.card-link:hover { text-decoration: underline; }
|
||
|
||
/* TABLE */
|
||
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: 11px 20px; font-size: 13px; color: #374151; border-bottom: 1px solid #f1f5f9; }
|
||
tr:last-child td { border-bottom: none; }
|
||
tr:hover td { background: #fafbfc; }
|
||
|
||
.badge {
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
|
||
}
|
||
.badge-pending { background: #eff6ff; color: #2563eb; }
|
||
.badge-approved { background: #f0fdf4; color: #16a34a; }
|
||
.badge-rejected { background: #fef2f2; color: #dc2626; }
|
||
|
||
/* CHART */
|
||
.chart-area { padding: 20px; }
|
||
.chart-bars { display: flex; align-items: flex-end; gap: 12px; height: 120px; }
|
||
.bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
|
||
.bar-wrap { flex: 1; display: flex; align-items: flex-end; width: 100%; }
|
||
.bar {
|
||
width: 100%; border-radius: 4px 4px 0 0; background: #2563eb;
|
||
transition: opacity 0.2s;
|
||
}
|
||
.bar:hover { opacity: 0.8; }
|
||
.bar-label { font-size: 11px; color: #94a3b8; font-weight: 500; }
|
||
.bar-val { font-size: 11px; color: #374151; font-weight: 600; }
|
||
.chart-legend {
|
||
display: flex; align-items: center; gap: 16px; margin-top: 16px;
|
||
padding-top: 12px; border-top: 1px solid #f1f5f9;
|
||
}
|
||
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #64748b; }
|
||
.legend-dot { width: 10px; height: 10px; border-radius: 3px; }
|
||
|
||
/* RECENT HIRES */
|
||
.recent-hires { padding: 0; }
|
||
.hire-item {
|
||
display: flex; align-items: center; gap: 12px; padding: 12px 20px;
|
||
border-bottom: 1px solid #f1f5f9;
|
||
}
|
||
.hire-item:last-child { border-bottom: none; }
|
||
.hire-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;
|
||
}
|
||
.hire-name { font-size: 13px; font-weight: 600; color: #0f172a; }
|
||
.hire-role { font-size: 12px; color: #64748b; }
|
||
.hire-date { margin-left: auto; font-size: 11px; color: #94a3b8; }
|
||
.hire-new {
|
||
background: #f0fdf4; color: #16a34a; font-size: 10px; font-weight: 700;
|
||
padding: 2px 7px; border-radius: 20px;
|
||
}
|
||
|
||
.full-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- SIDEBAR -->
|
||
<aside class="sidebar">
|
||
<div class="sidebar-logo">
|
||
<div class="sidebar-logo-icon">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#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 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="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" 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>
|
||
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.14"/><path d="M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>
|
||
Settings
|
||
</a>
|
||
</nav>
|
||
|
||
<div class="sidebar-footer">
|
||
<div class="avatar">AK</div>
|
||
<div>
|
||
<div class="sidebar-user-name">Arun Kumar</div>
|
||
<div class="sidebar-user-role">Super Admin</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- MAIN -->
|
||
<div class="main">
|
||
<header class="header">
|
||
<div class="header-title">Dashboard</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 employees, reports...">
|
||
</div>
|
||
<div class="header-actions">
|
||
<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="icon-btn">
|
||
<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>
|
||
</div>
|
||
<div class="header-avatar">AK</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="content">
|
||
<div class="page-header">
|
||
<h1>Good morning, Arun</h1>
|
||
<p>Friday, 9 May 2026 • Here's what's happening today</p>
|
||
</div>
|
||
|
||
<!-- KPI Cards -->
|
||
<div class="kpi-grid">
|
||
<div class="kpi-card">
|
||
<div class="kpi-header">
|
||
<div class="kpi-icon blue">
|
||
<svg width="20" height="20" 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>
|
||
</div>
|
||
<span class="kpi-trend up">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="18 15 12 9 6 15"/></svg>
|
||
+3
|
||
</span>
|
||
</div>
|
||
<div class="kpi-value">247</div>
|
||
<div class="kpi-label">Total Employees</div>
|
||
</div>
|
||
|
||
<div class="kpi-card">
|
||
<div class="kpi-header">
|
||
<div class="kpi-icon green">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
||
</div>
|
||
<span class="kpi-trend up">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="18 15 12 9 6 15"/></svg>
|
||
96%
|
||
</span>
|
||
</div>
|
||
<div class="kpi-value">198</div>
|
||
<div class="kpi-label">Present Today</div>
|
||
</div>
|
||
|
||
<div class="kpi-card">
|
||
<div class="kpi-header">
|
||
<div class="kpi-icon orange">
|
||
<svg width="20" height="20" 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>
|
||
</div>
|
||
<span class="kpi-trend down">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
|
||
-2
|
||
</span>
|
||
</div>
|
||
<div class="kpi-value">12</div>
|
||
<div class="kpi-label">On Leave</div>
|
||
</div>
|
||
|
||
<div class="kpi-card">
|
||
<div class="kpi-header">
|
||
<div class="kpi-icon purple">
|
||
<svg width="20" height="20" 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>
|
||
</div>
|
||
<span class="kpi-trend up">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="18 15 12 9 6 15"/></svg>
|
||
+2
|
||
</span>
|
||
</div>
|
||
<div class="kpi-value">8</div>
|
||
<div class="kpi-label">Open Positions</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bottom Grid -->
|
||
<div class="bottom-grid">
|
||
<!-- Leave Requests Table -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title">Recent Leave Requests</div>
|
||
<a href="04-leave-management.html" class="card-link">View all</a>
|
||
</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Employee</th>
|
||
<th>Type</th>
|
||
<th>Dates</th>
|
||
<th>Status</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>Priya Sharma</strong></td>
|
||
<td>Annual Leave</td>
|
||
<td>May 12–14</td>
|
||
<td><span class="badge badge-pending">Pending</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Rahul Verma</strong></td>
|
||
<td>Sick Leave</td>
|
||
<td>May 9</td>
|
||
<td><span class="badge badge-approved">Approved</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Anjali Patel</strong></td>
|
||
<td>Casual Leave</td>
|
||
<td>May 15–16</td>
|
||
<td><span class="badge badge-pending">Pending</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Vikram Singh</strong></td>
|
||
<td>Annual Leave</td>
|
||
<td>May 20–24</td>
|
||
<td><span class="badge badge-approved">Approved</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Meena Iyer</strong></td>
|
||
<td>Maternity</td>
|
||
<td>May 1–Jun 30</td>
|
||
<td><span class="badge badge-approved">Approved</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Deepak Nair</strong></td>
|
||
<td>Sick Leave</td>
|
||
<td>May 8–9</td>
|
||
<td><span class="badge badge-rejected">Rejected</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Attendance Chart -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title">Attendance This Week</div>
|
||
<a href="06-attendance.html" class="card-link">View detail</a>
|
||
</div>
|
||
<div class="chart-area">
|
||
<div class="chart-bars">
|
||
<div class="bar-group">
|
||
<div class="bar-val">201</div>
|
||
<div class="bar-wrap"><div class="bar" style="height:82%"></div></div>
|
||
<div class="bar-label">Mon</div>
|
||
</div>
|
||
<div class="bar-group">
|
||
<div class="bar-val">215</div>
|
||
<div class="bar-wrap"><div class="bar" style="height:90%"></div></div>
|
||
<div class="bar-label">Tue</div>
|
||
</div>
|
||
<div class="bar-group">
|
||
<div class="bar-val">207</div>
|
||
<div class="bar-wrap"><div class="bar" style="height:85%"></div></div>
|
||
<div class="bar-label">Wed</div>
|
||
</div>
|
||
<div class="bar-group">
|
||
<div class="bar-val">219</div>
|
||
<div class="bar-wrap"><div class="bar" style="height:92%"></div></div>
|
||
<div class="bar-label">Thu</div>
|
||
</div>
|
||
<div class="bar-group">
|
||
<div class="bar-val">198</div>
|
||
<div class="bar-wrap"><div class="bar" style="height:80%; background:#93c5fd"></div></div>
|
||
<div class="bar-label">Today</div>
|
||
</div>
|
||
</div>
|
||
<div class="chart-legend">
|
||
<div class="legend-item"><div class="legend-dot" style="background:#2563eb"></div>Present</div>
|
||
<div class="legend-item"><div class="legend-dot" style="background:#93c5fd"></div>Today (live)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Recent Hires -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title">Recent Hires</div>
|
||
<a href="03-employee-list.html" class="card-link">View all employees</a>
|
||
</div>
|
||
<div class="recent-hires">
|
||
<div class="hire-item">
|
||
<div class="hire-avatar" style="background:#7c3aed">PS</div>
|
||
<div>
|
||
<div class="hire-name">Pooja Subramaniam</div>
|
||
<div class="hire-role">Software Engineer • Engineering</div>
|
||
</div>
|
||
<div style="text-align:right">
|
||
<div class="hire-date">May 6, 2026</div>
|
||
<span class="hire-new">NEW</span>
|
||
</div>
|
||
</div>
|
||
<div class="hire-item">
|
||
<div class="hire-avatar" style="background:#0891b2">RB</div>
|
||
<div>
|
||
<div class="hire-name">Rohan Bhatia</div>
|
||
<div class="hire-role">Product Manager • Product</div>
|
||
</div>
|
||
<div style="text-align:right">
|
||
<div class="hire-date">May 2, 2026</div>
|
||
<span class="hire-new">NEW</span>
|
||
</div>
|
||
</div>
|
||
<div class="hire-item">
|
||
<div class="hire-avatar" style="background:#16a34a">NK</div>
|
||
<div>
|
||
<div class="hire-name">Nisha Kulkarni</div>
|
||
<div class="hire-role">HR Executive • Human Resources</div>
|
||
</div>
|
||
<div style="text-align:right">
|
||
<div class="hire-date">Apr 28, 2026</div>
|
||
</div>
|
||
</div>
|
||
<div class="hire-item">
|
||
<div class="hire-avatar" style="background:#d97706">AM</div>
|
||
<div>
|
||
<div class="hire-name">Arjun Mehta</div>
|
||
<div class="hire-role">Sales Executive • Sales</div>
|
||
</div>
|
||
<div style="text-align:right">
|
||
<div class="hire-date">Apr 22, 2026</div>
|
||
</div>
|
||
</div>
|
||
<div class="hire-item">
|
||
<div class="hire-avatar" style="background:#dc2626">SK</div>
|
||
<div>
|
||
<div class="hire-name">Shalini Krishnamurthy</div>
|
||
<div class="hire-role">Data Analyst • Analytics</div>
|
||
</div>
|
||
<div style="text-align:right">
|
||
<div class="hire-date">Apr 18, 2026</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|