Spaces:

humanvprojectceo
/

Cafe

Running

App Files Files Community

humanvprojectceo commited on about 19 hours ago

Commit

2e1a881

verified ·

1 Parent(s): e198e3b

Update cafe.html

Browse files

Files changed (1) hide show

cafe.html +263 -245

cafe.html CHANGED Viewed

@@ -16,16 +16,16 @@
                         sans: ['Vazirmatn', 'sans-serif'],
                     },
                     colors: {
-                        obsidian: '#09090b',       /* مشکی تیره خالص */
-                        coal: '#121215',           /* خاکستری ذغالی */
-                        clay: '#1c1c22',           /* خاکستری روشن‌تر */
-                        brass: '#c5a880',          /* برنز گرم */
-                        brassHover: '#dcc6a8',     /* برنز روشن */
                         emeraldMuted: '#10b981',   /* سبز تایید نهایی */
                     },
                     boxShadow: {
-                        glow: '0 0 20px rgba(197, 168, 128, 0.12)',
-                        greenGlow: '0 0 25px rgba(16, 185, 129, 0.2)',
                     }
                 }
             }
@@ -37,33 +37,34 @@
             color: #f4f4f5;
             -webkit-tap-highlight-color: transparent;
         }
-        /* تنظیمات اسکرول‌بار اختصاصی باریک */
         ::-webkit-scrollbar {
             width: 4px;
         }
         ::-webkit-scrollbar-track {
-            background: #121215;
         }
         ::-webkit-scrollbar-thumb {
-            background: #2c2c35;
-            border-radius: 2px;
         }
     </style>
 </head>
-<body class="min-h-screen flex flex-col font-sans selection:bg-amber-500 selection:text-black overflow-x-hidden bg-gradient-to-tr from-obsidian via-[#0d0e12] to-[#120f0a] antialiased">
-    <!-- تصویر زمینه هاله‌های نوری در دسکتاپ -->
     <div class="hidden lg:block absolute inset-0 overflow-hidden pointer-events-none z-0">
         <div class="absolute -top-[10%] -left-[5%] w-[600px] h-[600px] rounded-full bg-brass/3 blur-[140px]"></div>
         <div class="absolute -bottom-[10%] -right-[5%] w-[600px] h-[600px] rounded-full bg-brass/2 blur-[140px]"></div>
     </div>
-    <!-- هدر پنل مدیریت -->
-    <header class="border-b border-[#2c2c35]/40 bg-coal/50 backdrop-blur-md sticky top-0 z-50 px-4 py-4 md:px-8">
         <div class="max-w-7xl mx-auto flex items-center justify-between">
             <div class="flex items-center gap-3">
-                <div class="w-10 h-10 rounded-xl bg-brass/10 border border-brass/20 flex items-center justify-center">
-                    <svg class="w-6 h-6 text-brass" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                         <path d="M17 8h1a4 4 0 1 1 0 8h-1" />
                         <path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z" />
                         <line x1="6" y1="2" x2="6" y2="4" />
@@ -75,12 +76,12 @@
                     <h1 class="text-sm font-extrabold text-white flex items-center gap-2">
                         پنل مدیریت ادمین <span class="text-brass">Cafe AI</span>
                     </h1>
-                    <p class="text-[10px] text-zinc-500 font-medium">پایش لحظه‌ای سفارشات آشپزخانه و منوی فعال هوش مصنوعی</p>
                 </div>
             </div>
             <div class="flex items-center gap-3">
-                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] font-bold bg-emeraldMuted/10 text-emerald-400 border border-emeraldMuted/20">
                     <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                     نظارت زنده فعال
                 </span>
@@ -88,30 +89,30 @@
         </div>
     </header>
-    <!-- بدنه چیدمان اصلی پنل ادمین -->
     <main class="flex-1 max-w-7xl w-full mx-auto p-4 md:p-6 lg:p-8 grid grid-cols-1 lg:grid-cols-12 gap-6 z-10 relative">
-        <!-- ستون سمت راست: پایش سفارشات فعال و آپلود فاکتور منو (۷ از ۱۲) -->
         <section class="lg:col-span-7 flex flex-col gap-6">
-            <!-- باکس مانیتورینگ سفارشات آشپزخانه -->
-            <div class="bg-coal/60 border border-[#2c2c35]/40 rounded-2xl p-5 shadow-xl backdrop-blur-md">
-                <div class="flex items-center justify-between mb-4 border-b border-[#2c2c35]/30 pb-3">
-                    <h2 class="text-xs font-extrabold text-white flex items-center gap-2">
-                        <svg class="w-4 h-4 text-brass" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
-                        </svg>
-                        سفارشات جدید آشپزخانه
-                    </h2>
                     <button onclick="fetchActiveOrders()" class="text-[10px] text-zinc-500 hover:text-brass flex items-center gap-1 transition-all duration-300">
                         <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 1121.21 15H15" />
                         </svg>
-                        بروزرسانی دستی
                     </button>
                 </div>
-                <!-- ظرف دربرگیرنده لیست سفارشات -->
                 <div id="ordersContainer" class="space-y-4 max-h-[350px] overflow-y-auto pr-1">
                     <div class="text-center py-12 text-xs text-zinc-500">
                         در حال بارگذاری لیست سفارشات جاری...
@@ -119,48 +120,53 @@
                 </div>
             </div>
-            <!-- بخش آپلود و استخراج خودکار عکس منو -->
-            <div class="bg-coal/60 border border-[#2c2c35]/40 rounded-2xl p-5 shadow-xl backdrop-blur-md space-y-4">
-                <h2 class="text-xs font-extrabold text-white flex items-center gap-2 border-b border-[#2c2c35]/30 pb-3">
                     <svg class="w-4 h-4 text-brass" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                     </svg>
-                    استخراج منوی جدید با تصویر
                 </h2>
                 <p class="text-[11px] text-zinc-500 leading-relaxed">
-                    با کشیدن و رها کردن یا انتخاب عکس منوی جدید، هوش مصنوعی نیلا ساختار قیمت‌ها و محصولات را فوراً استخراج می‌کند تا پس از ویرایش برای مشتریان منتشر کنید.
                 </p>
-                <!-- زون آپلود فایل -->
-                <div class="border-2 border-dashed border-[#2c2c35] hover:border-brass/30 rounded-xl p-6 text-center cursor-pointer transition-all bg-obsidian/30" onclick="document.getElementById('menuFileInput').click()">
                     <input type="file" id="menuFileInput" class="hidden" accept="image/*,application/pdf" onchange="uploadMenuFile(event)">
                     <div class="flex flex-col items-center gap-2.5">
-                        <svg class="w-7 h-7 text-zinc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
                         </svg>
-                        <span class="text-xs text-zinc-300 font-medium">عکس منوی جدید را جهت بارگذاری انتخاب کنید</span>
-                        <span class="text-[9px] text-zinc-500 uppercase tracking-wider">فرمت‌های تصویری یا فایل PDF</span>
                     </div>
                 </div>
