From 8e7bd50c8abd2993e6a9bea49094476e33d1c2cc Mon Sep 17 00:00:00 2001
From: Hamza-Ayed <hamzaayedflutter@gmail.com>
Date: Sun, 3 May 2026 02:01:34 +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=2002?=
 =?UTF-8?q?:01?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/shell.php | 497 ++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 382 insertions(+), 115 deletions(-)
diff --git a/public/shell.php b/public/shell.php
index eeb90a3..2f0b97a 100644
--- a/public/shell.php
+++ b/public/shell.php
@@ -25,170 +25,437 @@
             }
         }
     </script>
+    <style>
+        .nav-link.active { background: rgba(16, 185, 129, 0.1); color: #10b981; border-right: 3px solid #10b981; }
+        .glass-panel { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); }
+    </style>
 </head>
 <body class="bg-dark text-slate-100 antialiased overflow-x-hidden">
 
-    <div id="app">
-        <!-- Navigation -->
-        <nav class="fixed top-0 w-full z-50 glass border-b border-white/10 px-6 py-4 flex items-center justify-between">
-            <div class="flex items-center gap-3">
+    <!-- App Wrapper -->
+    <div id="app" class="flex h-screen overflow-hidden">
+        
+        <!-- Sidebar -->
+        <aside id="sidebar" class="w-64 glass-panel flex-shrink-0 hidden flex-col transition-all duration-300">
+            <div class="h-20 flex items-center gap-3 px-6 border-b border-white/10">
                 <div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center shadow-lg shadow-primary/20">
                     <span class="text-white font-bold text-xl">م</span>
                 </div>
                 <h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white to-slate-400">مُصادَق</h1>
             </div>
-
-            <div class="flex items-center gap-4" id="nav-user" style="display:none;">
-                <button class="p-2 hover:bg-white/5 rounded-lg transition-colors">
-                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
+            <nav class="flex-1 py-6 space-y-2">
+                <a href="#" onclick="navigateTo('dashboard')" id="nav-dashboard" class="nav-link flex items-center gap-3 px-6 py-3 text-slate-400 hover:text-white transition-colors">
+                    <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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
+                    لوحة التحكم
+                </a>
+                <a href="#" onclick="navigateTo('companies')" id="nav-companies" class="nav-link flex items-center gap-3 px-6 py-3 text-slate-400 hover:text-white transition-colors">
+                    <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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
+                    الشركات
+                </a>
+                <a href="#" onclick="navigateTo('invoices')" id="nav-invoices" class="nav-link flex items-center gap-3 px-6 py-3 text-slate-400 hover:text-white transition-colors">
+                    <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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
+                    الفواتير المرفوعة
+                </a>
+            </nav>
+            <div class="p-6 border-t border-white/10">
+                <button onclick="logout()" class="flex items-center gap-3 text-red-400 hover:text-red-300 transition-colors w-full">
+                    <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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
+                    تسجيل الخروج
                 </button>
-                <div class="w-10 h-10 rounded-full bg-slate-800 border border-white/10"></div>
             </div>
-        </nav>
+        </aside>
+
+        <!-- Main Area -->
+        <div class="flex-1 flex flex-col h-screen overflow-hidden">
+            <!-- Header -->
+            <header id="header" class="h-20 glass-panel flex items-center justify-between px-8 flex-shrink-0 hidden">
+                <h2 id="page-title" class="text-2xl font-bold">لوحة التحكم</h2>
+                <div class="flex items-center gap-4">
+                    <div class="w-10 h-10 rounded-full bg-slate-800 border border-white/10 flex items-center justify-center">
+                        <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
+                    </div>
+                </div>
+            </header>
+
+            <!-- Content -->
+            <main class="flex-1 overflow-y-auto p-8 relative">
+                <div id="page-content" class="max-w-7xl mx-auto pb-24"></div>
+            </main>
+        </div>
 
         <!-- AI Floating Assistant -->
