Preserve the local Ant UI work across views/components and add the new home dashboard chart panels before merging latest main.
1296 lines
93 KiB
HTML
1296 lines
93 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fa" dir="rtl">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>داشبورد مدیریت ارتباط با مشتری | متنکت (Matanect)</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||
<script src="https://unpkg.com/lucide@latest"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
fontFamily: {
|
||
sans: ['Vazirmatn', 'sans-serif'],
|
||
},
|
||
colors: {
|
||
brand: {
|
||
50: '#ecfdf5',
|
||
100: '#d1fae5',
|
||
200: '#a7f3d0',
|
||
500: '#10b981',
|
||
600: '#059669',
|
||
700: '#047857',
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
body {
|
||
font-family: 'Vazirmatn', sans-serif;
|
||
background-color: #f8fafc;
|
||
color: #0f172a;
|
||
overflow-x: hidden;
|
||
}
|
||
/* Custom scrollbar */
|
||
::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
::-webkit-scrollbar-track {
|
||
background: #f1f5f9;
|
||
}
|
||
::-webkit-scrollbar-thumb {
|
||
background: #cbd5e1;
|
||
border-radius: 9999px;
|
||
}
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: #94a3b8;
|
||
}
|
||
.card-hover {
|
||
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
||
}
|
||
.card-hover:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.08);
|
||
}
|
||
.donut-segment {
|
||
transition: stroke-dasharray 0.6s ease, stroke-width 0.2s ease;
|
||
cursor: pointer;
|
||
}
|
||
.donut-segment:hover {
|
||
stroke-width: 11;
|
||
}
|
||
/* Custom subtle scrollbar for Attention List */
|
||
.attention-scroll::-webkit-scrollbar {
|
||
width: 5px;
|
||
}
|
||
.attention-scroll::-webkit-scrollbar-track {
|
||
background: #f8fafc;
|
||
border-radius: 8px;
|
||
}
|
||
.attention-scroll::-webkit-scrollbar-thumb {
|
||
background: #cbd5e1;
|
||
border-radius: 8px;
|
||
}
|
||
.attention-scroll::-webkit-scrollbar-thumb:hover {
|
||
background: #94a3b8;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="min-h-screen bg-slate-50/70">
|
||
|
||
<!-- Main Workspace Container (Without Header & Sidebar) -->
|
||
<main class="p-4 sm:p-6 lg:p-8 max-w-[1560px] mx-auto w-full space-y-6">
|
||
|
||
<!-- 1. Top Greeting & Quick AI Bar -->
|
||
<div class="bg-gradient-to-l from-emerald-50/90 via-teal-50/50 to-white border border-emerald-200/70 rounded-2xl p-4 sm:p-5 flex flex-col lg:flex-row items-stretch lg:items-center justify-between gap-4 shadow-2xs">
|
||
<div class="flex items-center gap-3.5">
|
||
<div class="relative shrink-0">
|
||
<div class="w-12 h-12 rounded-2xl bg-emerald-600 text-white flex items-center justify-center font-bold text-lg shadow-md shadow-emerald-600/20">
|
||
م
|
||
</div>
|
||
<span class="w-3.5 h-3.5 bg-emerald-500 border-2 border-white rounded-full absolute -bottom-0.5 -left-0.5"></span>
|
||
</div>
|
||
<div>
|
||
<h2 class="text-base sm:text-lg font-extrabold text-slate-800">صبح بخیر مدیر 👋</h2>
|
||
<p class="text-xs sm:text-sm text-slate-500 mt-0.5">از متنکت بپرسید یا کار امروز را با نگاهی به اولویتها شروع کنید</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center gap-2 bg-white border border-slate-200/90 rounded-xl p-1.5 pr-3.5 w-full lg:max-w-lg shadow-2xs focus-within:border-emerald-500 focus-within:ring-4 focus-within:ring-emerald-500/10 transition-all">
|
||
<i data-lucide="sparkles" class="w-4 h-4 text-emerald-500 shrink-0"></i>
|
||
<input id="topAiInput" type="text" placeholder="از متنکت بپرس... (مثلاً: معاملات در خطر کدامند؟)" class="w-full text-sm text-slate-700 outline-none bg-transparent">
|
||
<kbd class="hidden sm:inline-block text-[11px] font-sans text-slate-400 bg-slate-100 px-2 py-0.5 rounded-md border border-slate-200 shrink-0">Ctrl+K</kbd>
|
||
<button onclick="triggerQuickAsk()" class="bg-emerald-600 hover:bg-emerald-700 text-white p-2 rounded-lg transition-colors shrink-0">
|
||
<i data-lucide="send" class="w-4 h-4"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2. Mock Data Info Alert (Compact & Clean) -->
|
||
<div id="mockBanner" class="bg-sky-50/90 border border-sky-200/80 rounded-xl px-4 py-3 flex items-center justify-between gap-4 text-sky-900">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-8 h-8 rounded-lg bg-sky-100 text-sky-600 flex items-center justify-center shrink-0">
|
||
<i data-lucide="info" class="w-4 h-4"></i>
|
||
</div>
|
||
<div class="text-xs sm:text-sm flex flex-wrap items-center gap-x-2 gap-y-1">
|
||
<strong class="font-bold">پیشنمایش با دیتای ماک:</strong>
|
||
<span class="text-sky-700">برای دیدن داده واقعی، <code class="bg-white/80 px-1.5 py-0.5 rounded border border-sky-200 font-mono text-[11px] text-sky-900">FORCE_HOME_MOCK</code> را در <code class="bg-white/80 px-1.5 py-0.5 rounded border border-sky-200 font-mono text-[11px] text-sky-900">HomeView</code> روی <code class="bg-white/80 px-1.5 py-0.5 rounded border border-sky-200 font-mono text-[11px] text-rose-600">false</code> بگذارید.</span>
|
||
</div>
|
||
</div>
|
||
<button onclick="document.getElementById('mockBanner').classList.add('hidden')" class="text-sky-500 hover:text-sky-800 p-1 rounded-lg hover:bg-sky-100 transition-colors">
|
||
<i data-lucide="x" class="w-4 h-4"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4">
|
||
|
||
<!-- KPI 1: فروش این ماه -->
|
||
<div class="bg-white rounded-2xl p-4 border border-slate-200/80 shadow-2xs card-hover flex flex-col justify-between relative overflow-hidden">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<span class="text-xs font-semibold text-slate-500">فروش این ماه</span>
|
||
<div class="w-8 h-8 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center">
|
||
<i data-lucide="banknote" class="w-4 h-4"></i>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="flex items-baseline gap-1">
|
||
<span class="text-xl sm:text-2xl font-black text-slate-800 tracking-tight">۱۸۶,۵۰۰,۰۰۰</span>
|
||
<span class="text-xs font-bold text-slate-500">ریال</span>
|
||
</div>
|
||
<div class="mt-2.5 flex items-center gap-1 text-[11px] font-semibold text-emerald-600 bg-emerald-50/80 w-fit px-2 py-0.5 rounded-md">
|
||
<i data-lucide="trending-up" class="w-3 h-3"></i>
|
||
<span>+۱۸.۴٪ نسبت به ماه قبل</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KPI 2: مشتریان جدید -->
|
||
<div class="bg-white rounded-2xl p-4 border border-slate-200/80 shadow-2xs card-hover flex flex-col justify-between">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<span class="text-xs font-semibold text-slate-500">مشتریان جدید</span>
|
||
<div class="w-8 h-8 rounded-xl bg-teal-50 text-teal-600 flex items-center justify-center">
|
||
<i data-lucide="user-plus" class="w-4 h-4"></i>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-2xl sm:text-3xl font-black text-slate-800">۴۲</div>
|
||
<div class="mt-2.5 flex items-center gap-1 text-[11px] font-semibold text-emerald-600 bg-emerald-50/80 w-fit px-2 py-0.5 rounded-md">
|
||
<i data-lucide="trending-up" class="w-3 h-3"></i>
|
||
<span>+۱۲.۵٪ نسبت به ماه قبل</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KPI 3: معاملات باز -->
|
||
<div class="bg-white rounded-2xl p-4 border border-slate-200/80 shadow-2xs card-hover flex flex-col justify-between">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<span class="text-xs font-semibold text-slate-500">معاملات باز</span>
|
||
<div class="w-8 h-8 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center">
|
||
<i data-lucide="briefcase" class="w-4 h-4"></i>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-2xl sm:text-3xl font-black text-slate-800">۲۷</div>
|
||
<div class="mt-2.5 flex items-center gap-1 text-[11px] font-semibold text-rose-600 bg-rose-50/80 w-fit px-2 py-0.5 rounded-md">
|
||
<i data-lucide="trending-down" class="w-3 h-3"></i>
|
||
<span>-۴.۲٪ نسبت به هفته قبل</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KPI 4: پیگیری امروز -->
|
||
<div class="bg-white rounded-2xl p-4 border border-slate-200/80 shadow-2xs card-hover flex flex-col justify-between">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<span class="text-xs font-semibold text-slate-500">پیگیری امروز</span>
|
||
<div class="w-8 h-8 rounded-xl bg-indigo-50 text-indigo-600 flex items-center justify-center">
|
||
<i data-lucide="check-circle-2" class="w-4 h-4"></i>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-2xl sm:text-3xl font-black text-slate-800">۹</div>
|
||
<div class="mt-2.5 flex items-center gap-1 text-[11px] font-semibold text-emerald-600 bg-emerald-50/80 w-fit px-2 py-0.5 rounded-md">
|
||
<i data-lucide="trending-up" class="w-3 h-3"></i>
|
||
<span>+۲۵٪ نسبت به دیروز</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KPI 5: نرخ برد -->
|
||
<div class="bg-white rounded-2xl p-4 border border-slate-200/80 shadow-2xs card-hover flex flex-col justify-between">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<span class="text-xs font-semibold text-slate-500">نرخ برد</span>
|
||
<div class="w-8 h-8 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center">
|
||
<i data-lucide="award" class="w-4 h-4"></i>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-2xl sm:text-3xl font-black text-slate-800">۵۸.۳٪</div>
|
||
<div class="mt-2.5 flex items-center gap-1.5 text-[11px] font-medium text-slate-400">
|
||
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
|
||
<span>میانگین ۶ ماه اخیر</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KPI 6: عقبافتاده -->
|
||
<div class="bg-white rounded-2xl p-4 border border-rose-200/70 bg-gradient-to-b from-white to-rose-50/20 shadow-2xs card-hover flex flex-col justify-between">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<span class="text-xs font-semibold text-rose-700">عقبافتاده</span>
|
||
<div class="w-8 h-8 rounded-xl bg-rose-100/80 text-rose-600 flex items-center justify-center">
|
||
<i data-lucide="alert-triangle" class="w-4 h-4"></i>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-2xl sm:text-3xl font-black text-rose-600">۶</div>
|
||
<div class="mt-2.5 flex items-center gap-1 text-[11px] font-semibold text-rose-600 bg-rose-100/70 w-fit px-2 py-0.5 rounded-md">
|
||
<span>نیازمند اقدام فوری</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<section class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-stretch">
|
||
|
||
<!-- Right Column: نیازمند توجه (7 Cols) - Compact, Tall & Scrollable (4+ visible at once) -->
|
||
<div class="lg:col-span-7 bg-white rounded-2xl border border-slate-200/80 p-5 shadow-2xs flex flex-col h-[340px]">
|
||
<!-- Card Header -->
|
||
<div class="flex items-center justify-between pb-3.5 mb-3 border-b border-slate-100 shrink-0">
|
||
<div class="flex items-center gap-2.5">
|
||
<span class="relative flex h-2.5 w-2.5">
|
||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span>
|
||
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-rose-500"></span>
|
||
</span>
|
||
<h3 class="font-bold text-slate-800 text-base">نیازمند توجه</h3>
|
||
<span class="bg-rose-50 text-rose-600 border border-rose-200/70 text-xs font-bold px-2 py-0.5 rounded-full">۲ فوری</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-xs font-semibold text-slate-500 bg-slate-100 px-2.5 py-1 rounded-lg">۱۰ مورد کل</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scrollable Compact Items Container (Shows at least 4 items clearly in viewport) -->
|
||
<div class="attention-scroll flex-1 overflow-y-auto pl-1.5 space-y-2">
|
||
|
||
<!-- Item 1 (Main from screenshot) -->
|
||
<div onclick="showToast('باز کردن پرونده شرکت نمونه آکمه...')" class="group cursor-pointer rounded-xl border border-rose-200/80 bg-rose-50/40 hover:bg-rose-50/90 px-3 py-2.5 flex items-center justify-between gap-3 transition-all relative overflow-hidden">
|
||
<span class="absolute right-0 top-0 bottom-0 w-1 bg-rose-500"></span>
|
||
<div class="flex items-center gap-2.5 pr-1.5 min-w-0">
|
||
<div class="w-8 h-8 rounded-lg bg-rose-100 text-rose-600 flex items-center justify-center shrink-0">
|
||
<i data-lucide="alert-circle" class="w-4 h-4"></i>
|
||
</div>
|
||
<div class="min-w-0 flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2.5">
|
||
<h4 class="font-bold text-xs sm:text-[13px] text-slate-800 truncate">شرکت نمونه آکمه در مرحله تصمیمگیری است</h4>
|
||
<div class="flex items-center gap-1.5 shrink-0">
|
||
<span class="text-[10px] font-bold bg-rose-100 text-rose-700 px-1.5 py-0.5 rounded">فوری</span>
|
||
<span class="text-[11px] text-slate-500">· امروز تماس بگیرید</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-1.5 shrink-0">
|
||
<span class="text-[11px] font-semibold text-rose-600 opacity-0 group-hover:opacity-100 transition-opacity hidden sm:inline">اقدام</span>
|
||
<i data-lucide="chevron-left" class="w-4 h-4 text-slate-400 group-hover:text-rose-600 group-hover:-translate-x-0.5 transition-all"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Item 2 (Main from screenshot) -->
|
||
<div onclick="showToast('نمایش لیست ۵ معامله بدون پیگیری...')" class="group cursor-pointer rounded-xl border border-amber-200/80 bg-amber-50/40 hover:bg-amber-50/90 px-3 py-2.5 flex items-center justify-between gap-3 transition-all relative overflow-hidden">
|
||
<span class="absolute right-0 top-0 bottom-0 w-1 bg-amber-500"></span>
|
||
<div class="flex items-center gap-2.5 pr-1.5 min-w-0">
|
||
<div class="w-8 h-8 rounded-lg bg-amber-100 text-amber-600 flex items-center justify-center shrink-0">
|
||
<i data-lucide="clock" class="w-4 h-4"></i>
|
||
</div>
|
||
<div class="min-w-0 flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2.5">
|
||
<h4 class="font-bold text-xs sm:text-[13px] text-slate-800 truncate">۵ معامله بیش از ۵ روز پیگیری نشده</h4>
|
||
<div class="flex items-center gap-1.5 shrink-0">
|
||
<span class="text-[10px] font-bold bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded">هشدار</span>
|
||
<span class="text-[11px] text-slate-500">· بررسی معاملات</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-1.5 shrink-0">
|
||
<span class="text-[11px] font-semibold text-amber-600 opacity-0 group-hover:opacity-100 transition-opacity hidden sm:inline">مشاهده</span>
|
||
<i data-lucide="chevron-left" class="w-4 h-4 text-slate-400 group-hover:text-amber-600 group-hover:-translate-x-0.5 transition-all"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Item 3 (Remaining from the 10 items) -->
|
||
<div onclick="showToast('باز کردن پیشفاکتور گروه پارسنوین...')" class="group cursor-pointer rounded-xl border border-rose-200/60 bg-rose-50/25 hover:bg-rose-50/80 px-3 py-2.5 flex items-center justify-between gap-3 transition-all relative overflow-hidden">
|
||
<span class="absolute right-0 top-0 bottom-0 w-1 bg-rose-400"></span>
|
||
<div class="flex items-center gap-2.5 pr-1.5 min-w-0">
|
||
<div class="w-8 h-8 rounded-lg bg-rose-100/80 text-rose-600 flex items-center justify-center shrink-0">
|
||
<i data-lucide="file-warning" class="w-4 h-4"></i>
|
||
</div>
|
||
<div class="min-w-0 flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2.5">
|
||
<h4 class="font-bold text-xs sm:text-[13px] text-slate-800 truncate">انقضای پیشفاکتور گروه پارسنوین (۶۸ میلیون ریال)</h4>
|
||
<div class="flex items-center gap-1.5 shrink-0">
|
||
<span class="text-[10px] font-bold bg-rose-100 text-rose-700 px-1.5 py-0.5 rounded">عقبافتاده</span>
|
||
<span class="text-[11px] text-slate-500">· ۱ روز تأخیر</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<i data-lucide="chevron-left" class="w-4 h-4 text-slate-400 group-hover:text-rose-600 group-hover:-translate-x-0.5 transition-all shrink-0"></i>
|
||
</div>
|
||
|
||
<!-- Item 4 -->
|
||
<div onclick="showToast('باز کردن اطلاعات تماس سارا محمدی...')" class="group cursor-pointer rounded-xl border border-amber-200/60 bg-amber-50/25 hover:bg-amber-50/80 px-3 py-2.5 flex items-center justify-between gap-3 transition-all relative overflow-hidden">
|
||
<span class="absolute right-0 top-0 bottom-0 w-1 bg-amber-400"></span>
|
||
<div class="flex items-center gap-2.5 pr-1.5 min-w-0">
|
||
<div class="w-8 h-8 rounded-lg bg-amber-100/80 text-amber-600 flex items-center justify-center shrink-0">
|
||
<i data-lucide="phone-missed" class="w-4 h-4"></i>
|
||
</div>
|
||
<div class="min-w-0 flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2.5">
|
||
<h4 class="font-bold text-xs sm:text-[13px] text-slate-800 truncate">تماس پیگیری سارا محمدی انجام نشده است</h4>
|
||
<div class="flex items-center gap-1.5 shrink-0">
|
||
<span class="text-[10px] font-bold bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded">پیگیری</span>
|
||
<span class="text-[11px] text-slate-500">· موعد امروز ۱۱:۰۰</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<i data-lucide="chevron-left" class="w-4 h-4 text-slate-400 group-hover:text-amber-600 group-hover:-translate-x-0.5 transition-all shrink-0"></i>
|
||
</div>
|
||
|
||
<!-- Item 5 -->
|
||
<div onclick="showToast('باز کردن پرونده صنایع سپهر...')" class="group cursor-pointer rounded-xl border border-slate-200/80 bg-slate-50/60 hover:bg-slate-100/80 px-3 py-2.5 flex items-center justify-between gap-3 transition-all relative overflow-hidden">
|
||
<span class="absolute right-0 top-0 bottom-0 w-1 bg-blue-500"></span>
|
||
<div class="flex items-center gap-2.5 pr-1.5 min-w-0">
|
||
<div class="w-8 h-8 rounded-lg bg-blue-100/80 text-blue-600 flex items-center justify-center shrink-0">
|
||
<i data-lucide="send" class="w-4 h-4"></i>
|
||
</div>
|
||
<div class="min-w-0 flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2.5">
|
||
<h4 class="font-bold text-xs sm:text-[13px] text-slate-800 truncate">پیشنهاد قیمت صنایع سپهر منتظر تایید نهایی</h4>
|
||
<div class="flex items-center gap-1.5 shrink-0">
|
||
<span class="text-[10px] font-bold bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded">پیشنهاد</span>
|
||
<span class="text-[11px] text-slate-500">· ۱۲۰,۰۰۰,۰۰۰ ریال</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<i data-lucide="chevron-left" class="w-4 h-4 text-slate-400 group-hover:text-blue-600 group-hover:-translate-x-0.5 transition-all shrink-0"></i>
|
||
</div>
|
||
|
||
<!-- Item 6 -->
|
||
<div onclick="showToast('باز کردن وظیفه رضا کریمی...')" class="group cursor-pointer rounded-xl border border-slate-200/80 bg-slate-50/60 hover:bg-slate-100/80 px-3 py-2.5 flex items-center justify-between gap-3 transition-all relative overflow-hidden">
|
||
<span class="absolute right-0 top-0 bottom-0 w-1 bg-emerald-500"></span>
|
||
<div class="flex items-center gap-2.5 pr-1.5 min-w-0">
|
||
<div class="w-8 h-8 rounded-lg bg-emerald-100/80 text-emerald-600 flex items-center justify-center shrink-0">
|
||
<i data-lucide="user-check" class="w-4 h-4"></i>
|
||
</div>
|
||
<div class="min-w-0 flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2.5">
|
||
<h4 class="font-bold text-xs sm:text-[13px] text-slate-800 truncate">ثبت بازخورد جلسه دمو با رضا کریمی</h4>
|
||
<div class="flex items-center gap-1.5 shrink-0">
|
||
<span class="text-[10px] font-bold bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded">یادداشت</span>
|
||
<span class="text-[11px] text-slate-500">· امروز</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<i data-lucide="chevron-left" class="w-4 h-4 text-slate-400 group-hover:text-emerald-600 group-hover:-translate-x-0.5 transition-all shrink-0"></i>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Subtle Scroll Hint Footer -->
|
||
<div class="pt-2.5 mt-2 border-t border-slate-100 flex items-center justify-between text-[11px] text-slate-400 shrink-0">
|
||
<span>برای مشاهده سایر موارد اسکرول کنید</span>
|
||
<button onclick="showToast('نمایش تمام ۱۰ مورد نیازمند توجه')" class="font-bold text-emerald-600 hover:text-emerald-700 flex items-center gap-1">
|
||
<span>مشاهده همه (۱۰)</span>
|
||
<i data-lucide="arrow-left" class="w-3 h-3"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Left Column: دستیار هوشمند متنکت (5 Cols) - Balanced to match 340px height -->
|
||
<div class="lg:col-span-5 bg-white rounded-2xl border border-slate-200/80 p-5 shadow-2xs flex flex-col justify-between h-[340px] relative overflow-hidden">
|
||
<div class="flex items-start justify-between gap-3">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 text-white flex items-center justify-center shadow-sm shadow-emerald-500/20 shrink-0">
|
||
<i data-lucide="bot" class="w-5 h-5"></i>
|
||
</div>
|
||
<div>
|
||
<div class="flex items-center gap-2">
|
||
<h3 class="font-bold text-slate-800 text-base">دستیار هوشمند متنکت</h3>
|
||
</div>
|
||
<p class="text-xs text-slate-500 mt-0.5">از داده CRM بپرس — یا با صدا دستور بده</p>
|
||
</div>
|
||
</div>
|
||
<span class="text-[11px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200 px-2.5 py-1 rounded-full shrink-0">هوش مصنوعی</span>
|
||
</div>
|
||
|
||
<!-- AI Live Insight Box (Fills vertical space usefully) -->
|
||
<div class="bg-emerald-50/50 border border-emerald-200/60 rounded-xl p-3 flex items-start gap-2.5 my-auto">
|
||
<i data-lucide="sparkles" class="w-4 h-4 text-emerald-600 shrink-0 mt-0.5"></i>
|
||
<p class="text-xs text-slate-600 leading-relaxed">
|
||
<strong class="text-slate-800 font-bold">پیشنهاد هوشمند امروز:</strong> اولویت اول شما تماس با <span class="font-semibold text-emerald-700">شرکت نمونه آکمه</span> و تعیین تکلیف <span class="font-semibold text-amber-700">۵ معامله بدون پیگیری</span> است.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Input Box -->
|
||
<div class="bg-slate-50 border border-slate-200/90 rounded-xl p-1.5 flex items-center gap-2 focus-within:bg-white focus-within:border-emerald-500 focus-within:ring-4 focus-within:ring-emerald-500/10 transition-all">
|
||
<input id="cardAiInput" type="text" placeholder="از متنکت بپرس..." class="w-full bg-transparent text-sm text-slate-700 pr-3 outline-none">
|
||
<button onclick="showToast('ضبط صدا فعال شد... صحبت کنید')" title="دستور صوتی" class="p-2 text-slate-400 hover:text-slate-700 hover:bg-slate-200/60 rounded-lg transition-colors">
|
||
<i data-lucide="mic" class="w-4 h-4"></i>
|
||
</button>
|
||
<button onclick="submitAiPrompt()" class="bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold px-4 py-2.5 rounded-lg flex items-center gap-1.5 transition-colors shrink-0 shadow-xs">
|
||
<span>بپرس</span>
|
||
<i data-lucide="sparkles" class="w-3.5 h-3.5"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Quick Prompt Pills -->
|
||
<div class="pt-3 border-t border-slate-100 flex items-center justify-between flex-wrap gap-2">
|
||
<span class="text-[11px] font-semibold text-slate-400">پیشنهادهای سریع:</span>
|
||
<div class="flex items-center flex-wrap gap-1.5">
|
||
<button onclick="fillPrompt('معاملات در خطر')" class="text-xs font-medium bg-emerald-50/70 hover:bg-emerald-100/80 text-emerald-700 border border-emerald-200/60 px-2.5 py-1 rounded-lg transition-colors">معاملات در خطر</button>
|
||
<button onclick="fillPrompt('عقبافتادهها')" class="text-xs font-medium bg-emerald-50/70 hover:bg-emerald-100/80 text-emerald-700 border border-emerald-200/60 px-2.5 py-1 rounded-lg transition-colors">عقبافتادهها</button>
|
||
<button onclick="fillPrompt('پیگیری امروز')" class="text-xs font-medium bg-emerald-50/70 hover:bg-emerald-100/80 text-emerald-700 border border-emerald-200/60 px-2.5 py-1 rounded-lg transition-colors">پیگیری امروز</button>
|
||
<button onclick="fillPrompt('خلاصه فروش')" class="text-xs font-medium bg-emerald-50/70 hover:bg-emerald-100/80 text-emerald-700 border border-emerald-200/60 px-2.5 py-1 rounded-lg transition-colors">خلاصه فروش</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<div class="pt-2 flex items-center justify-between border-b border-slate-200/80 pb-3">
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="w-1.5 h-6 bg-emerald-600 rounded-full"></div>
|
||
<div>
|
||
<h2 class="text-lg font-extrabold text-slate-800">تحلیل فروش</h2>
|
||
<p class="text-xs text-slate-500">روند، نتیجه معاملات و قیف مراحل باز</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||
|
||
<!-- Right: روند فروش (7 Cols) -->
|
||
<div class="lg:col-span-7 bg-white rounded-2xl border border-slate-200/80 p-5 sm:p-6 shadow-2xs flex flex-col justify-between">
|
||
<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
|
||
<div>
|
||
<h3 class="font-bold text-slate-800 text-base">روند فروش</h3>
|
||
<div class="flex items-center gap-1.5 mt-1">
|
||
<span class="text-xs font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-md">+۱۸.۴٪ آخرین ماه نسبت به ماه قبل</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Timeframe Tabs -->
|
||
<div class="bg-slate-100 p-1 rounded-xl flex items-center text-xs font-semibold">
|
||
<button onclick="switchTrendTab(this, '1m')" class="trend-tab px-3 py-1.5 rounded-lg text-slate-500 hover:text-slate-800 transition-all">این ماه</button>
|
||
<button onclick="switchTrendTab(this, '3m')" class="trend-tab px-3 py-1.5 rounded-lg text-slate-500 hover:text-slate-800 transition-all">۳ ماه</button>
|
||
<button onclick="switchTrendTab(this, '6m')" class="trend-tab px-3 py-1.5 rounded-lg bg-white text-slate-800 shadow-2xs transition-all">۶ ماه</button>
|
||
<button onclick="switchTrendTab(this, '12m')" class="trend-tab px-3 py-1.5 rounded-lg text-slate-500 hover:text-slate-800 transition-all">۱۲ ماه</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Responsive SVG Area Chart (6 Months: فروردین تا شهریور) -->
|
||
<div class="relative w-full h-56 pt-4">
|
||
<svg viewBox="0 0 600 200" class="w-full h-full overflow-visible">
|
||
<defs>
|
||
<linearGradient id="salesAreaGrad" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#10b981" stop-opacity="0.28"/>
|
||
<stop offset="100%" stop-color="#10b981" stop-opacity="0.0"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<!-- Horizontal Grid Lines -->
|
||
<line x1="20" y1="30" x2="580" y2="30" stroke="#f1f5f9" stroke-width="1.5" stroke-dasharray="4 4" />
|
||
<line x1="20" y1="80" x2="580" y2="80" stroke="#f1f5f9" stroke-width="1.5" stroke-dasharray="4 4" />
|
||
<line x1="20" y1="130" x2="580" y2="130" stroke="#f1f5f9" stroke-width="1.5" stroke-dasharray="4 4" />
|
||
<line x1="20" y1="170" x2="580" y2="170" stroke="#e2e8f0" stroke-width="1.5" />
|
||
|
||
<!-- Smooth Rising Curve (Right to Left or Left to Right matching Persian labels) -->
|
||
<!-- Labels: فروردین (50), اردیبهشت (150), خرداد (250), تیر (350), مرداد (450), شهریور (550) -->
|
||
<path id="trendAreaPath" d="M 50 135 C 100 132, 120 122, 150 118 C 190 112, 210 100, 250 94 C 290 88, 310 78, 350 72 C 390 66, 410 56, 450 50 C 490 44, 520 34, 550 25 L 550 170 L 50 170 Z" fill="url(#salesAreaGrad)" />
|
||
|
||
<path id="trendLinePath" d="M 50 135 C 100 132, 120 122, 150 118 C 190 112, 210 100, 250 94 C 290 88, 310 78, 350 72 C 390 66, 410 56, 450 50 C 490 44, 520 34, 550 25" fill="none" stroke="#10b981" stroke-width="3" stroke-linecap="round" />
|
||
|
||
<!-- Data Points -->
|
||
<g class="fill-white stroke-emerald-600 stroke-[2.5]">
|
||
<circle cx="50" cy="135" r="4" class="hover:r-6 transition-all cursor-pointer"><title>فروردین: ۹۲,۰۰۰,۰۰۰ ریال</title></circle>
|
||
<circle cx="150" cy="118" r="4" class="hover:r-6 transition-all cursor-pointer"><title>اردیبهشت: ۱۱۲,۰۰۰,۰۰۰ ریال</title></circle>
|
||
<circle cx="250" cy="94" r="4" class="hover:r-6 transition-all cursor-pointer"><title>خرداد: ۱۳۴,۰۰۰,۰۰۰ ریال</title></circle>
|
||
<circle cx="350" cy="72" r="4" class="hover:r-6 transition-all cursor-pointer"><title>تیر: ۱۴۸,۰۰۰,۰۰۰ ریال</title></circle>
|
||
<circle cx="450" cy="50" r="4" class="hover:r-6 transition-all cursor-pointer"><title>مرداد: ۱۵۷,۵۰۰,۰۰۰ ریال</title></circle>
|
||
<circle cx="550" cy="25" r="5.5" class="fill-emerald-600 stroke-white stroke-2 cursor-pointer"><title>شهریور: ۱۸۶,۵۰۰,۰۰۰ ریال</title></circle>
|
||
</g>
|
||
|
||
<!-- X Axis Month Labels -->
|
||
<g class="fill-slate-400 text-[12px] font-medium" text-anchor="middle">
|
||
<text x="50" y="192">فروردین</text>
|
||
<text x="150" y="192">اردیبهشت</text>
|
||
<text x="250" y="192">خرداد</text>
|
||
<text x="350" y="192">تیر</text>
|
||
<text x="450" y="192">مرداد</text>
|
||
<text x="550" y="192" class="fill-emerald-700 font-bold">شهریور</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Left: وضعیت معاملات (5 Cols) - Balanced Layout -->
|
||
<div class="lg:col-span-5 bg-white rounded-2xl border border-slate-200/80 p-5 sm:p-6 shadow-2xs flex flex-col justify-between">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h3 class="font-bold text-slate-800 text-base">وضعیت معاملات</h3>
|
||
<span class="text-xs font-bold bg-emerald-50 text-emerald-700 border border-emerald-200/60 px-2.5 py-1 rounded-lg">نرخ برد ۵۸.۳٪</span>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 sm:grid-cols-12 gap-6 items-center my-auto py-2">
|
||
<!-- Donut SVG (5 Cols) -->
|
||
<div class="sm:col-span-5 flex justify-center relative">
|
||
<div class="w-40 h-40 relative flex items-center justify-center">
|
||
<!-- Circumference for r=40 is ~251.3 -->
|
||
<!-- Total = 87: باز (27 -> 31% -> 78), برنده (35 -> 40.2% -> 101), باخته (25 -> 28.7% -> 72.3) -->
|
||
<svg viewBox="0 0 100 100" class="w-full h-full -rotate-90">
|
||
<circle cx="50" cy="50" r="40" fill="none" stroke="#f1f5f9" stroke-width="10" />
|
||
<!-- برنده: 35 -->
|
||
<circle class="donut-segment" cx="50" cy="50" r="40" fill="none" stroke="#10b981" stroke-width="10" stroke-dasharray="101 251.3" stroke-dashoffset="0" />
|
||
<!-- باز: 27 -->
|
||
<circle class="donut-segment" cx="50" cy="50" r="40" fill="none" stroke="#3b82f6" stroke-width="10" stroke-dasharray="78 251.3" stroke-dashoffset="-101" />
|
||
<!-- باخته: 25 -->
|
||
<circle class="donut-segment" cx="50" cy="50" r="40" fill="none" stroke="#f43f5e" stroke-width="10" stroke-dasharray="72.3 251.3" stroke-dashoffset="-179" />
|
||
</svg>
|
||
<div class="absolute inset-0 flex flex-col items-center justify-center text-center">
|
||
<span class="text-2xl font-black text-slate-800 leading-none">۸۷</span>
|
||
<span class="text-xs font-medium text-slate-400 mt-1">معامله کل</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Structured Breakdown Cards (7 Cols) -->
|
||
<div class="sm:col-span-7 space-y-2.5">
|
||
<!-- باز -->
|
||
<div class="p-3 rounded-xl bg-slate-50/80 border border-slate-100 flex items-center justify-between">
|
||
<div class="flex items-center gap-2.5">
|
||
<span class="w-3 h-3 rounded-full bg-blue-500 shrink-0"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-slate-700">باز</div>
|
||
<div class="text-[11px] text-slate-400">در جریان مذاکره</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-left">
|
||
<div class="text-sm font-black text-slate-800">۲۷ <span class="text-[11px] font-medium text-slate-500">معامله</span></div>
|
||
<div class="text-xs font-semibold text-slate-500">۴۱۲,۰۰۰,۰۰۰ ریال</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- برنده (۱۲ ماه) -->
|
||
<div class="p-3 rounded-xl bg-emerald-50/50 border border-emerald-100/80 flex items-center justify-between">
|
||
<div class="flex items-center gap-2.5">
|
||
<span class="w-3 h-3 rounded-full bg-emerald-500 shrink-0"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-emerald-900">برنده (۱۲ ماه)</div>
|
||
<div class="text-[11px] text-emerald-600/80">تکمیل موفق</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-left">
|
||
<div class="text-sm font-black text-emerald-700">۳۵ <span class="text-[11px] font-medium">معامله</span></div>
|
||
<div class="text-xs font-semibold text-emerald-600">۶۹۴,۰۰۰,۰۰۰ ریال</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- باخته (۱۲ ماه) -->
|
||
<div class="p-3 rounded-xl bg-rose-50/40 border border-rose-100/80 flex items-center justify-between">
|
||
<div class="flex items-center gap-2.5">
|
||
<span class="w-3 h-3 rounded-full bg-rose-500 shrink-0"></span>
|
||
<div>
|
||
<div class="text-xs font-bold text-rose-900">باخته (۱۲ ماه)</div>
|
||
<div class="text-[11px] text-rose-500">لغو یا عدم توافق</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-left">
|
||
<div class="text-sm font-black text-rose-600">۲۵ <span class="text-[11px] font-medium">معامله</span></div>
|
||
<div class="text-xs font-semibold text-rose-500">۳۱۸,۰۰۰,۰۰۰ ریال</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<section class="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||
|
||
<!-- Right: رشد مشتریان (7 Cols) -->
|
||
<div class="lg:col-span-7 bg-white rounded-2xl border border-slate-200/80 p-5 sm:p-6 shadow-2xs flex flex-col justify-between">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<div>
|
||
<h3 class="font-bold text-slate-800 text-base">روند رشد مشتریان</h3>
|
||
<p class="text-xs text-slate-400 mt-0.5">تعداد مشتریان جذبشده در تفکیک ماهانه</p>
|
||
</div>
|
||
<span class="text-xs font-bold bg-emerald-50 text-emerald-700 border border-emerald-200/60 px-3 py-1 rounded-lg">۲۵۳ در ۱۲ ماه</span>
|
||
</div>
|
||
|
||
<!-- 12 Months Bar Chart with Line Overlay -->
|
||
<div class="h-48 flex items-end justify-between gap-2 sm:gap-3 pt-6 px-2 border-b border-slate-200/80 pb-2 relative">
|
||
<!-- Bar items: مهر تا شهریور -->
|
||
<div class="flex-1 flex flex-col items-center gap-2 group h-full justify-end">
|
||
<span class="text-[10px] font-bold text-slate-500 opacity-0 group-hover:opacity-100 transition-opacity">۱۲</span>
|
||
<div class="w-full max-w-[28px] bg-emerald-500/85 group-hover:bg-emerald-600 rounded-t-lg transition-all" style="height: 28%"></div>
|
||
</div>
|
||
<div class="flex-1 flex flex-col items-center gap-2 group h-full justify-end">
|
||
<span class="text-[10px] font-bold text-slate-500 opacity-0 group-hover:opacity-100 transition-opacity">۱۵</span>
|
||
<div class="w-full max-w-[28px] bg-emerald-500/85 group-hover:bg-emerald-600 rounded-t-lg transition-all" style="height: 35%"></div>
|
||
</div>
|
||
<div class="flex-1 flex flex-col items-center gap-2 group h-full justify-end">
|
||
<span class="text-[10px] font-bold text-slate-500 opacity-0 group-hover:opacity-100 transition-opacity">۱۴</span>
|
||
<div class="w-full max-w-[28px] bg-emerald-500/85 group-hover:bg-emerald-600 rounded-t-lg transition-all" style="height: 32%"></div>
|
||
</div>
|
||
<div class="flex-1 flex flex-col items-center gap-2 group h-full justify-end">
|
||
<span class="text-[10px] font-bold text-slate-500 opacity-0 group-hover:opacity-100 transition-opacity">۱۸</span>
|
||
<div class="w-full max-w-[28px] bg-emerald-500/85 group-hover:bg-emerald-600 rounded-t-lg transition-all" style="height: 42%"></div>
|
||
</div>
|
||
<div class="flex-1 flex flex-col items-center gap-2 group h-full justify-end">
|
||
<span class="text-[10px] font-bold text-slate-500 opacity-0 group-hover:opacity-100 transition-opacity">۲۱</span>
|
||
<div class="w-full max-w-[28px] bg-emerald-500/85 group-hover:bg-emerald-600 rounded-t-lg transition-all" style="height: 49%"></div>
|
||
</div>
|
||
<div class="flex-1 flex flex-col items-center gap-2 group h-full justify-end">
|
||
<span class="text-[10px] font-bold text-slate-500 opacity-0 group-hover:opacity-100 transition-opacity">۲۴</span>
|
||
<div class="w-full max-w-[28px] bg-emerald-500/85 group-hover:bg-emerald-600 rounded-t-lg transition-all" style="height: 56%"></div>
|
||
</div>
|
||
<div class="flex-1 flex flex-col items-center gap-2 group h-full justify-end">
|
||
<span class="text-[10px] font-bold text-slate-500 opacity-0 group-hover:opacity-100 transition-opacity">۱۶</span>
|
||
<div class="w-full max-w-[28px] bg-emerald-500/85 group-hover:bg-emerald-600 rounded-t-lg transition-all" style="height: 38%"></div>
|
||
</div>
|
||
<div class="flex-1 flex flex-col items-center gap-2 group h-full justify-end">
|
||
<span class="text-[10px] font-bold text-slate-500 opacity-0 group-hover:opacity-100 transition-opacity">۲۲</span>
|
||
<div class="w-full max-w-[28px] bg-emerald-500/85 group-hover:bg-emerald-600 rounded-t-lg transition-all" style="height: 52%"></div>
|
||
</div>
|
||
<div class="flex-1 flex flex-col items-center gap-2 group h-full justify-end">
|
||
<span class="text-[10px] font-bold text-slate-500 opacity-0 group-hover:opacity-100 transition-opacity">۲۶</span>
|
||
<div class="w-full max-w-[28px] bg-emerald-500/85 group-hover:bg-emerald-600 rounded-t-lg transition-all" style="height: 62%"></div>
|
||
</div>
|
||
<div class="flex-1 flex flex-col items-center gap-2 group h-full justify-end">
|
||
<span class="text-[10px] font-bold text-slate-500 opacity-0 group-hover:opacity-100 transition-opacity">۳۰</span>
|
||
<div class="w-full max-w-[28px] bg-emerald-500/85 group-hover:bg-emerald-600 rounded-t-lg transition-all" style="height: 72%"></div>
|
||
</div>
|
||
<div class="flex-1 flex flex-col items-center gap-2 group h-full justify-end">
|
||
<span class="text-[10px] font-bold text-slate-500 opacity-0 group-hover:opacity-100 transition-opacity">۲۸</span>
|
||
<div class="w-full max-w-[28px] bg-emerald-500/85 group-hover:bg-emerald-600 rounded-t-lg transition-all" style="height: 67%"></div>
|
||
</div>
|
||
<div class="flex-1 flex flex-col items-center gap-2 group h-full justify-end">
|
||
<span class="text-[11px] font-black text-emerald-700">۴۲</span>
|
||
<div class="w-full max-w-[28px] bg-gradient-to-t from-emerald-600 to-teal-400 rounded-t-lg shadow-sm shadow-emerald-500/30" style="height: 95%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Months Labels -->
|
||
<div class="flex items-center justify-between text-[11px] font-medium text-slate-400 pt-2.5 px-1">
|
||
<span class="flex-1 text-center">مهر</span>
|
||
<span class="flex-1 text-center">آبان</span>
|
||
<span class="flex-1 text-center">آذر</span>
|
||
<span class="flex-1 text-center">دی</span>
|
||
<span class="flex-1 text-center">بهمن</span>
|
||
<span class="flex-1 text-center">اسفند</span>
|
||
<span class="flex-1 text-center">فروردین</span>
|
||
<span class="flex-1 text-center">اردیبهشت</span>
|
||
<span class="flex-1 text-center">خرداد</span>
|
||
<span class="flex-1 text-center">تیر</span>
|
||
<span class="flex-1 text-center">مرداد</span>
|
||
<span class="flex-1 text-center font-bold text-emerald-700">شهریور</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Left: قیف فروش باز (5 Cols) -->
|
||
<div class="lg:col-span-5 bg-white rounded-2xl border border-slate-200/80 p-5 sm:p-6 shadow-2xs flex flex-col justify-between">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div>
|
||
<h3 class="font-bold text-slate-800 text-base">قیف فروش باز</h3>
|
||
<p class="text-xs text-slate-400 mt-0.5">توزیع معاملات فعال در هر مرحله</p>
|
||
</div>
|
||
<span class="text-xs font-bold bg-slate-100 text-slate-700 px-3 py-1 rounded-lg">۲۷ معامله باز</span>
|
||
</div>
|
||
|
||
<div class="space-y-4 my-auto">
|
||
<!-- Stage 1: تماس اول (۱۱) -->
|
||
<div>
|
||
<div class="flex items-center justify-between text-xs mb-1.5">
|
||
<span class="font-bold text-slate-700">تماس اول</span>
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="font-black text-slate-800 text-sm">۱۱</span>
|
||
<span class="text-[11px] text-slate-400">(۴۰.۷٪)</span>
|
||
</div>
|
||
</div>
|
||
<div class="w-full h-3 bg-slate-100 rounded-full overflow-hidden">
|
||
<div class="h-full bg-emerald-500 rounded-full" style="width: 92%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stage 2: نیازسنجی (۸) -->
|
||
<div>
|
||
<div class="flex items-center justify-between text-xs mb-1.5">
|
||
<span class="font-bold text-slate-700">نیازسنجی</span>
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="font-black text-slate-800 text-sm">۸</span>
|
||
<span class="text-[11px] text-slate-400">(۲۹.۶٪)</span>
|
||
</div>
|
||
</div>
|
||
<div class="w-full h-3 bg-slate-100 rounded-full overflow-hidden">
|
||
<div class="h-full bg-emerald-500 rounded-full" style="width: 67%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stage 3: پیشنهاد (۵) -->
|
||
<div>
|
||
<div class="flex items-center justify-between text-xs mb-1.5">
|
||
<span class="font-bold text-slate-700">پیشنهاد</span>
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="font-black text-slate-800 text-sm">۵</span>
|
||
<span class="text-[11px] text-slate-400">(۱۸.۵٪)</span>
|
||
</div>
|
||
</div>
|
||
<div class="w-full h-3 bg-slate-100 rounded-full overflow-hidden">
|
||
<div class="h-full bg-teal-500 rounded-full" style="width: 42%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stage 4: مذاکره (۳) -->
|
||
<div>
|
||
<div class="flex items-center justify-between text-xs mb-1.5">
|
||
<span class="font-bold text-slate-700">مذاکره</span>
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="font-black text-slate-800 text-sm">۳</span>
|
||
<span class="text-[11px] text-slate-400">(۱۱.۱٪)</span>
|
||
</div>
|
||
</div>
|
||
<div class="w-full h-3 bg-slate-100 rounded-full overflow-hidden">
|
||
<div class="h-full bg-teal-600 rounded-full" style="width: 25%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scale Footer -->
|
||
<div class="flex items-center justify-between text-[11px] text-slate-400 pt-3 border-t border-slate-100 font-mono">
|
||
<span>۰</span>
|
||
<span>۲</span>
|
||
<span>۴</span>
|
||
<span>۶</span>
|
||
<span>۸</span>
|
||
<span>۱۰</span>
|
||
<span>۱۲</span>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<div class="pt-2 flex items-center justify-between border-b border-slate-200/80 pb-3">
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="w-1.5 h-6 bg-teal-600 rounded-full"></div>
|
||
<div>
|
||
<h2 class="text-lg font-extrabold text-slate-800">منابع و عملیات</h2>
|
||
<p class="text-xs text-slate-500">ورود مشتری، دلایل باخت و ترکیب پیگیریها</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||
|
||
<!-- Col 1: منابع ورود مشتریان -->
|
||
<div class="bg-white rounded-2xl border border-slate-200/80 p-5 sm:p-6 shadow-2xs flex flex-col justify-between">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h3 class="font-bold text-slate-800 text-base">منابع ورود مشتریان</h3>
|
||
<span class="text-xs font-medium text-slate-400 bg-slate-100 px-2.5 py-1 rounded-lg">۱۲ ماه اخیر</span>
|
||
</div>
|
||
|
||
<div class="flex flex-col sm:flex-row items-center gap-6 my-auto">
|
||
<!-- Donut -->
|
||
<div class="w-36 h-36 relative flex items-center justify-center shrink-0">
|
||
<svg viewBox="0 0 100 100" class="w-full h-full -rotate-90">
|
||
<circle cx="50" cy="50" r="38" fill="none" stroke="#f1f5f9" stroke-width="10" />
|
||
<!-- فرم لید: 32.2% (76.8) -->
|
||
<circle cx="50" cy="50" r="38" fill="none" stroke="#10b981" stroke-width="10" stroke-dasharray="76.8 238.7" stroke-dashoffset="0" />
|
||
<!-- معرفی دوستان: 23.7% (56.5) -->
|
||
<circle cx="50" cy="50" r="38" fill="none" stroke="#3b82f6" stroke-width="10" stroke-dasharray="56.5 238.7" stroke-dashoffset="-76.8" />
|
||
<!-- وبسایت: 17.8% (42.5) -->
|
||
<circle cx="50" cy="50" r="38" fill="none" stroke="#f59e0b" stroke-width="10" stroke-dasharray="42.5 238.7" stroke-dashoffset="-133.3" />
|
||
<!-- اکسل: 14.4% (34.3) -->
|
||
<circle cx="50" cy="50" r="38" fill="none" stroke="#8b5cf6" stroke-width="10" stroke-dasharray="34.3 238.7" stroke-dashoffset="-175.8" />
|
||
<!-- تلفن + سایر: 11.9% (28.6) -->
|
||
<circle cx="50" cy="50" r="38" fill="none" stroke="#ec4899" stroke-width="10" stroke-dasharray="28.6 238.7" stroke-dashoffset="-210.1" />
|
||
</svg>
|
||
<div class="absolute inset-0 flex flex-col items-center justify-center">
|
||
<span class="text-xl font-black text-slate-800 leading-none">۱۱۸</span>
|
||
<span class="text-[11px] font-medium text-slate-400 mt-1">مشتری</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Legend List -->
|
||
<div class="w-full space-y-2 text-xs">
|
||
<div class="flex items-center justify-between py-1 border-b border-slate-50">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
|
||
<span class="font-medium text-slate-700">فرم لید</span>
|
||
</div>
|
||
<span class="font-bold text-slate-800">۳۲.۲٪</span>
|
||
</div>
|
||
<div class="flex items-center justify-between py-1 border-b border-slate-50">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2.5 h-2.5 rounded-full bg-blue-500"></span>
|
||
<span class="font-medium text-slate-700">معرفی دوستان</span>
|
||
</div>
|
||
<span class="font-bold text-slate-800">۲۳.۷٪</span>
|
||
</div>
|
||
<div class="flex items-center justify-between py-1 border-b border-slate-50">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2.5 h-2.5 rounded-full bg-amber-500"></span>
|
||
<span class="font-medium text-slate-700">وبسایت</span>
|
||
</div>
|
||
<span class="font-bold text-slate-800">۱۷.۸٪</span>
|
||
</div>
|
||
<div class="flex items-center justify-between py-1 border-b border-slate-50">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2.5 h-2.5 rounded-full bg-violet-500"></span>
|
||
<span class="font-medium text-slate-700">اکسل</span>
|
||
</div>
|
||
<span class="font-bold text-slate-800">۱۴.۴٪</span>
|
||
</div>
|
||
<div class="flex items-center justify-between py-1 border-b border-slate-50">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2.5 h-2.5 rounded-full bg-pink-500"></span>
|
||
<span class="font-medium text-slate-700">تلفن</span>
|
||
</div>
|
||
<span class="font-bold text-slate-800">۶.۸٪</span>
|
||
</div>
|
||
<div class="flex items-center justify-between py-1">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2.5 h-2.5 rounded-full bg-rose-400"></span>
|
||
<span class="font-medium text-slate-700">سایر</span>
|
||
</div>
|
||
<span class="font-bold text-slate-800">۵.۱٪</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Col 2: دلایل باخت -->
|
||
<div class="bg-white rounded-2xl border border-slate-200/80 p-5 sm:p-6 shadow-2xs flex flex-col justify-between">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h3 class="font-bold text-slate-800 text-base">دلایل باخت</h3>
|
||
<span class="text-xs font-medium text-slate-400 bg-slate-100 px-2.5 py-1 rounded-lg">۱۲ ماه اخیر</span>
|
||
</div>
|
||
|
||
<div class="flex flex-col items-center justify-center my-auto py-2">
|
||
<div class="w-40 h-40 relative flex items-center justify-center">
|
||
<svg viewBox="0 0 100 100" class="w-full h-full -rotate-90">
|
||
<circle cx="50" cy="50" r="38" fill="none" stroke="#f1f5f9" stroke-width="12" />
|
||
<!-- بدون دلیل ثبتشده: 40% (95.5) -->
|
||
<circle cx="50" cy="50" r="38" fill="none" stroke="#10b981" stroke-width="12" stroke-dasharray="95.5 238.7" stroke-dashoffset="0" />
|
||
<!-- زمانبندی: 24% (57.3) -->
|
||
<circle cx="50" cy="50" r="38" fill="none" stroke="#14b8a6" stroke-width="12" stroke-dasharray="57.3 238.7" stroke-dashoffset="-95.5" />
|
||
<!-- رقیب: 20% (47.7) -->
|
||
<circle cx="50" cy="50" r="38" fill="none" stroke="#f59e0b" stroke-width="12" stroke-dasharray="47.7 238.7" stroke-dashoffset="-152.8" />
|
||
<!-- قیمت: 16% (38.2) -->
|
||
<circle cx="50" cy="50" r="38" fill="none" stroke="#3b82f6" stroke-width="12" stroke-dasharray="38.2 238.7" stroke-dashoffset="-200.5" />
|
||
</svg>
|
||
<div class="absolute inset-0 flex flex-col items-center justify-center">
|
||
<span class="text-xl font-black text-slate-800 leading-none">۲۵</span>
|
||
<span class="text-[11px] font-medium text-slate-400 mt-1">معامله باخته</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Legend Pills -->
|
||
<div class="grid grid-cols-2 gap-2.5 w-full mt-5 pt-3 border-t border-slate-100 text-xs">
|
||
<div class="flex items-center justify-between bg-slate-50 px-3 py-1.5 rounded-lg">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="w-2.5 h-2.5 rounded-sm bg-emerald-500"></span>
|
||
<span class="text-slate-600 font-medium">بدون دلیل ثبتشده</span>
|
||
</div>
|
||
<span class="font-bold text-slate-800">۴۰٪</span>
|
||
</div>
|
||
<div class="flex items-center justify-between bg-slate-50 px-3 py-1.5 rounded-lg">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="w-2.5 h-2.5 rounded-sm bg-teal-500"></span>
|
||
<span class="text-slate-600 font-medium">زمانبندی</span>
|
||
</div>
|
||
<span class="font-bold text-slate-800">۲۴٪</span>
|
||
</div>
|
||
<div class="flex items-center justify-between bg-slate-50 px-3 py-1.5 rounded-lg">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="w-2.5 h-2.5 rounded-sm bg-amber-500"></span>
|
||
<span class="text-slate-600 font-medium">رقیب</span>
|
||
</div>
|
||
<span class="font-bold text-slate-800">۲۰٪</span>
|
||
</div>
|
||
<div class="flex items-center justify-between bg-slate-50 px-3 py-1.5 rounded-lg">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="w-2.5 h-2.5 rounded-sm bg-blue-500"></span>
|
||
<span class="text-slate-600 font-medium">قیمت</span>
|
||
</div>
|
||
<span class="font-bold text-slate-800">۱۶٪</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Col 3: ترکیب فعالیتهای باز -->
|
||
<div class="bg-white rounded-2xl border border-slate-200/80 p-5 sm:p-6 shadow-2xs flex flex-col justify-between">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h3 class="font-bold text-slate-800 text-base">ترکیب فعالیتهای باز</h3>
|
||
<span class="text-xs font-bold bg-teal-50 text-teal-700 px-2.5 py-1 rounded-lg">۳۶ مورد</span>
|
||
</div>
|
||
|
||
<div class="h-44 flex items-end justify-around gap-4 pt-6 px-4 border-b border-slate-100 pb-3 my-auto">
|
||
<!-- تماس (۱۴) -->
|
||
<div class="flex flex-col items-center gap-2 flex-1 h-full justify-end group">
|
||
<span class="text-xs font-black text-slate-700">۱۴</span>
|
||
<div class="w-full max-w-[42px] bg-teal-500 group-hover:bg-teal-600 rounded-t-xl transition-all shadow-xs" style="height: 85%"></div>
|
||
</div>
|
||
<!-- جلسه (۷) -->
|
||
<div class="flex flex-col items-center gap-2 flex-1 h-full justify-end group">
|
||
<span class="text-xs font-black text-slate-700">۷</span>
|
||
<div class="w-full max-w-[42px] bg-teal-500/80 group-hover:bg-teal-600 rounded-t-xl transition-all" style="height: 45%"></div>
|
||
</div>
|
||
<!-- کار (۱۱) -->
|
||
<div class="flex flex-col items-center gap-2 flex-1 h-full justify-end group">
|
||
<span class="text-xs font-black text-slate-700">۱۱</span>
|
||
<div class="w-full max-w-[42px] bg-teal-500/90 group-hover:bg-teal-600 rounded-t-xl transition-all" style="height: 68%"></div>
|
||
</div>
|
||
<!-- یادداشت (۴) -->
|
||
<div class="flex flex-col items-center gap-2 flex-1 h-full justify-end group">
|
||
<span class="text-xs font-black text-slate-700">۴</span>
|
||
<div class="w-full max-w-[42px] bg-teal-400/75 group-hover:bg-teal-600 rounded-t-xl transition-all" style="height: 26%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center justify-around text-xs font-semibold text-slate-600 pt-3">
|
||
<span class="flex-1 text-center">تماس</span>
|
||
<span class="flex-1 text-center">جلسه</span>
|
||
<span class="flex-1 text-center">کار</span>
|
||
<span class="flex-1 text-center">یادداشت</span>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<section class="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||
|
||
<!-- Right: فعالیتهای اخیر (6 Cols) -->
|
||
<div class="lg:col-span-6 bg-white rounded-2xl border border-slate-200/80 p-5 sm:p-6 shadow-2xs flex flex-col justify-between">
|
||
<div class="flex items-center justify-between mb-5">
|
||
<div class="flex items-center gap-2">
|
||
<h3 class="font-bold text-slate-800 text-base">فعالیتهای اخیر</h3>
|
||
<span class="bg-slate-100 text-slate-700 text-xs font-bold px-2.5 py-0.5 rounded-full">۳</span>
|
||
</div>
|
||
<a href="#" class="text-xs font-bold text-blue-600 hover:text-blue-700 flex items-center gap-1">
|
||
<span>مشاهده همه</span>
|
||
<i data-lucide="arrow-up-left" class="w-3.5 h-3.5"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="space-y-3.5 my-auto relative before:absolute before:right-5 before:top-4 before:bottom-4 before:w-0.5 before:bg-slate-100">
|
||
|
||
<!-- Activity 1 -->
|
||
<div class="relative flex items-center justify-between gap-4 bg-slate-50/70 hover:bg-slate-50 border border-slate-200/60 rounded-xl p-3.5 transition-all">
|
||
<div class="flex items-center gap-3.5">
|
||
<div class="w-10 h-10 rounded-xl bg-blue-50 text-blue-600 border border-blue-200/60 flex items-center justify-center shrink-0 z-10">
|
||
<i data-lucide="phone" class="w-4 h-4"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-sm text-slate-800">تماس پیگیری پیشنهاد آکمه</h4>
|
||
<p class="text-xs text-slate-500 mt-1">تماس · ۲۹ مهر ۱۴۰۵، ۱۳:۲۰</p>
|
||
</div>
|
||
</div>
|
||
<span class="text-[11px] font-bold bg-sky-50 text-sky-700 border border-sky-200/70 px-2.5 py-1 rounded-lg shrink-0">در انتظار</span>
|
||
</div>
|
||
|
||
<!-- Activity 2 -->
|
||
<div class="relative flex items-center justify-between gap-4 bg-slate-50/70 hover:bg-slate-50 border border-slate-200/60 rounded-xl p-3.5 transition-all">
|
||
<div class="flex items-center gap-3.5">
|
||
<div class="w-10 h-10 rounded-xl bg-amber-50 text-amber-600 border border-amber-200/60 flex items-center justify-center shrink-0 z-10">
|
||
<i data-lucide="users" class="w-4 h-4"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-sm text-slate-800">جلسه دمو با پارسنوین</h4>
|
||
<p class="text-xs text-slate-500 mt-1">جلسه · ۳۰ مهر ۱۴۰۵، ۱۲:۲۰</p>
|
||
</div>
|
||
</div>
|
||
<span class="text-[11px] font-bold bg-sky-50 text-sky-700 border border-sky-200/70 px-2.5 py-1 rounded-lg shrink-0">در انتظار</span>
|
||
</div>
|
||
|
||
<!-- Activity 3 -->
|
||
<div class="relative flex items-center justify-between gap-4 bg-slate-50/70 hover:bg-slate-50 border border-slate-200/60 rounded-xl p-3.5 transition-all">
|
||
<div class="flex items-center gap-3.5">
|
||
<div class="w-10 h-10 rounded-xl bg-emerald-50 text-emerald-600 border border-emerald-200/60 flex items-center justify-center shrink-0 z-10">
|
||
<i data-lucide="check" class="w-4 h-4"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-sm text-slate-800">ارسال پیشفاکتور سپهر</h4>
|
||
<p class="text-xs text-slate-500 mt-1">وظیفه · ۲۹ مهر ۱۴۰۵، ۰۵:۲۰</p>
|
||
</div>
|
||
</div>
|
||
<span class="text-[11px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200/70 px-2.5 py-1 rounded-lg shrink-0">انجام شد</span>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Left: مشتریان برتر (6 Cols) -->
|
||
<div class="lg:col-span-6 bg-white rounded-2xl border border-slate-200/80 p-5 sm:p-6 shadow-2xs flex flex-col justify-between">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div class="flex items-center gap-2">
|
||
<i data-lucide="trophy" class="w-5 h-5 text-amber-500"></i>
|
||
<div>
|
||
<h3 class="font-bold text-slate-800 text-base">مشتریان برتر</h3>
|
||
<p class="text-[11px] text-slate-400">بر اساس معاملات برنده اخیر</p>
|
||
</div>
|
||
</div>
|
||
<a href="#" class="text-xs font-bold text-blue-600 hover:text-blue-700 flex items-center gap-1">
|
||
<span>مشاهده همه</span>
|
||
<i data-lucide="arrow-up-left" class="w-3.5 h-3.5"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="space-y-2.5 my-auto">
|
||
|
||
<!-- Rank 1: شرکت آکمه -->
|
||
<div class="p-3 rounded-xl bg-amber-50/50 border border-amber-200/80 flex items-center gap-3">
|
||
<span class="w-6 h-6 rounded-full bg-amber-400 text-white font-black text-xs flex items-center justify-center shrink-0 shadow-2xs">۱</span>
|
||
<div class="w-9 h-9 rounded-full bg-emerald-600 text-white font-bold text-xs flex items-center justify-center shrink-0">ش</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-center justify-between mb-1.5">
|
||
<div class="flex items-center gap-2">
|
||
<span class="font-bold text-sm text-slate-800 truncate">شرکت آکمه</span>
|
||
<span class="text-[10px] font-bold bg-amber-100 text-amber-800 px-2 py-0.5 rounded-full">رتبه یک</span>
|
||
</div>
|
||
<span class="text-xs font-bold text-slate-600">۷ معامله</span>
|
||
</div>
|
||
<div class="w-full h-2 bg-amber-100 rounded-full overflow-hidden">
|
||
<div class="h-full bg-amber-500 rounded-full" style="width: 100%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Rank 2: گروه پارسنوین -->
|
||
<div class="p-2.5 rounded-xl bg-slate-50/70 border border-slate-100 flex items-center gap-3">
|
||
<span class="w-6 h-6 rounded-full bg-slate-200 text-slate-700 font-bold text-xs flex items-center justify-center shrink-0">۲</span>
|
||
<div class="w-8 h-8 rounded-full bg-teal-600 text-white font-bold text-xs flex items-center justify-center shrink-0">گ</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-center justify-between mb-1.5">
|
||
<span class="font-bold text-xs sm:text-sm text-slate-800 truncate">گروه پارسنوین</span>
|
||
<span class="text-xs font-semibold text-slate-500">۵ معامله</span>
|
||
</div>
|
||
<div class="w-full h-1.5 bg-slate-200 rounded-full overflow-hidden">
|
||
<div class="h-full bg-emerald-500 rounded-full" style="width: 72%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Rank 3: سارا محمدی -->
|
||
<div class="p-2.5 rounded-xl bg-slate-50/70 border border-slate-100 flex items-center gap-3">
|
||
<span class="w-6 h-6 rounded-full bg-slate-200 text-slate-700 font-bold text-xs flex items-center justify-center shrink-0">۳</span>
|
||
<div class="w-8 h-8 rounded-full bg-emerald-500 text-white font-bold text-xs flex items-center justify-center shrink-0">س</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-center justify-between mb-1.5">
|
||
<span class="font-bold text-xs sm:text-sm text-slate-800 truncate">سارا محمدی</span>
|
||
<span class="text-xs font-semibold text-slate-500">۴ معامله</span>
|
||
</div>
|
||
<div class="w-full h-1.5 bg-slate-200 rounded-full overflow-hidden">
|
||
<div class="h-full bg-emerald-500 rounded-full" style="width: 58%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Rank 4: صنایع سپهر -->
|
||
<div class="p-2.5 rounded-xl bg-slate-50/70 border border-slate-100 flex items-center gap-3">
|
||
<span class="w-6 h-6 rounded-full bg-slate-200 text-slate-700 font-bold text-xs flex items-center justify-center shrink-0">۴</span>
|
||
<div class="w-8 h-8 rounded-full bg-teal-500 text-white font-bold text-xs flex items-center justify-center shrink-0">ص</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-center justify-between mb-1.5">
|
||
<span class="font-bold text-xs sm:text-sm text-slate-800 truncate">صنایع سپهر</span>
|
||
<span class="text-xs font-semibold text-slate-500">۳ معامله</span>
|
||
</div>
|
||
<div class="w-full h-1.5 bg-slate-200 rounded-full overflow-hidden">
|
||
<div class="h-full bg-emerald-500 rounded-full" style="width: 44%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Rank 5: رضا کریمی -->
|
||
<div class="p-2.5 rounded-xl bg-slate-50/70 border border-slate-100 flex items-center gap-3">
|
||
<span class="w-6 h-6 rounded-full bg-slate-200 text-slate-700 font-bold text-xs flex items-center justify-center shrink-0">۵</span>
|
||
<div class="w-8 h-8 rounded-full bg-emerald-600 text-white font-bold text-xs flex items-center justify-center shrink-0">ر</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-center justify-between mb-1.5">
|
||
<span class="font-bold text-xs sm:text-sm text-slate-800 truncate">رضا کریمی</span>
|
||
<span class="text-xs font-semibold text-slate-500">۳ معامله</span>
|
||
</div>
|
||
<div class="w-full h-1.5 bg-slate-200 rounded-full overflow-hidden">
|
||
<div class="h-full bg-emerald-500 rounded-full" style="width: 44%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<section class="bg-white rounded-2xl border border-slate-200/80 p-5 sm:p-6 shadow-2xs">
|
||
<div class="flex items-center justify-between mb-5">
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="w-9 h-9 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center">
|
||
<i data-lucide="kanban" class="w-5 h-5"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-slate-800 text-base">جریان فروش</h3>
|
||
<p class="text-xs text-slate-400">نمای سریع معاملات در مراحل کلیدی</p>
|
||
</div>
|
||
</div>
|
||
<a href="#" class="text-xs font-bold text-blue-600 hover:text-blue-700 bg-blue-50 px-3 py-1.5 rounded-xl flex items-center gap-1 transition-colors">
|
||
<span>نمایش همه</span>
|
||
<i data-lucide="arrow-up-left" class="w-3.5 h-3.5"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
|
||
|
||
<!-- Column 1: تماس اول (۲) -->
|
||
<div class="bg-slate-50/90 border border-slate-200/70 rounded-2xl p-4 flex flex-col gap-3">
|
||
<div class="flex items-center justify-between pb-2 border-b border-slate-200/80">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
|
||
<h4 class="font-bold text-sm text-slate-700">تماس اول</h4>
|
||
</div>
|
||
<span class="bg-white border border-slate-200 text-slate-700 text-xs font-bold px-2.5 py-0.5 rounded-full shadow-2xs">۲</span>
|
||
</div>
|
||
|
||
<!-- Deal Card 1 -->
|
||
<div class="bg-white p-3.5 rounded-xl border border-slate-200/80 shadow-2xs hover:border-emerald-400 transition-all cursor-pointer flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200 font-bold text-xs flex items-center justify-center shrink-0">ش</div>
|
||
<div>
|
||
<h5 class="font-bold text-sm text-slate-800">شرکت آکمه</h5>
|
||
<p class="text-xs font-medium text-slate-500 mt-0.5">۴۵,۰۰۰,۰۰۰ ریال · <span class="text-slate-400">دیروز</span></p>
|
||
</div>
|
||
</div>
|
||
<i data-lucide="more-vertical" class="w-4 h-4 text-slate-400"></i>
|
||
</div>
|
||
|
||
<!-- Deal Card 2 -->
|
||
<div class="bg-white p-3.5 rounded-xl border border-slate-200/80 shadow-2xs hover:border-emerald-400 transition-all cursor-pointer flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-full bg-teal-50 text-teal-700 border border-teal-200 font-bold text-xs flex items-center justify-center shrink-0">س</div>
|
||
<div>
|
||
<h5 class="font-bold text-sm text-slate-800">سارا محمدی</h5>
|
||
<p class="text-xs font-medium text-slate-500 mt-0.5">۳۲,۰۰۰,۰۰۰ ریال · <span class="text-emerald-600 font-semibold">امروز</span></p>
|
||
</div>
|
||
</div>
|
||
<i data-lucide="more-vertical" class="w-4 h-4 text-slate-400"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Column 2: نیازسنجی (۱) -->
|
||
<div class="bg-slate-50/90 border border-slate-200/70 rounded-2xl p-4 flex flex-col gap-3">
|
||
<div class="flex items-center justify-between pb-2 border-b border-slate-200/80">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2.5 h-2.5 rounded-full bg-blue-500"></span>
|
||
<h4 class="font-bold text-sm text-slate-700">نیازسنجی</h4>
|
||
</div>
|
||
<span class="bg-white border border-slate-200 text-slate-700 text-xs font-bold px-2.5 py-0.5 rounded-full shadow-2xs">۱</span>
|
||
</div>
|
||
|
||
<!-- Deal Card -->
|
||
<div class="bg-white p-3.5 rounded-xl border border-slate-200/80 shadow-2xs hover:border-blue-400 transition-all cursor-pointer flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-full bg-blue-50 text-blue-700 border border-blue-200 font-bold text-xs flex items-center justify-center shrink-0">گ</div>
|
||
<div>
|
||
<h5 class="font-bold text-sm text-slate-800">گروه پارسنوین</h5>
|
||
<p class="text-xs font-medium text-slate-500 mt-0.5">۶۸,۰۰۰,۰۰۰ ریال · <span class="text-emerald-600 font-semibold">امروز</span></p>
|
||
</div>
|
||
</div>
|
||
<i data-lucide="more-vertical" class="w-4 h-4 text-slate-400"></i>
|
||
</div>
|
||
|
||
<div class="border border-dashed border-slate-200 rounded-xl p-4 text-center text-xs text-slate-400 my-auto">
|
||
+ افزودن معامله به نیازسنجی
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Column 3: پیشنهاد (۱) -->
|
||
<div class="bg-slate-50/90 border border-slate-200/70 rounded-2xl p-4 flex flex-col gap-3">
|
||
<div class="flex items-center justify-between pb-2 border-b border-slate-200/80">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2.5 h-2.5 rounded-full bg-amber-500"></span>
|
||
<h4 class="font-bold text-sm text-slate-700">پیشنهاد</h4>
|
||
</div>
|
||
<span class="bg-white border border-slate-200 text-slate-700 text-xs font-bold px-2.5 py-0.5 rounded-full shadow-2xs">۱</span>
|
||
</div>
|
||
|
||
<!-- Deal Card -->
|
||
<div class="bg-white p-3.5 rounded-xl border border-slate-200/80 shadow-2xs hover:border-amber-400 transition-all cursor-pointer flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-full bg-amber-50 text-amber-700 border border-amber-200 font-bold text-xs flex items-center justify-center shrink-0">ص</div>
|
||
<div>
|
||
<h5 class="font-bold text-sm text-slate-800">صنایع سپهر</h5>
|
||
<p class="text-xs font-medium text-slate-500 mt-0.5">۱۲۰,۰۰۰,۰۰۰ ریال · <span class="text-emerald-600 font-semibold">امروز</span></p>
|
||
</div>
|
||
</div>
|
||
<i data-lucide="more-vertical" class="w-4 h-4 text-slate-400"></i>
|
||
</div>
|
||
|
||
<div class="border border-dashed border-slate-200 rounded-xl p-4 text-center text-xs text-slate-400 my-auto">
|
||
+ افزودن معامله به مرحله پیشنهاد
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- Notification Toast Box -->
|
||
<div id="toastBox" class="fixed bottom-5 left-5 z-50 hidden bg-slate-900 text-white text-xs sm:text-sm font-medium px-4 py-3 rounded-xl shadow-xl flex items-center gap-3 border border-slate-700">
|
||
<i data-lucide="sparkles" class="w-4 h-4 text-emerald-400 shrink-0"></i>
|
||
<span id="toastText">عملیات انجام شد</span>
|
||
</div>
|
||
|
||
<script>
|
||
lucide.createIcons();
|
||
|
||
function showToast(msg) {
|
||
const box = document.getElementById('toastBox');
|
||
const text = document.getElementById('toastText');
|
||
text.textContent = msg;
|
||
box.classList.remove('hidden');
|
||
clearTimeout(window.toastTimer);
|
||
window.toastTimer = setTimeout(() => {
|
||
box.classList.add('hidden');
|
||
}, 3200);
|
||
}
|
||
|
||
function focusAIInput() {
|
||
const input = document.getElementById('cardAiInput');
|
||
input.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
setTimeout(() => input.focus(), 300);
|
||
}
|
||
|
||
function fillPrompt(promptText) {
|
||
const input = document.getElementById('cardAiInput');
|
||
input.value = promptText;
|
||
input.focus();
|
||
showToast(`پرامپت «${promptText}» آماده ارسال است`);
|
||
}
|
||
|
||
function submitAiPrompt() {
|
||
const input = document.getElementById('cardAiInput');
|
||
const val = input.value.trim();
|
||
if (!val) {
|
||
showToast('لطفاً سوال یا دستور خود را بنویسید');
|
||
return;
|
||
}
|
||
showToast(`در حال تحلیل CRM برای: «${val}»...`);
|
||
}
|
||
|
||
function triggerQuickAsk() {
|
||
const input = document.getElementById('topAiInput');
|
||
const val = input.value.trim();
|
||
if (!val) {
|
||
showToast('سوال خود را در کادر بالا وارد کنید');
|
||
return;
|
||
}
|
||
showToast(`پاسخ هوشمند برای «${val}» در حال آمادهسازی است...`);
|
||
}
|
||
|
||
function switchTrendTab(btn, period) {
|
||
document.querySelectorAll('.trend-tab').forEach(el => {
|
||
el.classList.remove('bg-white', 'text-slate-800', 'shadow-2xs');
|
||
el.classList.add('text-slate-500');
|
||
});
|
||
btn.classList.add('bg-white', 'text-slate-800', 'shadow-2xs');
|
||
btn.classList.remove('text-slate-500');
|
||
|
||
const names = { '1m': 'این ماه', '3m': '۳ ماه اخیر', '6m': '۶ ماه اخیر', '12m': '۱۲ ماه اخیر' };
|
||
showToast(`نمودار روند فروش روی بازه «${names[period]}» تنظیم شد`);
|
||
}
|
||
|
||
// Ctrl+K shortcut
|
||
window.addEventListener('keydown', (e) => {
|
||
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
|
||
e.preventDefault();
|
||
document.getElementById('topAiInput').focus();
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |