From db1c3d60f0862f1099e3f613326792961fb8aba1 Mon Sep 17 00:00:00 2001
From: Hamza-Ayed <hamzaayedflutter@gmail.com>
Date: Sun, 3 May 2026 01:27:59 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20=D9=85=D9=8F=D8=B5=D8=A7=D8=AF?=
 =?UTF-8?q?=D9=8E=D9=82:=20=D8=AA=D8=AD=D8=AF=D9=8A=D8=AB=20=D8=A8=D8=B1?=
 =?UTF-8?q?=D9=85=D8=AC=D9=8A=20=D8=AC=D8=AF=D9=8A=D8=AF=202026-05-03=2001?=
 =?UTF-8?q?:27?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/shell.php | 196 +++++++++++++----------------------------------
 1 file changed, 52 insertions(+), 144 deletions(-)

diff --git a/public/shell.php b/public/shell.php
index 8b34f2b..5049a8c 100644
--- a/public/shell.php
+++ b/public/shell.php
@@ -71,99 +71,59 @@
         </main>
     </div>
 
-    <!-- Load API Client -->
-    <script src="assets/js/api.js"></script>
-    
     <script>
         // ══════════════════════════════════════════════════════════
-        // مُصادَق — SPA Router (No frameworks, no race conditions)
+        // مُصادَق — API Client (Inlined for reliability)
         // ══════════════════════════════════════════════════════════
+        const API = {
+            baseUrl: 'api.php', // Use relative path to api.php
+            accessToken: localStorage.getItem('access_token'),
+            async post(path, body) {
+                const headers = { 'Accept': 'application/json', 'Content-Type': 'application/json' };
+                if (this.accessToken) headers['Authorization'] = `Bearer ${this.accessToken}`;
+                const res = await fetch(`${this.baseUrl}${path}`, { method: 'POST', headers, body: JSON.stringify(body) });
+                const data = await res.json();
+                if (!res.ok) throw data;
+                return data;
+            }
+        };
 
+        // ── Router ──
         const isLoggedIn = () => !!localStorage.getItem('access_token');
         const pageContent = document.getElementById('page-content');
 
-        // ── Login Page Template ──────────────────────────────────
         function loginPage() {
             return `
                 <div class="flex flex-col items-center justify-center min-h-[60vh]">
                     <div class="w-full max-w-md p-8 glass rounded-3xl glow border border-white/10">
                         <h2 class="text-3xl font-bold mb-2 text-center">مرحباً بك مجدداً</h2>
-                        <p class="text-slate-400 text-center mb-8">قم بتسجيل الدخول للوصول إلى لوحة التحكم</p>
-                        
                         <form id="login-form" class="space-y-6">
-                            <div>
-                                <label class="block text-sm font-medium text-slate-300 mb-2">البريد الإلكتروني</label>
-                                <input type="email" id="login-email" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-primary transition-colors" placeholder="name@company.com" required>
-                            </div>
-                            <div>
-                                <label class="block text-sm font-medium text-slate-300 mb-2">كلمة المرور</label>
-                                <input type="password" id="login-password" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-primary transition-colors" placeholder="••••••••" required>
-                            </div>
+                            <input type="email" id="login-email" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-primary" placeholder="البريد الإلكتروني" required>
+                            <input type="password" id="login-password" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-primary" placeholder="كلمة المرور" required>
                             <div id="login-error" class="text-red-400 text-sm text-center hidden"></div>
-                            <button type="submit" class="w-full bg-primary hover:bg-primary-dark text-white font-bold py-3 rounded-xl transition-all shadow-lg shadow-primary/20">
-                                دخول
-                            </button>
+                            <button type="submit" class="w-full bg-primary hover:bg-primary-dark text-white font-bold py-3 rounded-xl shadow-lg">دخول</button>
                         </form>
                     </div>
                 </div>
             `;
         }
 