-        <div class="fixed bottom-8 right-8 z-[60]">
+        <div id="ai-container" class="fixed bottom-8 left-8 z-[60] hidden">
             <button onclick="document.getElementById('ai-chat').classList.toggle('hidden')" class="w-16 h-16 bg-gradient-to-tr from-primary to-emerald-400 rounded-full flex items-center justify-center shadow-2xl shadow-primary/40 hover:scale-110 transition-transform">
                 <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"></path></svg>
             </button>
 
             <!-- Chat Popover -->
-            <div id="ai-chat" class="hidden absolute bottom-20 right-0 w-80 glass rounded-3xl border border-white/10 p-6 shadow-2xl">
+            <div id="ai-chat" class="hidden absolute bottom-20 left-0 w-80 glass-panel rounded-3xl p-6 shadow-2xl">
                 <h4 class="font-bold mb-4 flex items-center gap-2">
                     <span class="w-2 h-2 bg-primary rounded-full animate-pulse"></span>
                     مُساعد مُصادَق الذكي
                 </h4>
-                <div id="ai-answer" class="bg-white/5 rounded-xl p-3 mb-4 min-h-[60px] text-sm text-slate-300">كيف يمكنني مساعدتك اليوم؟</div>
+                <div id="ai-answer" class="bg-black/20 rounded-xl p-3 mb-4 min-h-[60px] text-sm text-slate-300">كيف يمكنني مساعدتك اليوم؟</div>
                 <div class="relative">
                     <input type="text" id="ai-query" class="w-full bg-white/10 border border-white/10 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-primary" placeholder="اسأل عن فواتيرك...">
                 </div>
             </div>
         </div>
-
-        <!-- Main Content -->
-        <main class="pt-24 pb-12 px-6 max-w-7xl mx-auto">
-            <div id="page-content"></div>
-        </main>
     </div>
 
+    <!-- Modals Container -->
+    <div id="modals"></div>
+
     <script>
         // ══════════════════════════════════════════════════════════
-        // مُصادَق — API Client (Inlined for reliability)
+        // مُصادَق — API Client
         // ══════════════════════════════════════════════════════════
         const API = {
             baseUrl: 'index.php?route=/api/v1',
             accessToken: localStorage.getItem('access_token'),
-            async post(path, body) {
-                const headers = { 'Accept': 'application/json', 'Content-Type': 'application/json' };
+            
+            async _request(method, path, body = null, isFormData = false) {
+                const headers = { 'Accept': 'application/json' };
                 if (this.accessToken) headers['Authorization'] = `Bearer ${this.accessToken}`;
-                const res = await fetch(`${this.baseUrl}${path}`, { method: 'POST', headers, body: JSON.stringify(body) });
+                if (!isFormData && body) {
+                    headers['Content-Type'] = 'application/json';
+                    body = JSON.stringify(body);
+                }
+                const res = await fetch(`${this.baseUrl}${path}`, { method, headers, body });
                 const data = await res.json();
                 if (!res.ok) throw data;
                 return data;
-            }
+            },
+            
+            get(path) { return this._request('GET', path); },
+            post(path, body) { return this._request('POST', path, body); },
+            upload(path, formData) { return this._request('POST', path, formData, true); }
         };
 
-        // ── Router ──
+        // ══════════════════════════════════════════════════════════
+        // SPA Engine & Views
+        // ══════════════════════════════════════════════════════════
         const isLoggedIn = () => !!localStorage.getItem('access_token');
-        const pageContent = document.getElementById('page-content');
+        const contentDiv = document.getElementById('page-content');
+        let currentChart = null;
 
