422 lines
58 KiB
HTML
422 lines
58 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>EDK - Dashboard HRM 4</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.0/dist/cdn.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
|
|
<script src="js/sidebar4.js"></script>
|
|
<script src="js/topbar4.js"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;450;500;600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/style4.css">
|
|
</head>
|
|
<body>
|
|
<div x-data="{ side: true, isMobile: false, aktif: 'hrmdashboard' }" x-init="isMobile = window.innerWidth <= 768; if(isMobile){ side = false } window.addEventListener('resize', function(){ isMobile = window.innerWidth <= 768; if(isMobile){ side = false } else { side = true } })">
|
|
<div x-show="side && isMobile" x-on:click="side = false" class="fixed inset-0 bg-black/60 z-40 md:hidden"></div>
|
|
<crm-sidebar-4></crm-sidebar-4>
|
|
<main id="main" x-bind:class="{ 'shift': side }">
|
|
<hrm-topbar-4></hrm-topbar-4>
|
|
<div class="p-4 md:p-6 space-y-6">
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
|
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">HRM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Human Resources management overview</p></div>
|
|
<div class="flex items-center gap-2">
|
|
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option>Jun 2026</option><option selected>Q2 2026</option><option>FY 2026</option><option>FY 2025</option></select>
|
|
<button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: linear-gradient(135deg, #6366f1, #4f46e5);"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
|
|
<div class="lg:col-span-5 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
|
<h3 class="font-bold text-gray-900 mb-1">Department Distribution</h3>
|
|
<p class="text-xs text-gray-400 mb-3">By category this period</p>
|
|
<div class="flex justify-center"><div class="chart-container" style="height:170px;width:170px;"><canvas id="expenseChart"></canvas></div></div>
|
|
<div class="grid grid-cols-2 gap-1 mt-3 text-[10px]">
|
|
<div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#2563eb"></span> Engineering <span class="font-semibold ml-auto">42%</span></div>
|
|
<div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Marketing <span class="font-semibold ml-auto">22%</span></div>
|
|
<div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Sales <span class="font-semibold ml-auto">15%</span></div>
|
|
<div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Operations <span class="font-semibold ml-auto">12%</span></div>
|
|
<div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#06b6d4"></span> HR & Finance <span class="font-semibold ml-auto">9%</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="lg:col-span-7 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-2">
|
|
<div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Revenue</p><p class="kpi-value">$4.8M</p><span class="kpi-delta">▲ +5.8%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div></div></div>
|
|
<div class="kpi-card-sm kpi-b2"><div class="flex items-start justify-between"><div><p class="kpi-label">Headcount</p><p class="kpi-value">1,247</p><span class="kpi-delta">▲ +28</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
|
|
<div class="kpi-card-sm kpi-b3"><div class="flex items-start justify-between"><div><p class="kpi-label">Attrition Rate</p><p class="kpi-value">12.4%</p><span class="kpi-delta">▼ -1.2pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div></div></div>
|
|
<div class="kpi-card-sm kpi-b4"><div class="flex items-start justify-between"><div><p class="kpi-label">New Hires</p><p class="kpi-value">42</p><span class="kpi-delta">▲ +18%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div></div></div>
|
|
</div>
|
|
<div class="lg:col-span-7 lg:col-start-6 grid grid-cols-2 lg:grid-cols-4 gap-3 anim-fade anim-delay-3">
|
|
<div class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">Engagement</p><p class="kpi-value">78%</p><span class="kpi-delta">▲ +3.2%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div>
|
|
<div class="kpi-card-sm kpi-b6"><div class="flex items-start justify-between"><div><p class="kpi-label">Absenteeism</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.3pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div></div></div>
|
|
<div class="kpi-card-sm kpi-b7"><div class="flex items-start justify-between"><div><p class="kpi-label">Cost Per Hire</p><p class="kpi-value">$4,280</p><span class="kpi-delta">▼ -8.5%</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div></div></div>
|
|
<div class="kpi-card-sm kpi-b8"><div class="flex items-start justify-between"><div><p class="kpi-label">Female Ratio</p><p class="kpi-value">46.2%</p><span class="kpi-delta">▲ +1.8pp</span></div><div class="kpi-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
|
|
<div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">HRM Metrics Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key indicators across all categories</p></div><span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-2">
|
|
<div class="mm-cell"><div class="mm-icon mm-c1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Total Payroll</p><p class="mm-sub">$4.8M ▲ 5.8%</p></div></div>
|
|
<div class="mm-cell"><div class="mm-icon mm-c2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Headcount</p><p class="mm-sub">1,247 ▲ 28</p></div></div>
|
|
<div class="mm-cell"><div class="mm-icon mm-c3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Attrition</p><p class="mm-sub">12.4% ▼ 1.2pp</p></div></div>
|
|
<div class="mm-cell"><div class="mm-icon mm-c4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="mm-title">New Hires</p><p class="mm-sub">42 ▲ 18%</p></div></div>
|
|
<div class="mm-cell"><div class="mm-icon mm-c5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Engagement</p><p class="mm-sub">78% ▲ 3.2%</p></div></div>
|
|
<div class="mm-cell"><div class="mm-icon mm-c6"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div><div><p class="mm-title">Absenteeism</p><p class="mm-sub">2.1% ▼ 0.3pp</p></div></div>
|
|
<div class="mm-cell"><div class="mm-icon mm-c7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div><div><p class="mm-title">Cost Per Hire</p><p class="mm-sub">$4,280 ▼ 8.5%</p></div></div>
|
|
<div class="mm-cell"><div class="mm-icon mm-c8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Female Ratio</p><p class="mm-sub">46.2% ▲ 1.8pp</p></div></div>
|
|
<div class="mm-cell"><div class="mm-icon mm-c9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div><div><p class="mm-title">Avg Salary</p><p class="mm-sub">$3,850 ▲ 4.2%</p></div></div>
|
|
<div class="mm-cell"><div class="mm-icon mm-c10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Benefits Cost</p><p class="mm-sub">8.2% ▲ 0.5%</p></div></div>
|
|
<div class="mm-cell"><div class="mm-icon mm-c11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg></div><div><p class="mm-title">Training Comp.</p><p class="mm-sub">92% ▲ 4%</p></div></div>
|
|
<div class="mm-cell"><div class="mm-icon mm-c12"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><p class="mm-title">Payroll Accuracy</p><p class="mm-sub">92% ▲ 2%</p></div></div>
|
|
<div class="mm-cell"><div class="mm-icon mm-c13"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div><div><p class="mm-title">Open Positions</p><p class="mm-sub">12 ▲ 3</p></div></div>
|
|
<div class="mm-cell"><div class="mm-icon mm-c14"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/></svg></div><div><p class="mm-title">Applications</p><p class="mm-sub">258 ▲ 15%</p></div></div>
|
|
<div class="mm-cell"><div class="mm-icon mm-c15"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9h3.5"/></svg></div><div><p class="mm-title">Avg Time Hire</p><p class="mm-sub">38d ▼ 2d</p></div></div>
|
|
<div class="mm-cell"><div class="mm-icon mm-c16"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Sick Days</p><p class="mm-sub">4.2 ▼ 0.5</p></div></div>
|
|
<div class="mm-cell"><div class="mm-icon mm-c17"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></div><div><p class="mm-title">Retention</p><p class="mm-sub">92.4% ▲ 1.2%</p></div></div>
|
|
<div class="mm-cell"><div class="mm-icon mm-c18"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg></div><div><p class="mm-title">Training Hours</p><p class="mm-sub">6.2h ▲ 0.8h</p></div></div>
|
|
<div class="mm-cell"><div class="mm-icon mm-c19"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><div><p class="mm-title">Courses Active</p><p class="mm-sub">24 ▲ 4</p></div></div>
|
|
<div class="mm-cell"><div class="mm-icon mm-c20"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><p class="mm-title">Departments</p><p class="mm-sub">6 divisions</p></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
|
<div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div><h3 class="font-bold text-gray-900">Headcount Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly employee count growth</p></div>
|
|
<div class="flex items-center gap-3 text-xs">
|
|
<span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#2563eb;"></span> Revenue</span>
|
|
<span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> New Hires</span>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
|
|
</div>
|
|
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
|
|
<div>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">HR Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Key Metrics</h3></div>
|
|
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-3 mt-2">
|
|
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Revenue</p><p class="text-lg font-bold text-gray-900">$4.8M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.8%</span></div>
|
|
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Headcount</p><p class="text-lg font-bold text-gray-900">1,247</p><span class="text-[10px] text-green-600 font-semibold">▲ +28</span></div>
|
|
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">New Hires</p><p class="text-lg font-bold text-gray-900">42</p><span class="text-[10px] text-red-500 font-semibold">▲ +18%</span></div>
|
|
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Attrition</p><p class="text-lg font-bold text-gray-900">12.4%</p><span class="text-[10px] text-green-600 font-semibold">▼ -1.2pp</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>Avg Tenure: <b class="text-gray-700">3.2 yrs</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
|
|
<h3 class="font-bold text-gray-900 mb-1">Recruitment Funnel</h3>
|
|
<p class="text-xs text-gray-400 mb-3">As of June 30, 2026</p>
|
|
<div class="space-y-2.5">
|
|
<div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
|
|
<div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div>
|
|
<div class="flex-1"><p class="text-xs text-gray-500">Applications</p><p class="text-sm font-bold text-gray-900">2,450</p></div>
|
|
</div>
|
|
<div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
|
|
<div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
|
|
<div class="flex-1"><p class="text-xs text-gray-500">Screened</p><p class="text-sm font-bold text-gray-900">1,593</p></div>
|
|
</div>
|
|
<div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
|
|
<div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
|
|
<div class="flex-1"><p class="text-xs text-gray-500">Interviewed</p><p class="text-sm font-bold text-indigo-700">672</p></div>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Acceptance Rate</span><span class="font-semibold text-gray-900">66.1%</span><span>Avg Time</span><span class="font-semibold text-gray-900">38 days</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
|
|
<h3 class="font-bold text-gray-900 mb-1">Gender Diversity</h3>
|
|
<p class="text-xs text-gray-400 mb-3">Company-wide distribution</p>
|
|
<div class="space-y-2.5">
|
|
<div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
|
|
<div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
|
|
<div class="flex-1"><p class="text-xs text-gray-500">Female</p><p class="text-sm font-bold text-green-700">576</p></div>
|
|
</div>
|
|
<div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
|
|
<div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
|
|
<div class="flex-1"><p class="text-xs text-gray-500">Male</p><p class="text-sm font-bold text-amber-600">671</p></div>
|
|
</div>
|
|
<div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
|
|
<div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></div>
|
|
<div class="flex-1"><p class="text-xs text-gray-500">Female in Leadership</p><p class="text-sm font-bold text-red-600">38.5%</p></div>
|
|
</div>
|
|
<div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
|
|
<div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
|
|
<div class="flex-1"><p class="text-xs text-gray-500">Diversity Index</p><p class="text-sm font-bold text-indigo-700">0.72</p></div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 flex justify-between text-xs"><span>Female: <b>46.2%</b></span><span>Male: <b>53.8%</b></span></div>
|
|
</div>
|
|
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
|
|
<h3 class="font-bold text-gray-900 mb-1">Employee Status</h3>
|
|
<p class="text-xs text-gray-400 mb-3">Monthly movement</p>
|
|
<div class="chart-container" style="height:170px;"><canvas id="cashflowChart"></canvas></div>
|
|
<div class="grid grid-cols-3 gap-1 mt-3 text-[10px] text-center">
|
|
<div><span class="font-bold text-green-600">+1,112</span><p class="text-gray-400">Active</p></div>
|
|
<div><span class="font-bold text-red-600">+68</span><p class="text-gray-400">On Leave</p></div>
|
|
<div><span class="font-bold text-red-600">+52</span><p class="text-gray-400">Probation</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div><h3 class="font-bold text-gray-900">Top Performers</h3><p class="text-xs text-gray-400 mt-0.5">Highest rated this quarter</p></div>
|
|
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View All →</span>
|
|
</div>
|
|
<div class="grid-wrap">
|
|
<table class="grid-table">
|
|
<thead><tr><th>Employee</th><th>Department</th><th>Rating</th><th>Projects</th><th>Status</th></tr></thead>
|
|
<tbody>
|
|
<tr><td class="text-xs">Maria Garcia</td><td class="font-mono text-xs">Finance</td><td class="font-mono text-xs">4.8</td><td class="font-mono text-xs">5</td><td><span class="chip chip-indigo">Top Rated</span></td></tr>
|
|
<tr><td class="text-xs">Nathan Reed</td><td class="font-mono text-xs">Marketing</td><td class="font-mono text-xs">4.7</td><td class="font-mono text-xs">8</td><td><span class="chip chip-green">Rising Star</span></td></tr>
|
|
<tr><td class="text-xs">Olivia Wang</td><td class="font-mono text-xs">Engineering</td><td class="font-mono text-xs">4.6</td><td class="font-mono text-xs">10</td><td><span class="chip chip-indigo">Top Rated</span></td></tr>
|
|
<tr><td class="text-xs">Peter Johnson</td><td class="font-mono text-xs">Sales</td><td class="font-mono text-xs">4.4</td><td class="font-mono text-xs">6</td><td><span class="chip chip-amber">Probation</span></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="mt-3 flex justify-between text-xs"><span>Top Rated: <b class="text-amber-600">5 employees</b></span><span>Avg Rating: <b>4.7/5.0</b></span></div>
|
|
</div>
|
|
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div><h3 class="font-bold text-gray-900">HR Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time HR updates</p></div>
|
|
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span> <span class="text-indigo-600 font-medium">Live</span></span>
|
|
</div>
|
|
<div class="activity-feed divide-y divide-gray-100 pr-1">
|
|
<div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
|
|
<div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981">AP</div>
|
|
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Invoice Paid</b> — INV-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Vendor: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
|
|
<span class="chip chip-green self-start">Paid</span>
|
|
</div>
|
|
<div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
|
|
<div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb">AR</div>
|
|
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payment Received</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Invoice INV-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
|
|
<span class="chip chip-green self-start">Received</span>
|
|
</div>
|
|
<div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
|
|
<div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#6366f1">GL</div>
|
|
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Journal Posted</b> — Depreciation June</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Fixed Assets depreciation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
|
|
<span class="chip chip-indigo self-start">Posted</span>
|
|
</div>
|
|
<div class="flex gap-3 p-2 rounded-lg hover:bg-gray-50 transition">
|
|
<div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#f97316">TX</div>
|
|
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Tax Filing</b> — PPh 21 June</p><p class="text-xs text-gray-400 mt-0.5">🧾 $38,400 · Filing prepared for submission</p><p class="text-xs text-gray-400">2 hours ago</p></div>
|
|
<span class="chip chip-amber self-start">Pending</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
|
|
<h3 class="font-bold text-gray-900 mb-1">Attendance & Leave</h3>
|
|
<p class="text-xs text-gray-400 mb-3">Q2 2026 performance</p>
|
|
<div class="space-y-2.5">
|
|
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
|
<div class="flex items-center gap-3">
|
|
<div class="gi gc1"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex justify-between items-center">
|
|
<p class="text-xs text-gray-500 font-semibold">Attendance</p>
|
|
<span class="text-[11px] font-semibold text-green-600">$12.4M / $12.0M</span>
|
|
</div>
|
|
<div class="mt-2 progress-bar"><div class="fill" style="width:103%;background:#2563eb;"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
|
<div class="flex items-center gap-3">
|
|
<div class="gi gc5"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex justify-between items-center">
|
|
<p class="text-xs text-gray-500 font-semibold">Days Lost</p>
|
|
<span class="text-[11px] font-semibold">$4.6M / $4.5M</span>
|
|
</div>
|
|
<div class="mt-2 progress-bar"><div class="fill" style="width:102%;background:#f97316;"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
|
<div class="flex items-center gap-3">
|
|
<div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg></div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex justify-between items-center">
|
|
<p class="text-xs text-gray-500 font-semibold">On Leave</p>
|
|
<span class="text-[11px] font-semibold text-green-600">$6.8M / $7.2M</span>
|
|
</div>
|
|
<div class="mt-2 progress-bar"><div class="fill" style="width:94%;background:#ec4899;"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
|
<div class="flex items-center gap-3">
|
|
<div class="gi gc2"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg></div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex justify-between items-center">
|
|
<p class="text-xs text-gray-500 font-semibold">Sick Days</p>
|
|
<span class="text-[11px] font-semibold text-green-600">$2.8M / $2.5M</span>
|
|
</div>
|
|
<div class="mt-2 progress-bar"><div class="fill" style="width:112%;background:#10b981;"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>PTO Balance: <b class="text-green-600">4,856 days</b></span><span class="text-indigo-600">On Track</span></div>
|
|
</div>
|
|
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
|
|
<h3 class="font-bold text-gray-900 mb-1">Training & Development</h3>
|
|
<p class="text-xs text-gray-400 mb-3">Learning & growth metrics</p>
|
|
<div class="space-y-2.5">
|
|
<div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
|
|
<div class="gi gc7"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
|
|
<div class="flex-1"><p class="text-xs text-gray-500">Completion</p><p class="text-sm font-bold text-gray-900">92%</p></div>
|
|
</div>
|
|
<div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
|
|
<div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
|
|
<div class="flex-1"><p class="text-xs text-gray-500">Per Employee</p><p class="text-sm font-bold text-amber-600">6.2h</p></div>
|
|
</div>
|
|
<div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
|
|
<div class="gi gc9"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
|
|
<div class="flex-1"><p class="text-xs text-gray-500">Courses</p><p class="text-sm font-bold text-indigo-700">24</p></div>
|
|
</div>
|
|
<div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
|
|
<div class="gi gc3"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
|
|
<div class="flex-1"><p class="text-xs text-gray-500">Satisfaction</p><p class="text-sm font-bold text-gray-900">87%</p></div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 flex justify-between text-xs"><span>Leadership: <b>78%</b></span><span>Technical: <b>85%</b></span></div>
|
|
</div>
|
|
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
|
|
<h3 class="font-bold text-gray-900 mb-1">Payroll Overview</h3>
|
|
<p class="text-xs text-gray-400 mb-3">Compensation & benefits</p>
|
|
<div class="space-y-2.5">
|
|
<div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
|
|
<div class="gi gc4"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
|
|
<div class="flex-1"><p class="text-xs text-gray-500">Avg Salary</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
|
|
<div class="text-right"><span class="chip chip-blue">$3,850</span></div>
|
|
</div>
|
|
<div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
|
|
<div class="gi gc8"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
|
|
<div class="flex-1"><p class="text-xs text-gray-500">Benefits Cost</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
|
|
<div class="text-right"><span class="chip chip-purple">8.2%</span></div>
|
|
</div>
|
|
<div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
|
|
<div class="gi gc11"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
|
|
<div class="flex-1"><p class="text-xs text-gray-500">YTD Bonus</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
|
|
<div class="text-right"><span class="chip chip-orange">$2.8M</span></div>
|
|
</div>
|
|
<div class="flex items-center gap-3 p-2.5 rounded-lg" style="background:#f8fafc;">
|
|
<div class="gi gc10"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
|
|
<div class="flex-1"><p class="text-xs text-gray-500">Payroll Accuracy</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
|
|
<div class="text-right"><span class="chip chip-red">92%</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div><h3 class="font-bold text-gray-900">Open Positions</h3><p class="text-xs text-gray-400 mt-0.5">Active job openings</p></div>
|
|
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">View Full →</span>
|
|
</div>
|
|
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
|
<div class="grid-wrap">
|
|
<table class="grid-table" style="background:transparent;">
|
|
<thead><tr><th>Position</th><th>Department</th><th>Applications</th><th>Status</th></tr></thead>
|
|
<tbody>
|
|
<tr><td class="font-mono text-xs">1-1000</td><td>Cash & Bank</td><td class="font-mono text-xs text-green-600">$5,200,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">1-2000</td><td>Accounts Receivable</td><td class="font-mono text-xs text-green-600">$4,600,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">1-3000</td><td>Inventory</td><td class="font-mono text-xs text-green-600">$3,800,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">1-4000</td><td>Fixed Assets - Net</td><td class="font-mono text-xs text-green-600">$3,400,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">2-1000</td><td>Accounts Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,800,000</td></tr>
|
|
<tr><td class="font-mono text-xs">2-2000</td><td>Accrued Expenses</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,200,000</td></tr>
|
|
<tr><td class="font-mono text-xs">2-3000</td><td>Tax Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$580,000</td></tr>
|
|
<tr><td class="font-mono text-xs">3-1000</td><td>Retained Earnings</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$8,420,000</td></tr>
|
|
<tr><td class="font-mono text-xs">3-2000</td><td>Common Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,000,000</td></tr>
|
|
<tr><td class="font-mono text-xs">3-3000</td><td>Additional Paid-in Capital</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,500,000</td></tr>
|
|
<tr><td class="font-mono text-xs">1-5000</td><td>Prepaid Expenses</td><td class="font-mono text-xs text-green-600">$420,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">1-6000</td><td>Short-term Investments</td><td class="font-mono text-xs text-green-600">$950,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">1-7000</td><td>Marketable Securities</td><td class="font-mono text-xs text-green-600">$780,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">2-4000</td><td>Notes Payable (Short)</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$450,000</td></tr>
|
|
<tr><td class="font-mono text-xs">2-5000</td><td>Deferred Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
|
|
<tr><td class="font-mono text-xs">2-6000</td><td>Wages Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$275,000</td></tr>
|
|
<tr><td class="font-mono text-xs">2-7000</td><td>Interest Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$98,000</td></tr>
|
|
<tr><td class="font-mono text-xs">2-8000</td><td>Dividends Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$150,000</td></tr>
|
|
<tr><td class="font-mono text-xs">1-8000</td><td>Land & Buildings</td><td class="font-mono text-xs text-green-600">$2,600,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">1-9000</td><td>Equipment & Machinery</td><td class="font-mono text-xs text-green-600">$1,850,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">1-9100</td><td>Vehicles</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">1-9200</td><td>Furniture & Fixtures</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">1-9300</td><td>Computer Equipment</td><td class="font-mono text-xs text-green-600">$480,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">2-9000</td><td>Long-term Debt</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,400,000</td></tr>
|
|
<tr><td class="font-mono text-xs">2-9100</td><td>Bonds Payable</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$1,600,000</td></tr>
|
|
<tr><td class="font-mono text-xs">2-9200</td><td>Lease Obligations</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$850,000</td></tr>
|
|
<tr><td class="font-mono text-xs">2-9300</td><td>Pension Liability</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$420,000</td></tr>
|
|
<tr><td class="font-mono text-xs">3-4000</td><td>Preferred Stock</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$500,000</td></tr>
|
|
<tr><td class="font-mono text-xs">3-5000</td><td>Treasury Stock</td><td class="font-mono text-xs text-green-600">$200,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">4-1000</td><td>Revenue - Product A</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$5,600,000</td></tr>
|
|
<tr><td class="font-mono text-xs">4-2000</td><td>Revenue - Product B</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$3,800,000</td></tr>
|
|
<tr><td class="font-mono text-xs">4-3000</td><td>Service Revenue</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$2,100,000</td></tr>
|
|
<tr><td class="font-mono text-xs">4-4000</td><td>Interest Income</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$320,000</td></tr>
|
|
<tr><td class="font-mono text-xs">5-1000</td><td>COGS - Product A</td><td class="font-mono text-xs text-green-600">$2,800,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">5-2000</td><td>COGS - Product B</td><td class="font-mono text-xs text-green-600">$1,900,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">6-1000</td><td>Salaries & Wages</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">6-2000</td><td>Rent & Utilities</td><td class="font-mono text-xs text-green-600">$680,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">6-3000</td><td>Marketing & Advertising</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">6-4000</td><td>Depreciation Expense</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">6-5000</td><td>Insurance Expense</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">6-6000</td><td>Travel & Entertainment</td><td class="font-mono text-xs text-green-600">$95,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">6-7000</td><td>Professional Fees</td><td class="font-mono text-xs text-green-600">$220,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">6-8000</td><td>IT & Software</td><td class="font-mono text-xs text-green-600">$340,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">6-9000</td><td>Training & Development</td><td class="font-mono text-xs text-green-600">$65,000</td><td class="font-mono text-xs">—</td></tr>
|
|
<tr><td class="font-mono text-xs">7-1000</td><td>Gain on Asset Sale</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$85,000</td></tr>
|
|
<tr><td class="font-mono text-xs">7-2000</td><td>Foreign Exchange Gain</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">$42,000</td></tr>
|
|
<tr><td class="font-mono text-xs">8-1000</td><td>Income Tax Expense</td><td class="font-mono text-xs text-green-600">$620,000</td><td class="font-mono text-xs">—</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs font-semibold"><span>Total Openings: <span class="text-green-600">12</span></span><span>Total Applicants: <span class="text-red-600">258</span></span></div>
|
|
</div>
|
|
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div><h3 class="font-bold text-gray-900">Upcoming Birthdays & Events</h3><p class="text-xs text-gray-400 mt-0.5">Next 7 days celebrations</p></div>
|
|
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Events →</span>
|
|
</div>
|
|
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
|
<div class="grid-wrap">
|
|
<table class="grid-table" style="background:transparent;">
|
|
<thead><tr><th>Name</th><th>Event</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
|
|
<tbody>
|
|
<tr><td class="font-mono text-xs">INV-0882</td><td>TechDistrib Inc.</td><td class="font-mono text-xs">$24,500</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
|
<tr><td class="font-mono text-xs">INV-0885</td><td>CloudHost Ltd.</td><td class="font-mono text-xs">$12,800</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
|
<tr><td class="font-mono text-xs">INV-0888</td><td>OfficePro Supply</td><td class="font-mono text-xs">$6,200</td><td class="text-xs">Jul 10</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
|
<tr><td class="font-mono text-xs">INV-0890</td><td>Consulting Plus</td><td class="font-mono text-xs">$18,000</td><td class="text-xs">Jul 12</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
|
<tr><td class="font-mono text-xs">INV-0875</td><td>MegaNetwork</td><td class="font-mono text-xs">$32,000</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
|
<tr><td class="font-mono text-xs">INV-0901</td><td>DataSys Solutions</td><td class="font-mono text-xs">$45,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
|
<tr><td class="font-mono text-xs">INV-0902</td><td>Prime Logistics</td><td class="font-mono text-xs">$15,600</td><td class="text-xs">Jul 04</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
|
<tr><td class="font-mono text-xs">INV-0903</td><td>GreenEnergy Corp</td><td class="font-mono text-xs">$28,900</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
|
<tr><td class="font-mono text-xs">INV-0904</td><td>SmartBuild Ltd.</td><td class="font-mono text-xs">$8,750</td><td class="text-xs">Jul 07</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
|
<tr><td class="font-mono text-xs">INV-0905</td><td>MediCare Supplies</td><td class="font-mono text-xs">$19,300</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>This Week: <b class="text-gray-900">5 events</b></span><span>Celebrations: <b class="text-red-500">3 birthdays</b></span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script src="js/script.js"></script>
|
|
<script src="js/dashboard-hrm.js"></script>
|
|
</body>
|
|
</html>
|