442 lines
65 KiB
Plaintext
442 lines
65 KiB
Plaintext
@page "/dashboard-pos1"
|
|
@{
|
|
ViewData["Title"] = "Dashboard POS 1";
|
|
}
|
|
@{
|
|
ViewData["SidebarVariant"] = "1";
|
|
ViewData["Js:dashboard-pos.js"] = "js/dashboard-pos.js";
|
|
|
|
}
|
|
|
|
<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>
|