-                <!-- افکت لودینگ تحلیل هوش مصنوعی -->
-                <div id="uploadLoader" class="hidden text-center py-6 bg-obsidian/40 rounded-xl border border-[#2c2c35]/40 animate-pulse">
                     <div class="inline-block animate-spin rounded-full h-7 w-7 border-t-2 border-b-2 border-brass mb-2"></div>
-                    <p class="text-[10px] text-brass font-bold">نیلا در حال پردازش متون و فاکتور منوی جدید است. لطفاً چند لحظه شکیبا باشید...</p>
                 </div>
-                <!-- جدول ویرایش اقلام استخراج شده -->
-                <div id="menuEditorContainer" class="hidden space-y-4 border-t border-[#2c2c35]/30 pt-4">
                     <h3 class="text-xs font-bold text-brass flex items-center gap-1.5">
-                        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                         </svg>
-                        بازبینی و بازسازی منوی جاری پیش از انتشار
                     </h3>
-                    <div class="overflow-x-auto max-h-[250px] border border-[#2c2c35]/40 rounded-xl bg-obsidian/20">
-                        <table class="min-w-full divide-y divide-[#2c2c35]/40 text-[11px]">
                             <thead class="bg-coal">
                                 <tr>
                                     <th class="px-3 py-2.5 text-right font-medium text-zinc-400">عنوان محصول</th>
@@ -169,18 +175,18 @@
                                     <th class="px-3 py-2.5 text-center font-medium text-zinc-400 w-16">عملیات</th>
                                 </tr>
                             </thead>
-                            <tbody id="menuEditorTableBody" class="divide-y divide-[#2c2c35]/40">
-                                <!-- سطرها -->
                             </tbody>
                         </table>
                     </div>
                     <div class="flex justify-end gap-2">
-                        <button onclick="addEmptyMenuRow()" class="px-3 py-1.5 border border-[#2c2c35] hover:border-zinc-500 rounded-lg text-[10px] text-zinc-300 transition-all duration-300">
-                            افزودن محصول جدید
                         </button>
-                        <button onclick="saveAndPublishMenu()" class="px-4 py-1.5 bg-emerald-600 hover:bg-emerald-500 rounded-lg text-[11px] font-extrabold text-white transition-all duration-300 flex items-center gap-1.5 shadow-greenGlow">
-                            تایید و فعالسازی منوی زنده مشتریان
                         </button>
                     </div>
                 </div>
@@ -188,58 +194,55 @@
             </div>
         </section>
-        <!-- ستون سمت چپ: چت مدیریت با هوش مصنوعی نیلا جهت تغییر موجودی (۵ از ۱۲) -->
-        <section class="lg:col-span-5 flex flex-col bg-coal/60 border border-[#2c2c35]/40 rounded-2xl shadow-xl h-[630px] overflow-hidden backdrop-blur-md">
-            <!-- سربرگ چت ادمین -->
-            <div class="px-5 py-4 border-b border-[#2c2c35]/40 flex items-center justify-between bg-obsidian/20">
                 <div class="flex items-center gap-3">
-                    <div class="w-10 h-10 rounded-xl bg-brass/10 border border-brass/20 flex items-center justify-center">
-                        <svg class="w-5 h-5 text-brass" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                             <path d="M12 2a10 10 0 0 1 10 10c0 5.523-4.477 10-10 10S2 17.523 2 12A10 10 0 0 1 12 2z"/>
                             <path d="M12 8v4l3 3"/>
                         </svg>
                     </div>
                     <div>
-                        <h3 class="text-xs font-extrabold text-white">دستیار مدیریت منو (Nila)</h3>
-                        <p class="text-[9px] text-zinc-500 font-medium">تغییر زنده وضعیت موجودی محصولات با مکالمه</p>
                     </div>
                 </div>
             </div>
-            <!-- بدنه چت باکس ادمین -->
             <div id="chatMessages" class="flex-1 overflow-y-auto p-4 space-y-4">
                 <div class="flex gap-2.5 max-w-[85%]">
-                    <div class="w-7 h-7 rounded-lg bg-brass/10 border border-brass/20 flex items-center justify-center flex-shrink-0">
-                        <svg class="w-4 h-4 text-brass" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <circle cx="12" cy="12" r="10"/>
-                            <path d="M12 8v4l3 3"/>
-                        </svg>
                     </div>
-                    <div class="bg-obsidian/50 border border-[#2c2c35]/40 text-zinc-300 text-xs rounded-2xl rounded-tr-none px-3.5 py-2.5 leading-relaxed font-sans">
-                        سلام ادمین گرامی! من نیلا هستم، دستیار مدیریت منوی Cafe AI. شما می‌توانید از همین‌جا اقلام منو را با گفتگوی ساده کنترل کنید؛ برای مثال بنویسید: "کروسان ساده تمام شد" یا "چای ماسالا را موجود کن" تا سریعاً تغییرات روی سیستم مشتریان نیز اعمال گردد.
                     </div>
                 </div>
             </div>
-            <!-- لودر تایپ ادمین چت -->
-            <div id="chatLoader" class="hidden px-4 py-2 flex items-center justify-between bg-obsidian/30 text-[9px] text-zinc-500 font-bold border-t border-[#2c2c35]/40">
                 <div class="flex items-center gap-2">
                     <div class="flex space-x-1 space-x-reverse">
                         <span class="w-1.5 h-1.5 bg-brass rounded-full animate-bounce" style="animation-delay: 0.1s"></span>
                         <span class="w-1.5 h-1.5 bg-brass rounded-full animate-bounce" style="animation-delay: 0.2s"></span>
                         <span class="w-1.5 h-1.5 bg-brass rounded-full animate-bounce" style="animation-delay: 0.3s"></span>
                     </div>
-                    <span>نیلا در حال پردازش دستور مدیریت...</span>
                 </div>
-                <button onclick="stopAdminChat()" class="px-2.5 py-1 bg-rose-950/20 border border-rose-800/30 hover:bg-rose-900/40 rounded-lg text-[9px] text-rose-400 font-bold transition-all">
-                    توقف پاسخ
                 </button>
             </div>
-            <!-- فرم ارسال پیام در چت ادمین -->
-            <form id="chatForm" onsubmit="sendAdminMessage(event)" class="p-3 border-t border-[#2c2c35]/40 bg-obsidian/30 flex gap-2">
-                <input type="text" id="chatInput" placeholder="دستور جدید را به صورت متنی بنویسید..." autocomplete="off" class="flex-1 bg-coal border border-[#2c2c35]/40 text-xs text-zinc-200 placeholder-zinc-600 rounded-lg px-3.5 py-2.5 focus:outline-none focus:border-brass/30 transition-all duration-300">
                 <button type="submit" id="sendBtn" class="bg-brass hover:bg-brassHover text-obsidian font-extrabold px-4 py-2.5 rounded-lg text-xs transition-all duration-300 flex items-center justify-center flex-shrink-0 shadow-glow">
                     <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
