deploy: hr-portal-v5-designs
This commit is contained in:
TenX PM
@@ -0,0 +1,506 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HR Portal — The HR Platform Your Team Will Actually Use</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; background: #FFFFFF; color: #111827; }
|
||||
|
||||
/* NAVBAR */
|
||||
.navbar {
|
||||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 0 48px; height: 64px;
|
||||
background: #FFFFFF; border-bottom: 1px solid #E5E7EB;
|
||||
}
|
||||
.navbar-logo {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
font-size: 20px; font-weight: 700; color: #111827;
|
||||
}
|
||||
.navbar-logo .logo-icon {
|
||||
width: 32px; height: 32px; background: #4F46E5; border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.navbar-logo .logo-icon svg { width: 18px; height: 18px; }
|
||||
.navbar-actions { display: flex; align-items: center; gap: 12px; }
|
||||
.btn-outline {
|
||||
padding: 8px 20px; border: 1.5px solid #4F46E5; border-radius: 6px;
|
||||
color: #4F46E5; font-size: 14px; font-weight: 500;
|
||||
background: transparent; cursor: pointer; text-decoration: none;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.btn-outline:hover { background: #EEF2FF; }
|
||||
.btn-primary {
|
||||
padding: 8px 20px; border: none; border-radius: 6px;
|
||||
background: #4F46E5; color: #FFFFFF; font-size: 14px; font-weight: 500;
|
||||
cursor: pointer; text-decoration: none; transition: all 0.15s;
|
||||
}
|
||||
.btn-primary:hover { background: #4338CA; }
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
padding: 140px 48px 80px;
|
||||
display: flex; align-items: center; gap: 64px;
|
||||
max-width: 1200px; margin: 0 auto;
|
||||
}
|
||||
.hero-content { flex: 1; }
|
||||
.hero-badge {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
background: #EEF2FF; color: #4F46E5; font-size: 13px; font-weight: 500;
|
||||
padding: 4px 12px; border-radius: 20px; margin-bottom: 24px;
|
||||
}
|
||||
.hero-badge svg { width: 14px; height: 14px; }
|
||||
.hero-title {
|
||||
font-size: 52px; font-weight: 800; line-height: 1.15;
|
||||
color: #111827; margin-bottom: 20px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
.hero-title span { color: #4F46E5; }
|
||||
.hero-subtitle {
|
||||
font-size: 18px; color: #6B7280; line-height: 1.6;
|
||||
margin-bottom: 36px; max-width: 480px;
|
||||
}
|
||||
.hero-ctas { display: flex; align-items: center; gap: 16px; }
|
||||
.btn-hero-primary {
|
||||
padding: 14px 28px; background: #4F46E5; color: #FFF;
|
||||
border: none; border-radius: 8px; font-size: 16px; font-weight: 600;
|
||||
cursor: pointer; text-decoration: none; transition: all 0.15s;
|
||||
}
|
||||
.btn-hero-primary:hover { background: #4338CA; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79,70,229,0.3); }
|
||||
.btn-hero-secondary {
|
||||
padding: 14px 28px; background: transparent; color: #374151;
|
||||
border: 1.5px solid #E5E7EB; border-radius: 8px; font-size: 16px; font-weight: 500;
|
||||
cursor: pointer; text-decoration: none; transition: all 0.15s;
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.btn-hero-secondary:hover { border-color: #9CA3AF; background: #F9FAFB; }
|
||||
.hero-meta { margin-top: 32px; display: flex; align-items: center; gap: 24px; }
|
||||
.hero-meta-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #6B7280; }
|
||||
.hero-meta-item svg { width: 16px; height: 16px; color: #10B981; }
|
||||
|
||||
/* HERO ILLUSTRATION */
|
||||
.hero-visual { flex: 1; max-width: 520px; }
|
||||
.dashboard-mock {
|
||||
background: #FFFFFF; border-radius: 12px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
|
||||
overflow: hidden; border: 1px solid #E5E7EB;
|
||||
}
|
||||
.mock-topbar {
|
||||
height: 36px; background: #F9FAFB; border-bottom: 1px solid #E5E7EB;
|
||||
display: flex; align-items: center; gap: 6px; padding: 0 12px;
|
||||
}
|
||||
.mock-dot { width: 10px; height: 10px; border-radius: 50%; }
|
||||
.mock-dot.red { background: #EF4444; }
|
||||
.mock-dot.yellow { background: #F59E0B; }
|
||||
.mock-dot.green { background: #10B981; }
|
||||
.mock-body { display: flex; height: 320px; }
|
||||
.mock-sidebar {
|
||||
width: 64px; background: #FFFFFF; border-right: 1px solid #E5E7EB;
|
||||
padding: 12px 8px;
|
||||
}
|
||||
.mock-sidebar-item {
|
||||
width: 48px; height: 8px; background: #E5E7EB; border-radius: 4px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.mock-sidebar-item.active { background: #4F46E5; }
|
||||
.mock-content { flex: 1; padding: 16px; background: #FAFAFA; }
|
||||
.mock-stat-row { display: flex; gap: 8px; margin-bottom: 12px; }
|
||||
.mock-stat {
|
||||
flex: 1; background: #FFFFFF; border-radius: 6px; padding: 10px;
|
||||
border: 1px solid #E5E7EB;
|
||||
}
|
||||
.mock-stat-num { width: 32px; height: 12px; background: #4F46E5; border-radius: 3px; margin-bottom: 4px; }
|
||||
.mock-stat-label { width: 48px; height: 6px; background: #E5E7EB; border-radius: 3px; }
|
||||
.mock-chart-row { display: flex; gap: 8px; }
|
||||
.mock-chart {
|
||||
flex: 3; background: #FFFFFF; border-radius: 6px; padding: 10px;
|
||||
border: 1px solid #E5E7EB;
|
||||
}
|
||||
.mock-chart-title { width: 80px; height: 8px; background: #111827; border-radius: 3px; margin-bottom: 12px; }
|
||||
.mock-bars { display: flex; align-items: flex-end; gap: 6px; height: 60px; }
|
||||
.mock-bar { flex: 1; background: #4F46E5; border-radius: 3px 3px 0 0; opacity: 0.15; }
|
||||
.mock-bar:nth-child(1) { height: 40%; opacity: 0.4; }
|
||||
.mock-bar:nth-child(2) { height: 65%; opacity: 0.6; }
|
||||
.mock-bar:nth-child(3) { height: 50%; opacity: 0.5; }
|
||||
.mock-bar:nth-child(4) { height: 80%; opacity: 0.8; }
|
||||
.mock-bar:nth-child(5) { height: 60%; opacity: 0.6; }
|
||||
.mock-bar:nth-child(6) { height: 90%; background: #4F46E5; opacity: 1; }
|
||||
.mock-list { flex: 2; background: #FFFFFF; border-radius: 6px; padding: 10px; border: 1px solid #E5E7EB; }
|
||||
.mock-list-item { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
|
||||
.mock-avatar { width: 20px; height: 20px; border-radius: 50%; background: #4F46E5; opacity: 0.2; }
|
||||
.mock-avatar:nth-child(1) { opacity: 0.8; }
|
||||
.mock-text { flex: 1; }
|
||||
.mock-text-line { height: 6px; background: #E5E7EB; border-radius: 3px; margin-bottom: 3px; }
|
||||
.mock-text-line.short { width: 60%; }
|
||||
|
||||
/* FEATURES */
|
||||
.features-section {
|
||||
background: #FAFAFA; padding: 80px 48px;
|
||||
}
|
||||
.section-header { text-align: center; margin-bottom: 48px; }
|
||||
.section-tag {
|
||||
display: inline-block; background: #EEF2FF; color: #4F46E5;
|
||||
font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 20px;
|
||||
margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px;
|
||||
}
|
||||
.section-title { font-size: 36px; font-weight: 700; color: #111827; margin-bottom: 12px; }
|
||||
.section-subtitle { font-size: 16px; color: #6B7280; }
|
||||
.features-grid {
|
||||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
|
||||
max-width: 1100px; margin: 0 auto;
|
||||
}
|
||||
.feature-card {
|
||||
background: #FFFFFF; border-radius: 12px; padding: 32px;
|
||||
border: 1px solid #E5E7EB;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.feature-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.1); transform: translateY(-2px); }
|
||||
.feature-icon {
|
||||
width: 48px; height: 48px; background: #EEF2FF; border-radius: 12px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.feature-icon svg { width: 24px; height: 24px; color: #4F46E5; }
|
||||
.feature-title { font-size: 18px; font-weight: 600; color: #111827; margin-bottom: 8px; }
|
||||
.feature-desc { font-size: 14px; color: #6B7280; line-height: 1.6; margin-bottom: 16px; }
|
||||
.feature-list { list-style: none; }
|
||||
.feature-list li {
|
||||
font-size: 13px; color: #6B7280; padding: 4px 0;
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.feature-list li::before {
|
||||
content: ''; width: 6px; height: 6px; background: #10B981;
|
||||
border-radius: 50%; flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* STATS */
|
||||
.stats-section {
|
||||
background: #4F46E5; padding: 64px 48px;
|
||||
}
|
||||
.stats-grid {
|
||||
display: grid; grid-template-columns: repeat(3, 1fr);
|
||||
gap: 48px; max-width: 900px; margin: 0 auto; text-align: center;
|
||||
}
|
||||
.stat-item {}
|
||||
.stat-number { font-size: 48px; font-weight: 800; color: #FFFFFF; margin-bottom: 8px; }
|
||||
.stat-label { font-size: 16px; color: #A5B4FC; }
|
||||
|
||||
/* TESTIMONIALS */
|
||||
.testimonials-section { padding: 80px 48px; background: #FFFFFF; }
|
||||
.testimonials-grid {
|
||||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
|
||||
max-width: 1100px; margin: 0 auto;
|
||||
}
|
||||
.testimonial-card {
|
||||
background: #F9FAFB; border-radius: 12px; padding: 28px;
|
||||
border: 1px solid #E5E7EB;
|
||||
}
|
||||
.testimonial-quote { font-size: 15px; color: #374151; line-height: 1.6; margin-bottom: 20px; font-style: italic; }
|
||||
.testimonial-author { display: flex; align-items: center; gap: 12px; }
|
||||
.testimonial-avatar {
|
||||
width: 40px; height: 40px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 14px; font-weight: 600; color: #FFFFFF;
|
||||
}
|
||||
.testimonial-name { font-size: 14px; font-weight: 600; color: #111827; }
|
||||
.testimonial-role { font-size: 12px; color: #9CA3AF; }
|
||||
|
||||
/* FOOTER */
|
||||
.footer {
|
||||
background: #111827; padding: 48px; text-align: center;
|
||||
color: #9CA3AF; font-size: 14px;
|
||||
}
|
||||
.footer-logo { font-size: 20px; font-weight: 700; color: #FFFFFF; margin-bottom: 16px; }
|
||||
.footer-links { display: flex; justify-content: center; gap: 32px; margin-bottom: 24px; }
|
||||
.footer-links a { color: #9CA3AF; text-decoration: none; transition: color 0.15s; }
|
||||
.footer-links a:hover { color: #FFFFFF; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAVBAR -->
|
||||
<nav class="navbar">
|
||||
<div class="navbar-logo">
|
||||
<div class="logo-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>
|
||||
HR Portal
|
||||
</div>
|
||||
<div style="display:flex;gap:32px;align-items:center;">
|
||||
<a href="#" style="text-decoration:none;color:#6B7280;font-size:14px;font-weight:500;">Features</a>
|
||||
<a href="#" style="text-decoration:none;color:#6B7280;font-size:14px;font-weight:500;">Pricing</a>
|
||||
<a href="#" style="text-decoration:none;color:#6B7280;font-size:14px;font-weight:500;">About</a>
|
||||
</div>
|
||||
<div class="navbar-actions">
|
||||
<a href="02-login.html" class="btn-outline">Sign In</a>
|
||||
<a href="03-register.html" class="btn-primary">Get Started</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section style="padding-top:64px;">
|
||||
<div class="hero">
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
|
||||
</svg>
|
||||
Trusted by 500+ companies worldwide
|
||||
</div>
|
||||
<h1 class="hero-title">The HR platform your team will <span>actually use</span></h1>
|
||||
<p class="hero-subtitle">Streamline employee management, automate leave approvals, run payroll, and get insights — all in one beautifully simple platform.</p>
|
||||
<div class="hero-ctas">
|
||||
<a href="03-register.html" class="btn-hero-primary">Start Free Trial</a>
|
||||
<a href="#" class="btn-hero-secondary">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/>
|
||||
</svg>
|
||||
Watch Demo
|
||||
</a>
|
||||
</div>
|
||||
<div class="hero-meta">
|
||||
<div class="hero-meta-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2.5">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
No credit card required
|
||||
</div>
|
||||
<div class="hero-meta-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2.5">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
14-day free trial
|
||||
</div>
|
||||
<div class="hero-meta-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2.5">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
Setup in minutes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="dashboard-mock">
|
||||
<div class="mock-topbar">
|
||||
<div class="mock-dot red"></div>
|
||||
<div class="mock-dot yellow"></div>
|
||||
<div class="mock-dot green"></div>
|
||||
<div style="margin-left:12px;width:120px;height:8px;background:#E5E7EB;border-radius:4px;"></div>
|
||||
</div>
|
||||
<div class="mock-body">
|
||||
<div class="mock-sidebar">
|
||||
<div style="width:36px;height:36px;background:#EEF2FF;border-radius:6px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;">
|
||||
<div style="width:20px;height:20px;background:#4F46E5;border-radius:4px;"></div>
|
||||
</div>
|
||||
<div class="mock-sidebar-item active"></div>
|
||||
<div class="mock-sidebar-item"></div>
|
||||
<div class="mock-sidebar-item"></div>
|
||||
<div class="mock-sidebar-item"></div>
|
||||
<div class="mock-sidebar-item"></div>
|
||||
<div class="mock-sidebar-item"></div>
|
||||
</div>
|
||||
<div class="mock-content">
|
||||
<div style="width:120px;height:10px;background:#111827;border-radius:4px;margin-bottom:4px;"></div>
|
||||
<div style="width:80px;height:7px;background:#9CA3AF;border-radius:4px;margin-bottom:14px;"></div>
|
||||
<div class="mock-stat-row">
|
||||
<div class="mock-stat"><div class="mock-stat-num"></div><div class="mock-stat-label"></div></div>
|
||||
<div class="mock-stat"><div class="mock-stat-num" style="background:#10B981;width:28px;"></div><div class="mock-stat-label"></div></div>
|
||||
<div class="mock-stat"><div class="mock-stat-num" style="background:#F59E0B;width:24px;"></div><div class="mock-stat-label"></div></div>
|
||||
<div class="mock-stat"><div class="mock-stat-num" style="background:#3B82F6;width:36px;"></div><div class="mock-stat-label"></div></div>
|
||||
</div>
|
||||
<div class="mock-chart-row">
|
||||
<div class="mock-chart">
|
||||
<div class="mock-chart-title"></div>
|
||||
<div class="mock-bars">
|
||||
<div class="mock-bar"></div>
|
||||
<div class="mock-bar"></div>
|
||||
<div class="mock-bar"></div>
|
||||
<div class="mock-bar"></div>
|
||||
<div class="mock-bar"></div>
|
||||
<div class="mock-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mock-list">
|
||||
<div style="width:60px;height:7px;background:#111827;border-radius:3px;margin-bottom:10px;"></div>
|
||||
<div class="mock-list-item">
|
||||
<div class="mock-avatar" style="background:#4F46E5;opacity:0.7;"></div>
|
||||
<div class="mock-text">
|
||||
<div class="mock-text-line"></div>
|
||||
<div class="mock-text-line short"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mock-list-item">
|
||||
<div class="mock-avatar" style="background:#10B981;opacity:0.7;"></div>
|
||||
<div class="mock-text">
|
||||
<div class="mock-text-line"></div>
|
||||
<div class="mock-text-line short"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mock-list-item">
|
||||
<div class="mock-avatar" style="background:#F59E0B;opacity:0.7;"></div>
|
||||
<div class="mock-text">
|
||||
<div class="mock-text-line"></div>
|
||||
<div class="mock-text-line short"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mock-list-item">
|
||||
<div class="mock-avatar" style="background:#EF4444;opacity:0.7;"></div>
|
||||
<div class="mock-text">
|
||||
<div class="mock-text-line"></div>
|
||||
<div class="mock-text-line short"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FEATURES -->
|
||||
<section class="features-section">
|
||||
<div class="section-header">
|
||||
<div class="section-tag">Everything you need</div>
|
||||
<h2 class="section-title">Built for modern HR teams</h2>
|
||||
<p class="section-subtitle">From hire to retire, manage your entire workforce in one place.</p>
|
||||
</div>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg 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>
|
||||
<h3 class="feature-title">Employee Management</h3>
|
||||
<p class="feature-desc">Centralize all employee data, track documents, and manage the full employee lifecycle with ease.</p>
|
||||
<ul class="feature-list">
|
||||
<li>Employee directory and profiles</li>
|
||||
<li>Document management</li>
|
||||
<li>Org chart visualization</li>
|
||||
<li>Department management</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon" style="background:#ECFDF5;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#10B981" 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>
|
||||
<h3 class="feature-title">Leave & Attendance</h3>
|
||||
<p class="feature-desc">Automate leave approvals, track attendance in real-time, and give employees visibility into their balances.</p>
|
||||
<ul class="feature-list">
|
||||
<li>Multi-type leave policies</li>
|
||||
<li>Automated approval workflows</li>
|
||||
<li>Real-time attendance tracking</li>
|
||||
<li>Holiday calendar management</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon" style="background:#FFF7ED;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2">
|
||||
<line x1="12" y1="1" x2="12" y2="23"/>
|
||||
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="feature-title">Payroll & Insights</h3>
|
||||
<p class="feature-desc">Run accurate payroll, manage salary structures, and get powerful analytics to make data-driven HR decisions.</p>
|
||||
<ul class="feature-list">
|
||||
<li>Automated payroll processing</li>
|
||||
<li>Custom salary structures</li>
|
||||
<li>Expense claim management</li>
|
||||
<li>Analytics and reporting</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- STATS -->
|
||||
<section class="stats-section">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">500+</div>
|
||||
<div class="stat-label">Companies trust HR Portal</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">50,000+</div>
|
||||
<div class="stat-label">Employees managed daily</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">99.9%</div>
|
||||
<div class="stat-label">Uptime guaranteed</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TESTIMONIALS -->
|
||||
<section class="testimonials-section">
|
||||
<div class="section-header">
|
||||
<div class="section-tag">Customer Stories</div>
|
||||
<h2 class="section-title">Loved by HR teams everywhere</h2>
|
||||
</div>
|
||||
<div class="testimonials-grid">
|
||||
<div class="testimonial-card">
|
||||
<p class="testimonial-quote">"HR Portal cut our payroll processing time by 70%. What used to take two days now takes two hours. It's transformed how we manage our team."</p>
|
||||
<div class="testimonial-author">
|
||||
<div class="testimonial-avatar" style="background:#4F46E5;">SC</div>
|
||||
<div>
|
||||
<div class="testimonial-name">Sarah Chen</div>
|
||||
<div class="testimonial-role">HR Director, TechFlow Inc.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testimonial-card">
|
||||
<p class="testimonial-quote">"The leave management system alone is worth it. Employees can see their balances, managers get instant notifications. No more email chains."</p>
|
||||
<div class="testimonial-author">
|
||||
<div class="testimonial-avatar" style="background:#10B981;">MR</div>
|
||||
<div>
|
||||
<div class="testimonial-name">Michael Rodriguez</div>
|
||||
<div class="testimonial-role">COO, Nexus Dynamics</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testimonial-card">
|
||||
<p class="testimonial-quote">"We scaled from 50 to 300 employees without adding a single HR person. The automation handles everything that used to require manual work."</p>
|
||||
<div class="testimonial-author">
|
||||
<div class="testimonial-avatar" style="background:#F59E0B;">PP</div>
|
||||
<div>
|
||||
<div class="testimonial-name">Priya Patel</div>
|
||||
<div class="testimonial-role">CEO, GrowthBase</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="footer">
|
||||
<div class="footer-logo">HR Portal</div>
|
||||
<div class="footer-links">
|
||||
<a href="#">Privacy Policy</a>
|
||||
<a href="#">Terms of Service</a>
|
||||
<a href="#">Support</a>
|
||||
<a href="#">Blog</a>
|
||||
<a href="#">Contact</a>
|
||||
</div>
|
||||
<p>© 2026 HR Portal. All rights reserved.</p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Sign In — HR Portal</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@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: #FAFAFA;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.page-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px 24px;
|
||||
}
|
||||
.login-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #E5E7EB;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
|
||||
padding: 48px;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
}
|
||||
.card-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 32px;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
.logo-icon {
|
||||
width: 36px; height: 36px;
|
||||
background: #4F46E5;
|
||||
border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.logo-icon svg { width: 20px; height: 20px; }
|
||||
.card-heading {
|
||||
text-align: center;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.card-heading h1 {
|
||||
font-size: 24px; font-weight: 700; color: #111827; margin-bottom: 6px;
|
||||
}
|
||||
.card-heading p {
|
||||
font-size: 14px; color: #6B7280;
|
||||
}
|
||||
.form-group { margin-bottom: 20px; }
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 14px; font-weight: 500; color: #374151;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
border: 1.5px solid #E5E7EB;
|
||||
border-radius: 6px;
|
||||
font-size: 14px; font-family: 'Inter', sans-serif;
|
||||
color: #111827;
|
||||
background: #FFFFFF;
|
||||
transition: border-color 0.15s;
|
||||
outline: none;
|
||||
}
|
||||
.form-input:focus { border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.08); }
|
||||
.form-input::placeholder { color: #9CA3AF; }
|
||||
.form-row-between {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.forgot-link {
|
||||
font-size: 13px; color: #4F46E5; text-decoration: none; font-weight: 500;
|
||||
}
|
||||
.forgot-link:hover { text-decoration: underline; }
|
||||
.password-wrapper { position: relative; }
|
||||
.password-toggle {
|
||||
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
|
||||
background: none; border: none; cursor: pointer; color: #9CA3AF;
|
||||
display: flex; align-items: center;
|
||||
}
|
||||
.checkbox-row {
|
||||
display: flex; align-items: center; gap: 8px; margin-bottom: 24px;
|
||||
}
|
||||
.checkbox-row input[type="checkbox"] {
|
||||
width: 16px; height: 16px; accent-color: #4F46E5; cursor: pointer;
|
||||
}
|
||||
.checkbox-row label { font-size: 14px; color: #374151; cursor: pointer; }
|
||||
.btn-submit {
|
||||
width: 100%;
|
||||
padding: 11px;
|
||||
background: #4F46E5;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
font-family: 'Inter', sans-serif;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.btn-submit:hover { background: #4338CA; }
|
||||
.divider {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.divider-line { flex: 1; height: 1px; background: #E5E7EB; }
|
||||
.divider-text { font-size: 12px; color: #9CA3AF; }
|
||||
.btn-sso {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: #FFFFFF;
|
||||
color: #374151;
|
||||
border: 1.5px solid #E5E7EB;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: 'Inter', sans-serif;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
display: flex; align-items: center; justify-content: center; gap: 8px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.btn-sso:hover { border-color: #9CA3AF; background: #F9FAFB; }
|
||||
.card-footer {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #6B7280;
|
||||
}
|
||||
.card-footer a {
|
||||
color: #4F46E5; text-decoration: none; font-weight: 500;
|
||||
}
|
||||
.card-footer a:hover { text-decoration: underline; }
|
||||
.top-bar {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 16px 32px;
|
||||
background: #FFFFFF; border-bottom: 1px solid #E5E7EB;
|
||||
}
|
||||
.top-bar-logo {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
font-size: 18px; font-weight: 700; color: #111827;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top-bar">
|
||||
<a href="01-landing.html" class="top-bar-logo">
|
||||
<div class="logo-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>
|
||||
HR Portal
|
||||
</a>
|
||||
<a href="03-register.html" style="font-size:14px;color:#6B7280;text-decoration:none;">New to HR Portal? <strong style="color:#4F46E5;">Create account</strong></a>
|
||||
</div>
|
||||
|
||||
<div class="page-wrapper">
|
||||
<div class="login-card">
|
||||
<div class="card-heading">
|
||||
<h1>Welcome back</h1>
|
||||
<p>Sign in to your HR Portal account</p>
|
||||
</div>
|
||||
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="email">Work Email</label>
|
||||
<input class="form-input" type="email" id="email" placeholder="sarah@company.com" value="sarah@techflow.com">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-row-between">
|
||||
<label class="form-label" for="password" style="margin-bottom:0;">Password</label>
|
||||
<a href="#" class="forgot-link">Forgot password?</a>
|
||||
</div>
|
||||
<div class="password-wrapper">
|
||||
<input class="form-input" type="password" id="password" placeholder="Enter your password" value="••••••••••" style="padding-right:44px;">
|
||||
<button type="button" class="password-toggle">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-row">
|
||||
<input type="checkbox" id="remember" checked>
|
||||
<label for="remember">Keep me signed in for 30 days</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-submit">Sign In</button>
|
||||
|
||||
<div class="divider">
|
||||
<div class="divider-line"></div>
|
||||
<span class="divider-text">or continue with</span>
|
||||
<div class="divider-line"></div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn-sso">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24">
|
||||
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
|
||||
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
|
||||
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
|
||||
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
|
||||
</svg>
|
||||
Continue with Google Workspace
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="card-footer">
|
||||
Don't have an account? <a href="03-register.html">Register your company</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,304 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Register Your Company — HR Portal</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@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: #FAFAFA; min-height: 100vh; }
|
||||
.top-bar {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 16px 48px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB;
|
||||
}
|
||||
.logo {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
font-size: 18px; font-weight: 700; color: #111827; text-decoration: none;
|
||||
}
|
||||
.logo-icon {
|
||||
width: 34px; height: 34px; background: #4F46E5; border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.logo-icon svg { width: 18px; height: 18px; }
|
||||
|
||||
/* STEP INDICATOR */
|
||||
.page-wrapper { max-width: 760px; margin: 0 auto; padding: 48px 24px; }
|
||||
.step-indicator {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin-bottom: 40px; gap: 0;
|
||||
}
|
||||
.step {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.step-circle {
|
||||
width: 32px; height: 32px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 13px; font-weight: 600;
|
||||
}
|
||||
.step-circle.done { background: #4F46E5; color: #FFF; }
|
||||
.step-circle.active { background: #4F46E5; color: #FFF; box-shadow: 0 0 0 4px rgba(79,70,229,0.15); }
|
||||
.step-circle.inactive { background: #F3F4F6; color: #9CA3AF; border: 1.5px solid #E5E7EB; }
|
||||
.step-label { font-size: 13px; font-weight: 500; }
|
||||
.step-label.active { color: #4F46E5; }
|
||||
.step-label.inactive { color: #9CA3AF; }
|
||||
.step-connector {
|
||||
width: 80px; height: 2px; background: #E5E7EB; margin: 0 4px;
|
||||
}
|
||||
.step-connector.done { background: #4F46E5; }
|
||||
|
||||
.register-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #E5E7EB;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-header {
|
||||
padding: 32px 40px 24px;
|
||||
border-bottom: 1px solid #F3F4F6;
|
||||
}
|
||||
.card-header h1 { font-size: 22px; font-weight: 700; color: #111827; margin-bottom: 4px; }
|
||||
.card-header p { font-size: 14px; color: #6B7280; }
|
||||
.card-section {
|
||||
padding: 28px 40px;
|
||||
border-bottom: 1px solid #F3F4F6;
|
||||
}
|
||||
.card-section:last-of-type { border-bottom: none; }
|
||||
.section-title {
|
||||
font-size: 13px; font-weight: 600; color: #9CA3AF;
|
||||
text-transform: uppercase; letter-spacing: 0.5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
.form-grid.single { grid-template-columns: 1fr; }
|
||||
.form-group { }
|
||||
.form-label {
|
||||
display: block; font-size: 14px; font-weight: 500; color: #374151;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.form-label .required { color: #EF4444; margin-left: 2px; }
|
||||
.form-input, .form-select {
|
||||
width: 100%; padding: 10px 14px;
|
||||
border: 1.5px solid #E5E7EB; border-radius: 6px;
|
||||
font-size: 14px; font-family: 'Inter', sans-serif; color: #111827;
|
||||
background: #FFFFFF; transition: border-color 0.15s; outline: none;
|
||||
appearance: none;
|
||||
}
|
||||
.form-input:focus, .form-select:focus {
|
||||
border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.08);
|
||||
}
|
||||
.form-input::placeholder { color: #9CA3AF; }
|
||||
.form-select-wrapper { position: relative; }
|
||||
.form-select-wrapper::after {
|
||||
content: '';
|
||||
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
|
||||
width: 0; height: 0;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-top: 5px solid #9CA3AF;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hint { font-size: 12px; color: #9CA3AF; margin-top: 4px; }
|
||||
.password-strength { margin-top: 6px; }
|
||||
.strength-bar {
|
||||
height: 4px; background: #E5E7EB; border-radius: 2px; margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.strength-fill { height: 100%; width: 75%; background: #10B981; border-radius: 2px; }
|
||||
.strength-label { font-size: 12px; color: #10B981; font-weight: 500; }
|
||||
.checkbox-row {
|
||||
display: flex; align-items: flex-start; gap: 10px;
|
||||
padding: 20px 40px;
|
||||
border-top: 1px solid #F3F4F6;
|
||||
}
|
||||
.checkbox-row input { width: 16px; height: 16px; margin-top: 2px; accent-color: #4F46E5; cursor: pointer; }
|
||||
.checkbox-row label { font-size: 14px; color: #374151; cursor: pointer; line-height: 1.5; }
|
||||
.checkbox-row a { color: #4F46E5; text-decoration: none; }
|
||||
.card-actions {
|
||||
padding: 20px 40px;
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
background: #F9FAFB; border-top: 1px solid #E5E7EB;
|
||||
border-radius: 0 0 12px 12px;
|
||||
}
|
||||
.btn-back {
|
||||
padding: 10px 20px; background: #FFFFFF; color: #374151;
|
||||
border: 1.5px solid #E5E7EB; border-radius: 6px;
|
||||
font-size: 14px; font-weight: 500; cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.btn-back:hover { border-color: #9CA3AF; }
|
||||
.btn-next {
|
||||
padding: 10px 28px; background: #4F46E5; color: #FFFFFF;
|
||||
border: none; border-radius: 6px;
|
||||
font-size: 14px; font-weight: 600; cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.btn-next:hover { background: #4338CA; }
|
||||
.already-have { font-size: 14px; color: #6B7280; }
|
||||
.already-have a { color: #4F46E5; text-decoration: none; font-weight: 500; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top-bar">
|
||||
<a href="01-landing.html" class="logo">
|
||||
<div class="logo-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>
|
||||
HR Portal
|
||||
</a>
|
||||
<div class="already-have">Already have an account? <a href="02-login.html">Sign in</a></div>
|
||||
</div>
|
||||
|
||||
<div class="page-wrapper">
|
||||
<!-- STEP INDICATOR -->
|
||||
<div class="step-indicator">
|
||||
<div class="step">
|
||||
<div class="step-circle done">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="step-label active">Company Info</span>
|
||||
</div>
|
||||
<div class="step-connector done"></div>
|
||||
<div class="step">
|
||||
<div class="step-circle active">2</div>
|
||||
<span class="step-label active">Admin Account</span>
|
||||
</div>
|
||||
<div class="step-connector"></div>
|
||||
<div class="step">
|
||||
<div class="step-circle inactive">3</div>
|
||||
<span class="step-label inactive">Done</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="register-card">
|
||||
<div class="card-header">
|
||||
<h1>Create your HR Portal account</h1>
|
||||
<p>Set up your company and admin account to get started in minutes.</p>
|
||||
</div>
|
||||
|
||||
<!-- COMPANY INFO -->
|
||||
<div class="card-section">
|
||||
<div class="section-title">Company Information</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group" style="grid-column: 1 / -1;">
|
||||
<label class="form-label" for="company-name">Company Name <span class="required">*</span></label>
|
||||
<input class="form-input" type="text" id="company-name" placeholder="Acme Corporation" value="TechFlow Inc.">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="company-size">Company Size <span class="required">*</span></label>
|
||||
<div class="form-select-wrapper">
|
||||
<select class="form-select" id="company-size">
|
||||
<option>1–10 employees</option>
|
||||
<option>11–50 employees</option>
|
||||
<option selected>51–200 employees</option>
|
||||
<option>201–500 employees</option>
|
||||
<option>500+ employees</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="industry">Industry <span class="required">*</span></label>
|
||||
<div class="form-select-wrapper">
|
||||
<select class="form-select" id="industry">
|
||||
<option>Healthcare</option>
|
||||
<option selected>Technology</option>
|
||||
<option>Finance</option>
|
||||
<option>Retail</option>
|
||||
<option>Manufacturing</option>
|
||||
<option>Education</option>
|
||||
<option>Other</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="country">Country</label>
|
||||
<div class="form-select-wrapper">
|
||||
<select class="form-select" id="country">
|
||||
<option selected>United States</option>
|
||||
<option>United Kingdom</option>
|
||||
<option>India</option>
|
||||
<option>Canada</option>
|
||||
<option>Australia</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="timezone">Timezone</label>
|
||||
<div class="form-select-wrapper">
|
||||
<select class="form-select" id="timezone">
|
||||
<option selected>PST (UTC-8)</option>
|
||||
<option>MST (UTC-7)</option>
|
||||
<option>CST (UTC-6)</option>
|
||||
<option>EST (UTC-5)</option>
|
||||
<option>IST (UTC+5:30)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ADMIN ACCOUNT -->
|
||||
<div class="card-section">
|
||||
<div class="section-title">Admin Account Details</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="first-name">First Name <span class="required">*</span></label>
|
||||
<input class="form-input" type="text" id="first-name" placeholder="Sarah" value="Sarah">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="last-name">Last Name <span class="required">*</span></label>
|
||||
<input class="form-input" type="text" id="last-name" placeholder="Chen" value="Chen">
|
||||
</div>
|
||||
<div class="form-group" style="grid-column: 1 / -1;">
|
||||
<label class="form-label" for="email">Work Email <span class="required">*</span></label>
|
||||
<input class="form-input" type="email" id="email" placeholder="you@company.com" value="sarah@techflow.com">
|
||||
<p class="hint">This will be your login email and primary admin contact.</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="password">Password <span class="required">*</span></label>
|
||||
<input class="form-input" type="password" id="password" value="••••••••••••">
|
||||
<div class="password-strength">
|
||||
<div class="strength-bar"><div class="strength-fill"></div></div>
|
||||
<span class="strength-label">Strong password</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="confirm-password">Confirm Password <span class="required">*</span></label>
|
||||
<input class="form-input" type="password" id="confirm-password" value="••••••••••••">
|
||||
<p class="hint" style="color:#10B981;">Passwords match</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-row">
|
||||
<input type="checkbox" id="terms" checked>
|
||||
<label for="terms">
|
||||
I agree to HR Portal's <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
|
||||
I understand that by creating this account, I become the primary administrator.
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="card-actions">
|
||||
<a href="02-login.html" class="btn-back">Sign in instead</a>
|
||||
<button class="btn-next">
|
||||
Create Account
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,653 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dashboard — HR Portal</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@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: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
|
||||
|
||||
/* SIDEBAR */
|
||||
.sidebar {
|
||||
width: 240px; min-height: 100vh; background: #FFFFFF;
|
||||
border-right: 1px solid #E5E7EB;
|
||||
display: flex; flex-direction: column;
|
||||
position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
|
||||
}
|
||||
.sidebar-logo {
|
||||
padding: 20px 20px 16px;
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
font-size: 18px; font-weight: 700; color: #111827;
|
||||
border-bottom: 1px solid #F3F4F6;
|
||||
}
|
||||
.logo-icon {
|
||||
width: 32px; height: 32px; background: #4F46E5; border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||
}
|
||||
.logo-icon svg { width: 16px; height: 16px; }
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-section-label {
|
||||
padding: 8px 16px 4px;
|
||||
font-size: 11px; font-weight: 600; color: #9CA3AF;
|
||||
text-transform: uppercase; letter-spacing: 0.6px;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 9px 16px; margin: 1px 8px; border-radius: 6px;
|
||||
font-size: 14px; font-weight: 500; color: #6B7280;
|
||||
text-decoration: none; cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.nav-item:hover { background: #F9FAFB; color: #111827; }
|
||||
.nav-item.active { background: #EEF2FF; 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: 11px; font-weight: 600;
|
||||
padding: 1px 7px; border-radius: 10px;
|
||||
}
|
||||
.nav-badge.yellow { background: #F59E0B; }
|
||||
.sidebar-footer {
|
||||
padding: 16px;
|
||||
border-top: 1px solid #F3F4F6;
|
||||
}
|
||||
.user-row {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 8px; border-radius: 8px;
|
||||
cursor: pointer; transition: background 0.15s;
|
||||
}
|
||||
.user-row:hover { background: #F9FAFB; }
|
||||
.user-avatar {
|
||||
width: 34px; height: 34px; border-radius: 50%;
|
||||
background: #4F46E5; color: #FFF;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 13px; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
.user-info { flex: 1; min-width: 0; }
|
||||
.user-name { font-size: 13px; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.user-role { font-size: 11px; color: #9CA3AF; }
|
||||
.logout-btn {
|
||||
width: 100%; margin-top: 8px;
|
||||
padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px;
|
||||
background: transparent; color: #6B7280; font-size: 13px; font-weight: 500;
|
||||
cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.logout-btn:hover { border-color: #EF4444; color: #EF4444; }
|
||||
|
||||
/* MAIN */
|
||||
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topnav {
|
||||
height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB;
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
padding: 0 28px; position: sticky; top: 0; z-index: 40;
|
||||
}
|
||||
.search-bar {
|
||||
flex: 1; max-width: 360px;
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
background: #F9FAFB; border: 1.5px solid #E5E7EB; border-radius: 8px;
|
||||
padding: 8px 14px;
|
||||
}
|
||||
.search-bar svg { width: 16px; height: 16px; color: #9CA3AF; flex-shrink: 0; }
|
||||
.search-bar input {
|
||||
border: none; background: transparent; font-size: 14px; color: #111827;
|
||||
outline: none; width: 100%;
|
||||
}
|
||||
.search-bar input::placeholder { color: #9CA3AF; }
|
||||
.topnav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
|
||||
.icon-btn {
|
||||
width: 36px; height: 36px; border-radius: 8px;
|
||||
border: 1.5px solid #E5E7EB; background: #FFFFFF;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
cursor: pointer; position: relative; transition: all 0.15s;
|
||||
}
|
||||
.icon-btn:hover { background: #F9FAFB; border-color: #D1D5DB; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
|
||||
.notif-badge {
|
||||
position: absolute; top: -4px; right: -4px;
|
||||
background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700;
|
||||
width: 16px; height: 16px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
border: 2px solid #FFFFFF;
|
||||
}
|
||||
.topnav-avatar {
|
||||
width: 36px; height: 36px; border-radius: 50%;
|
||||
background: #4F46E5; color: #FFF;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 13px; font-weight: 600; cursor: pointer;
|
||||
}
|
||||
.content { padding: 28px; }
|
||||
|
||||
/* WELCOME BANNER */
|
||||
.welcome-banner {
|
||||
background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
|
||||
border-radius: 12px; padding: 24px 28px;
|
||||
margin-bottom: 24px; color: #FFFFFF;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
}
|
||||
.welcome-title { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
|
||||
.welcome-sub { font-size: 14px; color: rgba(255,255,255,0.8); }
|
||||
.welcome-right { text-align: right; }
|
||||
.welcome-date { font-size: 13px; color: rgba(255,255,255,0.7); margin-bottom: 4px; }
|
||||
.welcome-btn {
|
||||
padding: 8px 16px; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3);
|
||||
border-radius: 6px; color: #FFF; font-size: 13px; font-weight: 500; cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.welcome-btn:hover { background: rgba(255,255,255,0.3); }
|
||||
|
||||
/* STATS ROW */
|
||||
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
|
||||
.stat-card {
|
||||
background: #FFFFFF; border-radius: 10px; padding: 20px;
|
||||
border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.stat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
|
||||
.stat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
|
||||
.stat-label { font-size: 13px; color: #6B7280; font-weight: 500; }
|
||||
.stat-icon {
|
||||
width: 36px; height: 36px; border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.stat-icon svg { width: 18px; height: 18px; }
|
||||
.stat-value { font-size: 28px; font-weight: 700; color: #111827; margin-bottom: 4px; }
|
||||
.stat-change { font-size: 12px; color: #6B7280; display: flex; align-items: center; gap: 4px; }
|
||||
.stat-change.up { color: #10B981; }
|
||||
.stat-change.down { color: #EF4444; }
|
||||
|
||||
/* TWO COL GRID */
|
||||
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
|
||||
.card {
|
||||
background: #FFFFFF; border-radius: 10px;
|
||||
border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-header-row {
|
||||
padding: 16px 20px;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
border-bottom: 1px solid #F3F4F6;
|
||||
}
|
||||
.card-title { font-size: 15px; font-weight: 600; color: #111827; }
|
||||
.card-action { font-size: 13px; color: #4F46E5; cursor: pointer; font-weight: 500; text-decoration: none; }
|
||||
.card-action:hover { text-decoration: underline; }
|
||||
|
||||
/* LEAVE REQUESTS */
|
||||
.leave-item {
|
||||
padding: 14px 20px;
|
||||
border-bottom: 1px solid #F9FAFB;
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.leave-item:hover { background: #FAFAFA; }
|
||||
.leave-item:last-child { border-bottom: none; }
|
||||
.emp-avatar {
|
||||
width: 36px; height: 36px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 13px; font-weight: 600; color: #FFF; flex-shrink: 0;
|
||||
}
|
||||
.leave-info { flex: 1; }
|
||||
.leave-emp-name { font-size: 14px; font-weight: 500; color: #111827; }
|
||||
.leave-meta { font-size: 12px; color: #9CA3AF; margin-top: 1px; }
|
||||
.badge {
|
||||
padding: 2px 8px; border-radius: 4px;
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
|
||||
}
|
||||
.badge-blue { background: #EFF6FF; color: #3B82F6; }
|
||||
.badge-green { background: #ECFDF5; color: #10B981; }
|
||||
.badge-yellow { background: #FFFBEB; color: #F59E0B; }
|
||||
.badge-red { background: #FEF2F2; color: #EF4444; }
|
||||
.badge-purple { background: #F5F3FF; color: #7C3AED; }
|
||||
.badge-indigo { background: #EEF2FF; color: #4F46E5; }
|
||||
.badge-gray { background: #F3F4F6; color: #6B7280; }
|
||||
.leave-actions { display: flex; gap: 6px; }
|
||||
.btn-approve {
|
||||
padding: 5px 12px; background: #ECFDF5; color: #10B981;
|
||||
border: 1px solid #BBF7D0; border-radius: 5px;
|
||||
font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s;
|
||||
}
|
||||
.btn-approve:hover { background: #10B981; color: #FFF; }
|
||||
.btn-reject {
|
||||
padding: 5px 12px; background: #FEF2F2; color: #EF4444;
|
||||
border: 1px solid #FECACA; border-radius: 5px;
|
||||
font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s;
|
||||
}
|
||||
.btn-reject:hover { background: #EF4444; color: #FFF; }
|
||||
|
||||
/* ACTIVITY */
|
||||
.activity-item {
|
||||
padding: 12px 20px;
|
||||
display: flex; align-items: flex-start; gap: 12px;
|
||||
border-bottom: 1px solid #F9FAFB;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.activity-item:hover { background: #FAFAFA; }
|
||||
.activity-item:last-child { border-bottom: none; }
|
||||
.activity-icon {
|
||||
width: 32px; height: 32px; border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.activity-content { flex: 1; }
|
||||
.activity-text { font-size: 13px; color: #374151; line-height: 1.5; }
|
||||
.activity-text strong { color: #111827; }
|
||||
.activity-time { font-size: 12px; color: #9CA3AF; margin-top: 2px; }
|
||||
|
||||
/* BOTTOM ROW */
|
||||
.bottom-row { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; }
|
||||
.dept-bar-item { padding: 10px 20px; display: flex; align-items: center; gap: 12px; }
|
||||
.dept-bar-item:not(:last-child) { border-bottom: 1px solid #F9FAFB; }
|
||||
.dept-name { font-size: 13px; font-weight: 500; color: #374151; width: 100px; flex-shrink: 0; }
|
||||
.dept-bar-track { flex: 1; height: 8px; background: #F3F4F6; border-radius: 4px; overflow: hidden; }
|
||||
.dept-bar-fill { height: 100%; border-radius: 4px; }
|
||||
.dept-count { font-size: 13px; color: #6B7280; width: 40px; text-align: right; flex-shrink: 0; }
|
||||
|
||||
.announce-item { padding: 14px 20px; border-bottom: 1px solid #F9FAFB; }
|
||||
.announce-item:last-child { border-bottom: none; }
|
||||
.announce-title { font-size: 14px; font-weight: 600; color: #111827; margin-bottom: 3px; }
|
||||
.announce-body { font-size: 13px; color: #6B7280; line-height: 1.5; }
|
||||
.announce-meta { font-size: 11px; color: #9CA3AF; margin-top: 6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- SIDEBAR -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="logo-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>
|
||||
HR Portal
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="04-admin-dashboard.html" class="nav-item active">
|
||||
<svg 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 href="05-employee-directory.html" class="nav-item">
|
||||
<svg 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 href="08-department-management.html" class="nav-item">
|
||||
<svg 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>
|
||||
<a href="09-leave-requests.html" class="nav-item">
|
||||
<svg 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 yellow">7</span>
|
||||
</a>
|
||||
<a href="11-attendance.html" class="nav-item">
|
||||
<svg 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 href="12-payroll-dashboard.html" class="nav-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
|
||||
Payroll
|
||||
</a>
|
||||
<a href="13-recruitment.html" class="nav-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
|
||||
Recruitment
|
||||
</a>
|
||||
<a href="14-expense-claims.html" class="nav-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
|
||||
Expense Claims
|
||||
</a>
|
||||
<a href="15-performance-reviews.html" class="nav-item">
|
||||
<svg 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>
|
||||
Performance
|
||||
</a>
|
||||
<a href="16-reports.html" class="nav-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>
|
||||
Reports
|
||||
</a>
|
||||
<a href="20-org-chart.html" class="nav-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>
|
||||
Org Chart
|
||||
</a>
|
||||
<a href="#" class="nav-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
|
||||
Announcements
|
||||
</a>
|
||||
<a href="17-settings.html" class="nav-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>
|
||||
Settings
|
||||
</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-row">
|
||||
<div class="user-avatar">SC</div>
|
||||
<div class="user-info">
|
||||
<div class="user-name">Sarah Chen</div>
|
||||
<div class="user-role">HR Administrator</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="logout-btn">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
||||
<polyline points="16 17 21 12 16 7"/>
|
||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
||||
</svg>
|
||||
Sign Out
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- MAIN -->
|
||||
<div class="main-wrapper">
|
||||
<!-- TOPNAV -->
|
||||
<header class="topnav">
|
||||
<div class="search-bar">
|
||||
<svg 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>
|
||||
<input type="text" placeholder="Search employees, leaves, reports...">
|
||||
</div>
|
||||
<div class="topnav-actions">
|
||||
<div class="icon-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/>
|
||||
</svg>
|
||||
<span class="notif-badge">3</span>
|
||||
</div>
|
||||
<div class="icon-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="topnav-avatar">SC</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- CONTENT -->
|
||||
<main class="content">
|
||||
|
||||
<!-- WELCOME BANNER -->
|
||||
<div class="welcome-banner">
|
||||
<div>
|
||||
<div class="welcome-title">Good morning, Sarah! Here's what needs your attention.</div>
|
||||
<div class="welcome-sub">You have 7 pending leave requests and 2 new job applications to review.</div>
|
||||
</div>
|
||||
<div class="welcome-right">
|
||||
<div class="welcome-date">Friday, May 9, 2026</div>
|
||||
<button class="welcome-btn">View Action Items</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STATS ROW -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<span class="stat-label">Total Employees</span>
|
||||
<div class="stat-icon" style="background:#EEF2FF;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#4F46E5" 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>
|
||||
</div>
|
||||
<div class="stat-value">248</div>
|
||||
<div class="stat-change 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>
|
||||
+5 this month
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<span class="stat-label">On Leave Today</span>
|
||||
<div class="stat-icon" style="background:#FFF7ED;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-value">12</div>
|
||||
<div class="stat-change">4.8% of workforce</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<span class="stat-label">Pending Approvals</span>
|
||||
<div class="stat-icon" style="background:#FEF2F2;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2">
|
||||
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
|
||||
<line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-value">7</div>
|
||||
<div class="stat-change 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>
|
||||
Needs action today
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<span class="stat-label">May Payroll</span>
|
||||
<div class="stat-icon" style="background:#ECFDF5;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2">
|
||||
<line x1="12" y1="1" x2="12" y2="23"/>
|
||||
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-value">$284.5K</div>
|
||||
<div class="stat-change 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.1% vs last month
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TWO COLUMN -->
|
||||
<div class="two-col">
|
||||
<!-- PENDING LEAVE REQUESTS -->
|
||||
<div class="card">
|
||||
<div class="card-header-row">
|
||||
<span class="card-title">Pending Leave Requests</span>
|
||||
<a href="09-leave-requests.html" class="card-action">View all (7)</a>
|
||||
</div>
|
||||
<div class="leave-item">
|
||||
<div class="emp-avatar" style="background:#4F46E5;">MR</div>
|
||||
<div class="leave-info">
|
||||
<div class="leave-emp-name">Michael Rodriguez</div>
|
||||
<div class="leave-meta">May 12 – May 15 · 4 days</div>
|
||||
</div>
|
||||
<span class="badge badge-blue">Annual</span>
|
||||
<div class="leave-actions">
|
||||
<button class="btn-approve">Approve</button>
|
||||
<button class="btn-reject">Reject</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="leave-item">
|
||||
<div class="emp-avatar" style="background:#10B981;">PP</div>
|
||||
<div class="leave-info">
|
||||
<div class="leave-emp-name">Priya Patel</div>
|
||||
<div class="leave-meta">May 13 – May 13 · 1 day</div>
|
||||
</div>
|
||||
<span class="badge badge-yellow">Sick</span>
|
||||
<div class="leave-actions">
|
||||
<button class="btn-approve">Approve</button>
|
||||
<button class="btn-reject">Reject</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="leave-item">
|
||||
<div class="emp-avatar" style="background:#F59E0B;">JK</div>
|
||||
<div class="leave-info">
|
||||
<div class="leave-emp-name">James Kim</div>
|
||||
<div class="leave-meta">May 19 – May 23 · 5 days</div>
|
||||
</div>
|
||||
<span class="badge badge-blue">Annual</span>
|
||||
<div class="leave-actions">
|
||||
<button class="btn-approve">Approve</button>
|
||||
<button class="btn-reject">Reject</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="leave-item">
|
||||
<div class="emp-avatar" style="background:#EF4444;">AL</div>
|
||||
<div class="leave-info">
|
||||
<div class="leave-emp-name">Aisha Larsson</div>
|
||||
<div class="leave-meta">May 26 – May 28 · 3 days</div>
|
||||
</div>
|
||||
<span class="badge badge-purple">Casual</span>
|
||||
<div class="leave-actions">
|
||||
<button class="btn-approve">Approve</button>
|
||||
<button class="btn-reject">Reject</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RECENT ACTIVITY -->
|
||||
<div class="card">
|
||||
<div class="card-header-row">
|
||||
<span class="card-title">Recent Activity</span>
|
||||
<a href="#" class="card-action">View log</a>
|
||||
</div>
|
||||
<div class="activity-item">
|
||||
<div class="activity-icon" style="background:#EEF2FF;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#4F46E5" stroke-width="2">
|
||||
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="activity-content">
|
||||
<div class="activity-text"><strong>David Thompson</strong> was added to Engineering team</div>
|
||||
<div class="activity-time">2 hours ago</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity-item">
|
||||
<div class="activity-icon" style="background:#ECFDF5;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="activity-content">
|
||||
<div class="activity-text">Leave request for <strong>Ravi Shankar</strong> was approved</div>
|
||||
<div class="activity-time">3 hours ago</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity-item">
|
||||
<div class="activity-icon" style="background:#FFF7ED;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2">
|
||||
<line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="activity-content">
|
||||
<div class="activity-text">April payroll of <strong>$278,400</strong> was processed</div>
|
||||
<div class="activity-time">Yesterday, 4:30 PM</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity-item">
|
||||
<div class="activity-icon" style="background:#F5F3FF;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#7C3AED" stroke-width="2">
|
||||
<rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="activity-content">
|
||||
<div class="activity-text">New job posted: <strong>Senior Frontend Engineer</strong></div>
|
||||
<div class="activity-time">Yesterday, 2:00 PM</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity-item">
|
||||
<div class="activity-icon" style="background:#FEF2F2;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="activity-content">
|
||||
<div class="activity-text"><strong>Company announcement</strong> sent to all employees</div>
|
||||
<div class="activity-time">May 8, 10:00 AM</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BOTTOM ROW -->
|
||||
<div class="bottom-row">
|
||||
<!-- DEPARTMENT OVERVIEW -->
|
||||
<div class="card">
|
||||
<div class="card-header-row">
|
||||
<span class="card-title">Department Overview</span>
|
||||
<a href="08-department-management.html" class="card-action">Manage</a>
|
||||
</div>
|
||||
<div class="dept-bar-item">
|
||||
<span class="dept-name">Engineering</span>
|
||||
<div class="dept-bar-track">
|
||||
<div class="dept-bar-fill" style="width:62%;background:#4F46E5;"></div>
|
||||
</div>
|
||||
<span class="dept-count">45</span>
|
||||
</div>
|
||||
<div class="dept-bar-item">
|
||||
<span class="dept-name">Operations</span>
|
||||
<div class="dept-bar-track">
|
||||
<div class="dept-bar-fill" style="width:43%;background:#3B82F6;"></div>
|
||||
</div>
|
||||
<span class="dept-count">31</span>
|
||||
</div>
|
||||
<div class="dept-bar-item">
|
||||
<span class="dept-name">Sales</span>
|
||||
<div class="dept-bar-track">
|
||||
<div class="dept-bar-fill" style="width:33%;background:#10B981;"></div>
|
||||
</div>
|
||||
<span class="dept-count">24</span>
|
||||
</div>
|
||||
<div class="dept-bar-item">
|
||||
<span class="dept-name">Marketing</span>
|
||||
<div class="dept-bar-track">
|
||||
<div class="dept-bar-fill" style="width:25%;background:#F59E0B;"></div>
|
||||
</div>
|
||||
<span class="dept-count">18</span>
|
||||
</div>
|
||||
<div class="dept-bar-item">
|
||||
<span class="dept-name">Finance</span>
|
||||
<div class="dept-bar-track">
|
||||
<div class="dept-bar-fill" style="width:17%;background:#7C3AED;"></div>
|
||||
</div>
|
||||
<span class="dept-count">12</span>
|
||||
</div>
|
||||
<div class="dept-bar-item">
|
||||
<span class="dept-name">HR</span>
|
||||
<div class="dept-bar-track">
|
||||
<div class="dept-bar-fill" style="width:11%;background:#EF4444;"></div>
|
||||
</div>
|
||||
<span class="dept-count">8</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ANNOUNCEMENTS -->
|
||||
<div class="card">
|
||||
<div class="card-header-row">
|
||||
<span class="card-title">Announcements</span>
|
||||
<a href="#" class="card-action">Post new</a>
|
||||
</div>
|
||||
<div class="announce-item">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
|
||||
<span class="badge badge-indigo">Company</span>
|
||||
<span style="font-size:11px;color:#9CA3AF;">Pinned</span>
|
||||
</div>
|
||||
<div class="announce-title">Q2 Performance Reviews Starting May 15</div>
|
||||
<div class="announce-body">All managers must complete peer review forms by May 20. Self-assessments open from May 10.</div>
|
||||
<div class="announce-meta">Posted by Sarah Chen · 2 days ago</div>
|
||||
</div>
|
||||
<div class="announce-item">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
|
||||
<span class="badge badge-green">Policy</span>
|
||||
</div>
|
||||
<div class="announce-title">Updated Remote Work Policy</div>
|
||||
<div class="announce-body">Effective June 1, employees may work remotely up to 3 days per week with manager approval.</div>
|
||||
<div class="announce-meta">Posted by HR Team · May 7, 2026</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,312 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Employees — HR Portal</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@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: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
|
||||
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.logo-icon svg { width: 16px; height: 16px; }
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; transition: all 0.15s; }
|
||||
.nav-item:hover { background: #F9FAFB; color: #111827; }
|
||||
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
|
||||
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
|
||||
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; }
|
||||
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
|
||||
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
|
||||
.user-role { font-size: 11px; color: #9CA3AF; }
|
||||
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
|
||||
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
|
||||
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
|
||||
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
|
||||
.breadcrumb a:hover { color: #6B7280; }
|
||||
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
|
||||
.breadcrumb span { color: #111827; font-weight: 500; }
|
||||
.topnav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
|
||||
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
|
||||
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
.content { padding: 28px; }
|
||||
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
|
||||
.page-title { font-size: 22px; font-weight: 700; color: #111827; }
|
||||
.btn-primary { padding: 9px 18px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background 0.15s; }
|
||||
.btn-primary:hover { background: #4338CA; }
|
||||
.btn-primary svg { width: 16px; height: 16px; }
|
||||
|
||||
.stats-mini { display: flex; gap: 24px; margin-bottom: 20px; }
|
||||
.stat-mini-item { display: flex; align-items: center; gap: 8px; }
|
||||
.stat-mini-dot { width: 8px; height: 8px; border-radius: 50%; }
|
||||
.stat-mini-label { font-size: 13px; color: #6B7280; }
|
||||
.stat-mini-value { font-size: 14px; font-weight: 600; color: #111827; }
|
||||
|
||||
.filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
|
||||
.filter-search { flex: 1; max-width: 300px; display: flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 8px; padding: 9px 14px; }
|
||||
.filter-search svg { width: 16px; height: 16px; color: #9CA3AF; flex-shrink: 0; }
|
||||
.filter-search input { border: none; background: transparent; font-size: 14px; color: #111827; outline: none; width: 100%; }
|
||||
.filter-search input::placeholder { color: #9CA3AF; }
|
||||
.filter-select { padding: 9px 14px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 8px; font-size: 14px; color: #374151; outline: none; cursor: pointer; appearance: none; min-width: 140px; }
|
||||
.filter-btn { padding: 9px 14px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 8px; font-size: 14px; color: #374151; cursor: pointer; display: flex; align-items: center; gap: 6px; }
|
||||
.filter-btn svg { width: 16px; height: 16px; color: #9CA3AF; }
|
||||
.filter-btn.active { border-color: #4F46E5; color: #4F46E5; background: #EEF2FF; }
|
||||
|
||||
.table-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead { background: #F9FAFB; border-bottom: 1px solid #E5E7EB; }
|
||||
th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: #6B7280; text-align: left; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
|
||||
th input[type="checkbox"] { accent-color: #4F46E5; }
|
||||
tbody tr { border-bottom: 1px solid #F3F4F6; transition: background 0.1s; }
|
||||
tbody tr:last-child { border-bottom: none; }
|
||||
tbody tr:hover { background: #FAFAFA; }
|
||||
td { padding: 14px 16px; font-size: 14px; color: #374151; vertical-align: middle; }
|
||||
.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: 600; color: #FFF; flex-shrink: 0; }
|
||||
.emp-name { font-size: 14px; font-weight: 500; color: #111827; }
|
||||
.emp-email { font-size: 12px; color: #9CA3AF; }
|
||||
.badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.badge-green { background: #ECFDF5; color: #10B981; }
|
||||
.badge-gray { background: #F3F4F6; color: #6B7280; }
|
||||
.badge-blue { background: #EFF6FF; color: #3B82F6; }
|
||||
.action-btn { padding: 5px 12px; border-radius: 5px; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: none; transition: all 0.15s; }
|
||||
.action-btn-primary { background: #EEF2FF; color: #4F46E5; border: 1px solid #C7D2FE; }
|
||||
.action-btn-primary:hover { background: #4F46E5; color: #FFF; }
|
||||
.action-btn-secondary { background: #F9FAFB; color: #6B7280; border: 1px solid #E5E7EB; }
|
||||
.action-btn-secondary:hover { background: #F3F4F6; }
|
||||
.actions-cell { display: flex; gap: 6px; }
|
||||
|
||||
.pagination { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid #F3F4F6; background: #FFFFFF; }
|
||||
.page-info { font-size: 13px; color: #6B7280; }
|
||||
.page-buttons { display: flex; gap: 4px; }
|
||||
.page-btn { width: 32px; height: 32px; border-radius: 6px; border: 1.5px solid #E5E7EB; background: #FFFFFF; font-size: 13px; color: #374151; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; transition: all 0.15s; }
|
||||
.page-btn:hover { border-color: #4F46E5; color: #4F46E5; }
|
||||
.page-btn.active { background: #4F46E5; border-color: #4F46E5; color: #FFF; font-weight: 600; }
|
||||
.page-btn svg { width: 14px; height: 14px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="logo-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>
|
||||
HR Portal
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="04-admin-dashboard.html" class="nav-item"><svg 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 href="05-employee-directory.html" class="nav-item active"><svg 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 href="08-department-management.html" class="nav-item"><svg 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>
|
||||
<a href="09-leave-requests.html" class="nav-item"><svg 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">7</span></a>
|
||||
<a href="11-attendance.html" class="nav-item"><svg 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 href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
|
||||
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
|
||||
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
|
||||
<a href="15-performance-reviews.html" class="nav-item"><svg 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>Performance</a>
|
||||
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
|
||||
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
|
||||
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
|
||||
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-row">
|
||||
<div class="user-avatar">SC</div>
|
||||
<div>
|
||||
<div class="user-name">Sarah Chen</div>
|
||||
<div class="user-role">HR Administrator</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="logout-btn">Sign Out</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<header class="topnav">
|
||||
<div class="breadcrumb">
|
||||
<a href="04-admin-dashboard.html">Home</a>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
<span>Employees</span>
|
||||
</div>
|
||||
<div class="topnav-actions">
|
||||
<div class="icon-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg>
|
||||
<span class="notif-badge">3</span>
|
||||
</div>
|
||||
<div class="topnav-avatar">SC</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="page-title">Employees</div>
|
||||
<div class="stats-mini" style="margin-top:6px;margin-bottom:0;">
|
||||
<div class="stat-mini-item">
|
||||
<div class="stat-mini-dot" style="background:#4F46E5;"></div>
|
||||
<span class="stat-mini-label">Total:</span>
|
||||
<span class="stat-mini-value">248</span>
|
||||
</div>
|
||||
<div class="stat-mini-item">
|
||||
<div class="stat-mini-dot" style="background:#F59E0B;"></div>
|
||||
<span class="stat-mini-label">On Leave:</span>
|
||||
<span class="stat-mini-value">12</span>
|
||||
</div>
|
||||
<div class="stat-mini-item">
|
||||
<div class="stat-mini-dot" style="background:#10B981;"></div>
|
||||
<span class="stat-mini-label">New This Month:</span>
|
||||
<span class="stat-mini-value">5</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="07-add-employee.html" class="btn-primary">
|
||||
<svg 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>
|
||||
Add Employee
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="filter-bar">
|
||||
<div class="filter-search">
|
||||
<svg 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>
|
||||
<input type="text" placeholder="Search by name, email, department...">
|
||||
</div>
|
||||
<select class="filter-select">
|
||||
<option>All Departments</option>
|
||||
<option>Engineering</option>
|
||||
<option>HR</option>
|
||||
<option>Finance</option>
|
||||
<option>Marketing</option>
|
||||
<option>Operations</option>
|
||||
<option>Sales</option>
|
||||
</select>
|
||||
<select class="filter-select">
|
||||
<option>All Status</option>
|
||||
<option>Active</option>
|
||||
<option>Inactive</option>
|
||||
<option>On Leave</option>
|
||||
</select>
|
||||
<button class="filter-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
|
||||
Filters
|
||||
</button>
|
||||
<button class="filter-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
Export
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input type="checkbox"></th>
|
||||
<th>Employee</th>
|
||||
<th>Department</th>
|
||||
<th>Designation</th>
|
||||
<th>Join Date</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><input type="checkbox"></td>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#4F46E5;">SC</div><div><div class="emp-name">Sarah Chen</div><div class="emp-email">sarah.chen@techflow.com</div></div></div></td>
|
||||
<td>HR</td>
|
||||
<td>HR Director</td>
|
||||
<td>Jan 15, 2022</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td><div class="actions-cell"><a href="06-employee-profile.html" class="action-btn action-btn-primary">View</a><button class="action-btn action-btn-secondary">Edit</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox"></td>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#10B981;">MR</div><div><div class="emp-name">Michael Rodriguez</div><div class="emp-email">m.rodriguez@techflow.com</div></div></div></td>
|
||||
<td>Engineering</td>
|
||||
<td>Senior Engineer</td>
|
||||
<td>Mar 8, 2021</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td><div class="actions-cell"><a href="06-employee-profile.html" class="action-btn action-btn-primary">View</a><button class="action-btn action-btn-secondary">Edit</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox"></td>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#F59E0B;">PP</div><div><div class="emp-name">Priya Patel</div><div class="emp-email">priya.patel@techflow.com</div></div></div></td>
|
||||
<td>Finance</td>
|
||||
<td>Financial Analyst</td>
|
||||
<td>Jun 22, 2022</td>
|
||||
<td><span class="badge" style="background:#FEF3C7;color:#D97706;">On Leave</span></td>
|
||||
<td><div class="actions-cell"><a href="06-employee-profile.html" class="action-btn action-btn-primary">View</a><button class="action-btn action-btn-secondary">Edit</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox"></td>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#EF4444;">JK</div><div><div class="emp-name">James Kim</div><div class="emp-email">james.kim@techflow.com</div></div></div></td>
|
||||
<td>Engineering</td>
|
||||
<td>Frontend Developer</td>
|
||||
<td>Sep 5, 2023</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td><div class="actions-cell"><a href="06-employee-profile.html" class="action-btn action-btn-primary">View</a><button class="action-btn action-btn-secondary">Edit</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox"></td>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#7C3AED;">AL</div><div><div class="emp-name">Aisha Larsson</div><div class="emp-email">a.larsson@techflow.com</div></div></div></td>
|
||||
<td>Marketing</td>
|
||||
<td>Marketing Manager</td>
|
||||
<td>Feb 14, 2023</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td><div class="actions-cell"><a href="06-employee-profile.html" class="action-btn action-btn-primary">View</a><button class="action-btn action-btn-secondary">Edit</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox"></td>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#3B82F6;">RS</div><div><div class="emp-name">Ravi Shankar</div><div class="emp-email">ravi.shankar@techflow.com</div></div></div></td>
|
||||
<td>Operations</td>
|
||||
<td>Operations Lead</td>
|
||||
<td>Nov 12, 2020</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td><div class="actions-cell"><a href="06-employee-profile.html" class="action-btn action-btn-primary">View</a><button class="action-btn action-btn-secondary">Edit</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox"></td>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#EC4899;">DT</div><div><div class="emp-name">Diana Torres</div><div class="emp-email">d.torres@techflow.com</div></div></div></td>
|
||||
<td>Sales</td>
|
||||
<td>Sales Representative</td>
|
||||
<td>Apr 3, 2024</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td><div class="actions-cell"><a href="06-employee-profile.html" class="action-btn action-btn-primary">View</a><button class="action-btn action-btn-secondary">Edit</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox"></td>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#6366F1;">NW</div><div><div class="emp-name">Noah Williams</div><div class="emp-email">n.williams@techflow.com</div></div></div></td>
|
||||
<td>Engineering</td>
|
||||
<td>DevOps Engineer</td>
|
||||
<td>Jul 19, 2022</td>
|
||||
<td><span class="badge badge-gray">Inactive</span></td>
|
||||
<td><div class="actions-cell"><a href="06-employee-profile.html" class="action-btn action-btn-primary">View</a><button class="action-btn action-btn-secondary">Edit</button></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<span class="page-info">Showing 1–8 of 248 employees</span>
|
||||
<div class="page-buttons">
|
||||
<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>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,383 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Employee Profile — HR Portal</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@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: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
|
||||
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
|
||||
.logo-icon svg { width: 16px; height: 16px; }
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; transition: all 0.15s; }
|
||||
.nav-item:hover { background: #F9FAFB; color: #111827; }
|
||||
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
|
||||
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
|
||||
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
|
||||
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
|
||||
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
|
||||
.user-role { font-size: 11px; color: #9CA3AF; }
|
||||
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
|
||||
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
|
||||
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
|
||||
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
|
||||
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
|
||||
.breadcrumb span { color: #111827; font-weight: 500; }
|
||||
.topnav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
|
||||
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
|
||||
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
.content { padding: 28px; }
|
||||
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
|
||||
.page-header-left { display: flex; align-items: center; gap: 12px; }
|
||||
.back-link { display: flex; align-items: center; gap: 6px; color: #6B7280; text-decoration: none; font-size: 14px; padding: 6px 10px; border-radius: 6px; transition: all 0.15s; }
|
||||
.back-link:hover { background: #F3F4F6; color: #374151; }
|
||||
.back-link svg { width: 16px; height: 16px; }
|
||||
.page-title { font-size: 22px; font-weight: 700; color: #111827; }
|
||||
.header-actions { display: flex; gap: 8px; }
|
||||
.btn-outline { padding: 8px 16px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; }
|
||||
.btn-outline:hover { border-color: #9CA3AF; }
|
||||
.btn-primary { padding: 8px 16px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
|
||||
.btn-primary:hover { background: #4338CA; }
|
||||
|
||||
/* PROFILE HEADER */
|
||||
.profile-header-card {
|
||||
background: #FFFFFF; border-radius: 12px; border: 1px solid #E5E7EB;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 28px;
|
||||
display: flex; align-items: flex-start; gap: 24px; margin-bottom: 24px;
|
||||
}
|
||||
.profile-avatar {
|
||||
width: 80px; height: 80px; border-radius: 50%;
|
||||
background: #4F46E5; color: #FFF;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 28px; font-weight: 700; flex-shrink: 0;
|
||||
}
|
||||
.profile-info { flex: 1; }
|
||||
.profile-name { font-size: 24px; font-weight: 700; color: #111827; margin-bottom: 4px; }
|
||||
.profile-title { font-size: 16px; color: #6B7280; margin-bottom: 12px; }
|
||||
.profile-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
|
||||
.badge { padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; }
|
||||
.badge-indigo { background: #EEF2FF; color: #4F46E5; }
|
||||
.badge-green { background: #ECFDF5; color: #10B981; }
|
||||
.badge-blue { background: #EFF6FF; color: #3B82F6; }
|
||||
.badge-yellow { background: #FFFBEB; color: #F59E0B; }
|
||||
.profile-meta { display: flex; flex-wrap: wrap; gap: 20px; }
|
||||
.profile-meta-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #6B7280; }
|
||||
.profile-meta-item svg { width: 14px; height: 14px; color: #9CA3AF; }
|
||||
.profile-stats { display: flex; flex-direction: column; gap: 12px; min-width: 200px; }
|
||||
.quick-stat { text-align: center; background: #F9FAFB; border-radius: 8px; padding: 14px; border: 1px solid #E5E7EB; }
|
||||
.quick-stat-value { font-size: 20px; font-weight: 700; color: #111827; }
|
||||
.quick-stat-label { font-size: 11px; color: #9CA3AF; margin-top: 2px; }
|
||||
|
||||
/* TABS */
|
||||
.tabs { display: flex; gap: 0; border-bottom: 1px solid #E5E7EB; margin-bottom: 24px; overflow-x: auto; }
|
||||
.tab { padding: 10px 20px; font-size: 14px; font-weight: 500; color: #6B7280; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: all 0.15s; text-decoration: none; }
|
||||
.tab:hover { color: #374151; }
|
||||
.tab.active { color: #4F46E5; border-bottom-color: #4F46E5; font-weight: 600; }
|
||||
|
||||
/* TAB CONTENT */
|
||||
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
|
||||
.card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
|
||||
.card-header-row { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #F3F4F6; }
|
||||
.card-title { font-size: 15px; font-weight: 600; color: #111827; }
|
||||
.card-action { font-size: 13px; color: #4F46E5; cursor: pointer; font-weight: 500; }
|
||||
.info-grid { padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
.info-item {}
|
||||
.info-label { font-size: 11px; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 4px; }
|
||||
.info-value { font-size: 14px; color: #111827; font-weight: 500; }
|
||||
|
||||
/* LEAVE BALANCE */
|
||||
.leave-balances { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
|
||||
.leave-balance-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
|
||||
.lb-type { font-size: 12px; color: #9CA3AF; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
|
||||
.lb-progress { height: 6px; background: #F3F4F6; border-radius: 3px; margin-bottom: 10px; overflow: hidden; }
|
||||
.lb-progress-fill { height: 100%; border-radius: 3px; }
|
||||
.lb-numbers { display: flex; justify-content: space-between; align-items: baseline; }
|
||||
.lb-used { font-size: 22px; font-weight: 700; color: #111827; }
|
||||
.lb-total { font-size: 12px; color: #9CA3AF; }
|
||||
|
||||
/* QUICK STATS ROW */
|
||||
.quick-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
||||
.qstat-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); display: flex; align-items: center; gap: 16px; }
|
||||
.qstat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.qstat-icon svg { width: 20px; height: 20px; }
|
||||
.qstat-value { font-size: 22px; font-weight: 700; color: #111827; }
|
||||
.qstat-label { font-size: 12px; color: #9CA3AF; margin-top: 2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>
|
||||
HR Portal
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="04-admin-dashboard.html" class="nav-item"><svg 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 href="05-employee-directory.html" class="nav-item active"><svg 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 href="08-department-management.html" class="nav-item"><svg 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>
|
||||
<a href="09-leave-requests.html" class="nav-item"><svg 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">7</span></a>
|
||||
<a href="11-attendance.html" class="nav-item"><svg 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 href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
|
||||
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
|
||||
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
|
||||
<a href="15-performance-reviews.html" class="nav-item"><svg 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>Performance</a>
|
||||
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
|
||||
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
|
||||
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
|
||||
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
|
||||
<button class="logout-btn">Sign Out</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<header class="topnav">
|
||||
<div class="breadcrumb">
|
||||
<a href="04-admin-dashboard.html">Home</a>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
<a href="05-employee-directory.html">Employees</a>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
<span>Michael Rodriguez</span>
|
||||
</div>
|
||||
<div class="topnav-actions">
|
||||
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
|
||||
<div class="topnav-avatar">SC</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
<div class="page-header">
|
||||
<div class="page-header-left">
|
||||
<a href="05-employee-directory.html" class="back-link">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
Back
|
||||
</a>
|
||||
<div class="page-title">Michael Rodriguez</div>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="btn-outline">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
Export
|
||||
</button>
|
||||
<button class="btn-primary">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
|
||||
Edit Profile
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PROFILE HEADER -->
|
||||
<div class="profile-header-card">
|
||||
<div class="profile-avatar">MR</div>
|
||||
<div class="profile-info">
|
||||
<div class="profile-name">Michael Rodriguez</div>
|
||||
<div class="profile-title">Senior Software Engineer</div>
|
||||
<div class="profile-badges">
|
||||
<span class="badge badge-indigo">Engineering</span>
|
||||
<span class="badge badge-green">Active</span>
|
||||
<span class="badge badge-blue">Full-time</span>
|
||||
</div>
|
||||
<div class="profile-meta">
|
||||
<div class="profile-meta-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
||||
m.rodriguez@techflow.com
|
||||
</div>
|
||||
<div class="profile-meta-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.56 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.47a16 16 0 0 0 6.29 6.29l.87-.87a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
|
||||
+1 (415) 555-0187
|
||||
</div>
|
||||
<div class="profile-meta-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="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>
|
||||
Joined Mar 8, 2021
|
||||
</div>
|
||||
<div class="profile-meta-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
Reports to: Ravi Shankar
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-stats">
|
||||
<div class="quick-stat">
|
||||
<div class="quick-stat-value" style="color:#4F46E5;">4.2</div>
|
||||
<div class="quick-stat-label">Performance Score</div>
|
||||
</div>
|
||||
<div class="quick-stat">
|
||||
<div class="quick-stat-value" style="color:#10B981;">98%</div>
|
||||
<div class="quick-stat-label">Attendance Rate</div>
|
||||
</div>
|
||||
<div class="quick-stat">
|
||||
<div class="quick-stat-value" style="color:#F59E0B;">168h</div>
|
||||
<div class="quick-stat-label">Hours This Month</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TABS -->
|
||||
<div class="tabs">
|
||||
<a href="#" class="tab active">Overview</a>
|
||||
<a href="#" class="tab">Leave</a>
|
||||
<a href="#" class="tab">Attendance</a>
|
||||
<a href="#" class="tab">Payslips</a>
|
||||
<a href="#" class="tab">Documents</a>
|
||||
<a href="#" class="tab">Performance</a>
|
||||
</div>
|
||||
|
||||
<!-- OVERVIEW CONTENT -->
|
||||
<div class="two-col">
|
||||
<div class="card">
|
||||
<div class="card-header-row">
|
||||
<span class="card-title">Personal Information</span>
|
||||
<span class="card-action">Edit</span>
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<div class="info-label">Full Name</div>
|
||||
<div class="info-value">Michael David Rodriguez</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">Date of Birth</div>
|
||||
<div class="info-value">April 14, 1990</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">Gender</div>
|
||||
<div class="info-value">Male</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">Nationality</div>
|
||||
<div class="info-value">American</div>
|
||||
</div>
|
||||
<div class="info-item" style="grid-column:1/-1;">
|
||||
<div class="info-label">Address</div>
|
||||
<div class="info-value">1247 Market Street, Apt 4B, San Francisco, CA 94103</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">Emergency Contact</div>
|
||||
<div class="info-value">Elena Rodriguez (Wife)</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">Emergency Phone</div>
|
||||
<div class="info-value">+1 (415) 555-0234</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header-row">
|
||||
<span class="card-title">Employment Details</span>
|
||||
<span class="card-action">Edit</span>
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<div class="info-label">Employee ID</div>
|
||||
<div class="info-value">EMP-0042</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">Department</div>
|
||||
<div class="info-value">Engineering</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">Designation</div>
|
||||
<div class="info-value">Senior Software Engineer</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">Employment Type</div>
|
||||
<div class="info-value">Full-time</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">Date of Joining</div>
|
||||
<div class="info-value">March 8, 2021</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">Work Location</div>
|
||||
<div class="info-value">San Francisco HQ</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">Manager</div>
|
||||
<div class="info-value">Ravi Shankar</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">Salary Band</div>
|
||||
<div class="info-value">Senior (L4)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LEAVE BALANCES -->
|
||||
<div style="font-size:15px;font-weight:600;color:#111827;margin-bottom:12px;">Leave Balance</div>
|
||||
<div class="leave-balances">
|
||||
<div class="leave-balance-card">
|
||||
<div class="lb-type">Annual Leave</div>
|
||||
<div class="lb-progress"><div class="lb-progress-fill" style="width:90%;background:#4F46E5;"></div></div>
|
||||
<div class="lb-numbers">
|
||||
<div><span class="lb-used">18</span> <span style="font-size:13px;color:#6B7280;">days used</span></div>
|
||||
<div class="lb-total">of 20 days</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="leave-balance-card">
|
||||
<div class="lb-type">Sick Leave</div>
|
||||
<div class="lb-progress"><div class="lb-progress-fill" style="width:50%;background:#3B82F6;"></div></div>
|
||||
<div class="lb-numbers">
|
||||
<div><span class="lb-used">5</span> <span style="font-size:13px;color:#6B7280;">days used</span></div>
|
||||
<div class="lb-total">of 10 days</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="leave-balance-card">
|
||||
<div class="lb-type">Casual Leave</div>
|
||||
<div class="lb-progress"><div class="lb-progress-fill" style="width:60%;background:#10B981;"></div></div>
|
||||
<div class="lb-numbers">
|
||||
<div><span class="lb-used">3</span> <span style="font-size:13px;color:#6B7280;">days used</span></div>
|
||||
<div class="lb-total">of 5 days</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- QUICK STATS -->
|
||||
<div style="font-size:15px;font-weight:600;color:#111827;margin-bottom:12px;">This Month</div>
|
||||
<div class="quick-stats-row">
|
||||
<div class="qstat-card">
|
||||
<div class="qstat-icon" style="background:#EEF2FF;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#4F46E5" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="qstat-value">168h 20m</div>
|
||||
<div class="qstat-label">Working Hours</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="qstat-card">
|
||||
<div class="qstat-icon" style="background:#ECFDF5;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="qstat-value">98.2%</div>
|
||||
<div class="qstat-label">Attendance Rate</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="qstat-card">
|
||||
<div class="qstat-icon" style="background:#FFF7ED;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="qstat-value">4.2 / 5.0</div>
|
||||
<div class="qstat-label">Performance Score</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,365 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Add Employee — HR Portal</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@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: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
|
||||
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
|
||||
.logo-icon svg { width: 16px; height: 16px; }
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
|
||||
.nav-item:hover { background: #F9FAFB; color: #111827; }
|
||||
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
|
||||
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
|
||||
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
|
||||
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
|
||||
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
|
||||
.user-role { font-size: 11px; color: #9CA3AF; }
|
||||
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
|
||||
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
|
||||
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
|
||||
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
|
||||
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
|
||||
.breadcrumb span { color: #111827; font-weight: 500; }
|
||||
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
|
||||
.btn-cancel { padding: 8px 18px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; }
|
||||
.btn-save { padding: 8px 18px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
|
||||
.btn-save:hover { background: #4338CA; }
|
||||
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
|
||||
.content { padding: 28px; max-width: 900px; }
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
|
||||
.page-title { font-size: 22px; font-weight: 700; color: #111827; }
|
||||
.page-subtitle { font-size: 14px; color: #6B7280; margin-top: 2px; }
|
||||
.form-actions { display: flex; gap: 8px; }
|
||||
|
||||
.form-section { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; margin-bottom: 20px; }
|
||||
.section-header { padding: 18px 24px; border-bottom: 1px solid #F3F4F6; background: #FAFAFA; display: flex; align-items: center; gap: 10px; }
|
||||
.section-num { width: 24px; height: 24px; background: #4F46E5; border-radius: 50%; color: #FFF; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.section-title { font-size: 14px; font-weight: 600; color: #111827; }
|
||||
.section-subtitle { font-size: 12px; color: #9CA3AF; }
|
||||
.section-body { padding: 24px; }
|
||||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
|
||||
.form-grid.three { grid-template-columns: 1fr 1fr 1fr; }
|
||||
.form-group {}
|
||||
.form-label { display: block; font-size: 13px; font-weight: 500; color: #374151; margin-bottom: 6px; }
|
||||
.form-label .req { color: #EF4444; }
|
||||
.form-input, .form-select, .form-textarea {
|
||||
width: 100%; padding: 9px 13px;
|
||||
border: 1.5px solid #E5E7EB; border-radius: 6px;
|
||||
font-size: 14px; font-family: 'Inter', sans-serif; color: #111827;
|
||||
background: #FFFFFF; outline: none; transition: border-color 0.15s;
|
||||
appearance: none;
|
||||
}
|
||||
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.08); }
|
||||
.form-input::placeholder, .form-textarea::placeholder { color: #9CA3AF; }
|
||||
.form-textarea { resize: vertical; min-height: 80px; }
|
||||
.form-select-wrap { position: relative; }
|
||||
.form-select-wrap::after { content: ''; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #9CA3AF; pointer-events: none; }
|
||||
.form-hint { font-size: 12px; color: #9CA3AF; margin-top: 4px; }
|
||||
.col-span-2 { grid-column: 1 / -1; }
|
||||
|
||||
/* AVATAR UPLOAD */
|
||||
.avatar-upload { display: flex; align-items: center; gap: 20px; margin-bottom: 0; grid-column: 1 / -1; }
|
||||
.avatar-preview { width: 72px; height: 72px; border-radius: 50%; background: #E5E7EB; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #9CA3AF; flex-shrink: 0; }
|
||||
.avatar-upload-btn { padding: 8px 16px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 13px; cursor: pointer; }
|
||||
.avatar-upload-hint { font-size: 12px; color: #9CA3AF; margin-top: 4px; }
|
||||
|
||||
/* CHECKBOX TOGGLE */
|
||||
.checkbox-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
|
||||
.checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: #4F46E5; cursor: pointer; }
|
||||
.checkbox-row label { font-size: 14px; color: #374151; cursor: pointer; }
|
||||
|
||||
.divider { height: 1px; background: #F3F4F6; margin: 4px 0; }
|
||||
|
||||
/* BOTTOM SAVE BAR */
|
||||
.save-bar {
|
||||
position: fixed; bottom: 0; left: 240px; right: 0;
|
||||
background: #FFFFFF; border-top: 1px solid #E5E7EB;
|
||||
padding: 16px 28px; display: flex; align-items: center; justify-content: space-between;
|
||||
z-index: 30;
|
||||
}
|
||||
.save-bar-note { font-size: 13px; color: #9CA3AF; }
|
||||
.save-bar-actions { display: flex; gap: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>
|
||||
HR Portal
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="04-admin-dashboard.html" class="nav-item"><svg 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 href="05-employee-directory.html" class="nav-item active"><svg 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 href="08-department-management.html" class="nav-item"><svg 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>
|
||||
<a href="09-leave-requests.html" class="nav-item"><svg 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">7</span></a>
|
||||
<a href="11-attendance.html" class="nav-item"><svg 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 href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
|
||||
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
|
||||
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
|
||||
<a href="15-performance-reviews.html" class="nav-item"><svg 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>Performance</a>
|
||||
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
|
||||
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
|
||||
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
|
||||
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
|
||||
<button class="logout-btn">Sign Out</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<header class="topnav">
|
||||
<div class="breadcrumb">
|
||||
<a href="04-admin-dashboard.html">Home</a>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
<a href="05-employee-directory.html">Employees</a>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
<span>Add New Employee</span>
|
||||
</div>
|
||||
<div class="topnav-actions">
|
||||
<a href="05-employee-directory.html" class="btn-cancel">Cancel</a>
|
||||
<button class="btn-save">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
Save Employee
|
||||
</button>
|
||||
<div class="topnav-avatar">SC</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content" style="padding-bottom:80px;">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="page-title">Add New Employee</div>
|
||||
<div class="page-subtitle">Fill in the details below to create a new employee record.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PERSONAL INFORMATION -->
|
||||
<div class="form-section">
|
||||
<div class="section-header">
|
||||
<div class="section-num">1</div>
|
||||
<div>
|
||||
<div class="section-title">Personal Information</div>
|
||||
<div class="section-subtitle">Basic personal details of the employee</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-body">
|
||||
<div class="form-grid">
|
||||
<div class="form-group avatar-upload">
|
||||
<div class="avatar-preview">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.58-7 8-7s8 3 8 7"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<button class="avatar-upload-btn">Upload Photo</button>
|
||||
<div class="avatar-upload-hint">PNG or JPG, max 2MB. Recommended 200x200px.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="fname">First Name <span class="req">*</span></label>
|
||||
<input class="form-input" type="text" id="fname" placeholder="John">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="lname">Last Name <span class="req">*</span></label>
|
||||
<input class="form-input" type="text" id="lname" placeholder="Smith">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="email">Work Email <span class="req">*</span></label>
|
||||
<input class="form-input" type="email" id="email" placeholder="john.smith@company.com">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="phone">Phone Number</label>
|
||||
<input class="form-input" type="tel" id="phone" placeholder="+1 (555) 000-0000">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="dob">Date of Birth</label>
|
||||
<input class="form-input" type="date" id="dob" value="1992-06-15">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="gender">Gender</label>
|
||||
<div class="form-select-wrap">
|
||||
<select class="form-select" id="gender">
|
||||
<option value="">Select gender</option>
|
||||
<option>Male</option>
|
||||
<option>Female</option>
|
||||
<option>Non-binary</option>
|
||||
<option>Prefer not to say</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-span-2">
|
||||
<label class="form-label" for="address">Home Address</label>
|
||||
<textarea class="form-textarea" id="address" placeholder="Street address, City, State, ZIP Code"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EMPLOYMENT DETAILS -->
|
||||
<div class="form-section">
|
||||
<div class="section-header">
|
||||
<div class="section-num">2</div>
|
||||
<div>
|
||||
<div class="section-title">Employment Details</div>
|
||||
<div class="section-subtitle">Role, department, and reporting structure</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-body">
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="dept">Department <span class="req">*</span></label>
|
||||
<div class="form-select-wrap">
|
||||
<select class="form-select" id="dept">
|
||||
<option value="">Select department</option>
|
||||
<option>Engineering</option>
|
||||
<option>HR</option>
|
||||
<option>Finance</option>
|
||||
<option>Marketing</option>
|
||||
<option>Operations</option>
|
||||
<option>Sales</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="designation">Designation / Job Title <span class="req">*</span></label>
|
||||
<input class="form-input" type="text" id="designation" placeholder="e.g. Software Engineer">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="emp-type">Employment Type <span class="req">*</span></label>
|
||||
<div class="form-select-wrap">
|
||||
<select class="form-select" id="emp-type">
|
||||
<option>Full-time</option>
|
||||
<option>Part-time</option>
|
||||
<option>Contract</option>
|
||||
<option>Intern</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="doj">Date of Joining <span class="req">*</span></label>
|
||||
<input class="form-input" type="date" id="doj" value="2026-05-15">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="manager">Reporting Manager</label>
|
||||
<div class="form-select-wrap">
|
||||
<select class="form-select" id="manager">
|
||||
<option value="">Select manager</option>
|
||||
<option>Sarah Chen (HR Director)</option>
|
||||
<option>Ravi Shankar (Operations Lead)</option>
|
||||
<option>Aisha Larsson (Marketing Manager)</option>
|
||||
<option>Michael Rodriguez (Senior Engineer)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="location">Work Location</label>
|
||||
<div class="form-select-wrap">
|
||||
<select class="form-select" id="location">
|
||||
<option>San Francisco HQ</option>
|
||||
<option>New York Office</option>
|
||||
<option>Remote</option>
|
||||
<option>Austin Office</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- COMPENSATION -->
|
||||
<div class="form-section">
|
||||
<div class="section-header">
|
||||
<div class="section-num">3</div>
|
||||
<div>
|
||||
<div class="section-title">Compensation</div>
|
||||
<div class="section-subtitle">Salary structure and pay details</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-body">
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="salary-struct">Salary Structure <span class="req">*</span></label>
|
||||
<div class="form-select-wrap">
|
||||
<select class="form-select" id="salary-struct">
|
||||
<option value="">Select a salary structure</option>
|
||||
<option>Junior (L1) — $60K–$85K</option>
|
||||
<option>Mid-level (L2) — $85K–$110K</option>
|
||||
<option>Senior (L3) — $110K–$145K</option>
|
||||
<option>Senior (L4) — $145K–$180K</option>
|
||||
<option>Lead (L5) — $180K–$220K</option>
|
||||
<option>Principal — Custom</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-hint">Salary structure defines base pay, allowances, and deduction rules.</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="base-salary">Base Salary (Annual)</label>
|
||||
<input class="form-input" type="number" id="base-salary" placeholder="120000">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ACCOUNT -->
|
||||
<div class="form-section">
|
||||
<div class="section-header">
|
||||
<div class="section-num">4</div>
|
||||
<div>
|
||||
<div class="section-title">Account Setup</div>
|
||||
<div class="section-subtitle">Configure login credentials and access</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-body">
|
||||
<div class="form-grid">
|
||||
<div class="form-group col-span-2">
|
||||
<div class="checkbox-row">
|
||||
<input type="checkbox" id="auto-pass" checked>
|
||||
<label for="auto-pass">Auto-generate a secure password and send login instructions via email</label>
|
||||
</div>
|
||||
<div class="form-hint" style="margin-top:8px;margin-left:26px;">A welcome email with login credentials will be sent to the employee's work email address.</div>
|
||||
</div>
|
||||
<div class="form-group col-span-2">
|
||||
<div class="checkbox-row">
|
||||
<input type="checkbox" id="send-welcome" checked>
|
||||
<label for="send-welcome">Send welcome email with onboarding checklist</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-span-2">
|
||||
<div class="checkbox-row">
|
||||
<input type="checkbox" id="require-change">
|
||||
<label for="require-change">Require password change on first login</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<div class="save-bar">
|
||||
<div class="save-bar-note">All fields marked with * are required</div>
|
||||
<div class="save-bar-actions">
|
||||
<a href="05-employee-directory.html" class="btn-cancel">Discard</a>
|
||||
<button class="btn-save">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
Save Employee
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,331 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Departments — HR Portal</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@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: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
|
||||
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
|
||||
.logo-icon svg { width: 16px; height: 16px; }
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
|
||||
.nav-item:hover { background: #F9FAFB; color: #111827; }
|
||||
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
|
||||
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
|
||||
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
|
||||
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
|
||||
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
|
||||
.user-role { font-size: 11px; color: #9CA3AF; }
|
||||
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
|
||||
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
|
||||
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
|
||||
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
|
||||
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
|
||||
.breadcrumb span { color: #111827; font-weight: 500; }
|
||||
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
|
||||
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
|
||||
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
|
||||
.content { padding: 28px; }
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
|
||||
.page-title { font-size: 22px; font-weight: 700; color: #111827; }
|
||||
.page-subtitle { font-size: 14px; color: #6B7280; margin-top: 2px; }
|
||||
.btn-primary { padding: 9px 18px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background 0.15s; }
|
||||
.btn-primary:hover { background: #4338CA; }
|
||||
.btn-primary svg { width: 16px; height: 16px; }
|
||||
|
||||
/* DEPT GRID */
|
||||
.dept-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
|
||||
.dept-card {
|
||||
background: #FFFFFF; border-radius: 12px; border: 1px solid #E5E7EB;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
overflow: hidden; transition: all 0.2s;
|
||||
}
|
||||
.dept-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.1); transform: translateY(-2px); }
|
||||
.dept-card-header { padding: 20px 20px 0; display: flex; align-items: flex-start; justify-content: space-between; }
|
||||
.dept-icon {
|
||||
width: 48px; height: 48px; border-radius: 12px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.dept-icon svg { width: 22px; height: 22px; }
|
||||
.dept-card-actions { display: flex; gap: 4px; }
|
||||
.icon-action { width: 30px; height: 30px; border-radius: 6px; border: 1px solid #E5E7EB; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #9CA3AF; transition: all 0.15s; }
|
||||
.icon-action:hover.edit { border-color: #4F46E5; color: #4F46E5; background: #EEF2FF; }
|
||||
.icon-action:hover.delete { border-color: #EF4444; color: #EF4444; background: #FEF2F2; }
|
||||
.icon-action svg { width: 14px; height: 14px; }
|
||||
.dept-card-body { padding: 0 20px 20px; }
|
||||
.dept-name { font-size: 17px; font-weight: 700; color: #111827; margin-bottom: 4px; }
|
||||
.dept-desc { font-size: 13px; color: #6B7280; line-height: 1.5; margin-bottom: 14px; }
|
||||
.dept-head { display: flex; align-items: center; gap: 8px; padding: 10px; background: #F9FAFB; border-radius: 8px; margin-bottom: 14px; }
|
||||
.dept-head-label { font-size: 11px; color: #9CA3AF; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; }
|
||||
.dept-head-name { font-size: 13px; font-weight: 500; color: #111827; }
|
||||
.dept-head-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #FFF; flex-shrink: 0; }
|
||||
.dept-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid #F3F4F6; }
|
||||
.dept-count { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #6B7280; }
|
||||
.dept-count svg { width: 15px; height: 15px; }
|
||||
.dept-count strong { color: #111827; font-weight: 600; }
|
||||
.dept-link { font-size: 13px; color: #4F46E5; text-decoration: none; font-weight: 500; }
|
||||
.dept-link:hover { text-decoration: underline; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>
|
||||
HR Portal
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="04-admin-dashboard.html" class="nav-item"><svg 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 href="05-employee-directory.html" class="nav-item"><svg 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 href="08-department-management.html" class="nav-item active"><svg 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>
|
||||
<a href="09-leave-requests.html" class="nav-item"><svg 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">7</span></a>
|
||||
<a href="11-attendance.html" class="nav-item"><svg 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 href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
|
||||
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
|
||||
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
|
||||
<a href="15-performance-reviews.html" class="nav-item"><svg 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>Performance</a>
|
||||
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
|
||||
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
|
||||
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
|
||||
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
|
||||
<button class="logout-btn">Sign Out</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<header class="topnav">
|
||||
<div class="breadcrumb">
|
||||
<a href="04-admin-dashboard.html">Home</a>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
<span>Departments</span>
|
||||
</div>
|
||||
<div class="topnav-actions">
|
||||
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
|
||||
<div class="topnav-avatar">SC</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="page-title">Departments</div>
|
||||
<div class="page-subtitle">6 departments · 138 employees total</div>
|
||||
</div>
|
||||
<button class="btn-primary">
|
||||
<svg 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>
|
||||
New Department
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="dept-grid">
|
||||
<!-- ENGINEERING -->
|
||||
<div class="dept-card">
|
||||
<div class="dept-card-header">
|
||||
<div class="dept-icon" style="background:#EEF2FF;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#4F46E5" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
|
||||
</div>
|
||||
<div class="dept-card-actions">
|
||||
<button class="icon-action edit">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
|
||||
</button>
|
||||
<button class="icon-action delete">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dept-card-body">
|
||||
<div class="dept-name">Engineering</div>
|
||||
<div class="dept-desc">Product development, software engineering, DevOps, and technical architecture.</div>
|
||||
<div class="dept-head">
|
||||
<div class="dept-head-avatar" style="background:#4F46E5;">MR</div>
|
||||
<div>
|
||||
<div class="dept-head-label">Head of Department</div>
|
||||
<div class="dept-head-name">Michael Rodriguez</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dept-footer">
|
||||
<div class="dept-count">
|
||||
<svg 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>
|
||||
<strong>45</strong> employees
|
||||
</div>
|
||||
<a href="05-employee-directory.html" class="dept-link">View team</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- HR -->
|
||||
<div class="dept-card">
|
||||
<div class="dept-card-header">
|
||||
<div class="dept-icon" style="background:#ECFDF5;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2"><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 class="dept-card-actions">
|
||||
<button class="icon-action edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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></button>
|
||||
<button class="icon-action delete"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dept-card-body">
|
||||
<div class="dept-name">Human Resources</div>
|
||||
<div class="dept-desc">Talent acquisition, employee relations, benefits, and organizational development.</div>
|
||||
<div class="dept-head">
|
||||
<div class="dept-head-avatar" style="background:#10B981;">SC</div>
|
||||
<div>
|
||||
<div class="dept-head-label">Head of Department</div>
|
||||
<div class="dept-head-name">Sarah Chen</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dept-footer">
|
||||
<div class="dept-count">
|
||||
<svg 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>
|
||||
<strong>8</strong> employees
|
||||
</div>
|
||||
<a href="05-employee-directory.html" class="dept-link">View team</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FINANCE -->
|
||||
<div class="dept-card">
|
||||
<div class="dept-card-header">
|
||||
<div class="dept-icon" style="background:#FFFBEB;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||
</div>
|
||||
<div class="dept-card-actions">
|
||||
<button class="icon-action edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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></button>
|
||||
<button class="icon-action delete"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dept-card-body">
|
||||
<div class="dept-name">Finance</div>
|
||||
<div class="dept-desc">Financial planning, accounting, payroll processing, and audit compliance.</div>
|
||||
<div class="dept-head">
|
||||
<div class="dept-head-avatar" style="background:#F59E0B;">PP</div>
|
||||
<div>
|
||||
<div class="dept-head-label">Head of Department</div>
|
||||
<div class="dept-head-name">Priya Patel</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dept-footer">
|
||||
<div class="dept-count">
|
||||
<svg 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>
|
||||
<strong>12</strong> employees
|
||||
</div>
|
||||
<a href="05-employee-directory.html" class="dept-link">View team</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MARKETING -->
|
||||
<div class="dept-card">
|
||||
<div class="dept-card-header">
|
||||
<div class="dept-icon" style="background:#FEF2F2;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
|
||||
</div>
|
||||
<div class="dept-card-actions">
|
||||
<button class="icon-action edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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></button>
|
||||
<button class="icon-action delete"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dept-card-body">
|
||||
<div class="dept-name">Marketing</div>
|
||||
<div class="dept-desc">Brand management, digital marketing, content strategy, and growth campaigns.</div>
|
||||
<div class="dept-head">
|
||||
<div class="dept-head-avatar" style="background:#7C3AED;">AL</div>
|
||||
<div>
|
||||
<div class="dept-head-label">Head of Department</div>
|
||||
<div class="dept-head-name">Aisha Larsson</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dept-footer">
|
||||
<div class="dept-count">
|
||||
<svg 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>
|
||||
<strong>18</strong> employees
|
||||
</div>
|
||||
<a href="05-employee-directory.html" class="dept-link">View team</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- OPERATIONS -->
|
||||
<div class="dept-card">
|
||||
<div class="dept-card-header">
|
||||
<div class="dept-icon" style="background:#F0FDF4;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#16A34A" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>
|
||||
</div>
|
||||
<div class="dept-card-actions">
|
||||
<button class="icon-action edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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></button>
|
||||
<button class="icon-action delete"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dept-card-body">
|
||||
<div class="dept-name">Operations</div>
|
||||
<div class="dept-desc">Supply chain management, facilities, vendor relations, and business processes.</div>
|
||||
<div class="dept-head">
|
||||
<div class="dept-head-avatar" style="background:#3B82F6;">RS</div>
|
||||
<div>
|
||||
<div class="dept-head-label">Head of Department</div>
|
||||
<div class="dept-head-name">Ravi Shankar</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dept-footer">
|
||||
<div class="dept-count">
|
||||
<svg 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>
|
||||
<strong>31</strong> employees
|
||||
</div>
|
||||
<a href="05-employee-directory.html" class="dept-link">View team</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SALES -->
|
||||
<div class="dept-card">
|
||||
<div class="dept-card-header">
|
||||
<div class="dept-icon" style="background:#F5F3FF;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#7C3AED" stroke-width="2"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
|
||||
</div>
|
||||
<div class="dept-card-actions">
|
||||
<button class="icon-action edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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></button>
|
||||
<button class="icon-action delete"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dept-card-body">
|
||||
<div class="dept-name">Sales</div>
|
||||
<div class="dept-desc">Revenue generation, account management, business development, and customer success.</div>
|
||||
<div class="dept-head">
|
||||
<div class="dept-head-avatar" style="background:#EC4899;">DT</div>
|
||||
<div>
|
||||
<div class="dept-head-label">Head of Department</div>
|
||||
<div class="dept-head-name">Diana Torres</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dept-footer">
|
||||
<div class="dept-count">
|
||||
<svg 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>
|
||||
<strong>24</strong> employees
|
||||
</div>
|
||||
<a href="05-employee-directory.html" class="dept-link">View team</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,322 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Leave Requests — HR Portal</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@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: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
|
||||
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
|
||||
.logo-icon svg { width: 16px; height: 16px; }
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
|
||||
.nav-item:hover { background: #F9FAFB; color: #111827; }
|
||||
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
|
||||
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
|
||||
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
|
||||
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
|
||||
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
|
||||
.user-role { font-size: 11px; color: #9CA3AF; }
|
||||
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
|
||||
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
|
||||
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
|
||||
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
|
||||
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
|
||||
.breadcrumb span { color: #111827; font-weight: 500; }
|
||||
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
|
||||
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
|
||||
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
.content { padding: 28px; }
|
||||
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
|
||||
.page-title { font-size: 22px; font-weight: 700; }
|
||||
.header-right { display: flex; gap: 8px; }
|
||||
.btn-outline { padding: 8px 16px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; }
|
||||
.btn-primary { padding: 9px 18px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
|
||||
.btn-primary svg { width: 16px; height: 16px; }
|
||||
|
||||
.tabs { display: flex; gap: 0; border-bottom: 1px solid #E5E7EB; margin-bottom: 20px; }
|
||||
.tab { padding: 10px 20px; font-size: 14px; font-weight: 500; color: #6B7280; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: all 0.15s; display: flex; align-items: center; gap: 6px; }
|
||||
.tab:hover { color: #374151; }
|
||||
.tab.active { color: #4F46E5; border-bottom-color: #4F46E5; font-weight: 600; }
|
||||
.tab-count { background: #F3F4F6; color: #6B7280; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
|
||||
.tab.active .tab-count { background: #EEF2FF; color: #4F46E5; }
|
||||
|
||||
.filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
|
||||
.filter-input { padding: 8px 13px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 6px; font-size: 14px; color: #374151; outline: none; }
|
||||
.filter-input:focus { border-color: #4F46E5; }
|
||||
.filter-select { padding: 8px 13px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 6px; font-size: 14px; color: #374151; outline: none; appearance: none; cursor: pointer; }
|
||||
.filter-search { display: flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 6px; padding: 8px 13px; }
|
||||
.filter-search svg { width: 15px; height: 15px; color: #9CA3AF; flex-shrink: 0; }
|
||||
.filter-search input { border: none; background: transparent; font-size: 14px; outline: none; width: 180px; }
|
||||
|
||||
.table-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead { background: #F9FAFB; border-bottom: 1px solid #E5E7EB; }
|
||||
th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: #6B7280; text-align: left; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
|
||||
tbody tr { border-bottom: 1px solid #F3F4F6; transition: background 0.1s; }
|
||||
tbody tr:last-child { border-bottom: none; }
|
||||
tbody tr:hover { background: #FAFAFA; }
|
||||
td { padding: 14px 16px; font-size: 14px; color: #374151; vertical-align: middle; }
|
||||
|
||||
.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: 12px; font-weight: 600; color: #FFF; flex-shrink: 0; }
|
||||
.emp-name { font-size: 13px; font-weight: 500; color: #111827; }
|
||||
.emp-dept { font-size: 11px; color: #9CA3AF; }
|
||||
|
||||
.badge { padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.badge-blue { background: #EFF6FF; color: #3B82F6; }
|
||||
.badge-yellow { background: #FFFBEB; color: #D97706; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-red { background: #FEF2F2; color: #DC2626; }
|
||||
.badge-purple { background: #F5F3FF; color: #7C3AED; }
|
||||
.badge-orange { background: #FFF7ED; color: #EA580C; }
|
||||
.badge-pink { background: #FDF2F8; color: #DB2777; }
|
||||
|
||||
.status-pending { background: #FFFBEB; color: #D97706; padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.status-approved { background: #ECFDF5; color: #059669; padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.status-rejected { background: #FEF2F2; color: #DC2626; padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
|
||||
.reason-text { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #6B7280; font-size: 13px; }
|
||||
.actions-cell { display: flex; gap: 6px; }
|
||||
.btn-approve { padding: 4px 10px; background: #ECFDF5; color: #10B981; border: 1px solid #BBF7D0; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
|
||||
.btn-approve:hover { background: #10B981; color: #FFF; }
|
||||
.btn-reject { padding: 4px 10px; background: #FEF2F2; color: #EF4444; border: 1px solid #FECACA; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
|
||||
.btn-reject:hover { background: #EF4444; color: #FFF; }
|
||||
.btn-view { padding: 4px 10px; background: #F9FAFB; color: #6B7280; border: 1px solid #E5E7EB; border-radius: 4px; font-size: 11px; font-weight: 500; cursor: pointer; }
|
||||
|
||||
.pagination { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid #F3F4F6; }
|
||||
.page-info { font-size: 13px; color: #6B7280; }
|
||||
.page-buttons { display: flex; gap: 4px; }
|
||||
.page-btn { width: 30px; height: 30px; border-radius: 6px; border: 1.5px solid #E5E7EB; background: #FFFFFF; font-size: 13px; color: #374151; cursor: pointer; display: flex; align-items: center; justify-content: center; }
|
||||
.page-btn.active { background: #4F46E5; border-color: #4F46E5; color: #FFF; font-weight: 600; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>HR Portal</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="04-admin-dashboard.html" class="nav-item"><svg 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 href="05-employee-directory.html" class="nav-item"><svg 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 href="08-department-management.html" class="nav-item"><svg 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>
|
||||
<a href="09-leave-requests.html" class="nav-item active"><svg 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">7</span></a>
|
||||
<a href="11-attendance.html" class="nav-item"><svg 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 href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
|
||||
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
|
||||
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
|
||||
<a href="15-performance-reviews.html" class="nav-item"><svg 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>Performance</a>
|
||||
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
|
||||
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
|
||||
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
|
||||
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
|
||||
<button class="logout-btn">Sign Out</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<header class="topnav">
|
||||
<div class="breadcrumb">
|
||||
<a href="04-admin-dashboard.html">Home</a>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
<span>Leave Management</span>
|
||||
</div>
|
||||
<div class="topnav-actions">
|
||||
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
|
||||
<div class="topnav-avatar">SC</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
<div class="page-header">
|
||||
<div class="page-title">Leave Requests</div>
|
||||
<div class="header-right">
|
||||
<a href="10-leave-types.html" class="btn-outline">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2"/></svg>
|
||||
Leave Types
|
||||
</a>
|
||||
<button class="btn-outline">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
Export
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<a href="#" class="tab">All Requests <span class="tab-count">52</span></a>
|
||||
<a href="#" class="tab active">Pending <span class="tab-count">7</span></a>
|
||||
<a href="#" class="tab">Approved <span class="tab-count">38</span></a>
|
||||
<a href="#" class="tab">Rejected <span class="tab-count">7</span></a>
|
||||
</div>
|
||||
|
||||
<div class="filter-bar">
|
||||
<div class="filter-search">
|
||||
<svg 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>
|
||||
<input type="text" placeholder="Search employee...">
|
||||
</div>
|
||||
<input class="filter-input" type="date" value="2026-05-01">
|
||||
<input class="filter-input" type="date" value="2026-05-31">
|
||||
<select class="filter-select">
|
||||
<option>All Departments</option>
|
||||
<option>Engineering</option>
|
||||
<option>HR</option>
|
||||
<option>Finance</option>
|
||||
<option>Marketing</option>
|
||||
</select>
|
||||
<select class="filter-select">
|
||||
<option>All Leave Types</option>
|
||||
<option>Annual Leave</option>
|
||||
<option>Sick Leave</option>
|
||||
<option>Casual Leave</option>
|
||||
<option>Maternity Leave</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#4F46E5;">MR</div><div><div class="emp-name">Michael Rodriguez</div><div class="emp-dept">Engineering</div></div></div></td>
|
||||
<td><span class="badge badge-blue">Annual Leave</span></td>
|
||||
<td>May 12, 2026</td>
|
||||
<td>May 15, 2026</td>
|
||||
<td>4</td>
|
||||
<td><span class="reason-text">Family vacation, planned in advance</span></td>
|
||||
<td><span class="status-pending">Pending</span></td>
|
||||
<td><div class="actions-cell"><button class="btn-approve">Approve</button><button class="btn-reject">Reject</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#10B981;">PP</div><div><div class="emp-name">Priya Patel</div><div class="emp-dept">Finance</div></div></div></td>
|
||||
<td><span class="badge badge-orange">Sick Leave</span></td>
|
||||
<td>May 13, 2026</td>
|
||||
<td>May 13, 2026</td>
|
||||
<td>1</td>
|
||||
<td><span class="reason-text">Fever and cold, doctor's appointment</span></td>
|
||||
<td><span class="status-pending">Pending</span></td>
|
||||
<td><div class="actions-cell"><button class="btn-approve">Approve</button><button class="btn-reject">Reject</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#F59E0B;">JK</div><div><div class="emp-name">James Kim</div><div class="emp-dept">Engineering</div></div></div></td>
|
||||
<td><span class="badge badge-blue">Annual Leave</span></td>
|
||||
<td>May 19, 2026</td>
|
||||
<td>May 23, 2026</td>
|
||||
<td>5</td>
|
||||
<td><span class="reason-text">Wedding anniversary trip abroad</span></td>
|
||||
<td><span class="status-pending">Pending</span></td>
|
||||
<td><div class="actions-cell"><button class="btn-approve">Approve</button><button class="btn-reject">Reject</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#EF4444;">AL</div><div><div class="emp-name">Aisha Larsson</div><div class="emp-dept">Marketing</div></div></div></td>
|
||||
<td><span class="badge badge-purple">Casual Leave</span></td>
|
||||
<td>May 26, 2026</td>
|
||||
<td>May 28, 2026</td>
|
||||
<td>3</td>
|
||||
<td><span class="reason-text">Personal errands and home renovation</span></td>
|
||||
<td><span class="status-pending">Pending</span></td>
|
||||
<td><div class="actions-cell"><button class="btn-approve">Approve</button><button class="btn-reject">Reject</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#3B82F6;">RS</div><div><div class="emp-name">Ravi Shankar</div><div class="emp-dept">Operations</div></div></div></td>
|
||||
<td><span class="badge badge-blue">Annual Leave</span></td>
|
||||
<td>Jun 2, 2026</td>
|
||||
<td>Jun 6, 2026</td>
|
||||
<td>5</td>
|
||||
<td><span class="reason-text">Family visit and religious festival</span></td>
|
||||
<td><span class="status-approved">Approved</span></td>
|
||||
<td><div class="actions-cell"><button class="btn-view">View</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#EC4899;">DT</div><div><div class="emp-name">Diana Torres</div><div class="emp-dept">Sales</div></div></div></td>
|
||||
<td><span class="badge badge-orange">Sick Leave</span></td>
|
||||
<td>May 7, 2026</td>
|
||||
<td>May 8, 2026</td>
|
||||
<td>2</td>
|
||||
<td><span class="reason-text">Migraine, needed bed rest</span></td>
|
||||
<td><span class="status-approved">Approved</span></td>
|
||||
<td><div class="actions-cell"><button class="btn-view">View</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#6366F1;">NW</div><div><div class="emp-name">Noah Williams</div><div class="emp-dept">Engineering</div></div></div></td>
|
||||
<td><span class="badge badge-pink">Bereavement</span></td>
|
||||
<td>Apr 28, 2026</td>
|
||||
<td>Apr 30, 2026</td>
|
||||
<td>3</td>
|
||||
<td><span class="reason-text">Loss of grandparent, funeral attendance</span></td>
|
||||
<td><span class="status-approved">Approved</span></td>
|
||||
<td><div class="actions-cell"><button class="btn-view">View</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#059669;">LO</div><div><div class="emp-name">Lucas Oliveira</div><div class="emp-dept">Operations</div></div></div></td>
|
||||
<td><span class="badge badge-blue">Annual Leave</span></td>
|
||||
<td>Apr 14, 2026</td>
|
||||
<td>Apr 18, 2026</td>
|
||||
<td>5</td>
|
||||
<td><span class="reason-text">Planned vacation to Mexico</span></td>
|
||||
<td><span class="status-rejected">Rejected</span></td>
|
||||
<td><div class="actions-cell"><button class="btn-view">View</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#D97706;">FA</div><div><div class="emp-name">Fatima Al-Rashid</div><div class="emp-dept">Finance</div></div></div></td>
|
||||
<td><span class="badge badge-purple">Casual Leave</span></td>
|
||||
<td>May 9, 2026</td>
|
||||
<td>May 9, 2026</td>
|
||||
<td>1</td>
|
||||
<td><span class="reason-text">Urgent bank errand</span></td>
|
||||
<td><span class="status-pending">Pending</span></td>
|
||||
<td><div class="actions-cell"><button class="btn-approve">Approve</button><button class="btn-reject">Reject</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#7C3AED;">KL</div><div><div class="emp-name">Kevin Liu</div><div class="emp-dept">Marketing</div></div></div></td>
|
||||
<td><span class="badge badge-orange">Sick Leave</span></td>
|
||||
<td>May 5, 2026</td>
|
||||
<td>May 6, 2026</td>
|
||||
<td>2</td>
|
||||
<td><span class="reason-text">Food poisoning, doctor advised rest</span></td>
|
||||
<td><span class="status-approved">Approved</span></td>
|
||||
<td><div class="actions-cell"><button class="btn-view">View</button></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<span class="page-info">Showing 1–10 of 52 requests</span>
|
||||
<div class="page-buttons">
|
||||
<button class="page-btn"><svg width="12" height="12" 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">4</button>
|
||||
<button class="page-btn">5</button>
|
||||
<button class="page-btn"><svg width="12" height="12" 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>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,293 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Leave Types — HR Portal</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@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: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
|
||||
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
|
||||
.logo-icon svg { width: 16px; height: 16px; }
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
|
||||
.nav-item:hover { background: #F9FAFB; color: #111827; }
|
||||
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
|
||||
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
|
||||
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
|
||||
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
|
||||
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
|
||||
.user-role { font-size: 11px; color: #9CA3AF; }
|
||||
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
|
||||
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
|
||||
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
|
||||
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
|
||||
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
|
||||
.breadcrumb span { color: #111827; font-weight: 500; }
|
||||
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
|
||||
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
|
||||
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
.content { padding: 28px; }
|
||||
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
|
||||
.page-title { font-size: 22px; font-weight: 700; }
|
||||
.page-subtitle { font-size: 14px; color: #6B7280; margin-top: 2px; }
|
||||
.btn-primary { padding: 9px 18px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
|
||||
.btn-primary svg { width: 16px; height: 16px; }
|
||||
.btn-outline { padding: 8px 14px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 13px; cursor: pointer; }
|
||||
|
||||
.back-link { display: flex; align-items: center; gap: 6px; color: #4F46E5; font-size: 14px; font-weight: 500; text-decoration: none; margin-bottom: 20px; }
|
||||
.back-link svg { width: 16px; height: 16px; }
|
||||
|
||||
.table-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead { background: #F9FAFB; border-bottom: 1px solid #E5E7EB; }
|
||||
th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: #6B7280; text-align: left; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
|
||||
tbody tr { border-bottom: 1px solid #F3F4F6; transition: background 0.1s; }
|
||||
tbody tr:last-child { border-bottom: none; }
|
||||
tbody tr:hover { background: #FAFAFA; }
|
||||
td { padding: 16px 16px; font-size: 14px; color: #374151; vertical-align: middle; }
|
||||
|
||||
.leave-type-cell { display: flex; align-items: center; gap: 10px; }
|
||||
.leave-type-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
|
||||
.leave-type-name { font-size: 14px; font-weight: 600; color: #111827; }
|
||||
.leave-type-code { font-size: 11px; color: #9CA3AF; }
|
||||
|
||||
.badge { padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-gray { background: #F3F4F6; color: #6B7280; }
|
||||
.badge-blue { background: #EFF6FF; color: #3B82F6; }
|
||||
.badge-yellow { background: #FFFBEB; color: #D97706; }
|
||||
|
||||
.check-icon { color: #10B981; width: 18px; height: 18px; }
|
||||
.x-icon { color: #D1D5DB; width: 18px; height: 18px; }
|
||||
|
||||
/* TOGGLE SWITCH */
|
||||
.toggle { position: relative; display: inline-block; width: 40px; height: 22px; }
|
||||
.toggle input { opacity: 0; width: 0; height: 0; }
|
||||
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #D1D5DB; border-radius: 11px; transition: 0.2s; }
|
||||
.toggle-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
|
||||
input:checked + .toggle-slider { background: #4F46E5; }
|
||||
input:checked + .toggle-slider:before { transform: translateX(18px); }
|
||||
|
||||
.actions-cell { display: flex; gap: 4px; }
|
||||
.action-icon { width: 30px; height: 30px; border-radius: 6px; border: 1px solid #E5E7EB; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #9CA3AF; transition: all 0.15s; }
|
||||
.action-icon:hover { border-color: #4F46E5; color: #4F46E5; background: #EEF2FF; }
|
||||
.action-icon svg { width: 14px; height: 14px; }
|
||||
|
||||
.applicable-badge { display: inline-flex; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; background: #F3F4F6; color: #374151; margin: 1px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>HR Portal</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="04-admin-dashboard.html" class="nav-item"><svg 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 href="05-employee-directory.html" class="nav-item"><svg 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 href="08-department-management.html" class="nav-item"><svg 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>
|
||||
<a href="09-leave-requests.html" class="nav-item active"><svg 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">7</span></a>
|
||||
<a href="11-attendance.html" class="nav-item"><svg 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 href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
|
||||
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
|
||||
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
|
||||
<a href="15-performance-reviews.html" class="nav-item"><svg 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>Performance</a>
|
||||
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
|
||||
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
|
||||
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
|
||||
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
|
||||
<button class="logout-btn">Sign Out</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<header class="topnav">
|
||||
<div class="breadcrumb">
|
||||
<a href="04-admin-dashboard.html">Home</a>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
<a href="09-leave-requests.html">Leave Management</a>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
<span>Leave Types</span>
|
||||
</div>
|
||||
<div class="topnav-actions">
|
||||
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
|
||||
<div class="topnav-avatar">SC</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
<a href="09-leave-requests.html" class="back-link">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
Back to Leave Requests
|
||||
</a>
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="page-title">Leave Types</div>
|
||||
<div class="page-subtitle">Configure leave policies, entitlements, and eligibility rules</div>
|
||||
</div>
|
||||
<button class="btn-primary">
|
||||
<svg 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>
|
||||
New Leave Type
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Leave Type</th>
|
||||
<th>Code</th>
|
||||
<th>Days / Year</th>
|
||||
<th>Carry Forward</th>
|
||||
<th>Requires Approval</th>
|
||||
<th>Applicable To</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="leave-type-cell">
|
||||
<div class="leave-type-dot" style="background:#4F46E5;"></div>
|
||||
<div>
|
||||
<div class="leave-type-name">Annual Leave</div>
|
||||
<div class="leave-type-code">Used for vacations & personal time</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span style="font-family:monospace;font-size:13px;background:#F3F4F6;padding:2px 8px;border-radius:4px;">AL</span></td>
|
||||
<td><strong>20</strong> days</td>
|
||||
<td>
|
||||
<div style="display:flex;align-items:center;gap:4px;">
|
||||
<svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
Up to 10 days
|
||||
</div>
|
||||
</td>
|
||||
<td><svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg></td>
|
||||
<td><span class="applicable-badge">All Employees</span></td>
|
||||
<td>
|
||||
<label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label>
|
||||
</td>
|
||||
<td>
|
||||
<div class="actions-cell">
|
||||
<button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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></button>
|
||||
<button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="leave-type-cell">
|
||||
<div class="leave-type-dot" style="background:#F59E0B;"></div>
|
||||
<div>
|
||||
<div class="leave-type-name">Sick Leave</div>
|
||||
<div class="leave-type-code">Medical and health related absences</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span style="font-family:monospace;font-size:13px;background:#F3F4F6;padding:2px 8px;border-radius:4px;">SL</span></td>
|
||||
<td><strong>10</strong> days</td>
|
||||
<td><svg class="x-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
|
||||
<td>
|
||||
<div style="display:flex;align-items:center;gap:4px;font-size:13px;color:#9CA3AF;">
|
||||
<svg class="x-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
Self-approve
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="applicable-badge">All Employees</span></td>
|
||||
<td><label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label></td>
|
||||
<td><div class="actions-cell"><button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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></button><button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="leave-type-cell">
|
||||
<div class="leave-type-dot" style="background:#10B981;"></div>
|
||||
<div>
|
||||
<div class="leave-type-name">Casual Leave</div>
|
||||
<div class="leave-type-code">Short-term personal reasons</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span style="font-family:monospace;font-size:13px;background:#F3F4F6;padding:2px 8px;border-radius:4px;">CL</span></td>
|
||||
<td><strong>5</strong> days</td>
|
||||
<td><svg class="x-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
|
||||
<td><svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg></td>
|
||||
<td><span class="applicable-badge">All Employees</span></td>
|
||||
<td><label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label></td>
|
||||
<td><div class="actions-cell"><button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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></button><button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="leave-type-cell">
|
||||
<div class="leave-type-dot" style="background:#EC4899;"></div>
|
||||
<div>
|
||||
<div class="leave-type-name">Maternity Leave</div>
|
||||
<div class="leave-type-code">Paid leave for new mothers</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span style="font-family:monospace;font-size:13px;background:#F3F4F6;padding:2px 8px;border-radius:4px;">ML</span></td>
|
||||
<td><strong>90</strong> days</td>
|
||||
<td><svg class="x-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
|
||||
<td><svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg></td>
|
||||
<td><span class="applicable-badge">Female Employees</span></td>
|
||||
<td><label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label></td>
|
||||
<td><div class="actions-cell"><button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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></button><button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="leave-type-cell">
|
||||
<div class="leave-type-dot" style="background:#3B82F6;"></div>
|
||||
<div>
|
||||
<div class="leave-type-name">Paternity Leave</div>
|
||||
<div class="leave-type-code">Paid leave for new fathers</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span style="font-family:monospace;font-size:13px;background:#F3F4F6;padding:2px 8px;border-radius:4px;">PL</span></td>
|
||||
<td><strong>5</strong> days</td>
|
||||
<td><svg class="x-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
|
||||
<td><svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg></td>
|
||||
<td><span class="applicable-badge">Male Employees</span></td>
|
||||
<td><label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label></td>
|
||||
<td><div class="actions-cell"><button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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></button><button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="leave-type-cell">
|
||||
<div class="leave-type-dot" style="background:#6B7280;"></div>
|
||||
<div>
|
||||
<div class="leave-type-name">Bereavement Leave</div>
|
||||
<div class="leave-type-code">Leave for family loss and mourning</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span style="font-family:monospace;font-size:13px;background:#F3F4F6;padding:2px 8px;border-radius:4px;">BL</span></td>
|
||||
<td><strong>3</strong> days</td>
|
||||
<td><svg class="x-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
|
||||
<td><svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg></td>
|
||||
<td><span class="applicable-badge">All Employees</span></td>
|
||||
<td><label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label></td>
|
||||
<td><div class="actions-cell"><button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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></button><button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></button></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,293 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Attendance — HR Portal</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@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: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
|
||||
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
|
||||
.logo-icon svg { width: 16px; height: 16px; }
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
|
||||
.nav-item:hover { background: #F9FAFB; color: #111827; }
|
||||
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
|
||||
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
|
||||
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
|
||||
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
|
||||
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
|
||||
.user-role { font-size: 11px; color: #9CA3AF; }
|
||||
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
|
||||
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
|
||||
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
|
||||
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
|
||||
.breadcrumb span { color: #111827; font-weight: 500; }
|
||||
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
|
||||
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
|
||||
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
.content { padding: 28px; }
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
|
||||
.page-title { font-size: 22px; font-weight: 700; }
|
||||
.btn-outline { padding: 8px 16px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; }
|
||||
|
||||
.tabs { display: flex; border-bottom: 1px solid #E5E7EB; margin-bottom: 20px; }
|
||||
.tab { padding: 10px 20px; font-size: 14px; font-weight: 500; color: #6B7280; cursor: pointer; border-bottom: 2px solid transparent; }
|
||||
.tab.active { color: #4F46E5; border-bottom-color: #4F46E5; font-weight: 600; }
|
||||
|
||||
.filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
|
||||
.filter-input { padding: 8px 13px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 6px; font-size: 14px; color: #374151; outline: none; }
|
||||
.filter-select { padding: 8px 13px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 6px; font-size: 14px; color: #374151; outline: none; cursor: pointer; appearance: none; min-width: 150px; }
|
||||
|
||||
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
|
||||
.stat-card { background: #FFFFFF; border-radius: 10px; padding: 18px 20px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); display: flex; align-items: center; gap: 14px; }
|
||||
.stat-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.stat-icon svg { width: 20px; height: 20px; }
|
||||
.stat-value { font-size: 24px; font-weight: 700; color: #111827; }
|
||||
.stat-label { font-size: 12px; color: #9CA3AF; margin-top: 1px; }
|
||||
|
||||
.table-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead { background: #F9FAFB; border-bottom: 1px solid #E5E7EB; }
|
||||
th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: #6B7280; text-align: left; text-transform: uppercase; letter-spacing: 0.4px; }
|
||||
tbody tr { border-bottom: 1px solid #F3F4F6; transition: background 0.1s; }
|
||||
tbody tr:last-child { border-bottom: none; }
|
||||
tbody tr:hover { background: #FAFAFA; }
|
||||
td { padding: 14px 16px; font-size: 14px; color: #374151; vertical-align: middle; }
|
||||
|
||||
.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: 12px; font-weight: 600; color: #FFF; flex-shrink: 0; }
|
||||
.emp-name { font-size: 13px; font-weight: 500; color: #111827; }
|
||||
.emp-dept { font-size: 11px; color: #9CA3AF; }
|
||||
|
||||
.time-cell { font-size: 14px; font-weight: 500; color: #111827; }
|
||||
.hours-cell { font-size: 14px; color: #374151; }
|
||||
|
||||
.badge { padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-red { background: #FEF2F2; color: #DC2626; }
|
||||
.badge-yellow { background: #FFFBEB; color: #D97706; }
|
||||
.badge-blue { background: #EFF6FF; color: #3B82F6; }
|
||||
.badge-gray { background: #F3F4F6; color: #6B7280; }
|
||||
|
||||
.note-text { font-size: 12px; color: #9CA3AF; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>HR Portal</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="04-admin-dashboard.html" class="nav-item"><svg 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 href="05-employee-directory.html" class="nav-item"><svg 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 href="08-department-management.html" class="nav-item"><svg 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>
|
||||
<a href="09-leave-requests.html" class="nav-item"><svg 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">7</span></a>
|
||||
<a href="11-attendance.html" class="nav-item active"><svg 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 href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
|
||||
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
|
||||
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
|
||||
<a href="15-performance-reviews.html" class="nav-item"><svg 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>Performance</a>
|
||||
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
|
||||
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
|
||||
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
|
||||
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
|
||||
<button class="logout-btn">Sign Out</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<header class="topnav">
|
||||
<div class="breadcrumb">
|
||||
<a href="04-admin-dashboard.html">Home</a>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
<span>Attendance</span>
|
||||
</div>
|
||||
<div class="topnav-actions">
|
||||
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
|
||||
<div class="topnav-avatar">SC</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
<div class="page-header">
|
||||
<div class="page-title">Attendance Log</div>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<button class="btn-outline">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
Export
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="tab active">Daily</div>
|
||||
<div class="tab">Monthly</div>
|
||||
<div class="tab">Calendar View</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-bar">
|
||||
<input class="filter-input" type="date" value="2026-05-09">
|
||||
<select class="filter-select">
|
||||
<option>All Departments</option>
|
||||
<option>Engineering</option>
|
||||
<option>HR</option>
|
||||
<option>Finance</option>
|
||||
<option>Marketing</option>
|
||||
<option>Operations</option>
|
||||
</select>
|
||||
<select class="filter-select">
|
||||
<option>All Status</option>
|
||||
<option>Present</option>
|
||||
<option>Absent</option>
|
||||
<option>On Leave</option>
|
||||
<option>Half Day</option>
|
||||
<option>Late Arrival</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon" style="background:#ECFDF5;"><svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||
<div><div class="stat-value">198</div><div class="stat-label">Present</div></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon" style="background:#FEF2F2;"><svg viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/></svg></div>
|
||||
<div><div class="stat-value">12</div><div class="stat-label">Absent</div></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon" style="background:#EFF6FF;"><svg viewBox="0 0 24 24" fill="none" stroke="#3B82F6" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></div>
|
||||
<div><div class="stat-value">15</div><div class="stat-label">On Leave</div></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon" style="background:#FFFBEB;"><svg viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
|
||||
<div><div class="stat-value">5</div><div class="stat-label">Half Day</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Employee</th>
|
||||
<th>Check In</th>
|
||||
<th>Check Out</th>
|
||||
<th>Working Hours</th>
|
||||
<th>Status</th>
|
||||
<th>Notes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#4F46E5;">MR</div><div><div class="emp-name">Michael Rodriguez</div><div class="emp-dept">Engineering</div></div></div></td>
|
||||
<td><div class="time-cell">09:02 AM</div></td>
|
||||
<td><div class="time-cell">06:15 PM</div></td>
|
||||
<td><div class="hours-cell">9h 13m</div></td>
|
||||
<td><span class="badge badge-green">Present</span></td>
|
||||
<td><span class="note-text">—</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#10B981;">PP</div><div><div class="emp-name">Priya Patel</div><div class="emp-dept">Finance</div></div></div></td>
|
||||
<td><div class="time-cell">—</div></td>
|
||||
<td><div class="time-cell">—</div></td>
|
||||
<td><div class="hours-cell">—</div></td>
|
||||
<td><span class="badge badge-blue">On Leave</span></td>
|
||||
<td><span class="note-text">Sick leave approved</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#F59E0B;">JK</div><div><div class="emp-name">James Kim</div><div class="emp-dept">Engineering</div></div></div></td>
|
||||
<td><div class="time-cell">09:45 AM</div></td>
|
||||
<td><div class="time-cell">06:30 PM</div></td>
|
||||
<td><div class="hours-cell">8h 45m</div></td>
|
||||
<td><span class="badge badge-yellow">Late Arrival</span></td>
|
||||
<td><span class="note-text">Traffic delay</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#7C3AED;">AL</div><div><div class="emp-name">Aisha Larsson</div><div class="emp-dept">Marketing</div></div></div></td>
|
||||
<td><div class="time-cell">08:55 AM</div></td>
|
||||
<td><div class="time-cell">05:55 PM</div></td>
|
||||
<td><div class="hours-cell">9h 00m</div></td>
|
||||
<td><span class="badge badge-green">Present</span></td>
|
||||
<td><span class="note-text">—</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#3B82F6;">RS</div><div><div class="emp-name">Ravi Shankar</div><div class="emp-dept">Operations</div></div></div></td>
|
||||
<td><div class="time-cell">08:30 AM</div></td>
|
||||
<td><div class="time-cell">01:00 PM</div></td>
|
||||
<td><div class="hours-cell">4h 30m</div></td>
|
||||
<td><span class="badge badge-yellow">Half Day</span></td>
|
||||
<td><span class="note-text">Doctor appointment PM</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#EC4899;">DT</div><div><div class="emp-name">Diana Torres</div><div class="emp-dept">Sales</div></div></div></td>
|
||||
<td><div class="time-cell">09:00 AM</div></td>
|
||||
<td><div class="time-cell">06:05 PM</div></td>
|
||||
<td><div class="hours-cell">9h 05m</div></td>
|
||||
<td><span class="badge badge-green">Present</span></td>
|
||||
<td><span class="note-text">—</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#059669;">LO</div><div><div class="emp-name">Lucas Oliveira</div><div class="emp-dept">Operations</div></div></div></td>
|
||||
<td><div class="time-cell">—</div></td>
|
||||
<td><div class="time-cell">—</div></td>
|
||||
<td><div class="hours-cell">—</div></td>
|
||||
<td><span class="badge badge-red">Absent</span></td>
|
||||
<td><span class="note-text">No notice provided</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#D97706;">FA</div><div><div class="emp-name">Fatima Al-Rashid</div><div class="emp-dept">Finance</div></div></div></td>
|
||||
<td><div class="time-cell">08:48 AM</div></td>
|
||||
<td><div class="time-cell">05:50 PM</div></td>
|
||||
<td><div class="hours-cell">9h 02m</div></td>
|
||||
<td><span class="badge badge-green">Present</span></td>
|
||||
<td><span class="note-text">—</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#6366F1;">NW</div><div><div class="emp-name">Noah Williams</div><div class="emp-dept">Engineering</div></div></div></td>
|
||||
<td><div class="time-cell">09:15 AM</div></td>
|
||||
<td><div class="time-cell">06:20 PM</div></td>
|
||||
<td><div class="hours-cell">9h 05m</div></td>
|
||||
<td><span class="badge badge-green">Present</span></td>
|
||||
<td><span class="note-text">WFH approved</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#7C3AED;">KL</div><div><div class="emp-name">Kevin Liu</div><div class="emp-dept">Marketing</div></div></div></td>
|
||||
<td><div class="time-cell">09:00 AM</div></td>
|
||||
<td><div class="time-cell">06:00 PM</div></td>
|
||||
<td><div class="hours-cell">9h 00m</div></td>
|
||||
<td><span class="badge badge-green">Present</span></td>
|
||||
<td><span class="note-text">—</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div style="padding:14px 20px;border-top:1px solid #F3F4F6;display:flex;justify-content:space-between;align-items:center;">
|
||||
<span style="font-size:13px;color:#6B7280;">Showing 1–10 of 230 employees</span>
|
||||
<div style="display:flex;gap:4px;">
|
||||
<button style="width:30px;height:30px;border-radius:6px;border:1.5px solid #E5E7EB;background:#FFFFFF;cursor:pointer;display:flex;align-items:center;justify-content:center;">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
</button>
|
||||
<button style="width:30px;height:30px;border-radius:6px;border:1.5px solid #4F46E5;background:#4F46E5;color:#FFF;font-size:13px;font-weight:600;cursor:pointer;">1</button>
|
||||
<button style="width:30px;height:30px;border-radius:6px;border:1.5px solid #E5E7EB;background:#FFFFFF;font-size:13px;cursor:pointer;">2</button>
|
||||
<button style="width:30px;height:30px;border-radius:6px;border:1.5px solid #E5E7EB;background:#FFFFFF;font-size:13px;cursor:pointer;">3</button>
|
||||
<button style="width:30px;height:30px;border-radius:6px;border:1.5px solid #E5E7EB;background:#FFFFFF;cursor:pointer;display:flex;align-items:center;justify-content:center;">
|
||||
<svg width="12" height="12" 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>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -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>Payroll — HR Portal</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@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: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
|
||||
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
|
||||
.logo-icon svg { width: 16px; height: 16px; }
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
|
||||
.nav-item:hover { background: #F9FAFB; color: #111827; }
|
||||
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
|
||||
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
|
||||
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
|
||||
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
|
||||
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
|
||||
.user-role { font-size: 11px; color: #9CA3AF; }
|
||||
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
|
||||
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
|
||||
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
|
||||
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
|
||||
.breadcrumb span { color: #111827; font-weight: 500; }
|
||||
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
|
||||
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
|
||||
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
.content { padding: 28px; }
|
||||
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
|
||||
.page-title { font-size: 22px; font-weight: 700; }
|
||||
|
||||
/* MONTH SELECTOR */
|
||||
.month-selector { display: flex; align-items: center; gap: 12px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 8px; padding: 8px 16px; }
|
||||
.month-nav-btn { width: 28px; height: 28px; border-radius: 6px; border: 1px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #6B7280; }
|
||||
.month-nav-btn svg { width: 14px; height: 14px; }
|
||||
.month-label { font-size: 15px; font-weight: 600; color: #111827; min-width: 120px; text-align: center; }
|
||||
|
||||
/* STATUS CARD */
|
||||
.payroll-status-card {
|
||||
background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%);
|
||||
border: 2px dashed #E5E7EB;
|
||||
border-radius: 12px; padding: 28px;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.payroll-status-card.pending { border-color: #FCD34D; background: linear-gradient(135deg, #FFFBEB 0%, #FFFFFF 100%); }
|
||||
.status-info {}
|
||||
.status-title { font-size: 18px; font-weight: 700; color: #111827; margin-bottom: 4px; }
|
||||
.status-sub { font-size: 14px; color: #6B7280; }
|
||||
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; margin-top: 10px; }
|
||||
.status-badge.draft { background: #FEF9C3; color: #A16207; }
|
||||
.btn-generate { padding: 12px 24px; background: #4F46E5; color: #FFF; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
|
||||
.btn-generate:hover { background: #4338CA; }
|
||||
|
||||
/* STATS ROW */
|
||||
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
|
||||
.stat-card { background: #FFFFFF; border-radius: 10px; padding: 20px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
|
||||
.stat-label { font-size: 12px; color: #6B7280; font-weight: 500; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.4px; }
|
||||
.stat-value { font-size: 24px; font-weight: 700; color: #111827; }
|
||||
.stat-sub { font-size: 12px; color: #9CA3AF; margin-top: 4px; }
|
||||
|
||||
/* TWO COL */
|
||||
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
||||
.card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.card-header-row { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #F3F4F6; }
|
||||
.card-title { font-size: 15px; font-weight: 600; color: #111827; }
|
||||
.card-action { font-size: 13px; color: #4F46E5; cursor: pointer; font-weight: 500; }
|
||||
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead { background: #F9FAFB; border-bottom: 1px solid #E5E7EB; }
|
||||
th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: #6B7280; text-align: left; text-transform: uppercase; letter-spacing: 0.4px; }
|
||||
tbody tr { border-bottom: 1px solid #F3F4F6; transition: background 0.1s; }
|
||||
tbody tr:last-child { border-bottom: none; }
|
||||
tbody tr:hover { background: #FAFAFA; }
|
||||
td { padding: 14px 16px; font-size: 14px; color: #374151; vertical-align: middle; }
|
||||
td strong { color: #111827; font-weight: 600; }
|
||||
|
||||
.badge { padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-blue { background: #EFF6FF; color: #3B82F6; }
|
||||
.badge-yellow { background: #FFFBEB; color: #D97706; }
|
||||
.badge-gray { background: #F3F4F6; color: #6B7280; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>HR Portal</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="04-admin-dashboard.html" class="nav-item"><svg 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 href="05-employee-directory.html" class="nav-item"><svg 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 href="08-department-management.html" class="nav-item"><svg 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>
|
||||
<a href="09-leave-requests.html" class="nav-item"><svg 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">7</span></a>
|
||||
<a href="11-attendance.html" class="nav-item"><svg 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 href="12-payroll-dashboard.html" class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
|
||||
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
|
||||
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
|
||||
<a href="15-performance-reviews.html" class="nav-item"><svg 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>Performance</a>
|
||||
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
|
||||
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
|
||||
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
|
||||
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
|
||||
<button class="logout-btn">Sign Out</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<header class="topnav">
|
||||
<div class="breadcrumb">
|
||||
<a href="04-admin-dashboard.html">Home</a>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
<span>Payroll</span>
|
||||
</div>
|
||||
<div class="topnav-actions">
|
||||
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
|
||||
<div class="topnav-avatar">SC</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
<div class="page-header">
|
||||
<div class="page-title">Payroll</div>
|
||||
<div class="month-selector">
|
||||
<button class="month-nav-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg></button>
|
||||
<span class="month-label">May 2026</span>
|
||||
<button class="month-nav-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>
|
||||
|
||||
<!-- STATUS CARD -->
|
||||
<div class="payroll-status-card pending">
|
||||
<div class="status-info">
|
||||
<div class="status-title">May 2026 Payroll</div>
|
||||
<div class="status-sub">Payroll has not been generated yet. Review attendance and leave data before processing.</div>
|
||||
<div class="status-badge draft">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||||
Not Generated
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:right;">
|
||||
<div style="font-size:12px;color:#9CA3AF;margin-bottom:12px;">Pay date: May 31, 2026</div>
|
||||
<button class="btn-generate">Generate Payroll</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STATS -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Total Employees</div>
|
||||
<div class="stat-value">248</div>
|
||||
<div class="stat-sub">On active payroll</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Gross Payroll</div>
|
||||
<div class="stat-value" style="color:#4F46E5;">$284,500</div>
|
||||
<div class="stat-sub">+2.1% vs April</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Total Deductions</div>
|
||||
<div class="stat-value" style="color:#EF4444;">$43,200</div>
|
||||
<div class="stat-sub">Tax, PF, insurance</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Net Payable</div>
|
||||
<div class="stat-value" style="color:#10B981;">$241,300</div>
|
||||
<div class="stat-sub">After all deductions</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TWO COLUMN -->
|
||||
<div class="two-col">
|
||||
<!-- SALARY STRUCTURES -->
|
||||
<div class="card">
|
||||
<div class="card-header-row">
|
||||
<span class="card-title">Salary Structures</span>
|
||||
<span class="card-action">Manage</span>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Structure Name</th>
|
||||
<th>Base Salary</th>
|
||||
<th>Employees</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div style="font-size:14px;font-weight:500;color:#111827;">Junior (L1)</div><div style="font-size:12px;color:#9CA3AF;">$60K – $85K / year</div></td>
|
||||
<td><strong>$6,800</strong>/mo</td>
|
||||
<td><span style="font-size:14px;font-weight:500;">42</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div style="font-size:14px;font-weight:500;color:#111827;">Mid-Level (L2)</div><div style="font-size:12px;color:#9CA3AF;">$85K – $110K / year</div></td>
|
||||
<td><strong>$8,200</strong>/mo</td>
|
||||
<td><span style="font-size:14px;font-weight:500;">98</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div style="font-size:14px;font-weight:500;color:#111827;">Senior (L3)</div><div style="font-size:12px;color:#9CA3AF;">$110K – $145K / year</div></td>
|
||||
<td><strong>$10,500</strong>/mo</td>
|
||||
<td><span style="font-size:14px;font-weight:500;">67</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div style="font-size:14px;font-weight:500;color:#111827;">Senior (L4)</div><div style="font-size:12px;color:#9CA3AF;">$145K – $180K / year</div></td>
|
||||
<td><strong>$13,200</strong>/mo</td>
|
||||
<td><span style="font-size:14px;font-weight:500;">28</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div style="font-size:14px;font-weight:500;color:#111827;">Lead (L5+)</div><div style="font-size:12px;color:#9CA3AF;">$180K – $220K / year</div></td>
|
||||
<td><strong>$17,000</strong>/mo</td>
|
||||
<td><span style="font-size:14px;font-weight:500;">13</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- PAYROLL HISTORY -->
|
||||
<div class="card">
|
||||
<div class="card-header-row">
|
||||
<span class="card-title">Recent Payroll History</span>
|
||||
<span class="card-action">View all</span>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Period</th>
|
||||
<th>Net Payable</th>
|
||||
<th>Employees</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>April 2026</strong></td>
|
||||
<td>$235,800</td>
|
||||
<td>244</td>
|
||||
<td><span class="badge badge-green">Paid</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>March 2026</strong></td>
|
||||
<td>$231,200</td>
|
||||
<td>241</td>
|
||||
<td><span class="badge badge-green">Paid</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>February 2026</strong></td>
|
||||
<td>$228,500</td>
|
||||
<td>239</td>
|
||||
<td><span class="badge badge-green">Paid</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>January 2026</strong></td>
|
||||
<td>$224,900</td>
|
||||
<td>236</td>
|
||||
<td><span class="badge badge-green">Paid</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,346 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Recruitment — HR Portal</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@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: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
|
||||
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
|
||||
.logo-icon svg { width: 16px; height: 16px; }
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
|
||||
.nav-item:hover { background: #F9FAFB; color: #111827; }
|
||||
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
|
||||
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
|
||||
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
|
||||
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
|
||||
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
|
||||
.user-role { font-size: 11px; color: #9CA3AF; }
|
||||
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
|
||||
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
|
||||
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
|
||||
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
|
||||
.breadcrumb span { color: #111827; font-weight: 500; }
|
||||
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
|
||||
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
|
||||
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
.content { padding: 28px; }
|
||||
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
|
||||
.page-title { font-size: 22px; font-weight: 700; }
|
||||
.btn-primary { padding: 9px 18px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
|
||||
.btn-primary svg { width: 16px; height: 16px; }
|
||||
|
||||
/* JOB CARDS */
|
||||
.jobs-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
|
||||
.job-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 20px; cursor: pointer; transition: all 0.15s; }
|
||||
.job-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); border-color: #C7D2FE; }
|
||||
.job-card.active-job { border-color: #4F46E5; box-shadow: 0 0 0 2px rgba(79,70,229,0.15); }
|
||||
.job-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
|
||||
.job-title { font-size: 14px; font-weight: 600; color: #111827; margin-bottom: 3px; }
|
||||
.job-dept { font-size: 12px; color: #9CA3AF; }
|
||||
.job-open-dot { width: 8px; height: 8px; border-radius: 50%; background: #10B981; margin-top: 4px; }
|
||||
.badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.badge-blue { background: #EFF6FF; color: #3B82F6; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-yellow { background: #FFFBEB; color: #D97706; }
|
||||
.badge-purple { background: #F5F3FF; color: #7C3AED; }
|
||||
.job-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
|
||||
.job-meta-item { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #9CA3AF; }
|
||||
.job-meta-item svg { width: 12px; height: 12px; }
|
||||
.job-footer { display: flex; align-items: center; justify-content: space-between; }
|
||||
.applicant-count { font-size: 13px; font-weight: 600; color: #111827; }
|
||||
.applicant-label { font-size: 11px; color: #9CA3AF; }
|
||||
.btn-pipeline { padding: 5px 12px; background: #EEF2FF; color: #4F46E5; border: 1px solid #C7D2FE; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
|
||||
.btn-pipeline:hover { background: #4F46E5; color: #FFF; }
|
||||
|
||||
/* KANBAN */
|
||||
.kanban-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
|
||||
.kanban-title { font-size: 16px; font-weight: 600; color: #111827; }
|
||||
.kanban-subtitle { font-size: 13px; color: #9CA3AF; }
|
||||
.kanban-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; overflow-x: auto; }
|
||||
.kanban-col { background: #F9FAFB; border-radius: 10px; padding: 14px; min-width: 0; }
|
||||
.kanban-col-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
|
||||
.col-name { font-size: 13px; font-weight: 600; color: #374151; }
|
||||
.col-count { background: #E5E7EB; color: #6B7280; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 10px; }
|
||||
.kanban-card { background: #FFFFFF; border-radius: 8px; border: 1px solid #E5E7EB; padding: 12px; margin-bottom: 8px; cursor: pointer; transition: all 0.15s; }
|
||||
.kanban-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: #C7D2FE; }
|
||||
.kanban-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #FFF; margin-bottom: 8px; }
|
||||
.applicant-name { font-size: 13px; font-weight: 600; color: #111827; margin-bottom: 2px; }
|
||||
.applied-date { font-size: 11px; color: #9CA3AF; margin-bottom: 8px; }
|
||||
.btn-move { padding: 3px 10px; border: 1px solid #E5E7EB; background: #FFFFFF; border-radius: 4px; font-size: 11px; color: #6B7280; cursor: pointer; transition: all 0.15s; }
|
||||
.btn-move:hover { border-color: #4F46E5; color: #4F46E5; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>HR Portal</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="04-admin-dashboard.html" class="nav-item"><svg 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 href="05-employee-directory.html" class="nav-item"><svg 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 href="08-department-management.html" class="nav-item"><svg 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>
|
||||
<a href="09-leave-requests.html" class="nav-item"><svg 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">7</span></a>
|
||||
<a href="11-attendance.html" class="nav-item"><svg 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 href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
|
||||
<a href="13-recruitment.html" class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
|
||||
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
|
||||
<a href="15-performance-reviews.html" class="nav-item"><svg 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>Performance</a>
|
||||
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
|
||||
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
|
||||
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
|
||||
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
|
||||
<button class="logout-btn">Sign Out</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<header class="topnav">
|
||||
<div class="breadcrumb">
|
||||
<a href="04-admin-dashboard.html">Home</a>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
<span>Recruitment</span>
|
||||
</div>
|
||||
<div class="topnav-actions">
|
||||
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
|
||||
<div class="topnav-avatar">SC</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="page-title">Recruitment</div>
|
||||
<div style="font-size:13px;color:#6B7280;margin-top:3px;">4 open positions · 19 total applicants</div>
|
||||
</div>
|
||||
<button class="btn-primary">
|
||||
<svg 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>
|
||||
Post New Job
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- JOB CARDS -->
|
||||
<div class="jobs-row">
|
||||
<div class="job-card active-job">
|
||||
<div class="job-card-top">
|
||||
<div>
|
||||
<div class="job-title">Senior Frontend Engineer</div>
|
||||
<div class="job-dept">Engineering</div>
|
||||
</div>
|
||||
<div class="job-open-dot"></div>
|
||||
</div>
|
||||
<div class="job-meta">
|
||||
<span class="badge badge-blue">Full-time</span>
|
||||
<div class="job-meta-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||
San Francisco
|
||||
</div>
|
||||
<div class="job-meta-item">
|
||||
<svg 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>
|
||||
12 days open
|
||||
</div>
|
||||
</div>
|
||||
<div class="job-footer">
|
||||
<div><div class="applicant-count">8</div><div class="applicant-label">Applicants</div></div>
|
||||
<button class="btn-pipeline">View Pipeline</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="job-card">
|
||||
<div class="job-card-top">
|
||||
<div>
|
||||
<div class="job-title">Product Designer</div>
|
||||
<div class="job-dept">Design</div>
|
||||
</div>
|
||||
<div class="job-open-dot"></div>
|
||||
</div>
|
||||
<div class="job-meta">
|
||||
<span class="badge badge-blue">Full-time</span>
|
||||
<div class="job-meta-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||
Remote
|
||||
</div>
|
||||
<div class="job-meta-item">
|
||||
<svg 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>
|
||||
5 days open
|
||||
</div>
|
||||
</div>
|
||||
<div class="job-footer">
|
||||
<div><div class="applicant-count">5</div><div class="applicant-label">Applicants</div></div>
|
||||
<button class="btn-pipeline">View Pipeline</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="job-card">
|
||||
<div class="job-card-top">
|
||||
<div>
|
||||
<div class="job-title">Sales Account Manager</div>
|
||||
<div class="job-dept">Sales</div>
|
||||
</div>
|
||||
<div class="job-open-dot"></div>
|
||||
</div>
|
||||
<div class="job-meta">
|
||||
<span class="badge badge-blue">Full-time</span>
|
||||
<div class="job-meta-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||
New York
|
||||
</div>
|
||||
<div class="job-meta-item">
|
||||
<svg 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>
|
||||
3 days open
|
||||
</div>
|
||||
</div>
|
||||
<div class="job-footer">
|
||||
<div><div class="applicant-count">3</div><div class="applicant-label">Applicants</div></div>
|
||||
<button class="btn-pipeline">View Pipeline</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="job-card">
|
||||
<div class="job-card-top">
|
||||
<div>
|
||||
<div class="job-title">DevOps Engineer</div>
|
||||
<div class="job-dept">Engineering</div>
|
||||
</div>
|
||||
<div class="job-open-dot"></div>
|
||||
</div>
|
||||
<div class="job-meta">
|
||||
<span class="badge badge-purple">Contract</span>
|
||||
<div class="job-meta-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||
Remote
|
||||
</div>
|
||||
<div class="job-meta-item">
|
||||
<svg 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>
|
||||
8 days open
|
||||
</div>
|
||||
</div>
|
||||
<div class="job-footer">
|
||||
<div><div class="applicant-count">3</div><div class="applicant-label">Applicants</div></div>
|
||||
<button class="btn-pipeline">View Pipeline</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- KANBAN PIPELINE -->
|
||||
<div class="kanban-header">
|
||||
<div>
|
||||
<div class="kanban-title">Pipeline: Senior Frontend Engineer</div>
|
||||
<div class="kanban-subtitle">Showing applicants for this role — click a job card above to switch</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kanban-board">
|
||||
<!-- APPLIED -->
|
||||
<div class="kanban-col">
|
||||
<div class="kanban-col-header">
|
||||
<span class="col-name">Applied</span>
|
||||
<span class="col-count">8</span>
|
||||
</div>
|
||||
<div class="kanban-card">
|
||||
<div class="kanban-avatar" style="background:#4F46E5;">AT</div>
|
||||
<div class="applicant-name">Alex Thompson</div>
|
||||
<div class="applied-date">Applied May 8, 2026</div>
|
||||
<button class="btn-move">Move to Screening</button>
|
||||
</div>
|
||||
<div class="kanban-card">
|
||||
<div class="kanban-avatar" style="background:#10B981;">MK</div>
|
||||
<div class="applicant-name">Maya Kumar</div>
|
||||
<div class="applied-date">Applied May 9, 2026</div>
|
||||
<button class="btn-move">Move to Screening</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SCREENING -->
|
||||
<div class="kanban-col">
|
||||
<div class="kanban-col-header">
|
||||
<span class="col-name">Screening</span>
|
||||
<span class="col-count">5</span>
|
||||
</div>
|
||||
<div class="kanban-card">
|
||||
<div class="kanban-avatar" style="background:#F59E0B;">JL</div>
|
||||
<div class="applicant-name">Jordan Lee</div>
|
||||
<div class="applied-date">Screening since May 5</div>
|
||||
<button class="btn-move">Move to Interview</button>
|
||||
</div>
|
||||
<div class="kanban-card">
|
||||
<div class="kanban-avatar" style="background:#EF4444;">SP</div>
|
||||
<div class="applicant-name">Sofia Park</div>
|
||||
<div class="applied-date">Screening since May 6</div>
|
||||
<button class="btn-move">Move to Interview</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- INTERVIEW -->
|
||||
<div class="kanban-col">
|
||||
<div class="kanban-col-header">
|
||||
<span class="col-name">Interview</span>
|
||||
<span class="col-count">3</span>
|
||||
</div>
|
||||
<div class="kanban-card">
|
||||
<div class="kanban-avatar" style="background:#7C3AED;">RN</div>
|
||||
<div class="applicant-name">Ryan Nakamura</div>
|
||||
<div class="applied-date">Interview May 11, 2026</div>
|
||||
<button class="btn-move">Move to Offer</button>
|
||||
</div>
|
||||
<div class="kanban-card">
|
||||
<div class="kanban-avatar" style="background:#3B82F6;">EC</div>
|
||||
<div class="applicant-name">Elena Costa</div>
|
||||
<div class="applied-date">Interview May 12, 2026</div>
|
||||
<button class="btn-move">Move to Offer</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- OFFER -->
|
||||
<div class="kanban-col">
|
||||
<div class="kanban-col-header">
|
||||
<span class="col-name">Offer</span>
|
||||
<span class="col-count">1</span>
|
||||
</div>
|
||||
<div class="kanban-card">
|
||||
<div class="kanban-avatar" style="background:#EC4899;">LM</div>
|
||||
<div class="applicant-name">Luis Martinez</div>
|
||||
<div class="applied-date">Offer sent May 7, 2026</div>
|
||||
<button class="btn-move">Mark Accepted</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- HIRED -->
|
||||
<div class="kanban-col" style="background:#F0FDF4;">
|
||||
<div class="kanban-col-header">
|
||||
<span class="col-name" style="color:#059669;">Hired</span>
|
||||
<span class="col-count" style="background:#DCFCE7;color:#059669;">2</span>
|
||||
</div>
|
||||
<div class="kanban-card" style="border-color:#BBF7D0;">
|
||||
<div class="kanban-avatar" style="background:#10B981;">DB</div>
|
||||
<div class="applicant-name">David Blake</div>
|
||||
<div class="applied-date">Hired April 28, 2026</div>
|
||||
<span style="font-size:11px;color:#10B981;font-weight:600;">Start: May 15</span>
|
||||
</div>
|
||||
<div class="kanban-card" style="border-color:#BBF7D0;">
|
||||
<div class="kanban-avatar" style="background:#059669;">AS</div>
|
||||
<div class="applicant-name">Anika Singh</div>
|
||||
<div class="applied-date">Hired May 2, 2026</div>
|
||||
<span style="font-size:11px;color:#10B981;font-weight:600;">Start: June 1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,293 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Expense Claims — HR Portal</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@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: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
|
||||
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
|
||||
.logo-icon svg { width: 16px; height: 16px; }
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
|
||||
.nav-item:hover { background: #F9FAFB; color: #111827; }
|
||||
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
|
||||
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
|
||||
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
|
||||
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
|
||||
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
|
||||
.user-role { font-size: 11px; color: #9CA3AF; }
|
||||
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
|
||||
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
|
||||
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
|
||||
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
|
||||
.breadcrumb span { color: #111827; font-weight: 500; }
|
||||
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
|
||||
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
|
||||
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
.content { padding: 28px; }
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
|
||||
.page-title { font-size: 22px; font-weight: 700; }
|
||||
.header-right { display: flex; gap: 8px; }
|
||||
.btn-primary { padding: 9px 18px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
|
||||
.btn-primary svg { width: 16px; height: 16px; }
|
||||
.btn-outline { padding: 8px 14px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 14px; font-weight: 500; cursor: pointer; }
|
||||
|
||||
.tabs { display: flex; border-bottom: 1px solid #E5E7EB; margin-bottom: 20px; }
|
||||
.tab { padding: 10px 20px; font-size: 14px; font-weight: 500; color: #6B7280; cursor: pointer; border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 6px; }
|
||||
.tab.active { color: #4F46E5; border-bottom-color: #4F46E5; font-weight: 600; }
|
||||
.tab-count { background: #F3F4F6; color: #6B7280; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
|
||||
.tab.active .tab-count { background: #EEF2FF; color: #4F46E5; }
|
||||
|
||||
.filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
|
||||
.filter-search { display: flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 8px; padding: 8px 13px; flex: 1; max-width: 280px; }
|
||||
.filter-search svg { width: 15px; height: 15px; color: #9CA3AF; flex-shrink: 0; }
|
||||
.filter-search input { border: none; background: transparent; font-size: 14px; outline: none; width: 100%; }
|
||||
.filter-select { padding: 8px 13px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 8px; font-size: 14px; color: #374151; outline: none; appearance: none; cursor: pointer; min-width: 130px; }
|
||||
|
||||
.table-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead { background: #F9FAFB; border-bottom: 1px solid #E5E7EB; }
|
||||
th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: #6B7280; text-align: left; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
|
||||
tbody tr { border-bottom: 1px solid #F3F4F6; transition: background 0.1s; }
|
||||
tbody tr:last-child { border-bottom: none; }
|
||||
tbody tr:hover { background: #FAFAFA; }
|
||||
td { padding: 14px 16px; font-size: 14px; color: #374151; vertical-align: middle; }
|
||||
|
||||
.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: 12px; font-weight: 600; color: #FFF; flex-shrink: 0; }
|
||||
.emp-name { font-size: 13px; font-weight: 500; color: #111827; }
|
||||
.emp-dept { font-size: 11px; color: #9CA3AF; }
|
||||
|
||||
.expense-title { font-size: 13px; font-weight: 500; color: #111827; }
|
||||
.expense-sub { font-size: 11px; color: #9CA3AF; }
|
||||
|
||||
.badge { padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.badge-blue { background: #EFF6FF; color: #3B82F6; }
|
||||
.badge-orange { background: #FFF7ED; color: #EA580C; }
|
||||
.badge-purple { background: #F5F3FF; color: #7C3AED; }
|
||||
.badge-teal { background: #F0FDFA; color: #0D9488; }
|
||||
.badge-gray { background: #F3F4F6; color: #6B7280; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-red { background: #FEF2F2; color: #DC2626; }
|
||||
|
||||
.status-pending { background: #FFFBEB; color: #D97706; padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.status-approved { background: #ECFDF5; color: #059669; padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.status-reimbursed { background: #EFF6FF; color: #3B82F6; padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
|
||||
.amount-cell { font-size: 14px; font-weight: 600; color: #111827; }
|
||||
.receipt-icon { color: #9CA3AF; cursor: pointer; transition: color 0.15s; }
|
||||
.receipt-icon:hover { color: #4F46E5; }
|
||||
|
||||
.actions-cell { display: flex; gap: 6px; }
|
||||
.btn-approve { padding: 4px 10px; background: #ECFDF5; color: #10B981; border: 1px solid #BBF7D0; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; }
|
||||
.btn-approve:hover { background: #10B981; color: #FFF; }
|
||||
.btn-reject { padding: 4px 10px; background: #FEF2F2; color: #EF4444; border: 1px solid #FECACA; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; }
|
||||
.btn-reject:hover { background: #EF4444; color: #FFF; }
|
||||
.btn-view { padding: 4px 10px; background: #F9FAFB; color: #6B7280; border: 1px solid #E5E7EB; border-radius: 4px; font-size: 11px; font-weight: 500; cursor: pointer; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>HR Portal</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="04-admin-dashboard.html" class="nav-item"><svg 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 href="05-employee-directory.html" class="nav-item"><svg 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 href="08-department-management.html" class="nav-item"><svg 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>
|
||||
<a href="09-leave-requests.html" class="nav-item"><svg 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">7</span></a>
|
||||
<a href="11-attendance.html" class="nav-item"><svg 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 href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
|
||||
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
|
||||
<a href="14-expense-claims.html" class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
|
||||
<a href="15-performance-reviews.html" class="nav-item"><svg 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>Performance</a>
|
||||
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
|
||||
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
|
||||
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
|
||||
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
|
||||
<button class="logout-btn">Sign Out</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<header class="topnav">
|
||||
<div class="breadcrumb">
|
||||
<a href="04-admin-dashboard.html">Home</a>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
<span>Expense Claims</span>
|
||||
</div>
|
||||
<div class="topnav-actions">
|
||||
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
|
||||
<div class="topnav-avatar">SC</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
<div class="page-header">
|
||||
<div class="page-title">Expense Claims</div>
|
||||
<div class="header-right">
|
||||
<button class="btn-outline">Export</button>
|
||||
<button class="btn-primary">
|
||||
<svg 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>
|
||||
New Claim
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="tab">All <span class="tab-count">42</span></div>
|
||||
<div class="tab active">Pending <span class="tab-count">9</span></div>
|
||||
<div class="tab">Approved <span class="tab-count">24</span></div>
|
||||
<div class="tab">Reimbursed <span class="tab-count">9</span></div>
|
||||
</div>
|
||||
|
||||
<div class="filter-bar">
|
||||
<div class="filter-search">
|
||||
<svg 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>
|
||||
<input type="text" placeholder="Search claims...">
|
||||
</div>
|
||||
<select class="filter-select">
|
||||
<option>All Categories</option>
|
||||
<option>Travel</option>
|
||||
<option>Meals</option>
|
||||
<option>Equipment</option>
|
||||
<option>Accommodation</option>
|
||||
</select>
|
||||
<select class="filter-select">
|
||||
<option>All Departments</option>
|
||||
<option>Engineering</option>
|
||||
<option>Sales</option>
|
||||
<option>Marketing</option>
|
||||
</select>
|
||||
<select class="filter-select">
|
||||
<option>This Month</option>
|
||||
<option>Last Month</option>
|
||||
<option>Last Quarter</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Employee</th>
|
||||
<th>Title</th>
|
||||
<th>Category</th>
|
||||
<th>Amount</th>
|
||||
<th>Receipt</th>
|
||||
<th>Submitted</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#4F46E5;">MR</div><div><div class="emp-name">Michael Rodriguez</div><div class="emp-dept">Engineering</div></div></div></td>
|
||||
<td><div class="expense-title">AWS Re:Invent Conference</div><div class="expense-sub">Las Vegas, NV</div></td>
|
||||
<td><span class="badge badge-blue">Travel</span></td>
|
||||
<td><span class="amount-cell">$1,240.00</span></td>
|
||||
<td><svg class="receipt-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></td>
|
||||
<td>May 7, 2026</td>
|
||||
<td><span class="status-pending">Pending</span></td>
|
||||
<td><div class="actions-cell"><button class="btn-approve">Approve</button><button class="btn-reject">Reject</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#EC4899;">DT</div><div><div class="emp-name">Diana Torres</div><div class="emp-dept">Sales</div></div></div></td>
|
||||
<td><div class="expense-title">Client Dinner — Acme Corp</div><div class="expense-sub">Restaurant receipt</div></td>
|
||||
<td><span class="badge badge-orange">Meals</span></td>
|
||||
<td><span class="amount-cell">$340.00</span></td>
|
||||
<td><svg class="receipt-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></td>
|
||||
<td>May 6, 2026</td>
|
||||
<td><span class="status-pending">Pending</span></td>
|
||||
<td><div class="actions-cell"><button class="btn-approve">Approve</button><button class="btn-reject">Reject</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#7C3AED;">AL</div><div><div class="emp-name">Aisha Larsson</div><div class="emp-dept">Marketing</div></div></div></td>
|
||||
<td><div class="expense-title">MacBook Pro Stand & Hub</div><div class="expense-sub">Remote work equipment</div></td>
|
||||
<td><span class="badge badge-purple">Equipment</span></td>
|
||||
<td><span class="amount-cell">$178.50</span></td>
|
||||
<td><svg class="receipt-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></td>
|
||||
<td>May 5, 2026</td>
|
||||
<td><span class="status-pending">Pending</span></td>
|
||||
<td><div class="actions-cell"><button class="btn-approve">Approve</button><button class="btn-reject">Reject</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#3B82F6;">RS</div><div><div class="emp-name">Ravi Shankar</div><div class="emp-dept">Operations</div></div></div></td>
|
||||
<td><div class="expense-title">Marriott — Austin Summit</div><div class="expense-sub">2 nights accommodation</div></td>
|
||||
<td><span class="badge badge-teal">Accommodation</span></td>
|
||||
<td><span class="amount-cell">$520.00</span></td>
|
||||
<td><svg class="receipt-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></td>
|
||||
<td>Apr 28, 2026</td>
|
||||
<td><span class="status-approved">Approved</span></td>
|
||||
<td><div class="actions-cell"><button class="btn-view">View</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#F59E0B;">JK</div><div><div class="emp-name">James Kim</div><div class="emp-dept">Engineering</div></div></div></td>
|
||||
<td><div class="expense-title">Team Lunch — Sprint Review</div><div class="expense-sub">Pizza delivery for 8 people</div></td>
|
||||
<td><span class="badge badge-orange">Meals</span></td>
|
||||
<td><span class="amount-cell">$186.00</span></td>
|
||||
<td><svg class="receipt-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></td>
|
||||
<td>May 2, 2026</td>
|
||||
<td><span class="status-approved">Approved</span></td>
|
||||
<td><div class="actions-cell"><button class="btn-view">View</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#10B981;">PP</div><div><div class="emp-name">Priya Patel</div><div class="emp-dept">Finance</div></div></div></td>
|
||||
<td><div class="expense-title">Uber — Client Site Visits</div><div class="expense-sub">April 22–24 rides</div></td>
|
||||
<td><span class="badge badge-blue">Travel</span></td>
|
||||
<td><span class="amount-cell">$92.40</span></td>
|
||||
<td><svg class="receipt-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></td>
|
||||
<td>Apr 24, 2026</td>
|
||||
<td><span class="status-reimbursed">Reimbursed</span></td>
|
||||
<td><div class="actions-cell"><button class="btn-view">View</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#D97706;">FA</div><div><div class="emp-name">Fatima Al-Rashid</div><div class="emp-dept">Finance</div></div></div></td>
|
||||
<td><div class="expense-title">QuickBooks Subscription</div><div class="expense-sub">Annual software license</div></td>
|
||||
<td><span class="badge badge-purple">Equipment</span></td>
|
||||
<td><span class="amount-cell">$299.00</span></td>
|
||||
<td><svg class="receipt-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></td>
|
||||
<td>May 8, 2026</td>
|
||||
<td><span class="status-pending">Pending</span></td>
|
||||
<td><div class="actions-cell"><button class="btn-approve">Approve</button><button class="btn-reject">Reject</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#059669;">LO</div><div><div class="emp-name">Lucas Oliveira</div><div class="emp-dept">Operations</div></div></div></td>
|
||||
<td><div class="expense-title">Marriott — Operations Summit</div><div class="expense-sub">3 nights accommodation</div></td>
|
||||
<td><span class="badge badge-teal">Accommodation</span></td>
|
||||
<td><span class="amount-cell">$780.00</span></td>
|
||||
<td><svg class="receipt-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></td>
|
||||
<td>Apr 20, 2026</td>
|
||||
<td><span class="status-reimbursed">Reimbursed</span></td>
|
||||
<td><div class="actions-cell"><button class="btn-view">View</button></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div style="padding:14px 20px;border-top:1px solid #F3F4F6;display:flex;justify-content:space-between;align-items:center;">
|
||||
<span style="font-size:13px;color:#6B7280;">Showing 1–8 of 42 claims</span>
|
||||
<div style="display:flex;gap:4px;">
|
||||
<button style="width:30px;height:30px;border-radius:6px;border:1.5px solid #E5E7EB;background:#FFFFFF;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg></button>
|
||||
<button style="width:30px;height:30px;border-radius:6px;border:1.5px solid #4F46E5;background:#4F46E5;color:#FFF;font-size:13px;font-weight:600;cursor:pointer;">1</button>
|
||||
<button style="width:30px;height:30px;border-radius:6px;border:1.5px solid #E5E7EB;background:#FFFFFF;font-size:13px;cursor:pointer;">2</button>
|
||||
<button style="width:30px;height:30px;border-radius:6px;border:1.5px solid #E5E7EB;background:#FFFFFF;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;"><svg width="12" height="12" 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>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,287 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Performance Reviews — HR Portal</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@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: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
|
||||
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
|
||||
.logo-icon svg { width: 16px; height: 16px; }
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
|
||||
.nav-item:hover { background: #F9FAFB; color: #111827; }
|
||||
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
|
||||
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
|
||||
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
|
||||
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
|
||||
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
|
||||
.user-role { font-size: 11px; color: #9CA3AF; }
|
||||
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
|
||||
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
|
||||
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
|
||||
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
|
||||
.breadcrumb span { color: #111827; font-weight: 500; }
|
||||
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
|
||||
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
|
||||
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
.content { padding: 28px; }
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
|
||||
.page-title { font-size: 22px; font-weight: 700; }
|
||||
.btn-primary { padding: 9px 18px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
|
||||
|
||||
/* ACTIVE CYCLE */
|
||||
.active-cycle {
|
||||
background: linear-gradient(135deg, #4F46E5 0%, #6D28D9 100%);
|
||||
border-radius: 12px; padding: 28px 32px;
|
||||
color: #FFF; margin-bottom: 24px;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
}
|
||||
.cycle-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.2); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; margin-bottom: 10px; }
|
||||
.cycle-title { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
|
||||
.cycle-sub { font-size: 14px; color: rgba(255,255,255,0.8); margin-bottom: 20px; }
|
||||
.progress-section {}
|
||||
.progress-label { display: flex; justify-content: space-between; margin-bottom: 6px; }
|
||||
.progress-text { font-size: 13px; color: rgba(255,255,255,0.8); }
|
||||
.progress-pct { font-size: 13px; font-weight: 700; color: #FFF; }
|
||||
.progress-bar { height: 8px; background: rgba(255,255,255,0.2); border-radius: 4px; width: 280px; overflow: hidden; }
|
||||
.progress-fill { height: 100%; background: #FFFFFF; border-radius: 4px; width: 68%; }
|
||||
.cycle-meta { margin-top: 12px; display: flex; gap: 20px; }
|
||||
.cycle-meta-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,0.8); }
|
||||
.cycle-meta-item svg { width: 14px; height: 14px; }
|
||||
.cycle-right { text-align: right; }
|
||||
.btn-view-cycle { padding: 10px 20px; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4); border-radius: 8px; color: #FFF; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
|
||||
.btn-view-cycle:hover { background: rgba(255,255,255,0.3); }
|
||||
.cycle-stats-mini { display: flex; gap: 20px; margin-top: 16px; }
|
||||
.cycle-stat-mini { text-align: center; }
|
||||
.cycle-stat-num { font-size: 22px; font-weight: 700; }
|
||||
.cycle-stat-label { font-size: 11px; color: rgba(255,255,255,0.7); margin-top: 2px; }
|
||||
|
||||
/* TABLE */
|
||||
.section-title { font-size: 16px; font-weight: 600; color: #111827; margin-bottom: 16px; }
|
||||
.table-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead { background: #F9FAFB; border-bottom: 1px solid #E5E7EB; }
|
||||
th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: #6B7280; text-align: left; text-transform: uppercase; letter-spacing: 0.4px; }
|
||||
tbody tr { border-bottom: 1px solid #F3F4F6; transition: background 0.1s; }
|
||||
tbody tr:last-child { border-bottom: none; }
|
||||
tbody tr:hover { background: #FAFAFA; }
|
||||
td { padding: 16px 16px; font-size: 14px; color: #374151; vertical-align: middle; }
|
||||
|
||||
.cycle-name { font-size: 14px; font-weight: 600; color: #111827; }
|
||||
.cycle-period { font-size: 12px; color: #9CA3AF; margin-top: 2px; }
|
||||
|
||||
.badge { padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-blue { background: #EFF6FF; color: #3B82F6; }
|
||||
.badge-yellow { background: #FFFBEB; color: #D97706; }
|
||||
.badge-gray { background: #F3F4F6; color: #6B7280; }
|
||||
|
||||
.progress-mini { width: 120px; height: 6px; background: #F3F4F6; border-radius: 3px; overflow: hidden; display: inline-block; margin-right: 6px; }
|
||||
.progress-mini-fill { height: 100%; background: #4F46E5; border-radius: 3px; }
|
||||
.progress-row { display: flex; align-items: center; }
|
||||
.progress-pct-mini { font-size: 12px; font-weight: 600; color: #374151; }
|
||||
|
||||
.btn-action { padding: 5px 12px; border: 1px solid #E5E7EB; border-radius: 5px; background: #FFFFFF; color: #374151; font-size: 12px; font-weight: 500; cursor: pointer; margin-right: 4px; }
|
||||
.btn-action:hover { border-color: #4F46E5; color: #4F46E5; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>HR Portal</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="04-admin-dashboard.html" class="nav-item"><svg 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 href="05-employee-directory.html" class="nav-item"><svg 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 href="08-department-management.html" class="nav-item"><svg 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>
|
||||
<a href="09-leave-requests.html" class="nav-item"><svg 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">7</span></a>
|
||||
<a href="11-attendance.html" class="nav-item"><svg 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 href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
|
||||
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
|
||||
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
|
||||
<a href="15-performance-reviews.html" class="nav-item active"><svg 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>Performance</a>
|
||||
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
|
||||
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
|
||||
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
|
||||
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
|
||||
<button class="logout-btn">Sign Out</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<header class="topnav">
|
||||
<div class="breadcrumb">
|
||||
<a href="04-admin-dashboard.html">Home</a>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
<span>Performance Reviews</span>
|
||||
</div>
|
||||
<div class="topnav-actions">
|
||||
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
|
||||
<div class="topnav-avatar">SC</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
<div class="page-header">
|
||||
<div class="page-title">Performance Reviews</div>
|
||||
<button class="btn-primary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" width="16" height="16"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
New Review Cycle
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ACTIVE CYCLE -->
|
||||
<div class="active-cycle">
|
||||
<div>
|
||||
<div class="cycle-badge">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||||
Active Cycle
|
||||
</div>
|
||||
<div class="cycle-title">Q1 2026 Annual Performance Review</div>
|
||||
<div class="cycle-sub">Self-assessments, peer reviews, and manager evaluations in progress</div>
|
||||
<div class="progress-section">
|
||||
<div class="progress-label">
|
||||
<span class="progress-text">Overall completion</span>
|
||||
<span class="progress-pct">68%</span>
|
||||
</div>
|
||||
<div class="progress-bar"><div class="progress-fill"></div></div>
|
||||
</div>
|
||||
<div class="cycle-meta">
|
||||
<div class="cycle-meta-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="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>
|
||||
Jan 1 – Mar 31, 2026
|
||||
</div>
|
||||
<div class="cycle-meta-item">
|
||||
<svg 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>
|
||||
Deadline: May 20, 2026
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cycle-right">
|
||||
<button class="btn-view-cycle">View Details</button>
|
||||
<div class="cycle-stats-mini">
|
||||
<div class="cycle-stat-mini">
|
||||
<div class="cycle-stat-num">168</div>
|
||||
<div class="cycle-stat-label">Completed</div>
|
||||
</div>
|
||||
<div class="cycle-stat-mini">
|
||||
<div class="cycle-stat-num">80</div>
|
||||
<div class="cycle-stat-label">Pending</div>
|
||||
</div>
|
||||
<div class="cycle-stat-mini">
|
||||
<div class="cycle-stat-num">248</div>
|
||||
<div class="cycle-stat-label">Total</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- REVIEW CYCLES TABLE -->
|
||||
<div class="section-title">All Review Cycles</div>
|
||||
<div class="table-card">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Cycle Name</th>
|
||||
<th>Period</th>
|
||||
<th>Type</th>
|
||||
<th>Status</th>
|
||||
<th>Completion</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cycle-name">Q1 2026 Annual Review</div>
|
||||
<div class="cycle-period">Includes self, peer, and manager review</div>
|
||||
</td>
|
||||
<td>Jan 1 – Mar 31, 2026</td>
|
||||
<td><span class="badge badge-blue">Annual</span></td>
|
||||
<td><span class="badge" style="background:#EEF2FF;color:#4F46E5;">In Progress</span></td>
|
||||
<td>
|
||||
<div class="progress-row">
|
||||
<div class="progress-mini"><div class="progress-mini-fill" style="width:68%;"></div></div>
|
||||
<span class="progress-pct-mini">68%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn-action">View</button>
|
||||
<button class="btn-action">Send Reminder</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cycle-name">Q4 2025 Annual Review</div>
|
||||
<div class="cycle-period">Full 360-degree review cycle</div>
|
||||
</td>
|
||||
<td>Oct 1 – Dec 31, 2025</td>
|
||||
<td><span class="badge badge-blue">Annual</span></td>
|
||||
<td><span class="badge badge-green">Completed</span></td>
|
||||
<td>
|
||||
<div class="progress-row">
|
||||
<div class="progress-mini"><div class="progress-mini-fill" style="width:100%;background:#10B981;"></div></div>
|
||||
<span class="progress-pct-mini">100%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn-action">View Results</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cycle-name">Mid-Year 2025 Review</div>
|
||||
<div class="cycle-period">Manager review only</div>
|
||||
</td>
|
||||
<td>Apr 1 – Jun 30, 2025</td>
|
||||
<td><span class="badge badge-yellow">Mid-Year</span></td>
|
||||
<td><span class="badge badge-green">Completed</span></td>
|
||||
<td>
|
||||
<div class="progress-row">
|
||||
<div class="progress-mini"><div class="progress-mini-fill" style="width:100%;background:#10B981;"></div></div>
|
||||
<span class="progress-pct-mini">100%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn-action">View Results</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cycle-name">Q2 2025 Annual Review</div>
|
||||
<div class="cycle-period">Self and manager review</div>
|
||||
</td>
|
||||
<td>Jan 1 – Mar 31, 2025</td>
|
||||
<td><span class="badge badge-blue">Annual</span></td>
|
||||
<td><span class="badge badge-green">Completed</span></td>
|
||||
<td>
|
||||
<div class="progress-row">
|
||||
<div class="progress-mini"><div class="progress-mini-fill" style="width:100%;background:#10B981;"></div></div>
|
||||
<span class="progress-pct-mini">100%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn-action">View Results</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,315 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Reports — HR Portal</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@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: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
|
||||
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
|
||||
.logo-icon svg { width: 16px; height: 16px; }
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
|
||||
.nav-item:hover { background: #F9FAFB; color: #111827; }
|
||||
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
|
||||
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
|
||||
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
|
||||
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
|
||||
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
|
||||
.user-role { font-size: 11px; color: #9CA3AF; }
|
||||
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
|
||||
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
|
||||
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
|
||||
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
|
||||
.breadcrumb span { color: #111827; font-weight: 500; }
|
||||
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
|
||||
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
|
||||
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
.content { padding: 28px; }
|
||||
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
|
||||
.page-title { font-size: 22px; font-weight: 700; }
|
||||
.date-range { display: flex; align-items: center; gap: 8px; }
|
||||
.date-input { padding: 8px 13px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 6px; font-size: 14px; color: #374151; outline: none; }
|
||||
.date-sep { font-size: 13px; color: #9CA3AF; }
|
||||
.btn-outline { padding: 8px 16px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; }
|
||||
.btn-primary { padding: 9px 18px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
|
||||
|
||||
.reports-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
||||
.report-card {
|
||||
background: #FFFFFF; border-radius: 12px; border: 1px solid #E5E7EB;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden;
|
||||
}
|
||||
.report-card-header { padding: 16px 20px; border-bottom: 1px solid #F3F4F6; display: flex; align-items: center; justify-content: space-between; }
|
||||
.report-title { font-size: 14px; font-weight: 600; color: #111827; }
|
||||
.report-export { font-size: 12px; color: #4F46E5; cursor: pointer; font-weight: 500; }
|
||||
.report-body { padding: 20px; }
|
||||
.report-stat { font-size: 26px; font-weight: 700; color: #111827; margin-bottom: 4px; }
|
||||
.report-stat-sub { font-size: 12px; color: #9CA3AF; margin-bottom: 16px; }
|
||||
|
||||
/* HEADCOUNT CHART (line mock) */
|
||||
.line-chart { position: relative; height: 80px; margin-bottom: 8px; }
|
||||
.line-chart svg { width: 100%; height: 100%; }
|
||||
.chart-labels { display: flex; justify-content: space-between; }
|
||||
.chart-label { font-size: 11px; color: #9CA3AF; }
|
||||
|
||||
/* LEAVE UTILIZATION BARS */
|
||||
.horiz-bar-item { margin-bottom: 10px; }
|
||||
.horiz-bar-top { display: flex; justify-content: space-between; margin-bottom: 3px; }
|
||||
.horiz-bar-label { font-size: 12px; color: #374151; }
|
||||
.horiz-bar-val { font-size: 12px; font-weight: 600; color: #111827; }
|
||||
.horiz-bar-track { height: 8px; background: #F3F4F6; border-radius: 4px; overflow: hidden; }
|
||||
.horiz-bar-fill { height: 100%; border-radius: 4px; }
|
||||
|
||||
/* ATTENDANCE AREA MOCK */
|
||||
.area-chart { height: 80px; position: relative; overflow: hidden; margin-bottom: 8px; }
|
||||
.area-chart svg { width: 100%; height: 100%; }
|
||||
|
||||
/* PAYROLL BARS */
|
||||
.bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 80px; margin-bottom: 8px; }
|
||||
.bar-item { flex: 1; display: flex; flex-direction: column; align-items: center; }
|
||||
.bar { width: 100%; border-radius: 4px 4px 0 0; }
|
||||
.bar-month { font-size: 10px; color: #9CA3AF; margin-top: 4px; }
|
||||
|
||||
/* DONUT CHART */
|
||||
.donut-container { display: flex; align-items: center; gap: 20px; }
|
||||
.donut { width: 80px; height: 80px; border-radius: 50%; flex-shrink: 0; }
|
||||
.donut-legend { flex: 1; }
|
||||
.donut-item { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
|
||||
.donut-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||||
.donut-label { font-size: 12px; color: #374151; }
|
||||
.donut-pct { font-size: 12px; font-weight: 600; color: #111827; margin-left: auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>HR Portal</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="04-admin-dashboard.html" class="nav-item"><svg 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 href="05-employee-directory.html" class="nav-item"><svg 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 href="08-department-management.html" class="nav-item"><svg 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>
|
||||
<a href="09-leave-requests.html" class="nav-item"><svg 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">7</span></a>
|
||||
<a href="11-attendance.html" class="nav-item"><svg 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 href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
|
||||
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
|
||||
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
|
||||
<a href="15-performance-reviews.html" class="nav-item"><svg 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>Performance</a>
|
||||
<a href="16-reports.html" class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
|
||||
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
|
||||
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
|
||||
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
|
||||
<button class="logout-btn">Sign Out</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<header class="topnav">
|
||||
<div class="breadcrumb">
|
||||
<a href="04-admin-dashboard.html">Home</a>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
<span>Reports & Analytics</span>
|
||||
</div>
|
||||
<div class="topnav-actions">
|
||||
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
|
||||
<div class="topnav-avatar">SC</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
<div class="page-header">
|
||||
<div class="page-title">Reports & Analytics</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;">
|
||||
<div class="date-range">
|
||||
<input class="date-input" type="date" value="2026-01-01">
|
||||
<span class="date-sep">to</span>
|
||||
<input class="date-input" type="date" value="2026-05-09">
|
||||
</div>
|
||||
<button class="btn-outline">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
Export All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reports-grid">
|
||||
|
||||
<!-- HEADCOUNT OVER TIME -->
|
||||
<div class="report-card">
|
||||
<div class="report-card-header">
|
||||
<span class="report-title">Headcount Over Time</span>
|
||||
<span class="report-export">Export CSV</span>
|
||||
</div>
|
||||
<div class="report-body">
|
||||
<div class="report-stat">248</div>
|
||||
<div class="report-stat-sub">Current headcount · <span style="color:#10B981;">+19 this year</span></div>
|
||||
<div class="line-chart">
|
||||
<svg viewBox="0 0 300 80" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="g1" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#4F46E5" stop-opacity="0.2"/>
|
||||
<stop offset="100%" stop-color="#4F46E5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M0,65 L50,60 L100,55 L150,50 L200,45 L250,38 L300,30" stroke="#4F46E5" stroke-width="2.5" fill="none"/>
|
||||
<path d="M0,65 L50,60 L100,55 L150,50 L200,45 L250,38 L300,30 L300,80 L0,80 Z" fill="url(#g1)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="chart-labels">
|
||||
<span class="chart-label">Jan</span>
|
||||
<span class="chart-label">Feb</span>
|
||||
<span class="chart-label">Mar</span>
|
||||
<span class="chart-label">Apr</span>
|
||||
<span class="chart-label">May</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LEAVE UTILIZATION -->
|
||||
<div class="report-card">
|
||||
<div class="report-card-header">
|
||||
<span class="report-title">Leave Utilization by Type</span>
|
||||
<span class="report-export">Export CSV</span>
|
||||
</div>
|
||||
<div class="report-body">
|
||||
<div class="report-stat">487</div>
|
||||
<div class="report-stat-sub">Total leave days taken YTD</div>
|
||||
<div class="horiz-bar-item">
|
||||
<div class="horiz-bar-top"><span class="horiz-bar-label">Annual Leave</span><span class="horiz-bar-val">248 days</span></div>
|
||||
<div class="horiz-bar-track"><div class="horiz-bar-fill" style="width:80%;background:#4F46E5;"></div></div>
|
||||
</div>
|
||||
<div class="horiz-bar-item">
|
||||
<div class="horiz-bar-top"><span class="horiz-bar-label">Sick Leave</span><span class="horiz-bar-val">142 days</span></div>
|
||||
<div class="horiz-bar-track"><div class="horiz-bar-fill" style="width:46%;background:#F59E0B;"></div></div>
|
||||
</div>
|
||||
<div class="horiz-bar-item">
|
||||
<div class="horiz-bar-top"><span class="horiz-bar-label">Casual Leave</span><span class="horiz-bar-val">68 days</span></div>
|
||||
<div class="horiz-bar-track"><div class="horiz-bar-fill" style="width:22%;background:#10B981;"></div></div>
|
||||
</div>
|
||||
<div class="horiz-bar-item">
|
||||
<div class="horiz-bar-top"><span class="horiz-bar-label">Other</span><span class="horiz-bar-val">29 days</span></div>
|
||||
<div class="horiz-bar-track"><div class="horiz-bar-fill" style="width:10%;background:#9CA3AF;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ATTENDANCE RATE -->
|
||||
<div class="report-card">
|
||||
<div class="report-card-header">
|
||||
<span class="report-title">Attendance Rate Trend</span>
|
||||
<span class="report-export">Export CSV</span>
|
||||
</div>
|
||||
<div class="report-body">
|
||||
<div class="report-stat">94.6%</div>
|
||||
<div class="report-stat-sub">Average attendance rate YTD</div>
|
||||
<div class="area-chart">
|
||||
<svg viewBox="0 0 300 80" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="g2" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#10B981" stop-opacity="0.25"/>
|
||||
<stop offset="100%" stop-color="#10B981" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M0,25 L50,20 L100,30 L150,18 L200,22 L250,15 L300,20" stroke="#10B981" stroke-width="2.5" fill="none"/>
|
||||
<path d="M0,25 L50,20 L100,30 L150,18 L200,22 L250,15 L300,20 L300,80 L0,80 Z" fill="url(#g2)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="chart-labels">
|
||||
<span class="chart-label">Jan</span>
|
||||
<span class="chart-label">Feb</span>
|
||||
<span class="chart-label">Mar</span>
|
||||
<span class="chart-label">Apr</span>
|
||||
<span class="chart-label">May</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAYROLL BY MONTH -->
|
||||
<div class="report-card">
|
||||
<div class="report-card-header">
|
||||
<span class="report-title">Payroll by Month</span>
|
||||
<span class="report-export">Export CSV</span>
|
||||
</div>
|
||||
<div class="report-body">
|
||||
<div class="report-stat">$1.18M</div>
|
||||
<div class="report-stat-sub">Total payroll YTD (net)</div>
|
||||
<div class="bar-chart">
|
||||
<div class="bar-item"><div class="bar" style="height:55px;background:#EEF2FF;"></div><div class="bar-month" style="color:#4F46E5;">Jan</div></div>
|
||||
<div class="bar-item"><div class="bar" style="height:57px;background:#EEF2FF;"></div><div class="bar-month" style="color:#4F46E5;">Feb</div></div>
|
||||
<div class="bar-item"><div class="bar" style="height:60px;background:#EEF2FF;"></div><div class="bar-month" style="color:#4F46E5;">Mar</div></div>
|
||||
<div class="bar-item"><div class="bar" style="height:63px;background:#EEF2FF;"></div><div class="bar-month" style="color:#4F46E5;">Apr</div></div>
|
||||
<div class="bar-item"><div class="bar" style="height:66px;background:#4F46E5;"></div><div class="bar-month" style="color:#4F46E5;font-weight:600;">May</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DEPARTMENT BREAKDOWN -->
|
||||
<div class="report-card">
|
||||
<div class="report-card-header">
|
||||
<span class="report-title">Department Breakdown</span>
|
||||
<span class="report-export">Export CSV</span>
|
||||
</div>
|
||||
<div class="report-body">
|
||||
<div class="report-stat">6</div>
|
||||
<div class="report-stat-sub">Active departments</div>
|
||||
<div class="donut-container">
|
||||
<div class="donut" style="background: conic-gradient(#4F46E5 0% 32%, #10B981 32% 54%, #7C3AED 54% 71%, #F59E0B 54% 84%, #3B82F6 84% 95%, #EF4444 95% 100%);"></div>
|
||||
<div class="donut-legend">
|
||||
<div class="donut-item"><div class="donut-dot" style="background:#4F46E5;"></div><span class="donut-label">Engineering</span><span class="donut-pct">32%</span></div>
|
||||
<div class="donut-item"><div class="donut-dot" style="background:#10B981;"></div><span class="donut-label">Operations</span><span class="donut-pct">22%</span></div>
|
||||
<div class="donut-item"><div class="donut-dot" style="background:#7C3AED;"></div><span class="donut-label">Sales</span><span class="donut-pct">17%</span></div>
|
||||
<div class="donut-item"><div class="donut-dot" style="background:#F59E0B;"></div><span class="donut-label">Marketing</span><span class="donut-pct">13%</span></div>
|
||||
<div class="donut-item"><div class="donut-dot" style="background:#3B82F6;"></div><span class="donut-label">Finance</span><span class="donut-pct">11%</span></div>
|
||||
<div class="donut-item"><div class="donut-dot" style="background:#EF4444;"></div><span class="donut-label">HR</span><span class="donut-pct">5%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EXPENSE CLAIMS -->
|
||||
<div class="report-card">
|
||||
<div class="report-card-header">
|
||||
<span class="report-title">Expense Claims by Category</span>
|
||||
<span class="report-export">Export CSV</span>
|
||||
</div>
|
||||
<div class="report-body">
|
||||
<div class="report-stat">$28,430</div>
|
||||
<div class="report-stat-sub">Total claims YTD · 84 claims</div>
|
||||
<div class="horiz-bar-item">
|
||||
<div class="horiz-bar-top"><span class="horiz-bar-label">Travel</span><span class="horiz-bar-val">$12,800</span></div>
|
||||
<div class="horiz-bar-track"><div class="horiz-bar-fill" style="width:75%;background:#3B82F6;"></div></div>
|
||||
</div>
|
||||
<div class="horiz-bar-item">
|
||||
<div class="horiz-bar-top"><span class="horiz-bar-label">Equipment</span><span class="horiz-bar-val">$8,400</span></div>
|
||||
<div class="horiz-bar-track"><div class="horiz-bar-fill" style="width:49%;background:#7C3AED;"></div></div>
|
||||
</div>
|
||||
<div class="horiz-bar-item">
|
||||
<div class="horiz-bar-top"><span class="horiz-bar-label">Accommodation</span><span class="horiz-bar-val">$4,600</span></div>
|
||||
<div class="horiz-bar-track"><div class="horiz-bar-fill" style="width:27%;background:#0D9488;"></div></div>
|
||||
</div>
|
||||
<div class="horiz-bar-item">
|
||||
<div class="horiz-bar-top"><span class="horiz-bar-label">Meals</span><span class="horiz-bar-val">$2,630</span></div>
|
||||
<div class="horiz-bar-track"><div class="horiz-bar-fill" style="width:15%;background:#F59E0B;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,281 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Settings — HR Portal</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@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: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
|
||||
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
|
||||
.logo-icon svg { width: 16px; height: 16px; }
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
|
||||
.nav-item:hover { background: #F9FAFB; color: #111827; }
|
||||
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
|
||||
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
|
||||
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
|
||||
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
|
||||
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
|
||||
.user-role { font-size: 11px; color: #9CA3AF; }
|
||||
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
|
||||
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
|
||||
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
|
||||
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
|
||||
.breadcrumb span { color: #111827; font-weight: 500; }
|
||||
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
|
||||
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
|
||||
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
.content { padding: 0; }
|
||||
|
||||
/* SETTINGS LAYOUT */
|
||||
.settings-layout { display: flex; min-height: calc(100vh - 64px); }
|
||||
.settings-subnav { width: 220px; background: #FFFFFF; border-right: 1px solid #E5E7EB; padding: 20px 0; flex-shrink: 0; }
|
||||
.subnav-title { font-size: 11px; font-weight: 600; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.5px; padding: 0 16px 8px; }
|
||||
.subnav-item { display: flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: 14px; font-weight: 500; color: #6B7280; cursor: pointer; transition: all 0.15s; }
|
||||
.subnav-item:hover { background: #F9FAFB; color: #111827; }
|
||||
.subnav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
|
||||
.subnav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
.settings-content { flex: 1; padding: 28px; max-width: 700px; }
|
||||
|
||||
.settings-section { margin-bottom: 28px; }
|
||||
.section-header { margin-bottom: 20px; }
|
||||
.section-title { font-size: 16px; font-weight: 600; color: #111827; margin-bottom: 4px; }
|
||||
.section-sub { font-size: 13px; color: #9CA3AF; }
|
||||
|
||||
.card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; margin-bottom: 16px; }
|
||||
.card-header-row { padding: 16px 20px; border-bottom: 1px solid #F3F4F6; }
|
||||
.card-title { font-size: 14px; font-weight: 600; color: #111827; }
|
||||
.card-sub { font-size: 12px; color: #9CA3AF; margin-top: 2px; }
|
||||
.card-body { padding: 20px; }
|
||||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
.form-group { }
|
||||
.form-label { display: block; font-size: 13px; font-weight: 500; color: #374151; margin-bottom: 6px; }
|
||||
.form-input, .form-select { width: 100%; padding: 9px 13px; border: 1.5px solid #E5E7EB; border-radius: 6px; font-size: 14px; font-family: 'Inter', sans-serif; color: #111827; background: #FFFFFF; outline: none; transition: border-color 0.15s; appearance: none; }
|
||||
.form-input:focus, .form-select:focus { border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.08); }
|
||||
.col-span-2 { grid-column: 1 / -1; }
|
||||
|
||||
/* LOGO UPLOAD */
|
||||
.logo-upload { border: 2px dashed #E5E7EB; border-radius: 8px; padding: 24px; text-align: center; cursor: pointer; transition: all 0.15s; }
|
||||
.logo-upload:hover { border-color: #4F46E5; background: #FAFAFA; }
|
||||
.logo-preview { width: 64px; height: 64px; background: #4F46E5; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: #FFF; font-size: 20px; font-weight: 700; }
|
||||
.logo-upload-hint { font-size: 13px; color: #6B7280; margin-bottom: 4px; }
|
||||
.logo-upload-sub { font-size: 12px; color: #9CA3AF; }
|
||||
.btn-upload { display: inline-flex; padding: 6px 14px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 13px; cursor: pointer; margin-top: 8px; }
|
||||
|
||||
/* WORK HOURS */
|
||||
.work-days { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
|
||||
.day-toggle { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1.5px solid #E5E7EB; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; color: #374151; transition: all 0.15s; }
|
||||
.day-toggle input[type="checkbox"] { accent-color: #4F46E5; }
|
||||
.day-toggle.active { border-color: #4F46E5; background: #EEF2FF; color: #4F46E5; }
|
||||
|
||||
/* SAVE BUTTON */
|
||||
.btn-save { padding: 10px 24px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
|
||||
.btn-save:hover { background: #4338CA; }
|
||||
.btn-cancel { padding: 10px 18px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 14px; cursor: pointer; margin-right: 8px; }
|
||||
|
||||
.page-header { font-size: 22px; font-weight: 700; padding: 28px 28px 0; margin-bottom: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>HR Portal</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="04-admin-dashboard.html" class="nav-item"><svg 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 href="05-employee-directory.html" class="nav-item"><svg 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 href="08-department-management.html" class="nav-item"><svg 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>
|
||||
<a href="09-leave-requests.html" class="nav-item"><svg 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">7</span></a>
|
||||
<a href="11-attendance.html" class="nav-item"><svg 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 href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
|
||||
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
|
||||
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
|
||||
<a href="15-performance-reviews.html" class="nav-item"><svg 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>Performance</a>
|
||||
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
|
||||
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
|
||||
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
|
||||
<a href="17-settings.html" class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
|
||||
<button class="logout-btn">Sign Out</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<header class="topnav">
|
||||
<div class="breadcrumb">
|
||||
<a href="04-admin-dashboard.html">Home</a>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
<span>Settings</span>
|
||||
</div>
|
||||
<div class="topnav-actions">
|
||||
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
|
||||
<div class="topnav-avatar">SC</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-header">Settings</div>
|
||||
<div class="settings-layout">
|
||||
<!-- SETTINGS SUB-NAV -->
|
||||
<div class="settings-subnav">
|
||||
<div class="subnav-title">General</div>
|
||||
<div class="subnav-item active">
|
||||
<svg 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>
|
||||
Company Profile
|
||||
</div>
|
||||
<div class="subnav-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="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 Settings
|
||||
</div>
|
||||
<div class="subnav-item">
|
||||
<svg 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>
|
||||
Work Hours
|
||||
</div>
|
||||
<div class="subnav-title" style="margin-top:16px;">System</div>
|
||||
<div class="subnav-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg>
|
||||
Notifications
|
||||
</div>
|
||||
<div class="subnav-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
|
||||
Integrations
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SETTINGS CONTENT -->
|
||||
<div class="settings-content">
|
||||
<div class="settings-section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Company Profile</div>
|
||||
<div class="section-sub">Update your company information and branding</div>
|
||||
</div>
|
||||
|
||||
<!-- LOGO UPLOAD -->
|
||||
<div class="card">
|
||||
<div class="card-header-row">
|
||||
<div class="card-title">Company Logo</div>
|
||||
<div class="card-sub">Appears on payslips, emails, and the employee portal</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="logo-upload">
|
||||
<div class="logo-preview">TF</div>
|
||||
<div class="logo-upload-hint">Drag and drop your logo here, or click to browse</div>
|
||||
<div class="logo-upload-sub">PNG, JPG, or SVG. Max 2MB. Recommended: 200×200px</div>
|
||||
<button class="btn-upload">Upload Logo</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- COMPANY INFO -->
|
||||
<div class="card">
|
||||
<div class="card-header-row">
|
||||
<div class="card-title">Company Information</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-grid">
|
||||
<div class="form-group col-span-2">
|
||||
<label class="form-label">Company Name</label>
|
||||
<input class="form-input" type="text" value="TechFlow Inc.">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Industry</label>
|
||||
<select class="form-select">
|
||||
<option selected>Technology</option>
|
||||
<option>Finance</option>
|
||||
<option>Healthcare</option>
|
||||
<option>Manufacturing</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Company Size</label>
|
||||
<select class="form-select">
|
||||
<option>1–10</option>
|
||||
<option>11–50</option>
|
||||
<option selected>51–200</option>
|
||||
<option>201–500</option>
|
||||
<option>500+</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Country</label>
|
||||
<select class="form-select">
|
||||
<option selected>United States</option>
|
||||
<option>United Kingdom</option>
|
||||
<option>India</option>
|
||||
<option>Canada</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Timezone</label>
|
||||
<select class="form-select">
|
||||
<option selected>PST (UTC-8)</option>
|
||||
<option>EST (UTC-5)</option>
|
||||
<option>IST (UTC+5:30)</option>
|
||||
<option>GMT (UTC+0)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Phone</label>
|
||||
<input class="form-input" type="tel" value="+1 (415) 555-0100">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Website</label>
|
||||
<input class="form-input" type="url" value="https://techflow.com">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- WORK HOURS -->
|
||||
<div class="card">
|
||||
<div class="card-header-row">
|
||||
<div class="card-title">Default Work Hours</div>
|
||||
<div class="card-sub">Standard working days and hours for attendance tracking</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div style="font-size:13px;font-weight:500;color:#374151;margin-bottom:10px;">Working Days</div>
|
||||
<div class="work-days">
|
||||
<label class="day-toggle active"><input type="checkbox" checked> Mon</label>
|
||||
<label class="day-toggle active"><input type="checkbox" checked> Tue</label>
|
||||
<label class="day-toggle active"><input type="checkbox" checked> Wed</label>
|
||||
<label class="day-toggle active"><input type="checkbox" checked> Thu</label>
|
||||
<label class="day-toggle active"><input type="checkbox" checked> Fri</label>
|
||||
<label class="day-toggle"><input type="checkbox"> Sat</label>
|
||||
<label class="day-toggle"><input type="checkbox"> Sun</label>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Work Start Time</label>
|
||||
<input class="form-input" type="time" value="09:00">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Work End Time</label>
|
||||
<input class="form-input" type="time" value="18:00">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;justify-content:flex-end;margin-top:8px;">
|
||||
<button class="btn-cancel">Discard Changes</button>
|
||||
<button class="btn-save">Save Settings</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,336 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>My Dashboard — HR Portal</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@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: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
|
||||
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
|
||||
.logo-icon svg { width: 16px; height: 16px; }
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
|
||||
.nav-item:hover { background: #F9FAFB; color: #111827; }
|
||||
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
|
||||
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
|
||||
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #10B981; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
|
||||
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
|
||||
.user-role { font-size: 11px; color: #9CA3AF; }
|
||||
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
|
||||
.topnav-name { font-size: 14px; font-weight: 500; color: #374151; }
|
||||
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
|
||||
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
|
||||
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #10B981; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
.content { padding: 28px; }
|
||||
|
||||
/* WELCOME */
|
||||
.welcome { background: linear-gradient(135deg, #10B981 0%, #059669 100%); border-radius: 12px; padding: 24px 28px; color: #FFF; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.welcome-title { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
|
||||
.welcome-sub { font-size: 14px; color: rgba(255,255,255,0.8); }
|
||||
.checkin-btn { padding: 10px 22px; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4); border-radius: 8px; color: #FFF; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; }
|
||||
.checkin-btn svg { width: 16px; height: 16px; }
|
||||
|
||||
/* QUICK ACTIONS */
|
||||
.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
|
||||
.quick-action { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 16px 20px; cursor: pointer; transition: all 0.15s; text-align: center; text-decoration: none; }
|
||||
.quick-action:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); transform: translateY(-2px); border-color: #C7D2FE; }
|
||||
.qa-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
|
||||
.qa-icon svg { width: 20px; height: 20px; }
|
||||
.qa-label { font-size: 13px; font-weight: 500; color: #374151; }
|
||||
|
||||
/* TWO COL */
|
||||
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
|
||||
.card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.card-header-row { padding: 14px 18px; border-bottom: 1px solid #F3F4F6; display: flex; align-items: center; justify-content: space-between; }
|
||||
.card-title { font-size: 14px; font-weight: 600; color: #111827; }
|
||||
.card-action { font-size: 12px; color: #4F46E5; cursor: pointer; font-weight: 500; text-decoration: none; }
|
||||
|
||||
/* LEAVE BALANCE */
|
||||
.lb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; }
|
||||
.lb-item { background: #F9FAFB; border-radius: 8px; padding: 12px; text-align: center; }
|
||||
.lb-val { font-size: 22px; font-weight: 700; color: #111827; }
|
||||
.lb-type { font-size: 11px; color: #9CA3AF; margin-top: 2px; }
|
||||
.lb-sub { font-size: 11px; margin-top: 6px; }
|
||||
|
||||
/* MINI TABLE */
|
||||
.mini-table { width: 100%; border-collapse: collapse; }
|
||||
.mini-table th { padding: 8px 16px; font-size: 11px; font-weight: 600; color: #9CA3AF; text-align: left; text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid #F3F4F6; }
|
||||
.mini-table td { padding: 10px 16px; font-size: 13px; color: #374151; border-bottom: 1px solid #F9FAFB; }
|
||||
.mini-table tr:last-child td { border-bottom: none; }
|
||||
.badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-yellow { background: #FFFBEB; color: #D97706; }
|
||||
.badge-red { background: #FEF2F2; color: #DC2626; }
|
||||
.badge-blue { background: #EFF6FF; color: #3B82F6; }
|
||||
|
||||
/* ATTENDANCE MINI CALENDAR */
|
||||
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 14px; }
|
||||
.cal-day-label { font-size: 10px; font-weight: 600; color: #9CA3AF; text-align: center; padding: 4px; text-transform: uppercase; }
|
||||
.cal-day { height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 5px; font-size: 12px; font-weight: 500; }
|
||||
.cal-day.empty { }
|
||||
.cal-day.present { background: #ECFDF5; color: #059669; }
|
||||
.cal-day.leave { background: #EFF6FF; color: #3B82F6; }
|
||||
.cal-day.absent { background: #FEF2F2; color: #DC2626; }
|
||||
.cal-day.today { background: #4F46E5; color: #FFF; font-weight: 700; }
|
||||
.cal-day.future { color: #D1D5DB; }
|
||||
|
||||
/* PAYSLIP CARD */
|
||||
.payslip-card { padding: 16px 18px; }
|
||||
.payslip-month { font-size: 13px; color: #9CA3AF; margin-bottom: 4px; }
|
||||
.payslip-amount { font-size: 28px; font-weight: 700; color: #111827; margin-bottom: 4px; }
|
||||
.payslip-net { font-size: 12px; color: #9CA3AF; margin-bottom: 14px; }
|
||||
.payslip-breakdown { display: flex; gap: 16px; margin-bottom: 16px; }
|
||||
.payslip-item {}
|
||||
.payslip-item-label { font-size: 11px; color: #9CA3AF; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
|
||||
.payslip-item-val { font-size: 14px; font-weight: 600; color: #374151; margin-top: 2px; }
|
||||
.btn-download { width: 100%; padding: 9px; background: #EEF2FF; color: #4F46E5; border: 1.5px solid #C7D2FE; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s; }
|
||||
.btn-download:hover { background: #4F46E5; color: #FFF; }
|
||||
|
||||
/* ANNOUNCEMENTS */
|
||||
.announce-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.announce-item { padding: 14px 18px; border-bottom: 1px solid #F9FAFB; }
|
||||
.announce-item:last-child { border-bottom: none; }
|
||||
.announce-badge { display: inline-block; background: #EEF2FF; color: #4F46E5; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 3px; text-transform: uppercase; margin-bottom: 6px; }
|
||||
.announce-title { font-size: 13px; font-weight: 600; color: #111827; margin-bottom: 3px; }
|
||||
.announce-body { font-size: 12px; color: #6B7280; line-height: 1.5; }
|
||||
.announce-time { font-size: 11px; color: #9CA3AF; margin-top: 6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>HR Portal</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="18-employee-dashboard.html" class="nav-item active"><svg 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>My Dashboard</a>
|
||||
<a href="19-my-leave.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>My Leave</a>
|
||||
<a href="#" class="nav-item"><svg 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>My Attendance</a>
|
||||
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>My Payslips</a>
|
||||
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
|
||||
<a href="06-employee-profile.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>My Profile</a>
|
||||
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-row">
|
||||
<div class="user-avatar">JD</div>
|
||||
<div><div class="user-name">John Davis</div><div class="user-role">Software Engineer</div></div>
|
||||
</div>
|
||||
<button class="logout-btn">Sign Out</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<header class="topnav">
|
||||
<span class="topnav-name">Employee Portal</span>
|
||||
<div class="topnav-actions">
|
||||
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">2</span></div>
|
||||
<div class="topnav-avatar">JD</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
<!-- WELCOME -->
|
||||
<div class="welcome">
|
||||
<div>
|
||||
<div class="welcome-title">Good morning, John! Ready for the day?</div>
|
||||
<div class="welcome-sub">Friday, May 9, 2026 · You haven't checked in yet today</div>
|
||||
</div>
|
||||
<button class="checkin-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
Check In Now
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- QUICK ACTIONS -->
|
||||
<div class="quick-actions">
|
||||
<a href="19-my-leave.html" class="quick-action">
|
||||
<div class="qa-icon" style="background:#EEF2FF;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#4F46E5" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
</div>
|
||||
<div class="qa-label">Request Leave</div>
|
||||
</a>
|
||||
<div class="quick-action">
|
||||
<div class="qa-icon" style="background:#ECFDF5;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
</div>
|
||||
<div class="qa-label">Check In</div>
|
||||
</div>
|
||||
<div class="quick-action">
|
||||
<div class="qa-icon" style="background:#FFFBEB;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
|
||||
</div>
|
||||
<div class="qa-label">View Payslips</div>
|
||||
</div>
|
||||
<a href="06-employee-profile.html" class="quick-action">
|
||||
<div class="qa-icon" style="background:#F5F3FF;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#7C3AED" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
</div>
|
||||
<div class="qa-label">My Profile</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- TWO COL -->
|
||||
<div class="two-col">
|
||||
<!-- LEFT -->
|
||||
<div>
|
||||
<!-- LEAVE BALANCE -->
|
||||
<div class="card" style="margin-bottom:16px;">
|
||||
<div class="card-header-row">
|
||||
<span class="card-title">Leave Balance</span>
|
||||
<a href="19-my-leave.html" class="card-action">View all</a>
|
||||
</div>
|
||||
<div class="lb-grid">
|
||||
<div class="lb-item">
|
||||
<div class="lb-val" style="color:#4F46E5;">14</div>
|
||||
<div class="lb-type">Annual</div>
|
||||
<div class="lb-sub" style="color:#9CA3AF;">of 20 days</div>
|
||||
</div>
|
||||
<div class="lb-item">
|
||||
<div class="lb-val" style="color:#F59E0B;">8</div>
|
||||
<div class="lb-type">Sick</div>
|
||||
<div class="lb-sub" style="color:#9CA3AF;">of 10 days</div>
|
||||
</div>
|
||||
<div class="lb-item">
|
||||
<div class="lb-val" style="color:#10B981;">3</div>
|
||||
<div class="lb-type">Casual</div>
|
||||
<div class="lb-sub" style="color:#9CA3AF;">of 5 days</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- RECENT LEAVE REQUESTS -->
|
||||
<div class="card">
|
||||
<div class="card-header-row">
|
||||
<span class="card-title">My Leave Requests</span>
|
||||
<a href="19-my-leave.html" class="card-action">View all</a>
|
||||
</div>
|
||||
<table class="mini-table">
|
||||
<thead><tr><th>Type</th><th>Dates</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Annual</td>
|
||||
<td style="font-size:12px;">Apr 7–11</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sick</td>
|
||||
<td style="font-size:12px;">Mar 22</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Annual</td>
|
||||
<td style="font-size:12px;">May 26–28</td>
|
||||
<td><span class="badge badge-yellow">Pending</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT -->
|
||||
<div>
|
||||
<!-- ATTENDANCE MINI CALENDAR -->
|
||||
<div class="card" style="margin-bottom:16px;">
|
||||
<div class="card-header-row">
|
||||
<span class="card-title">May 2026 Attendance</span>
|
||||
<span class="card-action">Full view</span>
|
||||
</div>
|
||||
<div class="cal-grid">
|
||||
<div class="cal-day-label">S</div><div class="cal-day-label">M</div><div class="cal-day-label">T</div><div class="cal-day-label">W</div><div class="cal-day-label">T</div><div class="cal-day-label">F</div><div class="cal-day-label">S</div>
|
||||
<div class="cal-day empty"></div>
|
||||
<div class="cal-day empty"></div>
|
||||
<div class="cal-day empty"></div>
|
||||
<div class="cal-day empty"></div>
|
||||
<div class="cal-day empty"></div>
|
||||
<div class="cal-day present">1</div>
|
||||
<div class="cal-day future">2</div>
|
||||
<div class="cal-day future">3</div>
|
||||
<div class="cal-day present">4</div>
|
||||
<div class="cal-day present">5</div>
|
||||
<div class="cal-day present">6</div>
|
||||
<div class="cal-day present">7</div>
|
||||
<div class="cal-day present">8</div>
|
||||
<div class="cal-day today">9</div>
|
||||
<div class="cal-day future">10</div>
|
||||
<div class="cal-day future">11</div>
|
||||
<div class="cal-day future">12</div>
|
||||
<div class="cal-day future">13</div>
|
||||
<div class="cal-day future">14</div>
|
||||
<div class="cal-day future">15</div>
|
||||
<div class="cal-day future">16</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;padding:0 14px 12px;font-size:11px;color:#9CA3AF;">
|
||||
<span style="display:flex;align-items:center;gap:4px;"><span style="width:8px;height:8px;border-radius:2px;background:#ECFDF5;display:inline-block;"></span>Present</span>
|
||||
<span style="display:flex;align-items:center;gap:4px;"><span style="width:8px;height:8px;border-radius:2px;background:#EFF6FF;display:inline-block;"></span>Leave</span>
|
||||
<span style="display:flex;align-items:center;gap:4px;"><span style="width:8px;height:8px;border-radius:2px;background:#4F46E5;display:inline-block;"></span>Today</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- LATEST PAYSLIP -->
|
||||
<div class="card">
|
||||
<div class="card-header-row">
|
||||
<span class="card-title">Latest Payslip</span>
|
||||
</div>
|
||||
<div class="payslip-card">
|
||||
<div class="payslip-month">May 2026</div>
|
||||
<div class="payslip-amount">$4,200.00</div>
|
||||
<div class="payslip-net">Net pay after deductions</div>
|
||||
<div class="payslip-breakdown">
|
||||
<div class="payslip-item">
|
||||
<div class="payslip-item-label">Gross</div>
|
||||
<div class="payslip-item-val">$5,000</div>
|
||||
</div>
|
||||
<div class="payslip-item">
|
||||
<div class="payslip-item-label">Tax</div>
|
||||
<div class="payslip-item-val">-$620</div>
|
||||
</div>
|
||||
<div class="payslip-item">
|
||||
<div class="payslip-item-label">Benefits</div>
|
||||
<div class="payslip-item-val">-$180</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-download">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
Download PDF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ANNOUNCEMENTS -->
|
||||
<div class="card-header-row" style="margin-bottom:12px;padding:0;">
|
||||
<span style="font-size:16px;font-weight:600;color:#111827;">Announcements</span>
|
||||
</div>
|
||||
<div class="announce-card">
|
||||
<div class="announce-item">
|
||||
<div class="announce-badge">Company</div>
|
||||
<div class="announce-title">Q2 Performance Reviews Starting May 15</div>
|
||||
<div class="announce-body">Self-assessments open May 10. Please complete your self-review by May 18 and peer reviews by May 20.</div>
|
||||
<div class="announce-time">2 days ago</div>
|
||||
</div>
|
||||
<div class="announce-item">
|
||||
<div class="announce-badge">Policy</div>
|
||||
<div class="announce-title">Updated Remote Work Policy Effective June 1</div>
|
||||
<div class="announce-body">Employees may work remotely up to 3 days per week with manager approval. Full details in the HR handbook.</div>
|
||||
<div class="announce-time">May 7, 2026</div>
|
||||
</div>
|
||||
<div class="announce-item">
|
||||
<div class="announce-badge">Benefits</div>
|
||||
<div class="announce-title">Open Enrollment for Health Benefits — Closes May 31</div>
|
||||
<div class="announce-body">Annual open enrollment is now open. Review your options and make changes in the benefits portal before the deadline.</div>
|
||||
<div class="announce-time">May 1, 2026</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,261 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>My Leave — HR Portal</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@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: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
|
||||
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
|
||||
.logo-icon svg { width: 16px; height: 16px; }
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
|
||||
.nav-item:hover { background: #F9FAFB; color: #111827; }
|
||||
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
|
||||
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
|
||||
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #10B981; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
|
||||
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
|
||||
.user-role { font-size: 11px; color: #9CA3AF; }
|
||||
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
|
||||
.topnav-name { font-size: 14px; font-weight: 500; color: #374151; }
|
||||
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
|
||||
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
|
||||
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #10B981; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
.content { padding: 28px; }
|
||||
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
|
||||
.page-title { font-size: 22px; font-weight: 700; }
|
||||
.btn-primary { padding: 9px 18px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
|
||||
.btn-primary svg { width: 16px; height: 16px; }
|
||||
|
||||
/* BALANCE CARDS */
|
||||
.balance-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
|
||||
.balance-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 20px; }
|
||||
.bc-type { font-size: 12px; color: #9CA3AF; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
|
||||
.bc-available { font-size: 32px; font-weight: 800; color: #111827; margin-bottom: 2px; }
|
||||
.bc-sub { font-size: 13px; color: #9CA3AF; margin-bottom: 12px; }
|
||||
.bc-bar { height: 6px; background: #F3F4F6; border-radius: 3px; overflow: hidden; }
|
||||
.bc-fill { height: 100%; border-radius: 3px; }
|
||||
|
||||
/* REQUEST FORM */
|
||||
.request-form-card { background: #FFFFFF; border-radius: 10px; border: 1.5px solid #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.08); margin-bottom: 24px; overflow: hidden; }
|
||||
.form-card-header { padding: 16px 20px; background: #EEF2FF; border-bottom: 1px solid #C7D2FE; display: flex; align-items: center; justify-content: space-between; }
|
||||
.form-card-title { font-size: 15px; font-weight: 600; color: #4F46E5; }
|
||||
.form-close { color: #9CA3AF; cursor: pointer; }
|
||||
.request-form { padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
.form-group {}
|
||||
.form-label { display: block; font-size: 13px; font-weight: 500; color: #374151; margin-bottom: 6px; }
|
||||
.form-input, .form-select, .form-textarea {
|
||||
width: 100%; padding: 9px 13px; border: 1.5px solid #E5E7EB; border-radius: 6px;
|
||||
font-size: 14px; font-family: 'Inter', sans-serif; color: #111827;
|
||||
background: #FFFFFF; outline: none; appearance: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.08); }
|
||||
.form-textarea { min-height: 70px; resize: vertical; }
|
||||
.col-span-2 { grid-column: 1 / -1; }
|
||||
.days-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: #EEF2FF; color: #4F46E5; border-radius: 6px; font-size: 14px; font-weight: 600; }
|
||||
.form-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
|
||||
.btn-cancel { padding: 9px 18px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 14px; cursor: pointer; }
|
||||
.btn-submit { padding: 9px 20px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; }
|
||||
.btn-submit:hover { background: #4338CA; }
|
||||
|
||||
/* HISTORY TABLE */
|
||||
.table-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.table-card-header { padding: 16px 20px; border-bottom: 1px solid #F3F4F6; }
|
||||
.table-card-title { font-size: 15px; font-weight: 600; color: #111827; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead { background: #F9FAFB; border-bottom: 1px solid #E5E7EB; }
|
||||
th { padding: 11px 16px; font-size: 12px; font-weight: 600; color: #6B7280; text-align: left; text-transform: uppercase; letter-spacing: 0.4px; }
|
||||
tbody tr { border-bottom: 1px solid #F3F4F6; transition: background 0.1s; }
|
||||
tbody tr:last-child { border-bottom: none; }
|
||||
tbody tr:hover { background: #FAFAFA; }
|
||||
td { padding: 13px 16px; font-size: 14px; color: #374151; vertical-align: middle; }
|
||||
.badge { padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.badge-blue { background: #EFF6FF; color: #3B82F6; }
|
||||
.badge-orange { background: #FFF7ED; color: #EA580C; }
|
||||
.badge-purple { background: #F5F3FF; color: #7C3AED; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-yellow { background: #FFFBEB; color: #D97706; }
|
||||
.badge-red { background: #FEF2F2; color: #DC2626; }
|
||||
.reason-text { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: #9CA3AF; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>HR Portal</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="18-employee-dashboard.html" class="nav-item"><svg 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>My Dashboard</a>
|
||||
<a href="19-my-leave.html" class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>My Leave</a>
|
||||
<a href="#" class="nav-item"><svg 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>My Attendance</a>
|
||||
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>My Payslips</a>
|
||||
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
|
||||
<a href="06-employee-profile.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>My Profile</a>
|
||||
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-row"><div class="user-avatar">JD</div><div><div class="user-name">John Davis</div><div class="user-role">Software Engineer</div></div></div>
|
||||
<button class="logout-btn">Sign Out</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<header class="topnav">
|
||||
<span class="topnav-name">Employee Portal</span>
|
||||
<div class="topnav-actions">
|
||||
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">2</span></div>
|
||||
<div class="topnav-avatar">JD</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
<div class="page-header">
|
||||
<div class="page-title">My Leave</div>
|
||||
<button class="btn-primary">
|
||||
<svg 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>
|
||||
New Leave Request
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- BALANCE CARDS -->
|
||||
<div class="balance-cards">
|
||||
<div class="balance-card">
|
||||
<div class="bc-type">Annual Leave</div>
|
||||
<div class="bc-available">14</div>
|
||||
<div class="bc-sub">days remaining of 20</div>
|
||||
<div class="bc-bar"><div class="bc-fill" style="width:70%;background:#4F46E5;"></div></div>
|
||||
<div style="font-size:11px;color:#9CA3AF;margin-top:6px;">6 days used · 0 pending</div>
|
||||
</div>
|
||||
<div class="balance-card">
|
||||
<div class="bc-type">Sick Leave</div>
|
||||
<div class="bc-available">8</div>
|
||||
<div class="bc-sub">days remaining of 10</div>
|
||||
<div class="bc-bar"><div class="bc-fill" style="width:80%;background:#F59E0B;"></div></div>
|
||||
<div style="font-size:11px;color:#9CA3AF;margin-top:6px;">2 days used · 0 pending</div>
|
||||
</div>
|
||||
<div class="balance-card">
|
||||
<div class="bc-type">Casual Leave</div>
|
||||
<div class="bc-available">3</div>
|
||||
<div class="bc-sub">days remaining of 5</div>
|
||||
<div class="bc-bar"><div class="bc-fill" style="width:60%;background:#10B981;"></div></div>
|
||||
<div style="font-size:11px;color:#9CA3AF;margin-top:6px;">2 days used · 0 pending</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- NEW LEAVE REQUEST FORM (shown open) -->
|
||||
<div class="request-form-card">
|
||||
<div class="form-card-header">
|
||||
<span class="form-card-title">New Leave Request</span>
|
||||
<svg class="form-close" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</div>
|
||||
<div class="request-form">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Leave Type <span style="color:#EF4444;">*</span></label>
|
||||
<select class="form-select">
|
||||
<option selected>Annual Leave</option>
|
||||
<option>Sick Leave</option>
|
||||
<option>Casual Leave</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Days</label>
|
||||
<div class="days-badge">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="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>
|
||||
3 days
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">From Date <span style="color:#EF4444;">*</span></label>
|
||||
<input class="form-input" type="date" value="2026-05-26">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">To Date <span style="color:#EF4444;">*</span></label>
|
||||
<input class="form-input" type="date" value="2026-05-28">
|
||||
</div>
|
||||
<div class="form-group col-span-2">
|
||||
<label class="form-label">Reason <span style="color:#EF4444;">*</span></label>
|
||||
<textarea class="form-textarea" placeholder="Please describe the reason for your leave request...">Family event and personal commitments over the long weekend.</textarea>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button class="btn-cancel">Cancel</button>
|
||||
<button class="btn-submit">Submit Request</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LEAVE HISTORY -->
|
||||
<div class="table-card">
|
||||
<div class="table-card-header">
|
||||
<div class="table-card-title">Leave History</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Leave Type</th>
|
||||
<th>From</th>
|
||||
<th>To</th>
|
||||
<th>Days</th>
|
||||
<th>Status</th>
|
||||
<th>Reason</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="badge badge-purple">Casual</span></td>
|
||||
<td>May 26</td>
|
||||
<td>May 28</td>
|
||||
<td>3</td>
|
||||
<td><span class="badge badge-yellow">Pending</span></td>
|
||||
<td><span class="reason-text">Family event and personal commitments</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge badge-blue">Annual</span></td>
|
||||
<td>Apr 7</td>
|
||||
<td>Apr 11</td>
|
||||
<td>5</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
<td><span class="reason-text">Spring vacation — Hawaii</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge badge-orange">Sick</span></td>
|
||||
<td>Mar 22</td>
|
||||
<td>Mar 22</td>
|
||||
<td>1</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
<td><span class="reason-text">Severe headache and fever</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge badge-blue">Annual</span></td>
|
||||
<td>Feb 14</td>
|
||||
<td>Feb 14</td>
|
||||
<td>1</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
<td><span class="reason-text">Anniversary celebration</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge badge-orange">Sick</span></td>
|
||||
<td>Jan 9</td>
|
||||
<td>Jan 10</td>
|
||||
<td>2</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
<td><span class="reason-text">Flu — doctor's certificate attached</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,351 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Org Chart — HR Portal</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@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: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
|
||||
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
|
||||
.logo-icon svg { width: 16px; height: 16px; }
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
|
||||
.nav-item:hover { background: #F9FAFB; color: #111827; }
|
||||
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
|
||||
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
|
||||
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
|
||||
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
|
||||
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
|
||||
.user-role { font-size: 11px; color: #9CA3AF; }
|
||||
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
|
||||
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
|
||||
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
|
||||
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
|
||||
.breadcrumb span { color: #111827; font-weight: 500; }
|
||||
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
|
||||
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
|
||||
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
.content { padding: 28px; overflow-x: auto; }
|
||||
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
|
||||
.page-title { font-size: 22px; font-weight: 700; }
|
||||
.btn-outline { padding: 8px 16px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; }
|
||||
|
||||
/* ORG CHART */
|
||||
.org-chart { display: flex; flex-direction: column; align-items: center; min-width: 900px; }
|
||||
|
||||
/* PERSON CARD */
|
||||
.person-card {
|
||||
background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
padding: 14px 16px; width: 150px; text-align: center;
|
||||
cursor: pointer; transition: all 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
.person-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.14); border-color: #C7D2FE; transform: translateY(-1px); }
|
||||
.person-card.ceo { width: 180px; border-color: #4F46E5; }
|
||||
.person-avatar {
|
||||
width: 48px; height: 48px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 16px; font-weight: 700; color: #FFF;
|
||||
margin: 0 auto 8px;
|
||||
}
|
||||
.person-card.ceo .person-avatar { width: 56px; height: 56px; font-size: 18px; }
|
||||
.person-name { font-size: 13px; font-weight: 600; color: #111827; margin-bottom: 2px; }
|
||||
.person-title { font-size: 11px; color: #9CA3AF; line-height: 1.4; }
|
||||
.person-card.ceo .person-name { font-size: 14px; }
|
||||
|
||||
/* CONNECTOR LINES */
|
||||
.connector-down {
|
||||
width: 2px; background: #E5E7EB; height: 32px; margin: 0 auto;
|
||||
}
|
||||
.connector-horizontal {
|
||||
display: flex; align-items: flex-start; position: relative;
|
||||
}
|
||||
.connector-horizontal::before {
|
||||
content: ''; position: absolute; top: 0; left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 2px; height: 32px; background: #E5E7EB;
|
||||
}
|
||||
|
||||
/* LEVEL WRAPPER */
|
||||
.level { display: flex; gap: 0; align-items: flex-start; position: relative; }
|
||||
.level::before {
|
||||
content: ''; position: absolute; top: 0; left: 0; right: 0;
|
||||
height: 2px; background: #E5E7EB;
|
||||
}
|
||||
.level-item {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
padding: 0 16px; flex: 1;
|
||||
}
|
||||
.level-connector-up {
|
||||
width: 2px; height: 32px; background: #E5E7EB; margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* SUBLEVEL */
|
||||
.sublevel { display: flex; gap: 8px; margin-top: 0; align-items: flex-start; }
|
||||
.sublevel-item { display: flex; flex-direction: column; align-items: center; }
|
||||
.sublevel-connector { width: 2px; height: 20px; background: #E5E7EB; }
|
||||
.sublevel-h-connector { height: 2px; background: #E5E7EB; width: 100%; position: absolute; top: 20px; }
|
||||
|
||||
/* CLEANER APPROACH */
|
||||
.org-wrapper {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* CEO */
|
||||
.ceo-row { display: flex; flex-direction: column; align-items: center; }
|
||||
.vert-line { width: 2px; height: 32px; background: #D1D5DB; }
|
||||
.horiz-line { height: 2px; background: #D1D5DB; }
|
||||
|
||||
/* DEPT HEADS ROW */
|
||||
.dept-row {
|
||||
display: flex; align-items: flex-start; gap: 0; position: relative;
|
||||
margin-top: 0;
|
||||
}
|
||||
.dept-col { display: flex; flex-direction: column; align-items: center; padding: 0 20px; }
|
||||
.dept-col-top { width: 2px; height: 32px; background: #D1D5DB; }
|
||||
.dept-col-connector { position: relative; width: 100%; }
|
||||
|
||||
/* TEAM MEMBERS */
|
||||
.team-row { display: flex; gap: 10px; position: relative; margin-top: 16px; }
|
||||
.team-member { display: flex; flex-direction: column; align-items: center; }
|
||||
.team-member-connector { width: 2px; height: 20px; background: #D1D5DB; }
|
||||
|
||||
.person-card-sm {
|
||||
background: #FFFFFF; border-radius: 8px; border: 1px solid #E5E7EB;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||||
padding: 10px 12px; width: 120px; text-align: center;
|
||||
cursor: pointer; transition: all 0.15s;
|
||||
}
|
||||
.person-card-sm:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-color: #C7D2FE; }
|
||||
.avatar-sm { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #FFF; margin: 0 auto 6px; }
|
||||
.name-sm { font-size: 12px; font-weight: 600; color: #111827; margin-bottom: 1px; }
|
||||
.title-sm { font-size: 10px; color: #9CA3AF; line-height: 1.3; }
|
||||
|
||||
/* DEPT ROW HORIZONTAL CONNECTOR */
|
||||
.dept-horiz { display: flex; align-items: center; width: 100%; position: relative; }
|
||||
.dept-horiz::before {
|
||||
content: ''; position: absolute; top: 32px; left: 20%; right: 20%;
|
||||
height: 2px; background: #D1D5DB;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>HR Portal</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="04-admin-dashboard.html" class="nav-item"><svg 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 href="05-employee-directory.html" class="nav-item"><svg 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 href="08-department-management.html" class="nav-item"><svg 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>
|
||||
<a href="09-leave-requests.html" class="nav-item"><svg 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">7</span></a>
|
||||
<a href="11-attendance.html" class="nav-item"><svg 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 href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
|
||||
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
|
||||
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
|
||||
<a href="15-performance-reviews.html" class="nav-item"><svg 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>Performance</a>
|
||||
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
|
||||
<a href="20-org-chart.html" class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
|
||||
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
|
||||
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
|
||||
<button class="logout-btn">Sign Out</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<header class="topnav">
|
||||
<div class="breadcrumb">
|
||||
<a href="04-admin-dashboard.html">Home</a>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
<span>Organization Chart</span>
|
||||
</div>
|
||||
<div class="topnav-actions">
|
||||
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
|
||||
<div class="topnav-avatar">SC</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="page-title">Organization Chart</div>
|
||||
<div style="font-size:13px;color:#9CA3AF;margin-top:3px;">TechFlow Inc. · 248 employees</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<button class="btn-outline">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
Export PDF
|
||||
</button>
|
||||
<button class="btn-outline">
|
||||
<svg width="15" height="15" 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>
|
||||
Search People
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ORG CHART -->
|
||||
<div style="background:#FFFFFF;border-radius:12px;border:1px solid #E5E7EB;padding:40px;overflow-x:auto;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
|
||||
<div class="org-wrapper">
|
||||
|
||||
<!-- CEO -->
|
||||
<div class="ceo-row">
|
||||
<div class="person-card ceo">
|
||||
<div class="person-avatar" style="background:#111827;">RP</div>
|
||||
<div class="person-name">Robert Park</div>
|
||||
<div class="person-title">Chief Executive Officer</div>
|
||||
</div>
|
||||
<div class="vert-line"></div>
|
||||
</div>
|
||||
|
||||
<!-- HORIZONTAL CONNECTOR -->
|
||||
<div style="display:flex;width:820px;height:2px;background:linear-gradient(to right, transparent 12.5%, #D1D5DB 12.5%, #D1D5DB 87.5%, transparent 87.5%);"></div>
|
||||
|
||||
<!-- DEPT HEADS ROW -->
|
||||
<div style="display:flex;width:820px;">
|
||||
<!-- Engineering -->
|
||||
<div class="dept-col" style="flex:1;">
|
||||
<div class="dept-col-top"></div>
|
||||
<div class="person-card">
|
||||
<div class="person-avatar" style="background:#4F46E5;">MR</div>
|
||||
<div class="person-name">Michael Rodriguez</div>
|
||||
<div class="person-title">VP Engineering</div>
|
||||
</div>
|
||||
<div class="vert-line" style="height:20px;"></div>
|
||||
<div style="display:flex;height:2px;background:linear-gradient(to right,transparent 25%,#D1D5DB 25%,#D1D5DB 75%,transparent 75%);width:260px;"></div>
|
||||
<div style="display:flex;gap:10px;margin-top:0;">
|
||||
<div class="team-member">
|
||||
<div class="vert-line" style="height:16px;"></div>
|
||||
<div class="person-card-sm">
|
||||
<div class="avatar-sm" style="background:#6366F1;">JK</div>
|
||||
<div class="name-sm">James Kim</div>
|
||||
<div class="title-sm">Frontend Dev</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-member">
|
||||
<div class="vert-line" style="height:16px;"></div>
|
||||
<div class="person-card-sm">
|
||||
<div class="avatar-sm" style="background:#8B5CF6;">NW</div>
|
||||
<div class="name-sm">Noah Williams</div>
|
||||
<div class="title-sm">DevOps Engineer</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- HR -->
|
||||
<div class="dept-col" style="flex:1;">
|
||||
<div class="dept-col-top"></div>
|
||||
<div class="person-card">
|
||||
<div class="person-avatar" style="background:#10B981;">SC</div>
|
||||
<div class="person-name">Sarah Chen</div>
|
||||
<div class="person-title">HR Director</div>
|
||||
</div>
|
||||
<div class="vert-line" style="height:20px;"></div>
|
||||
<div style="display:flex;height:2px;background:#D1D5DB;width:140px;margin:0 auto;"></div>
|
||||
<div style="display:flex;gap:10px;margin-top:0;justify-content:center;">
|
||||
<div class="team-member">
|
||||
<div class="vert-line" style="height:16px;"></div>
|
||||
<div class="person-card-sm">
|
||||
<div class="avatar-sm" style="background:#34D399;">LM</div>
|
||||
<div class="name-sm">Lily Martin</div>
|
||||
<div class="title-sm">HR Specialist</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Finance -->
|
||||
<div class="dept-col" style="flex:1;">
|
||||
<div class="dept-col-top"></div>
|
||||
<div class="person-card">
|
||||
<div class="person-avatar" style="background:#F59E0B;">PP</div>
|
||||
<div class="person-name">Priya Patel</div>
|
||||
<div class="person-title">Finance Director</div>
|
||||
</div>
|
||||
<div class="vert-line" style="height:20px;"></div>
|
||||
<div style="display:flex;height:2px;background:#D1D5DB;width:140px;margin:0 auto;"></div>
|
||||
<div style="display:flex;gap:10px;margin-top:0;justify-content:center;">
|
||||
<div class="team-member">
|
||||
<div class="vert-line" style="height:16px;"></div>
|
||||
<div class="person-card-sm">
|
||||
<div class="avatar-sm" style="background:#FBBF24;">FA</div>
|
||||
<div class="name-sm">Fatima Al-Rashid</div>
|
||||
<div class="title-sm">Financial Analyst</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Operations -->
|
||||
<div class="dept-col" style="flex:1;">
|
||||
<div class="dept-col-top"></div>
|
||||
<div class="person-card">
|
||||
<div class="person-avatar" style="background:#3B82F6;">RS</div>
|
||||
<div class="person-name">Ravi Shankar</div>
|
||||
<div class="person-title">Operations Lead</div>
|
||||
</div>
|
||||
<div class="vert-line" style="height:20px;"></div>
|
||||
<div style="display:flex;height:2px;background:linear-gradient(to right,transparent 25%,#D1D5DB 25%,#D1D5DB 75%,transparent 75%);width:260px;"></div>
|
||||
<div style="display:flex;gap:10px;margin-top:0;">
|
||||
<div class="team-member">
|
||||
<div class="vert-line" style="height:16px;"></div>
|
||||
<div class="person-card-sm">
|
||||
<div class="avatar-sm" style="background:#60A5FA;">LO</div>
|
||||
<div class="name-sm">Lucas Oliveira</div>
|
||||
<div class="title-sm">Ops Specialist</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-member">
|
||||
<div class="vert-line" style="height:16px;"></div>
|
||||
<div class="person-card-sm">
|
||||
<div class="avatar-sm" style="background:#2563EB;">TH</div>
|
||||
<div class="name-sm">Tom Huang</div>
|
||||
<div class="title-sm">Ops Analyst</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- LEGEND -->
|
||||
<div style="margin-top:32px;padding-top:20px;border-top:1px solid #F3F4F6;display:flex;gap:24px;justify-content:center;">
|
||||
<div style="display:flex;align-items:center;gap:8px;font-size:12px;color:#6B7280;">
|
||||
<div style="width:32px;height:2px;background:#D1D5DB;"></div>
|
||||
Reports to
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;font-size:12px;color:#6B7280;">
|
||||
<div style="width:12px;height:12px;border-radius:50%;background:#111827;"></div>
|
||||
C-Suite
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;font-size:12px;color:#6B7280;">
|
||||
<div style="width:12px;height:12px;border-radius:50%;background:#4F46E5;"></div>
|
||||
Department Head
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;font-size:12px;color:#6B7280;">
|
||||
<div style="width:12px;height:12px;border-radius:50%;background:#6366F1;"></div>
|
||||
Team Member
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,596 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HR Portal v5 — Design Mockups</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; background: #FAFAFA; color: #111827; min-height: 100vh; }
|
||||
|
||||
header {
|
||||
background: #FFFFFF; border-bottom: 1px solid #E5E7EB;
|
||||
padding: 0 48px;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
height: 64px; position: sticky; top: 0; z-index: 10;
|
||||
}
|
||||
.header-logo { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; }
|
||||
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
|
||||
.logo-icon svg { width: 16px; height: 16px; }
|
||||
.header-badge { background: #EEF2FF; color: #4F46E5; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
|
||||
|
||||
.hero {
|
||||
background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
|
||||
padding: 60px 48px; color: #FFFFFF; text-align: center;
|
||||
}
|
||||
.hero-title { font-size: 40px; font-weight: 800; margin-bottom: 12px; letter-spacing: -1px; }
|
||||
.hero-sub { font-size: 18px; color: rgba(255,255,255,0.8); max-width: 560px; margin: 0 auto 28px; line-height: 1.6; }
|
||||
.hero-stats { display: flex; justify-content: center; gap: 40px; }
|
||||
.hero-stat-num { font-size: 28px; font-weight: 700; }
|
||||
.hero-stat-label { font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 2px; }
|
||||
|
||||
.main { max-width: 1200px; margin: 0 auto; padding: 48px 24px; }
|
||||
|
||||
.section { margin-bottom: 48px; }
|
||||
.section-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 2px solid #E5E7EB; }
|
||||
.section-num { width: 32px; height: 32px; border-radius: 8px; background: #4F46E5; color: #FFF; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.section-title { font-size: 20px; font-weight: 700; color: #111827; }
|
||||
.section-count { background: #F3F4F6; color: #6B7280; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 10px; margin-left: 4px; }
|
||||
|
||||
.cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
|
||||
.cards-grid.three { grid-template-columns: repeat(3, 1fr); }
|
||||
.cards-grid.two { grid-template-columns: repeat(2, 1fr); }
|
||||
|
||||
.mockup-card {
|
||||
background: #FFFFFF; border-radius: 12px; border: 1px solid #E5E7EB;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||||
overflow: hidden; text-decoration: none; color: inherit;
|
||||
transition: all 0.2s; display: block;
|
||||
}
|
||||
.mockup-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.12); transform: translateY(-3px); border-color: #C7D2FE; }
|
||||
|
||||
.card-preview {
|
||||
height: 140px; display: flex; align-items: center; justify-content: center;
|
||||
font-size: 32px; font-weight: 800; color: rgba(255,255,255,0.9);
|
||||
position: relative; overflow: hidden;
|
||||
flex-direction: column; gap: 8px;
|
||||
}
|
||||
.card-preview-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; }
|
||||
.card-preview-icon svg { width: 22px; height: 22px; }
|
||||
.card-preview-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); }
|
||||
.card-preview-num { font-size: 10px; font-weight: 600; background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 10px; color: rgba(255,255,255,0.7); position: absolute; top: 10px; left: 10px; }
|
||||
|
||||
/* MOCK SIDEBAR IN PREVIEW */
|
||||
.preview-sidebar { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: rgba(255,255,255,0.15); border-right: 1px solid rgba(255,255,255,0.15); }
|
||||
.preview-topbar { position: absolute; top: 0; right: 0; left: 30%; height: 20%; background: rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.15); }
|
||||
.preview-content { position: absolute; top: 20%; right: 0; bottom: 0; left: 30%; padding: 8px; }
|
||||
.preview-row { height: 6px; background: rgba(255,255,255,0.25); border-radius: 3px; margin-bottom: 5px; }
|
||||
.preview-row.short { width: 60%; }
|
||||
.preview-row.shorter { width: 40%; }
|
||||
.preview-card-row { display: flex; gap: 4px; margin-bottom: 5px; }
|
||||
.preview-mini-card { flex: 1; height: 22px; background: rgba(255,255,255,0.2); border-radius: 3px; }
|
||||
.preview-table-row { height: 5px; background: rgba(255,255,255,0.15); border-radius: 2px; margin-bottom: 3px; }
|
||||
|
||||
.card-info { padding: 14px 16px; }
|
||||
.card-num { font-size: 11px; font-weight: 700; color: #9CA3AF; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.card-name { font-size: 14px; font-weight: 600; color: #111827; margin-bottom: 3px; }
|
||||
.card-desc { font-size: 12px; color: #9CA3AF; line-height: 1.4; }
|
||||
.card-tag { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
|
||||
|
||||
.tag-admin { background: #EEF2FF; color: #4F46E5; }
|
||||
.tag-employee { background: #ECFDF5; color: #10B981; }
|
||||
.tag-public { background: #F5F3FF; color: #7C3AED; }
|
||||
|
||||
footer {
|
||||
background: #111827; padding: 32px 48px; text-align: center;
|
||||
color: #9CA3AF; font-size: 14px; margin-top: 24px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="header-logo">
|
||||
<div class="logo-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>
|
||||
HR Portal v5
|
||||
</div>
|
||||
<div class="header-badge">Design Mockups</div>
|
||||
</header>
|
||||
|
||||
<div class="hero">
|
||||
<div class="hero-title">HR Portal v5 — Design Mockups</div>
|
||||
<div class="hero-sub">Pixel-perfect HTML/CSS mockups for all 20 screens of the HR management system. Click any card to preview.</div>
|
||||
<div class="hero-stats">
|
||||
<div>
|
||||
<div class="hero-stat-num">20</div>
|
||||
<div class="hero-stat-label">Design Screens</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="hero-stat-num">3</div>
|
||||
<div class="hero-stat-label">Page Sections</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="hero-stat-num">100%</div>
|
||||
<div class="hero-stat-label">Self-contained HTML/CSS</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
|
||||
<!-- PUBLIC PAGES -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-num" style="background:#7C3AED;">P</div>
|
||||
<div>
|
||||
<div class="section-title">Public Pages <span class="section-count">3 screens</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards-grid three">
|
||||
|
||||
<a href="01-landing.html" class="mockup-card">
|
||||
<div class="card-preview" style="background:linear-gradient(135deg,#4F46E5,#7C3AED);">
|
||||
<div class="card-preview-num">01</div>
|
||||
<div class="preview-content" style="top:0;left:0;right:0;">
|
||||
<div style="padding:8px;border-bottom:1px solid rgba(255,255,255,0.2);display:flex;justify-content:space-between;align-items:center;"><div style="width:40px;height:6px;background:rgba(255,255,255,0.4);border-radius:3px;"></div><div style="width:50px;height:10px;background:rgba(255,255,255,0.25);border-radius:3px;"></div></div>
|
||||
<div style="padding:12px 8px;">
|
||||
<div style="width:70%;height:12px;background:rgba(255,255,255,0.4);border-radius:3px;margin-bottom:6px;"></div>
|
||||
<div style="width:50%;height:8px;background:rgba(255,255,255,0.25);border-radius:3px;margin-bottom:12px;"></div>
|
||||
<div style="display:flex;gap:6px;"><div style="width:50px;height:14px;background:rgba(255,255,255,0.4);border-radius:3px;"></div><div style="width:40px;height:14px;background:rgba(255,255,255,0.2);border-radius:3px;"></div></div>
|
||||
</div>
|
||||
<div style="display:flex;gap:6px;padding:0 8px;"><div style="flex:1;height:50px;background:rgba(255,255,255,0.15);border-radius:6px;"></div><div style="flex:1;height:50px;background:rgba(255,255,255,0.15);border-radius:6px;"></div><div style="flex:1;height:50px;background:rgba(255,255,255,0.15);border-radius:6px;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-num">Screen 01</div>
|
||||
<div class="card-name">Landing Page</div>
|
||||
<div class="card-desc">Public marketing page with hero, features, stats, testimonials</div>
|
||||
<span class="card-tag tag-public">Public</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="02-login.html" class="mockup-card">
|
||||
<div class="card-preview" style="background:linear-gradient(135deg,#6366F1,#4F46E5);">
|
||||
<div class="card-preview-num">02</div>
|
||||
<div style="width:90px;background:rgba(255,255,255,0.2);border-radius:8px;padding:10px;text-align:center;">
|
||||
<div style="width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.3);margin:0 auto 6px;"></div>
|
||||
<div style="width:60px;height:5px;background:rgba(255,255,255,0.4);border-radius:3px;margin:0 auto 8px;"></div>
|
||||
<div style="height:16px;background:rgba(255,255,255,0.2);border-radius:3px;margin-bottom:5px;"></div>
|
||||
<div style="height:16px;background:rgba(255,255,255,0.2);border-radius:3px;margin-bottom:8px;"></div>
|
||||
<div style="height:16px;background:rgba(255,255,255,0.5);border-radius:3px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-num">Screen 02</div>
|
||||
<div class="card-name">Login Page</div>
|
||||
<div class="card-desc">Employee and admin sign-in with Google SSO option</div>
|
||||
<span class="card-tag tag-public">Public</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="03-register.html" class="mockup-card">
|
||||
<div class="card-preview" style="background:linear-gradient(135deg,#7C3AED,#6366F1);">
|
||||
<div class="card-preview-num">03</div>
|
||||
<div style="width:100px;background:rgba(255,255,255,0.15);border-radius:8px;padding:10px;">
|
||||
<div style="display:flex;justify-content:space-between;margin-bottom:8px;">
|
||||
<div style="width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.5);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:rgba(0,0,0,0.5);">1</div>
|
||||
<div style="flex:1;height:2px;background:rgba(255,255,255,0.4);margin:9px 4px;"></div>
|
||||
<div style="width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:rgba(255,255,255,0.7);">2</div>
|
||||
<div style="flex:1;height:2px;background:rgba(255,255,255,0.2);margin:9px 4px;"></div>
|
||||
<div style="width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;font-size:9px;color:rgba(255,255,255,0.5);">3</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;">
|
||||
<div style="height:12px;background:rgba(255,255,255,0.2);border-radius:2px;"></div>
|
||||
<div style="height:12px;background:rgba(255,255,255,0.2);border-radius:2px;"></div>
|
||||
<div style="height:12px;background:rgba(255,255,255,0.2);border-radius:2px;"></div>
|
||||
<div style="height:12px;background:rgba(255,255,255,0.2);border-radius:2px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-num">Screen 03</div>
|
||||
<div class="card-name">Company Registration</div>
|
||||
<div class="card-desc">Multi-step company setup with admin account creation</div>
|
||||
<span class="card-tag tag-public">Public</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ADMIN PAGES -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-num">A</div>
|
||||
<div>
|
||||
<div class="section-title">Admin Pages <span class="section-count">15 screens</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards-grid">
|
||||
|
||||
<a href="04-admin-dashboard.html" class="mockup-card">
|
||||
<div class="card-preview" style="background:linear-gradient(135deg,#4F46E5,#6366F1);">
|
||||
<div class="card-preview-num">04</div>
|
||||
<div class="preview-sidebar"></div>
|
||||
<div class="preview-topbar"></div>
|
||||
<div class="preview-content">
|
||||
<div class="preview-card-row"><div class="preview-mini-card"></div><div class="preview-mini-card"></div><div class="preview-mini-card"></div><div class="preview-mini-card"></div></div>
|
||||
<div class="preview-card-row"><div class="preview-mini-card" style="height:35px;"></div><div class="preview-mini-card" style="height:35px;"></div></div>
|
||||
<div class="preview-card-row"><div class="preview-mini-card" style="height:25px;flex:3;"></div><div class="preview-mini-card" style="height:25px;flex:2;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-num">Screen 04</div>
|
||||
<div class="card-name">Admin Dashboard</div>
|
||||
<div class="card-desc">Stats, pending approvals, activity feed, announcements</div>
|
||||
<span class="card-tag tag-admin">Admin</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="05-employee-directory.html" class="mockup-card">
|
||||
<div class="card-preview" style="background:linear-gradient(135deg,#3B82F6,#4F46E5);">
|
||||
<div class="card-preview-num">05</div>
|
||||
<div class="preview-sidebar"></div>
|
||||
<div class="preview-topbar"></div>
|
||||
<div class="preview-content">
|
||||
<div style="height:6px;background:rgba(255,255,255,0.3);border-radius:3px;margin-bottom:5px;width:70%;"></div>
|
||||
<div class="preview-table-row" style="background:rgba(255,255,255,0.3);"></div>
|
||||
<div class="preview-table-row"></div>
|
||||
<div class="preview-table-row"></div>
|
||||
<div class="preview-table-row"></div>
|
||||
<div class="preview-table-row"></div>
|
||||
<div class="preview-table-row"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-num">Screen 05</div>
|
||||
<div class="card-name">Employee Directory</div>
|
||||
<div class="card-desc">Filterable table of all employees with search and actions</div>
|
||||
<span class="card-tag tag-admin">Admin</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="06-employee-profile.html" class="mockup-card">
|
||||
<div class="card-preview" style="background:linear-gradient(135deg,#06B6D4,#3B82F6);">
|
||||
<div class="card-preview-num">06</div>
|
||||
<div class="preview-sidebar"></div>
|
||||
<div class="preview-topbar"></div>
|
||||
<div class="preview-content">
|
||||
<div style="display:flex;gap:4px;margin-bottom:5px;"><div style="width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,0.4);"></div><div style="flex:1;"><div style="height:5px;background:rgba(255,255,255,0.3);border-radius:2px;margin-bottom:3px;"></div><div style="height:4px;background:rgba(255,255,255,0.2);border-radius:2px;width:70%;"></div></div></div>
|
||||
<div style="display:flex;gap:3px;margin-bottom:4px;"><div style="flex:1;height:4px;background:rgba(255,255,255,0.3);border-radius:2px;"></div><div style="flex:1;height:4px;background:rgba(255,255,255,0.2);border-radius:2px;"></div><div style="flex:1;height:4px;background:rgba(255,255,255,0.2);border-radius:2px;"></div></div>
|
||||
<div class="preview-card-row"><div class="preview-mini-card" style="height:28px;"></div><div class="preview-mini-card" style="height:28px;"></div></div>
|
||||
<div class="preview-card-row"><div class="preview-mini-card" style="height:12px;"></div><div class="preview-mini-card" style="height:12px;"></div><div class="preview-mini-card" style="height:12px;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-num">Screen 06</div>
|
||||
<div class="card-name">Employee Profile</div>
|
||||
<div class="card-desc">Detailed profile with tabs: overview, leave, attendance, payslips</div>
|
||||
<span class="card-tag tag-admin">Admin</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="07-add-employee.html" class="mockup-card">
|
||||
<div class="card-preview" style="background:linear-gradient(135deg,#10B981,#059669);">
|
||||
<div class="card-preview-num">07</div>
|
||||
<div class="preview-sidebar"></div>
|
||||
<div class="preview-topbar"></div>
|
||||
<div class="preview-content">
|
||||
<div style="margin-bottom:4px;background:rgba(255,255,255,0.15);border-radius:4px;padding:5px;">
|
||||
<div style="height:4px;background:rgba(255,255,255,0.3);border-radius:2px;margin-bottom:4px;"></div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:3px;"><div style="height:10px;background:rgba(255,255,255,0.2);border-radius:2px;"></div><div style="height:10px;background:rgba(255,255,255,0.2);border-radius:2px;"></div></div>
|
||||
</div>
|
||||
<div style="background:rgba(255,255,255,0.15);border-radius:4px;padding:5px;">
|
||||
<div style="height:4px;background:rgba(255,255,255,0.3);border-radius:2px;margin-bottom:4px;"></div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:3px;"><div style="height:10px;background:rgba(255,255,255,0.2);border-radius:2px;"></div><div style="height:10px;background:rgba(255,255,255,0.2);border-radius:2px;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-num">Screen 07</div>
|
||||
<div class="card-name">Add Employee</div>
|
||||
<div class="card-desc">Multi-section form for personal info, employment, compensation</div>
|
||||
<span class="card-tag tag-admin">Admin</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="08-department-management.html" class="mockup-card">
|
||||
<div class="card-preview" style="background:linear-gradient(135deg,#F59E0B,#EF4444);">
|
||||
<div class="card-preview-num">08</div>
|
||||
<div class="preview-sidebar"></div>
|
||||
<div class="preview-topbar"></div>
|
||||
<div class="preview-content">
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;">
|
||||
<div style="height:35px;background:rgba(255,255,255,0.25);border-radius:4px;"></div>
|
||||
<div style="height:35px;background:rgba(255,255,255,0.25);border-radius:4px;"></div>
|
||||
<div style="height:35px;background:rgba(255,255,255,0.25);border-radius:4px;"></div>
|
||||
<div style="height:35px;background:rgba(255,255,255,0.2);border-radius:4px;"></div>
|
||||
<div style="height:35px;background:rgba(255,255,255,0.2);border-radius:4px;"></div>
|
||||
<div style="height:35px;background:rgba(255,255,255,0.2);border-radius:4px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-num">Screen 08</div>
|
||||
<div class="card-name">Department Management</div>
|
||||
<div class="card-desc">Department cards with heads, employee counts, edit/delete</div>
|
||||
<span class="card-tag tag-admin">Admin</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="09-leave-requests.html" class="mockup-card">
|
||||
<div class="card-preview" style="background:linear-gradient(135deg,#EF4444,#EC4899);">
|
||||
<div class="card-preview-num">09</div>
|
||||
<div class="preview-sidebar"></div>
|
||||
<div class="preview-topbar"></div>
|
||||
<div class="preview-content">
|
||||
<div style="display:flex;gap:3px;margin-bottom:5px;"><div style="height:4px;background:rgba(255,255,255,0.5);border-radius:2px;width:20px;"></div><div style="height:4px;background:rgba(255,255,255,0.3);border-radius:2px;flex:1;"></div></div>
|
||||
<div class="preview-table-row" style="background:rgba(255,255,255,0.3);"></div>
|
||||
<div class="preview-table-row"></div>
|
||||
<div class="preview-table-row"></div>
|
||||
<div class="preview-table-row"></div>
|
||||
<div class="preview-table-row"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-num">Screen 09</div>
|
||||
<div class="card-name">Leave Requests</div>
|
||||
<div class="card-desc">Tabbed leave request management with approve/reject actions</div>
|
||||
<span class="card-tag tag-admin">Admin</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="10-leave-types.html" class="mockup-card">
|
||||
<div class="card-preview" style="background:linear-gradient(135deg,#7C3AED,#EC4899);">
|
||||
<div class="card-preview-num">10</div>
|
||||
<div class="preview-sidebar"></div>
|
||||
<div class="preview-topbar"></div>
|
||||
<div class="preview-content">
|
||||
<div class="preview-table-row" style="background:rgba(255,255,255,0.3);"></div>
|
||||
<div class="preview-table-row"></div>
|
||||
<div class="preview-table-row"></div>
|
||||
<div class="preview-table-row"></div>
|
||||
<div class="preview-table-row"></div>
|
||||
<div class="preview-table-row"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-num">Screen 10</div>
|
||||
<div class="card-name">Leave Types</div>
|
||||
<div class="card-desc">Configure leave policies, days/year, carry forward, toggles</div>
|
||||
<span class="card-tag tag-admin">Admin</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="11-attendance.html" class="mockup-card">
|
||||
<div class="card-preview" style="background:linear-gradient(135deg,#0EA5E9,#06B6D4);">
|
||||
<div class="card-preview-num">11</div>
|
||||
<div class="preview-sidebar"></div>
|
||||
<div class="preview-topbar"></div>
|
||||
<div class="preview-content">
|
||||
<div class="preview-card-row" style="margin-bottom:5px;"><div class="preview-mini-card" style="height:16px;"></div><div class="preview-mini-card" style="height:16px;"></div><div class="preview-mini-card" style="height:16px;"></div><div class="preview-mini-card" style="height:16px;"></div></div>
|
||||
<div class="preview-table-row" style="background:rgba(255,255,255,0.3);"></div>
|
||||
<div class="preview-table-row"></div>
|
||||
<div class="preview-table-row"></div>
|
||||
<div class="preview-table-row"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-num">Screen 11</div>
|
||||
<div class="card-name">Attendance Log</div>
|
||||
<div class="card-desc">Daily attendance with check-in/out times, status badges</div>
|
||||
<span class="card-tag tag-admin">Admin</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="12-payroll-dashboard.html" class="mockup-card">
|
||||
<div class="card-preview" style="background:linear-gradient(135deg,#059669,#10B981);">
|
||||
<div class="card-preview-num">12</div>
|
||||
<div class="preview-sidebar"></div>
|
||||
<div class="preview-topbar"></div>
|
||||
<div class="preview-content">
|
||||
<div style="background:rgba(255,255,255,0.15);border-radius:4px;padding:6px;margin-bottom:4px;display:flex;justify-content:space-between;align-items:center;"><div><div style="height:4px;background:rgba(255,255,255,0.3);border-radius:2px;margin-bottom:3px;width:60px;"></div><div style="height:3px;background:rgba(255,255,255,0.2);border-radius:2px;width:40px;"></div></div><div style="width:40px;height:14px;background:rgba(255,255,255,0.4);border-radius:3px;"></div></div>
|
||||
<div class="preview-card-row"><div class="preview-mini-card" style="height:14px;"></div><div class="preview-mini-card" style="height:14px;"></div><div class="preview-mini-card" style="height:14px;"></div><div class="preview-mini-card" style="height:14px;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-num">Screen 12</div>
|
||||
<div class="card-name">Payroll Dashboard</div>
|
||||
<div class="card-desc">Monthly payroll status, salary structures, history</div>
|
||||
<span class="card-tag tag-admin">Admin</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="13-recruitment.html" class="mockup-card">
|
||||
<div class="card-preview" style="background:linear-gradient(135deg,#D97706,#F59E0B);">
|
||||
<div class="card-preview-num">13</div>
|
||||
<div class="preview-sidebar"></div>
|
||||
<div class="preview-topbar"></div>
|
||||
<div class="preview-content">
|
||||
<div class="preview-card-row" style="margin-bottom:5px;"><div class="preview-mini-card" style="height:22px;"></div><div class="preview-mini-card" style="height:22px;"></div><div class="preview-mini-card" style="height:22px;"></div><div class="preview-mini-card" style="height:22px;"></div></div>
|
||||
<div style="display:flex;gap:3px;"><div style="flex:1;min-height:30px;background:rgba(255,255,255,0.15);border-radius:3px;"></div><div style="flex:1;min-height:30px;background:rgba(255,255,255,0.15);border-radius:3px;"></div><div style="flex:1;min-height:30px;background:rgba(255,255,255,0.15);border-radius:3px;"></div><div style="flex:1;min-height:30px;background:rgba(255,255,255,0.15);border-radius:3px;"></div><div style="flex:1;min-height:30px;background:rgba(255,255,255,0.2);border-radius:3px;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-num">Screen 13</div>
|
||||
<div class="card-name">Recruitment</div>
|
||||
<div class="card-desc">Job listings with Kanban pipeline for applicant stages</div>
|
||||
<span class="card-tag tag-admin">Admin</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="14-expense-claims.html" class="mockup-card">
|
||||
<div class="card-preview" style="background:linear-gradient(135deg,#8B5CF6,#7C3AED);">
|
||||
<div class="card-preview-num">14</div>
|
||||
<div class="preview-sidebar"></div>
|
||||
<div class="preview-topbar"></div>
|
||||
<div class="preview-content">
|
||||
<div class="preview-table-row" style="background:rgba(255,255,255,0.3);"></div>
|
||||
<div class="preview-table-row"></div>
|
||||
<div class="preview-table-row"></div>
|
||||
<div class="preview-table-row"></div>
|
||||
<div class="preview-table-row"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-num">Screen 14</div>
|
||||
<div class="card-name">Expense Claims</div>
|
||||
<div class="card-desc">Expense submissions with category badges and receipt links</div>
|
||||
<span class="card-tag tag-admin">Admin</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="15-performance-reviews.html" class="mockup-card">
|
||||
<div class="card-preview" style="background:linear-gradient(135deg,#4F46E5,#9333EA);">
|
||||
<div class="card-preview-num">15</div>
|
||||
<div class="preview-sidebar"></div>
|
||||
<div class="preview-topbar"></div>
|
||||
<div class="preview-content">
|
||||
<div style="background:rgba(255,255,255,0.2);border-radius:4px;padding:6px;margin-bottom:5px;"><div style="height:4px;background:rgba(255,255,255,0.4);border-radius:2px;margin-bottom:4px;"></div><div style="height:4px;background:rgba(255,255,255,0.25);border-radius:2px;margin-bottom:6px;width:70%;"></div><div style="height:4px;background:rgba(255,255,255,0.3);border-radius:2px;"></div></div>
|
||||
<div class="preview-table-row"></div>
|
||||
<div class="preview-table-row"></div>
|
||||
<div class="preview-table-row"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-num">Screen 15</div>
|
||||
<div class="card-name">Performance Reviews</div>
|
||||
<div class="card-desc">Active review cycle with progress bar and history table</div>
|
||||
<span class="card-tag tag-admin">Admin</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="16-reports.html" class="mockup-card">
|
||||
<div class="card-preview" style="background:linear-gradient(135deg,#1D4ED8,#4F46E5);">
|
||||
<div class="card-preview-num">16</div>
|
||||
<div class="preview-sidebar"></div>
|
||||
<div class="preview-topbar"></div>
|
||||
<div class="preview-content">
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:3px;">
|
||||
<div style="height:28px;background:rgba(255,255,255,0.2);border-radius:3px;"></div>
|
||||
<div style="height:28px;background:rgba(255,255,255,0.2);border-radius:3px;"></div>
|
||||
<div style="height:28px;background:rgba(255,255,255,0.15);border-radius:3px;"></div>
|
||||
<div style="height:28px;background:rgba(255,255,255,0.15);border-radius:3px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-num">Screen 16</div>
|
||||
<div class="card-name">Reports & Analytics</div>
|
||||
<div class="card-desc">6 CSS-based charts: line, bar, donut, horizontal bars</div>
|
||||
<span class="card-tag tag-admin">Admin</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="17-settings.html" class="mockup-card">
|
||||
<div class="card-preview" style="background:linear-gradient(135deg,#374151,#6B7280);">
|
||||
<div class="card-preview-num">17</div>
|
||||
<div class="preview-sidebar"></div>
|
||||
<div class="preview-topbar"></div>
|
||||
<div class="preview-content" style="display:flex;gap:4px;">
|
||||
<div style="width:28%;background:rgba(255,255,255,0.1);border-radius:3px;"></div>
|
||||
<div style="flex:1;"><div style="height:4px;background:rgba(255,255,255,0.3);border-radius:2px;margin-bottom:4px;"></div><div style="height:3px;background:rgba(255,255,255,0.15);border-radius:2px;margin-bottom:6px;width:70%;"></div><div style="height:22px;background:rgba(255,255,255,0.15);border-radius:3px;margin-bottom:4px;"></div><div style="height:18px;background:rgba(255,255,255,0.15);border-radius:3px;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-num">Screen 17</div>
|
||||
<div class="card-name">Settings</div>
|
||||
<div class="card-desc">Company profile, logo upload, work hours config, sub-nav</div>
|
||||
<span class="card-tag tag-admin">Admin</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EMPLOYEE PAGES -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-num" style="background:#10B981;">E</div>
|
||||
<div>
|
||||
<div class="section-title">Employee Pages <span class="section-count">3 screens</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards-grid three">
|
||||
|
||||
<a href="18-employee-dashboard.html" class="mockup-card">
|
||||
<div class="card-preview" style="background:linear-gradient(135deg,#059669,#10B981);">
|
||||
<div class="card-preview-num">18</div>
|
||||
<div class="preview-sidebar"></div>
|
||||
<div class="preview-topbar"></div>
|
||||
<div class="preview-content">
|
||||
<div style="background:rgba(255,255,255,0.2);border-radius:4px;padding:5px;margin-bottom:4px;display:flex;justify-content:space-between;"><div style="height:5px;background:rgba(255,255,255,0.4);border-radius:2px;width:60%;"></div><div style="height:12px;background:rgba(255,255,255,0.3);border-radius:3px;width:30%;"></div></div>
|
||||
<div class="preview-card-row"><div class="preview-mini-card" style="height:16px;"></div><div class="preview-mini-card" style="height:16px;"></div><div class="preview-mini-card" style="height:16px;"></div><div class="preview-mini-card" style="height:16px;"></div></div>
|
||||
<div class="preview-card-row"><div class="preview-mini-card" style="height:25px;"></div><div class="preview-mini-card" style="height:25px;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-num">Screen 18</div>
|
||||
<div class="card-name">Employee Dashboard</div>
|
||||
<div class="card-desc">Personal dashboard: quick actions, leave balance, payslip, announcements</div>
|
||||
<span class="card-tag tag-employee">Employee</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="19-my-leave.html" class="mockup-card">
|
||||
<div class="card-preview" style="background:linear-gradient(135deg,#2DD4BF,#059669);">
|
||||
<div class="card-preview-num">19</div>
|
||||
<div class="preview-sidebar"></div>
|
||||
<div class="preview-topbar"></div>
|
||||
<div class="preview-content">
|
||||
<div class="preview-card-row" style="margin-bottom:4px;"><div class="preview-mini-card" style="height:20px;"></div><div class="preview-mini-card" style="height:20px;"></div><div class="preview-mini-card" style="height:20px;"></div></div>
|
||||
<div style="background:rgba(255,255,255,0.2);border-radius:4px;padding:5px;margin-bottom:4px;"><div style="display:grid;grid-template-columns:1fr 1fr;gap:3px;"><div style="height:10px;background:rgba(255,255,255,0.3);border-radius:2px;"></div><div style="height:10px;background:rgba(255,255,255,0.3);border-radius:2px;"></div></div></div>
|
||||
<div class="preview-table-row"></div><div class="preview-table-row"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-num">Screen 19</div>
|
||||
<div class="card-name">My Leave</div>
|
||||
<div class="card-desc">Leave balances, inline request form, and leave history</div>
|
||||
<span class="card-tag tag-employee">Employee</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="20-org-chart.html" class="mockup-card">
|
||||
<div class="card-preview" style="background:linear-gradient(135deg,#6366F1,#8B5CF6);">
|
||||
<div class="card-preview-num">20</div>
|
||||
<div class="preview-sidebar"></div>
|
||||
<div class="preview-topbar"></div>
|
||||
<div class="preview-content" style="display:flex;flex-direction:column;align-items:center;padding-top:4px;">
|
||||
<div style="width:40px;height:18px;background:rgba(255,255,255,0.35);border-radius:4px;margin-bottom:4px;"></div>
|
||||
<div style="width:2px;height:8px;background:rgba(255,255,255,0.3);"></div>
|
||||
<div style="display:flex;gap:6px;align-items:flex-start;">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;"><div style="width:2px;height:8px;background:rgba(255,255,255,0.3);"></div><div style="width:30px;height:16px;background:rgba(255,255,255,0.3);border-radius:3px;"></div></div>
|
||||
<div style="display:flex;flex-direction:column;align-items:center;"><div style="width:2px;height:8px;background:rgba(255,255,255,0.3);"></div><div style="width:30px;height:16px;background:rgba(255,255,255,0.3);border-radius:3px;"></div></div>
|
||||
<div style="display:flex;flex-direction:column;align-items:center;"><div style="width:2px;height:8px;background:rgba(255,255,255,0.3);"></div><div style="width:30px;height:16px;background:rgba(255,255,255,0.3);border-radius:3px;"></div></div>
|
||||
<div style="display:flex;flex-direction:column;align-items:center;"><div style="width:2px;height:8px;background:rgba(255,255,255,0.3);"></div><div style="width:30px;height:16px;background:rgba(255,255,255,0.3);border-radius:3px;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-num">Screen 20</div>
|
||||
<div class="card-name">Org Chart</div>
|
||||
<div class="card-desc">CSS-based org tree with CEO, department heads, and team members</div>
|
||||
<span class="card-tag tag-admin">Admin</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<strong style="color:#FFF;">HR Portal v5</strong> — Design Mockup Gallery · 21 files total · All designs self-contained HTML/CSS · May 2026
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user