Spaces:
Running
Running
Ctrl+K
<!DOCTYPE html> <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>مدل توانمندسازی شعبه دو تامین اجتماعی اهواز — نسخهٔ مشاور هوشمند</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <style> body { font-family: 'Vazirmatn', sans-serif; background-color: #F5F5DC; } .tab-btn { transition: all 0.3s ease; border-bottom: 4px solid transparent; } .tab-btn.active { border-bottom-color: #008080; color: #008080; font-weight: 600; } .content-section { display: none; } .content-section.active { display: block; animation: fadeIn 0.5s; }
@keyframes
fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .card { background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); } .accordion-header { cursor: pointer; transition: background-color 0.3s ease; } .accordion-header:hover { background-color: rgba(0, 128, 128, 0.1); } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out; } .tool-btn.active { background-color: #008080; color: white; } .tool-content { display: none; } .tool-content.active { display: block; } .consultant-suggestion { border-right: 4px solid #FFA500; background-color: #FFF8E1; padding: 1rem; margin-top: 1rem; border-radius: 0 8px 8px 0; } .highlight-focus { box-shadow: 0 0 15px rgba(255, 165, 0, 0.7); border: 2px solid #FFA500; } </style> </head> <body class="bg-gray-50 text-gray-800"> <div class="container mx-auto p-4 md:p-8"> <header class="text-center mb-8"> <h1 class="text-3xl md:text-4xl font-bold text-teal-700">مدل رشد مرکب شعبه: نسخه مشاور هوشمند</h1> <p class="text-lg text-slate-600 mt-2">یک سیستم تصمیم‌یار پویا برای راهبری شعبه دو تامین اجتماعی اهواز</p> </header> <section class="card p-4 rounded-xl shadow-md mb-8"> <label for="simulation-selector" class="block font-semibold text-slate-700 mb-2">🔧 شبیه‌ساز شرایط شعبه:</label> <select id="simulation-selector" class="w-full p-2 rounded-md bg-white border"> <option value="normal">شرایط عادی (عملکرد طبق انتظار)</option> <option value="recession">رکود اقتصادی (وصولی‌ها تحت فشار)</option> <option value="low_morale">افت روحیه تیم (کاهش بهره‌وری داخلی)</option> <option value="energy_crisis">بحران انرژی (محدودیت‌های خارجی)</option> <option value="high_backlog">افزایش بار کاری (پرونده‌های معوق)</option> </select> </section> <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> <div class="card p-5 rounded-xl shadow-md text-center"> <h3 class="text-slate-500 font-semibold">پرسنل کلیدی مدیریتی</h3> <p id="kpiKeyStaff" class="text-4xl font-bold text-teal-600 mt-2">0</p> </div> <div class="card p-5 rounded-xl shadow-md text-center"> <h3 class="text-slate-500 font-semibold">تعداد واحدها</h3> <p id="kpiUnits" class="text-4xl font-bold text-teal-600 mt-2">0</p> </div> <div class="card p-5 rounded-xl shadow-md text-center"> <h3 class="text-slate-500 font-semibold">طبقات فعال</h3> <p id="kpiFloors" class="text-4xl font-bold text-teal-600 mt-2">0</p> </div> <div id="advisor-card-container" class="card p-5 rounded-xl shadow-lg text-center md:col-span-1 lg:col-span-1 border-t-4 border-orange-500"> <h3 class="font-bold text-slate-700 mb-2">💡 توصیه مشاور هوشمند</h3> <p id="advisor-card-text" class="text-sm text-slate-600">تحلیل اولیه در حال انجام است...</p> </div> <div class="card p-6 rounded-xl shadow-md md:col-span-2 lg:col-span-4"> <div class="chart-container mx-auto" style="position: relative; height:40vh; max-height: 400px; width:100%; max-width: 900px;"> <canvas id="kpiChart"></canvas> </div> </div> </section> <nav class="bg-white rounded-lg shadow-sm mb-8 sticky top-2 z-10"> <div class="flex flex-wrap justify-center items-center p-2"> <button data-tab="phase0" class="tab-btn p-3 md:p-4 text-sm md:text-base font-medium text-slate-600 active">فاز صفر: نقشه وضع موجود</button> <button data-tab="branch1" class="tab-btn p-3 md:p-4 text-sm md:text-base font-medium text-slate-600">شاخه ۱: انتخاب‌ها</button> <button data-tab="branch2" class="tab-btn p-3 md:p-4 text-sm md:text-base font-medium text-slate-600">شاخه ۲: عادت‌سازی</button> <button data-tab="branch3" class="tab-btn p-3 md:p-4 text-sm md:text-base font-medium text-slate-600">شاخه ۳: تکانش</button> <button data-tab="branch4" class="tab-btn p-3 md:p-4 text-sm md:text-base font-medium text-slate-600">شاخه ۴: ابزارها</button> <button data-tab="branch5" class="tab-btn p-3 md:p-4 text-sm md:text-base font-medium text-slate-600">شاخه ۵: نوآوری</button> </div> </nav> <main> <section id="phase0" class="content-section active"></section> <section id="branch1" class="content-section"></section> <section id="branch2" class="content-section"></section> <section id="branch3" class="content-section"></section> <section id="branch4" class="content-section"></section> <section id="branch5" class="content-section"></section> </main> </div> <script> const branchData = { meta: { keyStaff: 15, unitsCount: 12, floors: 5 }, kpi: { months: ["فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور"], target: [87, 88, 89, 90, 91, 92], scenarios: { normal: [88, 89, 88, 91, 92, 93], recession: [82, 83, 85, 84, 86, 87], low_morale: [86, 87, 85, 88, 89, 90], energy_crisis:[87, 88, 86, 89, 90, 91], high_backlog:[88, 89, 88, 90, 91, 92] } }, structure: [ { floor: 'همکف', units: [{ name: 'دبیرخانه', head: 'N/A' }] }, { floor: 'طبقه اول', units: [{ name: 'معاونت بیمه‌ای', head: 'آقای باجلانی' }, { name: 'نام‌نویسی', head: 'خانم طبیب' }, { name: 'امور اداری', head: 'خانم قماشی' }] }, { floor: 'طبقه دوم', units: [{ name: 'امور مستمری‌ها', head: 'خانم شیخی' }, { name: 'امور بیمه‌شدگان', head: 'خانم مرداسی' }] }, { floor: 'طبقه سوم', units: [{ name: 'ریاست', head: 'آقای امینی‌فر' }, { name: 'معاونت مالی', head: 'آقای ستوده‌نیا' }, { name: 'امور مالی', head: 'خانم فاطمی' }, { name: 'فرآوری داده‌ها', head: 'خانم ابدالی' }] }, { floor: 'طبقه چهارم', units: [{ name: 'درآمد', head: 'آقای بهداروند' }, { name: 'بازرسی', head: 'آقای طباطبایی' }, { name: 'اجرائیات', head: 'خانم کرمی' }] } ], tools: [ { id: 'revenue', name: 'درآمد', head: 'آقای بهداروند', description: 'طراحی یک <strong>داشبورد تحلیلی</strong> برای اولویت‌بندی هوشمند کارگاه‌های بدهکار.' }, { id: 'pensions', name: 'مستمری‌ها', head: 'خانم شیخی', description: 'ساخت یک <strong>ابزار VBA</strong> برای خودکارسازی فرآیند صدور و ویرایش احکام جهت کاهش خطا و زمان.' }, { id: 'registration', name: 'نام‌نویسی', head: 'خانم طبیب', description: 'ایجاد یک <strong>فرم ورود اطلاعات هوشمند (UserForm)</strong> با اعتبارسنجی لحظه‌ای برای جلوگیری از ورود داده‌های اشتباه.' }, { id: 'finance', name: 'امور مالی', head: 'خانم فاطمی', description: 'یک <strong>ماکروی VBA</strong> برای تولید گزارش‌های مالی و تحلیلی روزانه با یک کلیک.' }, { id: 'inspection', name: 'بازرسی', head: 'آقای طباطبایی', description: 'طراحی یک <strong>چک‌لیست بازرسی هوشمند</strong> در اکسل برای تبلت جهت ثبت دیجیتال و بی‌واسطه نتایج.' } ] }; let kpiChartInstance = null; function animateCount(element, finalValue) { let start = 0; const duration = 1500; const stepTime = Math.abs(Math.floor(duration / finalValue)); if (stepTime === 0 || !isFinite(stepTime)) { element.textContent = finalValue; return; } const timer = setInterval(() => { start += 1; element.textContent = start; if (start >= finalValue) clearInterval(timer); }, stepTime); } function buildKpiChart(labels, data, targetData) { const ctx = document.getElementById('kpiChart').getContext('2d'); if (kpiChartInstance) kpiChartInstance.destroy(); kpiChartInstance = new Chart(ctx, { type: 'line', data: { labels: labels, datasets: [ { label: 'وصولی واقعی (میلیارد تومان)', data: data, borderColor: '#008080', backgroundColor: 'rgba(0, 128, 128, 0.1)', fill: true, tension: 0.4 }, { label: 'هدف وصولی (میلیارد تومان)', data: targetData, borderColor: '#FF6347', borderDash: [5, 5], fill: false, tension: 0.4 } ] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: false, ticks: { font: { family: 'Vazirmatn' } }, title: { display: true, text: 'مبلغ وصولی', font: { family: 'Vazirmatn' } } }, x: { ticks: { font: { family: 'Vazirmatn' } } } }, plugins: { legend: { labels: { font: { family: 'Vazirmatn', size: 14 } } }, tooltip: { bodyFont: { family: 'Vazirmatn' }, titleFont: { family: 'Vazirmatn' } } } } }); } const renderAdvisorContent = (scenario) => { let advice = {}; // Remove all previous highlights document.querySelectorAll('.highlight-focus').forEach(el => el.classList.remove('highlight-focus')); switch(scenario) { case 'recession': advice = { main: "شرایط رکود اقتصادی شناسایی شد. تمرکز باید بر حفظ نقدینگی و حمایت از کارفرمایان خوش‌حساب باشد. پلن B فعال شود.", branch1: "<strong>توصیه استراتژیک:</strong> با توجه به شرایط، فشار بر بدهکاران ممکن است نتیجه معکوس دهد. فعال‌سازی <strong>پلن B</strong> (حفظ و توسعه پایدار) توصیه می‌شود. تیم‌های درآمد و امور بیمه‌شدگان باید جلسات مشاوره‌ای با کارفرمایان کلیدی برگزار کنند.", branch2: "<strong>توصیه انگیزشی:</strong> در شرایط سخت اقتصادی، تقدیر از تلاش‌ها حیاتی است. برنامه <strong>'کارت طلایی تشکر'</strong> را برای تقویت روحیه تیم و تقدیر از تلاش‌های کوچک فعال کنید.", branch4_focus: "revenue" }; document.getElementById('planB_card').classList.add('highlight-focus'); break; case 'low_morale': advice = { main: "سیگنال‌های افت روحیه در تیم مشاهده می‌شود. اولویت با اقدامات انگیزشی و بهبود ارتباطات داخلی است.", branch1: "<strong>توصیه استراتژیک:</strong> بهره‌وری داخلی تحت تاثیر قرار گرفته. پیش از اعمال فشار برای اهداف بیرونی، روی تیم تمرکز کنید. برگزاری یک جلسه عمومی شفاف برای شنیدن دغدغه‌های کارکنان پیشنهاد می‌شود.", branch2: "<strong>توصیه انگیزشی:</strong> اقدام فوری برای تقویت روحیه ضروری است. اجرای همزمان <strong>'جام قهرمانان بین واحدی'</strong> برای ایجاد رقابت سالم و <strong>'کارت طلایی تشکر'</strong> برای تقدیرهای فردی، اکیداً توصیه می‌شود.", branch5: "<strong>توصیه نوآوری:</strong> برای درگیر کردن تیم در حل مسائل، یک <strong>'جلسه حل مسئله با نقشه ذهنی'</strong> با موضوع 'چگونه محیط کار شادتری داشته باشیم؟' برگزار کنید." }; document.getElementById('branch2_incentives').classList.add('highlight-focus'); break; case 'energy_crisis': advice = { main: "هشدار بحران انرژی دریافت شد. باید بهره‌وری را ضمن کاهش مصرف انرژی حفظ کنیم. پلن‌های مدیریت بحران فعال شوند.", branch3: "<strong>اقدام فوری:</strong> با توجه به محدودیت‌ها، اجرای فوری پلن‌های مدیریت بحران ضروری است. <strong>'چهارشنبه‌های بدون کاغذ'</strong> و <strong>'شیفت‌های چرخشی خنک'</strong> را فوراً ابلاغ نمایید تا هم در مصرف صرفه‌جویی شود و هم رفاه کارکنان تامین گردد." }; document.getElementById('branch3_crisis_plans').classList.add('highlight-focus'); break; case 'high_backlog': advice = { main: "تعداد پرونده‌های معوق در واحدهای کلیدی افزایش یافته است. تمرکز باید بر بهینه‌سازی فرآیندها و استفاده از ابزارهای هوشمند باشد.", branch4: "<strong>اولویت بالا:</strong> گلوگاه‌های فرآیندی شناسایی شده است. استقرار فوری ابزارهای مکانیزاسیون برای واحدهای <strong>نام‌نویسی</strong> و <strong>مستمری‌ها</strong> جهت کاهش بار کاری دستی و تسریع رسیدگی به پرونده‌ها، حیاتی است.", branch4_focus: "pensions" }; document.getElementById('branch4_tools_container').classList.add('highlight-focus'); break; default: // normal advice = { main: "عملکرد شعبه مطابق با اهداف است. زمان مناسبی برای تمرکز بر بهبودهای مستمر و نوآوری است.", branch1: "<strong>توصیه استراتژیک:</strong> شرایط برای پیشبرد اهداف اصلی مساعد است. تمرکز بر <strong>پلن A</strong> (اقدام فعال و تهاجمی) برای افزایش وصولی‌ها ادامه یابد.", branch5: "<strong>توصیه نوآوری:</strong> از این پایداری برای آینده‌سازی استفاده کنید. راه‌اندازی <strong>'بانک ایده‌های مرکب'</strong> برای جمع‌آوری پیشنهادات بهبود از سوی تمام کارکنان پیشنهاد می‌شود." }; document.getElementById('planA_card').classList.add('highlight-focus'); } document.getElementById('advisor-card-text').textContent = advice.main || "تمام سیستم‌ها در حالت عادی و پایدار قرار دارند."; document.getElementById('branch1_consultant_suggestion').innerHTML = advice.branch1 || ""; document.getElementById('branch2_consultant_suggestion').innerHTML = advice.branch2 || ""; document.getElementById('branch3_consultant_suggestion').innerHTML = advice.branch3 || ""; document.getElementById('branch4_consultant_suggestion').innerHTML = advice.branch4 || ""; document.getElementById('branch5_consultant_suggestion').innerHTML = advice.branch5 || ""; // Highlight the focused tool const toolButtons = document.querySelectorAll('.tool-btn'); toolButtons.forEach(btn => { if(advice.branch4_focus && btn.dataset.tool === advice.branch4_focus) { btn.click(); // Simulate click to show the content and activate the button btn.classList.add('highlight-focus'); } else { btn.classList.remove('highlight-focus'); } }); }; const renderContent = () => { document.getElementById('phase0').innerHTML = ` <div class="text-center mb-6"><h2 class="text-2xl font-semibold text-teal-700">فاز صفر: نقشه وضع موجود</h2><p class="text-slate-600 mt-1">شناخت جامع پتانسیل‌ها و چالش‌های شعبه.</p></div> <div class="space-y-4">${branchData.structure.map(f => ` <div class="card rounded-lg overflow-hidden"><div class="accordion-header p-4 flex justify-between items-center bg-teal-50"><h3 class="font-semibold text-lg text-teal-800">${f.floor}</h3><span class="transform transition-transform duration-300 text-teal-800">▼</span></div> <div class="accordion-content"><div class="p-4 border-t border-teal-200">${f.units.map(u => `<p class="mb-2 pb-2 border-b last:border-b-0"><strong>${u.name}:</strong> ${u.head}</p>`).join('')}</div></div></div>`).join('')} </div>`; document.getElementById('branch1').innerHTML = ` <div class="text-center mb-6"><h2 class="text-2xl font-semibold text-teal-700">شاخه ۱: انتخاب‌های راهبردی</h2><p class="text-slate-600 mt-1">افزایش وصول حق بیمه با سناریوهای مشخص.</p></div> <div id="branch1_consultant_suggestion" class="consultant-suggestion"></div> <div class="grid md:grid-cols-2 gap-8 mt-4"> <div id="planA_card" class="card p-6 rounded-lg shadow-lg border-l-4 border-teal-500"><h3 class="font-bold text-xl mb-3 text-teal-800">سناریوی اصلی (پلن A)</h3><p class="mb-4">تمرکز بر شناسایی کارگاه‌های جدید و وصول مطالبات معوق.</p><p><strong>مسئولین:</strong> آقای طباطبایی (بازرسی)، خانم کرمی (اجرائیات)</p></div> <div id="planB_card" class="card p-6 rounded-lg shadow-lg border-l-4 border-orange-500"><h3 class="font-bold text-xl mb-3 text-orange-800">پلن جایگزین (پلن B)</h3><p class="mb-4">تمرکز بر افزایش رضایت کارفرمایان خوش‌حساب و ارائه مشاوره.</p><p><strong>مسئولین:</strong> آقای بهداروند (درآمد)، خانم مرداسی (امور بیمه‌شدگان)</p></div> </div>`; document.getElementById('branch2').innerHTML = ` <div class="text-center mb-6"><h2 class="text-2xl font-semibold text-teal-700">شاخه ۲: عادت‌سازی سازمانی</h2><p class="text-slate-600 mt-1">ایجاد شوق و اشتیاق واقعی با مشوق‌های هوشمند.</p></div> <div id="branch2_consultant_suggestion" class="consultant-suggestion"></div> <div id="branch2_incentives" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mt-4"> <div class="card p-6 rounded-lg"><h3 class="font-bold text-lg mb-2 text-teal-800">جام قهرمانان بین واحدی</h3><p>ایجاد رقابت سالم ماهانه بین واحدها با جایزه تیمی (مانند یک ساعت تعجیل در خروج).</p></div> <div class="card p-6 rounded-lg"><h3 class="font-bold text-lg mb-2 text-teal-800">کارت طلایی تشکر</h3><p>تقدیر شخصی و آنی رئیس شعبه از عملکردهای فراتر از انتظار (قابل تبدیل به مرخصی تشویقی).</p></div> <div class="card p-6 rounded-lg lg:col-span-1 md:col-span-2"><h3 class="font-bold text-lg mb-2 text-orange-800">تنبیه آموزنده: یاد بگیر و یاد بده</h3><p>تبدیل خطای فردی به فرصت یادگیری گروهی از طریق ارائه همان فرد.</p></div> </div>`; document.getElementById('branch3').innerHTML = ` <div class="text-center mb-6"><h2 class="text-2xl font-semibold text-teal-700">شاخه ۳: ایجاد تکانش و تداوم</h2><p class="text-slate-600 mt-1">مقابله با بحران‌ها و تبدیل تهدیدها به فرصت.</p></div> <div id="branch3_consultant_suggestion" class="consultant-suggestion"></div> <div id="branch3_crisis_plans" class="grid md:grid-cols-3 gap-6 mt-4"> <div class="card p-6 rounded-lg"><h3 class="font-bold text-lg mb-2">چهارشنبه‌های بدون کاغذ</h3><p>کاهش بار سیستم سرمایشی و حرکت به سمت دیجیتال‌سازی.</p></div> <div class="card p-6 rounded-lg"><h3 class="font-bold text-lg mb-2">شیفت‌های چرخشی خنک</h3><p>مدیریت مصرف انرژی و رفاه کارکنان در اوج گرما از طریق دورکاری.</p></div> <div class="card p-6 rounded-lg"><h3 class="font-bold text-lg mb-2">آموزش در تعطیلی اجباری</h3><p>تبدیل زمان‌های تعطیلی به فرصتی برای وبینارهای آموزشی آنلاین.</p></div> </div>`; document.getElementById('branch4').innerHTML = ` <div class="text-center mb-6"><h2 class="text-2xl font-semibold text-teal-700">شاخه ۴: ابزارهای نوین</h2><p class="text-slate-600 mt-1">کاهش خطا و سرعت‌دهی با ابزارهای هوشمند (راهبر: خانم ابدالی).</p></div> <div id="branch4_consultant_suggestion" class="consultant-suggestion"></div> <div id="branch4_tools_container" class="mt-4"> <div class="flex flex-wrap justify-center gap-2 mb-6" id="tool-nav">${branchData.tools.map((t, i) => `<button data-tool="${t.id}" class="tool-btn px-4 py-2 rounded-md text-sm font-semibold transition-colors duration-300 border ${i===0 ? 'active' : ''}">${t.name}</button>`).join('')}</div> <div id="tool-content-area" class="card p-6 rounded-lg shadow-inner min-h-[150px]">${branchData.tools.map((t, i) => `<div id="${t.id}" class="tool-content ${i===0 ? 'active' : ''}"><h3 class="font-bold text-xl mb-3 text-teal-800">${t.name} - ${t.head}</h3><p>${t.description}</p></div>`).join('')}</div> </div>`; document.getElementById('branch5').innerHTML = ` <div class="text-center mb-6"><h2 class="text-2xl font-semibold text-teal-700">شاخه ۵: نوآوری</h2><p class="text-slate-600 mt-1">ایجاد فرهنگ بهبود مستمر و پایدار.</p></div> <div id="branch5_consultant_suggestion" class="consultant-suggestion"></div> <div class="grid md:grid-cols-2 gap-8 mt-4"> <div class="card p-6 rounded-lg"><h3 class="font-bold text-xl mb-3">بانک ایده‌های مرکب</h3><p>بستری برای ثبت و دیده‌شدن ایده‌های بهبود (هرچند کوچک) توسط تمام کارکنان.</p></div> <div class="card p-6 rounded-lg"><h3 class="font-bold text-xl mb-3">جلسات حل مسئله با نقشه ذهنی</h3><p>استفاده از خرد جمعی تیم‌های داوطلب بین واحدی برای حل چالش‌های اصلی شعبه.</p></div> </div>`; } document.addEventListener('DOMContentLoaded', () => { renderContent(); const scenarioSelector = document.getElementById('simulation-selector'); const updateDashboard = () => { const scenario = scenarioSelector.value; const collectionData = branchData.kpi.scenarios[scenario]; buildKpiChart(branchData.kpi.months, collectionData, branchData.kpi.target); renderAdvisorContent(scenario); }; scenarioSelector.addEventListener('change', updateDashboard); const tabButtons = document.querySelectorAll('.tab-btn'); const contentSections = document.querySelectorAll('.content-section'); tabButtons.forEach(button => { button.addEventListener('click', () => { tabButtons.forEach(btn => btn.classList.remove('active')); contentSections.forEach(section => section.classList.remove('active')); button.classList.add('active'); document.getElementById(button.dataset.tab).classList.add('active'); }); }); document.body.addEventListener('click', (e) => { if (e.target.closest('.accordion-header')) { const header = e.target.closest('.accordion-header'); const content = header.nextElementSibling; const icon = header.querySelector('span'); const isOpen = content.style.maxHeight; document.querySelectorAll('.accordion-content').forEach(c => c.style.maxHeight = null); document.querySelectorAll('.accordion-header span').forEach(i => i.style.transform = 'rotate(0deg)'); if (!isOpen) { content.style.maxHeight = content.scrollHeight + 'px'; icon.style.transform = 'rotate(180deg)'; } } if (e.target.closest('.tool-btn')) { const button = e.target.closest('.tool-btn'); const toolId = button.dataset.tool; document.querySelectorAll('.tool-btn').forEach(btn => btn.classList.remove('active')); button.classList.add('active'); document.querySelectorAll('.tool-content').forEach(content => content.classList.remove('active')); document.getElementById(toolId).classList.add('active'); } }); animateCount(document.getElementById('kpiKeyStaff'), branchData.meta.keyStaff); animateCount(document.getElementById('kpiUnits'), branchData.meta.unitsCount); animateCount(document.getElementById('kpiFloors'), branchData.meta.floors); updateDashboard(); }); </script> </body> </html> ```eof - Follow Up Deployment
d4c9d78
verified