@@ -251,65 +254,63 @@
     </main>
-    <!-- فوتر پایین پنل -->
-    <footer class="border-t border-[#2c2c35]/30 py-4 text-center text-[10px] text-zinc-600 bg-obsidian/90">
         طراحی و توسعه توسط الگوریتم داده نسترن | کلیه حقوق محفوظ است © ۲۰۲۶
     </footer>
-    <!-- منطق جاوا اسکریپت پنل مدیریت ادمین -->
     <script>
         let chatHistory = [
-            { role: 'model', content: 'سلام ادمین گرامی! من نیلا هستم، دستیار مدیریت منوی Cafe AI. شما می‌توانید از همین‌جا اقلام منو را با گفتگوی ساده کنترل کنید؛ برای مثال بنویسید: "کروسان ساده تمام شد" یا "چای ماسالا را موجود کن" تا سریعاً تغییرات روی سیستم مشتریان نیز اعمال گردد.' }
         ];
         let abortController = null;
         let isGenerating = false;
         window.addEventListener('DOMContentLoaded', () => {
             fetchActiveOrders();
-            // بروزرسانی خودکار سفارشات هر ۱۰ ثانیه
             setInterval(fetchActiveOrders, 10000);
         });
-        // --- مدیریت پایش سفارشات زنده ---
         async function fetchActiveOrders() {
             const container = document.getElementById('ordersContainer');
             try {
                 const response = await fetch('/api/admin/orders');
                 const orders = await response.json();
                 if (response.ok) {
                     if (orders.length === 0) {
                         container.innerHTML = `
-                            <div class="text-center py-16 text-zinc-500 border border-dashed border-[#2c2c35]/40 rounded-2xl bg-obsidian/10">
-                                <svg class="w-9 h-9 text-zinc-600 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                                     <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                 </svg>
-                                هیچ سفارش معلق و فعالی در صف آشپزخانه نیست.
                             </div>
                         `;
                         return;
                     }
                     container.innerHTML = '';
                     orders.forEach(order => {
                         let itemsHtml = '';
                         order.items.forEach(item => {
                             itemsHtml += `
-                                <div class="flex items-center justify-between text-[11px] bg-obsidian/60 px-3 py-2 rounded-lg border border-[#2c2c35]/40">
                                     <span class="text-zinc-300 font-bold">${item.name}</span>
-                                    <span class="text-brass bg-brass/10 px-2 py-0.5 rounded-md font-extrabold">تعداد: ${item.quantity}</span>
                                 </div>
                             `;
                         });
                         const timeString = new Date(order.timestamp * 1000).toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' });
                         const cardHtml = `
-                            <div class="border border-[#2c2c35]/40 hover:border-brass/20 rounded-xl p-4 bg-obsidian/30 transition-all duration-300 flex flex-col md:flex-row justify-between items-start md:items-center gap-3">
                                 <div class="flex-1 space-y-2 w-full">
                                     <div class="flex items-center justify-between md:justify-start gap-3 w-full">
-                                        <span class="text-xs font-bold text-white bg-brass/10 border border-brass/20 px-2.5 py-1 rounded-lg">میز شماره ${order.table}</span>
                                         <span class="text-[9px] text-zinc-500 font-medium">زمان ثبت: ${timeString}</span>
                                     </div>
                                     <div class="grid grid-cols-1 sm:grid-cols-2 gap-1.5 mt-2">
@@ -320,17 +321,17 @@
                                     <svg class="w-3.5 h-3.5 text-zinc-400 group-hover:text-white transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                         <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                                     </svg>
-                                    آماده و تحویل شد
                                 </button>
                             </div>
                         `;
                         container.insertAdjacentHTML('beforeend', cardHtml);
                     });
                 } else {
-                    container.innerHTML = `<div class="text-center py-6 text-rose-500 text-xs">خطا در دریافت سفارشات از پایگاه داده مرکزی.</div>`;
                 }
             } catch (err) {
-                container.innerHTML = `<div class="text-center py-6 text-rose-500 text-xs">عدم اتصال پایدار با سرور اصلی کافه: ${err.message}</div>`;
             }
         }
@@ -346,187 +347,92 @@
                 if (response.ok && result.success) {
                     fetchActiveOrders();
                 } else {
-                    alert(result.error || "خطایی در فرآیند تغییر وضعیت رخ داد.");
                 }
             } catch (err) {
-                alert("بروز خطای نامشخص شبکه: " + err.message);
             }
         }
-        // --- سیستم مکالمه مدیریت جهت تغییر موجودی منو ---
-        async function sendAdminMessage(e) {
             e.preventDefault();
-            if (isGenerating) return;
-            const input = document.getElementById('chatInput');
-            const text = input.value.trim();
-            if (!text) return;
-            appendChatMessage('user', text);
-            input.value = '';
-            chatHistory.push({ role: 'user', content: text });
-            isGenerating = true;
-            toggleChatLoading(true);
-            abortController = new AbortController();
-            try {
-                const response = await fetch('/api/admin/chat', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ messages: chatHistory }),
-                    signal: abortController.signal
-                });
-                const data = await response.json();
-                toggleChatLoading(false);
-                isGenerating = false;
-                if (response.ok && data.success) {
-                    // شبیه‌سازی انیمیشن نگارش کلمات جهت پایداری ظاهر بصری
-                    const botBubbleId = appendChatMessage('model', '');
-                    const botBubble = document.getElementById(botBubbleId);
-                    let i = 0;
-                    const textResponse = data.response;
-                    function typeText() {
-                        if (i < textResponse.length && !abortController.signal.aborted) {
-                            botBubble.textContent += textResponse.charAt(i);
-                            i++;
-                            document.getElementById('chatMessages').scrollTop = document.getElementById('chatMessages').scrollHeight;
-                            setTimeout(typeText, 6);
-                        } else {
-                            chatHistory.push({ role: 'model', content: textResponse });
-                        }
-                    }
-                    typeText();
-                } else {
-                    appendChatMessage('model', data.error || 'پاسخی از سمت دستیار هوشمند دریافت نشد.');
-                }
-            } catch (err) {
-                toggleChatLoading(false);
-                isGenerating = false;
-                if (err.name !== 'AbortError') {
-                    appendChatMessage('model', 'خطا در ارتباط زنده با دستیار ادمین: ' + err.message);
-                }
-            }
-        }
-        function stopAdminChat() {
-            if (abortController) {
-                abortController.abort();
-            }
-            toggleChatLoading(false);
-            isGenerating = false;
         }
-        function toggleChatLoading(loading) {
-            const loader = document.getElementById('chatLoader');
-            const sendBtn = document.getElementById('sendBtn');
-            const input = document.getElementById('chatInput');
-            if (loading) {
-                loader.classList.remove('hidden');
-                sendBtn.disabled = true;
-                input.disabled = true;
-            } else {
-                loader.classList.add('hidden');
-                sendBtn.disabled = false;
-                input.disabled = false;
-            }
         }
