deploy: hr-portal-designs
This commit is contained in:
TenX PM
@@ -0,0 +1,409 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HR Portal — Employee Dashboard</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; background: #F8FAFC; color: #0F172A; display: flex; min-height: 100vh; }
|
||||
|
||||
/* SIDEBAR */
|
||||
.sidebar {
|
||||
width: 240px; min-height: 100vh; background: #1E293B;
|
||||
display: flex; flex-direction: column; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0;
|
||||
}
|
||||
.sidebar-logo {
|
||||
padding: 20px 20px 16px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
}
|
||||
.sidebar-logo-icon {
|
||||
width: 36px; height: 36px; background: #4F46E5; border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||
}
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.sidebar-nav { padding: 16px 0; flex: 1; }
|
||||
.nav-section-label {
|
||||
font-size: 10px; font-weight: 600; color: #475569; text-transform: uppercase;
|
||||
letter-spacing: 0.8px; padding: 12px 20px 6px;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 10px 20px; font-size: 14px; font-weight: 500; color: #94A3B8;
|
||||
cursor: pointer; border-left: 3px solid transparent; transition: all 0.15s;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.nav-item.active {
|
||||
color: #818CF8; background: rgba(79,70,229,0.15);
|
||||
border-left-color: #4F46E5; font-weight: 600;
|
||||
}
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.sidebar-footer {
|
||||
padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
.sidebar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm {
|
||||
width: 34px; height: 34px; border-radius: 50%; background: #4F46E5;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0;
|
||||
}
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #E2E8F0; }
|
||||
.sidebar-user-role { font-size: 11px; color: #64748B; }
|
||||
|
||||
/* MAIN */
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
|
||||
/* TOP BAR */
|
||||
.topbar {
|
||||
height: 64px; background: #fff; border-bottom: 1px solid #E2E8F0;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 0 28px; position: sticky; top: 0; z-index: 10;
|
||||
}
|
||||
.topbar-greeting { font-size: 16px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-greeting span { font-weight: 400; color: #64748B; font-size: 14px; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.icon-btn {
|
||||
width: 38px; height: 38px; border-radius: 8px; background: #F1F5F9;
|
||||
border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot {
|
||||
position: absolute; top: 8px; right: 8px;
|
||||
width: 8px; height: 8px; background: #EF4444; border-radius: 50%;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
.topbar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar {
|
||||
width: 38px; height: 38px; border-radius: 50%; background: #4F46E5;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0;
|
||||
}
|
||||
.topbar-user-info { text-align: right; }
|
||||
.topbar-user-name { font-size: 14px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-user-id { font-size: 12px; color: #64748B; }
|
||||
|
||||
/* CONTENT */
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-title { font-size: 20px; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
|
||||
.page-subtitle { font-size: 13px; color: #64748B; margin-bottom: 24px; }
|
||||
|
||||
/* CARDS GRID */
|
||||
.cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 28px; }
|
||||
.card {
|
||||
background: #fff; border-radius: 12px; padding: 20px 24px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
|
||||
border: 1px solid #F1F5F9;
|
||||
}
|
||||
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
|
||||
.card-label { font-size: 12px; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.card-icon {
|
||||
width: 36px; height: 36px; border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.card-icon.indigo { background: #EEF2FF; }
|
||||
.card-icon.green { background: #ECFDF5; }
|
||||
.card-icon.amber { background: #FFFBEB; }
|
||||
.card-icon.blue { background: #EFF6FF; }
|
||||
.card-icon svg { width: 18px; height: 18px; }
|
||||
.card-icon.indigo svg { color: #4F46E5; }
|
||||
.card-icon.green svg { color: #10B981; }
|
||||
.card-icon.amber svg { color: #F59E0B; }
|
||||
.card-icon.blue svg { color: #3B82F6; }
|
||||
.card-value { font-size: 26px; font-weight: 700; color: #0F172A; margin-bottom: 4px; line-height: 1; }
|
||||
.card-meta { font-size: 12px; color: #64748B; }
|
||||
.card-leave-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
|
||||
.leave-chip { text-align: center; background: #F8FAFC; border-radius: 6px; padding: 8px 4px; }
|
||||
.leave-chip-label { font-size: 10px; font-weight: 600; color: #64748B; text-transform: uppercase; }
|
||||
.leave-chip-val { font-size: 18px; font-weight: 700; color: #0F172A; margin: 2px 0; }
|
||||
.leave-chip-sub { font-size: 10px; color: #94A3B8; }
|
||||
|
||||
/* SECTION */
|
||||
.section-title { font-size: 15px; font-weight: 700; color: #0F172A; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.view-all { font-size: 12px; font-weight: 500; color: #4F46E5; cursor: pointer; text-decoration: none; }
|
||||
|
||||
/* ANNOUNCEMENTS */
|
||||
.announcements-list { display: flex; flex-direction: column; gap: 12px; }
|
||||
.announcement-item {
|
||||
background: #fff; border-radius: 10px; padding: 16px 20px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
border: 1px solid #F1F5F9;
|
||||
display: flex; align-items: flex-start; gap: 14px;
|
||||
}
|
||||
.ann-dot { width: 8px; height: 8px; border-radius: 50%; background: #4F46E5; margin-top: 5px; flex-shrink: 0; }
|
||||
.ann-title { font-size: 14px; font-weight: 600; color: #0F172A; margin-bottom: 4px; }
|
||||
.ann-body { font-size: 13px; color: #64748B; margin-bottom: 8px; line-height: 1.5; }
|
||||
.ann-meta { display: flex; align-items: center; gap: 8px; }
|
||||
.badge {
|
||||
display: inline-flex; align-items: center; padding: 3px 9px;
|
||||
border-radius: 999px; font-size: 11px; font-weight: 600;
|
||||
}
|
||||
.badge-indigo { background: #EEF2FF; color: #4F46E5; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-amber { background: #FFFBEB; color: #D97706; }
|
||||
.badge-red { background: #FEF2F2; color: #DC2626; }
|
||||
.badge-gray { background: #F1F5F9; color: #475569; }
|
||||
.ann-date { font-size: 11px; color: #94A3B8; }
|
||||
|
||||
/* TWO COLS */
|
||||
.two-cols { display: grid; grid-template-columns: 1fr 340px; gap: 20px; }
|
||||
|
||||
/* QUICK ACTIONS */
|
||||
.quick-actions { display: flex; flex-direction: column; gap: 12px; }
|
||||
.quick-action-btn {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 14px 18px; background: #fff; border: 1.5px solid #E2E8F0;
|
||||
border-radius: 10px; cursor: pointer; font-family: 'Inter', sans-serif;
|
||||
font-size: 14px; font-weight: 600; color: #4F46E5; transition: all 0.15s;
|
||||
}
|
||||
.quick-action-btn:hover { background: #EEF2FF; border-color: #4F46E5; }
|
||||
.quick-action-btn svg { width: 20px; height: 20px; color: #4F46E5; }
|
||||
.quick-action-btn .action-desc { font-size: 11px; font-weight: 400; color: #94A3B8; margin-top: 1px; }
|
||||
.action-text { display: flex; flex-direction: column; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- SIDEBAR -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="sidebar-logo-text">TechCorp HR</div>
|
||||
<div class="sidebar-logo-sub">Employee Portal</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main Menu</div>
|
||||
<a class="nav-item active" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
||||
Dashboard
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
My Profile
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
Attendance
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
|
||||
Leave
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||
Payslips
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
|
||||
Reimbursements
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
||||
Tax & Form 16
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
Announcements
|
||||
</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-user">
|
||||
<div class="avatar-sm">RS</div>
|
||||
<div>
|
||||
<div class="sidebar-user-name">Rahul Sharma</div>
|
||||
<div class="sidebar-user-role">EMP-00247 · Engineering</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- MAIN -->
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div>
|
||||
<div class="topbar-greeting">Good morning, Rahul Sharma <span>— Monday, 4 May 2026</span></div>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<button class="icon-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
<span class="notif-dot"></span>
|
||||
</button>
|
||||
<div class="topbar-user">
|
||||
<div>
|
||||
<div class="topbar-user-name">Rahul Sharma</div>
|
||||
<div class="topbar-user-id">EMP-00247</div>
|
||||
</div>
|
||||
<div class="avatar">RS</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-title">My Dashboard</div>
|
||||
<div class="page-subtitle">Here's what's happening with your account today.</div>
|
||||
|
||||
<!-- SUMMARY CARDS -->
|
||||
<div class="cards-grid">
|
||||
<!-- Leave Balance -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-label">Leave Balance</div>
|
||||
<div class="card-icon indigo">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-leave-grid">
|
||||
<div class="leave-chip">
|
||||
<div class="leave-chip-label">CL</div>
|
||||
<div class="leave-chip-val">8</div>
|
||||
<div class="leave-chip-sub">of 12</div>
|
||||
</div>
|
||||
<div class="leave-chip">
|
||||
<div class="leave-chip-label">SL</div>
|
||||
<div class="leave-chip-val">10</div>
|
||||
<div class="leave-chip-sub">of 12</div>
|
||||
</div>
|
||||
<div class="leave-chip">
|
||||
<div class="leave-chip-label">EL</div>
|
||||
<div class="leave-chip-val">12</div>
|
||||
<div class="leave-chip-sub">of 15</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Attendance -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-label">Attendance — May</div>
|
||||
<div class="card-icon green">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-value">21 <span style="font-size:15px;color:#64748B;font-weight:500">/ 22</span></div>
|
||||
<div class="card-meta" style="margin-top:6px;">
|
||||
<span style="color:#10B981;font-weight:600;">95.4%</span> attendance rate this month
|
||||
</div>
|
||||
<div style="margin-top:10px;height:6px;background:#F1F5F9;border-radius:999px;">
|
||||
<div style="width:95.4%;height:100%;background:#10B981;border-radius:999px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reimbursements -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-label">Pending Reimbursement</div>
|
||||
<div class="card-icon amber">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-value">₹4,500</div>
|
||||
<div class="card-meta">2 claims awaiting approval</div>
|
||||
</div>
|
||||
|
||||
<!-- Holidays -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-label">Upcoming Holidays</div>
|
||||
<div class="card-icon blue">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-value">2</div>
|
||||
<div class="card-meta" style="line-height:1.6;">Buddha Purnima · May 12<br/>Maharashtra Day · May 19</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BOTTOM TWO-COL -->
|
||||
<div class="two-cols">
|
||||
<!-- ANNOUNCEMENTS -->
|
||||
<div>
|
||||
<div class="section-title">
|
||||
Recent Announcements
|
||||
<a href="#" class="view-all">View all →</a>
|
||||
</div>
|
||||
<div class="announcements-list">
|
||||
<div class="announcement-item">
|
||||
<div class="ann-dot"></div>
|
||||
<div style="flex:1;">
|
||||
<div class="ann-title">Annual Performance Review — FY 2025-26</div>
|
||||
<div class="ann-body">The annual appraisal cycle begins on May 15. All employees must complete their self-assessment by May 25. Managers to complete final ratings by June 5.</div>
|
||||
<div class="ann-meta">
|
||||
<span class="badge badge-indigo">HR</span>
|
||||
<span class="ann-date">Posted May 1, 2026</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="announcement-item">
|
||||
<div class="ann-dot" style="background:#10B981;"></div>
|
||||
<div style="flex:1;">
|
||||
<div class="ann-title">New Health Insurance Benefits — Effective June 2026</div>
|
||||
<div class="ann-body">The company has upgraded health insurance coverage. Individual limit increases to ₹5L, family floater to ₹10L. Enrolment window opens May 20.</div>
|
||||
<div class="ann-meta">
|
||||
<span class="badge badge-green">Benefits</span>
|
||||
<span class="ann-date">Posted April 28, 2026</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="announcement-item">
|
||||
<div class="ann-dot" style="background:#F59E0B;"></div>
|
||||
<div style="flex:1;">
|
||||
<div class="ann-title">Office Relocation — Andheri East Floor 3</div>
|
||||
<div class="ann-body">Engineering and Product teams will move to Floor 3 of the Andheri East office effective May 10. Facilities team will assist with migration.</div>
|
||||
<div class="ann-meta">
|
||||
<span class="badge badge-amber">Admin</span>
|
||||
<span class="ann-date">Posted April 25, 2026</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- QUICK ACTIONS -->
|
||||
<div>
|
||||
<div class="section-title">Quick Actions</div>
|
||||
<div class="quick-actions">
|
||||
<button class="quick-action-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
<div class="action-text">
|
||||
<span>Apply for Leave</span>
|
||||
<span class="action-desc">Submit a new leave request</span>
|
||||
</div>
|
||||
</button>
|
||||
<button class="quick-action-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
|
||||
<div class="action-text">
|
||||
<span>Mark Attendance</span>
|
||||
<span class="action-desc">Log today's attendance status</span>
|
||||
</div>
|
||||
</button>
|
||||
<button class="quick-action-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/></svg>
|
||||
<div class="action-text">
|
||||
<span>Submit Reimbursement</span>
|
||||
<span class="action-desc">Upload and claim expenses</span>
|
||||
</div>
|
||||
</button>
|
||||
<button class="quick-action-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
<div class="action-text">
|
||||
<span>Download April Payslip</span>
|
||||
<span class="action-desc">Net Pay: ₹68,500</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user