initial commit
This commit is contained in:
@@ -0,0 +1,443 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardCrm1";
|
||||
ViewData["SidebarVariant"] = "1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style1.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">CRM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Customer Relationship Management — Period: Q2 2026</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-blue-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: #3b82f6;"><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">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">CRM 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-blue-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">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">▲ +15.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">▲ +22.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">▲ +9.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">▲ +2.1pp</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>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></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">$2.46M</p><span class="kpi-delta">▲ +15.3%</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">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">▲ +22.1%</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">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">▲ +2.1pp</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">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">▲ +9.3%</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">Avg Deal Size</p><p class="kpi-value">$14.3K</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" 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">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">▲ +12.4%</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">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.4pp</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">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">▲ +8.7%</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">CRM 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-blue-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 Revenue</p><p class="mm-sub">$2.46M ▲ 15.3%</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">Pipeline Value</p><p class="mm-sub">$4.83M ▲ 22.1%</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">Win Rate</p><p class="mm-sub">34.2% ▲ 2.1pp</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">Customers</p><p class="mm-sub">1,847 ▲ 9.3%</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">Avg Deal Size</p><p class="mm-sub">$14.3K ▲ 5.8%</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">CLV</p><p class="mm-sub">$48.6K ▲ 12.4%</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">Churn Rate</p><p class="mm-sub">2.1% ▼ 0.4pp</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">MRR</p><p class="mm-sub">$128K ▲ 8.7%</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">Leads</p><p class="mm-sub">2,450 ▲ 18%</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">Deals</p><p class="mm-sub">640 ▲ 12%</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">Conversion</p><p class="mm-sub">4.7% ▲ 0.8%</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">CSAT</p><p class="mm-sub">4.2 ▲ 0.3</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">Contacts</p><p class="mm-sub">3,250 ▲ 14%</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">NPS Score</p><p class="mm-sub">72 ▲ 5pts</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 Cycle</p><p class="mm-sub">62 days ▼ 3d</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">Response Time</p><p class="mm-sub">2.4hrs ▼ 0.3</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">SLA</p><p class="mm-sub">94.2% ▲ 2.1%</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">Email Open</p><p class="mm-sub">24.5% ▲ 2.3%</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">Campaigns</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">Enterprise</p><p class="mm-sub">35% rev share</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">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</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> Target</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Lead Sources</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> Website <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> Referral <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> Social <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> Email <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> Others <span class="font-semibold ml-auto">9%</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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">As of Q2 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">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</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">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</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">Avg Deal Size</p><p class="text-sm font-bold text-blue-700">$14.3K</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 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">Deal Stages</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Pipeline by stage</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">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</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">Qualified</p><p class="text-sm font-bold text-amber-600">640</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">Negotiation</p><p class="text-sm font-bold text-red-600">156</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">Closed Won</p><p class="text-sm font-bold text-blue-700">89</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</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">Sales Activity</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">+245</span><p class="text-gray-400">Calls</p></div>
|
||||
<div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
|
||||
<div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</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">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">DL-2026-0421</td><td>Enterprise SaaS contract</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">Negotiation</td><td><span class="chip chip-indigo">Active</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">DL-2026-0420</td><td>Q3 renewal - MegaCorp</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">Closed Won</td><td><span class="chip chip-indigo">Active</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">DL-2026-0419</td><td>Consulting engagement</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">Qualified</td><td><span class="chip chip-indigo">Active</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">DL-2026-0418</td><td>New lead - TechStart</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">Prospecting</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</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">CRM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">DL</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Deal Won</b> — DL-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Customer: TechDistrib · SaaS</p><p class="text-xs text-gray-400">12 min ago</p></div>
|
||||
<span class="chip chip-green self-start">Won</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">LD</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Lead Created</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Source: Website referral</p><p class="text-xs text-gray-400">35 min ago</p></div>
|
||||
<span class="chip chip-green self-start">New</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">DL</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Deal Updated</b> — Q3 renewal</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Stage moved to Negotiation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
|
||||
<span class="chip chip-indigo self-start">Updated</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">EM</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Email Sent</b> — Campaign Q2</p><p class="text-xs text-gray-400 mt-0.5">📧 2,450 recipients · Open rate 24.5%</p><p class="text-xs text-gray-400">2 hours ago</p></div>
|
||||
<span class="chip chip-amber self-start">Sent</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">Conversion Metrics</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">Leads→MQL</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">68% / 65%</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">MQL→SQL</p>
|
||||
<span class="text-[11px] font-semibold">42% / 40%</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">SQL→Won</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">34% / 32%</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">Overall CVR</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">4.7% / 4.5%</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>Target CVR: <b class="text-green-600">5%</b></span><span class="text-blue-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">Top Performers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K</p><p class="text-[10px] text-green-600">48%</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">James C.</p><p class="text-sm font-bold text-amber-600">$385K</p><p class="text-[10px] text-green-600">42%</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">Alex L.</p><p class="text-sm font-bold text-blue-700">$312K</p><p class="text-[10px] text-green-600">38%</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">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K</p><p class="text-[10px] text-green-600">35%</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</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">Support Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Customer service KPIs</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">Open Tickets</p><p class="text-sm font-bold text-green-700">48</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">-12%</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">Avg Response</p><p class="text-sm font-bold text-gray-900">2.4 hrs</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">▼ 0.3</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">CSAT Score</p><p class="text-sm font-bold text-amber-600">4.2 / 5.0</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">▲ 0.3</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">Resolution Time</p><p class="text-sm font-bold text-gray-900">6.2 hrs</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">▲ 8%</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">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">Top sources</p></div>
|
||||
<span class="text-xs text-blue-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>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">S-001</td><td>Website</td><td class="font-mono text-xs text-green-600">1,847</td><td class="font-mono text-xs">5.2%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-002</td><td>Referral</td><td class="font-mono text-xs text-green-600">982</td><td class="font-mono text-xs">7.8%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-003</td><td>Social Media</td><td class="font-mono text-xs text-green-600">654</td><td class="font-mono text-xs">3.1%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-004</td><td>Email Campaign</td><td class="font-mono text-xs text-green-600">523</td><td class="font-mono text-xs">4.5%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-005</td><td>Events</td><td class="font-mono text-xs text-green-600">342</td><td class="font-mono text-xs">6.2%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-006</td><td>Partner Network</td><td class="font-mono text-xs text-green-600">298</td><td class="font-mono text-xs">8.1%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-007</td><td>Direct Mail</td><td class="font-mono text-xs text-green-600">187</td><td class="font-mono text-xs">2.8%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-008</td><td>Paid Ads</td><td class="font-mono text-xs text-green-600">148</td><td class="font-mono text-xs">4.1%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-009</td><td>Content Marketing</td><td class="font-mono text-xs text-green-600">420</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-010</td><td>Webinar</td><td class="font-mono text-xs text-green-600">950</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-011</td><td>Inbound Call</td><td class="font-mono text-xs text-green-600">780</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-012</td><td>Chatbot</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">450</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-013</td><td>Trade Show</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">320</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-014</td><td>Affiliate</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">275</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-015</td><td>SMS Campaign</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">98</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-016</td><td>Direct Outreach</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">150</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-017</td><td>YouTube/Video</td><td class="font-mono text-xs text-green-600">2,600</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-018</td><td>Podcast</td><td class="font-mono text-xs text-green-600">1,850</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-019</td><td>LinkedIn Ads</td><td class="font-mono text-xs text-green-600">620</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-020</td><td>Twitter/X</td><td class="font-mono text-xs text-green-600">340</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-021</td><td>Facebook Ads</td><td class="font-mono text-xs text-green-600">480</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-022</td><td>Instagram</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">2,400</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-023</td><td>Google Ads</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">1,600</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-024</td><td>Bing Ads</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">850</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-025</td><td>Retargeting</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">420</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-026</td><td>PR/Media</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">500</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-027</td><td>Sponsorship</td><td class="font-mono text-xs text-green-600">200</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-028</td><td>Community Forum</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">5,600</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-029</td><td>Mobile App</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">3,800</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-030</td><td>QR Code</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">2,100</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-031</td><td>Chat/WhatsApp</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">320</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-032</td><td>SEO Organic</td><td class="font-mono text-xs text-green-600">2,800</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-033</td><td>SEM/PPC</td><td class="font-mono text-xs text-green-600">1,900</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-034</td><td>Sales Team</td><td class="font-mono text-xs text-green-600">2,400</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-035</td><td>Partner Referral</td><td class="font-mono text-xs text-green-600">680</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-036</td><td>Customer Referral</td><td class="font-mono text-xs text-green-600">520</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-037</td><td>Case Study</td><td class="font-mono text-xs text-green-600">310</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-038</td><td>Whitepaper</td><td class="font-mono text-xs text-green-600">180</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-039</td><td>Ebook Download</td><td class="font-mono text-xs text-green-600">95</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-040</td><td>Free Trial</td><td class="font-mono text-xs text-green-600">220</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-041</td><td>Demo Request</td><td class="font-mono text-xs text-green-600">340</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-042</td><td>Consultation</td><td class="font-mono text-xs text-green-600">65</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-043</td><td>Product Launch</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">85</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-044</td><td>Holiday Promo</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">42</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-045</td><td>Survey Response</td><td class="font-mono text-xs text-green-600">620</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 Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</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 Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</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>Contract</th><th>Client</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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>
|
||||
<tr><td class="font-mono text-xs">CT-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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">CT-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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">CT-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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">CT-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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">CT-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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">CT-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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">CT-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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">CT-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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">CT-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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">CT-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-crm.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,445 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardCrm2";
|
||||
ViewData["SidebarVariant"] = "2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style2.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">CRM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Customer Relationship Management — Period: Q2 2026</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-blue-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: #3b82f6;"><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">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">CRM 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-blue-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">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">▲ +15.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">▲ +22.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-red-500 font-semibold">▲ +9.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">▲ +2.1pp</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>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></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">$2.46M</p><span class="kpi-delta">▲ +15.3%</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">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">▲ +22.1%</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">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">▲ +2.1pp</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">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">▲ +9.3%</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">Avg Deal Size</p><p class="kpi-value">$14.3K</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" 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">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">▲ +12.4%</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">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.4pp</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">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">▲ +8.7%</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">CRM 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-blue-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 Revenue</p><p class="mm-sub">$2.46M ▲ 15.3%</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">Pipeline Value</p><p class="mm-sub">$4.83M ▲ 22.1%</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">Win Rate</p><p class="mm-sub">34.2% ▲ 2.1pp</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">Customers</p><p class="mm-sub">1,847 ▲ 9.3%</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">Avg Deal Size</p><p class="mm-sub">$14.3K ▲ 5.8%</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">CLV</p><p class="mm-sub">$48.6K ▲ 12.4%</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">Churn Rate</p><p class="mm-sub">2.1% ▼ 0.4pp</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">MRR</p><p class="mm-sub">$128K ▲ 8.7%</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">Leads</p><p class="mm-sub">2,450 ▲ 18%</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">Deals</p><p class="mm-sub">640 ▲ 12%</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">Conversion</p><p class="mm-sub">4.7% ▲ 0.8%</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">CSAT</p><p class="mm-sub">4.2 ▲ 0.3</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">Contacts</p><p class="mm-sub">3,250 ▲ 14%</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">NPS Score</p><p class="mm-sub">72 ▲ 5pts</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 Cycle</p><p class="mm-sub">62 days ▼ 3d</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">Response Time</p><p class="mm-sub">2.4hrs ▼ 0.3</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">SLA</p><p class="mm-sub">94.2% ▲ 2.1%</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">Email Open</p><p class="mm-sub">24.5% ▲ 2.3%</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">Campaigns</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">Enterprise</p><p class="mm-sub">35% rev share</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">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</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> Target</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Lead Sources</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> Website <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> Referral <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> Social <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> Email <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> Others <span class="font-semibold ml-auto">9%</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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</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">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</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">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</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">Avg Deal Size</p><p class="text-sm font-bold text-blue-700">$14.3K</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 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">Deal Stages</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Pipeline by stage</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">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</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">Qualified</p><p class="text-sm font-bold text-amber-600">640</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">Negotiation</p><p class="text-sm font-bold text-red-600">156</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">Closed Won</p><p class="text-sm font-bold text-blue-700">89</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</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">Sales Activity</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">+245</span><p class="text-gray-400">Calls</p></div>
|
||||
<div><span class="font-bold text-green-600">+450</span><p class="text-gray-400">Emails</p></div>
|
||||
<div><span class="font-bold text-green-600">+89</span><p class="text-gray-400">Meetings</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">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</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">CRM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">Conversion Metrics</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">Leads→MQL</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">MQL→SQL</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">SQL→Won</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">Overall CVR</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>Target CVR: <b class="text-green-600">5%</b></span><span class="text-blue-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">Top Performers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K 48%</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">James C.</p><p class="text-sm font-bold text-amber-600">$385K 42%</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">Alex L.</p><p class="text-sm font-bold text-blue-700">$312K 38%</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">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K 35%</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</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">Support Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Customer service KPIs</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">Open Tickets</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">Avg Response</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">CSAT Score</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Resolution Time</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</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">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top sources</p></div>
|
||||
<span class="text-xs text-blue-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>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</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 Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</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 Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</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>Contract</th><th>Client</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-crm.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,449 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardCrm3";
|
||||
ViewData["SidebarVariant"] = "3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style3.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">CRM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Customer Relationship Management — Period: Q2 2026</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">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">CRM 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">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">▲ +15.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">▲ +22.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">▲ +9.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">▲ +2.1pp</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>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></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">$2.46M</p><span class="kpi-delta">▲ +15.3%</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">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">▲ +22.1%</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">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">▲ +2.1pp</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">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">▲ +9.3%</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">Avg Deal Size</p><p class="kpi-value">$14.3K</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" 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">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">▲ +12.4%</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">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.4pp</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">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">▲ +8.7%</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">CRM 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 Revenue</p><p class="mm-sub">$2.46M ▲ 15.3%</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">Pipeline Value</p><p class="mm-sub">$4.83M ▲ 22.1%</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">Win Rate</p><p class="mm-sub">34.2% ▲ 2.1pp</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">Customers</p><p class="mm-sub">1,847 ▲ 9.3%</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">Avg Deal Size</p><p class="mm-sub">$14.3K ▲ 5.8%</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">CLV</p><p class="mm-sub">$48.6K ▲ 12.4%</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">Churn Rate</p><p class="mm-sub">2.1% ▼ 0.4pp</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">MRR</p><p class="mm-sub">$128K ▲ 8.7%</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">Leads</p><p class="mm-sub">2,450 ▲ 18%</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">Deals</p><p class="mm-sub">640 ▲ 12%</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">Conversion</p><p class="mm-sub">4.7% ▲ 0.8%</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">CSAT</p><p class="mm-sub">4.2 ▲ 0.3</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">Contacts</p><p class="mm-sub">3,250 ▲ 14%</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">NPS Score</p><p class="mm-sub">72 ▲ 5pts</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 Cycle</p><p class="mm-sub">62 days ▼ 3d</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">Response Time</p><p class="mm-sub">2.4hrs ▼ 0.3</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">SLA</p><p class="mm-sub">94.2% ▲ 2.1%</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">Email Open</p><p class="mm-sub">24.5% ▲ 2.3%</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">Campaigns</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">Enterprise</p><p class="mm-sub">35% rev share</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">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</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> Target</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Lead Sources</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> Website <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> Referral <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> Social <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> Email <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> Others <span class="font-semibold ml-auto">9%</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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</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">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</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">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</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">Avg Deal Size</p><p class="text-sm font-bold text-indigo-700">$14.3K</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 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">Deal Stages</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Pipeline by stage</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">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</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">Qualified</p><p class="text-sm font-bold text-amber-600">640</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">Negotiation</p><p class="text-sm font-bold text-red-600">156</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">Closed Won</p><p class="text-sm font-bold text-indigo-700">89</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</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">Sales Activity</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">+245</span><p class="text-gray-400">Calls</p></div>
|
||||
<div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
|
||||
<div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</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">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</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">CRM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales 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">Conversion Metrics</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">Leads→MQL</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">2,450 / 1,840</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:75%;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">MQL→SQL</p>
|
||||
<span class="text-[11px] font-semibold">640 / 1,840</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:35%;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">SQL→Won</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">89 / 640</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:14%;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">Overall CVR</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">4.7%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:4.7%;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>Target CVR: <b class="text-green-600">5%</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">Top Performers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">48%</span>
|
||||
</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">James C.</p><p class="text-sm font-bold text-amber-600">$385K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">42%</span>
|
||||
</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">Alex L.</p><p class="text-sm font-bold text-indigo-700">$312K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">38%</span>
|
||||
</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">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">35%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</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">Support Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Customer service KPIs</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">Open Tickets</p><p class="text-[10px] text-gray-400">Total pending</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">Avg Response</p><p class="text-[10px] text-gray-400">First reply time</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">CSAT Score</p><p class="text-[10px] text-gray-400">Customer satisfaction</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Resolution Time</p><p class="text-[10px] text-gray-400">Avg close time</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</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">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top sources</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>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</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 Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</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 Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</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>Contract</th><th>Client</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-crm.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,449 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardCrm4";
|
||||
ViewData["SidebarVariant"] = "4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style4.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">CRM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Customer Relationship Management — Period: Q2 2026</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">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">CRM 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">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">▲ +15.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">▲ +22.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">▲ +9.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">▲ +2.1pp</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>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></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">$2.46M</p><span class="kpi-delta">▲ +15.3%</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">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">▲ +22.1%</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">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">▲ +2.1pp</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">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">▲ +9.3%</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">Avg Deal Size</p><p class="kpi-value">$14.3K</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" 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">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">▲ +12.4%</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">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.4pp</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">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">▲ +8.7%</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">CRM 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 Revenue</p><p class="mm-sub">$2.46M ▲ 15.3%</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">Pipeline Value</p><p class="mm-sub">$4.83M ▲ 22.1%</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">Win Rate</p><p class="mm-sub">34.2% ▲ 2.1pp</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">Customers</p><p class="mm-sub">1,847 ▲ 9.3%</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">Avg Deal Size</p><p class="mm-sub">$14.3K ▲ 5.8%</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">CLV</p><p class="mm-sub">$48.6K ▲ 12.4%</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">Churn Rate</p><p class="mm-sub">2.1% ▼ 0.4pp</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">MRR</p><p class="mm-sub">$128K ▲ 8.7%</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">Leads</p><p class="mm-sub">2,450 ▲ 18%</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">Deals</p><p class="mm-sub">640 ▲ 12%</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">Conversion</p><p class="mm-sub">4.7% ▲ 0.8%</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">CSAT</p><p class="mm-sub">4.2 ▲ 0.3</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">Contacts</p><p class="mm-sub">3,250 ▲ 14%</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">NPS Score</p><p class="mm-sub">72 ▲ 5pts</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 Cycle</p><p class="mm-sub">62 days ▼ 3d</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">Response Time</p><p class="mm-sub">2.4hrs ▼ 0.3</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">SLA</p><p class="mm-sub">94.2% ▲ 2.1%</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">Email Open</p><p class="mm-sub">24.5% ▲ 2.3%</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">Campaigns</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">Enterprise</p><p class="mm-sub">35% rev share</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">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</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> Target</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Lead Sources</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> Website <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> Referral <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> Social <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> Email <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> Others <span class="font-semibold ml-auto">9%</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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</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">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</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">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</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">Avg Deal Size</p><p class="text-sm font-bold text-indigo-700">$14.3K</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 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">Deal Stages</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Pipeline by stage</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">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</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">Qualified</p><p class="text-sm font-bold text-amber-600">640</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">Negotiation</p><p class="text-sm font-bold text-red-600">156</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">Closed Won</p><p class="text-sm font-bold text-indigo-700">89</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</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">Sales Activity</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">+245</span><p class="text-gray-400">Calls</p></div>
|
||||
<div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
|
||||
<div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</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">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</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">CRM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales 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">Conversion Metrics</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">Leads→MQL</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">2,450 / 1,840</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:75%;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">MQL→SQL</p>
|
||||
<span class="text-[11px] font-semibold">640 / 1,840</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:35%;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">SQL→Won</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">89 / 640</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:14%;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">Overall CVR</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">4.7%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:4.7%;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>Target CVR: <b class="text-green-600">5%</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">Top Performers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">48%</span>
|
||||
</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">James C.</p><p class="text-sm font-bold text-amber-600">$385K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">42%</span>
|
||||
</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">Alex L.</p><p class="text-sm font-bold text-indigo-700">$312K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">38%</span>
|
||||
</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">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">35%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</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">Support Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Customer service KPIs</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">Open Tickets</p><p class="text-[10px] text-gray-400">Total pending</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">Avg Response</p><p class="text-[10px] text-gray-400">First reply time</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">CSAT Score</p><p class="text-[10px] text-gray-400">Customer satisfaction</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Resolution Time</p><p class="text-[10px] text-gray-400">Avg close time</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</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">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top sources</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>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</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 Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</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 Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</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>Contract</th><th>Client</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-crm.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,374 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardCrm5";
|
||||
ViewData["SidebarVariant"] = "5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style5.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">CRM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Customer Relationship Management — Period: Q2 2026</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-blue-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: #3b82f6;"><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 border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">CRM 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-blue-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">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">▲ +15.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">▲ +22.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">▲ +9.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">▲ +2.1pp</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>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></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">$2.46M</p><span class="kpi-delta">▲ +15.3%</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">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">▲ +22.1%</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">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">▲ +2.1pp</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">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">▲ +9.3%</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">Avg Deal Size</p><p class="kpi-value">$14.3K</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" 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">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">▲ +12.4%</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">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.4pp</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">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">▲ +8.7%</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 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">CRM 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-blue-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 Revenue</p><p class="mm-sub">$2.46M ▲ 15.3%</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">Pipeline Value</p><p class="mm-sub">$4.83M ▲ 22.1%</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">Win Rate</p><p class="mm-sub">34.2% ▲ 2.1pp</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">Customers</p><p class="mm-sub">1,847 ▲ 9.3%</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">Avg Deal Size</p><p class="mm-sub">$14.3K ▲ 5.8%</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">CLV</p><p class="mm-sub">$48.6K ▲ 12.4%</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">Churn Rate</p><p class="mm-sub">2.1% ▼ 0.4pp</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">MRR</p><p class="mm-sub">$128K ▲ 8.7%</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">Leads</p><p class="mm-sub">2,450 ▲ 18%</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">Deals</p><p class="mm-sub">640 ▲ 12%</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">Conversion</p><p class="mm-sub">4.7% ▲ 0.8%</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">CSAT</p><p class="mm-sub">4.2 ▲ 0.3</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">Contacts</p><p class="mm-sub">3,250 ▲ 14%</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">NPS Score</p><p class="mm-sub">72 ▲ 5pts</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 Cycle</p><p class="mm-sub">62 days ▼ 3d</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">Response Time</p><p class="mm-sub">2.4hrs ▼ 0.3</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">SLA</p><p class="mm-sub">94.2% ▲ 2.1%</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">Email Open</p><p class="mm-sub">24.5% ▲ 2.3%</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">Campaigns</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">Enterprise</p><p class="mm-sub">35% rev share</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 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">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</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> Target</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Lead Sources</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> Website <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> Referral <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> Social <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> Email <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> Others <span class="font-semibold ml-auto">9%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</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">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</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">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</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">Avg Deal Size</p><p class="text-sm font-bold text-blue-700">$14.3K</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 days</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Deal Stages</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Pipeline by stage</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">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</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">Qualified</p><p class="text-sm font-bold text-amber-600">640</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">Negotiation</p><p class="text-sm font-bold text-red-600">156</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">Closed Won</p><p class="text-sm font-bold text-blue-700">89</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</b></span></div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Sales Activity</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">+245</span><p class="text-gray-400">Calls</p></div>
|
||||
<div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
|
||||
<div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-white 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">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">DL-2026-0421</td><td>Enterprise SaaS deal</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">Negotiation</td><td><span class="chip chip-indigo">Active</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">DL-2026-0420</td><td>Mid-market upgrade</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">Proposal</td><td><span class="chip chip-indigo">Active</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">DL-2026-0419</td><td>Startup onboarding</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">Qualified</td><td><span class="chip chip-indigo">Active</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">DL-2026-0418</td><td>Contract renewal Q3</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">Closing</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</b></span></div>
|
||||
</div>
|
||||
<div class="bg-white 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">CRM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">DL</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Deal Closed</b> — DL-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Customer: TechDistrib · Enterprise</p><p class="text-xs text-gray-400">12 min ago</p></div>
|
||||
<span class="chip chip-green self-start">Won</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">LD</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Lead Assigned</b> — Lead: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Source: Website</p><p class="text-xs text-gray-400">35 min ago</p></div>
|
||||
<span class="chip chip-green self-start">New</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">OP</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Stage Updated</b> — Deal DL-2026-0741</p><p class="text-xs text-gray-400 mt-0.5">📋 Moved to Negotiation · $42,800</p><p class="text-xs text-gray-400">1 hour ago</p></div>
|
||||
<span class="chip chip-indigo self-start">Updated</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">EM</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Email Sent</b> — Campaign Q3 Launch</p><p class="text-xs text-gray-400 mt-0.5">🧾 2,450 recipients · Open rate: 24.5%</p><p class="text-xs text-gray-400">2 hours ago</p></div>
|
||||
<span class="chip chip-amber self-start">Sent</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Conversion Metrics</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">Leads→MQL</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">2,450 / 1,225</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:50%;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">MQL→SQL</p>
|
||||
<span class="text-[11px] font-semibold">1,225 / 640</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:52%;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">SQL→Won</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">640 / 89</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:14%;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">Overall CVR</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">4.7%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:47%;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>Target CVR: <b class="text-green-600">5%</b></span><span class="text-blue-600">On Track</span></div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Top Performers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K 48%</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">James C.</p><p class="text-sm font-bold text-amber-600">$385K 42%</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">Alex L.</p><p class="text-sm font-bold text-blue-700">$312K 38%</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">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K 35%</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</b></span></div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-6">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Support Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Customer service KPIs</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">Open Tickets</p><p class="text-[10px] text-gray-400">Support backlog</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">142</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">Avg Response</p><p class="text-[10px] text-gray-400">First reply time</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">2.4hrs</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">CSAT Score</p><p class="text-[10px] text-gray-400">Customer satisfaction</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">4.2/5</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">Resolution Time</p><p class="text-[10px] text-gray-400">Avg close time</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">4.2hrs</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-white 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">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">Top sources</p></div>
|
||||
<span class="text-xs text-blue-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>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">WEB-01</td><td>Website Organic</td><td class="font-mono text-xs text-green-600">1,200</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">REF-01</td><td>Referral Program</td><td class="font-mono text-xs text-green-600">860</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">SOC-01</td><td>Social Media</td><td class="font-mono text-xs text-green-600">740</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">EML-01</td><td>Email Campaigns</td><td class="font-mono text-xs text-green-600">490</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">PRT-01</td><td>Partner Network</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">320</td></tr>
|
||||
<tr><td class="font-mono text-xs">EVT-01</td><td>Events & Webinars</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">280</td></tr>
|
||||
<tr><td class="font-mono text-xs">DIR-01</td><td>Direct Outreach</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">195</td></tr>
|
||||
<tr><td class="font-mono text-xs">ADS-01</td><td>Paid Ads</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">180</td></tr>
|
||||
<tr><td class="font-mono text-xs">CON-01</td><td>Content Marketing</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">145</td></tr>
|
||||
<tr><td class="font-mono text-xs">WOM-01</td><td>Word of Mouth</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">120</td></tr>
|
||||
<tr><td class="font-mono text-xs">BLG-01</td><td>Blog & SEO</td><td class="font-mono text-xs text-green-600">320</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">MKT-01</td><td>Marketplace</td><td class="font-mono text-xs text-green-600">280</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">MOB-01</td><td>Mobile App</td><td class="font-mono text-xs text-green-600">210</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">API-01</td><td>API Integration</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">160</td></tr>
|
||||
<tr><td class="font-mono text-xs">RES-01</td><td>Research Portal</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">98</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 Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</span></span></div>
|
||||
</div>
|
||||
<div class="bg-white 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 Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</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>Contract</th><th>Client</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-crm.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,373 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardEam1";
|
||||
ViewData["SidebarVariant"] = "1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style1.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">EAM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Enterprise Asset Management — Period: Q2 2026</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-blue-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: #3b82f6;"><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-2 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Asset 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-blue-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 Assets</p><p class="text-lg font-bold text-gray-900">527</p><span class="text-[10px] text-green-600 font-semibold">▲ +3.4%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Work Orders</p><p class="text-lg font-bold text-gray-900">1,284</p><span class="text-[10px] text-green-600 font-semibold">▲ +12.7%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Equipment</p><p class="text-lg font-bold text-gray-900">3,241</p><span class="text-[10px] text-red-500 font-semibold">▲ +2.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Uptime</p><p class="text-lg font-bold text-gray-900">96.8%</p><span class="text-[10px] text-green-600 font-semibold">▲ +1.4pp</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>OEE: <b class="text-gray-700">84.6%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Card Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key performance indicators</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
<div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Assets</p><p class="kpi-value">527</p><span class="kpi-delta">▲ +3.4%</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">Work Orders</p><p class="kpi-value">1,284</p><span class="kpi-delta">▲ +12.7%</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">Equipment</p><p class="kpi-value">3,241</p><span class="kpi-delta">▲ +2.1%</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">Uptime</p><p class="kpi-value">96.8%</p><span class="kpi-delta">▲ +1.4pp</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 class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">MTBF</p><p class="kpi-value">486hrs</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" 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">MTTR</p><p class="kpi-value">3.2hrs</p><span class="kpi-delta">▼ -0.4hrs</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">Downtime</p><p class="kpi-value">124hrs</p><span class="kpi-delta">▼ -8.3%</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">OEE Score</p><p class="kpi-value">84.6%</p><span class="kpi-delta">▲ +2.1pp</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>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Asset 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-blue-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 Assets</p><p class="mm-sub">527 ▲ 3.4%</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">Work Orders</p><p class="mm-sub">1,284 ▲ 12.7%</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">Equipment</p><p class="mm-sub">3,241 ▲ 2.1%</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">Uptime</p><p class="mm-sub">96.8% ▲ 1.4pp</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">MTBF</p><p class="mm-sub">486hrs ▲ 5.8%</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">MTTR</p><p class="mm-sub">3.2hrs ▼ 0.4hrs</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">Downtime</p><p class="mm-sub">124hrs ▼ 8.3%</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">OEE Score</p><p class="mm-sub">84.6% ▲ 2.1pp</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">Spare Parts</p><p class="mm-sub">8,450 ▲ 11%</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">Vendors</p><p class="mm-sub">142 ▲ 6%</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">Utilization</p><p class="mm-sub">78.4% ▲ 3.2%</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">Compliance</p><p class="mm-sub">94.2% ▲ 1.8pts</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">Technicians</p><p class="mm-sub">87 ▲ 5</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">Facilities</p><p class="mm-sub">12 ▲ 1</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">PM Rate</p><p class="mm-sub">91.5% ▲ 4.1%</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">Response Time</p><p class="mm-sub">1.8hrs ▼ 0.3</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">First Fix</p><p class="mm-sub">86.3% ▲ 2.4%</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">Cost/Work Order</p><p class="mm-sub">$420 ▼ $38</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">Parts Usage</p><p class="mm-sub">12,450 ▲ 845</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">Asset Age</p><p class="mm-sub">6.8 years</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">Asset Health</h3><p class="text-xs text-gray-400 mt-0.5">Asset condition vs maintenance</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> Maintenance</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Asset Category</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> Production <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> Utilities <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> Infrastructure <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> Transport <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> Facilities <span class="font-semibold ml-auto">9%</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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Asset Summary</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">Total Value</p><p class="text-sm font-bold text-gray-900">$24.8M</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">Depreciation</p><p class="text-sm font-bold text-gray-900">$6.2M</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">Net Book Value</p><p class="text-sm font-bold text-blue-700">$18.6M</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Avg Age 6.8yrs</span><span class="font-semibold text-gray-900">6.8yrs</span><span>Health 87.3%</span><span class="font-semibold text-gray-900">87.3%</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">Work Order Status</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Work orders by priority</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">Critical</p><p class="text-sm font-bold text-green-700">312</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">High</p><p class="text-sm font-bold text-amber-600">486</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">Medium</p><p class="text-sm font-bold text-red-600">342</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">Low</p><p class="text-sm font-bold text-blue-700">144</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>OTIF: <b>87.4%</b></span><span>CBR: <b>94.2%</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">Maintenance Activity</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">+142</span><p class="text-gray-400">PM</p></div>
|
||||
<div><span class="font-bold text-red-600">+86</span><p class="text-gray-400">CM</p></div>
|
||||
<div><span class="font-bold text-red-600">+312</span><p class="text-gray-400">Inspection</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">Recent Work Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest maintenance tasks</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Work Order →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>WO#</th><th>Description</th><th>Priority</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">WO-2026-0421</td><td>Monthly PM - Assembly line</td><td class="text-xs"><span class="chip chip-blue">High</span></td><td><span class="chip chip-green">Completed</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">WO-2026-0420</td><td>Vibration analysis - Pump #4</td><td class="text-xs"><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">In Progress</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">WO-2026-0419</td><td>Bearing replacement - Motor B2</td><td class="text-xs"><span class="chip chip-red">Critical</span></td><td><span class="chip chip-indigo">In Progress</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">WO-2026-0418</td><td>Inspection - Safety valve #12</td><td class="text-xs"><span class="chip chip-indigo">Low</span></td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Open: <b class="text-amber-600">4 orders</b></span><span>Total orders: <b>1,284</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">Asset Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time asset updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">PM</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>PM Completed</b> — WO-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">🔧 Machine #A24 · Line 3</p><p class="text-xs text-gray-400">12 min ago</p></div>
|
||||
<span class="chip chip-green self-start">Done</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">CM</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Corrective Action</b> — Pump #B7</p><p class="text-xs text-gray-400 mt-0.5">🔧 Seal replaced · Back online</p><p class="text-xs text-gray-400">35 min ago</p></div>
|
||||
<span class="chip chip-green self-start">Resolved</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">IN</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Inspection</b> — Safety valve #C12</p><p class="text-xs text-gray-400 mt-0.5">📋 Certified · 6 month cycle</p><p class="text-xs text-gray-400">1 hour ago</p></div>
|
||||
<span class="chip chip-indigo self-start">Passed</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">WO</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Work Order</b> — Calibration #D05</p><p class="text-xs text-gray-400 mt-0.5">🧾 Due today · Priority Medium</p><p class="text-xs text-gray-400">2 hours ago</p></div>
|
||||
<span class="chip chip-amber self-start">Scheduled</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">PM Compliance</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">Schedule</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">98% / 95%</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">Priority</p>
|
||||
<span class="text-[11px] font-semibold">92% / 90%</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">Routine</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">95% / 100%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:95%;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">Emergency</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">89% / 85%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:105%;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>Target PM: <b class="text-green-600">92%</b></span><span class="text-blue-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">Top Technicians</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Sarah M.</p><p class="text-sm font-bold text-gray-900">96.2% · 124</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">James C.</p><p class="text-sm font-bold text-amber-600">94.8% · 112</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">Alex L.</p><p class="text-sm font-bold text-blue-700">92.1% · 98</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">Emma P.</p><p class="text-sm font-bold text-gray-900">89.7% · 87</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top Orders: <b>28</b></span><span>Avg Time: <b>4.2hrs</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">Maintenance Schedule</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Upcoming PM tasks</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">Weekly PM</p><p class="text-[10px] text-gray-400">Lubrication & inspection</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">Biweekly PM</p><p class="text-[10px] text-gray-400">Belt tension & alignment</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">Monthly PM</p><p class="text-[10px] text-gray-400">Filter replacement</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Annual</p><p class="text-[10px] text-gray-400">Full system overhaul</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</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">Asset Inventory</h3><p class="text-xs text-gray-400 mt-0.5">Top locations</p></div>
|
||||
<span class="text-xs text-blue-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>Asset ID</th><th>Asset Name</th><th>Value</th><th>Condition</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">A-1000</td><td>CNC Machine #1</td><td class="font-mono text-xs text-green-600">$1,200,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-2000</td><td>Conveyor Line #3</td><td class="font-mono text-xs text-green-600">$860,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-3000</td><td>HVAC System</td><td class="font-mono text-xs text-green-600">$720,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-4000</td><td>Boiler #2</td><td class="font-mono text-xs text-green-600">$580,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-5000</td><td>Compressor #7</td><td class="font-mono text-xs text-green-600">$420,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-6000</td><td>Chiller #1</td><td class="font-mono text-xs text-green-600">$650,000</td><td><span class="chip chip-red">Critical</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-7000</td><td>Pump Station #B</td><td class="font-mono text-xs text-green-600">$340,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-8000</td><td>Transformer #1</td><td class="font-mono text-xs text-green-600">$510,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-9000</td><td>Elevator #3</td><td class="font-mono text-xs text-green-600">$280,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-9100</td><td>Robot Arm #2</td><td class="font-mono text-xs text-green-600">$950,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-9200</td><td>Generator #1</td><td class="font-mono text-xs text-green-600">$390,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-9300</td><td>Cooling Tower</td><td class="font-mono text-xs text-green-600">$460,000</td><td><span class="chip chip-green">Good</span></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 Assets: <span class="text-green-600">527</span></span><span>Avg Health: <span class="text-red-600">87.3%</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 Inspections</h3><p class="text-xs text-gray-400 mt-0.5">Inspections due next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Inspections →</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>Asset</th><th>Location</th><th>Frequency</th><th>Due Date</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">CNC-01</td><td>Building A</td><td class="text-xs">Monthly</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">BLR-02</td><td>Plant 2</td><td class="text-xs">Biweekly</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">CMP-07</td><td>Basement</td><td class="text-xs">Monthly</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">CNV-03</td><td>Line 3</td><td class="text-xs">Weekly</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">HVAC-01</td><td>Office</td><td class="text-xs">Quarterly</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">TRF-01</td><td>Substation</td><td class="text-xs">Semi-annual</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">PM-01</td><td>Pump Station</td><td class="text-xs">Monthly</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">GEN-01</td><td>Power Room</td><td class="text-xs">Quarterly</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">RBT-02</td><td>Assembly</td><td class="text-xs">Monthly</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">CHL-01</td><td>Cooling Plant</td><td class="text-xs">Monthly</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">ELV-03</td><td>Tower B</td><td class="text-xs">Monthly</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CTW-01</td><td>Rooftop</td><td class="text-xs">Biweekly</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Due: <b class="text-gray-900">18</b></span><span>Overdue: <b class="text-red-500">6</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-eam.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,410 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardEam2";
|
||||
ViewData["SidebarVariant"] = "2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style2.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">EAM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Enterprise Asset Management — Period: Q2 2026</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-blue-400"><option>Q2 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: #3b82f6;"><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-2 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Asset 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-blue-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 Assets</p><p class="text-lg font-bold text-gray-900">527</p><span class="text-[10px] text-green-600 font-semibold">▲ +3.4%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Work Orders</p><p class="text-lg font-bold text-gray-900">1,284</p><span class="text-[10px] text-green-600 font-semibold">▲ +12.7%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Equipment</p><p class="text-lg font-bold text-gray-900">3,241</p><span class="text-[10px] text-gray-500 font-semibold">▲ +2.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Uptime</p><p class="text-lg font-bold text-gray-900">96.8%</p><span class="text-[10px] text-green-600 font-semibold">▲ +1.4pp</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>OEE: <b class="text-gray-700">84.6%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Card Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key performance indicators</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
<div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Assets</p><p class="kpi-value">527</p><span class="kpi-delta">▲ +3.4%</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">Work Orders</p><p class="kpi-value">1,284</p><span class="kpi-delta">▲ +12.7%</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">Equipment</p><p class="kpi-value">3,241</p><span class="kpi-delta">▲ +2.1%</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">Uptime</p><p class="kpi-value">96.8%</p><span class="kpi-delta">▲ +1.4pp</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 class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">MTBF</p><p class="kpi-value">486hrs</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" 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">MTTR</p><p class="kpi-value">3.2hrs</p><span class="kpi-delta">▼ -0.4hrs</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">Downtime</p><p class="kpi-value">124hrs</p><span class="kpi-delta">▼ -8.3%</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">OEE Score</p><p class="kpi-value">84.6%</p><span class="kpi-delta">▲ +2.1pp</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>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Asset 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-blue-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 Assets</p><p class="mm-sub">527 ▲ 3.4%</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">Work Orders</p><p class="mm-sub">1,284 ▲ 12.7%</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">Equipment</p><p class="mm-sub">3,241 ▲ 2.1%</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">Uptime</p><p class="mm-sub">96.8% ▲ 1.4pp</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">MTBF</p><p class="mm-sub">486hrs ▲ 5.8%</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">MTTR</p><p class="mm-sub">3.2hrs ▼ 0.4hrs</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">Downtime</p><p class="mm-sub">124hrs ▼ 8.3%</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">OEE Score</p><p class="mm-sub">84.6% ▲ 2.1pp</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">Spare Parts</p><p class="mm-sub">8,450 ▲ 11%</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">Vendors</p><p class="mm-sub">142 ▲ 6%</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">Utilization</p><p class="mm-sub">78.4% ▲ 3.2%</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">Compliance</p><p class="mm-sub">94.2% ▲ 1.8pts</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">Technicians</p><p class="mm-sub">87 ▲ 5</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">Facilities</p><p class="mm-sub">12 ▲ 1</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">PM Rate</p><p class="mm-sub">91.5% ▲ 4.1%</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">Response Time</p><p class="mm-sub">1.8hrs ▼ 0.3</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">First Fix</p><p class="mm-sub">86.3% ▲ 2.4%</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">Cost/Work Order</p><p class="mm-sub">$420 ▼ $38</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">Parts Usage</p><p class="mm-sub">12,450 ▲ 845</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">Asset Age</p><p class="mm-sub">6.8 years</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">Asset Health</h3><p class="text-xs text-gray-400 mt-0.5">Asset condition vs maintenance</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> Maintenance</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Asset Category</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> Production <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> Utilities <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> Infrastructure <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> Transport <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> Facilities <span class="font-semibold ml-auto">9%</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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Asset Summary</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">Total Value</p><p class="text-sm font-bold text-gray-900">$24.8M</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">Depreciation</p><p class="text-sm font-bold text-gray-900">$6.2M</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">Net Book Value</p><p class="text-sm font-bold text-blue-700">$18.6M</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Avg Age</span><span class="font-semibold text-gray-900">6.8yrs</span><span>Health</span><span class="font-semibold text-gray-900">87.3%</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">Work Order Status</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Work orders by priority</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">Critical</p><p class="text-sm font-bold text-red-600">312</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">High</p><p class="text-sm font-bold text-amber-600">486</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">Medium</p><p class="text-sm font-bold text-gray-900">342</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">Low</p><p class="text-sm font-bold text-blue-700">144</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>OTIF: <b>87.4%</b></span><span>CBR: <b>94.2%</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">Maintenance Activity</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">+142</span><p class="text-gray-400">PM</p></div>
|
||||
<div><span class="font-bold text-green-600">+86</span><p class="text-gray-400">CM</p></div>
|
||||
<div><span class="font-bold text-green-600">+312</span><p class="text-gray-400">Inspection</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">Recent Work Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest maintenance tasks</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Work Order →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>WO#</th><th>Description</th><th>Priority</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">WO-2026-0421</td><td>Monthly revenue recognition</td><td class="chip chip-blue">High</td><td><span class="chip chip-indigo">Completed</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">WO-2026-0420</td><td>Depreciation - June</td><td class="chip chip-blue">Medium</td><td><span class="chip chip-indigo">Completed</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">WO-2026-0419</td><td>Payroll accrual</td><td class="chip chip-blue">Low</td><td><span class="chip chip-indigo">Completed</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">WO-2026-0418</td><td>Tax provision - PPh 21</td><td class="chip chip-amber">Critical</td><td><span class="chip chip-amber">In Progress</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Open: <b class="text-amber-600">4 orders</b></span><span>Total orders: <b>1,284</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">Asset Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time asset updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">PM Compliance</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">Schedule</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">89% / 85%</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">Priority</p>
|
||||
<span class="text-[11px] font-semibold">92% / 90%</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">Routine</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">95% / 90%</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">Emergency</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">78% / 75%</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>Target PM: <b class="text-green-600">92%</b></span><span class="text-blue-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">Top Technicians</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Sarah M.</p><p class="text-sm font-bold text-gray-900">96.2%</p><span class="text-[10px] text-gray-400">124 orders</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="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
|
||||
<div class="flex-1"><p class="text-xs text-gray-500">James C.</p><p class="text-sm font-bold text-amber-600">94.8%</p><span class="text-[10px] text-gray-400">112 orders</span></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">Alex L.</p><p class="text-sm font-bold text-blue-700">92.1%</p><span class="text-[10px] text-gray-400">98 orders</span></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">Emma P.</p><p class="text-sm font-bold text-gray-900">89.7%</p><span class="text-[10px] text-gray-400">87 orders</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top Orders: <b>28</b></span><span>Avg Time: <b>4.2hrs</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">Maintenance Schedule</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Upcoming PM tasks</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">Weekly PM</p><p class="text-[10px] text-gray-400">Inspection route A</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">Biweekly PM</p><p class="text-[10px] text-gray-400">Equipment calibration</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">Monthly PM</p><p class="text-[10px] text-gray-400">HVAC service</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Quarterly</p><p class="text-[10px] text-gray-400">Generator test</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Jul 30</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">Asset Inventory</h3><p class="text-xs text-gray-400 mt-0.5">Top locations</p></div>
|
||||
<span class="text-xs text-blue-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>Asset ID</th><th>Asset Name</th><th>Value</th><th>Condition</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">A-1000</td><td>CNC Machine #1</td><td class="font-mono text-xs text-green-600">$1,200,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-2000</td><td>Conveyor Line #3</td><td class="font-mono text-xs text-green-600">$860,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-3000</td><td>HVAC System</td><td class="font-mono text-xs text-green-600">$720,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-4000</td><td>Boiler #2</td><td class="font-mono text-xs text-green-600">$580,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-5000</td><td>Compressor #7</td><td class="font-mono text-xs text-green-600">$420,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-6000</td><td>Chiller #1</td><td class="font-mono text-xs text-green-600">$650,000</td><td><span class="chip chip-red">Critical</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-7000</td><td>Pump Station #B</td><td class="font-mono text-xs text-green-600">$340,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-8000</td><td>Transformer #1</td><td class="font-mono text-xs text-green-600">$510,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-9000</td><td>Elevator #3</td><td class="font-mono text-xs text-green-600">$280,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-9100</td><td>Robot Arm #2</td><td class="font-mono text-xs text-green-600">$950,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-9200</td><td>Generator #1</td><td class="font-mono text-xs text-green-600">$390,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-9300</td><td>Cooling Tower</td><td class="font-mono text-xs text-green-600">$460,000</td><td><span class="chip chip-green">Good</span></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 Assets: <span class="text-green-600">527</span></span><span>Avg Health: <span class="text-red-600">87.3%</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 Inspections</h3><p class="text-xs text-gray-400 mt-0.5">Inspections due next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Inspections →</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>Asset</th><th>Location</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">AS-0882</td><td>Production Line A</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">AS-0885</td><td>Warehouse B</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">AS-0888</td><td>Office Building</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">AS-0890</td><td>Fleet Garage</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">AS-0875</td><td>Cooling Tower</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">AS-0901</td><td>Boiler Room</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">AS-0902</td><td>HVAC System</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">AS-0903</td><td>Generator Room</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">AS-0904</td><td>Pump Station</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">AS-0905</td><td>Compressor</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>
|
||||
<tr><td class="font-mono text-xs">AS-0906</td><td>Conveyor Belt</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0907</td><td>Security System</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0908</td><td>Fire Alarm</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0909</td><td>Elevator</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0910</td><td>Server Room</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0911</td><td>Solar Panels</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0912</td><td>Water Treatment</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0913</td><td>Lab Equipment</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0914</td><td>Packaging Line</td><td class="font-mono text-xs">$16,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">AS-0915</td><td>Cooling System</td><td class="font-mono text-xs">$33,000</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">AS-0916</td><td>Ventilation</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0917</td><td>Lighting System</td><td class="font-mono text-xs">$27,300</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">AS-0918</td><td>Drainage System</td><td class="font-mono text-xs">$6,800</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">AS-0919</td><td>CCTV Network</td><td class="font-mono text-xs">$38,100</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">AS-0920</td><td>Access Control</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0921</td><td>Chiller Plant</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0922</td><td>Air Handling</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0923</td><td>Heat Exchanger</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0924</td><td>Motor Control</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0925</td><td>Transformer</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0926</td><td>Switchgear</td><td class="font-mono text-xs">$11,200</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">AS-0927</td><td>UPS System</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0928</td><td>Battery Bank</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0929</td><td>Sprinkler System</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0930</td><td>Smoke Detector</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0931</td><td>Escalator</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0932</td><td>Dock Leveler</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0933</td><td>Scaffolding</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0934</td><td>Crane System</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0935</td><td>Forklift Fleet</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0936</td><td>Concrete Mixer</td><td class="font-mono text-xs">$9,900</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">AS-0937</td><td>Welding Station</td><td class="font-mono text-xs">$31,200</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">AS-0938</td><td>Lathe Machine</td><td class="font-mono text-xs">$6,400</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">AS-0939</td><td>CNC Machine</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0940</td><td>Press Machine</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0941</td><td>Assembly Line</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0942</td><td>Packaging Robot</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0943</td><td>Quality Scanner</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0944</td><td>Label Printer</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Due: <b class="text-gray-900">18</b></span><span>Overdue: <b class="text-red-500">6</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-eam.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,411 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardEam3";
|
||||
ViewData["SidebarVariant"] = "3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style3.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">EAM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Enterprise Asset Management — Period: Q2 2026</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>Q2 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-2 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Asset 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 Assets</p><p class="text-lg font-bold text-gray-900">527</p><span class="text-[10px] text-green-600 font-semibold">▲ +3.4%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Work Orders</p><p class="text-lg font-bold text-gray-900">1,284</p><span class="text-[10px] text-green-600 font-semibold">▲ +12.7%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Equipment</p><p class="text-lg font-bold text-gray-900">3,241</p><span class="text-[10px] text-gray-500 font-semibold">▲ +2.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Uptime</p><p class="text-lg font-bold text-gray-900">96.8%</p><span class="text-[10px] text-green-600 font-semibold">▲ +1.4pp</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>OEE: <b class="text-gray-700">84.6%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Card Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key performance indicators</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
<div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Assets</p><p class="kpi-value">527</p><span class="kpi-delta">▲ +3.4%</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">Work Orders</p><p class="kpi-value">1,284</p><span class="kpi-delta">▲ +12.7%</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">Equipment</p><p class="kpi-value">3,241</p><span class="kpi-delta">▲ +2.1%</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">Uptime</p><p class="kpi-value">96.8%</p><span class="kpi-delta">▲ +1.4pp</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 class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">MTBF</p><p class="kpi-value">486hrs</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" 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">MTTR</p><p class="kpi-value">3.2hrs</p><span class="kpi-delta">▼ -0.4hrs</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">Downtime</p><p class="kpi-value">124hrs</p><span class="kpi-delta">▼ -8.3%</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">OEE Score</p><p class="kpi-value">84.6%</p><span class="kpi-delta">▲ +2.1pp</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>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Asset 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-blue-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 Assets</p><p class="mm-sub">527 ▲ 3.4%</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">Work Orders</p><p class="mm-sub">1,284 ▲ 12.7%</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">Equipment</p><p class="mm-sub">3,241 ▲ 2.1%</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">Uptime</p><p class="mm-sub">96.8% ▲ 1.4pp</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">MTBF</p><p class="mm-sub">486hrs ▲ 5.8%</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">MTTR</p><p class="mm-sub">3.2hrs ▼ 0.4hrs</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">Downtime</p><p class="mm-sub">124hrs ▼ 8.3%</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">OEE Score</p><p class="mm-sub">84.6% ▲ 2.1pp</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">Spare Parts</p><p class="mm-sub">8,450 ▲ 11%</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">Vendors</p><p class="mm-sub">142 ▲ 6%</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">Utilization</p><p class="mm-sub">78.4% ▲ 3.2%</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">Compliance</p><p class="mm-sub">94.2% ▲ 1.8pts</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">Technicians</p><p class="mm-sub">87 ▲ 5</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">Facilities</p><p class="mm-sub">12 ▲ 1</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">PM Rate</p><p class="mm-sub">91.5% ▲ 4.1%</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">Response Time</p><p class="mm-sub">1.8hrs ▼ 0.3</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">First Fix</p><p class="mm-sub">86.3% ▲ 2.4%</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">Cost/Work Order</p><p class="mm-sub">$420 ▼ $38</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">Parts Usage</p><p class="mm-sub">12,450 ▲ 845</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">Asset Age</p><p class="mm-sub">6.8 years</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">Asset Health</h3><p class="text-xs text-gray-400 mt-0.5">Asset condition vs maintenance</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> Maintenance</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Asset Category</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> Production <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> Utilities <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> Infrastructure <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> Transport <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> Facilities <span class="font-semibold ml-auto">9%</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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Asset Summary</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">Total Value</p><p class="text-sm font-bold text-gray-900">$24.8M</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">Depreciation</p><p class="text-sm font-bold text-gray-900">$6.2M</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">Net Book Value</p><p class="text-sm font-bold text-indigo-700">$18.6M</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Avg Age</span><span class="font-semibold text-gray-900">6.8yrs</span><span>Health</span><span class="font-semibold text-gray-900">87.3%</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">Work Order Status</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Work orders by priority</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">Critical</p><p class="text-sm font-bold text-red-600">312</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">High</p><p class="text-sm font-bold text-amber-600">486</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">Medium</p><p class="text-sm font-bold text-gray-900">342</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">Low</p><p class="text-sm font-bold text-indigo-700">144</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>OTIF: <b>87.4%</b></span><span>CBR: <b>94.2%</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">Maintenance Activity</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">+142</span><p class="text-gray-400">PM</p></div>
|
||||
<div><span class="font-bold text-green-600">+86</span><p class="text-gray-400">CM</p></div>
|
||||
<div><span class="font-bold text-green-600">+312</span><p class="text-gray-400">Inspection</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">Recent Work Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest maintenance tasks</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New Work Order →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>WO#</th><th>Description</th><th>Priority</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">WO-2026-0421</td><td>Monthly revenue recognition</td><td class="chip chip-blue">High</td><td><span class="chip chip-indigo">Completed</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">WO-2026-0420</td><td>Depreciation - June</td><td class="chip chip-blue">Medium</td><td><span class="chip chip-indigo">Completed</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">WO-2026-0419</td><td>Payroll accrual</td><td class="chip chip-blue">Low</td><td><span class="chip chip-indigo">Completed</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">WO-2026-0418</td><td>Tax provision - PPh 21</td><td class="chip chip-amber">Critical</td><td><span class="chip chip-amber">In Progress</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Open: <b class="text-amber-600">4 orders</b></span><span>Total orders: <b>1,284</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">Asset Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time asset 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">PM Compliance</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">Schedule</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">89% / 85%</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">Priority</p>
|
||||
<span class="text-[11px] font-semibold">92% / 90%</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">Routine</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">95% / 90%</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">Emergency</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">78% / 75%</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>Target PM: <b class="text-green-600">92%</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">Top Technicians</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Sarah M.</p><p class="text-sm font-bold text-gray-900">96.2%</p><span class="text-[10px] text-gray-400">124 orders</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="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
|
||||
<div class="flex-1"><p class="text-xs text-gray-500">James C.</p><p class="text-sm font-bold text-amber-600">94.8%</p><span class="text-[10px] text-gray-400">112 orders</span></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">Alex L.</p><p class="text-sm font-bold text-indigo-700">92.1%</p><span class="text-[10px] text-gray-400">98 orders</span></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">Emma P.</p><p class="text-sm font-bold text-gray-900">89.7%</p><span class="text-[10px] text-gray-400">87 orders</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top Orders: <b>28</b></span><span>Avg Time: <b>4.2hrs</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">Maintenance Schedule</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Upcoming PM tasks</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">Weekly PM</p><p class="text-[10px] text-gray-400">Inspection route A</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">Biweekly PM</p><p class="text-[10px] text-gray-400">Equipment calibration</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">Monthly PM</p><p class="text-[10px] text-gray-400">HVAC service</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Quarterly</p><p class="text-[10px] text-gray-400">Generator test</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Jul 30</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">Asset Inventory</h3><p class="text-xs text-gray-400 mt-0.5">Top locations</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>Asset ID</th><th>Asset Name</th><th>Value</th><th>Condition</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">A-1000</td><td>CNC Machine #1</td><td class="font-mono text-xs text-green-600">$1,200,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-2000</td><td>Conveyor Line #3</td><td class="font-mono text-xs text-green-600">$860,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-3000</td><td>HVAC System</td><td class="font-mono text-xs text-green-600">$720,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-4000</td><td>Boiler #2</td><td class="font-mono text-xs text-green-600">$580,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-5000</td><td>Compressor #7</td><td class="font-mono text-xs text-green-600">$420,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-6000</td><td>Chiller #1</td><td class="font-mono text-xs text-green-600">$650,000</td><td><span class="chip chip-red">Critical</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-7000</td><td>Pump Station #B</td><td class="font-mono text-xs text-green-600">$340,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-8000</td><td>Transformer #1</td><td class="font-mono text-xs text-green-600">$510,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-9000</td><td>Elevator #3</td><td class="font-mono text-xs text-green-600">$280,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-9100</td><td>Robot Arm #2</td><td class="font-mono text-xs text-green-600">$950,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-9200</td><td>Generator #1</td><td class="font-mono text-xs text-green-600">$390,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-9300</td><td>Cooling Tower</td><td class="font-mono text-xs text-green-600">$460,000</td><td><span class="chip chip-green">Good</span></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 Assets: <span class="text-green-600">527</span></span><span>Avg Health: <span class="text-red-600">87.3%</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 Inspections</h3><p class="text-xs text-gray-400 mt-0.5">Inspections due next 14 days</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Inspections →</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>Asset</th><th>Location</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">AS-0882</td><td>Production Line A</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">AS-0885</td><td>Warehouse B</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">AS-0888</td><td>Office Building</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">AS-0890</td><td>Fleet Garage</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">AS-0875</td><td>Cooling Tower</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">AS-0901</td><td>Boiler Room</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">AS-0902</td><td>HVAC System</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">AS-0903</td><td>Generator Room</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">AS-0904</td><td>Pump Station</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">AS-0905</td><td>Compressor</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>
|
||||
<tr><td class="font-mono text-xs">AS-0906</td><td>Conveyor Belt</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0907</td><td>Security System</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0908</td><td>Fire Alarm</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0909</td><td>Elevator</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0910</td><td>Server Room</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0911</td><td>Solar Panels</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0912</td><td>Water Treatment</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0913</td><td>Lab Equipment</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0914</td><td>Packaging Line</td><td class="font-mono text-xs">$16,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">AS-0915</td><td>Cooling System</td><td class="font-mono text-xs">$33,000</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">AS-0916</td><td>Ventilation</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0917</td><td>Lighting System</td><td class="font-mono text-xs">$27,300</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">AS-0918</td><td>Drainage System</td><td class="font-mono text-xs">$6,800</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">AS-0919</td><td>CCTV Network</td><td class="font-mono text-xs">$38,100</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">AS-0920</td><td>Access Control</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0921</td><td>Chiller Plant</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0922</td><td>Air Handling</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0923</td><td>Heat Exchanger</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0924</td><td>Motor Control</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0925</td><td>Transformer</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0926</td><td>Switchgear</td><td class="font-mono text-xs">$11,200</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">AS-0927</td><td>UPS System</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0928</td><td>Battery Bank</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0929</td><td>Sprinkler System</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0930</td><td>Smoke Detector</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0931</td><td>Escalator</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0932</td><td>Dock Leveler</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0933</td><td>Scaffolding</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0934</td><td>Crane System</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0935</td><td>Forklift Fleet</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0936</td><td>Concrete Mixer</td><td class="font-mono text-xs">$9,900</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">AS-0937</td><td>Welding Station</td><td class="font-mono text-xs">$31,200</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">AS-0938</td><td>Lathe Machine</td><td class="font-mono text-xs">$6,400</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">AS-0939</td><td>CNC Machine</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0940</td><td>Press Machine</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0941</td><td>Assembly Line</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0942</td><td>Packaging Robot</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0943</td><td>Quality Scanner</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">AS-0944</td><td>Label Printer</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Due: <b class="text-gray-900">18</b></span><span>Overdue: <b class="text-red-500">6</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-eam.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,411 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardEam4";
|
||||
ViewData["SidebarVariant"] = "4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style4.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">EAM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Enterprise Asset Management — Period: Q2 2026</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-2 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Asset 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 Assets</p><p class="text-lg font-bold text-gray-900">527</p><span class="text-[10px] text-green-600 font-semibold">▲ +3.4%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Work Orders</p><p class="text-lg font-bold text-gray-900">1,284</p><span class="text-[10px] text-green-600 font-semibold">▲ +12.7%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Equipment</p><p class="text-lg font-bold text-gray-900">3,241</p><span class="text-[10px] text-red-500 font-semibold">▲ +2.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Uptime</p><p class="text-lg font-bold text-gray-900">96.8%</p><span class="text-[10px] text-green-600 font-semibold">▲ +1.4pp</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>OEE: <b class="text-gray-700">84.6%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Card Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key performance indicators</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
<div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Assets</p><p class="kpi-value">527</p><span class="kpi-delta">▲ +3.4%</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">Work Orders</p><p class="kpi-value">1,284</p><span class="kpi-delta">▲ +12.7%</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">Equipment</p><p class="kpi-value">3,241</p><span class="kpi-delta">▲ +2.1%</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">Uptime</p><p class="kpi-value">96.8%</p><span class="kpi-delta">▲ +1.4pp</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 class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">MTBF</p><p class="kpi-value">486hrs</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" 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">MTTR</p><p class="kpi-value">3.2hrs</p><span class="kpi-delta">▼ -0.4hrs</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">Downtime</p><p class="kpi-value">124hrs</p><span class="kpi-delta">▼ -8.3%</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">OEE Score</p><p class="kpi-value">84.6%</p><span class="kpi-delta">▲ +2.1pp</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>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Asset 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-blue-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 Assets</p><p class="mm-sub">527 ▲ 3.4%</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">Work Orders</p><p class="mm-sub">1,284 ▲ 12.7%</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">Equipment</p><p class="mm-sub">3,241 ▲ 2.1%</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">Uptime</p><p class="mm-sub">96.8% ▲ 1.4pp</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">MTBF</p><p class="mm-sub">486hrs ▲ 5.8%</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">MTTR</p><p class="mm-sub">3.2hrs ▼ 0.4hrs</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">Downtime</p><p class="mm-sub">124hrs ▼ 8.3%</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">OEE Score</p><p class="mm-sub">84.6% ▲ 2.1pp</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">Spare Parts</p><p class="mm-sub">8,450 ▲ 11%</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">Vendors</p><p class="mm-sub">142 ▲ 6%</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">Utilization</p><p class="mm-sub">78.4% ▲ 3.2%</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">Compliance</p><p class="mm-sub">94.2% ▲ 1.8pts</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">Technicians</p><p class="mm-sub">87 ▲ 5</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">Facilities</p><p class="mm-sub">12 ▲ 1</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">PM Rate</p><p class="mm-sub">91.5% ▲ 4.1%</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">Response Time</p><p class="mm-sub">1.8hrs ▼ 0.3</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">First Fix</p><p class="mm-sub">86.3% ▲ 2.4%</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">Cost/Work Order</p><p class="mm-sub">$420 ▼ $38</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">Parts Usage</p><p class="mm-sub">12,450 ▲ 845</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">Asset Age</p><p class="mm-sub">6.8 years</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">Asset Health</h3><p class="text-xs text-gray-400 mt-0.5">Asset condition vs maintenance</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> Maintenance</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Asset Category</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> Production <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> Utilities <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> Infrastructure <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> Transport <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> Facilities <span class="font-semibold ml-auto">9%</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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Asset Summary</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">Total Value</p><p class="text-sm font-bold text-gray-900">$24.8M</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">Depreciation</p><p class="text-sm font-bold text-gray-900">$6.2M</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">Net Book Value</p><p class="text-sm font-bold text-indigo-700">$18.6M</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Avg Age</span><span class="font-semibold text-gray-900">6.8yrs</span><span>Health</span><span class="font-semibold text-gray-900">87.3%</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">Work Order Status</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Work orders by priority</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">Critical</p><p class="text-sm font-bold text-green-700">312</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">High</p><p class="text-sm font-bold text-amber-600">486</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">Medium</p><p class="text-sm font-bold text-red-600">342</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">Low</p><p class="text-sm font-bold text-indigo-700">144</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>OTIF: <b>87.4%</b></span><span>CBR: <b>94.2%</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">Maintenance Activity</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">+142</span><p class="text-gray-400">PM</p></div>
|
||||
<div><span class="font-bold text-red-600">+86</span><p class="text-gray-400">CM</p></div>
|
||||
<div><span class="font-bold text-red-600">+312</span><p class="text-gray-400">Inspection</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">Recent Work Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest maintenance tasks</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New Work Order →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>WO#</th><th>Description</th><th>Priority</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Open: <b class="text-amber-600">4 orders</b></span><span>Total orders: <b>1,284</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">Asset Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time asset 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">PM Compliance</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">Schedule</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">Priority</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">Routine</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">Emergency</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>Target PM: <b class="text-green-600">92%</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">Top Technicians</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Sarah M.</p><p class="text-sm font-bold text-gray-900">96.2% 124</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">James C.</p><p class="text-sm font-bold text-amber-600">94.8% 112</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">Alex L.</p><p class="text-sm font-bold text-indigo-700">92.1% 98</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">Emma P.</p><p class="text-sm font-bold text-gray-900">89.7% 87</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top Orders: <b>28</b></span><span>Avg Time: <b>4.2hrs</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">Maintenance Schedule</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Upcoming PM tasks</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">Weekly PM</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">Biweekly PM</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">Monthly PM</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Quarterly</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</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">Asset Inventory</h3><p class="text-xs text-gray-400 mt-0.5">Top locations</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>Asset ID</th><th>Asset Name</th><th>Value</th><th>Condition</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">A-1000</td><td>CNC Machine #1</td><td class="font-mono text-xs text-green-600">$1,200,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-2000</td><td>Conveyor Line #3</td><td class="font-mono text-xs text-green-600">$860,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-3000</td><td>HVAC System</td><td class="font-mono text-xs text-green-600">$720,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-4000</td><td>Boiler #2</td><td class="font-mono text-xs text-green-600">$580,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-5000</td><td>Compressor #7</td><td class="font-mono text-xs text-green-600">$420,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-6000</td><td>Chiller #1</td><td class="font-mono text-xs text-green-600">$650,000</td><td><span class="chip chip-red">Critical</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-7000</td><td>Pump Station #B</td><td class="font-mono text-xs text-green-600">$340,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-8000</td><td>Transformer #1</td><td class="font-mono text-xs text-green-600">$510,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-9000</td><td>Elevator #3</td><td class="font-mono text-xs text-green-600">$280,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-9100</td><td>Robot Arm #2</td><td class="font-mono text-xs text-green-600">$950,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-9200</td><td>Generator #1</td><td class="font-mono text-xs text-green-600">$390,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-9300</td><td>Cooling Tower</td><td class="font-mono text-xs text-green-600">$460,000</td><td><span class="chip chip-green">Good</span></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 Assets: <span class="text-green-600">527</span></span><span>Avg Health: <span class="text-red-600">87.3%</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 Inspections</h3><p class="text-xs text-gray-400 mt-0.5">Inspections due next 14 days</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Inspections →</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>Asset</th><th>Location</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Due: <b class="text-gray-900">18</b></span><span>Overdue: <b class="text-red-500">6</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-eam.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,411 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardEam5";
|
||||
ViewData["SidebarVariant"] = "5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style5.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">EAM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Enterprise Asset Management — Period: Q2 2026</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-blue-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: #3b82f6;"><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-2 gap-4">
|
||||
<div class="bg-white border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Asset 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-blue-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 Assets</p><p class="text-lg font-bold text-gray-900">527</p><span class="text-[10px] text-green-600 font-semibold">▲ +3.4%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Work Orders</p><p class="text-lg font-bold text-gray-900">1,284</p><span class="text-[10px] text-green-600 font-semibold">▲ +12.7%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Equipment</p><p class="text-lg font-bold text-gray-900">3,241</p><span class="text-[10px] text-red-500 font-semibold">▲ +2.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Uptime</p><p class="text-lg font-bold text-gray-900">96.8%</p><span class="text-[10px] text-green-600 font-semibold">▲ +1.4pp</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>OEE: <b class="text-gray-700">84.6%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Card Matrix</h3><p class="text-xs text-gray-400 mt-0.5">Key performance indicators</p></div><span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span></div>
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
<div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Total Assets</p><p class="kpi-value">527</p><span class="kpi-delta">▲ +3.4%</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">Work Orders</p><p class="kpi-value">1,284</p><span class="kpi-delta">▲ +12.7%</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">Equipment</p><p class="kpi-value">3,241</p><span class="kpi-delta">▲ +2.1%</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">Uptime</p><p class="kpi-value">96.8%</p><span class="kpi-delta">▲ +1.4pp</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 class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">MTBF</p><p class="kpi-value">486hrs</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" 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">MTTR</p><p class="kpi-value">3.2hrs</p><span class="kpi-delta">▼ -0.4hrs</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">Downtime</p><p class="kpi-value">124hrs</p><span class="kpi-delta">▼ -8.3%</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">OEE Score</p><p class="kpi-value">84.6%</p><span class="kpi-delta">▲ +2.1pp</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>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4"><div><h3 class="font-bold text-gray-900">Asset 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-blue-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 Assets</p><p class="mm-sub">527 ▲ 3.4%</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">Work Orders</p><p class="mm-sub">1,284 ▲ 12.7%</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">Equipment</p><p class="mm-sub">3,241 ▲ 2.1%</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">Uptime</p><p class="mm-sub">96.8% ▲ 1.4pp</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">MTBF</p><p class="mm-sub">486hrs ▲ 5.8%</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">MTTR</p><p class="mm-sub">3.2hrs ▼ 0.4hrs</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">Downtime</p><p class="mm-sub">124hrs ▼ 8.3%</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">OEE Score</p><p class="mm-sub">84.6% ▲ 2.1pp</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">Spare Parts</p><p class="mm-sub">8,450 ▲ 11%</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">Vendors</p><p class="mm-sub">142 ▲ 6%</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">Utilization</p><p class="mm-sub">78.4% ▲ 3.2%</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">Compliance</p><p class="mm-sub">94.2% ▲ 1.8pts</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">Technicians</p><p class="mm-sub">87 ▲ 5</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">Facilities</p><p class="mm-sub">12 ▲ 1</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">PM Rate</p><p class="mm-sub">91.5% ▲ 4.1%</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">Response Time</p><p class="mm-sub">1.8hrs ▼ 0.3</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">First Fix</p><p class="mm-sub">86.3% ▲ 2.4%</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">Cost/Work Order</p><p class="mm-sub">$420 ▼ $38</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">Parts Usage</p><p class="mm-sub">12,450 ▲ 845</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">Asset Age</p><p class="mm-sub">6.8 years</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 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">Asset Health</h3><p class="text-xs text-gray-400 mt-0.5">Asset condition vs maintenance</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> Maintenance</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Asset Category</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> Production <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> Utilities <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> Infrastructure <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> Transport <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> Facilities <span class="font-semibold ml-auto">9%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Asset Summary</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">Total Value</p><p class="text-sm font-bold text-gray-900">$24.8M</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">Depreciation</p><p class="text-sm font-bold text-gray-900">$6.2M</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">Net Book Value</p><p class="text-sm font-bold text-blue-700">$18.6M</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Avg Age 6.8yrs</span><span class="font-semibold text-gray-900"></span><span>Health 87.3%</span><span class="font-semibold text-gray-900"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Work Order Status</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Work orders by priority</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">Critical</p><p class="text-sm font-bold text-green-700">312</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">High</p><p class="text-sm font-bold text-amber-600">486</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">Medium</p><p class="text-sm font-bold text-red-600">342</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">Low</p><p class="text-sm font-bold text-blue-700">144</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>OTIF: <b>87.4%</b></span><span>CBR: <b>94.2%</b></span></div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Maintenance Activity</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">+142</span><p class="text-gray-400">PM</p></div>
|
||||
<div><span class="font-bold text-red-600">+86</span><p class="text-gray-400">CM</p></div>
|
||||
<div><span class="font-bold text-red-600">+312</span><p class="text-gray-400">Inspection</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-white 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">Recent Work Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest maintenance tasks</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Work Order →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>WO#</th><th>Description</th><th>Priority</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Open: <b class="text-amber-600">4 orders</b></span><span>Total orders: <b>1,284</b></span></div>
|
||||
</div>
|
||||
<div class="bg-white 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">Asset Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time asset updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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 border border-gray-100 p-5 anim-fade anim-delay-4">
|
||||
<h3 class="font-bold text-gray-900 mb-1">PM Compliance</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">Schedule</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">Priority</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">Routine</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">Emergency</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>Target PM: <b class="text-green-600">92%</b></span><span class="text-blue-600">On Track</span></div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Top Technicians</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Sarah M.</p><p class="text-sm font-bold text-gray-900">96.2% 124</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">James C.</p><p class="text-sm font-bold text-amber-600">94.8% 112</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">Alex L.</p><p class="text-sm font-bold text-blue-700">92.1% 98</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">Emma P.</p><p class="text-sm font-bold text-gray-900">89.7% 87</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top Orders: <b>28</b></span><span>Avg Time: <b>4.2hrs</b></span></div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-6">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Maintenance Schedule</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Upcoming PM tasks</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">Weekly PM</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">Biweekly PM</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">Monthly PM</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Quarterly</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-white 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">Asset Inventory</h3><p class="text-xs text-gray-400 mt-0.5">Top locations</p></div>
|
||||
<span class="text-xs text-blue-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>Asset ID</th><th>Asset Name</th><th>Value</th><th>Condition</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">A-1000</td><td>CNC Machine #1</td><td class="font-mono text-xs text-green-600">$1,200,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-2000</td><td>Conveyor Line #3</td><td class="font-mono text-xs text-green-600">$860,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-3000</td><td>HVAC System</td><td class="font-mono text-xs text-green-600">$720,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-4000</td><td>Boiler #2</td><td class="font-mono text-xs text-green-600">$580,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-5000</td><td>Compressor #7</td><td class="font-mono text-xs text-green-600">$420,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-6000</td><td>Chiller #1</td><td class="font-mono text-xs text-green-600">$650,000</td><td><span class="chip chip-red">Critical</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-7000</td><td>Pump Station #B</td><td class="font-mono text-xs text-green-600">$340,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-8000</td><td>Transformer #1</td><td class="font-mono text-xs text-green-600">$510,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-9000</td><td>Elevator #3</td><td class="font-mono text-xs text-green-600">$280,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-9100</td><td>Robot Arm #2</td><td class="font-mono text-xs text-green-600">$950,000</td><td><span class="chip chip-green">Good</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-9200</td><td>Generator #1</td><td class="font-mono text-xs text-green-600">$390,000</td><td><span class="chip chip-amber">Fair</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">A-9300</td><td>Cooling Tower</td><td class="font-mono text-xs text-green-600">$460,000</td><td><span class="chip chip-green">Good</span></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 Assets: <span class="text-green-600">527</span></span><span>Avg Health: <span class="text-red-600">87.3%</span></span></div>
|
||||
</div>
|
||||
<div class="bg-white 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 Inspections</h3><p class="text-xs text-gray-400 mt-0.5">Inspections due next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Inspections →</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>Asset</th><th>Location</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Due: <b class="text-gray-900">18</b></span><span>Overdue: <b class="text-red-500">6</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-eam.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,444 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardFms1";
|
||||
ViewData["SidebarVariant"] = "1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style1.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">FMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Financial Management System — Period: June 2026</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-blue-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: #3b82f6;"><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-3 gap-4 anim-fade anim-delay-1">
|
||||
<div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">P&L Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs expenses</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> Expenses</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-2">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Expense Breakdown</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> Payroll <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> Operations <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> Marketing <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> R&D <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> Others <span class="font-semibold ml-auto">9%</span></div>
|
||||
</div>
|
||||
</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-2 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Financial Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Period Summary</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-blue-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">$12.4M</p><span class="text-[10px] text-green-600 font-semibold">▲ +8.2%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Net Income</p><p class="text-lg font-bold text-gray-900">$2.8M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.4%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Op. Expenses</p><p class="text-lg font-bold text-gray-900">$6.8M</p><span class="text-[10px] text-red-500 font-semibold">▲ +3.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cash Position</p><p class="text-lg font-bold text-gray-900">$5.2M</p><span class="text-[10px] text-green-600 font-semibold">▲ +1.2M</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>Gross Margin: <b class="text-gray-700">42.3%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></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">$12.4M</p><span class="kpi-delta">▲ +8.2%</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">Net Income</p><p class="kpi-value">$2.8M</p><span class="kpi-delta">▲ +5.4%</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">Op. Expenses</p><p class="kpi-value">$6.8M</p><span class="kpi-delta">▲ +3.1%</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">Cash Position</p><p class="kpi-value">$5.2M</p><span class="kpi-delta">▲ +1.2M</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">AR Turnover</p><p class="kpi-value">38d</p><span class="kpi-delta">▼ -2d</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">Gross Margin</p><p class="kpi-value">42.3%</p><span class="kpi-delta">▲ +2.1%</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">Op. Cash Flow</p><p class="kpi-value">$3.2M</p><span class="kpi-delta">▲ +12%</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">Debt Ratio</p><p class="kpi-value">0.45</p><span class="kpi-delta">▼ -0.03</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">Financial 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-blue-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 Revenue</p><p class="mm-sub">$12.4M ▲ 8.2%</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">Net Income</p><p class="mm-sub">$2.8M ▲ 5.4%</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">Op. Expenses</p><p class="mm-sub">$6.8M ▲ 3.1%</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">Cash Position</p><p class="mm-sub">$5.2M ▲ 1.2M</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">AR Turnover</p><p class="mm-sub">38d ▼ 2d</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">Gross Margin</p><p class="mm-sub">42.3% ▲ 2.1%</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">Op. Cash Flow</p><p class="mm-sub">$3.2M ▲ 12%</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">Debt Ratio</p><p class="mm-sub">0.45 ▼ 0.03</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">Working Capital</p><p class="mm-sub">$4.2M ▲ 6.7%</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">EBITDA</p><p class="mm-sub">$2.1M ▲ 9.2%</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">Data Storage</p><p class="mm-sub">2.4TB ▲ 18%</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">Compliance Score</p><p class="mm-sub">96% ▲ 3pts</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">Headcount</p><p class="mm-sub">342 ▼ 12</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">Market Share</p><p class="mm-sub">24.5% ▲ 1.2%</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">NPS Score</p><p class="mm-sub">72 ▲ 5pts</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">Avg Response</p><p class="mm-sub">2.4hrs ▼ 0.3</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">Quality Rate</p><p class="mm-sub">98.7% ▲ 0.4%</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">Cost per Unit</p><p class="mm-sub">$84 ▼ $6</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">Inventory Turn</p><p class="mm-sub">6.2x ▼ 0.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">Global Reach</p><p class="mm-sub">28 countries</p></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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Balance Sheet Summary</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">Total Assets</p><p class="text-sm font-bold text-gray-900">$18.6M</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">Total Liabilities</p><p class="text-sm font-bold text-gray-900">$8.4M</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">Equity</p><p class="text-sm font-bold text-blue-700">$10.2M</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Current Ratio</span><span class="font-semibold text-gray-900">2.4x</span><span>D/E Ratio</span><span class="font-semibold text-gray-900">0.82</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">AR/AP Aging</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Receivables & payables aging</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">AR Current (0-30d)</p><p class="text-sm font-bold text-green-700">$2.8M</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">AR Aging (31-60d)</p><p class="text-sm font-bold text-amber-600">$1.2M</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">AR Overdue (60d+)</p><p class="text-sm font-bold text-red-600">$0.6M</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">AP Outstanding</p><p class="text-sm font-bold text-blue-700">$1.8M</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>DSO: <b>38 days</b></span><span>DPO: <b>42 days</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">Cash Flow</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">+$3.2M</span><p class="text-gray-400">Operating</p></div>
|
||||
<div><span class="font-bold text-red-600">-$1.1M</span><p class="text-gray-400">Investing</p></div>
|
||||
<div><span class="font-bold text-red-600">-$0.8M</span><p class="text-gray-400">Financing</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">Recent Journal Entries</h3><p class="text-xs text-gray-400 mt-0.5">Unposted & latest GL transactions</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Entry →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>Journal #</th><th>Description</th><th>Debit</th><th>Credit</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Unposted: <b class="text-amber-600">4 entries</b></span><span>Total this period: <b>142 entries</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">Financial Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time finance updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">Budget vs Actual</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">Revenue</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">COGS</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">OpEx</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">Net Income</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>Budget Variance: <b class="text-green-600">+12%</b></span><span class="text-blue-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">Fixed Assets Summary</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Depreciation & asset tracking</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">Total Asset Value</p><p class="text-sm font-bold text-gray-900">$5.2M</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">Accum. Depreciation</p><p class="text-sm font-bold text-amber-600">($1.8M)</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">Net Book Value</p><p class="text-sm font-bold text-blue-700">$3.4M</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">This Month Depr.</p><p class="text-sm font-bold text-gray-900">$42,800</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Assets Count: <b>124</b></span><span>Fully Depr.: <b>18</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">Tax Calendar</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Upcoming tax deadlines</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">PPh 21 (Income Tax)</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">PPN (VAT)</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">PPh 25/29</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Annual SPT</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</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">Trial Balance Summary</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top accounts</p></div>
|
||||
<span class="text-xs text-blue-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>Account Code</th><th>Account Name</th><th>Debit</th><th>Credit</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 Debit: <span class="text-green-600">$17,000,000</span></span><span>Total Credit: <span class="text-red-600">$17,000,000</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 Payment Schedule</h3><p class="text-xs text-gray-400 mt-0.5">AP invoices due next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Payables →</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>Invoice</th><th>Vendor</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Due: <b class="text-gray-900">$93,500</b></span><span>Overdue: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-fms.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,444 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardFms2";
|
||||
ViewData["SidebarVariant"] = "2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style2.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">FMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Financial Management System — Period: June 2026</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-blue-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: #3b82f6;"><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-3 gap-4 anim-fade anim-delay-1">
|
||||
<div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">P&L Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs expenses</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> Expenses</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-2">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Expense Breakdown</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> Payroll <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> Operations <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> Marketing <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> R&D <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> Others <span class="font-semibold ml-auto">9%</span></div>
|
||||
</div>
|
||||
</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-2 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Financial Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Period Summary</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-blue-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">$12.4M</p><span class="text-[10px] text-green-600 font-semibold">▲ +8.2%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Net Income</p><p class="text-lg font-bold text-gray-900">$2.8M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.4%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Op. Expenses</p><p class="text-lg font-bold text-gray-900">$6.8M</p><span class="text-[10px] text-red-500 font-semibold">▲ +3.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cash Position</p><p class="text-lg font-bold text-gray-900">$5.2M</p><span class="text-[10px] text-green-600 font-semibold">▲ +1.2M</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>Gross Margin: <b class="text-gray-700">42.3%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></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">$12.4M</p><span class="kpi-delta">▲ +8.2%</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">Net Income</p><p class="kpi-value">$2.8M</p><span class="kpi-delta">▲ +5.4%</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">Op. Expenses</p><p class="kpi-value">$6.8M</p><span class="kpi-delta">▲ +3.1%</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">Cash Position</p><p class="kpi-value">$5.2M</p><span class="kpi-delta">▲ +1.2M</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">AR Turnover</p><p class="kpi-value">38d</p><span class="kpi-delta">▼ -2d</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">Gross Margin</p><p class="kpi-value">42.3%</p><span class="kpi-delta">▲ +2.1%</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">Op. Cash Flow</p><p class="kpi-value">$3.2M</p><span class="kpi-delta">▲ +12%</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">Debt Ratio</p><p class="kpi-value">0.45</p><span class="kpi-delta">▼ -0.03</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">Financial 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-blue-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 Revenue</p><p class="mm-sub">$12.4M ▲ 8.2%</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">Net Income</p><p class="mm-sub">$2.8M ▲ 5.4%</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">Op. Expenses</p><p class="mm-sub">$6.8M ▲ 3.1%</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">Cash Position</p><p class="mm-sub">$5.2M ▲ 1.2M</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">AR Turnover</p><p class="mm-sub">38d ▼ 2d</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">Gross Margin</p><p class="mm-sub">42.3% ▲ 2.1%</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">Op. Cash Flow</p><p class="mm-sub">$3.2M ▲ 12%</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">Debt Ratio</p><p class="mm-sub">0.45 ▼ 0.03</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">Working Capital</p><p class="mm-sub">$4.2M ▲ 6.7%</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">EBITDA</p><p class="mm-sub">$2.1M ▲ 9.2%</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">Data Storage</p><p class="mm-sub">2.4TB ▲ 18%</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">Compliance Score</p><p class="mm-sub">96% ▲ 3pts</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">Headcount</p><p class="mm-sub">342 ▼ 12</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">Market Share</p><p class="mm-sub">24.5% ▲ 1.2%</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">NPS Score</p><p class="mm-sub">72 ▲ 5pts</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">Avg Response</p><p class="mm-sub">2.4hrs ▼ 0.3</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">Quality Rate</p><p class="mm-sub">98.7% ▲ 0.4%</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">Cost per Unit</p><p class="mm-sub">$84 ▼ $6</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">Inventory Turn</p><p class="mm-sub">6.2x ▼ 0.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">Global Reach</p><p class="mm-sub">28 countries</p></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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Balance Sheet Summary</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">Total Assets</p><p class="text-sm font-bold text-gray-900">$18.6M</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">Total Liabilities</p><p class="text-sm font-bold text-gray-900">$8.4M</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">Equity</p><p class="text-sm font-bold text-blue-700">$10.2M</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Current Ratio</span><span class="font-semibold text-gray-900">2.4x</span><span>D/E Ratio</span><span class="font-semibold text-gray-900">0.82</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">AR/AP Aging</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Receivables & payables aging</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">AR Current (0-30d)</p><p class="text-sm font-bold text-green-700">$2.8M</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">AR Aging (31-60d)</p><p class="text-sm font-bold text-amber-600">$1.2M</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">AR Overdue (60d+)</p><p class="text-sm font-bold text-red-600">$0.6M</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">AP Outstanding</p><p class="text-sm font-bold text-blue-700">$1.8M</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>DSO: <b>38 days</b></span><span>DPO: <b>42 days</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">Cash Flow</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">+$3.2M</span><p class="text-gray-400">Operating</p></div>
|
||||
<div><span class="font-bold text-red-600">-$1.1M</span><p class="text-gray-400">Investing</p></div>
|
||||
<div><span class="font-bold text-red-600">-$0.8M</span><p class="text-gray-400">Financing</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">Recent Journal Entries</h3><p class="text-xs text-gray-400 mt-0.5">Unposted & latest GL transactions</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Entry →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>Journal #</th><th>Description</th><th>Debit</th><th>Credit</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Unposted: <b class="text-amber-600">4 entries</b></span><span>Total this period: <b>142 entries</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">Financial Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time finance updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">Budget vs Actual</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">Revenue</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">COGS</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">OpEx</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">Net Income</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>Budget Variance: <b class="text-green-600">+12%</b></span><span class="text-blue-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">Fixed Assets Summary</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Depreciation & asset tracking</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">Total Asset Value</p><p class="text-sm font-bold text-gray-900">$5.2M</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">Accum. Depreciation</p><p class="text-sm font-bold text-amber-600">($1.8M)</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">Net Book Value</p><p class="text-sm font-bold text-blue-700">$3.4M</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">This Month Depr.</p><p class="text-sm font-bold text-gray-900">$42,800</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Assets Count: <b>124</b></span><span>Fully Depr.: <b>18</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">Tax Calendar</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Upcoming tax deadlines</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">PPh 21 (Income Tax)</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">PPN (VAT)</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">PPh 25/29</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Annual SPT</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</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">Trial Balance Summary</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top accounts</p></div>
|
||||
<span class="text-xs text-blue-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>Account Code</th><th>Account Name</th><th>Debit</th><th>Credit</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 Debit: <span class="text-green-600">$17,000,000</span></span><span>Total Credit: <span class="text-red-600">$17,000,000</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 Payment Schedule</h3><p class="text-xs text-gray-400 mt-0.5">AP invoices due next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Payables →</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>Invoice</th><th>Vendor</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Due: <b class="text-gray-900">$93,500</b></span><span>Overdue: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-fms.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,444 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardFms3";
|
||||
ViewData["SidebarVariant"] = "3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style3.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">FMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Financial Management System — Period: June 2026</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-3 gap-4 anim-fade anim-delay-1">
|
||||
<div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">P&L Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs expenses</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> Expenses</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-2">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Expense Breakdown</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> Payroll <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> Operations <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> Marketing <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> R&D <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> Others <span class="font-semibold ml-auto">9%</span></div>
|
||||
</div>
|
||||
</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-2 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Financial Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Period Summary</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">$12.4M</p><span class="text-[10px] text-green-600 font-semibold">▲ +8.2%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Net Income</p><p class="text-lg font-bold text-gray-900">$2.8M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.4%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Op. Expenses</p><p class="text-lg font-bold text-gray-900">$6.8M</p><span class="text-[10px] text-red-500 font-semibold">▲ +3.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cash Position</p><p class="text-lg font-bold text-gray-900">$5.2M</p><span class="text-[10px] text-green-600 font-semibold">▲ +1.2M</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>Gross Margin: <b class="text-gray-700">42.3%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></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">$12.4M</p><span class="kpi-delta">▲ +8.2%</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">Net Income</p><p class="kpi-value">$2.8M</p><span class="kpi-delta">▲ +5.4%</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">Op. Expenses</p><p class="kpi-value">$6.8M</p><span class="kpi-delta">▲ +3.1%</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">Cash Position</p><p class="kpi-value">$5.2M</p><span class="kpi-delta">▲ +1.2M</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">AR Turnover</p><p class="kpi-value">38d</p><span class="kpi-delta">▼ -2d</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">Gross Margin</p><p class="kpi-value">42.3%</p><span class="kpi-delta">▲ +2.1%</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">Op. Cash Flow</p><p class="kpi-value">$3.2M</p><span class="kpi-delta">▲ +12%</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">Debt Ratio</p><p class="kpi-value">0.45</p><span class="kpi-delta">▼ -0.03</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">Financial 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 Revenue</p><p class="mm-sub">$12.4M ▲ 8.2%</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">Net Income</p><p class="mm-sub">$2.8M ▲ 5.4%</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">Op. Expenses</p><p class="mm-sub">$6.8M ▲ 3.1%</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">Cash Position</p><p class="mm-sub">$5.2M ▲ 1.2M</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">AR Turnover</p><p class="mm-sub">38d ▼ 2d</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">Gross Margin</p><p class="mm-sub">42.3% ▲ 2.1%</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">Op. Cash Flow</p><p class="mm-sub">$3.2M ▲ 12%</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">Debt Ratio</p><p class="mm-sub">0.45 ▼ 0.03</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">Working Capital</p><p class="mm-sub">$4.2M ▲ 6.7%</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">EBITDA</p><p class="mm-sub">$2.1M ▲ 9.2%</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">Data Storage</p><p class="mm-sub">2.4TB ▲ 18%</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">Compliance Score</p><p class="mm-sub">96% ▲ 3pts</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">Headcount</p><p class="mm-sub">342 ▼ 12</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">Market Share</p><p class="mm-sub">24.5% ▲ 1.2%</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">NPS Score</p><p class="mm-sub">72 ▲ 5pts</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">Avg Response</p><p class="mm-sub">2.4hrs ▼ 0.3</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">Quality Rate</p><p class="mm-sub">98.7% ▲ 0.4%</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">Cost per Unit</p><p class="mm-sub">$84 ▼ $6</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">Inventory Turn</p><p class="mm-sub">6.2x ▼ 0.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">Global Reach</p><p class="mm-sub">28 countries</p></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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Balance Sheet Summary</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">Total Assets</p><p class="text-sm font-bold text-gray-900">$18.6M</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">Total Liabilities</p><p class="text-sm font-bold text-gray-900">$8.4M</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">Equity</p><p class="text-sm font-bold text-indigo-700">$10.2M</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Current Ratio</span><span class="font-semibold text-gray-900">2.4x</span><span>D/E Ratio</span><span class="font-semibold text-gray-900">0.82</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">AR/AP Aging</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Receivables & payables aging</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">AR Current (0-30d)</p><p class="text-sm font-bold text-green-700">$2.8M</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">AR Aging (31-60d)</p><p class="text-sm font-bold text-amber-600">$1.2M</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">AR Overdue (60d+)</p><p class="text-sm font-bold text-red-600">$0.6M</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">AP Outstanding</p><p class="text-sm font-bold text-indigo-700">$1.8M</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>DSO: <b>38 days</b></span><span>DPO: <b>42 days</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">Cash Flow</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">+$3.2M</span><p class="text-gray-400">Operating</p></div>
|
||||
<div><span class="font-bold text-red-600">-$1.1M</span><p class="text-gray-400">Investing</p></div>
|
||||
<div><span class="font-bold text-red-600">-$0.8M</span><p class="text-gray-400">Financing</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">Recent Journal Entries</h3><p class="text-xs text-gray-400 mt-0.5">Unposted & latest GL transactions</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New Entry →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>Journal #</th><th>Description</th><th>Debit</th><th>Credit</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Unposted: <b class="text-amber-600">4 entries</b></span><span>Total this period: <b>142 entries</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">Financial Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time finance 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">Budget vs Actual</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">Revenue</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">COGS</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">OpEx</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">Net Income</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>Budget Variance: <b class="text-green-600">+12%</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">Fixed Assets Summary</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Depreciation & asset tracking</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">Total Asset Value</p><p class="text-sm font-bold text-gray-900">$5.2M</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">Accum. Depreciation</p><p class="text-sm font-bold text-amber-600">($1.8M)</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">Net Book Value</p><p class="text-sm font-bold text-indigo-700">$3.4M</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">This Month Depr.</p><p class="text-sm font-bold text-gray-900">$42,800</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Assets Count: <b>124</b></span><span>Fully Depr.: <b>18</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">Tax Calendar</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Upcoming tax deadlines</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">PPh 21 (Income Tax)</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">PPN (VAT)</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">PPh 25/29</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Annual SPT</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</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">Trial Balance Summary</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top accounts</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>Account Code</th><th>Account Name</th><th>Debit</th><th>Credit</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 Debit: <span class="text-green-600">$17,000,000</span></span><span>Total Credit: <span class="text-red-600">$17,000,000</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 Payment Schedule</h3><p class="text-xs text-gray-400 mt-0.5">AP invoices due next 14 days</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Payables →</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>Invoice</th><th>Vendor</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Due: <b class="text-gray-900">$93,500</b></span><span>Overdue: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-fms.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,444 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardFms4";
|
||||
ViewData["SidebarVariant"] = "4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style4.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">FMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Financial Management System — Period: June 2026</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-3 gap-4 anim-fade anim-delay-1">
|
||||
<div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">P&L Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs expenses</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> Expenses</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-2">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Expense Breakdown</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> Payroll <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> Operations <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> Marketing <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> R&D <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> Others <span class="font-semibold ml-auto">9%</span></div>
|
||||
</div>
|
||||
</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-2 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Financial Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Period Summary</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">$12.4M</p><span class="text-[10px] text-green-600 font-semibold">▲ +8.2%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Net Income</p><p class="text-lg font-bold text-gray-900">$2.8M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.4%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Op. Expenses</p><p class="text-lg font-bold text-gray-900">$6.8M</p><span class="text-[10px] text-red-500 font-semibold">▲ +3.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cash Position</p><p class="text-lg font-bold text-gray-900">$5.2M</p><span class="text-[10px] text-green-600 font-semibold">▲ +1.2M</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>Gross Margin: <b class="text-gray-700">42.3%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></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">$12.4M</p><span class="kpi-delta">▲ +8.2%</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">Net Income</p><p class="kpi-value">$2.8M</p><span class="kpi-delta">▲ +5.4%</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">Op. Expenses</p><p class="kpi-value">$6.8M</p><span class="kpi-delta">▲ +3.1%</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">Cash Position</p><p class="kpi-value">$5.2M</p><span class="kpi-delta">▲ +1.2M</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">AR Turnover</p><p class="kpi-value">38d</p><span class="kpi-delta">▼ -2d</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">Gross Margin</p><p class="kpi-value">42.3%</p><span class="kpi-delta">▲ +2.1%</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">Op. Cash Flow</p><p class="kpi-value">$3.2M</p><span class="kpi-delta">▲ +12%</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">Debt Ratio</p><p class="kpi-value">0.45</p><span class="kpi-delta">▼ -0.03</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">Financial 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 Revenue</p><p class="mm-sub">$12.4M ▲ 8.2%</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">Net Income</p><p class="mm-sub">$2.8M ▲ 5.4%</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">Op. Expenses</p><p class="mm-sub">$6.8M ▲ 3.1%</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">Cash Position</p><p class="mm-sub">$5.2M ▲ 1.2M</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">AR Turnover</p><p class="mm-sub">38d ▼ 2d</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">Gross Margin</p><p class="mm-sub">42.3% ▲ 2.1%</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">Op. Cash Flow</p><p class="mm-sub">$3.2M ▲ 12%</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">Debt Ratio</p><p class="mm-sub">0.45 ▼ 0.03</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">Working Capital</p><p class="mm-sub">$4.2M ▲ 6.7%</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">EBITDA</p><p class="mm-sub">$2.1M ▲ 9.2%</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">Data Storage</p><p class="mm-sub">2.4TB ▲ 18%</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">Compliance Score</p><p class="mm-sub">96% ▲ 3pts</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">Headcount</p><p class="mm-sub">342 ▼ 12</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">Market Share</p><p class="mm-sub">24.5% ▲ 1.2%</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">NPS Score</p><p class="mm-sub">72 ▲ 5pts</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">Avg Response</p><p class="mm-sub">2.4hrs ▼ 0.3</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">Quality Rate</p><p class="mm-sub">98.7% ▲ 0.4%</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">Cost per Unit</p><p class="mm-sub">$84 ▼ $6</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">Inventory Turn</p><p class="mm-sub">6.2x ▼ 0.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">Global Reach</p><p class="mm-sub">28 countries</p></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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Balance Sheet Summary</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">Total Assets</p><p class="text-sm font-bold text-gray-900">$18.6M</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">Total Liabilities</p><p class="text-sm font-bold text-gray-900">$8.4M</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">Equity</p><p class="text-sm font-bold text-indigo-700">$10.2M</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Current Ratio</span><span class="font-semibold text-gray-900">2.4x</span><span>D/E Ratio</span><span class="font-semibold text-gray-900">0.82</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">AR/AP Aging</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Receivables & payables aging</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">AR Current (0-30d)</p><p class="text-sm font-bold text-green-700">$2.8M</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">AR Aging (31-60d)</p><p class="text-sm font-bold text-amber-600">$1.2M</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">AR Overdue (60d+)</p><p class="text-sm font-bold text-red-600">$0.6M</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">AP Outstanding</p><p class="text-sm font-bold text-indigo-700">$1.8M</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>DSO: <b>38 days</b></span><span>DPO: <b>42 days</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">Cash Flow</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">+$3.2M</span><p class="text-gray-400">Operating</p></div>
|
||||
<div><span class="font-bold text-red-600">-$1.1M</span><p class="text-gray-400">Investing</p></div>
|
||||
<div><span class="font-bold text-red-600">-$0.8M</span><p class="text-gray-400">Financing</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">Recent Journal Entries</h3><p class="text-xs text-gray-400 mt-0.5">Unposted & latest GL transactions</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New Entry →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>Journal #</th><th>Description</th><th>Debit</th><th>Credit</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Unposted: <b class="text-amber-600">4 entries</b></span><span>Total this period: <b>142 entries</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">Financial Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time finance 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">Budget vs Actual</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">Revenue</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">COGS</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">OpEx</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">Net Income</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>Budget Variance: <b class="text-green-600">+12%</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">Fixed Assets Summary</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Depreciation & asset tracking</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">Total Asset Value</p><p class="text-sm font-bold text-gray-900">$5.2M</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">Accum. Depreciation</p><p class="text-sm font-bold text-amber-600">($1.8M)</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">Net Book Value</p><p class="text-sm font-bold text-indigo-700">$3.4M</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">This Month Depr.</p><p class="text-sm font-bold text-gray-900">$42,800</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Assets Count: <b>124</b></span><span>Fully Depr.: <b>18</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">Tax Calendar</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Upcoming tax deadlines</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">PPh 21 (Income Tax)</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">PPN (VAT)</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">PPh 25/29</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Annual SPT</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</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">Trial Balance Summary</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top accounts</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>Account Code</th><th>Account Name</th><th>Debit</th><th>Credit</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 Debit: <span class="text-green-600">$17,000,000</span></span><span>Total Credit: <span class="text-red-600">$17,000,000</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 Payment Schedule</h3><p class="text-xs text-gray-400 mt-0.5">AP invoices due next 14 days</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Payables →</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>Invoice</th><th>Vendor</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Due: <b class="text-gray-900">$93,500</b></span><span>Overdue: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-fms.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,444 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardFms5";
|
||||
ViewData["SidebarVariant"] = "5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style5.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">FMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Financial Management System — Period: June 2026</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-blue-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: #3b82f6;"><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-3 gap-4 anim-fade anim-delay-1">
|
||||
<div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-5">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">P&L Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs expenses</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> Expenses</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-2">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Expense Breakdown</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> Payroll <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> Operations <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> Marketing <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> R&D <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> Others <span class="font-semibold ml-auto">9%</span></div>
|
||||
</div>
|
||||
</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 border border-gray-100 p-6 anim-fade anim-delay-2 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Financial Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Period Summary</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-blue-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">$12.4M</p><span class="text-[10px] text-green-600 font-semibold">▲ +8.2%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Net Income</p><p class="text-lg font-bold text-gray-900">$2.8M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.4%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Op. Expenses</p><p class="text-lg font-bold text-gray-900">$6.8M</p><span class="text-[10px] text-red-500 font-semibold">▲ +3.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cash Position</p><p class="text-lg font-bold text-gray-900">$5.2M</p><span class="text-[10px] text-green-600 font-semibold">▲ +1.2M</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>Gross Margin: <b class="text-gray-700">42.3%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></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">$12.4M</p><span class="kpi-delta">▲ +8.2%</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">Net Income</p><p class="kpi-value">$2.8M</p><span class="kpi-delta">▲ +5.4%</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">Op. Expenses</p><p class="kpi-value">$6.8M</p><span class="kpi-delta">▲ +3.1%</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">Cash Position</p><p class="kpi-value">$5.2M</p><span class="kpi-delta">▲ +1.2M</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">AR Turnover</p><p class="kpi-value">38d</p><span class="kpi-delta">▼ -2d</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">Gross Margin</p><p class="kpi-value">42.3%</p><span class="kpi-delta">▲ +2.1%</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">Op. Cash Flow</p><p class="kpi-value">$3.2M</p><span class="kpi-delta">▲ +12%</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">Debt Ratio</p><p class="kpi-value">0.45</p><span class="kpi-delta">▼ -0.03</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 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">Financial 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-blue-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 Revenue</p><p class="mm-sub">$12.4M ▲ 8.2%</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">Net Income</p><p class="mm-sub">$2.8M ▲ 5.4%</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">Op. Expenses</p><p class="mm-sub">$6.8M ▲ 3.1%</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">Cash Position</p><p class="mm-sub">$5.2M ▲ 1.2M</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">AR Turnover</p><p class="mm-sub">38d ▼ 2d</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">Gross Margin</p><p class="mm-sub">42.3% ▲ 2.1%</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">Op. Cash Flow</p><p class="mm-sub">$3.2M ▲ 12%</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">Debt Ratio</p><p class="mm-sub">0.45 ▼ 0.03</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">Working Capital</p><p class="mm-sub">$4.2M ▲ 6.7%</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">EBITDA</p><p class="mm-sub">$2.1M ▲ 9.2%</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">Data Storage</p><p class="mm-sub">2.4TB ▲ 18%</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">Compliance Score</p><p class="mm-sub">96% ▲ 3pts</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">Headcount</p><p class="mm-sub">342 ▼ 12</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">Market Share</p><p class="mm-sub">24.5% ▲ 1.2%</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">NPS Score</p><p class="mm-sub">72 ▲ 5pts</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">Avg Response</p><p class="mm-sub">2.4hrs ▼ 0.3</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">Quality Rate</p><p class="mm-sub">98.7% ▲ 0.4%</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">Cost per Unit</p><p class="mm-sub">$84 ▼ $6</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">Inventory Turn</p><p class="mm-sub">6.2x ▼ 0.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">Global Reach</p><p class="mm-sub">28 countries</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Balance Sheet Summary</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">Total Assets</p><p class="text-sm font-bold text-gray-900">$18.6M</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">Total Liabilities</p><p class="text-sm font-bold text-gray-900">$8.4M</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">Equity</p><p class="text-sm font-bold text-blue-700">$10.2M</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Current Ratio</span><span class="font-semibold text-gray-900">2.4x</span><span>D/E Ratio</span><span class="font-semibold text-gray-900">0.82</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
|
||||
<h3 class="font-bold text-gray-900 mb-1">AR/AP Aging</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Receivables & payables aging</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">AR Current (0-30d)</p><p class="text-sm font-bold text-green-700">$2.8M</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">AR Aging (31-60d)</p><p class="text-sm font-bold text-amber-600">$1.2M</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">AR Overdue (60d+)</p><p class="text-sm font-bold text-red-600">$0.6M</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">AP Outstanding</p><p class="text-sm font-bold text-blue-700">$1.8M</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>DSO: <b>38 days</b></span><span>DPO: <b>42 days</b></span></div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Cash Flow</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">+$3.2M</span><p class="text-gray-400">Operating</p></div>
|
||||
<div><span class="font-bold text-red-600">-$1.1M</span><p class="text-gray-400">Investing</p></div>
|
||||
<div><span class="font-bold text-red-600">-$0.8M</span><p class="text-gray-400">Financing</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-white 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">Recent Journal Entries</h3><p class="text-xs text-gray-400 mt-0.5">Unposted & latest GL transactions</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Entry →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>Journal #</th><th>Description</th><th>Debit</th><th>Credit</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Unposted: <b class="text-amber-600">4 entries</b></span><span>Total this period: <b>142 entries</b></span></div>
|
||||
</div>
|
||||
<div class="bg-white 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">Financial Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time finance updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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 border border-gray-100 p-5 anim-fade anim-delay-4">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Budget vs Actual</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">Revenue</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">COGS</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">OpEx</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">Net Income</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>Budget Variance: <b class="text-green-600">+12%</b></span><span class="text-blue-600">On Track</span></div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Fixed Assets Summary</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Depreciation & asset tracking</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">Total Asset Value</p><p class="text-sm font-bold text-gray-900">$5.2M</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">Accum. Depreciation</p><p class="text-sm font-bold text-amber-600">($1.8M)</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">Net Book Value</p><p class="text-sm font-bold text-blue-700">$3.4M</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">This Month Depr.</p><p class="text-sm font-bold text-gray-900">$42,800</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Assets Count: <b>124</b></span><span>Fully Depr.: <b>18</b></span></div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-6">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Tax Calendar</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Upcoming tax deadlines</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">PPh 21 (Income Tax)</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">PPN (VAT)</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">PPh 25/29</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Annual SPT</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-white 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">Trial Balance Summary</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top accounts</p></div>
|
||||
<span class="text-xs text-blue-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>Account Code</th><th>Account Name</th><th>Debit</th><th>Credit</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 Debit: <span class="text-green-600">$17,000,000</span></span><span>Total Credit: <span class="text-red-600">$17,000,000</span></span></div>
|
||||
</div>
|
||||
<div class="bg-white 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 Payment Schedule</h3><p class="text-xs text-gray-400 mt-0.5">AP invoices due next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Payables →</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>Invoice</th><th>Vendor</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Due: <b class="text-gray-900">$93,500</b></span><span>Overdue: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-fms.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,444 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardHrm1";
|
||||
ViewData["SidebarVariant"] = "1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style1.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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-blue-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: #3b82f6;"><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-blue-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-blue-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-blue-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-blue-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-blue-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">Alice Chen</td><td class="font-mono text-xs">Engineering</td><td class="font-mono text-xs">4.9</td><td class="font-mono text-xs">8</td><td><span class="chip chip-indigo">Top Rated</span></td></tr>
|
||||
<tr><td class="text-xs">Bob Martinez</td><td class="font-mono text-xs">Marketing</td><td class="font-mono text-xs">4.8</td><td class="font-mono text-xs">6</td><td><span class="chip chip-indigo">Top Rated</span></td></tr>
|
||||
<tr><td class="text-xs">Carol Smith</td><td class="font-mono text-xs">Sales</td><td class="font-mono text-xs">4.7</td><td class="font-mono text-xs">10</td><td><span class="chip chip-green">Rising Star</span></td></tr>
|
||||
<tr><td class="text-xs">David Lee</td><td class="font-mono text-xs">Engineering</td><td class="font-mono text-xs">4.6</td><td class="font-mono text-xs">7</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-blue-400 animate-pulse"></span> <span class="text-blue-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-blue-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-blue-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">$1.2M</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-blue-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-blue-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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</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>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-hrm.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,444 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardHrm2";
|
||||
ViewData["SidebarVariant"] = "2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style2.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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-blue-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: #3b82f6;"><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-blue-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-blue-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-red-500 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-blue-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-blue-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-blue-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">Eve Davis</td><td class="font-mono text-xs">Operations</td><td class="font-mono text-xs">4.8</td><td class="font-mono text-xs">9</td><td><span class="chip chip-indigo">Top Rated</span></td></tr>
|
||||
<tr><td class="text-xs">Frank Wilson</td><td class="font-mono text-xs">Finance</td><td class="font-mono text-xs">4.7</td><td class="font-mono text-xs">5</td><td><span class="chip chip-green">Rising Star</span></td></tr>
|
||||
<tr><td class="text-xs">Grace Kim</td><td class="font-mono text-xs">Engineering</td><td class="font-mono text-xs">4.6</td><td class="font-mono text-xs">11</td><td><span class="chip chip-indigo">Top Rated</span></td></tr>
|
||||
<tr><td class="text-xs">Henry Brown</td><td class="font-mono text-xs">Marketing</td><td class="font-mono text-xs">4.5</td><td class="font-mono text-xs">4</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-blue-400 animate-pulse"></span> <span class="text-blue-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">1,112 / 1,247</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:89%;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">42 / 124</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:34%;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">68 / 1,247</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:5%;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">4.2 / 8.0</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:52%;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-blue-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-blue-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.4M</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">As of Jun 30, 2026 · Active job openings</p></div>
|
||||
<span class="text-xs text-blue-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-blue-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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</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>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-hrm.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,405 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardHrm3";
|
||||
ViewData["SidebarVariant"] = "3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style3.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">Isabella Torres</td><td class="font-mono text-xs">HR & Admin</td><td class="font-mono text-xs">4.9</td><td class="font-mono text-xs">7</td><td><span class="chip chip-indigo">Top Rated</span></td></tr>
|
||||
<tr><td class="text-xs">Jack Nguyen</td><td class="font-mono text-xs">Engineering</td><td class="font-mono text-xs">4.8</td><td class="font-mono text-xs">12</td><td><span class="chip chip-indigo">Top Rated</span></td></tr>
|
||||
<tr><td class="text-xs">Kelly Parker</td><td class="font-mono text-xs">Sales</td><td class="font-mono text-xs">4.6</td><td class="font-mono text-xs">6</td><td><span class="chip chip-green">Rising Star</span></td></tr>
|
||||
<tr><td class="text-xs">Liam O'Brien</td><td class="font-mono text-xs">Operations</td><td class="font-mono text-xs">4.5</td><td class="font-mono text-xs">9</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>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-hrm.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,405 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardHrm4";
|
||||
ViewData["SidebarVariant"] = "4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style4.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-hrm.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,357 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardHrm5";
|
||||
ViewData["SidebarVariant"] = "5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style5.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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-blue-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: #3b82f6;"><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 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 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-blue-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 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 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-blue-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-green-600 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-red-500 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 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-blue-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 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-blue-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 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-green-600">+68</span><p class="text-gray-400">On Leave</p></div>
|
||||
<div><span class="font-bold text-green-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 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-blue-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">Alice Chen</td><td class="font-mono text-xs">Engineering</td><td class="font-mono text-xs">4.9</td><td class="font-mono text-xs">8</td><td><span class="chip chip-indigo">Active</span></td></tr>
|
||||
<tr><td class="text-xs">Bob Martinez</td><td class="font-mono text-xs">Marketing</td><td class="font-mono text-xs">4.8</td><td class="font-mono text-xs">6</td><td><span class="chip chip-indigo">Active</span></td></tr>
|
||||
<tr><td class="text-xs">Carol Smith</td><td class="font-mono text-xs">Sales</td><td class="font-mono text-xs">4.7</td><td class="font-mono text-xs">10</td><td><span class="chip chip-indigo">Active</span></td></tr>
|
||||
<tr><td class="text-xs">David Lee</td><td class="font-mono text-xs">Engineering</td><td class="font-mono text-xs">4.6</td><td class="font-mono text-xs">7</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 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-blue-400 animate-pulse"></span> <span class="text-blue-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">HR</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>New Hire</b> — Onboarded John Doe</p><p class="text-xs text-gray-400 mt-0.5">👤 $85,000 · Dept: Engineering · Level: Senior</p><p class="text-xs text-gray-400">12 min ago</p></div>
|
||||
<span class="chip chip-green self-start">Active</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">HR</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Leave Approved</b> — Employee: Jane Smith</p><p class="text-xs text-gray-400 mt-0.5">📅 5 days · Annual leave starting Jul 10</p><p class="text-xs text-gray-400">35 min ago</p></div>
|
||||
<span class="chip chip-green self-start">Approved</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">HR</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Training Completed</b> — Leadership Program</p><p class="text-xs text-gray-400 mt-0.5">📋 24 participants · 92% completion rate</p><p class="text-xs text-gray-400">1 hour ago</p></div>
|
||||
<span class="chip chip-indigo self-start">Completed</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">HR</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Payroll Processed</b> — June payroll</p><p class="text-xs text-gray-400 mt-0.5">💰 $4.8M · 1,247 employees processed</p><p class="text-xs text-gray-400">2 hours ago</p></div>
|
||||
<span class="chip chip-amber self-start">Processing</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="bg-white 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">97.8% / 95%</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">342 / 300</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:114%;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">68 / 75</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:91%;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">4.2 / 5.0</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:84%;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-blue-600">On Track</span></div>
|
||||
</div>
|
||||
<div class="bg-white 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-blue-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 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 average per employee</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">% of total compensation</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">Year-to-date bonus paid</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">$1.2M</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">Error rate tracking</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 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">As of Jun 30, 2026 · Active job openings</p></div>
|
||||
<span class="text-xs text-blue-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">Senior Engineer</td><td>Engineering</td><td class="font-mono text-xs text-green-600">24</td><td class="font-mono text-xs"><span class="chip chip-green">Active</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">Product Manager</td><td>Product</td><td class="font-mono text-xs text-green-600">18</td><td class="font-mono text-xs"><span class="chip chip-green">Active</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">Data Analyst</td><td>Data Science</td><td class="font-mono text-xs text-green-600">31</td><td class="font-mono text-xs"><span class="chip chip-green">Active</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">UX Designer</td><td>Design</td><td class="font-mono text-xs text-green-600">15</td><td class="font-mono text-xs"><span class="chip chip-amber">Reviewing</span></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 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-blue-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>Date</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">Alice Johnson</td><td>Birthday</td><td class="text-xs">Jul 05</td><td><span class="chip chip-amber">Upcoming</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">Bob Williams</td><td>Work Anniversary</td><td class="text-xs">Jul 08</td><td><span class="chip chip-amber">Upcoming</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">Carol Brown</td><td>Birthday</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">David Jones</td><td>Birthday</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">Eve Davis</td><td>Work Anniversary</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Today</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-green-500">3 birthdays</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-hrm.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,434 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardItsm1";
|
||||
ViewData["SidebarVariant"] = "1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style1.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">ITSM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">IT Service Management — Period: June 2026</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-blue-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: #3b82f6;"><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 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">Problem Management</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Active & known problems</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">Open Problems</p><p class="text-sm font-bold text-gray-900">12</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">Known Errors</p><p class="text-sm font-bold text-gray-900">8</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">Resolved This Month</p><p class="text-sm font-bold text-blue-700">18</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Avg Resolution</span><span class="font-semibold text-gray-900">14.2d</span><span>Ratio</span><span class="font-semibold text-gray-900">1:8.4</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 flex flex-col">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Key Performance Indicators</h3><p class="text-xs text-gray-400 mt-0.5">8 core ITSM metrics at a glance</p></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-blue-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 lg:grid-cols-4 gap-3">
|
||||
<div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Open Incidents</p><p class="kpi-value">47</p><span class="kpi-delta">↑ 12</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">Avg Resolution</p><p class="kpi-value">4.2h</p><span class="kpi-delta">↑ 0.8h</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">Open Problems</p><p class="kpi-value">12</p><span class="kpi-delta">↑ 3</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">Pending Changes</p><p class="kpi-value">8</p><span class="kpi-delta">0</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 class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">MTTR</p><p class="kpi-value">3.8h</p><span class="kpi-delta">↑ 0.6h</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">Backlog</p><p class="kpi-value">128</p><span class="kpi-delta">↑ 14</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">Reopen Rate</p><p class="kpi-value">4.2%</p><span class="kpi-delta">↑ 0.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="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">FRT</p><p class="kpi-value">12min</p><span class="kpi-delta">↑ 3min</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>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
|
||||
|
||||
<div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">ITSM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Service Desk 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-blue-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">Open Incidents</p><p class="text-lg font-bold text-gray-900">47</p><span class="text-[10px] text-red-500 font-semibold">↑ 12</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Avg Resolution</p><p class="text-lg font-bold text-gray-900">4.2h</p><span class="text-[10px] text-red-500 font-semibold">↑ 0.8h</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open Problems</p><p class="text-lg font-bold text-gray-900">12</p><span class="text-[10px] text-red-500 font-semibold">↑ 3</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pending Changes</p><p class="text-lg font-bold text-gray-900">8</p><span class="text-[10px] text-green-600 font-semibold">0</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>SLA Compliance: <b class="text-gray-700">94.8%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 flex flex-col">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Incident & Change Management</h3><p class="text-xs text-gray-400 mt-0.5">Priority movement</p></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-blue-600" 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 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">+8</span><p class="text-gray-400">Critical</p></div>
|
||||
<div><span class="font-bold text-red-600">+14</span><p class="text-gray-400">High</p></div>
|
||||
<div><span class="font-bold text-red-600">+18</span><p class="text-gray-400">Medium</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 flex flex-col">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Change Management</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This month's changes</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">Pending Authorization</p><p class="text-sm font-bold text-green-700">8</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">Successful Changes</p><p class="text-sm font-bold text-amber-600">42</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">Failed/Rolled Back</p><p class="text-sm font-bold text-red-600">2</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">Success Rate</p><p class="text-sm font-bold text-blue-700">95.5%</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Normal Changes: <b>28</b></span><span>Emergency: <b>6</b></span></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">ITSM 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-blue-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">Open Incidents</p><p class="mm-sub">47 ↓ 12</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">Avg Resolution</p><p class="mm-sub">4.2 ↓ 0.8h</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">Open Problems</p><p class="mm-sub">12 ↓ 3</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">Pending Changes</p><p class="mm-sub">8 0</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">MTTR</p><p class="mm-sub">3.8 ↓ 0.6h</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">Backlog</p><p class="mm-sub">128 ↓ 14</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">Reopen Rate</p><p class="mm-sub">4.2 ↓ 0.8pp</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">FRT</p><p class="mm-sub">12 ↓ 3min</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">SLA Compliance</p><p class="mm-sub">94.8 ↓ 1.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">FCR Rate</p><p class="mm-sub">78.4 ↓ 2.1%</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">CSAT Score</p><p class="mm-sub">4.2 ↓ 0.3</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">Total Assets</p><p class="mm-sub">3 ↑ 48</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">Critical Incidents</p><p class="mm-sub">8 ↓ 2</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">Avg Response</p><p class="mm-sub">4.2 ↓ 0.3h</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">SLA Met</p><p class="mm-sub">94.8 ↓ 1.2pp</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">Success Rate</p><p class="mm-sub">95.5 ↓ 2.1%</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">CI Accuracy</p><p class="mm-sub">96.8 ↓ 0.8%</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">Releases</p><p class="mm-sub">42 ↓ 8</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">Open Tickets</p><p class="mm-sub">128 ↓ 14</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">CI Items</p><p class="mm-sub">3,247 total</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">Incident Trend</h3><p class="text-xs text-gray-400 mt-0.5">Daily incident volume & resolved</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> Resolved</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Incident Category</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> Hardware <span class="font-semibold ml-auto">28%</span></div>
|
||||
<div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Software <span class="font-semibold ml-auto">32%</span></div>
|
||||
<div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Network <span class="font-semibold ml-auto">18%</span></div>
|
||||
<div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Security <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> Other <span class="font-semibold ml-auto">10%</span></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 Agents</h3><p class="text-xs text-gray-400 mt-0.5">This month's performance</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Agent</th><th>Tickets</th><th>Resolved</th><th>Avg Time</th><th>CSAT</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">David K.</td><td class="font-mono text-xs">258</td><td class="font-mono text-xs">238</td><td class="text-xs">2.4h</td><td><span class="chip chip-green">4.8</span></td></tr>
|
||||
<tr><td class="text-xs">Sarah M.</td><td class="font-mono text-xs">196</td><td class="font-mono text-xs">182</td><td class="text-xs">3.1h</td><td><span class="chip chip-green">4.6</span></td></tr>
|
||||
<tr><td class="text-xs">John P.</td><td class="font-mono text-xs">174</td><td class="font-mono text-xs">158</td><td class="text-xs">2.9h</td><td><span class="chip chip-amber">4.3</span></td></tr>
|
||||
<tr><td class="text-xs">Lisa R.</td><td class="font-mono text-xs">142</td><td class="font-mono text-xs">138</td><td class="text-xs">1.8h</td><td><span class="chip chip-green">4.9</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Agent: <b class="text-amber-600">David K.</b></span><span>Total tickets: <b>258</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">ITSM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time ticket updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">SLA Performance</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">P1 Resolution</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">P2 Resolution</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">P3 Resolution</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">Request Fulfillment</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>Overall: <b class="text-green-600">94.8%</b></span><span class="text-blue-600">Breaches: 12</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">CMDB Summary</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Configuration management</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">Total CIs</p><p class="text-sm font-bold text-gray-900">3,247</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">CI Accuracy</p><p class="text-sm font-bold text-amber-600">96.8%</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">Unmapped</p><p class="text-sm font-bold text-blue-700">18</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">Completeness</p><p class="text-sm font-bold text-gray-900">92.4%</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Server CIs: <b>486</b></span><span>Network: <b>342</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">Release Pipeline</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Upcoming & recent releases</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">Successful Releases</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">HR App v3.2</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">CRM Upgrade</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Security Patch</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</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 Incidents</h3><p class="text-xs text-gray-400 mt-0.5">Unresolved tickets requiring action</p></div>
|
||||
<span class="text-xs text-blue-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>ID</th><th>Title</th><th>Priority</th><th>Status</th><th>Agent</th><th>Age</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">INC-001</td><td>Email system down</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">4h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-002</td><td>VPN connection failed</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">2h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-003</td><td>File share permission error</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">1d</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-004</td><td>Password reset request</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">30m</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-005</td><td>Printer offline - Floor 3</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">3h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-006</td><td>ERP app slow response</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">5h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-007</td><td>New laptop setup</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">John P.</td><td class="text-xs">1h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-008</td><td>Database connection timeout</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">6h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-009</td><td>VoIP phone system issue</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Mike T.</td><td class="text-xs">2h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-010</td><td>Antivirus update failure</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">Anna W.</td><td class="text-xs">3h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-011</td><td>Shared drive inaccessible</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">5h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-012</td><td>Software license expired</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">1d</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-013</td><td>Monitor display flickering</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">John P.</td><td class="text-xs">30m</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-014</td><td>Network switch port down</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">4h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-015</td><td>Wireless connectivity drops</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">Anna W.</td><td class="text-xs">2d</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-016</td><td>Printer driver update needed</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">1h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-017</td><td>Cloud storage sync failure</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">3h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-018</td><td>BI dashboard not loading</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">8h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-019</td><td>Email attachment blocked</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">2h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-020</td><td>Server certificate expired</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">1h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-021</td><td>CRM login page error</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Anna W.</td><td class="text-xs">4h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-022</td><td>Backup job failed</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">7h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-023</td><td>VPN profile missing</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">David K.</td><td class="text-xs">45m</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-024</td><td>Intranet portal down</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">2h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-025</td><td>USB device not recognized</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">1d</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-026</td><td>DNS resolution failure</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">3h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-027</td><td>Mobile app crashing</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Anna W.</td><td class="text-xs">5h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-028</td><td>File restore request</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">20m</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 Open: <span class="text-green-600">47</span></span><span>Critical: <span class="text-red-600">8</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">Popular Services</h3><p class="text-xs text-gray-400 mt-0.5">Most requested services this month</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Service Catalog →</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>Invoice</th><th>Vendor</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Requests: <b class="text-gray-900">663</b></span><span>FCR Rate: <b class="text-red-500">78.4%</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-itsm.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,434 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardItsm2";
|
||||
ViewData["SidebarVariant"] = "2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style2.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">ITSM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">IT Service Management - Period: June 2026</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-blue-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: #3b82f6;"><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 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">Problem Management</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Active & known problems</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">Open Problems</p><p class="text-sm font-bold text-gray-900">12</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">Known Errors</p><p class="text-sm font-bold text-gray-900">8</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">Resolved This Month</p><p class="text-sm font-bold text-blue-700">18</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Avg Resolution</span><span class="font-semibold text-gray-900">14.2d</span><span>Ratio</span><span class="font-semibold text-gray-900">1:8.4</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 flex flex-col">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Key Performance Indicators</h3><p class="text-xs text-gray-400 mt-0.5">8 core ITSM metrics at a glance</p></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-blue-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 lg:grid-cols-4 gap-3">
|
||||
<div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Open Incidents</p><p class="kpi-value">47</p><span class="kpi-delta">↑ 12</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">Avg Resolution</p><p class="kpi-value">4.2h</p><span class="kpi-delta">↑ 0.8h</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">Open Problems</p><p class="kpi-value">12</p><span class="kpi-delta">↑ 3</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">Pending Changes</p><p class="kpi-value">8</p><span class="kpi-delta">0</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 class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">MTTR</p><p class="kpi-value">3.8h</p><span class="kpi-delta">↑ 0.6h</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">Backlog</p><p class="kpi-value">128</p><span class="kpi-delta">↑ 14</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">Reopen Rate</p><p class="kpi-value">4.2%</p><span class="kpi-delta">↑ 0.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="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">FRT</p><p class="kpi-value">12min</p><span class="kpi-delta">↑ 3min</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>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
|
||||
|
||||
<div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">ITSM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Service Desk 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-blue-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">Open Incidents</p><p class="text-lg font-bold text-gray-900">47</p><span class="text-[10px] text-red-500 font-semibold">↑ 12</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Avg Resolution</p><p class="text-lg font-bold text-gray-900">4.2h</p><span class="text-[10px] text-red-500 font-semibold">↑ 0.8h</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open Problems</p><p class="text-lg font-bold text-gray-900">12</p><span class="text-[10px] text-red-500 font-semibold">↑ 3</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pending Changes</p><p class="text-lg font-bold text-gray-900">8</p><span class="text-[10px] text-green-600 font-semibold">0</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>SLA Compliance: <b class="text-gray-700">94.8%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 flex flex-col">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Incident & Change Management</h3><p class="text-xs text-gray-400 mt-0.5">Priority movement</p></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-blue-600" 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 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">+8</span><p class="text-gray-400">Critical</p></div>
|
||||
<div><span class="font-bold text-red-600">+14</span><p class="text-gray-400">High</p></div>
|
||||
<div><span class="font-bold text-red-600">+18</span><p class="text-gray-400">Medium</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 flex flex-col">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Change Management</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This month's changes</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">Pending Authorization</p><p class="text-sm font-bold text-green-700">8</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">Successful Changes</p><p class="text-sm font-bold text-amber-600">42</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">Failed/Rolled Back</p><p class="text-sm font-bold text-red-600">2</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">Success Rate</p><p class="text-sm font-bold text-blue-700">95.5%</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Normal Changes: <b>28</b></span><span>Emergency: <b>6</b></span></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">ITSM 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-blue-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">Open Incidents</p><p class="mm-sub">47 ↓ 12</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">Avg Resolution</p><p class="mm-sub">4.2 ↓ 0.8h</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">Open Problems</p><p class="mm-sub">12 ↓ 3</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">Pending Changes</p><p class="mm-sub">8 0</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">MTTR</p><p class="mm-sub">3.8 ↓ 0.6h</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">Backlog</p><p class="mm-sub">128 ↓ 14</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">Reopen Rate</p><p class="mm-sub">4.2 ↓ 0.8pp</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">FRT</p><p class="mm-sub">12 ↓ 3min</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">SLA Compliance</p><p class="mm-sub">94.8 ↓ 1.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">FCR Rate</p><p class="mm-sub">78.4 ↓ 2.1%</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">CSAT Score</p><p class="mm-sub">4.2 ↓ 0.3</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">Total Assets</p><p class="mm-sub">3 ↑ 48</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">Critical Incidents</p><p class="mm-sub">8 ↓ 2</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">Avg Response</p><p class="mm-sub">4.2 ↓ 0.3h</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">SLA Met</p><p class="mm-sub">94.8 ↓ 1.2pp</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">Success Rate</p><p class="mm-sub">95.5 ↓ 2.1%</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">CI Accuracy</p><p class="mm-sub">96.8 ↓ 0.8%</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">Releases</p><p class="mm-sub">42 ↓ 8</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">Open Tickets</p><p class="mm-sub">128 ↓ 14</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">CI Items</p><p class="mm-sub">3,247 total</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">Incident Trend</h3><p class="text-xs text-gray-400 mt-0.5">Daily incident volume & resolved</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> Resolved</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Incident Category</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> Hardware <span class="font-semibold ml-auto">28%</span></div>
|
||||
<div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Software <span class="font-semibold ml-auto">32%</span></div>
|
||||
<div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Network <span class="font-semibold ml-auto">18%</span></div>
|
||||
<div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Security <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> Other <span class="font-semibold ml-auto">10%</span></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 Agents</h3><p class="text-xs text-gray-400 mt-0.5">This month's performance</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Agent</th><th>Tickets</th><th>Resolved</th><th>Avg Time</th><th>CSAT</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">David K.</td><td class="font-mono text-xs">258</td><td class="font-mono text-xs">238</td><td class="text-xs">2.4h</td><td><span class="chip chip-green">4.8</span></td></tr>
|
||||
<tr><td class="text-xs">Sarah M.</td><td class="font-mono text-xs">196</td><td class="font-mono text-xs">182</td><td class="text-xs">3.1h</td><td><span class="chip chip-green">4.6</span></td></tr>
|
||||
<tr><td class="text-xs">John P.</td><td class="font-mono text-xs">174</td><td class="font-mono text-xs">158</td><td class="text-xs">2.9h</td><td><span class="chip chip-amber">4.3</span></td></tr>
|
||||
<tr><td class="text-xs">Lisa R.</td><td class="font-mono text-xs">142</td><td class="font-mono text-xs">138</td><td class="text-xs">1.8h</td><td><span class="chip chip-green">4.9</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Agent: <b class="text-amber-600">David K.</b></span><span>Total tickets: <b>258</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">ITSM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time ticket updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">SLA Performance</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">P1 Resolution</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">P2 Resolution</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">P3 Resolution</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">Request Fulfillment</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>Overall: <b class="text-green-600">94.8%</b></span><span class="text-blue-600">Breaches: 12</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">CMDB Summary</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Configuration management</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">Total CIs</p><p class="text-sm font-bold text-gray-900">3,247</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">CI Accuracy</p><p class="text-sm font-bold text-amber-600">96.8%</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">Unmapped</p><p class="text-sm font-bold text-blue-700">18</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">Completeness</p><p class="text-sm font-bold text-gray-900">92.4%</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Server CIs: <b>486</b></span><span>Network: <b>342</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">Release Pipeline</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Upcoming & recent releases</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">Successful Releases</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">HR App v3.2</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">CRM Upgrade</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Security Patch</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</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 Incidents</h3><p class="text-xs text-gray-400 mt-0.5">Unresolved tickets requiring action</p></div>
|
||||
<span class="text-xs text-blue-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>ID</th><th>Title</th><th>Priority</th><th>Status</th><th>Agent</th><th>Age</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">INC-001</td><td>Email system down</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">4h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-002</td><td>VPN connection failed</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">2h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-003</td><td>File share permission error</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">1d</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-004</td><td>Password reset request</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">30m</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-005</td><td>Printer offline - Floor 3</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">3h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-006</td><td>ERP app slow response</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">5h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-007</td><td>New laptop setup</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">John P.</td><td class="text-xs">1h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-008</td><td>Database connection timeout</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">6h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-009</td><td>VoIP phone system issue</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Mike T.</td><td class="text-xs">2h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-010</td><td>Antivirus update failure</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">Anna W.</td><td class="text-xs">3h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-011</td><td>Shared drive inaccessible</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">5h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-012</td><td>Software license expired</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">1d</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-013</td><td>Monitor display flickering</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">John P.</td><td class="text-xs">30m</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-014</td><td>Network switch port down</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">4h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-015</td><td>Wireless connectivity drops</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">Anna W.</td><td class="text-xs">2d</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-016</td><td>Printer driver update needed</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">1h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-017</td><td>Cloud storage sync failure</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">3h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-018</td><td>BI dashboard not loading</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">8h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-019</td><td>Email attachment blocked</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">2h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-020</td><td>Server certificate expired</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">1h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-021</td><td>CRM login page error</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Anna W.</td><td class="text-xs">4h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-022</td><td>Backup job failed</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">7h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-023</td><td>VPN profile missing</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">David K.</td><td class="text-xs">45m</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-024</td><td>Intranet portal down</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">2h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-025</td><td>USB device not recognized</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">1d</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-026</td><td>DNS resolution failure</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">3h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-027</td><td>Mobile app crashing</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Anna W.</td><td class="text-xs">5h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-028</td><td>File restore request</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">20m</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 Open: <span class="text-green-600">47</span></span><span>Critical: <span class="text-red-600">8</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">Popular Services</h3><p class="text-xs text-gray-400 mt-0.5">Most requested services this month</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Service Catalog →</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>Invoice</th><th>Vendor</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Requests: <b class="text-gray-900">663</b></span><span>FCR Rate: <b class="text-red-500">78.4%</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-itsm.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,434 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardItsm3";
|
||||
ViewData["SidebarVariant"] = "3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style3.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">ITSM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">IT Service Management — Period: June 2026</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 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">Problem Management</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Active & known problems</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">Open Problems</p><p class="text-sm font-bold text-gray-900">12</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">Known Errors</p><p class="text-sm font-bold text-gray-900">8</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">Resolved This Month</p><p class="text-sm font-bold text-blue-700">18</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Avg Resolution</span><span class="font-semibold text-gray-900">14.2d</span><span>Ratio</span><span class="font-semibold text-gray-900">1:8.4</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 flex flex-col">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Key Performance Indicators</h3><p class="text-xs text-gray-400 mt-0.5">8 core ITSM metrics at a glance</p></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-blue-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 lg:grid-cols-4 gap-3">
|
||||
<div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Open Incidents</p><p class="kpi-value">47</p><span class="kpi-delta">↑ 12</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">Avg Resolution</p><p class="kpi-value">4.2h</p><span class="kpi-delta">↑ 0.8h</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">Open Problems</p><p class="kpi-value">12</p><span class="kpi-delta">↑ 3</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">Pending Changes</p><p class="kpi-value">8</p><span class="kpi-delta">0</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 class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">MTTR</p><p class="kpi-value">3.8h</p><span class="kpi-delta">↑ 0.6h</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">Backlog</p><p class="kpi-value">128</p><span class="kpi-delta">↑ 14</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">Reopen Rate</p><p class="kpi-value">4.2%</p><span class="kpi-delta">↑ 0.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="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">FRT</p><p class="kpi-value">12min</p><span class="kpi-delta">↑ 3min</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>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
|
||||
|
||||
<div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">ITSM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Service Desk 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-blue-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">Open Incidents</p><p class="text-lg font-bold text-gray-900">47</p><span class="text-[10px] text-red-500 font-semibold">↑ 12</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Avg Resolution</p><p class="text-lg font-bold text-gray-900">4.2h</p><span class="text-[10px] text-red-500 font-semibold">↑ 0.8h</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open Problems</p><p class="text-lg font-bold text-gray-900">12</p><span class="text-[10px] text-red-500 font-semibold">↑ 3</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pending Changes</p><p class="text-lg font-bold text-gray-900">8</p><span class="text-[10px] text-green-600 font-semibold">0</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>SLA Compliance: <b class="text-gray-700">94.8%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 flex flex-col">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Incident & Change Management</h3><p class="text-xs text-gray-400 mt-0.5">Priority movement</p></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-blue-600" 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 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">+8</span><p class="text-gray-400">Critical</p></div>
|
||||
<div><span class="font-bold text-red-600">+14</span><p class="text-gray-400">High</p></div>
|
||||
<div><span class="font-bold text-red-600">+18</span><p class="text-gray-400">Medium</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 flex flex-col">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Change Management</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This month's changes</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">Pending Authorization</p><p class="text-sm font-bold text-green-700">8</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">Successful Changes</p><p class="text-sm font-bold text-amber-600">42</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">Failed/Rolled Back</p><p class="text-sm font-bold text-red-600">2</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">Success Rate</p><p class="text-sm font-bold text-blue-700">95.5%</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Normal Changes: <b>28</b></span><span>Emergency: <b>6</b></span></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">ITSM 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-blue-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">Open Incidents</p><p class="mm-sub">47 ↓ 12</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">Avg Resolution</p><p class="mm-sub">4.2 ↓ 0.8h</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">Open Problems</p><p class="mm-sub">12 ↓ 3</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">Pending Changes</p><p class="mm-sub">8 0</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">MTTR</p><p class="mm-sub">3.8 ↓ 0.6h</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">Backlog</p><p class="mm-sub">128 ↓ 14</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">Reopen Rate</p><p class="mm-sub">4.2 ↓ 0.8pp</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">FRT</p><p class="mm-sub">12 ↓ 3min</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">SLA Compliance</p><p class="mm-sub">94.8 ↓ 1.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">FCR Rate</p><p class="mm-sub">78.4 ↓ 2.1%</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">CSAT Score</p><p class="mm-sub">4.2 ↓ 0.3</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">Total Assets</p><p class="mm-sub">3 ↑ 48</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">Critical Incidents</p><p class="mm-sub">8 ↓ 2</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">Avg Response</p><p class="mm-sub">4.2 ↓ 0.3h</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">SLA Met</p><p class="mm-sub">94.8 ↓ 1.2pp</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">Success Rate</p><p class="mm-sub">95.5 ↓ 2.1%</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">CI Accuracy</p><p class="mm-sub">96.8 ↓ 0.8%</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">Releases</p><p class="mm-sub">42 ↓ 8</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">Open Tickets</p><p class="mm-sub">128 ↓ 14</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">CI Items</p><p class="mm-sub">3,247 total</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">Incident Trend</h3><p class="text-xs text-gray-400 mt-0.5">Daily incident volume & resolved</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> Resolved</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Incident Category</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> Hardware <span class="font-semibold ml-auto">28%</span></div>
|
||||
<div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Software <span class="font-semibold ml-auto">32%</span></div>
|
||||
<div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Network <span class="font-semibold ml-auto">18%</span></div>
|
||||
<div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Security <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> Other <span class="font-semibold ml-auto">10%</span></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 Agents</h3><p class="text-xs text-gray-400 mt-0.5">This month's performance</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Agent</th><th>Tickets</th><th>Resolved</th><th>Avg Time</th><th>CSAT</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">David K.</td><td class="font-mono text-xs">258</td><td class="font-mono text-xs">238</td><td class="text-xs">2.4h</td><td><span class="chip chip-green">4.8</span></td></tr>
|
||||
<tr><td class="text-xs">Sarah M.</td><td class="font-mono text-xs">196</td><td class="font-mono text-xs">182</td><td class="text-xs">3.1h</td><td><span class="chip chip-green">4.6</span></td></tr>
|
||||
<tr><td class="text-xs">John P.</td><td class="font-mono text-xs">174</td><td class="font-mono text-xs">158</td><td class="text-xs">2.9h</td><td><span class="chip chip-amber">4.3</span></td></tr>
|
||||
<tr><td class="text-xs">Lisa R.</td><td class="font-mono text-xs">142</td><td class="font-mono text-xs">138</td><td class="text-xs">1.8h</td><td><span class="chip chip-green">4.9</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Agent: <b class="text-amber-600">David K.</b></span><span>Total tickets: <b>258</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">ITSM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time ticket updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">SLA Performance</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">P1 Resolution</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">P2 Resolution</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">P3 Resolution</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">Request Fulfillment</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>Overall: <b class="text-green-600">94.8%</b></span><span class="text-blue-600">Breaches: 12</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">CMDB Summary</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Configuration management</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">Total CIs</p><p class="text-sm font-bold text-gray-900">3,247</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">CI Accuracy</p><p class="text-sm font-bold text-amber-600">96.8%</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">Unmapped</p><p class="text-sm font-bold text-blue-700">18</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">Completeness</p><p class="text-sm font-bold text-gray-900">92.4%</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Server CIs: <b>486</b></span><span>Network: <b>342</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">Release Pipeline</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Upcoming & recent releases</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">Successful Releases</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">HR App v3.2</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">CRM Upgrade</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Security Patch</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</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 Incidents</h3><p class="text-xs text-gray-400 mt-0.5">Unresolved tickets requiring action</p></div>
|
||||
<span class="text-xs text-blue-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>ID</th><th>Title</th><th>Priority</th><th>Status</th><th>Agent</th><th>Age</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">INC-001</td><td>Email system down</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">4h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-002</td><td>VPN connection failed</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">2h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-003</td><td>File share permission error</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">1d</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-004</td><td>Password reset request</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">30m</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-005</td><td>Printer offline - Floor 3</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">3h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-006</td><td>ERP app slow response</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">5h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-007</td><td>New laptop setup</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">John P.</td><td class="text-xs">1h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-008</td><td>Database connection timeout</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">6h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-009</td><td>VoIP phone system issue</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Mike T.</td><td class="text-xs">2h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-010</td><td>Antivirus update failure</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">Anna W.</td><td class="text-xs">3h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-011</td><td>Shared drive inaccessible</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">5h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-012</td><td>Software license expired</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">1d</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-013</td><td>Monitor display flickering</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">John P.</td><td class="text-xs">30m</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-014</td><td>Network switch port down</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">4h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-015</td><td>Wireless connectivity drops</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">Anna W.</td><td class="text-xs">2d</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-016</td><td>Printer driver update needed</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">1h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-017</td><td>Cloud storage sync failure</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">3h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-018</td><td>BI dashboard not loading</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">8h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-019</td><td>Email attachment blocked</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">2h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-020</td><td>Server certificate expired</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">1h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-021</td><td>CRM login page error</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Anna W.</td><td class="text-xs">4h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-022</td><td>Backup job failed</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">7h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-023</td><td>VPN profile missing</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">David K.</td><td class="text-xs">45m</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-024</td><td>Intranet portal down</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">2h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-025</td><td>USB device not recognized</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">1d</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-026</td><td>DNS resolution failure</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">3h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-027</td><td>Mobile app crashing</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Anna W.</td><td class="text-xs">5h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-028</td><td>File restore request</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">20m</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 Open: <span class="text-green-600">47</span></span><span>Critical: <span class="text-red-600">8</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">Popular Services</h3><p class="text-xs text-gray-400 mt-0.5">Most requested services this month</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Service Catalog →</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>Invoice</th><th>Vendor</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Requests: <b class="text-gray-900">663</b></span><span>FCR Rate: <b class="text-red-500">78.4%</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-itsm.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,434 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardItsm4";
|
||||
ViewData["SidebarVariant"] = "4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style4.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">ITSM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">IT Service Management — Period: June 2026</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 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">Problem Management</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Active & known problems</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">Open Problems</p><p class="text-sm font-bold text-gray-900">12</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">Known Errors</p><p class="text-sm font-bold text-gray-900">8</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">Resolved This Month</p><p class="text-sm font-bold text-blue-700">18</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Avg Resolution</span><span class="font-semibold text-gray-900">14.2d</span><span>Ratio</span><span class="font-semibold text-gray-900">1:8.4</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 flex flex-col">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Key Performance Indicators</h3><p class="text-xs text-gray-400 mt-0.5">8 core ITSM metrics at a glance</p></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-blue-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 lg:grid-cols-4 gap-3">
|
||||
<div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Open Incidents</p><p class="kpi-value">47</p><span class="kpi-delta">↑ 12</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">Avg Resolution</p><p class="kpi-value">4.2h</p><span class="kpi-delta">↑ 0.8h</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">Open Problems</p><p class="kpi-value">12</p><span class="kpi-delta">↑ 3</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">Pending Changes</p><p class="kpi-value">8</p><span class="kpi-delta">0</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 class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">MTTR</p><p class="kpi-value">3.8h</p><span class="kpi-delta">↑ 0.6h</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">Backlog</p><p class="kpi-value">128</p><span class="kpi-delta">↑ 14</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">Reopen Rate</p><p class="kpi-value">4.2%</p><span class="kpi-delta">↑ 0.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="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">FRT</p><p class="kpi-value">12min</p><span class="kpi-delta">↑ 3min</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>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
|
||||
|
||||
<div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">ITSM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Service Desk 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-blue-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">Open Incidents</p><p class="text-lg font-bold text-gray-900">47</p><span class="text-[10px] text-red-500 font-semibold">↑ 12</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Avg Resolution</p><p class="text-lg font-bold text-gray-900">4.2h</p><span class="text-[10px] text-red-500 font-semibold">↑ 0.8h</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open Problems</p><p class="text-lg font-bold text-gray-900">12</p><span class="text-[10px] text-red-500 font-semibold">↑ 3</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pending Changes</p><p class="text-lg font-bold text-gray-900">8</p><span class="text-[10px] text-green-600 font-semibold">0</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>SLA Compliance: <b class="text-gray-700">94.8%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 flex flex-col">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Incident & Change Management</h3><p class="text-xs text-gray-400 mt-0.5">Priority movement</p></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-blue-600" 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 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">+8</span><p class="text-gray-400">Critical</p></div>
|
||||
<div><span class="font-bold text-red-600">+14</span><p class="text-gray-400">High</p></div>
|
||||
<div><span class="font-bold text-red-600">+18</span><p class="text-gray-400">Medium</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 flex flex-col">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Change Management</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This month's changes</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">Pending Authorization</p><p class="text-sm font-bold text-green-700">8</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">Successful Changes</p><p class="text-sm font-bold text-amber-600">42</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">Failed/Rolled Back</p><p class="text-sm font-bold text-red-600">2</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">Success Rate</p><p class="text-sm font-bold text-blue-700">95.5%</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Normal Changes: <b>28</b></span><span>Emergency: <b>6</b></span></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">ITSM 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-blue-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">Open Incidents</p><p class="mm-sub">47 ↓ 12</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">Avg Resolution</p><p class="mm-sub">4.2 ↓ 0.8h</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">Open Problems</p><p class="mm-sub">12 ↓ 3</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">Pending Changes</p><p class="mm-sub">8 0</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">MTTR</p><p class="mm-sub">3.8 ↓ 0.6h</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">Backlog</p><p class="mm-sub">128 ↓ 14</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">Reopen Rate</p><p class="mm-sub">4.2 ↓ 0.8pp</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">FRT</p><p class="mm-sub">12 ↓ 3min</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">SLA Compliance</p><p class="mm-sub">94.8 ↓ 1.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">FCR Rate</p><p class="mm-sub">78.4 ↓ 2.1%</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">CSAT Score</p><p class="mm-sub">4.2 ↓ 0.3</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">Total Assets</p><p class="mm-sub">3 ↑ 48</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">Critical Incidents</p><p class="mm-sub">8 ↓ 2</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">Avg Response</p><p class="mm-sub">4.2 ↓ 0.3h</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">SLA Met</p><p class="mm-sub">94.8 ↓ 1.2pp</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">Success Rate</p><p class="mm-sub">95.5 ↓ 2.1%</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">CI Accuracy</p><p class="mm-sub">96.8 ↓ 0.8%</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">Releases</p><p class="mm-sub">42 ↓ 8</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">Open Tickets</p><p class="mm-sub">128 ↓ 14</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">CI Items</p><p class="mm-sub">3,247 total</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">Incident Trend</h3><p class="text-xs text-gray-400 mt-0.5">Daily incident volume & resolved</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> Resolved</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Incident Category</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> Hardware <span class="font-semibold ml-auto">28%</span></div>
|
||||
<div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Software <span class="font-semibold ml-auto">32%</span></div>
|
||||
<div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Network <span class="font-semibold ml-auto">18%</span></div>
|
||||
<div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Security <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> Other <span class="font-semibold ml-auto">10%</span></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 Agents</h3><p class="text-xs text-gray-400 mt-0.5">This month's performance</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Agent</th><th>Tickets</th><th>Resolved</th><th>Avg Time</th><th>CSAT</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">David K.</td><td class="font-mono text-xs">258</td><td class="font-mono text-xs">238</td><td class="text-xs">2.4h</td><td><span class="chip chip-green">4.8</span></td></tr>
|
||||
<tr><td class="text-xs">Sarah M.</td><td class="font-mono text-xs">196</td><td class="font-mono text-xs">182</td><td class="text-xs">3.1h</td><td><span class="chip chip-green">4.6</span></td></tr>
|
||||
<tr><td class="text-xs">John P.</td><td class="font-mono text-xs">174</td><td class="font-mono text-xs">158</td><td class="text-xs">2.9h</td><td><span class="chip chip-amber">4.3</span></td></tr>
|
||||
<tr><td class="text-xs">Lisa R.</td><td class="font-mono text-xs">142</td><td class="font-mono text-xs">138</td><td class="text-xs">1.8h</td><td><span class="chip chip-green">4.9</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Agent: <b class="text-amber-600">David K.</b></span><span>Total tickets: <b>258</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">ITSM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time ticket updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">SLA Performance</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">P1 Resolution</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">P2 Resolution</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">P3 Resolution</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">Request Fulfillment</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>Overall: <b class="text-green-600">94.8%</b></span><span class="text-blue-600">Breaches: 12</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">CMDB Summary</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Configuration management</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">Total CIs</p><p class="text-sm font-bold text-gray-900">3,247</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">CI Accuracy</p><p class="text-sm font-bold text-amber-600">96.8%</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">Unmapped</p><p class="text-sm font-bold text-blue-700">18</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">Completeness</p><p class="text-sm font-bold text-gray-900">92.4%</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Server CIs: <b>486</b></span><span>Network: <b>342</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">Release Pipeline</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Upcoming & recent releases</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">Successful Releases</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">HR App v3.2</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">CRM Upgrade</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Security Patch</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</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 Incidents</h3><p class="text-xs text-gray-400 mt-0.5">Unresolved tickets requiring action</p></div>
|
||||
<span class="text-xs text-blue-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>ID</th><th>Title</th><th>Priority</th><th>Status</th><th>Agent</th><th>Age</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">INC-001</td><td>Email system down</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">4h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-002</td><td>VPN connection failed</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">2h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-003</td><td>File share permission error</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">1d</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-004</td><td>Password reset request</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">30m</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-005</td><td>Printer offline - Floor 3</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">3h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-006</td><td>ERP app slow response</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">5h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-007</td><td>New laptop setup</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">John P.</td><td class="text-xs">1h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-008</td><td>Database connection timeout</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">6h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-009</td><td>VoIP phone system issue</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Mike T.</td><td class="text-xs">2h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-010</td><td>Antivirus update failure</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">Anna W.</td><td class="text-xs">3h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-011</td><td>Shared drive inaccessible</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">5h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-012</td><td>Software license expired</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">1d</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-013</td><td>Monitor display flickering</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">John P.</td><td class="text-xs">30m</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-014</td><td>Network switch port down</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">4h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-015</td><td>Wireless connectivity drops</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">Anna W.</td><td class="text-xs">2d</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-016</td><td>Printer driver update needed</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">1h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-017</td><td>Cloud storage sync failure</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">3h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-018</td><td>BI dashboard not loading</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">8h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-019</td><td>Email attachment blocked</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">2h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-020</td><td>Server certificate expired</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">1h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-021</td><td>CRM login page error</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Anna W.</td><td class="text-xs">4h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-022</td><td>Backup job failed</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">7h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-023</td><td>VPN profile missing</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">David K.</td><td class="text-xs">45m</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-024</td><td>Intranet portal down</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">2h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-025</td><td>USB device not recognized</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">1d</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-026</td><td>DNS resolution failure</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">3h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-027</td><td>Mobile app crashing</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Anna W.</td><td class="text-xs">5h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-028</td><td>File restore request</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">20m</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 Open: <span class="text-green-600">47</span></span><span>Critical: <span class="text-red-600">8</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">Popular Services</h3><p class="text-xs text-gray-400 mt-0.5">Most requested services this month</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Service Catalog →</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>Invoice</th><th>Vendor</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Requests: <b class="text-gray-900">663</b></span><span>FCR Rate: <b class="text-red-500">78.4%</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-itsm.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,434 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardItsm5";
|
||||
ViewData["SidebarVariant"] = "5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style5.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">ITSM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">IT Service Management — Period: June 2026</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-blue-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: #3b82f6;"><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 md:grid-cols-3 gap-4">
|
||||
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Problem Management</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Active & known problems</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">Open Problems</p><p class="text-sm font-bold text-gray-900">12</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">Known Errors</p><p class="text-sm font-bold text-gray-900">8</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">Resolved This Month</p><p class="text-sm font-bold text-blue-700">18</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Avg Resolution</span><span class="font-semibold text-gray-900">14.2d</span><span>Ratio</span><span class="font-semibold text-gray-900">1:8.4</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:col-span-2 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 flex flex-col">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Key Performance Indicators</h3><p class="text-xs text-gray-400 mt-0.5">8 core ITSM metrics at a glance</p></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-blue-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 lg:grid-cols-4 gap-3">
|
||||
<div class="kpi-card-sm kpi-b1"><div class="flex items-start justify-between"><div><p class="kpi-label">Open Incidents</p><p class="kpi-value">47</p><span class="kpi-delta">↑ 12</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">Avg Resolution</p><p class="kpi-value">4.2h</p><span class="kpi-delta">↑ 0.8h</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">Open Problems</p><p class="kpi-value">12</p><span class="kpi-delta">↑ 3</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">Pending Changes</p><p class="kpi-value">8</p><span class="kpi-delta">0</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 class="kpi-card-sm kpi-b5"><div class="flex items-start justify-between"><div><p class="kpi-label">MTTR</p><p class="kpi-value">3.8h</p><span class="kpi-delta">↑ 0.6h</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">Backlog</p><p class="kpi-value">128</p><span class="kpi-delta">↑ 14</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">Reopen Rate</p><p class="kpi-value">4.2%</p><span class="kpi-delta">↑ 0.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="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">FRT</p><p class="kpi-value">12min</p><span class="kpi-delta">↑ 3min</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>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
|
||||
|
||||
<div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">ITSM Overview</p><h3 class="text-lg font-bold text-gray-900 mt-0.5">Service Desk 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-blue-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">Open Incidents</p><p class="text-lg font-bold text-gray-900">47</p><span class="text-[10px] text-red-500 font-semibold">↑ 12</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Avg Resolution</p><p class="text-lg font-bold text-gray-900">4.2h</p><span class="text-[10px] text-red-500 font-semibold">↑ 0.8h</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open Problems</p><p class="text-lg font-bold text-gray-900">12</p><span class="text-[10px] text-red-500 font-semibold">↑ 3</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pending Changes</p><p class="text-lg font-bold text-gray-900">8</p><span class="text-[10px] text-green-600 font-semibold">0</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>SLA Compliance: <b class="text-gray-700">94.8%</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 flex flex-col">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Incident & Change Management</h3><p class="text-xs text-gray-400 mt-0.5">Priority movement</p></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-blue-600" 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 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">+8</span><p class="text-gray-400">Critical</p></div>
|
||||
<div><span class="font-bold text-red-600">+14</span><p class="text-gray-400">High</p></div>
|
||||
<div><span class="font-bold text-red-600">+18</span><p class="text-gray-400">Medium</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:col-span-4 bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 flex flex-col">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Change Management</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This month's changes</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">Pending Authorization</p><p class="text-sm font-bold text-green-700">8</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">Successful Changes</p><p class="text-sm font-bold text-amber-600">42</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">Failed/Rolled Back</p><p class="text-sm font-bold text-red-600">2</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">Success Rate</p><p class="text-sm font-bold text-blue-700">95.5%</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Normal Changes: <b>28</b></span><span>Emergency: <b>6</b></span></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">ITSM 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-blue-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">Open Incidents</p><p class="mm-sub">47 ↓ 12</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">Avg Resolution</p><p class="mm-sub">4.2 ↓ 0.8h</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">Open Problems</p><p class="mm-sub">12 ↓ 3</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">Pending Changes</p><p class="mm-sub">8 0</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">MTTR</p><p class="mm-sub">3.8 ↓ 0.6h</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">Backlog</p><p class="mm-sub">128 ↓ 14</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">Reopen Rate</p><p class="mm-sub">4.2 ↓ 0.8pp</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">FRT</p><p class="mm-sub">12 ↓ 3min</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">SLA Compliance</p><p class="mm-sub">94.8 ↓ 1.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">FCR Rate</p><p class="mm-sub">78.4 ↓ 2.1%</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">CSAT Score</p><p class="mm-sub">4.2 ↓ 0.3</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">Total Assets</p><p class="mm-sub">3 ↑ 48</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">Critical Incidents</p><p class="mm-sub">8 ↓ 2</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">Avg Response</p><p class="mm-sub">4.2 ↓ 0.3h</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">SLA Met</p><p class="mm-sub">94.8 ↓ 1.2pp</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">Success Rate</p><p class="mm-sub">95.5 ↓ 2.1%</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">CI Accuracy</p><p class="mm-sub">96.8 ↓ 0.8%</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">Releases</p><p class="mm-sub">42 ↓ 8</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">Open Tickets</p><p class="mm-sub">128 ↓ 14</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">CI Items</p><p class="mm-sub">3,247 total</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">Incident Trend</h3><p class="text-xs text-gray-400 mt-0.5">Daily incident volume & resolved</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> Resolved</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Incident Category</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> Hardware <span class="font-semibold ml-auto">28%</span></div>
|
||||
<div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#f97316"></span> Software <span class="font-semibold ml-auto">32%</span></div>
|
||||
<div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#ec4899"></span> Network <span class="font-semibold ml-auto">18%</span></div>
|
||||
<div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#8b5cf6"></span> Security <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> Other <span class="font-semibold ml-auto">10%</span></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 Agents</h3><p class="text-xs text-gray-400 mt-0.5">This month's performance</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Agent</th><th>Tickets</th><th>Resolved</th><th>Avg Time</th><th>CSAT</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">David K.</td><td class="font-mono text-xs">258</td><td class="font-mono text-xs">238</td><td class="text-xs">2.4h</td><td><span class="chip chip-green">4.8</span></td></tr>
|
||||
<tr><td class="text-xs">Sarah M.</td><td class="font-mono text-xs">196</td><td class="font-mono text-xs">182</td><td class="text-xs">3.1h</td><td><span class="chip chip-green">4.6</span></td></tr>
|
||||
<tr><td class="text-xs">John P.</td><td class="font-mono text-xs">174</td><td class="font-mono text-xs">158</td><td class="text-xs">2.9h</td><td><span class="chip chip-amber">4.3</span></td></tr>
|
||||
<tr><td class="text-xs">Lisa R.</td><td class="font-mono text-xs">142</td><td class="font-mono text-xs">138</td><td class="text-xs">1.8h</td><td><span class="chip chip-green">4.9</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Agent: <b class="text-amber-600">David K.</b></span><span>Total tickets: <b>258</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">ITSM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time ticket updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">SLA Performance</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">P1 Resolution</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">P2 Resolution</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">P3 Resolution</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">Request Fulfillment</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>Overall: <b class="text-green-600">94.8%</b></span><span class="text-blue-600">Breaches: 12</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">CMDB Summary</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Configuration management</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">Total CIs</p><p class="text-sm font-bold text-gray-900">3,247</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">CI Accuracy</p><p class="text-sm font-bold text-amber-600">96.8%</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">Unmapped</p><p class="text-sm font-bold text-blue-700">18</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">Completeness</p><p class="text-sm font-bold text-gray-900">92.4%</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Server CIs: <b>486</b></span><span>Network: <b>342</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">Release Pipeline</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Upcoming & recent releases</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">Successful Releases</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">HR App v3.2</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">CRM Upgrade</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Security Patch</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</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 Incidents</h3><p class="text-xs text-gray-400 mt-0.5">Unresolved tickets requiring action</p></div>
|
||||
<span class="text-xs text-blue-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>ID</th><th>Title</th><th>Priority</th><th>Status</th><th>Agent</th><th>Age</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">INC-001</td><td>Email system down</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">4h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-002</td><td>VPN connection failed</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">2h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-003</td><td>File share permission error</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">1d</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-004</td><td>Password reset request</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">30m</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-005</td><td>Printer offline - Floor 3</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">3h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-006</td><td>ERP app slow response</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">5h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-007</td><td>New laptop setup</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">John P.</td><td class="text-xs">1h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-008</td><td>Database connection timeout</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">6h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-009</td><td>VoIP phone system issue</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Mike T.</td><td class="text-xs">2h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-010</td><td>Antivirus update failure</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">Anna W.</td><td class="text-xs">3h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-011</td><td>Shared drive inaccessible</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">5h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-012</td><td>Software license expired</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">1d</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-013</td><td>Monitor display flickering</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">John P.</td><td class="text-xs">30m</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-014</td><td>Network switch port down</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">4h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-015</td><td>Wireless connectivity drops</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">Anna W.</td><td class="text-xs">2d</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-016</td><td>Printer driver update needed</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">1h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-017</td><td>Cloud storage sync failure</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">3h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-018</td><td>BI dashboard not loading</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">David K.</td><td class="text-xs">8h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-019</td><td>Email attachment blocked</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">2h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-020</td><td>Server certificate expired</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">1h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-021</td><td>CRM login page error</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Anna W.</td><td class="text-xs">4h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-022</td><td>Backup job failed</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">7h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-023</td><td>VPN profile missing</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">David K.</td><td class="text-xs">45m</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-024</td><td>Intranet portal down</td><td><span class="chip chip-orange">High</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Sarah M.</td><td class="text-xs">2h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-025</td><td>USB device not recognized</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-indigo">Pending</span></td><td class="text-xs">John P.</td><td class="text-xs">1d</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-026</td><td>DNS resolution failure</td><td><span class="chip chip-red">Critical</span></td><td><span class="chip chip-amber">In Progress</span></td><td class="text-xs">Mike T.</td><td class="text-xs">3h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-027</td><td>Mobile app crashing</td><td><span class="chip chip-amber">Medium</span></td><td><span class="chip chip-amber">Assigned</span></td><td class="text-xs">Anna W.</td><td class="text-xs">5h</td></tr>
|
||||
<tr><td class="font-mono text-xs">INC-028</td><td>File restore request</td><td><span class="chip chip-green">Low</span></td><td><span class="chip chip-blue">New</span></td><td class="text-xs">Lisa R.</td><td class="text-xs">20m</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 Open: <span class="text-green-600">47</span></span><span>Critical: <span class="text-red-600">8</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">Popular Services</h3><p class="text-xs text-gray-400 mt-0.5">Most requested services this month</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Service Catalog →</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>Invoice</th><th>Vendor</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Requests: <b class="text-gray-900">663</b></span><span>FCR Rate: <b class="text-red-500">78.4%</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-itsm.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,443 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardPos1";
|
||||
ViewData["SidebarVariant"] = "1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style1.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">POS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Point of Sale System — Period: Q2 2026</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-blue-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: #3b82f6;"><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 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">CRM 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-blue-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">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">↑ 15.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">↑ 22.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">↑ 9.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">↑ 2.1pp</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>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 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">$2.46M</p><span class="kpi-delta">↑ 15.3%</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">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">↑ 22.1%</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">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">↑ 2.1pp</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">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">↑ 9.3%</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-1 lg:row-start-2 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">Avg Deal Size</p><p class="kpi-value">$14.3K</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" 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">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">↑ 12.4%</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">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">↑ 0.4pp</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">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">↑ 8.7%</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">CRM 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-blue-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 Revenue</p><p class="mm-sub">$2.46M ↑ 15.3%</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">Pipeline Value</p><p class="mm-sub">$4.83M ↑ 22.1%</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">Win Rate</p><p class="mm-sub">34.2 ↓ 2.1pp</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">Customers</p><p class="mm-sub">1 ↑ 9.3%</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">Avg Deal Size</p><p class="mm-sub">$14.3K ↓ 5.8%</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">CLV</p><p class="mm-sub">$48.6K ↓ 12.4%</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">Churn Rate</p><p class="mm-sub">2.1 ↓ 0.4pp</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">MRR</p><p class="mm-sub">$128K ↓ 8.7%</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">Leads</p><p class="mm-sub">2 ↑ 18%</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">Deals</p><p class="mm-sub">640 ↓ 12%</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">Conversion</p><p class="mm-sub">4.7 ↓ 0.8%</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">CSAT</p><p class="mm-sub">4.2 ↓ 0.3</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">Contacts</p><p class="mm-sub">3 ↑ 14%</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">NPS Score</p><p class="mm-sub">72 ↓ 5pts</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 Cycle</p><p class="mm-sub">62 ↓ 3d</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">Response Time</p><p class="mm-sub">2.4 ↓ 0.3</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">SLA</p><p class="mm-sub">94.2 ↓ 2.1%</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">Email Open</p><p class="mm-sub">24.5 ↓ 2.3%</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">Campaigns</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">Enterprise</p><p class="mm-sub">35% rev share</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">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</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> Target</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Lead Sources</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> Website <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> Referral <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> Social <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> Email <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> Others <span class="font-semibold ml-auto">9%</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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">As of Q2 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">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</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">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</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">Avg Deal Size</p><p class="text-sm font-bold text-blue-700">$14.3K</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 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">Deal Stages</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Pipeline by stage</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">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</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">Qualified</p><p class="text-sm font-bold text-amber-600">640</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">Negotiation</p><p class="text-sm font-bold text-red-600">156</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">Closed Won</p><p class="text-sm font-bold text-blue-700">89</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</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">Sales Activity</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">+245</span><p class="text-gray-400">Calls</p></div>
|
||||
<div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
|
||||
<div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</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">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">DL-2026-0421</td><td>Enterprise SaaS contract</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">Negotiation</td><td><span class="chip chip-indigo">Active</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">DL-2026-0420</td><td>Q3 renewal - MegaCorp</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">Closed Won</td><td><span class="chip chip-indigo">Active</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">DL-2026-0419</td><td>Consulting engagement</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">Qualified</td><td><span class="chip chip-indigo">Active</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">DL-2026-0418</td><td>New lead - TechStart</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">Prospecting</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</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">CRM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">DL</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Deal Won</b> — DL-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $24,500 · Customer: TechDistrib · SaaS</p><p class="text-xs text-gray-400">12 min ago</p></div>
|
||||
<span class="chip chip-green self-start">Won</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">LD</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Lead Created</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $86,200 · Source: Website referral</p><p class="text-xs text-gray-400">35 min ago</p></div>
|
||||
<span class="chip chip-green self-start">New</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">DL</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Deal Updated</b> — Q3 renewal</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $42,800 · Stage moved to Negotiation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
|
||||
<span class="chip chip-indigo self-start">Updated</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">EM</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Email Sent</b> — Campaign Q2</p><p class="text-xs text-gray-400 mt-0.5">📧 2,450 recipients · Open rate 24.5%</p><p class="text-xs text-gray-400">2 hours ago</p></div>
|
||||
<span class="chip chip-amber self-start">Sent</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">Conversion Metrics</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">Leads → MQL</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">68% / 65%</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">MQL → SQL</p>
|
||||
<span class="text-[11px] font-semibold">42% / 40%</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">SQL → Won</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">34% / 32%</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">Overall CVR</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">4.7% / 4.5%</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>Target CVR: <b class="text-green-600">5%</b></span><span class="text-blue-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">Top Performers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K</p><p class="text-[10px] text-green-600">48%</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">James C.</p><p class="text-sm font-bold text-amber-600">$385K</p><p class="text-[10px] text-green-600">42%</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">Alex L.</p><p class="text-sm font-bold text-blue-700">$312K</p><p class="text-[10px] text-green-600">38%</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">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K</p><p class="text-[10px] text-green-600">35%</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</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">Support Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Customer service KPIs</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">Open Tickets</p><p class="text-sm font-bold text-green-700">48</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">-12%</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">Avg Response</p><p class="text-sm font-bold text-gray-900">2.4 hrs</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">↑ 0.3</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">CSAT Score</p><p class="text-sm font-bold text-amber-600">4.2 / 5.0</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">↑ 0.3</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">Resolution Time</p><p class="text-sm font-bold text-gray-900">6.2 hrs</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">↑ 8%</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">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">Top sources</p></div>
|
||||
<span class="text-xs text-blue-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>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">S-001</td><td>Website</td><td class="font-mono text-xs text-green-600">1,847</td><td class="font-mono text-xs">5.2%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-002</td><td>Referral</td><td class="font-mono text-xs text-green-600">982</td><td class="font-mono text-xs">7.8%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-003</td><td>Social Media</td><td class="font-mono text-xs text-green-600">654</td><td class="font-mono text-xs">3.1%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-004</td><td>Email Campaign</td><td class="font-mono text-xs text-green-600">523</td><td class="font-mono text-xs">4.5%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-005</td><td>Events</td><td class="font-mono text-xs text-green-600">342</td><td class="font-mono text-xs">6.2%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-006</td><td>Partner Network</td><td class="font-mono text-xs text-green-600">298</td><td class="font-mono text-xs">8.1%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-007</td><td>Direct Mail</td><td class="font-mono text-xs text-green-600">187</td><td class="font-mono text-xs">2.8%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-008</td><td>Paid Ads</td><td class="font-mono text-xs text-green-600">148</td><td class="font-mono text-xs">4.1%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-009</td><td>Content Marketing</td><td class="font-mono text-xs text-green-600">420</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-010</td><td>Webinar</td><td class="font-mono text-xs text-green-600">950</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-011</td><td>Inbound Call</td><td class="font-mono text-xs text-green-600">780</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-012</td><td>Chatbot</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">450</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-013</td><td>Trade Show</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">320</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-014</td><td>Affiliate</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">275</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-015</td><td>SMS Campaign</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">98</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-016</td><td>Direct Outreach</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">150</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-017</td><td>YouTube/Video</td><td class="font-mono text-xs text-green-600">2,600</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-018</td><td>Podcast</td><td class="font-mono text-xs text-green-600">1,850</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-019</td><td>LinkedIn Ads</td><td class="font-mono text-xs text-green-600">620</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-020</td><td>Twitter/X</td><td class="font-mono text-xs text-green-600">340</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-021</td><td>Facebook Ads</td><td class="font-mono text-xs text-green-600">480</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-022</td><td>Instagram</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">2,400</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-023</td><td>Google Ads</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">1,600</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-024</td><td>Bing Ads</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">850</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-025</td><td>Retargeting</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">420</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-026</td><td>PR/Media</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">500</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-027</td><td>Sponsorship</td><td class="font-mono text-xs text-green-600">200</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-028</td><td>Community Forum</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">5,600</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-029</td><td>Mobile App</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">3,800</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-030</td><td>QR Code</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">2,100</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-031</td><td>Chat/WhatsApp</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">320</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-032</td><td>SEO Organic</td><td class="font-mono text-xs text-green-600">2,800</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-033</td><td>SEM/PPC</td><td class="font-mono text-xs text-green-600">1,900</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-034</td><td>Sales Team</td><td class="font-mono text-xs text-green-600">2,400</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-035</td><td>Partner Referral</td><td class="font-mono text-xs text-green-600">680</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-036</td><td>Customer Referral</td><td class="font-mono text-xs text-green-600">520</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-037</td><td>Case Study</td><td class="font-mono text-xs text-green-600">310</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-038</td><td>Whitepaper</td><td class="font-mono text-xs text-green-600">180</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-039</td><td>Ebook Download</td><td class="font-mono text-xs text-green-600">95</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-040</td><td>Free Trial</td><td class="font-mono text-xs text-green-600">220</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-041</td><td>Demo Request</td><td class="font-mono text-xs text-green-600">340</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-042</td><td>Consultation</td><td class="font-mono text-xs text-green-600">65</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-043</td><td>Product Launch</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">85</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-044</td><td>Holiday Promo</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">42</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-045</td><td>Survey Response</td><td class="font-mono text-xs text-green-600">620</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 Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</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 Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</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>Contract</th><th>Client</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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>
|
||||
<tr><td class="font-mono text-xs">CT-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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">CT-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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">CT-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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">CT-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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">CT-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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">CT-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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">CT-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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">CT-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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">CT-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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">CT-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-pos.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,445 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardPos2";
|
||||
ViewData["SidebarVariant"] = "2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style2.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">POS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Point of Sale System — Period: Q2 2026</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-blue-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: #3b82f6;"><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 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">CRM 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-blue-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">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">↑ 15.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">↑ 22.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-red-500 font-semibold">↑ 9.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">↑ 2.1pp</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>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 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">$2.46M</p><span class="kpi-delta">↑ 15.3%</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">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">↑ 22.1%</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">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">↑ 2.1pp</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">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">↑ 9.3%</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-1 lg:row-start-2 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">Avg Deal Size</p><p class="kpi-value">$14.3K</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" 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">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">↑ 12.4%</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">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">↑ 0.4pp</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">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">↑ 8.7%</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">CRM 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-blue-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 Revenue</p><p class="mm-sub">$2.46M ↑ 15.3%</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">Pipeline Value</p><p class="mm-sub">$4.83M ↑ 22.1%</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">Win Rate</p><p class="mm-sub">34.2 ↓ 2.1pp</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">Customers</p><p class="mm-sub">1 ↑ 9.3%</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">Avg Deal Size</p><p class="mm-sub">$14.3K ↓ 5.8%</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">CLV</p><p class="mm-sub">$48.6K ↓ 12.4%</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">Churn Rate</p><p class="mm-sub">2.1 ↓ 0.4pp</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">MRR</p><p class="mm-sub">$128K ↓ 8.7%</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">Leads</p><p class="mm-sub">2 ↑ 18%</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">Deals</p><p class="mm-sub">640 ↓ 12%</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">Conversion</p><p class="mm-sub">4.7 ↓ 0.8%</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">CSAT</p><p class="mm-sub">4.2 ↓ 0.3</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">Contacts</p><p class="mm-sub">3 ↑ 14%</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">NPS Score</p><p class="mm-sub">72 ↓ 5pts</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 Cycle</p><p class="mm-sub">62 ↓ 3d</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">Response Time</p><p class="mm-sub">2.4 ↓ 0.3</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">SLA</p><p class="mm-sub">94.2 ↓ 2.1%</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">Email Open</p><p class="mm-sub">24.5 ↓ 2.3%</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">Campaigns</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">Enterprise</p><p class="mm-sub">35% rev share</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">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</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> Target</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Lead Sources</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> Website <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> Referral <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> Social <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> Email <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> Others <span class="font-semibold ml-auto">9%</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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</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">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</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">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</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">Avg Deal Size</p><p class="text-sm font-bold text-blue-700">$14.3K</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 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">Deal Stages</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Pipeline by stage</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">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</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">Qualified</p><p class="text-sm font-bold text-amber-600">640</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">Negotiation</p><p class="text-sm font-bold text-red-600">156</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">Closed Won</p><p class="text-sm font-bold text-blue-700">89</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</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">Sales Activity</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">+245</span><p class="text-gray-400">Calls</p></div>
|
||||
<div><span class="font-bold text-green-600">+450</span><p class="text-gray-400">Emails</p></div>
|
||||
<div><span class="font-bold text-green-600">+89</span><p class="text-gray-400">Meetings</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">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</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">CRM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">Conversion Metrics</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">Leads → MQL</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">MQL → SQL</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">SQL → Won</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">Overall CVR</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>Target CVR: <b class="text-green-600">5%</b></span><span class="text-blue-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">Top Performers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K 48%</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">James C.</p><p class="text-sm font-bold text-amber-600">$385K 42%</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">Alex L.</p><p class="text-sm font-bold text-blue-700">$312K 38%</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">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K 35%</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</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">Support Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Customer service KPIs</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">Open Tickets</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">Avg Response</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">CSAT Score</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Resolution Time</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</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">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top sources</p></div>
|
||||
<span class="text-xs text-blue-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>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</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 Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</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 Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</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>Contract</th><th>Client</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-pos.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,449 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardPos3";
|
||||
ViewData["SidebarVariant"] = "3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style3.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">POS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Point of Sale System — Period: Q2 2026</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 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">CRM 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">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">↑ 15.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">↑ 22.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">↑ 9.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">↑ 2.1pp</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>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 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">$2.46M</p><span class="kpi-delta">↑ 15.3%</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">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">↑ 22.1%</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">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">↑ 2.1pp</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">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">↑ 9.3%</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-1 lg:row-start-2 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">Avg Deal Size</p><p class="kpi-value">$14.3K</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" 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">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">↑ 12.4%</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">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">↑ 0.4pp</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">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">↑ 8.7%</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">CRM 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 Revenue</p><p class="mm-sub">$2.46M ↑ 15.3%</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">Pipeline Value</p><p class="mm-sub">$4.83M ↑ 22.1%</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">Win Rate</p><p class="mm-sub">34.2 ↓ 2.1pp</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">Customers</p><p class="mm-sub">1 ↑ 9.3%</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">Avg Deal Size</p><p class="mm-sub">$14.3K ↓ 5.8%</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">CLV</p><p class="mm-sub">$48.6K ↓ 12.4%</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">Churn Rate</p><p class="mm-sub">2.1 ↓ 0.4pp</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">MRR</p><p class="mm-sub">$128K ↓ 8.7%</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">Leads</p><p class="mm-sub">2 ↑ 18%</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">Deals</p><p class="mm-sub">640 ↓ 12%</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">Conversion</p><p class="mm-sub">4.7 ↓ 0.8%</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">CSAT</p><p class="mm-sub">4.2 ↓ 0.3</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">Contacts</p><p class="mm-sub">3 ↑ 14%</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">NPS Score</p><p class="mm-sub">72 ↓ 5pts</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 Cycle</p><p class="mm-sub">62 ↓ 3d</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">Response Time</p><p class="mm-sub">2.4 ↓ 0.3</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">SLA</p><p class="mm-sub">94.2 ↓ 2.1%</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">Email Open</p><p class="mm-sub">24.5 ↓ 2.3%</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">Campaigns</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">Enterprise</p><p class="mm-sub">35% rev share</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">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</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> Target</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Lead Sources</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> Website <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> Referral <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> Social <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> Email <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> Others <span class="font-semibold ml-auto">9%</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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</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">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</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">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</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">Avg Deal Size</p><p class="text-sm font-bold text-indigo-700">$14.3K</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 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">Deal Stages</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Pipeline by stage</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">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</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">Qualified</p><p class="text-sm font-bold text-amber-600">640</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">Negotiation</p><p class="text-sm font-bold text-red-600">156</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">Closed Won</p><p class="text-sm font-bold text-indigo-700">89</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</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">Sales Activity</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">+245</span><p class="text-gray-400">Calls</p></div>
|
||||
<div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
|
||||
<div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</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">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</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">CRM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales 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">Conversion Metrics</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">Leads → MQL</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">2,450 / 1,840</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:75%;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">MQL → SQL</p>
|
||||
<span class="text-[11px] font-semibold">640 / 1,840</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:35%;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">SQL → Won</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">89 / 640</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:14%;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">Overall CVR</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">4.7%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:4.7%;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>Target CVR: <b class="text-green-600">5%</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">Top Performers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">48%</span>
|
||||
</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">James C.</p><p class="text-sm font-bold text-amber-600">$385K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">42%</span>
|
||||
</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">Alex L.</p><p class="text-sm font-bold text-indigo-700">$312K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">38%</span>
|
||||
</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">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">35%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</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">Support Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Customer service KPIs</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">Open Tickets</p><p class="text-[10px] text-gray-400">Total pending</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">Avg Response</p><p class="text-[10px] text-gray-400">First reply time</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">CSAT Score</p><p class="text-[10px] text-gray-400">Customer satisfaction</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Resolution Time</p><p class="text-[10px] text-gray-400">Avg close time</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</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">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top sources</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>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</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 Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</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 Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</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>Contract</th><th>Client</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-pos.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,449 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardPos4";
|
||||
ViewData["SidebarVariant"] = "4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style4.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">POS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Point of Sale System — Period: Q2 2026</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 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">CRM 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">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">↑ 15.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">↑ 22.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">↑ 9.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">↑ 2.1pp</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>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 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">$2.46M</p><span class="kpi-delta">↑ 15.3%</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">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">↑ 22.1%</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">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">↑ 2.1pp</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">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">↑ 9.3%</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-1 lg:row-start-2 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">Avg Deal Size</p><p class="kpi-value">$14.3K</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" 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">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">↑ 12.4%</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">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">↑ 0.4pp</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">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">↑ 8.7%</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">CRM 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 Revenue</p><p class="mm-sub">$2.46M ↑ 15.3%</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">Pipeline Value</p><p class="mm-sub">$4.83M ↑ 22.1%</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">Win Rate</p><p class="mm-sub">34.2 ↓ 2.1pp</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">Customers</p><p class="mm-sub">1 ↑ 9.3%</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">Avg Deal Size</p><p class="mm-sub">$14.3K ↓ 5.8%</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">CLV</p><p class="mm-sub">$48.6K ↓ 12.4%</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">Churn Rate</p><p class="mm-sub">2.1 ↓ 0.4pp</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">MRR</p><p class="mm-sub">$128K ↓ 8.7%</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">Leads</p><p class="mm-sub">2 ↑ 18%</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">Deals</p><p class="mm-sub">640 ↓ 12%</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">Conversion</p><p class="mm-sub">4.7 ↓ 0.8%</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">CSAT</p><p class="mm-sub">4.2 ↓ 0.3</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">Contacts</p><p class="mm-sub">3 ↑ 14%</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">NPS Score</p><p class="mm-sub">72 ↓ 5pts</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 Cycle</p><p class="mm-sub">62 ↓ 3d</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">Response Time</p><p class="mm-sub">2.4 ↓ 0.3</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">SLA</p><p class="mm-sub">94.2 ↓ 2.1%</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">Email Open</p><p class="mm-sub">24.5 ↓ 2.3%</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">Campaigns</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">Enterprise</p><p class="mm-sub">35% rev share</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">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</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> Target</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Lead Sources</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> Website <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> Referral <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> Social <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> Email <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> Others <span class="font-semibold ml-auto">9%</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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</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">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</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">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</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">Avg Deal Size</p><p class="text-sm font-bold text-indigo-700">$14.3K</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 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">Deal Stages</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Pipeline by stage</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">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</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">Qualified</p><p class="text-sm font-bold text-amber-600">640</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">Negotiation</p><p class="text-sm font-bold text-red-600">156</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">Closed Won</p><p class="text-sm font-bold text-indigo-700">89</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</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">Sales Activity</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">+245</span><p class="text-gray-400">Calls</p></div>
|
||||
<div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
|
||||
<div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</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">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</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">CRM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales 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">Conversion Metrics</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">Leads → MQL</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">2,450 / 1,840</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:75%;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">MQL → SQL</p>
|
||||
<span class="text-[11px] font-semibold">640 / 1,840</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:35%;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">SQL → Won</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">89 / 640</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:14%;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">Overall CVR</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">4.7%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:4.7%;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>Target CVR: <b class="text-green-600">5%</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">Top Performers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">48%</span>
|
||||
</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">James C.</p><p class="text-sm font-bold text-amber-600">$385K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">42%</span>
|
||||
</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">Alex L.</p><p class="text-sm font-bold text-indigo-700">$312K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">38%</span>
|
||||
</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">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">35%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</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">Support Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Customer service KPIs</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">Open Tickets</p><p class="text-[10px] text-gray-400">Total pending</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">Avg Response</p><p class="text-[10px] text-gray-400">First reply time</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">CSAT Score</p><p class="text-[10px] text-gray-400">Customer satisfaction</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Resolution Time</p><p class="text-[10px] text-gray-400">Avg close time</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</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">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top sources</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>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</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 Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</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 Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</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>Contract</th><th>Client</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-pos.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,374 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardPos5";
|
||||
ViewData["SidebarVariant"] = "5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style5.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">POS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Point of Sale System — Period: Q2 2026</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-blue-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: #3b82f6;"><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 lg:col-start-8 lg:row-start-1 row-span-2 bg-white border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">CRM 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-blue-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">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">↑ 15.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">↑ 22.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">↑ 9.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">↑ 2.1pp</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>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 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">$2.46M</p><span class="kpi-delta">↑ 15.3%</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">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">↑ 22.1%</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">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">↑ 2.1pp</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">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">↑ 9.3%</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-1 lg:row-start-2 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">Avg Deal Size</p><p class="kpi-value">$14.3K</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" 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">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">↑ 12.4%</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">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">↑ 0.4pp</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">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">↑ 8.7%</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 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">CRM 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-blue-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 Revenue</p><p class="mm-sub">$2.46M ↑ 15.3%</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">Pipeline Value</p><p class="mm-sub">$4.83M ↑ 22.1%</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">Win Rate</p><p class="mm-sub">34.2 ↓ 2.1pp</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">Customers</p><p class="mm-sub">1 ↑ 9.3%</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">Avg Deal Size</p><p class="mm-sub">$14.3K ↓ 5.8%</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">CLV</p><p class="mm-sub">$48.6K ↓ 12.4%</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">Churn Rate</p><p class="mm-sub">2.1 ↓ 0.4pp</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">MRR</p><p class="mm-sub">$128K ↓ 8.7%</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">Leads</p><p class="mm-sub">2 ↑ 18%</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">Deals</p><p class="mm-sub">640 ↓ 12%</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">Conversion</p><p class="mm-sub">4.7 ↓ 0.8%</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">CSAT</p><p class="mm-sub">4.2 ↓ 0.3</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">Contacts</p><p class="mm-sub">3 ↑ 14%</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">NPS Score</p><p class="mm-sub">72 ↓ 5pts</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 Cycle</p><p class="mm-sub">62 ↓ 3d</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">Response Time</p><p class="mm-sub">2.4 ↓ 0.3</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">SLA</p><p class="mm-sub">94.2 ↓ 2.1%</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">Email Open</p><p class="mm-sub">24.5 ↓ 2.3%</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">Campaigns</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">Enterprise</p><p class="mm-sub">35% rev share</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 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">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</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> Target</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Lead Sources</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> Website <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> Referral <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> Social <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> Email <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> Others <span class="font-semibold ml-auto">9%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</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">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</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">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</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">Avg Deal Size</p><p class="text-sm font-bold text-blue-700">$14.3K</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 days</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Deal Stages</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Pipeline by stage</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">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</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">Qualified</p><p class="text-sm font-bold text-amber-600">640</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">Negotiation</p><p class="text-sm font-bold text-red-600">156</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">Closed Won</p><p class="text-sm font-bold text-blue-700">89</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</b></span></div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Sales Activity</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">+245</span><p class="text-gray-400">Calls</p></div>
|
||||
<div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
|
||||
<div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-white 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">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">DL-2026-0421</td><td>Enterprise SaaS deal</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">Negotiation</td><td><span class="chip chip-indigo">Active</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">DL-2026-0420</td><td>Mid-market upgrade</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">Proposal</td><td><span class="chip chip-indigo">Active</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">DL-2026-0419</td><td>Startup onboarding</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">Qualified</td><td><span class="chip chip-indigo">Active</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">DL-2026-0418</td><td>Contract renewal Q3</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">Closing</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</b></span></div>
|
||||
</div>
|
||||
<div class="bg-white 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">CRM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">DL</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Deal Closed</b> — DL-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $24,500 · Customer: TechDistrib · Enterprise</p><p class="text-xs text-gray-400">12 min ago</p></div>
|
||||
<span class="chip chip-green self-start">Won</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">LD</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Lead Assigned</b> — Lead: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">ⓘ $86,200 · Source: Website</p><p class="text-xs text-gray-400">35 min ago</p></div>
|
||||
<span class="chip chip-green self-start">New</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">OP</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Stage Updated</b> — Deal DL-2026-0741</p><p class="text-xs text-gray-400 mt-0.5">ⓘ Moved to Negotiation · $42,800</p><p class="text-xs text-gray-400">1 hour ago</p></div>
|
||||
<span class="chip chip-indigo self-start">Updated</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">EM</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Email Sent</b> — Campaign Q3 Launch</p><p class="text-xs text-gray-400 mt-0.5">ⓘ 2,450 recipients · Open rate: 24.5%</p><p class="text-xs text-gray-400">2 hours ago</p></div>
|
||||
<span class="chip chip-amber self-start">Sent</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Conversion Metrics</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">Leads → MQL</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">2,450 / 1,225</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:50%;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">MQL → SQL</p>
|
||||
<span class="text-[11px] font-semibold">1,225 / 640</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:52%;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">SQL → Won</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">640 / 89</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:14%;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">Overall CVR</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">4.7%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:47%;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>Target CVR: <b class="text-green-600">5%</b></span><span class="text-blue-600">On Track</span></div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Top Performers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K 48%</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">James C.</p><p class="text-sm font-bold text-amber-600">$385K 42%</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">Alex L.</p><p class="text-sm font-bold text-blue-700">$312K 38%</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">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K 35%</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</b></span></div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-6">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Support Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Customer service KPIs</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">Open Tickets</p><p class="text-[10px] text-gray-400">Support backlog</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">142</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">Avg Response</p><p class="text-[10px] text-gray-400">First reply time</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">2.4hrs</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">CSAT Score</p><p class="text-[10px] text-gray-400">Customer satisfaction</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">4.2/5</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">Resolution Time</p><p class="text-[10px] text-gray-400">Avg close time</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">4.2hrs</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-white 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">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">Top sources</p></div>
|
||||
<span class="text-xs text-blue-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>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">WEB-01</td><td>Website Organic</td><td class="font-mono text-xs text-green-600">1,200</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">REF-01</td><td>Referral Program</td><td class="font-mono text-xs text-green-600">860</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">SOC-01</td><td>Social Media</td><td class="font-mono text-xs text-green-600">740</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">EML-01</td><td>Email Campaigns</td><td class="font-mono text-xs text-green-600">490</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">PRT-01</td><td>Partner Network</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">320</td></tr>
|
||||
<tr><td class="font-mono text-xs">EVT-01</td><td>Events & Webinars</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">280</td></tr>
|
||||
<tr><td class="font-mono text-xs">DIR-01</td><td>Direct Outreach</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">195</td></tr>
|
||||
<tr><td class="font-mono text-xs">ADS-01</td><td>Paid Ads</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">180</td></tr>
|
||||
<tr><td class="font-mono text-xs">CON-01</td><td>Content Marketing</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">145</td></tr>
|
||||
<tr><td class="font-mono text-xs">WOM-01</td><td>Word of Mouth</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">120</td></tr>
|
||||
<tr><td class="font-mono text-xs">BLG-01</td><td>Blog & SEO</td><td class="font-mono text-xs text-green-600">320</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">MKT-01</td><td>Marketplace</td><td class="font-mono text-xs text-green-600">280</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">MOB-01</td><td>Mobile App</td><td class="font-mono text-xs text-green-600">210</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">API-01</td><td>API Integration</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">160</td></tr>
|
||||
<tr><td class="font-mono text-xs">RES-01</td><td>Research Portal</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">98</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 Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</span></span></div>
|
||||
</div>
|
||||
<div class="bg-white 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 Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</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>Contract</th><th>Client</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-pos.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,384 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardRms1";
|
||||
ViewData["SidebarVariant"] = "1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style1.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">RMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Rooster Management System — Period: Week 26 2026</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-blue-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: #3b82f6;"><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 md:grid-cols-3 gap-4">
|
||||
<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">Shift Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly spend vs budget</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> Budget</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Shift 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> Direct Raw <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> Indirect <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> Logistics <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> IT <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> Others <span class="font-semibold ml-auto">9%</span></div>
|
||||
</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">Procurement Activity</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">+423</span><p class="text-gray-400">PR Created</p></div>
|
||||
<div><span class="font-bold text-green-600">+186</span><p class="text-gray-400">PO Issued</p></div>
|
||||
<div><span class="font-bold text-green-600">+52</span><p class="text-gray-400">Deliveries</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
|
||||
<div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Schedule 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-blue-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 Spend</p><p class="text-lg font-bold text-gray-900">$8.72M</p><span class="text-[10px] text-green-600 font-semibold">↑ 5.4%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">PO Value</p><p class="text-lg font-bold text-gray-900">$3.15M</p><span class="text-[10px] text-green-600 font-semibold">↑ 12.7%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Suppliers</p><p class="text-lg font-bold text-gray-900">1,246</p><span class="text-[10px] text-green-600 font-semibold">↑ 8.2%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cost Savings</p><p class="text-lg font-bold text-gray-900">$1.24M</p><span class="text-[10px] text-green-600 font-semibold">↑ 18.3%</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>PR Backlog: <b class="text-gray-700">187</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 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 Spend</p><p class="kpi-value">$8.72M</p><span class="kpi-delta">↑ 5.4%</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">PO Value</p><p class="kpi-value">$3.15M</p><span class="kpi-delta">↑ 12.7%</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">Suppliers</p><p class="kpi-value">1,246</p><span class="kpi-delta">↑ 8.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="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">Cost Savings</p><p class="kpi-value">$1.24M</p><span class="kpi-delta">↑ 18.3%</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-1 lg:row-start-2 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">Cycle Time</p><p class="kpi-value">6.2d</p><span class="kpi-delta">↑ 0.8d</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">Contract Cov.</p><p class="kpi-value">78.6%</p><span class="kpi-delta">↑ 4.3%</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">PR Volume</p><p class="kpi-value">2,847</p><span class="kpi-delta">↑ 22.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">On-Time Rate</p><p class="kpi-value">94.2%</p><span class="kpi-delta">↑ 2.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 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">RMS 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-blue-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 Spend</p><p class="mm-sub">$8.72M ↓ 5.4%</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">PO Value</p><p class="mm-sub">$3.15M ↑ 12.7%</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">Suppliers</p><p class="mm-sub">1 ↑ 8.2%</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">Cost Savings</p><p class="mm-sub">$1.24M ↑ 18.3%</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">Cycle Time</p><p class="mm-sub">6.2 ↓ 0.8d</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">Contract Cov.</p><p class="mm-sub">78.6 ↓ 4.3%</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">PR Volume</p><p class="mm-sub">2 ↑ 22.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">On-Time Rate</p><p class="mm-sub">94.2 ↓ 2.3pp</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">Purchase Orders</p><p class="mm-sub">1 ↑ 15.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">Spend per PO</p><p class="mm-sub">$5,635 ↓ $420</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">Supplier Score</p><p class="mm-sub">4.2 ↓ 0.3</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">Contract Value</p><p class="mm-sub">$24.6M ↓ 8.5%</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">Vendors Onboard</p><p class="mm-sub">89 ↓ 14</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">Maverick Spend</p><p class="mm-sub">8.3 ↓ 1.5pp</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 PO Cycle</p><p class="mm-sub">4.2 ↓ 0.6d</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">RFQ Response</p><p class="mm-sub">3.1 ↓ 0.4d</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">Delivery Rate</p><p class="mm-sub">96.8 ↓ 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">Unit Cost</p><p class="mm-sub">$76.50 ↓ $3.20</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">Active RFQ</p><p class="mm-sub">38 ↓ 7</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">Spend Coverage</p><p class="mm-sub">92 ↓ 3%</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Procurement Summary</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">Total Spend YTD</p><p class="text-sm font-bold text-gray-900">$8.72M</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">PO Issued</p><p class="text-sm font-bold text-gray-900">$5.63M</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">Cost Savings</p><p class="text-sm font-bold text-blue-700">$1.24M</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>On-Time Rate</span><span class="font-semibold text-gray-900">94.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">6.2d</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<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">PO Pipeline</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Orders by status</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">Pending Approval</p><p class="text-sm font-bold text-green-700">846</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">In Progress</p><p class="text-sm font-bold text-amber-600">423</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">Delivered</p><p class="text-sm font-bold text-red-600">215</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">Closed</p><p class="text-sm font-bold text-blue-700">76</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>6.2d</b></span><span>Fill Rate: <b>97%</b></span></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">Recent Purchase Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest PR & PO activity</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New PR →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>PO #</th><th>Description</th><th>Qty</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">PO-2026-0421</td><td>Raw material procurement</td><td class="font-mono text-xs">500</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">PO-2026-0420</td><td>Office supplies</td><td class="font-mono text-xs">200</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">PO-2026-0419</td><td>IT equipment order</td><td class="font-mono text-xs">45</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">PO-2026-0418</td><td>Logistics contract</td><td class="font-mono text-xs">1</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Pending: <b class="text-amber-600">4 PRs</b></span><span>Total POs: <b>142</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">Schedule Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time procurement updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">Supplier Performance</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">On-Time</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">94.2%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:94%;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">Delivery</p>
|
||||
<span class="text-[11px] font-semibold">96.8%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:97%;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">Quality</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">98.7%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:99%;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">Compliance</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">92.0%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:92%;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>Overall Score: <b class="text-green-600">92%</b></span><span class="text-blue-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">Top Suppliers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Siemens AG</p><p class="text-sm font-bold text-gray-900">$420K</p><span class="text-[10px] text-green-600">96%</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="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
|
||||
<div class="flex-1"><p class="text-xs text-gray-500">Mitsubishi Corp</p><p class="text-sm font-bold text-amber-600">$385K</p><span class="text-[10px] text-green-600">92%</span></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">DHL Supply Chain</p><p class="text-sm font-bold text-blue-700">$312K</p><span class="text-[10px] text-green-600">88%</span></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">BASF SE</p><p class="text-sm font-bold text-gray-900">$278K</p><span class="text-[10px] text-green-600">85%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Active POs: <b>28</b></span><span>Avg Score: <b>90%</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">Compliance Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Supplier compliance KPIs</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">Audit Pass</p><p class="text-[10px] text-gray-400">Passed latest audit</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">98%</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">ISO Cert</p><p class="text-[10px] text-gray-400">Certified suppliers</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">87%</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">Env Comp</p><p class="text-[10px] text-gray-400">Environmental compliance</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">76%</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">SLA Met</p><p class="text-[10px] text-gray-400">Service level achieved</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">Category Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top categories</p></div>
|
||||
<span class="text-xs text-blue-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>Category Code</th><th>Category Name</th><th>Spend</th><th>%</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">RM-01</td><td>Raw Materials</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">27.5%</td></tr>
|
||||
<tr><td class="font-mono text-xs">PK-01</td><td>Packaging</td><td class="font-mono text-xs text-green-600">$1,800,000</td><td class="font-mono text-xs">20.6%</td></tr>
|
||||
<tr><td class="font-mono text-xs">LG-01</td><td>Logistics</td><td class="font-mono text-xs text-green-600">$1,200,000</td><td class="font-mono text-xs">13.8%</td></tr>
|
||||
<tr><td class="font-mono text-xs">IT-01</td><td>IT Equipment</td><td class="font-mono text-xs text-green-600">$980,000</td><td class="font-mono text-xs">11.2%</td></tr>
|
||||
<tr><td class="font-mono text-xs">OF-01</td><td>Office Supplies</td><td class="font-mono text-xs text-blue-600">$450,000</td><td class="font-mono text-xs">5.2%</td></tr>
|
||||
<tr><td class="font-mono text-xs">MT-01</td><td>Maintenance</td><td class="font-mono text-xs text-blue-600">$380,000</td><td class="font-mono text-xs">4.4%</td></tr>
|
||||
<tr><td class="font-mono text-xs">UT-01</td><td>Utilities</td><td class="font-mono text-xs text-blue-600">$290,000</td><td class="font-mono text-xs">3.3%</td></tr>
|
||||
<tr><td class="font-mono text-xs">TR-01</td><td>Training</td><td class="font-mono text-xs text-blue-600">$210,000</td><td class="font-mono text-xs">2.4%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CN-01</td><td>Consulting</td><td class="font-mono text-xs text-blue-600">$185,000</td><td class="font-mono text-xs">2.1%</td></tr>
|
||||
<tr><td class="font-mono text-xs">MK-01</td><td>Marketing</td><td class="font-mono text-xs text-blue-600">$150,000</td><td class="font-mono text-xs">1.7%</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 Spend: <span class="text-green-600">$8,720,000</span></span><span>Avg per PO: <span class="text-red-600">$5,635</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 Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">PO deliveries due next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Track Deliveries →</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>PO</th><th>Supplier</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">PO-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">PO-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">PO-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">PO-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">PO-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">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-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">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-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">PO-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">PO-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">PO-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>
|
||||
<tr><td class="font-mono text-xs">PO-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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">PO-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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">PO-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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">PO-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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">PO-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Expected: <b class="text-gray-900">$93,500</b></span><span>Delayed: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-rms.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,384 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardRms2";
|
||||
ViewData["SidebarVariant"] = "2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style2.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">RMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Rooster Management System — Period: Week 26 2026</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-blue-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: #3b82f6;"><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 md:grid-cols-3 gap-4">
|
||||
<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">Shift Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly spend vs budget</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> Budget</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Shift 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> Direct Raw <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> Indirect <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> Logistics <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> IT <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> Others <span class="font-semibold ml-auto">9%</span></div>
|
||||
</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">Procurement Activity</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">+423</span><p class="text-gray-400">PR Created</p></div>
|
||||
<div><span class="font-bold text-green-600">+186</span><p class="text-gray-400">PO Issued</p></div>
|
||||
<div><span class="font-bold text-green-600">+52</span><p class="text-gray-400">Deliveries</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
|
||||
<div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Schedule 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-blue-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 Spend</p><p class="text-lg font-bold text-gray-900">$8.72M</p><span class="text-[10px] text-green-600 font-semibold">↑ 5.4%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">PO Value</p><p class="text-lg font-bold text-gray-900">$3.15M</p><span class="text-[10px] text-green-600 font-semibold">↑ 12.7%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Suppliers</p><p class="text-lg font-bold text-gray-900">1,246</p><span class="text-[10px] text-green-600 font-semibold">↑ 8.2%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cost Savings</p><p class="text-lg font-bold text-gray-900">$1.24M</p><span class="text-[10px] text-green-600 font-semibold">↑ 18.3%</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>PR Backlog: <b class="text-gray-700">187</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 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 Spend</p><p class="kpi-value">$8.72M</p><span class="kpi-delta">↑ 5.4%</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">PO Value</p><p class="kpi-value">$3.15M</p><span class="kpi-delta">↑ 12.7%</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">Suppliers</p><p class="kpi-value">1,246</p><span class="kpi-delta">↑ 8.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="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">Cost Savings</p><p class="kpi-value">$1.24M</p><span class="kpi-delta">↑ 18.3%</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-1 lg:row-start-2 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">Cycle Time</p><p class="kpi-value">6.2d</p><span class="kpi-delta">↑ 0.8d</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">Contract Cov.</p><p class="kpi-value">78.6%</p><span class="kpi-delta">↑ 4.3%</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">PR Volume</p><p class="kpi-value">2,847</p><span class="kpi-delta">↑ 22.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">On-Time Rate</p><p class="kpi-value">94.2%</p><span class="kpi-delta">↑ 2.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 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">RMS 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-blue-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 Spend</p><p class="mm-sub">$8.72M ↓ 5.4%</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">PO Value</p><p class="mm-sub">$3.15M ↑ 12.7%</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">Suppliers</p><p class="mm-sub">1 ↑ 8.2%</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">Cost Savings</p><p class="mm-sub">$1.24M ↑ 18.3%</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">Cycle Time</p><p class="mm-sub">6.2 ↓ 0.8d</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">Contract Cov.</p><p class="mm-sub">78.6 ↓ 4.3%</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">PR Volume</p><p class="mm-sub">2 ↑ 22.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">On-Time Rate</p><p class="mm-sub">94.2 ↓ 2.3pp</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">Purchase Orders</p><p class="mm-sub">1 ↑ 15.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">Spend per PO</p><p class="mm-sub">$5,635 ↓ $420</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">Supplier Score</p><p class="mm-sub">4.2 ↓ 0.3</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">Contract Value</p><p class="mm-sub">$24.6M ↓ 8.5%</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">Vendors Onboard</p><p class="mm-sub">89 ↓ 14</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">Maverick Spend</p><p class="mm-sub">8.3 ↓ 1.5pp</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 PO Cycle</p><p class="mm-sub">4.2 ↓ 0.6d</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">RFQ Response</p><p class="mm-sub">3.1 ↓ 0.4d</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">Delivery Rate</p><p class="mm-sub">96.8 ↓ 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">Unit Cost</p><p class="mm-sub">$76.50 ↓ $3.20</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">Active RFQ</p><p class="mm-sub">38 ↓ 7</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">Spend Coverage</p><p class="mm-sub">92 ↓ 3%</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Procurement Summary</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">Total Spend YTD</p><p class="text-sm font-bold text-gray-900">$8.72M</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">PO Issued</p><p class="text-sm font-bold text-gray-900">$5.63M</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">Cost Savings</p><p class="text-sm font-bold text-blue-700">$1.24M</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>On-Time Rate</span><span class="font-semibold text-gray-900">94.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">6.2d</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<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">PO Pipeline</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Orders by status</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">Pending Approval</p><p class="text-sm font-bold text-green-700">846</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">In Progress</p><p class="text-sm font-bold text-amber-600">423</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">Delivered</p><p class="text-sm font-bold text-red-600">215</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">Closed</p><p class="text-sm font-bold text-blue-700">76</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>6.2d</b></span><span>Fill Rate: <b>97%</b></span></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">Recent Purchase Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest PR & PO activity</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New PR →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>PO #</th><th>Description</th><th>Qty</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">PO-2026-0421</td><td>Raw material procurement</td><td class="font-mono text-xs">500</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">PO-2026-0420</td><td>Office supplies</td><td class="font-mono text-xs">200</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">PO-2026-0419</td><td>IT equipment order</td><td class="font-mono text-xs">45</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">PO-2026-0418</td><td>Logistics contract</td><td class="font-mono text-xs">1</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Pending: <b class="text-amber-600">4 PRs</b></span><span>Total POs: <b>142</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">Schedule Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time procurement updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">Supplier Performance</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">On-Time</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">94.2%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:94%;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">Delivery</p>
|
||||
<span class="text-[11px] font-semibold">96.8%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:97%;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">Quality</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">98.7%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:99%;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">Compliance</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">92.0%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:92%;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>Overall Score: <b class="text-green-600">92%</b></span><span class="text-blue-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">Top Suppliers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Siemens AG</p><p class="text-sm font-bold text-gray-900">$420K</p><span class="text-[10px] text-green-600">96%</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="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
|
||||
<div class="flex-1"><p class="text-xs text-gray-500">Mitsubishi Corp</p><p class="text-sm font-bold text-amber-600">$385K</p><span class="text-[10px] text-green-600">92%</span></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">DHL Supply Chain</p><p class="text-sm font-bold text-blue-700">$312K</p><span class="text-[10px] text-green-600">88%</span></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">BASF SE</p><p class="text-sm font-bold text-gray-900">$278K</p><span class="text-[10px] text-green-600">85%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Active POs: <b>28</b></span><span>Avg Score: <b>90%</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">Compliance Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Supplier compliance KPIs</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">Audit Pass</p><p class="text-[10px] text-gray-400">Passed latest audit</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">98%</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">ISO Cert</p><p class="text-[10px] text-gray-400">Certified suppliers</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">87%</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">Env Comp</p><p class="text-[10px] text-gray-400">Environmental compliance</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">76%</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">SLA Met</p><p class="text-[10px] text-gray-400">Service level achieved</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">Category Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top categories</p></div>
|
||||
<span class="text-xs text-blue-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>Category Code</th><th>Category Name</th><th>Spend</th><th>%</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">RM-01</td><td>Raw Materials</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">27.5%</td></tr>
|
||||
<tr><td class="font-mono text-xs">PK-01</td><td>Packaging</td><td class="font-mono text-xs text-green-600">$1,800,000</td><td class="font-mono text-xs">20.6%</td></tr>
|
||||
<tr><td class="font-mono text-xs">LG-01</td><td>Logistics</td><td class="font-mono text-xs text-green-600">$1,200,000</td><td class="font-mono text-xs">13.8%</td></tr>
|
||||
<tr><td class="font-mono text-xs">IT-01</td><td>IT Equipment</td><td class="font-mono text-xs text-green-600">$980,000</td><td class="font-mono text-xs">11.2%</td></tr>
|
||||
<tr><td class="font-mono text-xs">OF-01</td><td>Office Supplies</td><td class="font-mono text-xs text-blue-600">$450,000</td><td class="font-mono text-xs">5.2%</td></tr>
|
||||
<tr><td class="font-mono text-xs">MT-01</td><td>Maintenance</td><td class="font-mono text-xs text-blue-600">$380,000</td><td class="font-mono text-xs">4.4%</td></tr>
|
||||
<tr><td class="font-mono text-xs">UT-01</td><td>Utilities</td><td class="font-mono text-xs text-blue-600">$290,000</td><td class="font-mono text-xs">3.3%</td></tr>
|
||||
<tr><td class="font-mono text-xs">TR-01</td><td>Training</td><td class="font-mono text-xs text-blue-600">$210,000</td><td class="font-mono text-xs">2.4%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CN-01</td><td>Consulting</td><td class="font-mono text-xs text-blue-600">$185,000</td><td class="font-mono text-xs">2.1%</td></tr>
|
||||
<tr><td class="font-mono text-xs">MK-01</td><td>Marketing</td><td class="font-mono text-xs text-blue-600">$150,000</td><td class="font-mono text-xs">1.7%</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 Spend: <span class="text-green-600">$8,720,000</span></span><span>Avg per PO: <span class="text-red-600">$5,635</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 Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">PO deliveries due next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Track Deliveries →</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>PO</th><th>Supplier</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">PO-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">PO-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">PO-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">PO-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">PO-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">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-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">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-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">PO-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">PO-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">PO-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>
|
||||
<tr><td class="font-mono text-xs">PO-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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">PO-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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">PO-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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">PO-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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">PO-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Expected: <b class="text-gray-900">$93,500</b></span><span>Delayed: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-rms.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,384 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardRms3";
|
||||
ViewData["SidebarVariant"] = "3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style3.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">RMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Rooster Management System — Period: Week 26 2026</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-blue-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: #3b82f6;"><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 md:grid-cols-3 gap-4">
|
||||
<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">Shift Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly spend vs budget</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> Budget</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Shift 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> Direct Raw <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> Indirect <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> Logistics <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> IT <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> Others <span class="font-semibold ml-auto">9%</span></div>
|
||||
</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">Procurement Activity</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">+423</span><p class="text-gray-400">PR Created</p></div>
|
||||
<div><span class="font-bold text-green-600">+186</span><p class="text-gray-400">PO Issued</p></div>
|
||||
<div><span class="font-bold text-green-600">+52</span><p class="text-gray-400">Deliveries</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
|
||||
<div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Schedule 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-blue-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 Spend</p><p class="text-lg font-bold text-gray-900">$8.72M</p><span class="text-[10px] text-green-600 font-semibold">↑ 5.4%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">PO Value</p><p class="text-lg font-bold text-gray-900">$3.15M</p><span class="text-[10px] text-green-600 font-semibold">↑ 12.7%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Suppliers</p><p class="text-lg font-bold text-gray-900">1,246</p><span class="text-[10px] text-green-600 font-semibold">↑ 8.2%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cost Savings</p><p class="text-lg font-bold text-gray-900">$1.24M</p><span class="text-[10px] text-green-600 font-semibold">↑ 18.3%</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>PR Backlog: <b class="text-gray-700">187</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 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 Spend</p><p class="kpi-value">$8.72M</p><span class="kpi-delta">↑ 5.4%</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">PO Value</p><p class="kpi-value">$3.15M</p><span class="kpi-delta">↑ 12.7%</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">Suppliers</p><p class="kpi-value">1,246</p><span class="kpi-delta">↑ 8.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="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">Cost Savings</p><p class="kpi-value">$1.24M</p><span class="kpi-delta">↑ 18.3%</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-1 lg:row-start-2 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">Cycle Time</p><p class="kpi-value">6.2d</p><span class="kpi-delta">↑ 0.8d</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">Contract Cov.</p><p class="kpi-value">78.6%</p><span class="kpi-delta">↑ 4.3%</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">PR Volume</p><p class="kpi-value">2,847</p><span class="kpi-delta">↑ 22.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">On-Time Rate</p><p class="kpi-value">94.2%</p><span class="kpi-delta">↑ 2.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 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">RMS 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-blue-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 Spend</p><p class="mm-sub">$8.72M ↓ 5.4%</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">PO Value</p><p class="mm-sub">$3.15M ↑ 12.7%</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">Suppliers</p><p class="mm-sub">1 ↑ 8.2%</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">Cost Savings</p><p class="mm-sub">$1.24M ↑ 18.3%</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">Cycle Time</p><p class="mm-sub">6.2 ↓ 0.8d</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">Contract Cov.</p><p class="mm-sub">78.6 ↓ 4.3%</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">PR Volume</p><p class="mm-sub">2 ↑ 22.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">On-Time Rate</p><p class="mm-sub">94.2 ↓ 2.3pp</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">Purchase Orders</p><p class="mm-sub">1 ↑ 15.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">Spend per PO</p><p class="mm-sub">$5,635 ↓ $420</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">Supplier Score</p><p class="mm-sub">4.2 ↓ 0.3</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">Contract Value</p><p class="mm-sub">$24.6M ↓ 8.5%</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">Vendors Onboard</p><p class="mm-sub">89 ↓ 14</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">Maverick Spend</p><p class="mm-sub">8.3 ↓ 1.5pp</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 PO Cycle</p><p class="mm-sub">4.2 ↓ 0.6d</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">RFQ Response</p><p class="mm-sub">3.1 ↓ 0.4d</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">Delivery Rate</p><p class="mm-sub">96.8 ↓ 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">Unit Cost</p><p class="mm-sub">$76.50 ↓ $3.20</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">Active RFQ</p><p class="mm-sub">38 ↓ 7</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">Spend Coverage</p><p class="mm-sub">92 ↓ 3%</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Procurement Summary</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">Total Spend YTD</p><p class="text-sm font-bold text-gray-900">$8.72M</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">PO Issued</p><p class="text-sm font-bold text-gray-900">$5.63M</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">Cost Savings</p><p class="text-sm font-bold text-blue-700">$1.24M</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>On-Time Rate</span><span class="font-semibold text-gray-900">94.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">6.2d</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<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">PO Pipeline</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Orders by status</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">Pending Approval</p><p class="text-sm font-bold text-green-700">846</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">In Progress</p><p class="text-sm font-bold text-amber-600">423</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">Delivered</p><p class="text-sm font-bold text-red-600">215</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">Closed</p><p class="text-sm font-bold text-blue-700">76</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>6.2d</b></span><span>Fill Rate: <b>97%</b></span></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">Recent Purchase Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest PR & PO activity</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New PR →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>PO #</th><th>Description</th><th>Qty</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">PO-2026-0421</td><td>Raw material procurement</td><td class="font-mono text-xs">500</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">PO-2026-0420</td><td>Office supplies</td><td class="font-mono text-xs">200</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">PO-2026-0419</td><td>IT equipment order</td><td class="font-mono text-xs">45</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">PO-2026-0418</td><td>Logistics contract</td><td class="font-mono text-xs">1</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Pending: <b class="text-amber-600">4 PRs</b></span><span>Total POs: <b>142</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">Schedule Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time procurement updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">Supplier Performance</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">On-Time</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">94.2%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:94%;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">Delivery</p>
|
||||
<span class="text-[11px] font-semibold">96.8%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:97%;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">Quality</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">98.7%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:99%;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">Compliance</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">92.0%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:92%;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>Overall Score: <b class="text-green-600">92%</b></span><span class="text-blue-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">Top Suppliers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Siemens AG</p><p class="text-sm font-bold text-gray-900">$420K</p><span class="text-[10px] text-green-600">96%</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="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
|
||||
<div class="flex-1"><p class="text-xs text-gray-500">Mitsubishi Corp</p><p class="text-sm font-bold text-amber-600">$385K</p><span class="text-[10px] text-green-600">92%</span></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">DHL Supply Chain</p><p class="text-sm font-bold text-blue-700">$312K</p><span class="text-[10px] text-green-600">88%</span></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">BASF SE</p><p class="text-sm font-bold text-gray-900">$278K</p><span class="text-[10px] text-green-600">85%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Active POs: <b>28</b></span><span>Avg Score: <b>90%</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">Compliance Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Supplier compliance KPIs</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">Audit Pass</p><p class="text-[10px] text-gray-400">Passed latest audit</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">98%</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">ISO Cert</p><p class="text-[10px] text-gray-400">Certified suppliers</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">87%</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">Env Comp</p><p class="text-[10px] text-gray-400">Environmental compliance</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">76%</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">SLA Met</p><p class="text-[10px] text-gray-400">Service level achieved</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">Category Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top categories</p></div>
|
||||
<span class="text-xs text-blue-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>Category Code</th><th>Category Name</th><th>Spend</th><th>%</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">RM-01</td><td>Raw Materials</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">27.5%</td></tr>
|
||||
<tr><td class="font-mono text-xs">PK-01</td><td>Packaging</td><td class="font-mono text-xs text-green-600">$1,800,000</td><td class="font-mono text-xs">20.6%</td></tr>
|
||||
<tr><td class="font-mono text-xs">LG-01</td><td>Logistics</td><td class="font-mono text-xs text-green-600">$1,200,000</td><td class="font-mono text-xs">13.8%</td></tr>
|
||||
<tr><td class="font-mono text-xs">IT-01</td><td>IT Equipment</td><td class="font-mono text-xs text-green-600">$980,000</td><td class="font-mono text-xs">11.2%</td></tr>
|
||||
<tr><td class="font-mono text-xs">OF-01</td><td>Office Supplies</td><td class="font-mono text-xs text-blue-600">$450,000</td><td class="font-mono text-xs">5.2%</td></tr>
|
||||
<tr><td class="font-mono text-xs">MT-01</td><td>Maintenance</td><td class="font-mono text-xs text-blue-600">$380,000</td><td class="font-mono text-xs">4.4%</td></tr>
|
||||
<tr><td class="font-mono text-xs">UT-01</td><td>Utilities</td><td class="font-mono text-xs text-blue-600">$290,000</td><td class="font-mono text-xs">3.3%</td></tr>
|
||||
<tr><td class="font-mono text-xs">TR-01</td><td>Training</td><td class="font-mono text-xs text-blue-600">$210,000</td><td class="font-mono text-xs">2.4%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CN-01</td><td>Consulting</td><td class="font-mono text-xs text-blue-600">$185,000</td><td class="font-mono text-xs">2.1%</td></tr>
|
||||
<tr><td class="font-mono text-xs">MK-01</td><td>Marketing</td><td class="font-mono text-xs text-blue-600">$150,000</td><td class="font-mono text-xs">1.7%</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 Spend: <span class="text-green-600">$8,720,000</span></span><span>Avg per PO: <span class="text-red-600">$5,635</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 Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">PO deliveries due next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Track Deliveries →</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>PO</th><th>Supplier</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">PO-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">PO-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">PO-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">PO-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">PO-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">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-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">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-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">PO-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">PO-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">PO-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>
|
||||
<tr><td class="font-mono text-xs">PO-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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">PO-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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">PO-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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">PO-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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">PO-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Expected: <b class="text-gray-900">$93,500</b></span><span>Delayed: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-rms.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,384 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardRms4";
|
||||
ViewData["SidebarVariant"] = "4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style4.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">RMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Rooster Management System — Period: Week 26 2026</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-blue-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: #3b82f6;"><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 md:grid-cols-3 gap-4">
|
||||
<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">Shift Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly spend vs budget</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> Budget</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Shift 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> Direct Raw <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> Indirect <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> Logistics <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> IT <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> Others <span class="font-semibold ml-auto">9%</span></div>
|
||||
</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">Procurement Activity</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">+423</span><p class="text-gray-400">PR Created</p></div>
|
||||
<div><span class="font-bold text-green-600">+186</span><p class="text-gray-400">PO Issued</p></div>
|
||||
<div><span class="font-bold text-green-600">+52</span><p class="text-gray-400">Deliveries</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
|
||||
<div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Schedule 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-blue-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 Spend</p><p class="text-lg font-bold text-gray-900">$8.72M</p><span class="text-[10px] text-green-600 font-semibold">↑ 5.4%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">PO Value</p><p class="text-lg font-bold text-gray-900">$3.15M</p><span class="text-[10px] text-green-600 font-semibold">↑ 12.7%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Suppliers</p><p class="text-lg font-bold text-gray-900">1,246</p><span class="text-[10px] text-green-600 font-semibold">↑ 8.2%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cost Savings</p><p class="text-lg font-bold text-gray-900">$1.24M</p><span class="text-[10px] text-green-600 font-semibold">↑ 18.3%</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>PR Backlog: <b class="text-gray-700">187</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 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 Spend</p><p class="kpi-value">$8.72M</p><span class="kpi-delta">↑ 5.4%</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">PO Value</p><p class="kpi-value">$3.15M</p><span class="kpi-delta">↑ 12.7%</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">Suppliers</p><p class="kpi-value">1,246</p><span class="kpi-delta">↑ 8.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="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">Cost Savings</p><p class="kpi-value">$1.24M</p><span class="kpi-delta">↑ 18.3%</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-1 lg:row-start-2 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">Cycle Time</p><p class="kpi-value">6.2d</p><span class="kpi-delta">↑ 0.8d</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">Contract Cov.</p><p class="kpi-value">78.6%</p><span class="kpi-delta">↑ 4.3%</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">PR Volume</p><p class="kpi-value">2,847</p><span class="kpi-delta">↑ 22.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">On-Time Rate</p><p class="kpi-value">94.2%</p><span class="kpi-delta">↑ 2.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 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">RMS 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-blue-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 Spend</p><p class="mm-sub">$8.72M ↓ 5.4%</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">PO Value</p><p class="mm-sub">$3.15M ↑ 12.7%</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">Suppliers</p><p class="mm-sub">1 ↑ 8.2%</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">Cost Savings</p><p class="mm-sub">$1.24M ↑ 18.3%</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">Cycle Time</p><p class="mm-sub">6.2 ↓ 0.8d</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">Contract Cov.</p><p class="mm-sub">78.6 ↓ 4.3%</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">PR Volume</p><p class="mm-sub">2 ↑ 22.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">On-Time Rate</p><p class="mm-sub">94.2 ↓ 2.3pp</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">Purchase Orders</p><p class="mm-sub">1 ↑ 15.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">Spend per PO</p><p class="mm-sub">$5,635 ↓ $420</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">Supplier Score</p><p class="mm-sub">4.2 ↓ 0.3</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">Contract Value</p><p class="mm-sub">$24.6M ↓ 8.5%</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">Vendors Onboard</p><p class="mm-sub">89 ↓ 14</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">Maverick Spend</p><p class="mm-sub">8.3 ↓ 1.5pp</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 PO Cycle</p><p class="mm-sub">4.2 ↓ 0.6d</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">RFQ Response</p><p class="mm-sub">3.1 ↓ 0.4d</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">Delivery Rate</p><p class="mm-sub">96.8 ↓ 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">Unit Cost</p><p class="mm-sub">$76.50 ↓ $3.20</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">Active RFQ</p><p class="mm-sub">38 ↓ 7</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">Spend Coverage</p><p class="mm-sub">92 ↓ 3%</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Procurement Summary</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">Total Spend YTD</p><p class="text-sm font-bold text-gray-900">$8.72M</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">PO Issued</p><p class="text-sm font-bold text-gray-900">$5.63M</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">Cost Savings</p><p class="text-sm font-bold text-blue-700">$1.24M</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>On-Time Rate</span><span class="font-semibold text-gray-900">94.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">6.2d</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<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">PO Pipeline</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Orders by status</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">Pending Approval</p><p class="text-sm font-bold text-green-700">846</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">In Progress</p><p class="text-sm font-bold text-amber-600">423</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">Delivered</p><p class="text-sm font-bold text-red-600">215</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">Closed</p><p class="text-sm font-bold text-blue-700">76</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>6.2d</b></span><span>Fill Rate: <b>97%</b></span></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">Recent Purchase Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest PR & PO activity</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New PR →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>PO #</th><th>Description</th><th>Qty</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">PO-2026-0421</td><td>Raw material procurement</td><td class="font-mono text-xs">500</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">PO-2026-0420</td><td>Office supplies</td><td class="font-mono text-xs">200</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">PO-2026-0419</td><td>IT equipment order</td><td class="font-mono text-xs">45</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">PO-2026-0418</td><td>Logistics contract</td><td class="font-mono text-xs">1</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Pending: <b class="text-amber-600">4 PRs</b></span><span>Total POs: <b>142</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">Schedule Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time procurement updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">Supplier Performance</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">On-Time</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">94.2%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:94%;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">Delivery</p>
|
||||
<span class="text-[11px] font-semibold">96.8%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:97%;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">Quality</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">98.7%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:99%;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">Compliance</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">92.0%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:92%;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>Overall Score: <b class="text-green-600">92%</b></span><span class="text-blue-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">Top Suppliers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Siemens AG</p><p class="text-sm font-bold text-gray-900">$420K</p><span class="text-[10px] text-green-600">96%</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="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
|
||||
<div class="flex-1"><p class="text-xs text-gray-500">Mitsubishi Corp</p><p class="text-sm font-bold text-amber-600">$385K</p><span class="text-[10px] text-green-600">92%</span></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">DHL Supply Chain</p><p class="text-sm font-bold text-blue-700">$312K</p><span class="text-[10px] text-green-600">88%</span></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">BASF SE</p><p class="text-sm font-bold text-gray-900">$278K</p><span class="text-[10px] text-green-600">85%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Active POs: <b>28</b></span><span>Avg Score: <b>90%</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">Compliance Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Supplier compliance KPIs</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">Audit Pass</p><p class="text-[10px] text-gray-400">Passed latest audit</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">98%</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">ISO Cert</p><p class="text-[10px] text-gray-400">Certified suppliers</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">87%</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">Env Comp</p><p class="text-[10px] text-gray-400">Environmental compliance</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">76%</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">SLA Met</p><p class="text-[10px] text-gray-400">Service level achieved</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">Category Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top categories</p></div>
|
||||
<span class="text-xs text-blue-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>Category Code</th><th>Category Name</th><th>Spend</th><th>%</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">RM-01</td><td>Raw Materials</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">27.5%</td></tr>
|
||||
<tr><td class="font-mono text-xs">PK-01</td><td>Packaging</td><td class="font-mono text-xs text-green-600">$1,800,000</td><td class="font-mono text-xs">20.6%</td></tr>
|
||||
<tr><td class="font-mono text-xs">LG-01</td><td>Logistics</td><td class="font-mono text-xs text-green-600">$1,200,000</td><td class="font-mono text-xs">13.8%</td></tr>
|
||||
<tr><td class="font-mono text-xs">IT-01</td><td>IT Equipment</td><td class="font-mono text-xs text-green-600">$980,000</td><td class="font-mono text-xs">11.2%</td></tr>
|
||||
<tr><td class="font-mono text-xs">OF-01</td><td>Office Supplies</td><td class="font-mono text-xs text-blue-600">$450,000</td><td class="font-mono text-xs">5.2%</td></tr>
|
||||
<tr><td class="font-mono text-xs">MT-01</td><td>Maintenance</td><td class="font-mono text-xs text-blue-600">$380,000</td><td class="font-mono text-xs">4.4%</td></tr>
|
||||
<tr><td class="font-mono text-xs">UT-01</td><td>Utilities</td><td class="font-mono text-xs text-blue-600">$290,000</td><td class="font-mono text-xs">3.3%</td></tr>
|
||||
<tr><td class="font-mono text-xs">TR-01</td><td>Training</td><td class="font-mono text-xs text-blue-600">$210,000</td><td class="font-mono text-xs">2.4%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CN-01</td><td>Consulting</td><td class="font-mono text-xs text-blue-600">$185,000</td><td class="font-mono text-xs">2.1%</td></tr>
|
||||
<tr><td class="font-mono text-xs">MK-01</td><td>Marketing</td><td class="font-mono text-xs text-blue-600">$150,000</td><td class="font-mono text-xs">1.7%</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 Spend: <span class="text-green-600">$8,720,000</span></span><span>Avg per PO: <span class="text-red-600">$5,635</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 Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">PO deliveries due next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Track Deliveries →</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>PO</th><th>Supplier</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">PO-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">PO-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">PO-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">PO-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">PO-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">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-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">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-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">PO-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">PO-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">PO-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>
|
||||
<tr><td class="font-mono text-xs">PO-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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">PO-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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">PO-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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">PO-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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">PO-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Expected: <b class="text-gray-900">$93,500</b></span><span>Delayed: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-rms.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,384 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardRms5";
|
||||
ViewData["SidebarVariant"] = "5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style5.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">RMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Rooster Management System — Period: Week 26 2026</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-blue-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: #3b82f6;"><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 md:grid-cols-3 gap-4">
|
||||
<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">Shift Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly spend vs budget</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> Budget</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Shift 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> Direct Raw <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> Indirect <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> Logistics <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> IT <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> Others <span class="font-semibold ml-auto">9%</span></div>
|
||||
</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">Procurement Activity</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">+423</span><p class="text-gray-400">PR Created</p></div>
|
||||
<div><span class="font-bold text-green-600">+186</span><p class="text-gray-400">PO Issued</p></div>
|
||||
<div><span class="font-bold text-green-600">+52</span><p class="text-gray-400">Deliveries</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
|
||||
<div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Schedule 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-blue-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 Spend</p><p class="text-lg font-bold text-gray-900">$8.72M</p><span class="text-[10px] text-green-600 font-semibold">↑ 5.4%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">PO Value</p><p class="text-lg font-bold text-gray-900">$3.15M</p><span class="text-[10px] text-green-600 font-semibold">↑ 12.7%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Suppliers</p><p class="text-lg font-bold text-gray-900">1,246</p><span class="text-[10px] text-green-600 font-semibold">↑ 8.2%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cost Savings</p><p class="text-lg font-bold text-gray-900">$1.24M</p><span class="text-[10px] text-green-600 font-semibold">↑ 18.3%</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>PR Backlog: <b class="text-gray-700">187</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 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 Spend</p><p class="kpi-value">$8.72M</p><span class="kpi-delta">↑ 5.4%</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">PO Value</p><p class="kpi-value">$3.15M</p><span class="kpi-delta">↑ 12.7%</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">Suppliers</p><p class="kpi-value">1,246</p><span class="kpi-delta">↑ 8.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="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">Cost Savings</p><p class="kpi-value">$1.24M</p><span class="kpi-delta">↑ 18.3%</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-1 lg:row-start-2 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">Cycle Time</p><p class="kpi-value">6.2d</p><span class="kpi-delta">↑ 0.8d</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">Contract Cov.</p><p class="kpi-value">78.6%</p><span class="kpi-delta">↑ 4.3%</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">PR Volume</p><p class="kpi-value">2,847</p><span class="kpi-delta">↑ 22.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">On-Time Rate</p><p class="kpi-value">94.2%</p><span class="kpi-delta">↑ 2.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 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">RMS 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-blue-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 Spend</p><p class="mm-sub">$8.72M ↓ 5.4%</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">PO Value</p><p class="mm-sub">$3.15M ↑ 12.7%</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">Suppliers</p><p class="mm-sub">1 ↑ 8.2%</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">Cost Savings</p><p class="mm-sub">$1.24M ↑ 18.3%</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">Cycle Time</p><p class="mm-sub">6.2 ↓ 0.8d</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">Contract Cov.</p><p class="mm-sub">78.6 ↓ 4.3%</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">PR Volume</p><p class="mm-sub">2 ↑ 22.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">On-Time Rate</p><p class="mm-sub">94.2 ↓ 2.3pp</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">Purchase Orders</p><p class="mm-sub">1 ↑ 15.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">Spend per PO</p><p class="mm-sub">$5,635 ↓ $420</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">Supplier Score</p><p class="mm-sub">4.2 ↓ 0.3</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">Contract Value</p><p class="mm-sub">$24.6M ↓ 8.5%</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">Vendors Onboard</p><p class="mm-sub">89 ↓ 14</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">Maverick Spend</p><p class="mm-sub">8.3 ↓ 1.5pp</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 PO Cycle</p><p class="mm-sub">4.2 ↓ 0.6d</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">RFQ Response</p><p class="mm-sub">3.1 ↓ 0.4d</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">Delivery Rate</p><p class="mm-sub">96.8 ↓ 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">Unit Cost</p><p class="mm-sub">$76.50 ↓ $3.20</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">Active RFQ</p><p class="mm-sub">38 ↓ 7</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">Spend Coverage</p><p class="mm-sub">92 ↓ 3%</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Procurement Summary</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">Total Spend YTD</p><p class="text-sm font-bold text-gray-900">$8.72M</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">PO Issued</p><p class="text-sm font-bold text-gray-900">$5.63M</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">Cost Savings</p><p class="text-sm font-bold text-blue-700">$1.24M</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>On-Time Rate</span><span class="font-semibold text-gray-900">94.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">6.2d</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<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">PO Pipeline</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Orders by status</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">Pending Approval</p><p class="text-sm font-bold text-green-700">846</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">In Progress</p><p class="text-sm font-bold text-amber-600">423</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">Delivered</p><p class="text-sm font-bold text-red-600">215</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">Closed</p><p class="text-sm font-bold text-blue-700">76</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>6.2d</b></span><span>Fill Rate: <b>97%</b></span></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">Recent Purchase Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest PR & PO activity</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New PR →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>PO #</th><th>Description</th><th>Qty</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">PO-2026-0421</td><td>Raw material procurement</td><td class="font-mono text-xs">500</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">PO-2026-0420</td><td>Office supplies</td><td class="font-mono text-xs">200</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">PO-2026-0419</td><td>IT equipment order</td><td class="font-mono text-xs">45</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">PO-2026-0418</td><td>Logistics contract</td><td class="font-mono text-xs">1</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Pending: <b class="text-amber-600">4 PRs</b></span><span>Total POs: <b>142</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">Schedule Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time procurement updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">Supplier Performance</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">On-Time</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">94.2%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:94%;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">Delivery</p>
|
||||
<span class="text-[11px] font-semibold">96.8%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:97%;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">Quality</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">98.7%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:99%;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">Compliance</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">92.0%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:92%;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>Overall Score: <b class="text-green-600">92%</b></span><span class="text-blue-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">Top Suppliers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Siemens AG</p><p class="text-sm font-bold text-gray-900">$420K</p><span class="text-[10px] text-green-600">96%</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="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
|
||||
<div class="flex-1"><p class="text-xs text-gray-500">Mitsubishi Corp</p><p class="text-sm font-bold text-amber-600">$385K</p><span class="text-[10px] text-green-600">92%</span></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">DHL Supply Chain</p><p class="text-sm font-bold text-blue-700">$312K</p><span class="text-[10px] text-green-600">88%</span></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">BASF SE</p><p class="text-sm font-bold text-gray-900">$278K</p><span class="text-[10px] text-green-600">85%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Active POs: <b>28</b></span><span>Avg Score: <b>90%</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">Compliance Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Supplier compliance KPIs</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">Audit Pass</p><p class="text-[10px] text-gray-400">Passed latest audit</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">98%</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">ISO Cert</p><p class="text-[10px] text-gray-400">Certified suppliers</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">87%</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">Env Comp</p><p class="text-[10px] text-gray-400">Environmental compliance</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">76%</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">SLA Met</p><p class="text-[10px] text-gray-400">Service level achieved</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">Category Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top categories</p></div>
|
||||
<span class="text-xs text-blue-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>Category Code</th><th>Category Name</th><th>Spend</th><th>%</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">RM-01</td><td>Raw Materials</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">27.5%</td></tr>
|
||||
<tr><td class="font-mono text-xs">PK-01</td><td>Packaging</td><td class="font-mono text-xs text-green-600">$1,800,000</td><td class="font-mono text-xs">20.6%</td></tr>
|
||||
<tr><td class="font-mono text-xs">LG-01</td><td>Logistics</td><td class="font-mono text-xs text-green-600">$1,200,000</td><td class="font-mono text-xs">13.8%</td></tr>
|
||||
<tr><td class="font-mono text-xs">IT-01</td><td>IT Equipment</td><td class="font-mono text-xs text-green-600">$980,000</td><td class="font-mono text-xs">11.2%</td></tr>
|
||||
<tr><td class="font-mono text-xs">OF-01</td><td>Office Supplies</td><td class="font-mono text-xs text-blue-600">$450,000</td><td class="font-mono text-xs">5.2%</td></tr>
|
||||
<tr><td class="font-mono text-xs">MT-01</td><td>Maintenance</td><td class="font-mono text-xs text-blue-600">$380,000</td><td class="font-mono text-xs">4.4%</td></tr>
|
||||
<tr><td class="font-mono text-xs">UT-01</td><td>Utilities</td><td class="font-mono text-xs text-blue-600">$290,000</td><td class="font-mono text-xs">3.3%</td></tr>
|
||||
<tr><td class="font-mono text-xs">TR-01</td><td>Training</td><td class="font-mono text-xs text-blue-600">$210,000</td><td class="font-mono text-xs">2.4%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CN-01</td><td>Consulting</td><td class="font-mono text-xs text-blue-600">$185,000</td><td class="font-mono text-xs">2.1%</td></tr>
|
||||
<tr><td class="font-mono text-xs">MK-01</td><td>Marketing</td><td class="font-mono text-xs text-blue-600">$150,000</td><td class="font-mono text-xs">1.7%</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 Spend: <span class="text-green-600">$8,720,000</span></span><span>Avg per PO: <span class="text-red-600">$5,635</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 Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">PO deliveries due next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Track Deliveries →</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>PO</th><th>Supplier</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">PO-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">PO-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">PO-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">PO-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">PO-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">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-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">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-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">PO-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">PO-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">PO-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>
|
||||
<tr><td class="font-mono text-xs">PO-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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">PO-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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">PO-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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">PO-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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">PO-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Expected: <b class="text-gray-900">$93,500</b></span><span>Delayed: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-rms.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,384 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardScm1";
|
||||
ViewData["SidebarVariant"] = "1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style1.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">SCM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Supply Chain Management — Period: Q2 2026</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-blue-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: #3b82f6;"><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-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">Supplier Breakdown</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> Direct Raw <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> Indirect <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> Logistics <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> IT <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> Others <span class="font-semibold ml-auto">9%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<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">Spend Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly spend vs budget</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> Budget</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
|
||||
<div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">SCM 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-blue-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 Spend</p><p class="text-lg font-bold text-gray-900">$8.72M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.4%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">PO Value</p><p class="text-lg font-bold text-gray-900">$3.15M</p><span class="text-[10px] text-green-600 font-semibold">▲ +12.7%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Suppliers</p><p class="text-lg font-bold text-gray-900">1,246</p><span class="text-[10px] text-green-600 font-semibold">▲ +8.2%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cost Savings</p><p class="text-lg font-bold text-gray-900">$1.24M</p><span class="text-[10px] text-green-600 font-semibold">▲ +18.3%</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>PR Backlog: <b class="text-gray-700">187</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 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 Spend</p><p class="kpi-value">$8.72M</p><span class="kpi-delta">▲ +5.4%</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">PO Value</p><p class="kpi-value">$3.15M</p><span class="kpi-delta">▲ +12.7%</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">Suppliers</p><p class="kpi-value">1,246</p><span class="kpi-delta">▲ +8.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="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">Cost Savings</p><p class="kpi-value">$1.24M</p><span class="kpi-delta">▲ +18.3%</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-1 lg:row-start-2 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">Cycle Time</p><p class="kpi-value">6.2d</p><span class="kpi-delta">▼ -0.8d</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">Contract Cov.</p><p class="kpi-value">78.6%</p><span class="kpi-delta">▲ +4.3%</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">PR Volume</p><p class="kpi-value">2,847</p><span class="kpi-delta">▲ +22.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">On-Time Rate</p><p class="kpi-value">94.2%</p><span class="kpi-delta">▲ +2.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 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">SCM 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-blue-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 Spend</p><p class="mm-sub">$8.72M ▲ 5.4%</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">PO Value</p><p class="mm-sub">$3.15M ▲ 12.7%</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">Suppliers</p><p class="mm-sub">1,246 ▲ 8.2%</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">Cost Savings</p><p class="mm-sub">$1.24M ▲ 18.3%</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">Cycle Time</p><p class="mm-sub">6.2d ▼ 0.8d</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">Contract Cov.</p><p class="mm-sub">78.6% ▲ 4.3%</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">PR Volume</p><p class="mm-sub">2,847 ▲ 22.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">On-Time Rate</p><p class="mm-sub">94.2% ▲ 2.3pp</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">Purchase Orders</p><p class="mm-sub">1,560 ▲ 15.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">Spend per PO</p><p class="mm-sub">$5,635 ▼ $420</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">Supplier Score</p><p class="mm-sub">4.2 ▲ 0.3</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">Contract Value</p><p class="mm-sub">$24.6M ▲ 8.5%</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">Vendors Onboard</p><p class="mm-sub">89 ▲ 14</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">Maverick Spend</p><p class="mm-sub">8.3% ▼ 1.5pp</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 PO Cycle</p><p class="mm-sub">4.2d ▼ 0.6d</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">RFQ Response</p><p class="mm-sub">3.1d ▼ 0.4d</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">Delivery Rate</p><p class="mm-sub">96.8% ▲ 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">Unit Cost</p><p class="mm-sub">$76.50 ▼ $3.20</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">Active RFQ</p><p class="mm-sub">38 ▲ 7</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">Spend Coverage</p><p class="mm-sub">92% ▲ 3%</p></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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Procurement Summary</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">Total Spend YTD</p><p class="text-sm font-bold text-gray-900">$8.72M</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">PO Issued</p><p class="text-sm font-bold text-gray-900">$5.63M</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">Cost Savings</p><p class="text-sm font-bold text-blue-700">$1.24M</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>On-Time Rate</span><span class="font-semibold text-gray-900">94.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">6.2d</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">PO Pipeline</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Orders by status</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">Pending Approval</p><p class="text-sm font-bold text-green-700">846</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">In Progress</p><p class="text-sm font-bold text-amber-600">423</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">Delivered</p><p class="text-sm font-bold text-red-600">215</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">Closed</p><p class="text-sm font-bold text-blue-700">76</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>6.2d</b></span><span>Fill Rate: <b>97%</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">Procurement Activity</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">+423</span><p class="text-gray-400">PR Created</p></div>
|
||||
<div><span class="font-bold text-green-600">+186</span><p class="text-gray-400">PO Issued</p></div>
|
||||
<div><span class="font-bold text-green-600">+52</span><p class="text-gray-400">Deliveries</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">Recent Purchase Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest PR & PO activity</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New PR →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>PO #</th><th>Description</th><th>Qty</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">PO-2026-0421</td><td>Raw material procurement</td><td class="font-mono text-xs">500</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">PO-2026-0420</td><td>Office supplies</td><td class="font-mono text-xs">200</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">PO-2026-0419</td><td>IT equipment order</td><td class="font-mono text-xs">45</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">PO-2026-0418</td><td>Logistics contract</td><td class="font-mono text-xs">1</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Pending: <b class="text-amber-600">4 PRs</b></span><span>Total POs: <b>142</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">SCM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time procurement updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">Supplier Performance</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">On-Time</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">94.2%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:94%;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">Delivery</p>
|
||||
<span class="text-[11px] font-semibold">96.8%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:97%;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">Quality</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">98.7%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:99%;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">Compliance</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">92.0%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:92%;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>Overall Score: <b class="text-green-600">92%</b></span><span class="text-blue-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">Top Suppliers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Siemens AG</p><p class="text-sm font-bold text-gray-900">$420K</p><span class="text-[10px] text-green-600">96%</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="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
|
||||
<div class="flex-1"><p class="text-xs text-gray-500">Mitsubishi Corp</p><p class="text-sm font-bold text-amber-600">$385K</p><span class="text-[10px] text-green-600">92%</span></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">DHL Supply Chain</p><p class="text-sm font-bold text-blue-700">$312K</p><span class="text-[10px] text-green-600">88%</span></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">BASF SE</p><p class="text-sm font-bold text-gray-900">$278K</p><span class="text-[10px] text-green-600">85%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Active POs: <b>28</b></span><span>Avg Score: <b>90%</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">Compliance Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Supplier compliance KPIs</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">Audit Pass</p><p class="text-[10px] text-gray-400">Passed latest audit</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">98%</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">ISO Cert</p><p class="text-[10px] text-gray-400">Certified suppliers</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">87%</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">Env Comp</p><p class="text-[10px] text-gray-400">Environmental compliance</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">76%</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">SLA Met</p><p class="text-[10px] text-gray-400">Service level achieved</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">Category Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top categories</p></div>
|
||||
<span class="text-xs text-blue-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>Category Code</th><th>Category Name</th><th>Spend</th><th>%</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">RM-01</td><td>Raw Materials</td><td class="font-mono text-xs text-green-600">$2,400,000</td><td class="font-mono text-xs">27.5%</td></tr>
|
||||
<tr><td class="font-mono text-xs">PK-01</td><td>Packaging</td><td class="font-mono text-xs text-green-600">$1,800,000</td><td class="font-mono text-xs">20.6%</td></tr>
|
||||
<tr><td class="font-mono text-xs">LG-01</td><td>Logistics</td><td class="font-mono text-xs text-green-600">$1,200,000</td><td class="font-mono text-xs">13.8%</td></tr>
|
||||
<tr><td class="font-mono text-xs">IT-01</td><td>IT Equipment</td><td class="font-mono text-xs text-green-600">$980,000</td><td class="font-mono text-xs">11.2%</td></tr>
|
||||
<tr><td class="font-mono text-xs">OF-01</td><td>Office Supplies</td><td class="font-mono text-xs text-blue-600">$450,000</td><td class="font-mono text-xs">5.2%</td></tr>
|
||||
<tr><td class="font-mono text-xs">MT-01</td><td>Maintenance</td><td class="font-mono text-xs text-blue-600">$380,000</td><td class="font-mono text-xs">4.4%</td></tr>
|
||||
<tr><td class="font-mono text-xs">UT-01</td><td>Utilities</td><td class="font-mono text-xs text-blue-600">$290,000</td><td class="font-mono text-xs">3.3%</td></tr>
|
||||
<tr><td class="font-mono text-xs">TR-01</td><td>Training</td><td class="font-mono text-xs text-blue-600">$210,000</td><td class="font-mono text-xs">2.4%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CN-01</td><td>Consulting</td><td class="font-mono text-xs text-blue-600">$185,000</td><td class="font-mono text-xs">2.1%</td></tr>
|
||||
<tr><td class="font-mono text-xs">MK-01</td><td>Marketing</td><td class="font-mono text-xs text-blue-600">$150,000</td><td class="font-mono text-xs">1.7%</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 Spend: <span class="text-green-600">$8,720,000</span></span><span>Avg per PO: <span class="text-red-600">$5,635</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 Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">PO deliveries due next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Track Deliveries →</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>PO</th><th>Supplier</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">PO-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">PO-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">PO-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">PO-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">PO-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">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-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">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-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">PO-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">PO-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">PO-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>
|
||||
<tr><td class="font-mono text-xs">PO-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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">PO-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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">PO-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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">PO-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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">PO-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Expected: <b class="text-gray-900">$93,500</b></span><span>Delayed: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-scm.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,371 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardScm2";
|
||||
ViewData["SidebarVariant"] = "2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style2.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">SCM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Supply Chain Management — Period: Q2 2026</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-blue-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: #3b82f6;"><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-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">Supplier Breakdown</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> Direct Raw <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> Indirect <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> Logistics <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> IT <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> Others <span class="font-semibold ml-auto">9%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<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">Spend Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly spend vs budget</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> Spend</span>
|
||||
<span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Budget</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
|
||||
<div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">SCM 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-blue-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 Spend</p><p class="text-lg font-bold text-gray-900">$8.72M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.4%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">PO Value</p><p class="text-lg font-bold text-gray-900">$3.15M</p><span class="text-[10px] text-green-600 font-semibold">▲ +12.7%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Suppliers</p><p class="text-lg font-bold text-gray-900">1,246</p><span class="text-[10px] text-red-500 font-semibold">▲ +8.2%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cost Savings</p><p class="text-lg font-bold text-gray-900">$1.24M</p><span class="text-[10px] text-green-600 font-semibold">▲ +18.3%</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>PR Backlog: <b class="text-gray-700">187</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 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 Spend</p><p class="kpi-value">$8.72M</p><span class="kpi-delta">▲ +5.4%</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">PO Value</p><p class="kpi-value">$3.15M</p><span class="kpi-delta">▲ +12.7%</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">Suppliers</p><p class="kpi-value">1,246</p><span class="kpi-delta">▲ +8.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="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">Cost Savings</p><p class="kpi-value">$1.24M</p><span class="kpi-delta">▲ +18.3%</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-1 lg:row-start-2 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">Cycle Time</p><p class="kpi-value">6.2d</p><span class="kpi-delta">▼ -0.8d</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">Contract Cov.</p><p class="kpi-value">78.6%</p><span class="kpi-delta">▲ +4.3%</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">PR Volume</p><p class="kpi-value">2,847</p><span class="kpi-delta">▲ +22.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">On-Time Rate</p><p class="kpi-value">94.2%</p><span class="kpi-delta">▲ +2.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 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">SCM 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-blue-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 Spend</p><p class="mm-sub">$8.72M ▲ 5.4%</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">PO Value</p><p class="mm-sub">$3.15M ▲ 12.7%</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">Suppliers</p><p class="mm-sub">1,246 ▲ 8.2%</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">Cost Savings</p><p class="mm-sub">$1.24M ▲ 18.3%</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">Cycle Time</p><p class="mm-sub">6.2d ▼ 0.8d</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">Contract Cov.</p><p class="mm-sub">78.6% ▲ 4.3%</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">PR Volume</p><p class="mm-sub">2,847 ▲ 22.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">On-Time Rate</p><p class="mm-sub">94.2% ▲ 2.3pp</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">Purchase Orders</p><p class="mm-sub">1,560 ▲ 15.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">Spend per PO</p><p class="mm-sub">$5,635 ▼ $420</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">Supplier Score</p><p class="mm-sub">4.2 ▲ 0.3</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">Contract Value</p><p class="mm-sub">$24.6M ▲ 8.5%</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">Vendors Onboard</p><p class="mm-sub">89 ▲ 14</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">Maverick Spend</p><p class="mm-sub">8.3% ▼ 1.5pp</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 PO Cycle</p><p class="mm-sub">4.2d ▼ 0.6d</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">RFQ Response</p><p class="mm-sub">3.1d ▼ 0.4d</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">Delivery Rate</p><p class="mm-sub">96.8% ▲ 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">Unit Cost</p><p class="mm-sub">$76.50 ▼ $3.20</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">Active RFQ</p><p class="mm-sub">38 ▲ 7</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">Spend Coverage</p><p class="mm-sub">92% ▲ 3%</p></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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Procurement Summary</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">As of Q2 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">Total Spend YTD</p><p class="text-sm font-bold text-gray-900">$8.72M</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">PO Issued</p><p class="text-sm font-bold text-gray-900">$5.63M</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">Cost Savings</p><p class="text-sm font-bold text-blue-700">$1.24M</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>On-Time Rate</span><span class="font-semibold text-gray-900">94.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">6.2d</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">PO Pipeline</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Orders by status</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">Pending Approval</p><p class="text-sm font-bold text-green-700">846</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">In Progress</p><p class="text-sm font-bold text-amber-600">423</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">Delivered</p><p class="text-sm font-bold text-red-600">215</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">Closed</p><p class="text-sm font-bold text-blue-700">76</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>6.2d</b></span><span>Fill Rate: <b>97%</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">Procurement Activity</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">+423</span><p class="text-gray-400">PR Created</p></div>
|
||||
<div><span class="font-bold text-red-600">+186</span><p class="text-gray-400">PO Issued</p></div>
|
||||
<div><span class="font-bold text-red-600">+52</span><p class="text-gray-400">Deliveries</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">Recent Purchase Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest PR & PO activity</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New PR →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>PO#</th><th>Description</th><th>Qty</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">PO-2026-0421</td><td>Raw materials order</td><td class="font-mono text-xs">284</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">PO-2026-0420</td><td>Office supplies</td><td class="font-mono text-xs">42</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">PO-2026-0419</td><td>Logistics service</td><td class="font-mono text-xs">186</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">PO-2026-0418</td><td>IT equipment</td><td class="font-mono text-xs">38</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Pending: <b class="text-amber-600">4 PRs</b></span><span>Total POs: <b>142</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">SCM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time procurement updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">PO</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>PO Approved</b> — PO-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">📦 $24,500 · Supplier: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
|
||||
<span class="chip chip-green self-start">Approved</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">PR</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>PR Submitted</b> — Requester: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📄 86 items · PR-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
|
||||
<span class="chip chip-green self-start">Submitted</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">RFQ</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>RFQ Closed</b> — Raw Materials Q3</p><p class="text-xs text-gray-400 mt-0.5">📋 8 bids · 3 suppliers responded</p><p class="text-xs text-gray-400">1 hour ago</p></div>
|
||||
<span class="chip chip-indigo self-start">Closed</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">DL</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Delivery Received</b> — PO-2026-0812</p><p class="text-xs text-gray-400 mt-0.5">🚚 52 units · Supplier: Indah Logistik</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">Supplier Performance</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">On-Time</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">94% / 90%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:104%;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">Delivery</p>
|
||||
<span class="text-[11px] font-semibold">96% / 95%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:101%;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">Quality</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">98% / 97%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:101%;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">Compliance</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">92% / 90%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:102%;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>Overall Score: <b class="text-green-600">92%</b></span><span class="text-blue-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">Top Suppliers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Siemens AG</p><p class="text-sm font-bold text-gray-900">$420K</p><p class="text-[10px] text-green-600">96%</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">Mitsubishi Corp</p><p class="text-sm font-bold text-amber-600">$385K</p><p class="text-[10px] text-green-600">92%</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">DHL Supply Chain</p><p class="text-sm font-bold text-blue-700">$312K</p><p class="text-[10px] text-green-600">88%</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">BASF SE</p><p class="text-sm font-bold text-gray-900">$278K</p><p class="text-[10px] text-green-600">85%</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Active POs: <b>28</b></span><span>Avg Score: <b>90%</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">Compliance Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Supplier compliance KPIs</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">Audit Pass</p><p class="text-[10px] text-gray-400">Supplier audit compliance</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">96%</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">ISO Cert</p><p class="text-[10px] text-gray-400">ISO certification status</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">88%</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">Env Comp</p><p class="text-[10px] text-gray-400">Environmental compliance</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">82%</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">Safety</p><p class="text-[10px] text-gray-400">Safety compliance score</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">78%</span></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 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">SLA Met</p><p class="text-[10px] text-gray-400">SLA achievement rate</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">91%</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">Category Overview</h3><p class="text-xs text-gray-400 mt-0.5">Top categories</p></div>
|
||||
<span class="text-xs text-blue-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>Category Code</th><th>Category Name</th><th>Spend</th><th>%</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">CAT-01</td><td>Raw Materials</td><td class="font-mono text-xs text-green-600">$2,860,000</td><td class="font-mono text-xs">32.8%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CAT-02</td><td>Packaging</td><td class="font-mono text-xs text-green-600">$1,220,000</td><td class="font-mono text-xs">14.0%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CAT-03</td><td>Logistics</td><td class="font-mono text-xs text-green-600">$980,000</td><td class="font-mono text-xs">11.2%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CAT-04</td><td>IT Equipment</td><td class="font-mono text-xs text-green-600">$740,000</td><td class="font-mono text-xs">8.5%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CAT-05</td><td>Office Supplies</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">6.0%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CAT-06</td><td>Maintenance</td><td class="font-mono text-xs text-green-600">$450,000</td><td class="font-mono text-xs">5.2%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CAT-07</td><td>Consulting</td><td class="font-mono text-xs text-green-600">$380,000</td><td class="font-mono text-xs">4.4%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CAT-08</td><td>Marketing</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">3.6%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CAT-09</td><td>Training</td><td class="font-mono text-xs text-green-600">$210,000</td><td class="font-mono text-xs">2.4%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CAT-10</td><td>Travel</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">2.1%</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 Spend: <span class="text-green-600">$8,720,000</span></span><span>Avg per PO: <span class="text-blue-600">$5,635</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 Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">PO deliveries due next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Track Deliveries →</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>PO</th><th>Supplier</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">PO-0882</td><td>Siemens AG</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">PO-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">PO-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">PO-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">PO-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">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-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">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-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">PO-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>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Expected: <b class="text-gray-900">$93,500</b></span><span>Delayed: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-scm.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,371 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardScm3";
|
||||
ViewData["SidebarVariant"] = "3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style3.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">SCM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Supply Chain Management — Period: Q2 2026</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-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">Supplier Breakdown</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> Direct Raw <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> Indirect <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> Logistics <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> IT <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> Others <span class="font-semibold ml-auto">9%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<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">Spend Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly spend vs budget</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> Spend</span>
|
||||
<span class="flex items-center gap-1"><span class="w-3 h-3 rounded-sm" style="background:#f97316;"></span> Budget</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
|
||||
<div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">SCM 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 Spend</p><p class="text-lg font-bold text-gray-900">$8.72M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.4%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">PO Value</p><p class="text-lg font-bold text-gray-900">$3.15M</p><span class="text-[10px] text-green-600 font-semibold">▲ +12.7%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Suppliers</p><p class="text-lg font-bold text-gray-900">1,246</p><span class="text-[10px] text-red-500 font-semibold">▲ +8.2%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cost Savings</p><p class="text-lg font-bold text-gray-900">$1.24M</p><span class="text-[10px] text-green-600 font-semibold">▲ +18.3%</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>PR Backlog: <b class="text-gray-700">187</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 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 Spend</p><p class="kpi-value">$8.72M</p><span class="kpi-delta">▲ +5.4%</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">PO Value</p><p class="kpi-value">$3.15M</p><span class="kpi-delta">▲ +12.7%</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">Suppliers</p><p class="kpi-value">1,246</p><span class="kpi-delta">▲ +8.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="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">Cost Savings</p><p class="kpi-value">$1.24M</p><span class="kpi-delta">▲ +18.3%</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-1 lg:row-start-2 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">Cycle Time</p><p class="kpi-value">6.2d</p><span class="kpi-delta">▼ -0.8d</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">Contract Cov.</p><p class="kpi-value">78.6%</p><span class="kpi-delta">▲ +4.3%</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">PR Volume</p><p class="kpi-value">2,847</p><span class="kpi-delta">▲ +22.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">On-Time Rate</p><p class="kpi-value">94.2%</p><span class="kpi-delta">▲ +2.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 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">SCM 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 Spend</p><p class="mm-sub">$8.72M ▲ 5.4%</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">PO Value</p><p class="mm-sub">$3.15M ▲ 12.7%</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">Suppliers</p><p class="mm-sub">1,246 ▲ 8.2%</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">Cost Savings</p><p class="mm-sub">$1.24M ▲ 18.3%</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">Cycle Time</p><p class="mm-sub">6.2d ▼ 0.8d</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">Contract Cov.</p><p class="mm-sub">78.6% ▲ 4.3%</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">PR Volume</p><p class="mm-sub">2,847 ▲ 22.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">On-Time Rate</p><p class="mm-sub">94.2% ▲ 2.3pp</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">Purchase Orders</p><p class="mm-sub">1,560 ▲ 15.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">Spend per PO</p><p class="mm-sub">$5,635 ▼ $420</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">Supplier Score</p><p class="mm-sub">4.2 ▲ 0.3</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">Contract Value</p><p class="mm-sub">$24.6M ▲ 8.5%</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">Vendors Onboard</p><p class="mm-sub">89 ▲ 14</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">Maverick Spend</p><p class="mm-sub">8.3% ▼ 1.5pp</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 PO Cycle</p><p class="mm-sub">4.2d ▼ 0.6d</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">RFQ Response</p><p class="mm-sub">3.1d ▼ 0.4d</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">Delivery Rate</p><p class="mm-sub">96.8% ▲ 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">Unit Cost</p><p class="mm-sub">$76.50 ▼ $3.20</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">Active RFQ</p><p class="mm-sub">38 ▲ 7</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">Spend Coverage</p><p class="mm-sub">92% ▲ 3%</p></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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Procurement Summary</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">As of Q2 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">Total Spend YTD</p><p class="text-sm font-bold text-gray-900">$8.72M</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">PO Issued</p><p class="text-sm font-bold text-gray-900">$5.63M</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">Cost Savings</p><p class="text-sm font-bold text-indigo-700">$1.24M</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>On-Time Rate</span><span class="font-semibold text-gray-900">94.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">6.2d</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">PO Pipeline</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Orders by status</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">Pending Approval</p><p class="text-sm font-bold text-green-700">846</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">In Progress</p><p class="text-sm font-bold text-amber-600">423</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">Delivered</p><p class="text-sm font-bold text-red-600">215</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">Closed</p><p class="text-sm font-bold text-indigo-700">76</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>6.2d</b></span><span>Fill Rate: <b>97%</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">Procurement Activity</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">+423</span><p class="text-gray-400">PR Created</p></div>
|
||||
<div><span class="font-bold text-red-600">+186</span><p class="text-gray-400">PO Issued</p></div>
|
||||
<div><span class="font-bold text-red-600">+52</span><p class="text-gray-400">Deliveries</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">Recent Purchase Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest PR & PO activity</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New PR →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>PO#</th><th>Description</th><th>Qty</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">PO-2026-0421</td><td>Raw materials order</td><td class="font-mono text-xs">284</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">PO-2026-0420</td><td>Office supplies</td><td class="font-mono text-xs">42</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">PO-2026-0419</td><td>Logistics service</td><td class="font-mono text-xs">186</td><td><span class="chip chip-indigo">Approved</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">PO-2026-0418</td><td>IT equipment</td><td class="font-mono text-xs">38</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Pending: <b class="text-amber-600">4 PRs</b></span><span>Total POs: <b>142</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">SCM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time procurement 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">PO</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>PO Approved</b> — PO-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">📦 $24,500 · Supplier: TechDistrib · Net 30</p><p class="text-xs text-gray-400">12 min ago</p></div>
|
||||
<span class="chip chip-green self-start">Approved</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">PR</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>PR Submitted</b> — Requester: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📄 86 items · PR-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
|
||||
<span class="chip chip-green self-start">Submitted</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">RFQ</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>RFQ Closed</b> — Raw Materials Q3</p><p class="text-xs text-gray-400 mt-0.5">📋 8 bids · 3 suppliers responded</p><p class="text-xs text-gray-400">1 hour ago</p></div>
|
||||
<span class="chip chip-indigo self-start">Closed</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">DL</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Delivery Received</b> — PO-2026-0812</p><p class="text-xs text-gray-400 mt-0.5">🚚 52 units · Supplier: Indah Logistik</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">Supplier Performance</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">On-Time</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">94% / 90%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:104%;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">Delivery</p>
|
||||
<span class="text-[11px] font-semibold">96% / 95%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:101%;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">Quality</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">98% / 97%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:101%;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">Compliance</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">92% / 90%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:102%;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>Overall Score: <b class="text-green-600">92%</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">Top Suppliers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Siemens AG</p><p class="text-sm font-bold text-gray-900">$420K</p><p class="text-[10px] text-green-600">96%</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">Mitsubishi Corp</p><p class="text-sm font-bold text-amber-600">$385K</p><p class="text-[10px] text-green-600">92%</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">DHL Supply Chain</p><p class="text-sm font-bold text-indigo-700">$312K</p><p class="text-[10px] text-green-600">88%</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">BASF SE</p><p class="text-sm font-bold text-gray-900">$278K</p><p class="text-[10px] text-green-600">85%</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Active POs: <b>28</b></span><span>Avg Score: <b>90%</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">Compliance Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Supplier compliance KPIs</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">Audit Pass</p><p class="text-[10px] text-gray-400">Supplier audit compliance</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">96%</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">ISO Cert</p><p class="text-[10px] text-gray-400">ISO certification status</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">88%</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">Env Comp</p><p class="text-[10px] text-gray-400">Environmental compliance</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">82%</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">Safety</p><p class="text-[10px] text-gray-400">Safety compliance score</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">78%</span></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 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">SLA Met</p><p class="text-[10px] text-gray-400">SLA achievement rate</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">91%</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">Category Overview</h3><p class="text-xs text-gray-400 mt-0.5">Top categories</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>Category Code</th><th>Category Name</th><th>Spend</th><th>%</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">CAT-01</td><td>Raw Materials</td><td class="font-mono text-xs text-green-600">$2,860,000</td><td class="font-mono text-xs">32.8%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CAT-02</td><td>Packaging</td><td class="font-mono text-xs text-green-600">$1,220,000</td><td class="font-mono text-xs">14.0%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CAT-03</td><td>Logistics</td><td class="font-mono text-xs text-green-600">$980,000</td><td class="font-mono text-xs">11.2%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CAT-04</td><td>IT Equipment</td><td class="font-mono text-xs text-green-600">$740,000</td><td class="font-mono text-xs">8.5%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CAT-05</td><td>Office Supplies</td><td class="font-mono text-xs text-green-600">$520,000</td><td class="font-mono text-xs">6.0%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CAT-06</td><td>Maintenance</td><td class="font-mono text-xs text-green-600">$450,000</td><td class="font-mono text-xs">5.2%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CAT-07</td><td>Consulting</td><td class="font-mono text-xs text-green-600">$380,000</td><td class="font-mono text-xs">4.4%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CAT-08</td><td>Marketing</td><td class="font-mono text-xs text-green-600">$310,000</td><td class="font-mono text-xs">3.6%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CAT-09</td><td>Training</td><td class="font-mono text-xs text-green-600">$210,000</td><td class="font-mono text-xs">2.4%</td></tr>
|
||||
<tr><td class="font-mono text-xs">CAT-10</td><td>Travel</td><td class="font-mono text-xs text-green-600">$180,000</td><td class="font-mono text-xs">2.1%</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 Spend: <span class="text-green-600">$8,720,000</span></span><span>Avg per PO: <span class="text-indigo-600">$5,635</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 Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">PO deliveries due next 14 days</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Track Deliveries →</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>PO</th><th>Supplier</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">PO-0882</td><td>Siemens AG</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">PO-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">PO-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">PO-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">PO-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">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-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">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-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">PO-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>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Expected: <b class="text-gray-900">$93,500</b></span><span>Delayed: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-scm.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,405 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardScm4";
|
||||
ViewData["SidebarVariant"] = "4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style4.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">SCM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Supply Chain Management — Period: Q2 2026</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-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">Supplier Breakdown</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> Direct Raw <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> Indirect <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> Logistics <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> IT <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> Others <span class="font-semibold ml-auto">9%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<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">Spend Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly spend vs budget</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> Budget</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
|
||||
<div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white rounded-xl border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">SCM 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 Spend</p><p class="text-lg font-bold text-gray-900">$8.72M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.4%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">PO Value</p><p class="text-lg font-bold text-gray-900">$3.15M</p><span class="text-[10px] text-green-600 font-semibold">▲ +12.7%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Suppliers</p><p class="text-lg font-bold text-gray-900">1,246</p><span class="text-[10px] text-red-500 font-semibold">▲ +8.2%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cost Savings</p><p class="text-lg font-bold text-gray-900">$1.24M</p><span class="text-[10px] text-green-600 font-semibold">▲ +18.3%</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>PR Backlog: <b class="text-gray-700">187</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 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 Spend</p><p class="kpi-value">$8.72M</p><span class="kpi-delta">▲ +5.4%</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">PO Value</p><p class="kpi-value">$3.15M</p><span class="kpi-delta">▲ +12.7%</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">Suppliers</p><p class="kpi-value">1,246</p><span class="kpi-delta">▲ +8.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="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">Cost Savings</p><p class="kpi-value">$1.24M</p><span class="kpi-delta">▲ +18.3%</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-1 lg:row-start-2 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">Cycle Time</p><p class="kpi-value">6.2d</p><span class="kpi-delta">▼ -0.8d</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">Contract Cov.</p><p class="kpi-value">78.6%</p><span class="kpi-delta">▲ +4.3%</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">PR Volume</p><p class="kpi-value">2,847</p><span class="kpi-delta">▲ +22.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">On-Time Rate</p><p class="kpi-value">94.2%</p><span class="kpi-delta">▲ +2.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 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">SCM 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 Spend</p><p class="mm-sub">$8.72M ▲ 5.4%</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">PO Value</p><p class="mm-sub">$3.15M ▲ 12.7%</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">Suppliers</p><p class="mm-sub">1,246 ▲ 8.2%</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">Cost Savings</p><p class="mm-sub">$1.24M ▲ 18.3%</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">Cycle Time</p><p class="mm-sub">6.2d ▼ 0.8d</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">Contract Cov.</p><p class="mm-sub">78.6% ▲ 4.3%</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">PR Volume</p><p class="mm-sub">2,847 ▲ 22.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">On-Time Rate</p><p class="mm-sub">94.2% ▲ 2.3pp</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">Purchase Orders</p><p class="mm-sub">1,560 ▲ 15.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">Spend per PO</p><p class="mm-sub">$5,635 ▼ $420</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">Supplier Score</p><p class="mm-sub">4.2 ▲ 0.3</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">Contract Value</p><p class="mm-sub">$24.6M ▲ 8.5%</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">Vendors Onboard</p><p class="mm-sub">89 ▲ 14</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">Maverick Spend</p><p class="mm-sub">8.3% ▼ 1.5pp</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 PO Cycle</p><p class="mm-sub">4.2d ▼ 0.6d</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">RFQ Response</p><p class="mm-sub">3.1d ▼ 0.4d</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">Delivery Rate</p><p class="mm-sub">96.8% ▲ 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">Unit Cost</p><p class="mm-sub">$76.50 ▼ $3.20</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">Active RFQ</p><p class="mm-sub">38 ▲ 7</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">Spend Coverage</p><p class="mm-sub">92% ▲ 3%</p></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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Procurement Summary</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">As of Q2 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">Total Spend YTD</p><p class="text-sm font-bold text-gray-900">$8.72M</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">PO Issued</p><p class="text-sm font-bold text-gray-900">$5.63M</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">Cost Savings</p><p class="text-sm font-bold text-indigo-700">$1.24M</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>On-Time Rate</span><span class="font-semibold text-gray-900">94.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">6.2d</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">PO Pipeline</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Orders by status</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">Pending Approval</p><p class="text-sm font-bold text-green-700">846</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">In Progress</p><p class="text-sm font-bold text-amber-600">423</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">Delivered</p><p class="text-sm font-bold text-red-600">215</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">Closed</p><p class="text-sm font-bold text-indigo-700">76</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>6.2d</b></span><span>Fill Rate: <b>97%</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">Procurement Activity</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">+423</span><p class="text-gray-400">PR Created</p></div>
|
||||
<div><span class="font-bold text-green-600">+186</span><p class="text-gray-400">PO Issued</p></div>
|
||||
<div><span class="font-bold text-green-600">+52</span><p class="text-gray-400">Deliveries</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">Recent Purchase Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest PR & PO activity</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New PR →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>PO#</th><th>Description</th><th>Qty</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">PO-2026-0421</td><td>Raw material procurement</td><td class="font-mono text-xs">500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">PO-2026-0420</td><td>Office supplies</td><td class="font-mono text-xs">120</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">PO-2026-0419</td><td>IT equipment order</td><td class="font-mono text-xs">45</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">PO-2026-0418</td><td>Logistics services</td><td class="font-mono text-xs">1</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Pending: <b class="text-amber-600">4 PRs</b></span><span>Total POs: <b>142</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">SCM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time procurement 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">PO</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>PO Approved</b> — PO-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">📦 $24,500 · Supplier: TechDistrib</p><p class="text-xs text-gray-400">12 min ago</p></div>
|
||||
<span class="chip chip-green self-start">Approved</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">PR</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>PR Submitted</b> — Requester: Warehouse</p><p class="text-xs text-gray-400 mt-0.5">📥 86 items · PR-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
|
||||
<span class="chip chip-green self-start">Submitted</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">DN</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Delivery Received</b> — PO-2026-0410</p><p class="text-xs text-gray-400 mt-0.5">📋 200 units received</p><p class="text-xs text-gray-400">1 hour ago</p></div>
|
||||
<span class="chip chip-indigo 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:#f97316">RF</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>RFQ Published</b> — RFQ-2026-003</p><p class="text-xs text-gray-400 mt-0.5">🧾 3 bids received</p><p class="text-xs text-gray-400">2 hours ago</p></div>
|
||||
<span class="chip chip-amber self-start">Open</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">Supplier Performance</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">On-Time</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">94.2%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:94%;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">Delivery</p>
|
||||
<span class="text-[11px] font-semibold">96.8%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:97%;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">Quality</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">98.7%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:99%;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">Compliance</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">92.3%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:92%;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>Overall Score: <b class="text-green-600">92%</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">Top Suppliers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Siemens AG</p><p class="text-sm font-bold text-gray-900">$420K · 96%</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">Mitsubishi Corp</p><p class="text-sm font-bold text-amber-600">$385K · 92%</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">DHL Supply Chain</p><p class="text-sm font-bold text-indigo-700">$312K · 88%</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">BASF SE</p><p class="text-sm font-bold text-gray-900">$278K · 85%</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Active POs: <b>28</b></span><span>Avg Score: <b>90%</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">Compliance Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Supplier compliance KPIs</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">Audit Pass</p><p class="text-[10px] text-gray-400">Quarterly audit completion</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">96%</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">ISO Cert</p><p class="text-[10px] text-gray-400">Certification compliance</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">88%</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">Env Comp</p><p class="text-[10px] text-gray-400">Environmental standards</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">92%</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">Safety</p><p class="text-[10px] text-gray-400">Workplace safety score</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">85%</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">Category Overview</h3><p class="text-xs text-gray-400 mt-0.5">Top categories</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>Category Code</th><th>Category Name</th><th>Spend</th><th>%</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">CRM-01</td><td>Raw Materials</td><td class="font-mono text-xs text-green-600">$2,450,000</td><td class="font-mono text-xs">28%</td></tr>
|
||||
<tr><td class="font-mono text-xs">IND-02</td><td>Indirect Materials</td><td class="font-mono text-xs text-green-600">$1,920,000</td><td class="font-mono text-xs">22%</td></tr>
|
||||
<tr><td class="font-mono text-xs">LOG-03</td><td>Logistics</td><td class="font-mono text-xs text-green-600">$1,310,000</td><td class="font-mono text-xs">15%</td></tr>
|
||||
<tr><td class="font-mono text-xs">IT-04</td><td>IT Services</td><td class="font-mono text-xs text-green-600">$1,050,000</td><td class="font-mono text-xs">12%</td></tr>
|
||||
<tr><td class="font-mono text-xs">PROF-05</td><td>Professional Services</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">9%</td></tr>
|
||||
<tr><td class="font-mono text-xs">MRO-06</td><td>MRO Supplies</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">6%</td></tr>
|
||||
<tr><td class="font-mono text-xs">PKG-07</td><td>Packaging</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">4%</td></tr>
|
||||
<tr><td class="font-mono text-xs">UTIL-08</td><td>Utilities</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">2%</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 Spend: <span class="text-green-600">$8,720,000</span></span><span>Avg per PO: <span class="text-red-600">$5,635</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 Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">PO deliveries due next 14 days</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Track Deliveries →</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>PO#</th><th>Supplier</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">PO-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">PO-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">PO-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">PO-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">PO-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">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-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">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-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">PO-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">PO-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">PO-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>
|
||||
<tr><td class="font-mono text-xs">PO-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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">PO-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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">PO-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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">PO-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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">PO-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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">PO-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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">PO-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Expected: <b class="text-gray-900">$93,500</b></span><span>Delayed: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-scm.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,405 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardScm5";
|
||||
ViewData["SidebarVariant"] = "5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style5.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">SCM Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Supply Chain Management — Period: Q2 2026</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-blue-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: #3b82f6;"><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-3 gap-4">
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Supplier Breakdown</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> Direct Raw <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> Indirect <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> Logistics <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> IT <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> Others <span class="font-semibold ml-auto">9%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:col-span-2 bg-white 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">Spend Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly spend vs budget</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> Budget</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
|
||||
<div class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">SCM 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-blue-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 Spend</p><p class="text-lg font-bold text-gray-900">$8.72M</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.4%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">PO Value</p><p class="text-lg font-bold text-gray-900">$3.15M</p><span class="text-[10px] text-green-600 font-semibold">▲ +12.7%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Suppliers</p><p class="text-lg font-bold text-gray-900">1,246</p><span class="text-[10px] text-red-500 font-semibold">▲ +8.2%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Cost Savings</p><p class="text-lg font-bold text-gray-900">$1.24M</p><span class="text-[10px] text-green-600 font-semibold">▲ +18.3%</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>PR Backlog: <b class="text-gray-700">187</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></div>
|
||||
</div>
|
||||
<div class="lg:col-span-7 lg:col-start-1 lg:row-start-1 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 Spend</p><p class="kpi-value">$8.72M</p><span class="kpi-delta">▲ +5.4%</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">PO Value</p><p class="kpi-value">$3.15M</p><span class="kpi-delta">▲ +12.7%</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">Suppliers</p><p class="kpi-value">1,246</p><span class="kpi-delta">▲ +8.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="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">Cost Savings</p><p class="kpi-value">$1.24M</p><span class="kpi-delta">▲ +18.3%</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-1 lg:row-start-2 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">Cycle Time</p><p class="kpi-value">6.2d</p><span class="kpi-delta">▼ -0.8d</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">Contract Cov.</p><p class="kpi-value">78.6%</p><span class="kpi-delta">▲ +4.3%</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">PR Volume</p><p class="kpi-value">2,847</p><span class="kpi-delta">▲ +22.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">On-Time Rate</p><p class="kpi-value">94.2%</p><span class="kpi-delta">▲ +2.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 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 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">SCM 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-blue-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 Spend</p><p class="mm-sub">$8.72M ▲ 5.4%</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">PO Value</p><p class="mm-sub">$3.15M ▲ 12.7%</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">Suppliers</p><p class="mm-sub">1,246 ▲ 8.2%</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">Cost Savings</p><p class="mm-sub">$1.24M ▲ 18.3%</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">Cycle Time</p><p class="mm-sub">6.2d ▼ 0.8d</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">Contract Cov.</p><p class="mm-sub">78.6% ▲ 4.3%</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">PR Volume</p><p class="mm-sub">2,847 ▲ 22.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">On-Time Rate</p><p class="mm-sub">94.2% ▲ 2.3pp</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">Purchase Orders</p><p class="mm-sub">1,560 ▲ 15.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">Spend per PO</p><p class="mm-sub">$5,635 ▼ $420</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">Supplier Score</p><p class="mm-sub">4.2 ▲ 0.3</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">Contract Value</p><p class="mm-sub">$24.6M ▲ 8.5%</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">Vendors Onboard</p><p class="mm-sub">89 ▲ 14</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">Maverick Spend</p><p class="mm-sub">8.3% ▼ 1.5pp</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 PO Cycle</p><p class="mm-sub">4.2d ▼ 0.6d</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">RFQ Response</p><p class="mm-sub">3.1d ▼ 0.4d</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">Delivery Rate</p><p class="mm-sub">96.8% ▲ 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">Unit Cost</p><p class="mm-sub">$76.50 ▼ $3.20</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">Active RFQ</p><p class="mm-sub">38 ▲ 7</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">Spend Coverage</p><p class="mm-sub">92% ▲ 3%</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Procurement Summary</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">As of Q2 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">Total Spend YTD</p><p class="text-sm font-bold text-gray-900">$8.72M</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">PO Issued</p><p class="text-sm font-bold text-gray-900">$5.63M</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">Cost Savings</p><p class="text-sm font-bold text-blue-700">$1.24M</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>On-Time Rate</span><span class="font-semibold text-gray-900">94.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">6.2d</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
|
||||
<h3 class="font-bold text-gray-900 mb-1">PO Pipeline</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Orders by status</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">Pending Approval</p><p class="text-sm font-bold text-green-700">846</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">In Progress</p><p class="text-sm font-bold text-amber-600">423</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">Delivered</p><p class="text-sm font-bold text-red-600">215</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">Closed</p><p class="text-sm font-bold text-blue-700">76</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>6.2d</b></span><span>Fill Rate: <b>97%</b></span></div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Procurement Activity</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">+423</span><p class="text-gray-400">PR Created</p></div>
|
||||
<div><span class="font-bold text-green-600">+186</span><p class="text-gray-400">PO Issued</p></div>
|
||||
<div><span class="font-bold text-green-600">+52</span><p class="text-gray-400">Deliveries</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-white 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">Recent Purchase Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest PR & PO activity</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New PR →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>PO#</th><th>Description</th><th>Qty</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">PO-2026-0421</td><td>Raw material procurement</td><td class="font-mono text-xs">500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">PO-2026-0420</td><td>Office supplies</td><td class="font-mono text-xs">120</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">PO-2026-0419</td><td>IT equipment order</td><td class="font-mono text-xs">45</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">PO-2026-0418</td><td>Logistics services</td><td class="font-mono text-xs">1</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Pending: <b class="text-amber-600">4 PRs</b></span><span>Total POs: <b>142</b></span></div>
|
||||
</div>
|
||||
<div class="bg-white 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">SCM Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time procurement updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">PO</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>PO Approved</b> — PO-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">📦 $24,500 · Supplier: TechDistrib</p><p class="text-xs text-gray-400">12 min ago</p></div>
|
||||
<span class="chip chip-green self-start">Approved</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">PR</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>PR Submitted</b> — Requester: Warehouse</p><p class="text-xs text-gray-400 mt-0.5">📥 86 items · PR-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
|
||||
<span class="chip chip-green self-start">Submitted</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">DN</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Delivery Received</b> — PO-2026-0410</p><p class="text-xs text-gray-400 mt-0.5">📋 200 units received</p><p class="text-xs text-gray-400">1 hour ago</p></div>
|
||||
<span class="chip chip-indigo 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:#f97316">RF</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>RFQ Published</b> — RFQ-2026-003</p><p class="text-xs text-gray-400 mt-0.5">🧾 3 bids received</p><p class="text-xs text-gray-400">2 hours ago</p></div>
|
||||
<span class="chip chip-amber self-start">Open</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Supplier Performance</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">On-Time</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">94.2%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:94%;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">Delivery</p>
|
||||
<span class="text-[11px] font-semibold">96.8%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:97%;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">Quality</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">98.7%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:99%;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">Compliance</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">92.3%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:92%;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>Overall Score: <b class="text-green-600">92%</b></span><span class="text-blue-600">On Track</span></div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Top Suppliers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Siemens AG</p><p class="text-sm font-bold text-gray-900">$420K · 96%</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">Mitsubishi Corp</p><p class="text-sm font-bold text-amber-600">$385K · 92%</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">DHL Supply Chain</p><p class="text-sm font-bold text-blue-700">$312K · 88%</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">BASF SE</p><p class="text-sm font-bold text-gray-900">$278K · 85%</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Active POs: <b>28</b></span><span>Avg Score: <b>90%</b></span></div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-6">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Compliance Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Supplier compliance KPIs</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">Audit Pass</p><p class="text-[10px] text-gray-400">Quarterly audit completion</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">96%</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">ISO Cert</p><p class="text-[10px] text-gray-400">Certification compliance</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">88%</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">Env Comp</p><p class="text-[10px] text-gray-400">Environmental standards</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">92%</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">Safety</p><p class="text-[10px] text-gray-400">Workplace safety score</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">85%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-white 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">Category Overview</h3><p class="text-xs text-gray-400 mt-0.5">Top categories</p></div>
|
||||
<span class="text-xs text-blue-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>Category Code</th><th>Category Name</th><th>Spend</th><th>%</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">CRM-01</td><td>Raw Materials</td><td class="font-mono text-xs text-green-600">$2,450,000</td><td class="font-mono text-xs">28%</td></tr>
|
||||
<tr><td class="font-mono text-xs">IND-02</td><td>Indirect Materials</td><td class="font-mono text-xs text-green-600">$1,920,000</td><td class="font-mono text-xs">22%</td></tr>
|
||||
<tr><td class="font-mono text-xs">LOG-03</td><td>Logistics</td><td class="font-mono text-xs text-green-600">$1,310,000</td><td class="font-mono text-xs">15%</td></tr>
|
||||
<tr><td class="font-mono text-xs">IT-04</td><td>IT Services</td><td class="font-mono text-xs text-green-600">$1,050,000</td><td class="font-mono text-xs">12%</td></tr>
|
||||
<tr><td class="font-mono text-xs">PROF-05</td><td>Professional Services</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">9%</td></tr>
|
||||
<tr><td class="font-mono text-xs">MRO-06</td><td>MRO Supplies</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">6%</td></tr>
|
||||
<tr><td class="font-mono text-xs">PKG-07</td><td>Packaging</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">4%</td></tr>
|
||||
<tr><td class="font-mono text-xs">UTIL-08</td><td>Utilities</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">2%</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 Spend: <span class="text-green-600">$8,720,000</span></span><span>Avg per PO: <span class="text-red-600">$5,635</span></span></div>
|
||||
</div>
|
||||
<div class="bg-white 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 Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">PO deliveries due next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Track Deliveries →</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>PO#</th><th>Supplier</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">PO-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">PO-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">PO-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">PO-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">PO-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">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-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">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-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">PO-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">PO-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">PO-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>
|
||||
<tr><td class="font-mono text-xs">PO-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,200</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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">PO-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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">PO-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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">PO-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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">PO-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</td><td class="text-xs">Jul 03</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</td><td class="text-xs">Jul 02</td><td><span class="chip chip-red">Delayed</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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">PO-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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">PO-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">PO-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Expected: <b class="text-gray-900">$93,500</b></span><span>Delayed: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-scm.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,443 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardTms1";
|
||||
ViewData["SidebarVariant"] = "1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style1.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">TMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Talent Management System — Period: Q2 2026</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-blue-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: #3b82f6;"><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">TMS Activity</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">+245</span><p class="text-gray-400">Calls</p></div>
|
||||
<div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
|
||||
<div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</p></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">$2.46M</p><span class="kpi-delta">▲ +15.3%</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">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">▲ +22.1%</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">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">▲ +2.1pp</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">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">▲ +9.3%</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">Avg Deal Size</p><p class="kpi-value">$14.3K</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" 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">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">▲ +12.4%</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">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.4pp</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">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">▲ +8.7%</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">TMS 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-blue-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 Revenue</p><p class="mm-sub">$2.46M ▲ 15.3%</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">Pipeline Value</p><p class="mm-sub">$4.83M ▲ 22.1%</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">Win Rate</p><p class="mm-sub">34.2% ▲ 2.1pp</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">Customers</p><p class="mm-sub">1,847 ▲ 9.3%</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">Avg Deal Size</p><p class="mm-sub">$14.3K ▲ 5.8%</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">CLV</p><p class="mm-sub">$48.6K ▲ 12.4%</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">Churn Rate</p><p class="mm-sub">2.1% ▼ 0.4pp</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">MRR</p><p class="mm-sub">$128K ▲ 8.7%</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">Leads</p><p class="mm-sub">2,450 ▲ 18%</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">Deals</p><p class="mm-sub">640 ▲ 12%</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">Conversion</p><p class="mm-sub">4.7% ▲ 0.8%</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">CSAT</p><p class="mm-sub">4.2 ▲ 0.3</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">Contacts</p><p class="mm-sub">3,250 ▲ 14%</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">NPS Score</p><p class="mm-sub">72 ▲ 5pts</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 Cycle</p><p class="mm-sub">62 days ▼ 3d</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">Response Time</p><p class="mm-sub">2.4hrs ▼ 0.3</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">SLA</p><p class="mm-sub">94.2% ▲ 2.1%</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">Email Open</p><p class="mm-sub">24.5% ▲ 2.3%</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">Campaigns</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">Enterprise</p><p class="mm-sub">35% rev share</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">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</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> Target</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Lead Sources</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> Website <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> Referral <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> Social <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> Email <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> Others <span class="font-semibold ml-auto">9%</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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">As of Q2 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">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</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">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</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">Avg Deal Size</p><p class="text-sm font-bold text-blue-700">$14.3K</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 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">Deal Stages</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Pipeline by stage</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">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</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">Qualified</p><p class="text-sm font-bold text-amber-600">640</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">Negotiation</p><p class="text-sm font-bold text-red-600">156</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">Closed Won</p><p class="text-sm font-bold text-blue-700">89</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</b></span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">TMS 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-blue-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">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">▲ +15.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">▲ +22.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">▲ +9.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">▲ +2.1pp</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>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></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">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">DL-2026-0421</td><td>Enterprise SaaS contract</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">Negotiation</td><td><span class="chip chip-indigo">Active</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">DL-2026-0420</td><td>Q3 renewal - MegaCorp</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">Closed Won</td><td><span class="chip chip-indigo">Active</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">DL-2026-0419</td><td>Consulting engagement</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">Qualified</td><td><span class="chip chip-indigo">Active</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">DL-2026-0418</td><td>New lead - TechStart</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">Prospecting</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</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">TMS Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">DL</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Deal Won</b> — DL-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">💰 $24,500 · Customer: TechDistrib · SaaS</p><p class="text-xs text-gray-400">12 min ago</p></div>
|
||||
<span class="chip chip-green self-start">Won</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">LD</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Lead Created</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">📥 $86,200 · Source: Website referral</p><p class="text-xs text-gray-400">35 min ago</p></div>
|
||||
<span class="chip chip-green self-start">New</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">DL</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Deal Updated</b> — Q3 renewal</p><p class="text-xs text-gray-400 mt-0.5">📋 $42,800 · Stage moved to Negotiation</p><p class="text-xs text-gray-400">1 hour ago</p></div>
|
||||
<span class="chip chip-indigo self-start">Updated</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">EM</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Email Sent</b> — Campaign Q2</p><p class="text-xs text-gray-400 mt-0.5">📧 2,450 recipients · Open rate 24.5%</p><p class="text-xs text-gray-400">2 hours ago</p></div>
|
||||
<span class="chip chip-amber self-start">Sent</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">Conversion Metrics</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">Leads→MQL</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">68% / 65%</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">MQL→SQL</p>
|
||||
<span class="text-[11px] font-semibold">42% / 40%</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">SQL→Won</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">34% / 32%</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">Overall CVR</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">4.7% / 4.5%</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>Target CVR: <b class="text-green-600">5%</b></span><span class="text-blue-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">Top Performers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K</p><p class="text-[10px] text-green-600">48%</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">James C.</p><p class="text-sm font-bold text-amber-600">$385K</p><p class="text-[10px] text-green-600">42%</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">Alex L.</p><p class="text-sm font-bold text-blue-700">$312K</p><p class="text-[10px] text-green-600">38%</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">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K</p><p class="text-[10px] text-green-600">35%</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</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">Support Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Customer service KPIs</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">Open Tickets</p><p class="text-sm font-bold text-green-700">48</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">-12%</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">Avg Response</p><p class="text-sm font-bold text-gray-900">2.4 hrs</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">▼ 0.3</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">CSAT Score</p><p class="text-sm font-bold text-amber-600">4.2 / 5.0</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">▲ 0.3</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">Resolution Time</p><p class="text-sm font-bold text-gray-900">6.2 hrs</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">▲ 8%</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">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">Top sources</p></div>
|
||||
<span class="text-xs text-blue-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>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">S-001</td><td>Website</td><td class="font-mono text-xs text-green-600">1,847</td><td class="font-mono text-xs">5.2%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-002</td><td>Referral</td><td class="font-mono text-xs text-green-600">982</td><td class="font-mono text-xs">7.8%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-003</td><td>Social Media</td><td class="font-mono text-xs text-green-600">654</td><td class="font-mono text-xs">3.1%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-004</td><td>Email Campaign</td><td class="font-mono text-xs text-green-600">523</td><td class="font-mono text-xs">4.5%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-005</td><td>Events</td><td class="font-mono text-xs text-green-600">342</td><td class="font-mono text-xs">6.2%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-006</td><td>Partner Network</td><td class="font-mono text-xs text-green-600">298</td><td class="font-mono text-xs">8.1%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-007</td><td>Direct Mail</td><td class="font-mono text-xs text-green-600">187</td><td class="font-mono text-xs">2.8%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-008</td><td>Paid Ads</td><td class="font-mono text-xs text-green-600">148</td><td class="font-mono text-xs">4.1%</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-009</td><td>Content Marketing</td><td class="font-mono text-xs text-green-600">420</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-010</td><td>Webinar</td><td class="font-mono text-xs text-green-600">950</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-011</td><td>Inbound Call</td><td class="font-mono text-xs text-green-600">780</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-012</td><td>Chatbot</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">450</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-013</td><td>Trade Show</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">320</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-014</td><td>Affiliate</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">275</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-015</td><td>SMS Campaign</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">98</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-016</td><td>Direct Outreach</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">150</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-017</td><td>YouTube/Video</td><td class="font-mono text-xs text-green-600">2,600</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-018</td><td>Podcast</td><td class="font-mono text-xs text-green-600">1,850</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-019</td><td>LinkedIn Ads</td><td class="font-mono text-xs text-green-600">620</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-020</td><td>Twitter/X</td><td class="font-mono text-xs text-green-600">340</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-021</td><td>Facebook Ads</td><td class="font-mono text-xs text-green-600">480</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-022</td><td>Instagram</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">2,400</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-023</td><td>Google Ads</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">1,600</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-024</td><td>Bing Ads</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">850</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-025</td><td>Retargeting</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">420</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-026</td><td>PR/Media</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">500</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-027</td><td>Sponsorship</td><td class="font-mono text-xs text-green-600">200</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-028</td><td>Community Forum</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">5,600</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-029</td><td>Mobile App</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">3,800</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-030</td><td>QR Code</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">2,100</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-031</td><td>Chat/WhatsApp</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">320</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-032</td><td>SEO Organic</td><td class="font-mono text-xs text-green-600">2,800</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-033</td><td>SEM/PPC</td><td class="font-mono text-xs text-green-600">1,900</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-034</td><td>Sales Team</td><td class="font-mono text-xs text-green-600">2,400</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-035</td><td>Partner Referral</td><td class="font-mono text-xs text-green-600">680</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-036</td><td>Customer Referral</td><td class="font-mono text-xs text-green-600">520</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-037</td><td>Case Study</td><td class="font-mono text-xs text-green-600">310</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-038</td><td>Whitepaper</td><td class="font-mono text-xs text-green-600">180</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-039</td><td>Ebook Download</td><td class="font-mono text-xs text-green-600">95</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-040</td><td>Free Trial</td><td class="font-mono text-xs text-green-600">220</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-041</td><td>Demo Request</td><td class="font-mono text-xs text-green-600">340</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-042</td><td>Consultation</td><td class="font-mono text-xs text-green-600">65</td><td class="font-mono text-xs">—</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-043</td><td>Product Launch</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">85</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-044</td><td>Holiday Promo</td><td class="font-mono text-xs">—</td><td class="font-mono text-xs text-red-600">42</td></tr>
|
||||
<tr><td class="font-mono text-xs">S-045</td><td>Survey Response</td><td class="font-mono text-xs text-green-600">620</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 Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</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 Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</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>Contract</th><th>Client</th><th>Amount</th><th>Due Date</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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">CT-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>
|
||||
<tr><td class="font-mono text-xs">CT-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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">CT-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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">CT-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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">CT-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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">CT-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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">CT-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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">CT-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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">CT-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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">CT-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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">CT-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">CT-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-tms.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,445 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardTms2";
|
||||
ViewData["SidebarVariant"] = "2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style2.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">TMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Talent Management System — Period: Q2 2026</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-blue-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: #3b82f6;"><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">TMS Activity</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">+245</span><p class="text-gray-400">Calls</p></div>
|
||||
<div><span class="font-bold text-green-600">+450</span><p class="text-gray-400">Emails</p></div>
|
||||
<div><span class="font-bold text-green-600">+89</span><p class="text-gray-400">Meetings</p></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">$2.46M</p><span class="kpi-delta">▲ +15.3%</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">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">▲ +22.1%</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">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">▲ +2.1pp</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">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">▲ +9.3%</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">Avg Deal Size</p><p class="kpi-value">$14.3K</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" 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">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">▲ +12.4%</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">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.4pp</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">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">▲ +8.7%</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">TMS 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-blue-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 Revenue</p><p class="mm-sub">$2.46M ▲ 15.3%</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">Pipeline Value</p><p class="mm-sub">$4.83M ▲ 22.1%</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">Win Rate</p><p class="mm-sub">34.2% ▲ 2.1pp</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">Customers</p><p class="mm-sub">1,847 ▲ 9.3%</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">Avg Deal Size</p><p class="mm-sub">$14.3K ▲ 5.8%</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">CLV</p><p class="mm-sub">$48.6K ▲ 12.4%</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">Churn Rate</p><p class="mm-sub">2.1% ▼ 0.4pp</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">MRR</p><p class="mm-sub">$128K ▲ 8.7%</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">Leads</p><p class="mm-sub">2,450 ▲ 18%</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">Deals</p><p class="mm-sub">640 ▲ 12%</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">Conversion</p><p class="mm-sub">4.7% ▲ 0.8%</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">CSAT</p><p class="mm-sub">4.2 ▲ 0.3</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">Contacts</p><p class="mm-sub">3,250 ▲ 14%</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">NPS Score</p><p class="mm-sub">72 ▲ 5pts</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 Cycle</p><p class="mm-sub">62 days ▼ 3d</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">Response Time</p><p class="mm-sub">2.4hrs ▼ 0.3</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">SLA</p><p class="mm-sub">94.2% ▲ 2.1%</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">Email Open</p><p class="mm-sub">24.5% ▲ 2.3%</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">Campaigns</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">Enterprise</p><p class="mm-sub">35% rev share</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">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</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> Target</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Lead Sources</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> Website <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> Referral <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> Social <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> Email <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> Others <span class="font-semibold ml-auto">9%</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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</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">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</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">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</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">Avg Deal Size</p><p class="text-sm font-bold text-blue-700">$14.3K</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 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">Deal Stages</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Pipeline by stage</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">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</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">Qualified</p><p class="text-sm font-bold text-amber-600">640</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">Negotiation</p><p class="text-sm font-bold text-red-600">156</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">Closed Won</p><p class="text-sm font-bold text-blue-700">89</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</b></span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">TMS 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-blue-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">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">▲ +15.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">▲ +22.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-red-500 font-semibold">▲ +9.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">▲ +2.1pp</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>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></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">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</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">TMS Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">Conversion Metrics</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">Leads→MQL</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">MQL→SQL</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">SQL→Won</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">Overall CVR</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>Target CVR: <b class="text-green-600">5%</b></span><span class="text-blue-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">Top Performers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K 48%</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">James C.</p><p class="text-sm font-bold text-amber-600">$385K 42%</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">Alex L.</p><p class="text-sm font-bold text-blue-700">$312K 38%</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">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K 35%</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</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">Support Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Customer service KPIs</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">Open Tickets</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">Avg Response</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">CSAT Score</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Resolution Time</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</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">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top sources</p></div>
|
||||
<span class="text-xs text-blue-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>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</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 Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</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 Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</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>Contract</th><th>Client</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-tms.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,449 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardTms3";
|
||||
ViewData["SidebarVariant"] = "3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style3.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">TMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Talent Management System — Period: Q2 2026</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">TMS Activity</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">+245</span><p class="text-gray-400">Calls</p></div>
|
||||
<div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
|
||||
<div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</p></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">$2.46M</p><span class="kpi-delta">▲ +15.3%</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">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">▲ +22.1%</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">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">▲ +2.1pp</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">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">▲ +9.3%</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">Avg Deal Size</p><p class="kpi-value">$14.3K</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" 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">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">▲ +12.4%</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">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.4pp</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">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">▲ +8.7%</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">TMS 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 Revenue</p><p class="mm-sub">$2.46M ▲ 15.3%</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">Pipeline Value</p><p class="mm-sub">$4.83M ▲ 22.1%</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">Win Rate</p><p class="mm-sub">34.2% ▲ 2.1pp</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">Customers</p><p class="mm-sub">1,847 ▲ 9.3%</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">Avg Deal Size</p><p class="mm-sub">$14.3K ▲ 5.8%</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">CLV</p><p class="mm-sub">$48.6K ▲ 12.4%</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">Churn Rate</p><p class="mm-sub">2.1% ▼ 0.4pp</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">MRR</p><p class="mm-sub">$128K ▲ 8.7%</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">Leads</p><p class="mm-sub">2,450 ▲ 18%</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">Deals</p><p class="mm-sub">640 ▲ 12%</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">Conversion</p><p class="mm-sub">4.7% ▲ 0.8%</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">CSAT</p><p class="mm-sub">4.2 ▲ 0.3</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">Contacts</p><p class="mm-sub">3,250 ▲ 14%</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">NPS Score</p><p class="mm-sub">72 ▲ 5pts</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 Cycle</p><p class="mm-sub">62 days ▼ 3d</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">Response Time</p><p class="mm-sub">2.4hrs ▼ 0.3</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">SLA</p><p class="mm-sub">94.2% ▲ 2.1%</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">Email Open</p><p class="mm-sub">24.5% ▲ 2.3%</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">Campaigns</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">Enterprise</p><p class="mm-sub">35% rev share</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">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</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> Target</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Lead Sources</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> Website <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> Referral <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> Social <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> Email <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> Others <span class="font-semibold ml-auto">9%</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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</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">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</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">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</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">Avg Deal Size</p><p class="text-sm font-bold text-indigo-700">$14.3K</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 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">Deal Stages</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Pipeline by stage</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">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</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">Qualified</p><p class="text-sm font-bold text-amber-600">640</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">Negotiation</p><p class="text-sm font-bold text-red-600">156</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">Closed Won</p><p class="text-sm font-bold text-indigo-700">89</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</b></span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">TMS 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">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">▲ +15.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">▲ +22.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">▲ +9.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">▲ +2.1pp</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>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></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">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</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">TMS Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales 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">Conversion Metrics</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">Leads→MQL</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">2,450 / 1,840</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:75%;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">MQL→SQL</p>
|
||||
<span class="text-[11px] font-semibold">640 / 1,840</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:35%;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">SQL→Won</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">89 / 640</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:14%;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">Overall CVR</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">4.7%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:4.7%;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>Target CVR: <b class="text-green-600">5%</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">Top Performers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">48%</span>
|
||||
</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">James C.</p><p class="text-sm font-bold text-amber-600">$385K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">42%</span>
|
||||
</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">Alex L.</p><p class="text-sm font-bold text-indigo-700">$312K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">38%</span>
|
||||
</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">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">35%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</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">Support Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Customer service KPIs</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">Open Tickets</p><p class="text-[10px] text-gray-400">Total pending</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">Avg Response</p><p class="text-[10px] text-gray-400">First reply time</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">CSAT Score</p><p class="text-[10px] text-gray-400">Customer satisfaction</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Resolution Time</p><p class="text-[10px] text-gray-400">Avg close time</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</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">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top sources</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>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</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 Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</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 Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</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>Contract</th><th>Client</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-tms.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,449 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardTms4";
|
||||
ViewData["SidebarVariant"] = "4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style4.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">TMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Talent Management System — Period: Q2 2026</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">TMS Activity</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">+245</span><p class="text-gray-400">Calls</p></div>
|
||||
<div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
|
||||
<div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</p></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">$2.46M</p><span class="kpi-delta">▲ +15.3%</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">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">▲ +22.1%</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">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">▲ +2.1pp</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">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">▲ +9.3%</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">Avg Deal Size</p><p class="kpi-value">$14.3K</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" 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">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">▲ +12.4%</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">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.4pp</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">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">▲ +8.7%</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">TMS 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 Revenue</p><p class="mm-sub">$2.46M ▲ 15.3%</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">Pipeline Value</p><p class="mm-sub">$4.83M ▲ 22.1%</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">Win Rate</p><p class="mm-sub">34.2% ▲ 2.1pp</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">Customers</p><p class="mm-sub">1,847 ▲ 9.3%</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">Avg Deal Size</p><p class="mm-sub">$14.3K ▲ 5.8%</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">CLV</p><p class="mm-sub">$48.6K ▲ 12.4%</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">Churn Rate</p><p class="mm-sub">2.1% ▼ 0.4pp</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">MRR</p><p class="mm-sub">$128K ▲ 8.7%</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">Leads</p><p class="mm-sub">2,450 ▲ 18%</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">Deals</p><p class="mm-sub">640 ▲ 12%</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">Conversion</p><p class="mm-sub">4.7% ▲ 0.8%</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">CSAT</p><p class="mm-sub">4.2 ▲ 0.3</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">Contacts</p><p class="mm-sub">3,250 ▲ 14%</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">NPS Score</p><p class="mm-sub">72 ▲ 5pts</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 Cycle</p><p class="mm-sub">62 days ▼ 3d</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">Response Time</p><p class="mm-sub">2.4hrs ▼ 0.3</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">SLA</p><p class="mm-sub">94.2% ▲ 2.1%</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">Email Open</p><p class="mm-sub">24.5% ▲ 2.3%</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">Campaigns</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">Enterprise</p><p class="mm-sub">35% rev share</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">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</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> Target</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Lead Sources</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> Website <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> Referral <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> Social <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> Email <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> Others <span class="font-semibold ml-auto">9%</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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</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">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</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">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</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">Avg Deal Size</p><p class="text-sm font-bold text-indigo-700">$14.3K</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 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">Deal Stages</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Pipeline by stage</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">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</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">Qualified</p><p class="text-sm font-bold text-amber-600">640</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">Negotiation</p><p class="text-sm font-bold text-red-600">156</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">Closed Won</p><p class="text-sm font-bold text-indigo-700">89</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</b></span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">TMS 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">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">▲ +15.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">▲ +22.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">▲ +9.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">▲ +2.1pp</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>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></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">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</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">TMS Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales 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">Conversion Metrics</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">Leads→MQL</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">2,450 / 1,840</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:75%;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">MQL→SQL</p>
|
||||
<span class="text-[11px] font-semibold">640 / 1,840</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:35%;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">SQL→Won</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">89 / 640</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:14%;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">Overall CVR</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">4.7%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:4.7%;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>Target CVR: <b class="text-green-600">5%</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">Top Performers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">48%</span>
|
||||
</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">James C.</p><p class="text-sm font-bold text-amber-600">$385K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">42%</span>
|
||||
</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">Alex L.</p><p class="text-sm font-bold text-indigo-700">$312K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">38%</span>
|
||||
</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">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">35%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</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">Support Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Customer service KPIs</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">Open Tickets</p><p class="text-[10px] text-gray-400">Total pending</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">Avg Response</p><p class="text-[10px] text-gray-400">First reply time</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">CSAT Score</p><p class="text-[10px] text-gray-400">Customer satisfaction</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Resolution Time</p><p class="text-[10px] text-gray-400">Avg close time</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</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">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top sources</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>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</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 Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</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 Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</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>Contract</th><th>Client</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-tms.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,449 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardTms5";
|
||||
ViewData["SidebarVariant"] = "5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style5.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">TMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Talent Management System — Period: Q2 2026</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">TMS Activity</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">+245</span><p class="text-gray-400">Calls</p></div>
|
||||
<div><span class="font-bold text-red-600">+450</span><p class="text-gray-400">Emails</p></div>
|
||||
<div><span class="font-bold text-red-600">+89</span><p class="text-gray-400">Meetings</p></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">$2.46M</p><span class="kpi-delta">▲ +15.3%</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">Pipeline Value</p><p class="kpi-value">$4.83M</p><span class="kpi-delta">▲ +22.1%</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">Win Rate</p><p class="kpi-value">34.2%</p><span class="kpi-delta">▲ +2.1pp</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">Active Customers</p><p class="kpi-value">1,847</p><span class="kpi-delta">▲ +9.3%</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">Avg Deal Size</p><p class="kpi-value">$14.3K</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" 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">CLV</p><p class="kpi-value">$48.6K</p><span class="kpi-delta">▲ +12.4%</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">Churn Rate</p><p class="kpi-value">2.1%</p><span class="kpi-delta">▼ -0.4pp</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">MRR</p><p class="kpi-value">$128K</p><span class="kpi-delta">▲ +8.7%</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">TMS 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 Revenue</p><p class="mm-sub">$2.46M ▲ 15.3%</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">Pipeline Value</p><p class="mm-sub">$4.83M ▲ 22.1%</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">Win Rate</p><p class="mm-sub">34.2% ▲ 2.1pp</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">Customers</p><p class="mm-sub">1,847 ▲ 9.3%</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">Avg Deal Size</p><p class="mm-sub">$14.3K ▲ 5.8%</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">CLV</p><p class="mm-sub">$48.6K ▲ 12.4%</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">Churn Rate</p><p class="mm-sub">2.1% ▼ 0.4pp</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">MRR</p><p class="mm-sub">$128K ▲ 8.7%</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">Leads</p><p class="mm-sub">2,450 ▲ 18%</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">Deals</p><p class="mm-sub">640 ▲ 12%</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">Conversion</p><p class="mm-sub">4.7% ▲ 0.8%</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">CSAT</p><p class="mm-sub">4.2 ▲ 0.3</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">Contacts</p><p class="mm-sub">3,250 ▲ 14%</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">NPS Score</p><p class="mm-sub">72 ▲ 5pts</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 Cycle</p><p class="mm-sub">62 days ▼ 3d</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">Response Time</p><p class="mm-sub">2.4hrs ▼ 0.3</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">SLA</p><p class="mm-sub">94.2% ▲ 2.1%</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">Email Open</p><p class="mm-sub">24.5% ▲ 2.3%</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">Campaigns</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">Enterprise</p><p class="mm-sub">35% rev share</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">Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Monthly revenue vs target</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> Target</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">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Lead Sources</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> Website <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> Referral <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> Social <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> Email <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> Others <span class="font-semibold ml-auto">9%</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-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Pipeline Summary</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">Total Pipeline</p><p class="text-sm font-bold text-gray-900">$4.83M</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">Closed Won</p><p class="text-sm font-bold text-gray-900">$1.35M</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">Avg Deal Size</p><p class="text-sm font-bold text-indigo-700">$14.3K</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Win Rate</span><span class="font-semibold text-gray-900">34.2%</span><span>Cycle</span><span class="font-semibold text-gray-900">62 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">Deal Stages</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Pipeline by stage</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">Prospecting</p><p class="text-sm font-bold text-green-700">1,225</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">Qualified</p><p class="text-sm font-bold text-amber-600">640</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">Negotiation</p><p class="text-sm font-bold text-red-600">156</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">Closed Won</p><p class="text-sm font-bold text-indigo-700">89</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>CVR: <b>4.7%</b></span><span>Velocity: <b>$78K/day</b></span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-5">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">TMS 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">$2.46M</p><span class="text-[10px] text-green-600 font-semibold">▲ +15.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Pipeline Value</p><p class="text-lg font-bold text-gray-900">$4.83M</p><span class="text-[10px] text-green-600 font-semibold">▲ +22.1%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Customers</p><p class="text-lg font-bold text-gray-900">1,847</p><span class="text-[10px] text-green-600 font-semibold">▲ +9.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Win Rate</p><p class="text-lg font-bold text-gray-900">34.2%</p><span class="text-[10px] text-green-600 font-semibold">▲ +2.1pp</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>MRR: <b class="text-gray-700">$128K</b></span><span class="kpi-badge" style="background:#eef2ff;color:#4f46e5;">Q2 2026</span></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">Recent Deals</h3><p class="text-xs text-gray-400 mt-0.5">Latest opportunities</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New Deal →</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>Deal#</th><th>Description</th><th>Value</th><th>Stage</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 deals</b></span><span>Total pipeline: <b>$4.83M</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">TMS Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time sales 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">Conversion Metrics</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">Leads→MQL</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">2,450 / 1,840</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:75%;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">MQL→SQL</p>
|
||||
<span class="text-[11px] font-semibold">640 / 1,840</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:35%;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">SQL→Won</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">89 / 640</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:14%;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">Overall CVR</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">4.7%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:4.7%;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>Target CVR: <b class="text-green-600">5%</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">Top Performers</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This quarter ranking</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">Sarah M.</p><p class="text-sm font-bold text-gray-900">$420K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">48%</span>
|
||||
</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">James C.</p><p class="text-sm font-bold text-amber-600">$385K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">42%</span>
|
||||
</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">Alex L.</p><p class="text-sm font-bold text-indigo-700">$312K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">38%</span>
|
||||
</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">Emma P.</p><p class="text-sm font-bold text-gray-900">$278K</p></div>
|
||||
<span class="text-xs font-semibold text-green-600">35%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top Deals: <b>28</b></span><span>Avg Win: <b>39%</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">Support Metrics</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Customer service KPIs</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">Open Tickets</p><p class="text-[10px] text-gray-400">Total pending</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">Avg Response</p><p class="text-[10px] text-gray-400">First reply time</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">CSAT Score</p><p class="text-[10px] text-gray-400">Customer satisfaction</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Resolution Time</p><p class="text-[10px] text-gray-400">Avg close time</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</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">Lead Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top sources</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>Source Code</th><th>Source Name</th><th>Leads</th><th>Conversion</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 Leads: <span class="text-green-600">4,981</span></span><span>Avg CVR: <span class="text-red-600">4.7%</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 Renewals</h3><p class="text-xs text-gray-400 mt-0.5">Contracts due next 14 days</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage Renewals →</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>Contract</th><th>Client</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Renewals: <b class="text-gray-900">$93,500</b></span><span>At Risk: <b class="text-red-500">$32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-tms.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,411 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardWms1";
|
||||
ViewData["SidebarVariant"] = "1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style1.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">WMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Warehouse Management System — Period: Q2 2026</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-blue-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: #3b82f6;"><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-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 Items</p><p class="kpi-value">84,500</p><span class="kpi-delta">▲ +5.3%</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">Stock Value</p><p class="kpi-value">$12.6M</p><span class="kpi-delta">▲ +8.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="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">Locations</p><p class="kpi-value">42</p><span class="kpi-delta">▲ +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="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">Open TO</p><p class="kpi-value">18</p><span class="kpi-delta">▲ +6</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-1 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">Receiving Rate</p><p class="kpi-value">2.4d</p><span class="kpi-delta">▲ +0.3d</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">Picking Acc.</p><p class="kpi-value">99.2%</p><span class="kpi-delta">▲ +0.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="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">Throughput</p><p class="kpi-value">12,450</p><span class="kpi-delta">▲ +8.3%</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">Dock Turn</p><p class="kpi-value">4.2x</p><span class="kpi-delta">▲ +0.3x</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 class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900 mb-1">Storage Breakdown</h3><p class="text-xs text-gray-400">By category this period</p></div>
|
||||
</div>
|
||||
<div class="flex justify-center"><div class="chart-container" style="height:200px;width:200px;"><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> Racking <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> Bulk <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> Overflow <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> Cold <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> Others <span class="font-semibold ml-auto">9%</span></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">WMS 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-blue-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 Items</p><p class="mm-sub">84,500 ▲ 5.3%</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">Stock Value</p><p class="mm-sub">$12.6M ▲ 8.2%</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">Locations</p><p class="mm-sub">42 ▲ 2</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">Open TO</p><p class="mm-sub">18 ▲ 6</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">Receiving Rate</p><p class="mm-sub">2.4d ▲ 0.3d</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">Picking Acc.</p><p class="mm-sub">99.2% ▲ 0.5%</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">Throughput</p><p class="mm-sub">12,450 ▲ 8.3%</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">Dock Turn</p><p class="mm-sub">4.2x ▲ 0.3x</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">TO Completed</p><p class="mm-sub">245 ▲ 12%</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">GR Processed</p><p class="mm-sub">186 ▲ 8%</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">DO Shipped</p><p class="mm-sub">158 ▲ 14%</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">Stock Check</p><p class="mm-sub">100% ✓</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">Warehouse Staff</p><p class="mm-sub">28 ▲ 2</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">Fill Rate</p><p class="mm-sub">97.3% ▲ 1.5%</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">Stockout Rate</p><p class="mm-sub">2.1% ▼ 0.6%</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">GR Time</p><p class="mm-sub">3.2hrs ▼ 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">Damage Rate</p><p class="mm-sub">0.8% ▼ 0.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">Storage Cost</p><p class="mm-sub">$0.42/unit ▼ $0.05</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">ABC Class A</p><p class="mm-sub">3,450 items</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">Warehouse Zone</p><p class="mm-sub">12</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="lg:col-span-1 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">Movement Trend</h3><p class="text-xs text-gray-400 mt-0.5">Daily in/out movements</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> Outgoing</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
|
||||
</div>
|
||||
<div class="lg:col-span-1 bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Warehouse 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-blue-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 Items Stored</p><p class="text-lg font-bold text-gray-900">84,500</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Stock Value</p><p class="text-lg font-bold text-gray-900">$12.6M</p><span class="text-[10px] text-green-600 font-semibold">▲ +8.2%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Locations</p><p class="text-lg font-bold text-gray-900">42</p><span class="text-[10px] text-green-600 font-semibold">▲ +2</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open TO</p><p class="text-lg font-bold text-gray-900">18</p><span class="text-[10px] text-green-600 font-semibold">▲ +6</span></div>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>Accuracy: <b class="text-gray-700">98.7%</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">Stock Summary</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">Total Stock</p><p class="text-sm font-bold text-gray-900">84,500 units</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">Location Used</p><p class="text-sm font-bold text-gray-900">38</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">Avg Item Value</p><p class="text-sm font-bold text-blue-700">$149</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Turnover</span><span class="font-semibold text-gray-900">6.2x</span><span>Accuracy</span><span class="font-semibold text-gray-900">98.7%</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">TO Status</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Transfer Order by status</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">Draft</p><p class="text-sm font-bold text-green-700">8</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">Processing</p><p class="text-sm font-bold text-amber-600">6</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">Completed</p><p class="text-sm font-bold text-red-600">22</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">Cancelled</p><p class="text-sm font-bold text-blue-700">3</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>2.4d</b></span><span>On Time: <b>92%</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">Receiving Activity</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">+450</span><p class="text-gray-400">GR</p></div>
|
||||
<div><span class="font-bold text-red-600">320</span><p class="text-gray-400">DO</p></div>
|
||||
<div><span class="font-bold text-red-600">180</span><p class="text-gray-400">Adjustment</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">Recent Transfer Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest warehouse movements</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New TO →’</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>TO#</th><th>Description</th><th>Items</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 TO</b></span><span>Total movements: <b>589</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">WMS Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time warehouse updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">Stock Accuracy</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">Zone A</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">Zone B</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">Zone C</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">Overall</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>Target Acc: <b class="text-green-600">99%</b></span><span class="text-blue-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">Top Products</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This period ranking</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">Widget A</p><p class="text-sm font-bold text-gray-900">12,450</p><span class="text-[10px] text-green-600">+15%</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="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg></div>
|
||||
<div class="flex-1"><p class="text-xs text-gray-500">Gadget B</p><p class="text-sm font-bold text-amber-600">8,320</p><span class="text-[10px] text-green-600">+12%</span></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">Part C</p><p class="text-sm font-bold text-blue-700">6,180</p><span class="text-[10px] text-green-600">+8%</span></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">Tool D</p><p class="text-sm font-bold text-gray-900">4,250</p><span class="text-[10px] text-green-600">+5%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top SKU: <b>28</b></span><span>Mov: <b>589</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">Quality Control</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">QC & inspection KPIs</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">Pass Rate</p><p class="text-[10px] text-gray-400">Monthly employee tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">Damage</p><p class="text-[10px] text-gray-400">Monthly VAT return</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">Reject</p><p class="text-[10px] text-gray-400">Corporate income tax</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">On Hold / Return Rate</p><p class="text-[10px] text-gray-400">Corporate tax return</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</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">Locations Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top zones</p></div>
|
||||
<span class="text-xs text-blue-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>Zone Code</th><th>Zone Name</th><th>Item Count</th><th>Capacity</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">Z-RA</td><td>Racking A</td><td class="font-mono text-xs text-green-600">12,450</td><td class="font-mono text-xs">18,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-RB</td><td>Racking B</td><td class="font-mono text-xs text-green-600">8,320</td><td class="font-mono text-xs">12,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-BL</td><td>Bulk Storage</td><td class="font-mono text-xs text-green-600">24,600</td><td class="font-mono text-xs">30,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-OV</td><td>Overflow Area</td><td class="font-mono text-xs text-green-600">6,180</td><td class="font-mono text-xs">10,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-CD</td><td>Cold Storage</td><td class="font-mono text-xs">4,250</td><td class="font-mono text-xs">8,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-DG</td><td>Dangerous Goods</td><td class="font-mono text-xs text-green-600">890</td><td class="font-mono text-xs">2,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-QC</td><td>QC Hold Area</td><td class="font-mono text-xs text-amber-600">1,240</td><td class="font-mono text-xs">3,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-CR</td><td>Cross Dock</td><td class="font-mono text-xs text-green-600">5,670</td><td class="font-mono text-xs">7,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-RT</td><td>Return Area</td><td class="font-mono text-xs text-amber-600">620</td><td class="font-mono text-xs">2,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-ST</td><td>Staging Area</td><td class="font-mono text-xs text-green-600">3,450</td><td class="font-mono text-xs">5,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-PK</td><td>Packing Zone</td><td class="font-mono text-xs text-green-600">9,800</td><td class="font-mono text-xs">12,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-SH</td><td>Shipping Dock</td><td class="font-mono text-xs text-green-600">7,030</td><td class="font-mono text-xs">11,000</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 Items: <span class="text-green-600">84,500</span></span><span>Total Cap: <span class="text-red-600">120,000</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 Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">DO scheduled next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage DO →’</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>DO#</th><th>Customer</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Items: <b class="text-gray-900">93,500</b></span><span>Urgent: <b class="text-red-500">32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-wms.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,411 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardWms2";
|
||||
ViewData["SidebarVariant"] = "2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style2.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">WMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Warehouse Management System — Period: Q2 2026</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-blue-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: #3b82f6;"><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-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 Items</p><p class="kpi-value">84,500</p><span class="kpi-delta">▲ +5.3%</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">Stock Value</p><p class="kpi-value">$12.6M</p><span class="kpi-delta">▲ +8.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="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">Locations</p><p class="kpi-value">42</p><span class="kpi-delta">▲ +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="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">Open TO</p><p class="kpi-value">18</p><span class="kpi-delta">▲ +6</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-1 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">Receiving Rate</p><p class="kpi-value">2.4d</p><span class="kpi-delta">▲ +0.3d</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">Picking Acc.</p><p class="kpi-value">99.2%</p><span class="kpi-delta">▲ +0.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="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">Throughput</p><p class="kpi-value">12,450</p><span class="kpi-delta">▲ +8.3%</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">Dock Turn</p><p class="kpi-value">4.2x</p><span class="kpi-delta">▲ +0.3x</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 class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900 mb-1">Storage Breakdown</h3><p class="text-xs text-gray-400">By category this period</p></div>
|
||||
</div>
|
||||
<div class="flex justify-center"><div class="chart-container" style="height:200px;width:200px;"><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> Racking <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> Bulk <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> Overflow <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> Cold <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> Others <span class="font-semibold ml-auto">9%</span></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">WMS 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-blue-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 Items</p><p class="mm-sub">84,500 ▲ 5.3%</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">Stock Value</p><p class="mm-sub">$12.6M ▲ 8.2%</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">Locations</p><p class="mm-sub">42 ▲ 2</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">Open TO</p><p class="mm-sub">18 ▲ 6</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">Receiving Rate</p><p class="mm-sub">2.4d ▲ 0.3d</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">Picking Acc.</p><p class="mm-sub">99.2% ▲ 0.5%</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">Throughput</p><p class="mm-sub">12,450 ▲ 8.3%</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">Dock Turn</p><p class="mm-sub">4.2x ▲ 0.3x</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">TO Completed</p><p class="mm-sub">245 ▲ 12%</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">GR Processed</p><p class="mm-sub">186 ▲ 8%</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">DO Shipped</p><p class="mm-sub">158 ▲ 14%</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">Stock Check</p><p class="mm-sub">100% ✓</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">Warehouse Staff</p><p class="mm-sub">28 ▲ 2</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">Fill Rate</p><p class="mm-sub">97.3% ▲ 1.5%</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">Stockout Rate</p><p class="mm-sub">2.1% ▼ 0.6%</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">GR Time</p><p class="mm-sub">3.2hrs ▼ 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">Damage Rate</p><p class="mm-sub">0.8% ▼ 0.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">Storage Cost</p><p class="mm-sub">$0.42/unit ▼ $0.05</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">ABC Class A</p><p class="mm-sub">3,450 items</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">Warehouse Zone</p><p class="mm-sub">12</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="lg:col-span-1 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">Movement Trend</h3><p class="text-xs text-gray-400 mt-0.5">Daily in/out movements</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> Outgoing</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
|
||||
</div>
|
||||
<div class="lg:col-span-1 bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Warehouse 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-blue-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 Items Stored</p><p class="text-lg font-bold text-gray-900">84,500</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Stock Value</p><p class="text-lg font-bold text-gray-900">$12.6M</p><span class="text-[10px] text-green-600 font-semibold">▲ +8.2%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Locations</p><p class="text-lg font-bold text-gray-900">42</p><span class="text-[10px] text-green-600 font-semibold">▲ +2</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open TO</p><p class="text-lg font-bold text-gray-900">18</p><span class="text-[10px] text-green-600 font-semibold">▲ +6</span></div>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>Accuracy: <b class="text-gray-700">98.7%</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">Stock Summary</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">As of Q2 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">Total Stock</p><p class="text-sm font-bold text-gray-900">84,500 units</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">Location Used</p><p class="text-sm font-bold text-gray-900">38</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">Avg Item Value</p><p class="text-sm font-bold text-blue-700">$149</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Turnover</span><span class="font-semibold text-gray-900">6.2x</span><span>Accuracy</span><span class="font-semibold text-gray-900">98.7%</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">TO Status</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Transfer Order by status</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">Draft</p><p class="text-sm font-bold text-green-700">8</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">Processing</p><p class="text-sm font-bold text-amber-600">6</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">Completed</p><p class="text-sm font-bold text-red-600">22</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">Cancelled</p><p class="text-sm font-bold text-blue-700">3</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>2.4d</b></span><span>On Time: <b>92%</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">Receiving Activity</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">+450</span><p class="text-gray-400">GR</p></div>
|
||||
<div><span class="font-bold text-red-600">320</span><p class="text-gray-400">DO</p></div>
|
||||
<div><span class="font-bold text-red-600">180</span><p class="text-gray-400">Adjustment</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">Recent Transfer Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest warehouse movements</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New TO →’</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>TO#</th><th>Description</th><th>Items</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">TO-2026-0421</td><td>Monthly inbound receiving</td><td class="font-mono text-xs">284</td><td class="font-mono text-xs">284</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">TO-2026-0420</td><td>Stock transfer - Zone A</td><td class="font-mono text-xs">42</td><td class="font-mono text-xs">42</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">TO-2026-0419</td><td>Bulk replenishment</td><td class="font-mono text-xs">186</td><td class="font-mono text-xs">186</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">TO-2026-0418</td><td>DO picking preparation</td><td class="font-mono text-xs">38</td><td class="font-mono text-xs">38</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 TO</b></span><span>Total movements: <b>589</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">WMS Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time warehouse updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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">GR</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>GR Received</b> — GR-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">📦 24,500 units · Vendor: TechDistrib</p><p class="text-xs text-gray-400">12 min ago</p></div>
|
||||
<span class="chip chip-green self-start">Complete</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">DO</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>DO Shipped</b> — Customer: MegaCorp</p><p class="text-xs text-gray-400 mt-0.5">🚚 86,200 units · DO-2026-0741</p><p class="text-xs text-gray-400">35 min ago</p></div>
|
||||
<span class="chip chip-green self-start">Shipped</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">TO</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>TO Completed</b> — Transfer Zone A→’B</p><p class="text-xs text-gray-400 mt-0.5">📋 42,800 units · Batch transfer</p><p class="text-xs text-gray-400">1 hour ago</p></div>
|
||||
<span class="chip chip-indigo self-start">Done</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">QC</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>QC Check</b> — Inspection batch #2106</p><p class="text-xs text-gray-400 mt-0.5">🔍 38,400 units · Pass rate 99.2%</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">Stock Accuracy</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">Zone A</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">99.2% / 99.0%</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">Zone B</p>
|
||||
<span class="text-[11px] font-semibold">97.5% / 98.0%</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">Zone C</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">98.6% / 97.0%</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">Overall</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">98.7% / 98.0%</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>Target Acc: <b class="text-green-600">99%</b></span><span class="text-blue-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">Top Products</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This period ranking</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">Widget A</p><p class="text-sm font-bold text-gray-900">12,450 <span class="text-[10px] text-green-600">+15%</span></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">Gadget B</p><p class="text-sm font-bold text-amber-600">8,320 <span class="text-[10px] text-green-600">+12%</span></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">Part C</p><p class="text-sm font-bold text-blue-700">6,180 <span class="text-[10px] text-green-600">+8%</span></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">Tool D</p><p class="text-sm font-bold text-gray-900">4,250 <span class="text-[10px] text-green-600">+5%</span></p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top SKU: <b>28</b></span><span>Mov: <b>589</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">Quality Control</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">QC & inspection KPIs</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">Pass Rate</p><p class="text-[10px] text-gray-400">Quality inspection pass</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">99.2%</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">Damage</p><p class="text-[10px] text-gray-400">Damaged items rate</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">0.8%</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">Reject</p><p class="text-[10px] text-gray-400">Rejected items</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">0.5%</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">On Hold</p><p class="text-[10px] text-gray-400">On hold for inspection</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">1.2%</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">Locations Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top zones</p></div>
|
||||
<span class="text-xs text-blue-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>Zone Code</th><th>Zone Name</th><th>Item Count</th><th>Capacity</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">Z-RA</td><td>Racking A</td><td class="font-mono text-xs text-green-600">12,450</td><td class="font-mono text-xs">18,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-RB</td><td>Racking B</td><td class="font-mono text-xs text-green-600">8,320</td><td class="font-mono text-xs">12,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-BL</td><td>Bulk Storage</td><td class="font-mono text-xs text-green-600">24,600</td><td class="font-mono text-xs">30,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-OV</td><td>Overflow Area</td><td class="font-mono text-xs text-green-600">6,180</td><td class="font-mono text-xs">10,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-CD</td><td>Cold Storage</td><td class="font-mono text-xs">4,250</td><td class="font-mono text-xs">8,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-DG</td><td>Dangerous Goods</td><td class="font-mono text-xs text-green-600">890</td><td class="font-mono text-xs">2,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-QC</td><td>QC Hold Area</td><td class="font-mono text-xs text-amber-600">1,240</td><td class="font-mono text-xs">3,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-CR</td><td>Cross Dock</td><td class="font-mono text-xs text-green-600">5,670</td><td class="font-mono text-xs">7,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-RT</td><td>Return Area</td><td class="font-mono text-xs text-amber-600">620</td><td class="font-mono text-xs">2,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-ST</td><td>Staging Area</td><td class="font-mono text-xs text-green-600">3,450</td><td class="font-mono text-xs">5,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-PK</td><td>Packing Zone</td><td class="font-mono text-xs text-green-600">9,800</td><td class="font-mono text-xs">12,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-SH</td><td>Shipping Dock</td><td class="font-mono text-xs text-green-600">7,030</td><td class="font-mono text-xs">11,000</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 Items: <span class="text-green-600">84,500</span></span><span>Total Cap: <span class="text-red-600">120,000</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 Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">DO scheduled next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage DO →’</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>DO#</th><th>Customer</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Items: <b class="text-gray-900">93,500</b></span><span>Urgent: <b class="text-red-500">32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-wms.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,411 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardWms3";
|
||||
ViewData["SidebarVariant"] = "3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style3.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">WMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Warehouse Management System — Period: Q2 2026</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-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 Items</p><p class="kpi-value">84,500</p><span class="kpi-delta">▲ +5.3%</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">Stock Value</p><p class="kpi-value">$12.6M</p><span class="kpi-delta">▲ +8.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="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">Locations</p><p class="kpi-value">42</p><span class="kpi-delta">▲ +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="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">Open TO</p><p class="kpi-value">18</p><span class="kpi-delta">▲ +6</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-1 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">Receiving Rate</p><p class="kpi-value">2.4d</p><span class="kpi-delta">▲ +0.3d</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">Picking Acc.</p><p class="kpi-value">99.2%</p><span class="kpi-delta">▲ +0.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="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">Throughput</p><p class="kpi-value">12,450</p><span class="kpi-delta">▲ +8.3%</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">Dock Turn</p><p class="kpi-value">4.2x</p><span class="kpi-delta">▲ +0.3x</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 class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900 mb-1">Storage Breakdown</h3><p class="text-xs text-gray-400">By category this period</p></div>
|
||||
</div>
|
||||
<div class="flex justify-center"><div class="chart-container" style="height:200px;width:200px;"><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> Racking <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> Bulk <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> Overflow <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> Cold <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> Others <span class="font-semibold ml-auto">9%</span></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">WMS 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 Items</p><p class="mm-sub">84,500 ▲ 5.3%</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">Stock Value</p><p class="mm-sub">$12.6M ▲ 8.2%</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">Locations</p><p class="mm-sub">42 ▲ 2</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">Open TO</p><p class="mm-sub">18 ▲ 6</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">Receiving Rate</p><p class="mm-sub">2.4d ▲ 0.3d</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">Picking Acc.</p><p class="mm-sub">99.2% ▲ 0.5%</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">Throughput</p><p class="mm-sub">12,450 ▲ 8.3%</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">Dock Turn</p><p class="mm-sub">4.2x ▲ 0.3x</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">TO Completed</p><p class="mm-sub">245 ▲ 12%</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">GR Processed</p><p class="mm-sub">186 ▲ 8%</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">DO Shipped</p><p class="mm-sub">158 ▲ 14%</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">Stock Check</p><p class="mm-sub">100% ✓</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">Warehouse Staff</p><p class="mm-sub">28 ▲ 2</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">Fill Rate</p><p class="mm-sub">97.3% ▲ 1.5%</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">Stockout Rate</p><p class="mm-sub">2.1% ▼ 0.6%</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">GR Time</p><p class="mm-sub">3.2hrs ▼ 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">Damage Rate</p><p class="mm-sub">0.8% ▼ 0.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">Storage Cost</p><p class="mm-sub">$0.42/unit ▼ $0.05</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">ABC Class A</p><p class="mm-sub">3,450 items</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">Warehouse Zone</p><p class="mm-sub">12</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="lg:col-span-1 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">Movement Trend</h3><p class="text-xs text-gray-400 mt-0.5">Daily in/out movements</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> Outgoing</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
|
||||
</div>
|
||||
<div class="lg:col-span-1 bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Warehouse 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-blue-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 Items Stored</p><p class="text-lg font-bold text-gray-900">84,500</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Stock Value</p><p class="text-lg font-bold text-gray-900">$12.6M</p><span class="text-[10px] text-green-600 font-semibold">▲ +8.2%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Locations</p><p class="text-lg font-bold text-gray-900">42</p><span class="text-[10px] text-green-600 font-semibold">▲ +2</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open TO</p><p class="text-lg font-bold text-gray-900">18</p><span class="text-[10px] text-green-600 font-semibold">▲ +6</span></div>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>Accuracy: <b class="text-gray-700">98.7%</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">Stock Summary</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">As of Q2 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">Total Stock</p><p class="text-sm font-bold text-gray-900">84,500 units</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">Location Used</p><p class="text-sm font-bold text-gray-900">38</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">Avg Item Value</p><p class="text-sm font-bold text-indigo-700">$149</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Turnover</span><span class="font-semibold text-gray-900">6.2x</span><span>Accuracy</span><span class="font-semibold text-gray-900">98.7%</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">TO Status</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Transfer Order by status</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">Draft</p><p class="text-sm font-bold text-green-700">8</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">Processing</p><p class="text-sm font-bold text-amber-600">6</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">Completed</p><p class="text-sm font-bold text-red-600">22</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">Cancelled</p><p class="text-sm font-bold text-indigo-700">3</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>2.4d</b></span><span>On Time: <b>92%</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">Receiving Activity</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">+450</span><p class="text-gray-400">GR</p></div>
|
||||
<div><span class="font-bold text-red-600">320</span><p class="text-gray-400">DO</p></div>
|
||||
<div><span class="font-bold text-red-600">180</span><p class="text-gray-400">Adjustment</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">Recent Transfer Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest warehouse movements</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New TO →’</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>TO#</th><th>Description</th><th>Items</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 TO</b></span><span>Total movements: <b>589</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">WMS Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time warehouse 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">Stock Accuracy</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">Zone A</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">Zone B</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">Zone C</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">Overall</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>Target Acc: <b class="text-green-600">99%</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">Top Products</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This period ranking</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">Widget A</p><p class="text-sm font-bold text-gray-900">12,450 <span class="text-green-600 text-[10px]">+15%</span></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">Gadget B</p><p class="text-sm font-bold text-amber-600">8,320 <span class="text-green-600 text-[10px]">+12%</span></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">Part C</p><p class="text-sm font-bold text-indigo-700">6,180 <span class="text-green-600 text-[10px]">+8%</span></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">Tool D</p><p class="text-sm font-bold text-gray-900">4,250 <span class="text-green-600 text-[10px]">+5%</span></p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top SKU: <b>28</b></span><span>Mov: <b>589</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">Quality Control</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">QC & inspection KPIs</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">Pass Rate</p><p class="text-[10px] text-gray-400">Inspection pass %</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">Jul 10</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">Damage</p><p class="text-[10px] text-gray-400">Damaged items</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">Jul 15</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">Reject</p><p class="text-[10px] text-gray-400">Rejected items</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">Jul 20</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">Return Rate</p><p class="text-[10px] text-gray-400">Customer returns</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">Apr 30</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">Locations Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top zones</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>Zone Code</th><th>Zone Name</th><th>Item Count</th><th>Capacity</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">Z-RA</td><td>Racking A</td><td class="font-mono text-xs text-green-600">12,450</td><td class="font-mono text-xs">18,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-RB</td><td>Racking B</td><td class="font-mono text-xs text-green-600">8,320</td><td class="font-mono text-xs">12,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-BL</td><td>Bulk Storage</td><td class="font-mono text-xs text-green-600">24,600</td><td class="font-mono text-xs">30,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-OV</td><td>Overflow Area</td><td class="font-mono text-xs text-green-600">6,180</td><td class="font-mono text-xs">10,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-CD</td><td>Cold Storage</td><td class="font-mono text-xs">4,250</td><td class="font-mono text-xs">8,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-DG</td><td>Dangerous Goods</td><td class="font-mono text-xs text-green-600">890</td><td class="font-mono text-xs">2,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-QC</td><td>QC Hold Area</td><td class="font-mono text-xs text-amber-600">1,240</td><td class="font-mono text-xs">3,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-CR</td><td>Cross Dock</td><td class="font-mono text-xs text-green-600">5,670</td><td class="font-mono text-xs">7,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-RT</td><td>Return Area</td><td class="font-mono text-xs text-amber-600">620</td><td class="font-mono text-xs">2,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-ST</td><td>Staging Area</td><td class="font-mono text-xs text-green-600">3,450</td><td class="font-mono text-xs">5,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-PK</td><td>Packing Zone</td><td class="font-mono text-xs text-green-600">9,800</td><td class="font-mono text-xs">12,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-SH</td><td>Shipping Dock</td><td class="font-mono text-xs text-green-600">7,030</td><td class="font-mono text-xs">11,000</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 Items: <span class="text-green-600">84,500</span></span><span>Total Cap: <span class="text-red-600">120,000</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 Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">DO scheduled next 14 days</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage DO →’</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>DO#</th><th>Customer</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Items: <b class="text-gray-900">93,500</b></span><span>Urgent: <b class="text-red-500">32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-wms.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,416 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardWms4";
|
||||
ViewData["SidebarVariant"] = "4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style4.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">WMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Warehouse Management System — Period: Q2 2026</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-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 Items</p><p class="kpi-value">84,500</p><span class="kpi-delta">▲ +5.3%</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">Stock Value</p><p class="kpi-value">$12.6M</p><span class="kpi-delta">▲ +8.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="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">Locations</p><p class="kpi-value">42</p><span class="kpi-delta">▲ +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="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">Open TO</p><p class="kpi-value">18</p><span class="kpi-delta">▲ +6</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-1 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">Receiving Rate</p><p class="kpi-value">2.4d</p><span class="kpi-delta">▲ +0.3d</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">Picking Acc.</p><p class="kpi-value">99.2%</p><span class="kpi-delta">▲ +0.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="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">Throughput</p><p class="kpi-value">12,450</p><span class="kpi-delta">▲ +8.3%</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">Dock Turn</p><p class="kpi-value">4.2x</p><span class="kpi-delta">▲ +0.3x</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 class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900 mb-1">Storage Breakdown</h3><p class="text-xs text-gray-400">By category this period</p></div>
|
||||
</div>
|
||||
<div class="flex justify-center"><div class="chart-container" style="height:200px;width:200px;"><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> Racking <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> Bulk <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> Overflow <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> Cold <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> Others <span class="font-semibold ml-auto">9%</span></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">WMS 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 Items</p><p class="mm-sub">84,500 ▲ 5.3%</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">Stock Value</p><p class="mm-sub">$12.6M ▲ 8.2%</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">Locations</p><p class="mm-sub">42 ▲ 2</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">Open TO</p><p class="mm-sub">18 ▲ 6</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">Receiving Rate</p><p class="mm-sub">2.4d ▲ 0.3d</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">Picking Acc.</p><p class="mm-sub">99.2% ▲ 0.5%</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">Throughput</p><p class="mm-sub">12,450 ▲ 8.3%</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">Dock Turn</p><p class="mm-sub">4.2x ▲ 0.3x</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">TO Completed</p><p class="mm-sub">245 ▲ 12%</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">GR Processed</p><p class="mm-sub">186 ▲ 8%</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">DO Shipped</p><p class="mm-sub">158 ▲ 14%</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">Stock Check</p><p class="mm-sub">100% ✓</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">Warehouse Staff</p><p class="mm-sub">28 ▲ 2</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">Fill Rate</p><p class="mm-sub">97.3% ▲ 1.5%</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">Stockout Rate</p><p class="mm-sub">2.1% ▼ 0.6%</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">GR Time</p><p class="mm-sub">3.2hrs ▼ 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">Damage Rate</p><p class="mm-sub">0.8% ▼ 0.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">Storage Cost</p><p class="mm-sub">$0.42/unit ▼ $0.05</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">ABC Class A</p><p class="mm-sub">3,450 items</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">Warehouse Zone</p><p class="mm-sub">12</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="lg:col-span-1 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">Movement Trend</h3><p class="text-xs text-gray-400 mt-0.5">Daily in/out movements</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> Outgoing</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
|
||||
</div>
|
||||
<div class="lg:col-span-1 bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Warehouse 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-blue-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 Items Stored</p><p class="text-lg font-bold text-gray-900">84,500</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Stock Value</p><p class="text-lg font-bold text-gray-900">$12.6M</p><span class="text-[10px] text-green-600 font-semibold">▲ +8.2%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Locations</p><p class="text-lg font-bold text-gray-900">42</p><span class="text-[10px] text-green-600 font-semibold">▲ +2</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open TO</p><p class="text-lg font-bold text-gray-900">18</p><span class="text-[10px] text-green-600 font-semibold">▲ +6</span></div>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>Accuracy: <b class="text-gray-700">98.7%</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">Stock Summary</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">As of Q2 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">Total Stock</p><p class="text-sm font-bold text-gray-900">84,500 units</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">Location Used</p><p class="text-sm font-bold text-gray-900">38</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">Avg Item Value</p><p class="text-sm font-bold text-indigo-700">$149</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Turnover</span><span class="font-semibold text-gray-900">6.2x</span><span>Accuracy</span><span class="font-semibold text-gray-900">98.7%</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">TO Status</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Transfer Order by status</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">Draft</p><p class="text-sm font-bold text-green-700">8</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">Processing</p><p class="text-sm font-bold text-amber-600">6</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">Completed</p><p class="text-sm font-bold text-red-600">22</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">Cancelled</p><p class="text-sm font-bold text-indigo-700">3</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>2.4d</b></span><span>On Time: <b>92%</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">Receiving Activity</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">+450</span><p class="text-gray-400">GR</p></div>
|
||||
<div><span class="font-bold text-red-600">320</span><p class="text-gray-400">DO</p></div>
|
||||
<div><span class="font-bold text-red-600">180</span><p class="text-gray-400">Adjustment</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">Recent Transfer Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest warehouse movements</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">New TO →’</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>TO#</th><th>Description</th><th>Items</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">TO-2026-0421</td><td>Stock replenishment Zone A</td><td class="font-mono text-xs">284</td><td><span class="chip chip-indigo">Completed</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">TO-2026-0420</td><td>Cross-dock transfer</td><td class="font-mono text-xs">42</td><td><span class="chip chip-indigo">Completed</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">TO-2026-0419</td><td>Bulk to picking zone</td><td class="font-mono text-xs">186</td><td><span class="chip chip-indigo">Completed</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">TO-2026-0418</td><td>Overflow relocation</td><td class="font-mono text-xs">38</td><td><span class="chip chip-amber">Processing</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 TO</b></span><span>Total movements: <b>589</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">WMS Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time warehouse 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">TO</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>TO Completed</b> — TO-2026-0882</p><p class="text-xs text-gray-400 mt-0.5">📦 24 items · Zone: A to B</p><p class="text-xs text-gray-400">12 min ago</p></div>
|
||||
<span class="chip chip-green self-start">Done</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">GR</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>GR Received</b> — Vendor: Supplier A</p><p class="text-xs text-gray-400 mt-0.5">📥 86 units · PO-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">ST</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>Stock Adjustment</b> — Zone C</p><p class="text-xs text-gray-400 mt-0.5">📋 42 units · Cycle count variance</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">QC</div>
|
||||
<div class="min-w-0 flex-1"><p class="text-sm text-gray-700"><b>QC Passed</b> — Batch #B-2026</p><p class="text-xs text-gray-400 mt-0.5">✅ 38 units · Quality inspection passed</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">Stock Accuracy</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">Zone A</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">99.2% / 99.0%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:100%;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">Zone B</p>
|
||||
<span class="text-[11px] font-semibold">98.5% / 98.0%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:100%;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">Zone C</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">97.8% / 98.0%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:99%;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">Overall</p>
|
||||
<span class="text-[11px] font-semibold text-green-600">98.7% / 99.0%</span>
|
||||
</div>
|
||||
<div class="mt-2 progress-bar"><div class="fill" style="width:99%;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>Target Acc: <b class="text-green-600">99%</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">Top Products</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This period ranking</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">Widget A</p><p class="text-sm font-bold text-gray-900">12,450 <span class="text-[10px] text-green-600 font-semibold">+15%</span></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">Gadget B</p><p class="text-sm font-bold text-amber-600">8,320 <span class="text-[10px] text-green-600 font-semibold">+12%</span></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">Part C</p><p class="text-sm font-bold text-indigo-700">6,180 <span class="text-[10px] text-green-600 font-semibold">+8%</span></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">Tool D</p><p class="text-sm font-bold text-gray-900">4,250 <span class="text-[10px] text-green-600 font-semibold">+5%</span></p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top SKU: <b>28</b></span><span>Mov: <b>589</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">Quality Control</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">QC & inspection KPIs</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">Pass Rate</p><p class="text-[10px] text-gray-400">QC inspection results</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">98.7%</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">Damage</p><p class="text-[10px] text-gray-400">Items damaged in handling</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">0.8%</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">Reject</p><p class="text-[10px] text-gray-400">Rejected items</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">1.2%</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">On Hold</p><p class="text-[10px] text-gray-400">Pending inspection items</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">0.3%</span></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 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">Return Rate</p><p class="text-[10px] text-gray-400">Customer returns</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">0.5%</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">Locations Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top zones</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>Zone Code</th><th>Zone Name</th><th>Item Count</th><th>Capacity</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">Z-RA</td><td>Racking A</td><td class="font-mono text-xs text-green-600">12,450</td><td class="font-mono text-xs">18,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-RB</td><td>Racking B</td><td class="font-mono text-xs text-green-600">8,320</td><td class="font-mono text-xs">12,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-BL</td><td>Bulk Storage</td><td class="font-mono text-xs text-green-600">24,600</td><td class="font-mono text-xs">30,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-OV</td><td>Overflow Area</td><td class="font-mono text-xs text-green-600">6,180</td><td class="font-mono text-xs">10,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-CD</td><td>Cold Storage</td><td class="font-mono text-xs">4,250</td><td class="font-mono text-xs">8,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-DG</td><td>Dangerous Goods</td><td class="font-mono text-xs text-green-600">890</td><td class="font-mono text-xs">2,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-QC</td><td>QC Hold Area</td><td class="font-mono text-xs text-amber-600">1,240</td><td class="font-mono text-xs">3,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-CR</td><td>Cross Dock</td><td class="font-mono text-xs text-green-600">5,670</td><td class="font-mono text-xs">7,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-RT</td><td>Return Area</td><td class="font-mono text-xs text-amber-600">620</td><td class="font-mono text-xs">2,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-ST</td><td>Staging Area</td><td class="font-mono text-xs text-green-600">3,450</td><td class="font-mono text-xs">5,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-PK</td><td>Packing Zone</td><td class="font-mono text-xs text-green-600">9,800</td><td class="font-mono text-xs">12,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-SH</td><td>Shipping Dock</td><td class="font-mono text-xs text-green-600">7,030</td><td class="font-mono text-xs">11,000</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 Items: <span class="text-green-600">84,500</span></span><span>Total Cap: <span class="text-red-600">120,000</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 Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">DO scheduled next 14 days</p></div>
|
||||
<span class="text-xs text-indigo-600 font-semibold cursor-pointer hover:underline">Manage DO →’</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>DO#</th><th>Customer</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Items: <b class="text-gray-900">93,500</b></span><span>Urgent: <b class="text-red-500">32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-wms.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,411 @@
|
||||
@{
|
||||
ViewData["Title"] = "DashboardWms5";
|
||||
ViewData["SidebarVariant"] = "5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style5.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<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">WMS Dashboard</h1><p class="text-gray-500 mt-1 text-sm">Warehouse Management System — Period: Q2 2026</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-blue-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: #3b82f6;"><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-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 Items</p><p class="kpi-value">84,500</p><span class="kpi-delta">▲ +5.3%</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">Stock Value</p><p class="kpi-value">$12.6M</p><span class="kpi-delta">▲ +8.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="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">Locations</p><p class="kpi-value">42</p><span class="kpi-delta">▲ +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="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">Open TO</p><p class="kpi-value">18</p><span class="kpi-delta">▲ +6</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-1 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">Receiving Rate</p><p class="kpi-value">2.4d</p><span class="kpi-delta">▲ +0.3d</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">Picking Acc.</p><p class="kpi-value">99.2%</p><span class="kpi-delta">▲ +0.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="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">Throughput</p><p class="kpi-value">12,450</p><span class="kpi-delta">▲ +8.3%</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">Dock Turn</p><p class="kpi-value">4.2x</p><span class="kpi-delta">▲ +0.3x</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 class="lg:col-span-5 lg:col-start-8 lg:row-start-1 row-span-2 bg-white border border-gray-100 p-6 anim-fade anim-delay-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900 mb-1">Storage Breakdown</h3><p class="text-xs text-gray-400">By category this period</p></div>
|
||||
</div>
|
||||
<div class="flex justify-center"><div class="chart-container" style="height:200px;width:200px;"><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> Racking <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> Bulk <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> Overflow <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> Cold <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> Others <span class="font-semibold ml-auto">9%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white 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">WMS 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-blue-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 Items</p><p class="mm-sub">84,500 ▲ 5.3%</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">Stock Value</p><p class="mm-sub">$12.6M ▲ 8.2%</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">Locations</p><p class="mm-sub">42 ▲ 2</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">Open TO</p><p class="mm-sub">18 ▲ 6</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">Receiving Rate</p><p class="mm-sub">2.4d ▲ 0.3d</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">Picking Acc.</p><p class="mm-sub">99.2% ▲ 0.5%</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">Throughput</p><p class="mm-sub">12,450 ▲ 8.3%</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">Dock Turn</p><p class="mm-sub">4.2x ▲ 0.3x</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">TO Completed</p><p class="mm-sub">245 ▲ 12%</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">GR Processed</p><p class="mm-sub">186 ▲ 8%</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">DO Shipped</p><p class="mm-sub">158 ▲ 14%</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">Stock Check</p><p class="mm-sub">100% ✓</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">Warehouse Staff</p><p class="mm-sub">28 ▲ 2</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">Fill Rate</p><p class="mm-sub">97.3% ▲ 1.5%</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">Stockout Rate</p><p class="mm-sub">2.1% ▼ 0.6%</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">GR Time</p><p class="mm-sub">3.2hrs ▼ 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">Damage Rate</p><p class="mm-sub">0.8% ▼ 0.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">Storage Cost</p><p class="mm-sub">$0.42/unit ▼ $0.05</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">ABC Class A</p><p class="mm-sub">3,450 items</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">Warehouse Zone</p><p class="mm-sub">12</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="lg:col-span-1 bg-white 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">Movement Trend</h3><p class="text-xs text-gray-400 mt-0.5">Daily in/out movements</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> Outgoing</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container" style="height:260px;"><canvas id="plChart"></canvas></div>
|
||||
</div>
|
||||
<div class="lg:col-span-1 bg-white border border-gray-100 p-5 anim-fade anim-delay-3">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><p class="text-[10px] text-gray-500 font-semibold uppercase tracking-wide">Warehouse 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-blue-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 Items Stored</p><p class="text-lg font-bold text-gray-900">84,500</p><span class="text-[10px] text-green-600 font-semibold">▲ +5.3%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Stock Value</p><p class="text-lg font-bold text-gray-900">$12.6M</p><span class="text-[10px] text-green-600 font-semibold">▲ +8.2%</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Total Locations</p><p class="text-lg font-bold text-gray-900">42</p><span class="text-[10px] text-green-600 font-semibold">▲ +2</span></div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;"><p class="text-[10px] text-gray-500">Open TO</p><p class="text-lg font-bold text-gray-900">18</p><span class="text-[10px] text-green-600 font-semibold">▲ +6</span></div>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400"><span>Accuracy: <b class="text-gray-700">98.7%</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 border border-gray-100 p-5 anim-fade anim-delay-3">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Stock Summary</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">Total Stock</p><p class="text-sm font-bold text-gray-900">84,500 units</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">Location Used</p><p class="text-sm font-bold text-gray-900">38</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">Avg Item Value</p><p class="text-sm font-bold text-blue-700">$149</p></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs pt-2 border-t border-gray-100"><span>Turnover</span><span class="font-semibold text-gray-900">6.2x</span><span>Accuracy</span><span class="font-semibold text-gray-900">98.7%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-4">
|
||||
<h3 class="font-bold text-gray-900 mb-1">TO Status</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">Transfer Order by status</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">Draft</p><p class="text-sm font-bold text-green-700">8</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">Processing</p><p class="text-sm font-bold text-amber-600">6</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">Completed</p><p class="text-sm font-bold text-red-600">22</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">Cancelled</p><p class="text-sm font-bold text-blue-700">3</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Avg Cycle: <b>2.4d</b></span><span>On Time: <b>92%</b></span></div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Receiving Activity</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">+450</span><p class="text-gray-400">GR</p></div>
|
||||
<div><span class="font-bold text-red-600">320</span><p class="text-gray-400">DO</p></div>
|
||||
<div><span class="font-bold text-red-600">180</span><p class="text-gray-400">Adjustment</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-white 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">Recent Transfer Orders</h3><p class="text-xs text-gray-400 mt-0.5">Latest warehouse movements</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">New TO →’</span>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<table class="grid-table">
|
||||
<thead><tr><th>Date</th><th>TO#</th><th>Description</th><th>Items</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="text-xs">Jun 30</td><td class="font-mono text-xs">JV-2026-0421</td><td>Monthly revenue recognition</td><td class="font-mono text-xs">$284,500</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 29</td><td class="font-mono text-xs">JV-2026-0420</td><td>Depreciation - June</td><td class="font-mono text-xs">$42,800</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 28</td><td class="font-mono text-xs">JV-2026-0419</td><td>Payroll accrual</td><td class="font-mono text-xs">$186,200</td><td><span class="chip chip-indigo">Posted</span></td></tr>
|
||||
<tr><td class="text-xs">Jun 27</td><td class="font-mono text-xs">JV-2026-0418</td><td>Tax provision - PPh 21</td><td class="font-mono text-xs">$38,400</td><td><span class="chip chip-amber">Pending</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-between text-xs"><span>Active: <b class="text-amber-600">4 TO</b></span><span>Total movements: <b>589</b></span></div>
|
||||
</div>
|
||||
<div class="bg-white 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">WMS Activity</h3><p class="text-xs text-gray-400 mt-0.5">Real-time warehouse updates</p></div>
|
||||
<span class="flex items-center gap-1.5 text-xs"><span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span> <span class="text-blue-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 border border-gray-100 p-5 anim-fade anim-delay-4">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Stock Accuracy</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">Zone A</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">Zone B</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">Zone C</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">Overall</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>Target Acc: <b class="text-green-600">99%</b></span><span class="text-blue-600">On Track</span></div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-5">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Top Products</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">This period ranking</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">Widget A</p><p class="text-sm font-bold text-gray-900">12,450 <span class="text-green-600 text-xs">+15%</span></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">Gadget B</p><p class="text-sm font-bold text-amber-600">8,320 <span class="text-green-600 text-xs">+12%</span></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">Part C</p><p class="text-sm font-bold text-blue-700">6,180 <span class="text-green-600 text-xs">+8%</span></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">Tool D</p><p class="text-sm font-bold text-gray-900">4,250 <span class="text-green-600 text-xs">+5%</span></p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between text-xs"><span>Top SKU: <b>28</b></span><span>Mov: <b>589</b></span></div>
|
||||
</div>
|
||||
<div class="bg-white border border-gray-100 p-5 anim-fade anim-delay-6">
|
||||
<h3 class="font-bold text-gray-900 mb-1">Quality Control</h3>
|
||||
<p class="text-xs text-gray-400 mb-3">QC & inspection KPIs</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">Pass Rate</p><p class="text-[10px] text-gray-400">Monthly inspection</p></div>
|
||||
<div class="text-right"><span class="chip chip-blue">98.5%</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">Damage/Reject</p><p class="text-[10px] text-gray-400">Quality check</p></div>
|
||||
<div class="text-right"><span class="chip chip-purple">0.8%</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">On Hold</p><p class="text-[10px] text-gray-400">Pending review</p></div>
|
||||
<div class="text-right"><span class="chip chip-orange">1.2%</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">Return Rate</p><p class="text-[10px] text-gray-400">Customer returns</p></div>
|
||||
<div class="text-right"><span class="chip chip-red">0.3%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-white 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">Locations Overview</h3><p class="text-xs text-gray-400 mt-0.5">As of Jun 30, 2026 · Top zones</p></div>
|
||||
<span class="text-xs text-blue-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>Zone Code</th><th>Zone Name</th><th>Item Count</th><th>Capacity</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="font-mono text-xs">Z-RA</td><td>Racking A</td><td class="font-mono text-xs text-green-600">12,450</td><td class="font-mono text-xs">18,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-RB</td><td>Racking B</td><td class="font-mono text-xs text-green-600">8,320</td><td class="font-mono text-xs">12,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-BL</td><td>Bulk Storage</td><td class="font-mono text-xs text-green-600">24,600</td><td class="font-mono text-xs">30,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-OV</td><td>Overflow Area</td><td class="font-mono text-xs text-green-600">6,180</td><td class="font-mono text-xs">10,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-CD</td><td>Cold Storage</td><td class="font-mono text-xs">4,250</td><td class="font-mono text-xs">8,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-DG</td><td>Dangerous Goods</td><td class="font-mono text-xs text-green-600">890</td><td class="font-mono text-xs">2,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-QC</td><td>QC Hold Area</td><td class="font-mono text-xs text-amber-600">1,240</td><td class="font-mono text-xs">3,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-CR</td><td>Cross Dock</td><td class="font-mono text-xs text-green-600">5,670</td><td class="font-mono text-xs">7,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-RT</td><td>Return Area</td><td class="font-mono text-xs text-amber-600">620</td><td class="font-mono text-xs">2,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-ST</td><td>Staging Area</td><td class="font-mono text-xs text-green-600">3,450</td><td class="font-mono text-xs">5,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-PK</td><td>Packing Zone</td><td class="font-mono text-xs text-green-600">9,800</td><td class="font-mono text-xs">12,000</td></tr>
|
||||
<tr><td class="font-mono text-xs">Z-SH</td><td>Shipping Dock</td><td class="font-mono text-xs text-green-600">7,030</td><td class="font-mono text-xs">11,000</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 Items: <span class="text-green-600">84,500</span></span><span>Total Cap: <span class="text-red-600">120,000</span></span></div>
|
||||
</div>
|
||||
<div class="bg-white 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 Deliveries</h3><p class="text-xs text-gray-400 mt-0.5">DO scheduled next 14 days</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage DO →’</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>DO#</th><th>Customer</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>
|
||||
<tr><td class="font-mono text-xs">INV-0906</td><td>AquaPure Systems</td><td class="font-mono text-xs">$11,400</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0907</td><td>BuildRight Materials</td><td class="font-mono text-xs">$36,800</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0908</td><td>FreshFoods Group</td><td class="font-mono text-xs">$9,200</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0909</td><td>AutoParts Inc.</td><td class="font-mono text-xs">$22,600</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0910</td><td>CloudNet Services</td><td class="font-mono text-xs">$14,100</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0911</td><td>Sunrise Energy</td><td class="font-mono text-xs">$41,500</td><td class="text-xs">Jun 28</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0912</td><td>Urban Design Co</td><td class="font-mono text-xs">$7,800</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0913</td><td>SafeGuard Security</td><td class="font-mono text-xs">$5,400</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0914</td><td>EcoFriendly Pkg</td><td class="font-mono text-xs">$16,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-0915</td><td>StarTech Systems</td><td class="font-mono text-xs">$33,000</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-0916</td><td>Blue Ocean Ltd.</td><td class="font-mono text-xs">$10,500</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0917</td><td>Golden Gate Inc.</td><td class="font-mono text-xs">$27,300</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-0918</td><td>Silver Lake Corp</td><td class="font-mono text-xs">$6,800</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-0919</td><td>Northern Lights Co</td><td class="font-mono text-xs">$38,100</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-0920</td><td>Southern Cross Ltd</td><td class="font-mono text-xs">$13,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0921</td><td>Pacific Rim Group</td><td class="font-mono text-xs">$21,000</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0922</td><td>Atlantic Partners</td><td class="font-mono text-xs">$9,600</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0923</td><td>Highland Ventures</td><td class="font-mono text-xs">$17,800</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0924</td><td>Valley Industries</td><td class="font-mono text-xs">$4,200</td><td class="text-xs">Jun 30</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0925</td><td>RidgeTop Inc.</td><td class="font-mono text-xs">$29,500</td><td class="text-xs">Jul 01</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0926</td><td>Mountain View Corp</td><td class="font-mono text-xs">$11,200</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-0927</td><td>RiverSide Ltd.</td><td class="font-mono text-xs">$25,400</td><td class="text-xs">Jul 06</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0928</td><td>Harbor Freight Co</td><td class="font-mono text-xs">$7,100</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0929</td><td>Ocean View Hotel</td><td class="font-mono text-xs">$34,600</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0930</td><td>Desert Palm Resort</td><td class="font-mono text-xs">$18,900</td><td class="text-xs">Jul 13</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0931</td><td>Forest Woods Ltd.</td><td class="font-mono text-xs">$8,300</td><td class="text-xs">Jul 15</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0932</td><td>LakeSide Properties</td><td class="font-mono text-xs">$42,000</td><td class="text-xs">Jul 17</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0933</td><td>FieldStone Group</td><td class="font-mono text-xs">$5,800</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0934</td><td>MeadowBrook Inc.</td><td class="font-mono text-xs">$15,500</td><td class="text-xs">Jun 27</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0935</td><td>HillTop Enterprises</td><td class="font-mono text-xs">$23,100</td><td class="text-xs">Jun 29</td><td><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0936</td><td>CrestView Solutions</td><td class="font-mono text-xs">$9,900</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-0937</td><td>Peak Performance Ltd</td><td class="font-mono text-xs">$31,200</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-0938</td><td>Summit Strategies</td><td class="font-mono text-xs">$6,400</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-0939</td><td>BaySide Logistics</td><td class="font-mono text-xs">$19,700</td><td class="text-xs">Jul 09</td><td><span class="chip chip-amber">Due Soon</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0940</td><td>Coastal Trading Co</td><td class="font-mono text-xs">$12,300</td><td class="text-xs">Jul 11</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0941</td><td>Delta Distribution</td><td class="font-mono text-xs">$28,400</td><td class="text-xs">Jul 14</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0942</td><td>Sigma Supplies Co</td><td class="font-mono text-xs">$7,500</td><td class="text-xs">Jul 16</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0943</td><td>Omega Group Ltd.</td><td class="font-mono text-xs">$35,200</td><td class="text-xs">Jul 18</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
<tr><td class="font-mono text-xs">INV-0944</td><td>Alpha Enterprises</td><td class="font-mono text-xs">$10,800</td><td class="text-xs">Jul 19</td><td><span class="chip chip-indigo">Future</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs"><span>Total Items: <b class="text-gray-900">93,500</b></span><span>Urgent: <b class="text-red-500">32,000</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/dashboard-wms.js" asp-append-version="true"></script>
|
||||
}
|
||||
Reference in New Issue
Block a user