-        function appendChatMessage(role, content) {
-            const container = document.getElementById('chatMessages');
-            const bubbleId = 'bubble-admin-' + Date.now();
-            let html = '';
-            if (role === 'user') {
-                html = `
-                    <div class="flex justify-end gap-2.5 max-w-[85%] mr-auto">
-                        <div class="bg-brass/10 border border-brass/20 text-zinc-100 text-xs rounded-2xl rounded-tl-none px-3.5 py-2.5 leading-relaxed">
-                            ${content}
-                        </div>
-                    </div>
-                `;
-            } else {
-                html = `
-                    <div class="flex gap-2.5 max-w-[85%]">
-                        <div class="w-7 h-7 rounded-lg bg-brass/10 border border-brass/20 flex items-center justify-center flex-shrink-0">
-                            <svg class="w-4 h-4 text-brass" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <circle cx="12" cy="12" r="10"/>
-                                <path d="M12 8v4l3 3"/>
-                            </svg>
-                        </div>
-                        <div id="${bubbleId}" class="bg-obsidian/50 border border-[#2c2c35]/40 text-zinc-200 text-xs rounded-2xl rounded-tr-none px-3.5 py-2.5 leading-relaxed font-sans">
-                            ${content}
-                        </div>
-                    </div>
-                `;
             }
-            container.insertAdjacentHTML('beforeend', html);
-            container.scrollTop = container.scrollHeight;
-            return bubbleId;
         }
-        // --- سیستم بارگذاری، استخراج و ویرایش منوی جدید ---
         async function uploadMenuFile(e) {
             const file = e.target.files[0];
             if (!file) return;
             const loader = document.getElementById('uploadLoader');
             const editor = document.getElementById('menuEditorContainer');
             loader.classList.remove('hidden');
             editor.classList.add('hidden');
             const formData = new FormData();
             formData.append('file', file);
             try {
                 const response = await fetch('/api/admin/extract_menu', {
                     method: 'POST',
                     body: formData
                 });
                 const data = await response.json();
                 loader.classList.add('hidden');
                 if (response.ok && data.success) {
                     renderMenuEditor(data.extracted_menu);
                     editor.classList.remove('hidden');
                 } else {
-                    alert(data.error || 'هوش مصنوعی موفق به پردازش تصویر ارسالی نشد.');
                 }
             } catch (err) {
                 loader.classList.add('hidden');
-                alert('خطا در فرستادن اطلاعات تصویر منو: ' + err.message);
             }
         }
         function renderMenuEditor(menuItems) {
             const tbody = document.getElementById('menuEditorTableBody');
             tbody.innerHTML = '';
             menuItems.forEach((item, index) => {
                 const row = `
-                    <tr class="hover:bg-coal/40 transition-colors duration-200">
                         <td class="px-2 py-2">
-                            <input type="text" class="menu-name w-full bg-coal border border-[#2c2c35]/50 rounded-lg px-2.5 py-1.5 text-zinc-200 focus:border-brass/30 focus:outline-none" value="${item.name || ''}">
                         </td>
                         <td class="px-2 py-2">
-                            <input type="text" class="menu-desc w-full bg-coal border border-[#2c2c35]/50 rounded-lg px-2.5 py-1.5 text-zinc-200 focus:border-brass/30 focus:outline-none" value="${item.description || ''}">
                         </td>
                         <td class="px-2 py-2">
-                            <input type="text" class="menu-price w-full bg-coal border border-[#2c2c35]/50 rounded-lg px-2.5 py-1.5 text-zinc-200 focus:border-brass/30 focus:outline-none" value="${item.price || ''}">
                         </td>
                         <td class="px-2 py-2 text-center">
                             <button onclick="removeMenuRow(this)" class="p-1 text-zinc-600 hover:text-rose-500 transition-colors">
@@ -544,15 +450,15 @@
         function addEmptyMenuRow() {
             const tbody = document.getElementById('menuEditorTableBody');
             const row = `
-                <tr class="hover:bg-coal/40 transition-colors duration-200">
                     <td class="px-2 py-2">
-                        <input type="text" class="menu-name w-full bg-coal border border-[#2c2c35]/50 rounded-lg px-2.5 py-1.5 text-zinc-200 focus:border-brass/30 focus:outline-none" placeholder="مثال: لاته ماکیاتو">
                     </td>
                     <td class="px-2 py-2">
-                        <input type="text" class="menu-desc w-full bg-coal border border-[#2c2c35]/50 rounded-lg px-2.5 py-1.5 text-zinc-200 focus:border-brass/30 focus:outline-none" placeholder="ترکیب لاته آرت با سس اسپرسو">
                     </td>
                     <td class="px-2 py-2">
-                        <input type="text" class="menu-price w-full bg-coal border border-[#2c2c35]/50 rounded-lg px-2.5 py-1.5 text-zinc-200 focus:border-brass/30 focus:outline-none" placeholder="۷۵,۰۰۰">
                     </td>
                     <td class="px-2 py-2 text-center">
                         <button onclick="removeMenuRow(this)" class="p-1 text-zinc-600 hover:text-rose-500 transition-colors">
@@ -574,12 +480,11 @@
             const tbody = document.getElementById('menuEditorTableBody');
             const rows = tbody.querySelectorAll('tr');
             const menuData = [];
             rows.forEach(row => {
                 const name = row.querySelector('.menu-name').value.trim();
                 const description = row.querySelector('.menu-desc').value.trim();
                 const price = row.querySelector('.menu-price').value.trim();
                 if (name) {
                     menuData.push({
                         name: name,
@@ -589,30 +494,143 @@
                     });
                 }
             });
             if (menuData.length === 0) {
-                alert("امکان انتشار یک لیست خالی وجود ندارد.");
                 return;
             }
             try {
                 const response = await fetch('/api/admin/save_menu', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({ menu: menuData })
                 });
                 const data = await response.json();
                 if (response.ok && data.success) {
                     alert("منوی جدید با موفقیت ثبت و روی وب‌سایت همگام‌سازی شد!");
                     document.getElementById('menuEditorContainer').classList.add('hidden');
-                    appendChatMessage('model', 'منوی ارسال شده با موفقیت تایید و روی وب‌سایت همگام‌سازی شد. از این پس برای میزهای مشتریان منوی جدید را مبنای کار قرار خواهم داد.');
                 } else {
-                    alert(data.error || 'بروز خطا در همگام‌سازی داده‌های جدید.');
                 }
             } catch (err) {
-                alert('خطا در دسترسی به پایگاه داده مرکزی منوها: ' + err.message);
             }
         }
     </script>
 </body>

                         sans: ['Vazirmatn', 'sans-serif'],
                     },
                     colors: {
+                        obsidian: '#09090b',       /* مشکی مطلق لوکس */
+                        coal: '#111114',           /* دودی غلیظ */
+                        clay: '#18181c',           /* خاکستری تیره */
+                        brass: '#c5a880',          /* برنز طلایی ویژه */
+                        brassHover: '#e5ca9e',     /* برنز طلایی روشن */
                         emeraldMuted: '#10b981',   /* سبز تایید نهایی */
                     },
                     boxShadow: {
+                        glow: '0 0 25px rgba(197, 168, 128, 0.15)',
+                        greenGlow: '0 0 25px rgba(16, 185, 129, 0.20)',
                     }
                 }
             }
             color: #f4f4f5;
             -webkit-tap-highlight-color: transparent;
         }