-        // ── Dashboard Page Template ──────────────────────────────
         function dashboardPage() {
-            return `
-                <div class="space-y-8">
-                    <div class="flex items-center justify-between">
-                        <h2 class="text-3xl font-bold">لوحة التحكم</h2>
-                        <button class="bg-primary hover:bg-primary-dark text-white px-6 py-2 rounded-xl transition-all shadow-lg shadow-primary/20 flex items-center gap-2">
-                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
-                            رفع فاتورة جديدة
-                        </button>
-                    </div>
-                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
-                        <div class="glass p-6 rounded-3xl border border-white/10 glow">
-                            <p class="text-slate-400 text-sm mb-1">فواتير الشهر</p>
-                            <h3 class="text-3xl font-bold">1,284</h3>
-                            <div class="mt-2 text-xs text-primary flex items-center gap-1">
-                                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z" clip-rule="evenodd"></path></svg>
-                                12%+ زيادة عن الشهر الماضي
-                            </div>
-                        </div>
-                        <div class="glass p-6 rounded-3xl border border-white/10">
-                            <p class="text-slate-400 text-sm mb-1">تمت المصادقة</p>
-                            <h3 class="text-3xl font-bold text-primary">1,150</h3>
-                            <div class="w-full bg-white/5 h-1.5 rounded-full mt-4 overflow-hidden">
-                                <div class="bg-primary h-full rounded-full" style="width: 89%"></div>
-                            </div>
-                        </div>
-                        <div class="glass p-6 rounded-3xl border border-white/10">
-                            <p class="text-slate-400 text-sm mb-1">قيد المعالجة</p>
-                            <h3 class="text-3xl font-bold text-yellow-400">94</h3>
-                            <div class="w-full bg-white/5 h-1.5 rounded-full mt-4 overflow-hidden">
-                                <div class="bg-yellow-400 h-full rounded-full" style="width: 25%"></div>
-                            </div>
-                        </div>
-                        <div class="glass p-6 rounded-3xl border border-red-500/20">
-                            <p class="text-slate-400 text-sm mb-1">تنبيهات المخاطر</p>
-                            <h3 class="text-3xl font-bold text-red-400">4</h3>
-                            <p class="mt-2 text-xs text-red-400">تطلب تدخل بشري فوري</p>
-                        </div>
-                    </div>
-                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-                        <div class="lg:col-span-2 glass p-8 rounded-3xl border border-white/10">
-                            <h4 class="font-bold mb-6">تحليل الفواتير الأسبوعي</h4>
-                            <canvas id="invoiceChart" height="250"></canvas>
-                        </div>
-                        <div class="glass p-8 rounded-3xl border border-white/10">
-                            <h4 class="font-bold mb-6">توزيع الحالات</h4>
-                            <canvas id="statusChart" height="250"></canvas>
-                        </div>
-                    </div>
+            return `<div class="space-y-8">
+                <h2 class="text-3xl font-bold">لوحة التحكم</h2>
+                <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
+                    <div class="glass p-6 rounded-3xl border border-white/10 glow"><p class="text-slate-400 text-sm">فواتير الشهر</p><h3 class="text-3xl font-bold">1,284</h3></div>
+                    <div class="glass p-6 rounded-3xl border border-white/10"><p class="text-slate-400 text-sm">تمت المصادقة</p><h3 class="text-3xl font-bold text-primary">1,150</h3></div>
+                    <div class="glass p-6 rounded-3xl border border-white/10"><p class="text-slate-400 text-sm">قيد المعالجة</p><h3 class="text-3xl font-bold text-yellow-400">94</h3></div>
+                    <div class="glass p-6 rounded-3xl border border-red-500/20"><p class="text-slate-400 text-sm">تنبيهات المخاطر</p><h3 class="text-3xl font-bold text-red-400">4</h3></div>
                 </div>
-            `;
+                <div class="glass p-8 rounded-3xl border border-white/10">
+                    <h4 class="font-bold mb-6">تحليل الفواتير الأسبوعي</h4>
+                    <canvas id="invoiceChart" height="250"></canvas>
+                </div>
+            </div>`;
         }
 
