Files
CRM_Montzar/apps/web/src/views/adm/code_artifact (2).html
T
Mahdi 26792f9a37 feat: migrate CRM screens to Ant Design Vue and expand home dashboard
Preserve the local Ant UI work across views/components and add the new home dashboard chart panels before merging latest main.
2026-11-03 16:51:51 +03:30

1296 lines
93 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>