+        /* سفارشی‌سازی اسکرول‌بار ظریف */
         ::-webkit-scrollbar {
             width: 4px;
+            height: 4px;
         }
         ::-webkit-scrollbar-track {
+            background: #111114;
         }
         ::-webkit-scrollbar-thumb {
+            background: #2a2a30;
+            border-radius: 4px;
         }
     </style>
 </head>
+<body class="min-h-screen flex flex-col font-sans selection:bg-amber-500 selection:text-black overflow-x-hidden bg-gradient-to-tr from-obsidian via-[#0c0d11] to-[#14110b] antialiased">
+    <!-- افکت هاله‌های نوری در پس‌زمینه دسکتاپ -->
     <div class="hidden lg:block absolute inset-0 overflow-hidden pointer-events-none z-0">
         <div class="absolute -top-[10%] -left-[5%] w-[600px] h-[600px] rounded-full bg-brass/3 blur-[140px]"></div>
         <div class="absolute -bottom-[10%] -right-[5%] w-[600px] h-[600px] rounded-full bg-brass/2 blur-[140px]"></div>
     </div>
+    <!-- هدر پنل ادمین -->
+    <header class="border-b border-zinc-900 bg-coal/60 backdrop-blur-md sticky top-0 z-50 px-4 py-4 md:px-8">
         <div class="max-w-7xl mx-auto flex items-center justify-between">
             <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-xl bg-brass/10 border border-brass/25 flex items-center justify-center">
+                    <svg class="w-6 h-6 text-brass" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                         <path d="M17 8h1a4 4 0 1 1 0 8h-1" />
                         <path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z" />
                         <line x1="6" y1="2" x2="6" y2="4" />
                     <h1 class="text-sm font-extrabold text-white flex items-center gap-2">
                         پنل مدیریت ادمین <span class="text-brass">Cafe AI</span>
                     </h1>
+                    <p class="text-[10px] text-zinc-500 font-medium">پایش برخط سفارشات آشپزخانه و منوی فعال هوش مصنوعی</p>
                 </div>
             </div>
             <div class="flex items-center gap-3">
+                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                     <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                     نظارت زنده فعال
                 </span>
         </div>
     </header>
+    <!-- بدنه اصلی چیدمان پنل مدیریت -->
     <main class="flex-1 max-w-7xl w-full mx-auto p-4 md:p-6 lg:p-8 grid grid-cols-1 lg:grid-cols-12 gap-6 z-10 relative">
+        <!-- ستون سمت راست: پایش سفارشات و بارگذاری تصاویر منو (۷ از ۱۲) -->
         <section class="lg:col-span-7 flex flex-col gap-6">
+            <!-- مانیتورینگ سفارشات ورودی آشپزخانه -->
+            <div class="bg-coal/65 border border-zinc-900 rounded-2xl p-5 shadow-xl backdrop-blur-md">
+                <div class="flex items-center justify-between mb-4 border-b border-zinc-800 pb-3">
+                    <div class="flex items-center gap-2">
+                        <div class="w-2 h-2 rounded-full bg-brass animate-pulse"></div>
+                        <h2 class="text-xs font-extrabold text-white">
+                            سفارشات جدید آشپزخانه
+                        </h2>
+                    </div>
                     <button onclick="fetchActiveOrders()" class="text-[10px] text-zinc-500 hover:text-brass flex items-center gap-1 transition-all duration-300">
                         <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 1121.21 15H15" />
                         </svg>
+                        بروزرسانی جریان سفارشات
                     </button>
                 </div>
+                <!-- جدول مانیتورینگ سفارشات -->
                 <div id="ordersContainer" class="space-y-4 max-h-[350px] overflow-y-auto pr-1">
                     <div class="text-center py-12 text-xs text-zinc-500">
                         در حال بارگذاری لیست سفارشات جاری...
                 </div>
             </div>
+            <!-- بخش بارگذاری و استخراج منو با تصویر یا فایل PDF -->
+            <div class="bg-coal/65 border border-zinc-900 rounded-2xl p-5 shadow-xl backdrop-blur-md space-y-4">
+                <h2 class="text-xs font-extrabold text-white flex items-center gap-2 border-b border-zinc-800 pb-3">
                     <svg class="w-4 h-4 text-brass" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                     </svg>
+                    استخراج خودکار ساختار منو با هوش مصنوعی
                 </h2>
                 <p class="text-[11px] text-zinc-500 leading-relaxed">
+                    تصویر منو یا فاکتور جدید ک��فه را بارگذاری کنید. هوش مصنوعی نیلا متون و قیمت‌ها را استخراج کرده و جهت تایید نهایی برای شما ساختاربندی می‌کند.
                 </p>
+                <!-- باکس آپلود فایل با قابلیت Drag & Drop کشیدن و رها کردن -->
+                <div id="dropZone" class="border-2 border-dashed border-zinc-800 hover:border-brass/35 rounded-xl p-6 text-center cursor-pointer transition-all bg-obsidian/30"
+                     onclick="document.getElementById('menuFileInput').click()"
+                     ondragover="handleDragOver(event)"
+                     ondragleave="handleDragLeave(event)"
+                     ondrop="handleDrop(event)">
                     <input type="file" id="menuFileInput" class="hidden" accept="image/*,application/pdf" onchange="uploadMenuFile(event)">
                     <div class="flex flex-col items-center gap-2.5">
+                        <svg id="uploadIcon" class="w-8 h-8 text-zinc-600 transition-colors duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
                         </svg>
+                        <span class="text-xs text-zinc-300 font-medium">فایل یا تصویر منو را به این بخش بکشید یا انتخاب کنید</span>
+                        <span class="text-[9px] text-zinc-500 uppercase tracking-wider">فرمت‌های تصویری یا سند PDF</span>
                     </div>
                 </div>
+                <!-- انیمیشن تحلیل فرآیند استخراج -->
+                <div id="uploadLoader" class="hidden text-center py-6 bg-obsidian/40 rounded-xl border border-zinc-800 animate-pulse">
                     <div class="inline-block animate-spin rounded-full h-7 w-7 border-t-2 border-b-2 border-brass mb-2"></div>