-        // ── Chart Initialization ─────────────────────────────────
         function initCharts() {
             const ctx = document.getElementById('invoiceChart');
             if (ctx) {
@@ -171,46 +131,13 @@
                     type: 'line',
                     data: {
                         labels: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
-                        datasets: [{
-                            label: 'الفواتير المرفوعة',
-                            data: [65, 59, 80, 81, 56, 55, 40],
-                            borderColor: '#10b981',
-                            tension: 0.4,
-                            fill: true,
-                            backgroundColor: 'rgba(16, 185, 129, 0.1)'
-                        }]
+                        datasets: [{ label: 'الفواتير', data: [65, 59, 80, 81, 56, 55, 40], borderColor: '#10b981', tension: 0.4 }]
                     },
-                    options: {
-                        responsive: true,
-                        plugins: { legend: { display: false } },
-                        scales: {
-                            y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#94a3b8' } },
-                            x: { grid: { display: false }, ticks: { color: '#94a3b8' } }
-                        }
-                    }
-                });
-            }
-            const statusCtx = document.getElementById('statusChart');
-            if (statusCtx) {
-                new Chart(statusCtx, {
-                    type: 'doughnut',
-                    data: {
-                        labels: ['مقبول', 'مرفوض', 'معلق'],
-                        datasets: [{
-                            data: [80, 10, 10],
-                            backgroundColor: ['#10b981', '#ef4444', '#f59e0b'],
-                            borderWidth: 0
-                        }]
-                    },
-                    options: {
-                        cutout: '80%',
-                        plugins: { legend: { position: 'bottom', labels: { color: '#94a3b8', padding: 20 } } }
-                    }
+                    options: { scales: { y: { grid: { color: 'rgba(255,255,255,0.05)' } }, x: { grid: { display: false } } } }
                 });
             }
         }
 
-        // ── Router ───────────────────────────────────────────────
         function navigate() {
             if (isLoggedIn()) {
                 pageContent.innerHTML = dashboardPage();
@@ -219,57 +146,38 @@
             } else {
                 pageContent.innerHTML = loginPage();
                 document.getElementById('nav-user').style.display = 'none';
-                
-                // Attach login form handler
                 setTimeout(() => {
                     const form = document.getElementById('login-form');
-                    if (form) {
-                        form.addEventListener('submit', async (e) => {
-                            e.preventDefault();
-                            const email = document.getElementById('login-email').value;
-                            const password = document.getElementById('login-password').value;
-                            const errorEl = document.getElementById('login-error');
-                            
-                            try {
-                                const result = await window.API.post('/auth/login', { email, password });
-                                if (result.success) {
-                                    localStorage.setItem('access_token', result.data.access_token);
-                                    if (result.data.refresh_token) {
-                                        localStorage.setItem('refresh_token', result.data.refresh_token);
-                                    }
-                                    window.API.accessToken = result.data.access_token;
-                                    navigate();
-                                }
-                            } catch (err) {
-                                errorEl.textContent = err.message || 'خطأ في البريد الإلكتروني أو كلمة المرور';
-                                errorEl.classList.remove('hidden');
-                            }
-                        });
-                    }
+                    if (form) form.onsubmit = async (e) => {
+                        e.preventDefault();
+                        const email = document.getElementById('login-email').value;
+                        const password = document.getElementById('login-password').value;
+                        try {
+                            const res = await API.post('/auth/login', { email, password });
+                            localStorage.setItem('access_token', res.data.access_token);
+                            API.accessToken = res.data.access_token;
+                            navigate();
+                        } catch (err) {
+                            const errEl = document.getElementById('login-error');
+                            errEl.textContent = err.message || 'خطأ في الدخول';
+                            errEl.classList.remove('hidden');
+                        }
+                    };
                 }, 50);
             }
         }
 
-        // ── AI Query Handler ─────────────────────────────────────
-        document.getElementById('ai-query').addEventListener('keydown', async (e) => {
+        document.getElementById('ai-query').onkeydown = async (e) => {
             if (e.key === 'Enter') {
                 const query = e.target.value;
-                const answerEl = document.getElementById('ai-answer');
-                if (!query) return;
-
-                answerEl.textContent = 'جاري التحليل...';
-                e.target.value = '';
-
+                document.getElementById('ai-answer').textContent = 'جاري التحليل...';
                 try {
-                    const res = await window.API.post('/ai/query', { query });
-                    answerEl.textContent = res.data.answer;
-                } catch (err) {
-                    answerEl.textContent = 'عذراً، حدث خطأ أثناء معالجة طلبك.';
-                }
+                    const res = await API.post('/ai/query', { query });
+                    document.getElementById('ai-answer').textContent = res.data.answer;
+                } catch (err) { document.getElementById('ai-answer').textContent = 'خطأ في الاتصال.'; }
             }
-        });
+        };
 
-        // ── Start the app ────────────────────────────────────────
         navigate();
     </script>
 </body>