-        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>
-                        <form id="login-form" class="space-y-6">
-                            <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 shadow-lg">دخول</button>
+        function logout() {
+            localStorage.removeItem('access_token');
+            API.accessToken = null;
+            initApp();
+        }
+
+        async function navigateTo(page) {
+            document.querySelectorAll('.nav-link').forEach(el => el.classList.remove('active'));
+            const activeLink = document.getElementById(`nav-${page}`);
+            if (activeLink) activeLink.classList.add('active');
+
+            contentDiv.innerHTML = '<div class="flex justify-center mt-20"><div class="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin"></div></div>';
+
+            if (page === 'dashboard') await renderDashboard();
+            else if (page === 'companies') await renderCompanies();
+            else if (page === 'invoices') await renderInvoices();
+        }
+
+        // ── Login View ───────────────────────────────────────────
+        function renderLogin() {
+            document.getElementById('sidebar').classList.add('hidden');
+            document.getElementById('header').classList.add('hidden');
+            document.getElementById('ai-container').classList.add('hidden');
+            
+            contentDiv.innerHTML = `
+                <div class="flex flex-col items-center justify-center min-h-[80vh]">
+                    <div class="w-full max-w-md p-10 glass-panel rounded-3xl shadow-2xl">
+                        <div class="w-16 h-16 bg-primary rounded-2xl flex items-center justify-center shadow-lg shadow-primary/30 mx-auto mb-6">
+                            <span class="text-white font-bold text-3xl">م</span>
+                        </div>
+                        <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-5">
+                            <input type="email" id="login-email" class="w-full bg-black/20 border border-white/10 rounded-xl px-5 py-3 focus:outline-none focus:border-primary text-white" placeholder="البريد الإلكتروني" required>
+                            <input type="password" id="login-password" class="w-full bg-black/20 border border-white/10 rounded-xl px-5 py-3 focus:outline-none focus:border-primary text-white" placeholder="كلمة المرور" required>
+                            <div id="login-error" class="text-red-400 text-sm text-center hidden p-2 bg-red-500/10 rounded-lg border border-red-500/20"></div>
+                            <button type="submit" class="w-full bg-gradient-to-r from-primary to-emerald-400 hover:from-primary-dark hover:to-primary text-white font-bold py-3 rounded-xl shadow-lg transition-all">تسجيل الدخول</button>
                         </form>
                     </div>
                 </div>
             `;
-        }
 