+                    <p class="text-[10px] text-brass font-extrabold">نیلا در حال ساختارسازی و آنالیز متون منوی جدید است. لطفاً شکیبا باشید...</p>
                 </div>
+                <!-- ویرایشگر و جدول اقلام استخراج شده -->
+                <div id="menuEditorContainer" class="hidden space-y-4 border-t border-zinc-800/40 pt-4">
                     <h3 class="text-xs font-bold text-brass flex items-center gap-1.5">
+                        <svg class="w-3.5 h-3.5 text-brass" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                         </svg>
+                        بازبینی اقلام منو پیش از انتشار زنده
                     </h3>
+                    <div class="overflow-x-auto max-h-[250px] border border-zinc-900 rounded-xl bg-obsidian/20">
+                        <table class="min-w-full divide-y divide-zinc-900 text-[11px]">
                             <thead class="bg-coal">
                                 <tr>
                                     <th class="px-3 py-2.5 text-right font-medium text-zinc-400">عنوان محصول</th>
                                     <th class="px-3 py-2.5 text-center font-medium text-zinc-400 w-16">عملیات</th>
                                 </tr>
                             </thead>
+                            <tbody id="menuEditorTableBody" class="divide-y divide-zinc-900/60">
+                                <!-- ردیف‌های منو داینامیک اضافه می‌شوند -->
                             </tbody>
                         </table>
                     </div>
                     <div class="flex justify-end gap-2">
+                        <button onclick="addEmptyMenuRow()" class="px-3 py-2 border border-zinc-800 hover:border-zinc-500 rounded-lg text-[10px] text-zinc-300 transition-all duration-300">
+                            افزودن دستی محصول جدید
                         </button>
+                        <button onclick="saveAndPublishMenu()" class="px-4 py-2 bg-emerald-600 hover:bg-emerald-500 rounded-lg text-[11px] font-extrabold text-white transition-all duration-300 flex items-center gap-1.5 shadow-greenGlow">
+                            ثبت و همگام‌سازی زنده منوی مشتریان
                         </button>
                     </div>
                 </div>
             </div>
         </section>
+        <!-- ستون سمت چپ: چت ادمین با هوش مصنوعی جهت کنترل موجودی اقلام (۵ از ۱۲) -->
+        <section class="lg:col-span-5 flex flex-col bg-coal/65 border border-zinc-900 rounded-2xl shadow-xl h-[630px] overflow-hidden backdrop-blur-md">
+            <!-- سربرگ پنل چت ادمین -->
+            <div class="px-5 py-4 border-b border-zinc-900 flex items-center justify-between bg-obsidian/20">
                 <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-xl bg-brass/10 border border-brass/25 flex items-center justify-center">
+                        <svg class="w-5 h-5 text-brass" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                             <path d="M12 2a10 10 0 0 1 10 10c0 5.523-4.477 10-10 10S2 17.523 2 12A10 10 0 0 1 12 2z"/>
                             <path d="M12 8v4l3 3"/>
                         </svg>
                     </div>
                     <div>
+                        <h3 class="text-xs font-extrabold text-white">دستیار صوتی و متنی ادمین</h3>
+                        <p class="text-[9px] text-zinc-500 font-medium">کنترل همگام موجودی و منو با زبان طبیعی گفتگو</p>
                     </div>
                 </div>
             </div>
+            <!-- بدنه پیام‌های چت ادمین -->
             <div id="chatMessages" class="flex-1 overflow-y-auto p-4 space-y-4">
                 <div class="flex gap-2.5 max-w-[85%]">
+                    <div class="w-7 h-7 rounded-lg bg-brass/15 border border-brass/20 flex items-center justify-center flex-shrink-0">
+                        <span class="text-brass font-extrabold text-[10px] font-mono">AI</span>
                     </div>
+                    <div class="bg-obsidian/50 border border-zinc-800 text-zinc-300 text-xs rounded-2xl rounded-tr-none px-3.5 py-2.5 leading-relaxed font-sans">
+                        سلام همکار گرامی! من نیلا هستم، دستیار مدیریت منوی Cafe AI. شما می‌توانید از همین‌جا اقلام منو را با گفتگوی ساده کنترل کنید؛ برای مثال بنویسید: "کروسان ساده تمام شد" یا "چای ماسالا را موجود کن" تا سریعاً تغییرات روی سیستم مشتریان نیز اعمال گردد.
                     </div>
                 </div>
             </div>
+            <!-- لودر تفکر و جریان پاسخ نیلا -->
+            <div id="chatLoader" class="hidden px-4 py-2.5 flex items-center justify-between bg-obsidian/30 text-[9px] text-zinc-500 font-extrabold border-t border-zinc-900">
                 <div class="flex items-center gap-2">
                     <div class="flex space-x-1 space-x-reverse">
                         <span class="w-1.5 h-1.5 bg-brass rounded-full animate-bounce" style="animation-delay: 0.1s"></span>
                         <span class="w-1.5 h-1.5 bg-brass rounded-full animate-bounce" style="animation-delay: 0.2s"></span>
                         <span class="w-1.5 h-1.5 bg-brass rounded-full animate-bounce" style="animation-delay: 0.3s"></span>
                     </div>
+                    <span>نیلا در حال پردازش و اعمال دستور مدیریت...</span>
                 </div>
+                <button onclick="stopAdminChat()" class="px-2.5 py-1.5 bg-rose-950/10 border border-rose-900/30 hover:bg-rose-900/40 rounded-lg text-[9px] text-rose-400 font-bold transition-all">
+                    توقف فرآیند
                 </button>
             </div>
+            <!-- فرم پایینی ارسال درخواست متنی -->
+            <form id="chatForm" onsubmit="sendAdminMessage(event)" class="p-3 border-t border-zinc-900 bg-obsidian/30 flex gap-2">
+                <input type="text" id="chatInput" placeholder="تغییر وضعیت یا ویرایش منو را به صورت متنی بنویسید..." autocomplete="off" class="flex-1 bg-coal border border-zinc-850 text-xs text-zinc-200 placeholder-zinc-600 rounded-lg px-3.5 py-2.5 focus:outline-none focus:border-brass/30 transition-all duration-300">
                 <button type="submit" id="sendBtn" class="bg-brass hover:bg-brassHover text-obsidian font-extrabold px-4 py-2.5 rounded-lg text-xs transition-all duration-300 flex items-center justify-center flex-shrink-0 shadow-glow">
                     <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
     </main>
+    <!-- فوتر پایینی پنل ادمین -->
+    <footer class="border-t border-zinc-900/40 py-4 text-center text-[10px] text-zinc-600 bg-obsidian/90">
         طراحی و توسعه توسط الگوریتم داده نسترن | کلیه حقوق محفوظ است © ۲۰۲۶
     </footer>
