/* کدهای CSS مستقیماً اینجا قرار گرفته‌اند */ .afshar-dashboard-container { font-family: ‘Vazirmatn’, sans-serif; background-color: #FDFBF7; color: #4A4A4A; } .afshar-dashboard-container .btn-tier { transition: all 0.3s ease; border-width: 2px; } .afshar-dashboard-container .btn-bronze { background-color: #CD7F3220; border-color: #CD7F32; color: #CD7F32; } .afshar-dashboard-container .btn-bronze.active, .afshar-dashboard-container .btn-bronze:hover { background-color: #CD7F32; color: white; } .afshar-dashboard-container .btn-silver { background-color: #C0C0C020; border-color: #A9A9A9; color: #A9A9A9; } .afshar-dashboard-container .btn-silver.active, .afshar-dashboard-container .btn-silver:hover { background-color: #A9A9A9; color: white; } .afshar-dashboard-container .btn-gold { background-color: #FFD70020; border-color: #FFC400; color: #FFC400; } .afshar-dashboard-container .btn-gold.active, .afshar-dashboard-container .btn-gold:hover { background-color: #FFC400; color: white; } .afshar-dashboard-container .item-card { background-color: #FFFFFF; border: 1px solid #ECECEC; border-radius: 12px; padding: 1.5rem; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05); } .afshar-dashboard-container .item-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.07); } .afshar-dashboard-container .chart-container { position: relative; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; height: 300px; max-height: 400px; } @media (min-width: 768px) { .afshar-dashboard-container .chart-container { height: 350px; } }const promotionalItems = [ { id: 1, name: ‘بروشور’, icon: ‘📜’, tiers: [‘bronze’, ‘silver’, ‘gold’], conditions: ‘بازاریاب موظف است اطمینان حاصل کند که تمام مشتریان بروشور را در فروشگاه خود موجود و در معرض دید قرار داده‌اند.’, quota: ‘نامحدود، متناسب با حجم سفارش’ }, { id: 2, name: ‘ساعت دیواری’, icon: ‘🕒’, tiers: [‘bronze’, ‘silver’, ‘gold’], conditions: ‘بازاریاب موظف است در هر ویزیت، جانمایی صحیح و کارکرد ساعت را بررسی و در صورت خرابی، موضوع را از مشتری پیگیری نماید.’, quota: ‘۱ عدد برای هر فروشگاه فعال’ }, { id: 3, name: ‘لیوان’, icon: ‘☕’, tiers: [‘bronze’, ‘silver’, ‘gold’], conditions: ‘ارائه به پرسنل کلیدی فروشگاه جهت استفاده روزمره.’, quota: ‘برنزی: ۱ عدد | نقره‌ای/طلایی: تا ۲ عدد (بیشتر با تایید سرپرست)’ }, { id: 4, name: ‘جا بروشوری’, icon: ‘📚’, tiers: [‘silver’, ‘gold’], conditions: ‘مخصوص فروشگاه‌های بالای ۵۰ متر یا هایپرمارکتی که مکان مناسبی برای جانمایی آن داشته باشند.’, quota: ‘۱ عدد’ }, { id: 5, name: ‘تیشرت’, icon: ‘👕’, tiers: [‘gold’], conditions: ‘مخصوص فروشگاه‌های با بیش از ۵ پرسنل. بازاریاب باید بر استفاده و نظافت تیشرت‌ها نظارت کرده و در صورت لزوم، تذکر مؤدبانه به پرسنل ارائه دهد.’, quota: ‘۱ عدد به ازای هر کارمند فروش’ }, { id: 6, name: ‘استیکر (مش)’, icon: ‘🖼️’, tiers: [‘gold’], conditions: ‘برای مشتریانی که حداقل یک سال با مجموعه همکاری داشته‌اند. تمامی نکات اجرایی مربوط به تابلو در این مورد نیز صدق می‌کند.’, quota: ‘بر اساس متراژ و با تایید سرپرست’ }, { id: 7, name: ‘پلاستیک تبلیغاتی’, icon: ‘🛍️’, tiers: [‘gold’], conditions: ‘ارائه فقط به مشتریان تک‌برند. تارگت فروش توسط سرپرست و با هماهنگی بازاریاب به مشتری اعلام می‌شود.’, quota: ‘تحقق تارگت: ۵ تا ۱۵ کیلوگرم در ماه’ }, { id: 8, name: ‘تابلو فروشگاهی’, icon: ‘🏪’, tiers: [‘gold’], conditions: ‘ارائه به مشتریان استراتژیک. نصب منوط به تکمیل چک‌لیست ارزیابی و عقد قرارداد رسمی است. مشتری حق دخالت در طراحی ندارد.’, quota: ‘متراژ: عرض ۳-۵ متر، ارتفاع ۱-۱.۵ متر’ } ]; const itemsGrid = document.getElementById(‘items-grid’); const tierButtons = { bronze: document.getElementById(‘btn-bronze’), silver: document.getElementById(‘btn-silver’), gold: document.getElementById(‘btn-gold’) }; let currentTier = ‘gold’; function renderItems(tier) { itemsGrid.innerHTML = ”; const filteredItems = promotionalItems.filter(item => item.tiers.includes(tier)); if (filteredItems.length === 0) { itemsGrid.innerHTML = `

موردی برای نمایش در این سطح وجود ندارد.

`; return; } filteredItems.forEach(item => { const card = document.createElement(‘div’); card.className = ‘item-card flex flex-col’; card.innerHTML = ` `; itemsGrid.appendChild(card); }); } function handleTierSelection(event) { const selectedTier = event.target.id.split(‘-‘)[1]; if (selectedTier === currentTier) return; currentTier = selectedTier; Object.values(tierButtons).forEach(button => button.classList.remove(‘active’)); event.target.classList.add(‘active’); renderItems(currentTier); } Object.values(tierButtons).forEach(button => { button.addEventListener(‘click’, handleTierSelection); }); function renderChart() { const ctx = document.getElementById(‘tierChart’).getContext(‘2d’); const tierCounts = { bronze: promotionalItems.filter(item => item.tiers.includes(‘bronze’)).length, silver: promotionalItems.filter(item => item.tiers.includes(‘silver’)).length, gold: promotionalItems.filter(item => item.tiers.includes(‘gold’)).length }; new Chart(ctx, { type: ‘bar’, data: { labels: [‘سطح برنزی’, ‘سطح نقره‌ای’, ‘سطح طلایی’], datasets: [{ label: ‘تعداد اقلام قابل ارائه’, data: [tierCounts.bronze, tierCounts.silver, tierCounts.gold], backgroundColor: [‘rgba(205, 127, 50, 0.6)’, ‘rgba(192, 192, 192, 0.6)’, ‘rgba(255, 215, 0, 0.6)’], borderColor: [‘rgb(205, 127, 50)’, ‘rgb(192, 192, 192)’, ‘rgb(255, 215, 0)’], borderWidth: 1, borderRadius: 5 }] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, ticks: { stepSize: 1, font: { family: “‘Vazirmatn’, sans-serif” } } }, x: { ticks: { font: { family: “‘Vazirmatn’, sans-serif”, size: 14 } } } }, plugins: { legend: { display: false }, tooltip: { bodyFont: { family: “‘Vazirmatn’, sans-serif” }, titleFont: { family: “‘Vazirmatn’, sans-serif” } } } } }); } if (document.readyState === ‘loading’) { document.addEventListener(‘DOMContentLoaded’, () => { renderItems(currentTier); renderChart(); }); } else { renderItems(currentTier); renderChart(); }