-        function dashboardPage() {
-            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>`;
-        }
-
-        function initCharts() {
-            const ctx = document.getElementById('invoiceChart');
-            if (ctx) {
-                new Chart(ctx, {
-                    type: 'line',
-                    data: {
-                        labels: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
-                        datasets: [{ label: 'الفواتير', data: [65, 59, 80, 81, 56, 55, 40], borderColor: '#10b981', tension: 0.4 }]
-                    },
-                    options: { scales: { y: { grid: { color: 'rgba(255,255,255,0.05)' } }, x: { grid: { display: false } } } }
-                });
-            }
-        }
-
-        function navigate() {
-            if (isLoggedIn()) {
-                pageContent.innerHTML = dashboardPage();
-                document.getElementById('nav-user').style.display = 'flex';
-                setTimeout(initCharts, 100);
-            } else {
-                pageContent.innerHTML = loginPage();
-                document.getElementById('nav-user').style.display = 'none';
-                setTimeout(() => {
-                    const form = document.getElementById('login-form');
-                    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');
-                            let msg = 'خطأ في الدخول';
-                            if (err && err.error && err.error.details && err.error.details.message) {
-                                msg = err.error.details.message;
-                            } else if (err && err.error && err.error.message_ar) {
-                                msg = err.error.message_ar;
-                            } else if (err && err.message) {
-                                msg = err.message;
-                            } else if (typeof err === 'string') {
-                                msg = err;
-                            }
-                            errEl.textContent = msg;
-                            errEl.classList.remove('hidden');
-                        }
-                    };
-                }, 50);
-            }
-        }
-
-        document.getElementById('ai-query').onkeydown = async (e) => {
-            if (e.key === 'Enter') {
-                const query = e.target.value;
-                document.getElementById('ai-answer').textContent = 'جاري التحليل...';
+            document.getElementById('login-form').onsubmit = async (e) => {
+                e.preventDefault();
+                const btn = e.target.querySelector('button');
+                btn.innerHTML = 'جاري التحقق...';
+                btn.disabled = true;
+                
                 try {
-                    const res = await API.post('/ai/query', { query });
-                    document.getElementById('ai-answer').textContent = res.data.answer;
-                } catch (err) { document.getElementById('ai-answer').textContent = 'خطأ في الاتصال.'; }
-            }
-        };
+                    const email = document.getElementById('login-email').value;
+                    const password = document.getElementById('login-password').value;
+                    const res = await API.post('/auth/login', { email, password });
+                    localStorage.setItem('access_token', res.data.access_token);
+                    API.accessToken = res.data.access_token;
+                    initApp();
+                } catch (err) {
+                    const errEl = document.getElementById('login-error');
+                    errEl.textContent = err.error?.message_ar || err.error?.details?.message || err.message || 'خطأ في الدخول';
+                    errEl.classList.remove('hidden');
+                    btn.innerHTML = 'تسجيل الدخول';
+                    btn.disabled = false;
+                }
+            };
+        }
 
-        navigate();
+        // ── Dashboard View ───────────────────────────────────────
+        async function renderDashboard() {
+            document.getElementById('page-title').textContent = 'لوحة التحكم';
+            try {
+                const res = await API.get('/dashboard');
+                const stats = res.data;
+                
+                let html = `
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+                        <div class="glass-panel p-6 rounded-3xl">
+                            <p class="text-slate-400 text-sm mb-1">فواتير هذا الشهر</p>
+                            <h3 class="text-4xl font-bold text-white">${stats.total_this_month}</h3>
+                        </div>
+                        <div class="glass-panel p-6 rounded-3xl">
+                            <p class="text-slate-400 text-sm mb-1">نسبة الاستخدام</p>
+                            <h3 class="text-4xl font-bold text-primary">${stats.subscription_usage}%</h3>
+                        </div>
+                        <div class="glass-panel p-6 rounded-3xl flex flex-col justify-center gap-3">
+                            <button onclick="navigateTo('invoices')" class="w-full py-3 bg-white/10 hover:bg-white/20 rounded-xl transition border border-white/5 text-sm font-bold">عرض جميع الفواتير</button>
+                        </div>
+                    </div>
+                    
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                        <div class="glass-panel p-8 rounded-3xl">
+                            <h4 class="font-bold mb-6 text-lg">أحدث الفواتير</h4>
+                            <div class="space-y-4">
+                `;
+                
+                if (stats.recent_invoices.length === 0) {
+                    html += `<p class="text-slate-500 text-center py-4">لا توجد فواتير بعد</p>`;
+                } else {
+                    stats.recent_invoices.forEach(inv => {
+                        const statusColor = inv.status === 'APPROVED' ? 'text-primary' : (inv.status === 'REJECTED' ? 'text-red-400' : 'text-yellow-400');
+                        html += `
+                        <div class="flex justify-between items-center p-4 bg-black/20 rounded-xl border border-white/5">
+                            <div>
+                                <p class="font-bold text-sm">${inv.invoice_uuid.substring(0,8)}...</p>
+                                <p class="text-xs text-slate-400">${inv.company_name}</p>
+                            </div>
+                            <span class="${statusColor} text-sm font-bold bg-white/5 px-3 py-1 rounded-full">${inv.status}</span>
+                        </div>`;
+                    });
+                }
+                
+                html += `</div></div></div>`;
+                contentDiv.innerHTML = html;
+            } catch (err) {
+                contentDiv.innerHTML = `<div class="text-red-400 p-4 glass-panel rounded-xl">خطأ في جلب الإحصائيات: ${err.error?.message_ar || err.message}</div>`;
+            }
+        }
+
+        // ── Companies View ───────────────────────────────────────
+        async function renderCompanies() {
+            document.getElementById('page-title').textContent = 'إدارة الشركات';
+            try {
+                const res = await API.get('/companies');
+                const companies = res.data;
+                
+                let html = `
+                    <div class="flex justify-end mb-6">
+                        <button onclick="showAddCompanyModal()" class="bg-primary hover:bg-primary-dark text-white px-6 py-2 rounded-xl transition-all shadow-lg flex items-center gap-2 font-bold">
+                            + إضافة شركة جديدة
+                        </button>
+                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                `;
+                
+                if (companies.length === 0) {
+                    html += `<div class="col-span-full text-center py-12 text-slate-500 glass-panel rounded-3xl">لا توجد شركات مسجلة بعد.</div>`;
+                } else {
+                    companies.forEach(company => {
+                        html += `
+                            <div class="glass-panel p-6 rounded-3xl flex flex-col h-full border-t-4 border-t-primary">
+                                <h3 class="text-xl font-bold mb-1">${company.name}</h3>
+                                <p class="text-slate-400 text-sm font-mono mb-4">الرقم الضريبي: ${company.tax_number}</p>
+                                
+                                <div class="mt-auto space-y-3">
+                                    <div class="flex items-center justify-between text-sm p-3 bg-black/20 rounded-xl border border-white/5">
+                                        <span class="text-slate-400">بوابة JoFotara</span>
+                                        ${company.jofotara_client_id 
+                                            ? '<span class="text-primary font-bold">مربوط ✓</span>' 
+                                            : '<span class="text-yellow-400 font-bold">غير مربوط ⚠</span>'}
+                                    </div>
+                                    <button onclick="showJoFotaraModal(${company.id})" class="w-full py-2 bg-white/5 hover:bg-white/10 rounded-xl text-sm transition border border-white/10">إعدادات الربط</button>
+                                </div>
+                            </div>
+                        `;
+                    });
+                }
+                
+                html += `</div>`;
+                contentDiv.innerHTML = html;
+            } catch (err) {
+                contentDiv.innerHTML = `<div class="text-red-400">خطأ في جلب الشركات</div>`;
+            }
+        }
+
+        // ── Invoices View ────────────────────────────────────────
+        async function renderInvoices() {
+            document.getElementById('page-title').textContent = 'سجل الفواتير';
+            try {
+                const res = await API.get('/invoices');
+                const invoices = res.data;
+                
+                let html = `
+                    <div class="flex justify-end mb-6">
+                        <button onclick="showUploadInvoiceModal()" class="bg-primary hover:bg-primary-dark text-white px-6 py-2 rounded-xl transition-all shadow-lg flex items-center gap-2 font-bold">
+                            رفع فاتورة يدوياً
+                        </button>
+                    </div>
+                    <div class="glass-panel rounded-3xl overflow-hidden">
+                        <table class="w-full text-right text-sm">
+                            <thead class="bg-white/5 border-b border-white/10 text-slate-300">
+                                <tr>
+                                    <th class="p-4">الرقم التسلسلي</th>
+                                    <th class="p-4">الشركة</th>
+                                    <th class="p-4">التاريخ</th>
+                                    <th class="p-4">الحالة</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y divide-white/5">
+                `;
+                
+                if (invoices.length === 0) {
+                    html += `<tr><td colspan="4" class="p-8 text-center text-slate-500">لا توجد فواتير.</td></tr>`;
+                } else {
+                    invoices.forEach(inv => {
+                        const statusColor = inv.status === 'APPROVED' ? 'text-primary' : (inv.status === 'REJECTED' ? 'text-red-400' : 'text-yellow-400');
+                        html += `
+                            <tr class="hover:bg-white/5 transition-colors">
+                                <td class="p-4 font-mono text-xs text-slate-300">${inv.invoice_uuid}</td>
+                                <td class="p-4 font-bold text-slate-200">${inv.company_id}</td>
+                                <td class="p-4 text-slate-400">${new Date(inv.created_at).toLocaleDateString('ar-JO')}</td>
+                                <td class="p-4 font-bold ${statusColor}">${inv.status}</td>
+                            </tr>
+                        `;
+                    });
+                }
+                
+                html += `</tbody></table></div>`;
+                contentDiv.innerHTML = html;
+            } catch (err) {
+                contentDiv.innerHTML = `<div class="text-red-400">خطأ في جلب الفواتير</div>`;
+            }
+        }
+
+        // ── Modals & Actions ─────────────────────────────────────
+        function showAddCompanyModal() {
+            const modals = document.getElementById('modals');
+            modals.innerHTML = `
+                <div class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] flex items-center justify-center" id="company-modal">
+                    <div class="glass-panel p-8 rounded-3xl w-full max-w-md border border-white/10 shadow-2xl">
+                        <h3 class="text-2xl font-bold mb-6">إضافة شركة جديدة</h3>
+                        <form id="add-company-form" class="space-y-4">
+                            <input type="text" id="comp-name" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none" placeholder="اسم الشركة" required>
+                            <input type="text" id="comp-tax" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none" placeholder="الرقم الضريبي (مثال: 123456789)" required>
+                            <div class="flex gap-3 mt-6">
+                                <button type="button" onclick="document.getElementById('company-modal').remove()" class="flex-1 py-3 bg-white/5 hover:bg-white/10 rounded-xl transition">إلغاء</button>
+                                <button type="submit" class="flex-1 py-3 bg-primary hover:bg-primary-dark text-white font-bold rounded-xl shadow-lg transition">حفظ</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            `;
+
+            document.getElementById('add-company-form').onsubmit = async (e) => {
+                e.preventDefault();
+                try {
+                    const name = document.getElementById('comp-name').value;
+                    const tax = document.getElementById('comp-tax').value;
+                    await API.post('/companies', { name, tax_number: tax });
+                    document.getElementById('company-modal').remove();
+                    renderCompanies();
+                } catch(err) {
+                    alert(err.error?.message_ar || 'حدث خطأ');
+                }
+            };
+        }
+
+        function showUploadInvoiceModal() {
+            const modals = document.getElementById('modals');
+            modals.innerHTML = `
+                <div class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] flex items-center justify-center" id="invoice-modal">
+                    <div class="glass-panel p-8 rounded-3xl w-full max-w-md border border-white/10 shadow-2xl">
+                        <h3 class="text-2xl font-bold mb-6">رفع فاتورة (JSON/XML)</h3>
+                        <form id="upload-invoice-form" class="space-y-4">
+                            <input type="text" id="inv-comp-id" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none" placeholder="معرف الشركة (Company ID)" required>
+                            <textarea id="inv-payload" rows="6" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none font-mono text-sm" placeholder='{"Invoice": {...}}' required></textarea>
+                            <div class="flex gap-3 mt-6">
+                                <button type="button" onclick="document.getElementById('invoice-modal').remove()" class="flex-1 py-3 bg-white/5 hover:bg-white/10 rounded-xl transition">إلغاء</button>
+                                <button type="submit" class="flex-1 py-3 bg-primary hover:bg-primary-dark text-white font-bold rounded-xl shadow-lg transition">تحقق ورفع</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            `;
+
+            document.getElementById('upload-invoice-form').onsubmit = async (e) => {
+                e.preventDefault();
+                try {
+                    const companyId = parseInt(document.getElementById('inv-comp-id').value);
+                    const payload = JSON.parse(document.getElementById('inv-payload').value);
+                    
+                    const btn = e.target.querySelector('button[type="submit"]');
+                    btn.textContent = 'جاري التحقق...';
+                    btn.disabled = true;
+
+                    await API.post('/invoices/upload', { company_id: companyId, payload });
+                    document.getElementById('invoice-modal').remove();
+                    renderInvoices();
+                } catch(err) {
+                    alert(err.error?.message_ar || 'صيغة البيانات غير صحيحة أو حدث خطأ ضريبي.');
+                    e.target.querySelector('button[type="submit"]').textContent = 'تحقق ورفع';
+                    e.target.querySelector('button[type="submit"]').disabled = false;
+                }
+            };
+        }
+
+        // ── Init Engine ──────────────────────────────────────────
+        function initApp() {
+            if (isLoggedIn()) {
+                document.getElementById('sidebar').classList.remove('hidden');
+                document.getElementById('header').classList.remove('hidden');
+                document.getElementById('ai-container').classList.remove('hidden');
+                document.getElementById('sidebar').classList.add('flex');
+                document.getElementById('header').classList.add('flex');
+                
+                // AI Chat Listener
+                document.getElementById('ai-query').onkeydown = async (e) => {
+                    if (e.key === 'Enter') {
+                        const q = e.target.value;
+                        if (!q) return;
+                        e.target.value = '';
+                        document.getElementById('ai-answer').textContent = 'جاري التحليل...';
+                        try {
+                            const res = await API.post('/ai/query', { query: q });
+                            document.getElementById('ai-answer').textContent = res.data.answer;
+                        } catch (err) {
+                            document.getElementById('ai-answer').textContent = 'حدث خطأ في الاتصال بالمساعد الذكي.';
+                        }
+                    }
+                };
+
+                navigateTo('dashboard');
+            } else {
+                renderLogin();
+            }
+        }
+
+        // Start
+        initApp();
     </script>
 </body>
 </html>