+    <!-- کدهای منطق جاوااسکریپت پنل مدیریت ادمین -->
     <script>
         let chatHistory = [
+            { role: 'model', content: 'سلام همکار گرامی! من نیلا هستم، دستیار مدیریت منوی Cafe AI. شما می‌توانید از همین‌جا اقلام منو را با گفتگوی ساده کنترل کنید؛ برای مثال بنویسید: "کروسان ساده تمام شد" یا "چای ماسالا را موجود کن" تا سریعاً تغییرات روی سیستم مشتریان نیز اعمال گردد.' }
         ];
         let abortController = null;
         let isGenerating = false;
         window.addEventListener('DOMContentLoaded', () => {
             fetchActiveOrders();
+            // بروزرسانی داینامیک سفارشات در بازه‌های ۱۰ ثانیه‌ای منظم
             setInterval(fetchActiveOrders, 10000);
         });
+        // --- مدیریت پایش سفارشات زنده آشپزخانه ---
         async function fetchActiveOrders() {
             const container = document.getElementById('ordersContainer');
             try {
                 const response = await fetch('/api/admin/orders');
                 const orders = await response.json();
                 if (response.ok) {
                     if (orders.length === 0) {
                         container.innerHTML = `
+                            <div class="text-center py-16 text-zinc-500 border border-dashed border-zinc-800 rounded-2xl bg-obsidian/10">
+                                <svg class="w-8 h-8 text-zinc-600 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                                     <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                 </svg>
+                                در حال حاضر سفارش معلق و فعالی در صف آشپزخانه نیست.
                             </div>
                         `;
                         return;
                     }
                     container.innerHTML = '';
                     orders.forEach(order => {
                         let itemsHtml = '';
                         order.items.forEach(item => {
                             itemsHtml += `
+                                <div class="flex items-center justify-between text-[11px] bg-obsidian/60 px-3 py-2 rounded-lg border border-zinc-850">
                                     <span class="text-zinc-300 font-bold">${item.name}</span>
+                                    <span class="text-brass bg-brass/10 px-2 py-0.5 rounded-md font-extrabold text-[10px]">تعداد: ${item.quantity}</span>
                                 </div>
                             `;
                         });
                         const timeString = new Date(order.timestamp * 1000).toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' });
                         const cardHtml = `
+                            <div class="border border-zinc-850 hover:border-brass/15 rounded-xl p-4 bg-obsidian/30 transition-all duration-300 flex flex-col md:flex-row justify-between items-start md:items-center gap-3">
                                 <div class="flex-1 space-y-2 w-full">
                                     <div class="flex items-center justify-between md:justify-start gap-3 w-full">
+                                        <span class="text-xs font-bold text-white bg-brass/10 border border-brass/25 px-2.5 py-1 rounded-lg">میز شماره ${order.table}</span>
                                         <span class="text-[9px] text-zinc-500 font-medium">زمان ثبت: ${timeString}</span>
                                     </div>
                                     <div class="grid grid-cols-1 sm:grid-cols-2 gap-1.5 mt-2">
                                     <svg class="w-3.5 h-3.5 text-zinc-400 group-hover:text-white transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                         <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                                     </svg>
+                                    تحویل نهایی شد
                                 </button>
                             </div>
                         `;
                         container.insertAdjacentHTML('beforeend', cardHtml);
                     });
                 } else {
+                    container.innerHTML = `<div class="text-center py-6 text-rose-500 text-xs">خطا در دریافت لیست سفارشات آشپزخانه.</div>`;
                 }
             } catch (err) {
+                container.innerHTML = `<div class="text-center py-6 text-rose-500 text-xs">عدم برقراری ارتباط زنده با سرور: ${err.message}</div>`;
             }
         }
                 if (response.ok && result.success) {
                     fetchActiveOrders();
                 } else {
+                    alert(result.error || "بروز اختلال در نهایی‌سازی فاکتور.");
                 }
             } catch (err) {
+                alert("عدم پاسخگویی در ارتباطات شبکه: " + err.message);
             }
         }
+        // --- مدیریت درگ و دراپ (Drag & Drop) فاکتور یا تصویر منو ---
+        function handleDragOver(e) {
             e.preventDefault();
+            const dropZone = document.getElementById('dropZone');
+            const icon = document.getElementById('uploadIcon');
+            dropZone.classList.add('border-brass', 'bg-brass/5');
+            icon.classList.add('text-brass');
         }
+        function handleDragLeave(e) {
+            e.preventDefault();
+            const dropZone = document.getElementById('dropZone');
+            const icon = document.getElementById('uploadIcon');
+            dropZone.classList.remove('border-brass', 'bg-brass/5');
+            icon.classList.remove('text-brass');
         }
+        function handleDrop(e) {
+            e.preventDefault();
+            handleDragLeave(e);
+            const files = e.dataTransfer.files;
+            if (files.length > 0) {
+                const fileInput = document.getElementById('menuFileInput');
+                fileInput.files = files;
+                // تریگر دستی ارسال رویداد فایل
+                const event = { target: { files: files } };
+                uploadMenuFile(event);
             }
         }
+        // --- ارسال و آنالیز فایلهای منو با هوش مصنوعی ---
         async function uploadMenuFile(e) {
             const file = e.target.files[0];
             if (!file) return;
             const loader = document.getElementById('uploadLoader');
             const editor = document.getElementById('menuEditorContainer');
             loader.classList.remove('hidden');
             editor.classList.add('hidden');
             const formData = new FormData();
             formData.append('file', file);
             try {
                 const response = await fetch('/api/admin/extract_menu', {
                     method: 'POST',
                     body: formData
                 });
                 const data = await response.json();
                 loader.classList.add('hidden');
                 if (response.ok && data.success) {
                     renderMenuEditor(data.extracted_menu);
                     editor.classList.remove('hidden');
                 } else {
+                    alert(data.error || 'ساختار فایل ارسالی توسط هوش مصنوعی قابل آنالیز نبود.');
                 }
             } catch (err) {
                 loader.classList.add('hidden');
+                alert('خطا در دسترسی و بارگذاری اطلاعات در سرور: ' + err.message);
             }
         }
         function renderMenuEditor(menuItems) {
             const tbody = document.getElementById('menuEditorTableBody');
             tbody.innerHTML = '';
             menuItems.forEach((item, index) => {
                 const row = `
+                    <tr class="hover:bg-coal/45 transition-colors duration-200">
                         <td class="px-2 py-2">
+                            <input type="text" class="menu-name w-full bg-coal border border-zinc-800 rounded-lg px-2.5 py-1.5 text-zinc-200 focus:border-brass/30 focus:outline-none text-[11px]" value="${item.name || ''}">
                         </td>
                         <td class="px-2 py-2">
+                            <input type="text" class="menu-desc w-full bg-coal border border-zinc-800 rounded-lg px-2.5 py-1.5 text-zinc-200 focus:border-brass/30 focus:outline-none text-[11px]" value="${item.description || ''}">
                         </td>
                         <td class="px-2 py-2">
+                            <input type="text" class="menu-price w-full bg-coal border border-zinc-800 rounded-lg px-2.5 py-1.5 text-zinc-200 focus:border-brass/30 focus:outline-none text-[11px]" value="${item.price || ''}">
                         </td>
                         <td class="px-2 py-2 text-center">
                             <button onclick="removeMenuRow(this)" class="p-1 text-zinc-600 hover:text-rose-500 transition-colors">
         function addEmptyMenuRow() {
             const tbody = document.getElementById('menuEditorTableBody');
             const row = `
+                <tr class="hover:bg-coal/45 transition-colors duration-200">
                     <td class="px-2 py-2">
+                        <input type="text" class="menu-name w-full bg-coal border border-zinc-800 rounded-lg px-2.5 py-1.5 text-zinc-200 focus:border-brass/30 focus:outline-none text-[11px]" placeholder="مثال: لاته کارامل">
                     </td>
                     <td class="px-2 py-2">
+                        <input type="text" class="menu-desc w-full bg-coal border border-zinc-800 rounded-lg px-2.5 py-1.5 text-zinc-200 focus:border-brass/30 focus:outline-none text-[11px]" placeholder="ترکیب اسپرسو دبل، سس کارامل و فوم شیر">
                     </td>
                     <td class="px-2 py-2">
+                        <input type="text" class="menu-price w-full bg-coal border border-zinc-800 rounded-lg px-2.5 py-1.5 text-zinc-200 focus:border-brass/30 focus:outline-none text-[11px]" placeholder="۸۵,۰۰۰">
                     </td>
                     <td class="px-2 py-2 text-center">
                         <button onclick="removeMenuRow(this)" class="p-1 text-zinc-600 hover:text-rose-500 transition-colors">
             const tbody = document.getElementById('menuEditorTableBody');
             const rows = tbody.querySelectorAll('tr');
             const menuData = [];
             rows.forEach(row => {
                 const name = row.querySelector('.menu-name').value.trim();
                 const description = row.querySelector('.menu-desc').value.trim();
                 const price = row.querySelector('.menu-price').value.trim();
                 if (name) {
                     menuData.push({
                         name: name,
                     });
                 }
             });
             if (menuData.length === 0) {
+                alert("انتشار لیست فاقد محصول امکان‌پذیر نیست.");
                 return;
             }
             try {
                 const response = await fetch('/api/admin/save_menu', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({ menu: menuData })
                 });
                 const data = await response.json();
                 if (response.ok && data.success) {
                     alert("منوی جدید با موفقیت ثبت و روی وب‌سایت همگام‌سازی شد!");
                     document.getElementById('menuEditorContainer').classList.add('hidden');
+                    appendChatMessage('model', 'منوی زنده همگام‌سازی شد. سیستم سفارش‌گیری مشتریان اکنون بر مبنای آخرین لیست ویرایش‌شده کالیبره شده است.');
+                } else {
+                    alert(data.error || 'بروز خطا در همگام‌سازی ساختار داده‌های جدید.');
+                }
+            } catch (err) {
+                alert('عدم اتصال به پایگاه داده همگام‌سازی منوها: ' + err.message);
+            }
+        }
+        // --- سیستم مکالمه ادمین جهت کنترل موجودی اقلام منو ---
+        async function sendAdminMessage(e) {
+            e.preventDefault();
+            if (isGenerating) return;
+            const input = document.getElementById('chatInput');
+            const text = input.value.trim();
+            if (!text) return;
+            appendChatMessage('user', text);
+            input.value = '';
+            chatHistory.push({ role: 'user', content: text });
+            isGenerating = true;
+            toggleChatLoading(true);
+            abortController = new AbortController();
+            try {
+                const response = await fetch('/api/admin/chat', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ messages: chatHistory }),
+                    signal: abortController.signal
+                });
+                const data = await response.json();
+                toggleChatLoading(false);
+                isGenerating = false;
+                if (response.ok && data.success) {
+                    const botBubbleId = appendChatMessage('model', '');
+                    const botBubble = document.getElementById(botBubbleId);
+                    let i = 0;
+                    const textResponse = data.response;
+                    function typeText() {
+                        if (i < textResponse.length && !abortController.signal.aborted) {
+                            botBubble.textContent += textResponse.charAt(i);
+                            i++;
+                            document.getElementById('chatMessages').scrollTop = document.getElementById('chatMessages').scrollHeight;
+                            setTimeout(typeText, 6);
+                        } else {
+                            chatHistory.push({ role: 'model', content: textResponse });
+                        }
+                    }
+                    typeText();
                 } else {
+                    appendChatMessage('model', data.error || 'عدم پاسخگویی مطلوب از سمت دستیار هوشمند ادمین.');
                 }
             } catch (err) {
+                toggleChatLoading(false);
+                isGenerating = false;
+                if (err.name !== 'AbortError') {
+                    appendChatMessage('model', 'عدم دریافت موفق پاسخ در بستر شبکه: ' + err.message);
+                }
+            }
+        }
+        function stopAdminChat() {
+            if (abortController) {
+                abortController.abort();
+            }
+            toggleChatLoading(false);
+            isGenerating = false;
+        }
+        function toggleChatLoading(loading) {
+            const loader = document.getElementById('chatLoader');
+            const sendBtn = document.getElementById('sendBtn');
+            const input = document.getElementById('chatInput');
+            if (loading) {
+                loader.classList.remove('hidden');
+                sendBtn.disabled = true;
+                input.disabled = true;
+            } else {
+                loader.classList.add('hidden');
+                sendBtn.disabled = false;
+                input.disabled = false;
+            }
+        }
+        function appendChatMessage(role, content) {
+            const container = document.getElementById('chatMessages');
+            const bubbleId = 'bubble-admin-' + Date.now();
+            let html = '';
+            if (role === 'user') {
+                html = `
+                    <div class="flex justify-end gap-2.5 max-w-[85%] mr-auto animate-fadeIn">
+                        <div class="bg-brass/10 border border-brass/25 text-zinc-100 text-xs rounded-2xl rounded-tl-none px-3.5 py-2.5 leading-relaxed">
+                            ${content}
+                        </div>
+                    </div>
+                `;
+            } else {
+                html = `
+                    <div class="flex gap-2.5 max-w-[85%] animate-fadeIn">
+                        <div class="w-7 h-7 rounded-lg bg-brass/15 border border-brass/20 flex items-center justify-center flex-shrink-0">
+                            <span class="text-brass font-extrabold text-[10px] font-mono">AI</span>
+                        </div>
+                        <div id="${bubbleId}" class="bg-obsidian/50 border border-zinc-800 text-zinc-200 text-xs rounded-2xl rounded-tr-none px-3.5 py-2.5 leading-relaxed font-sans">
+                            ${content}
+                        </div>
+                    </div>
+                `;
             }
+            container.insertAdjacentHTML('beforeend', html);
+            container.scrollTop = container.scrollHeight;
+            return bubbleId;
         }
     </script>
 </body>