diff --git a/public/assets/js/api.js b/public/assets/js/api.js
index 5f1ec13..19bd972 100644
--- a/public/assets/js/api.js
+++ b/public/assets/js/api.js
@@ -2,7 +2,7 @@
  * مُصادَق — API Client with JWT Auth & Refresh Flow
  */
 const API = {
-    baseUrl: '/api/v1',
+    baseUrl: '/Application/public/api.php',
     accessToken: localStorage.getItem('access_token'),
 
     async get(path) {
@@ -39,7 +39,6 @@ const API = {
             });
 
             if (response.status === 401) {
-                // Try refresh token
                 const refreshed = await this.refreshToken();
                 if (refreshed) {
                     return this._request(method, path, body, isFormData);
@@ -72,5 +71,3 @@ const API = {
         return false;
     }
 };
-
-export default API;
diff --git a/public/shell.php b/public/shell.php
index 47b84eb..63f015e 100644
--- a/public/shell.php
+++ b/public/shell.php
@@ -8,7 +8,6 @@
     <!-- Styles -->
     <link rel="stylesheet" href="assets/css/app.css">
     <script src="https://cdn.tailwindcss.com"></script>
-    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     
     <script>
@@ -29,7 +28,7 @@
 </head>
 <body class="bg-dark text-slate-100 antialiased overflow-x-hidden">
 
-    <div id="app" x-data="appRouter()">
+    <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">
@@ -39,176 +38,220 @@
                 <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">
-                <template x-if="isLoggedIn">
-                    <div class="flex items-center gap-4">
-                        <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>
-                        </button>
-                        <div class="w-10 h-10 rounded-full bg-slate-800 border border-white/10"></div>
-                    </div>
-                </template>
+            <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>
+                </button>
+                <div class="w-10 h-10 rounded-full bg-slate-800 border border-white/10"></div>
             </div>
         </nav>
 
         <!-- AI Floating Assistant -->
-        <div class="fixed bottom-8 right-8 z-[60]" x-data="{ open: false, query: '', answer: '', loading: false }">
-            <button @click="open = !open" 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">
+        <div class="fixed bottom-8 right-8 z-[60]">
+            <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 x-show="open" x-transition class="absolute bottom-20 right-0 w-80 glass rounded-3xl border-white/10 p-6 shadow-2xl">
+            <div id="ai-chat" class="hidden absolute bottom-20 right-0 w-80 glass rounded-3xl border border-white/10 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 class="bg-white/5 rounded-xl p-3 mb-4 min-h-[60px] text-sm text-slate-300" x-text="answer || 'كيف يمكنني مساعدتك اليوم؟'"></div>
-
+                <div id="ai-answer" class="bg-white/5 rounded-xl p-3 mb-4 min-h-[60px] text-sm text-slate-300">كيف يمكنني مساعدتك اليوم؟</div>
                 <div class="relative">
-                    <input type="text" x-model="query" @keydown.enter="loading = true; answer = 'جاري التحليل...'; const res = await API.post('/ai/query', {query}); answer = res.data.answer; loading = false; 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="اسأل عن فواتيرك...">
-                    <button class="absolute left-2 top-2 text-primary">
-                        <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="M13 5l7 7-7 7M5 5l7 7-7 7"></path></svg>
-                    </button>
+                    <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" x-html="pageHtml"></div>
+            <div id="page-content"></div>
         </main>
-
-        <!-- Notifications -->
-        <div class="fixed bottom-6 left-6 z-[100] flex flex-col gap-3" id="toast-container"></div>
     </div>
 
-    <script type="module">
-        import API from './assets/js/api.js';
+    <!-- Load API Client -->
+    <script src="assets/js/api.js"></script>
+    
+    <script>
+        // ══════════════════════════════════════════════════════════
+        // مُصادَق — SPA Router (No frameworks, no race conditions)
+        // ══════════════════════════════════════════════════════════
 
-        document.addEventListener('alpine:init', () => {
-            Alpine.data('appRouter', () => ({
-                isLoggedIn: !!localStorage.getItem('access_token'),
-                pageHtml: 'جاري التحميل...',
-                async init() {
-                console.log('App Initialized');
-                await this.navigate(window.location.pathname);
-                window.onpopstate = () => this.navigate(window.location.pathname);
-            },
-            async navigate(path) {
-                console.log('Navigating to:', path);
-                const isLogin = path.includes('login');
-                
-                if (!this.isLoggedIn && !isLogin) {
-                    this.pageHtml = await this.loadPage('login');
-                } else if (isLogin) {
-                    this.pageHtml = await this.loadPage('login');
-                } else {
-                    this.pageHtml = await this.loadPage('dashboard');
-                }
-            },
-            initCharts() {
-                const ctx = document.getElementById('invoiceChart')?.getContext('2d');
-                if (ctx) {
-                    new Chart(ctx, {
-                        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)'
-                            }]
-                        },
-                        options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.05)' } }, x: { grid: { display: false } } } }
-                    });
-                }
-                const statusCtx = document.getElementById('statusChart')?.getContext('2d');
-                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' } } } }
-                    });
-                }
-            },
-            async loadPage(page) {
-                if (page === 'dashboard') {
-                    return `
-                    <div class="space-y-8" x-init="setTimeout(() => initCharts(), 100)">
-                        <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>
-                                رفع فاتورة جديدة
+        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>
+                            <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>
-                        </div>
-                        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
-                            <div class="glass p-6 rounded-3xl border-white/10 glow">
-                                <p class="text-slate-400 text-sm mb-1">فواتير الشهر</p>
-                                <h3 class="text-3xl font-bold">1,284</h3>
-                            </div>
-                            <div class="glass p-6 rounded-3xl border-white/10">
-                                <p class="text-slate-400 text-sm mb-1">تمت المصادقة</p>
-                                <h3 class="text-3xl font-bold">1,150</h3>
-                            </div>
-                            <div class="glass p-6 rounded-3xl border-white/10">
-                                <p class="text-slate-400 text-sm mb-1">قيد المعالجة</p>
-                                <h3 class="text-3xl font-bold">94</h3>
-                            </div>
-                            <div class="glass p-6 rounded-3xl border-white/10 border-danger/20">
-                                <p class="text-slate-400 text-sm mb-1">تنبيهات المخاطر</p>
-                                <h3 class="text-3xl font-bold text-danger">4</h3>
+                        </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="grid grid-cols-1 lg:grid-cols-3 gap-8">
-                            <div class="lg:col-span-2 glass p-8 rounded-3xl 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-white/10">
-                                <h4 class="font-bold mb-6">توزيع الحالات</h4>
-                                <canvas id="statusChart" height="250"></canvas>
+                        <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>`;
-                }
-                if (page === 'login') 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-white/10">
-                            <h2 class="text-3xl font-bold mb-2 text-center">مرحباً بك مجدداً</h2>
-                            <p class="text-slate-400 text-center mb-8">قم بتسجيل الدخول للوصول إلى لوحة التحكم</p>
-                            
-                            <form class="space-y-6">
-                                <div>
-                                    <label class="block text-sm font-medium text-slate-300 mb-2">البريد الإلكتروني</label>
-                                    <input type="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">
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-slate-300 mb-2">كلمة المرور</label>
-                                    <input type="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="••••••••">
-                                </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>
-                            </form>
+                        <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>
-                `;
-                return '<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>
+                </div>
+            `;
+        }
+
+        // ── Chart Initialization ─────────────────────────────────
+        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,
+                            fill: true,
+                            backgroundColor: 'rgba(16, 185, 129, 0.1)'
+                        }]
+                    },
+                    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 } } }
+                    }
+                });
+            }
+        }
+
+        // ── Router ───────────────────────────────────────────────
+        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';
+                
+                // 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 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);
+                                    }
+                                    API.accessToken = result.data.access_token;
+                                    navigate();
+                                }
+                            } catch (err) {
+                                errorEl.textContent = err.message || 'خطأ في البريد الإلكتروني أو كلمة المرور';
+                                errorEl.classList.remove('hidden');
+                            }
+                        });
+                    }
+                }, 50);
+            }
+        }
+
+        // ── Start the app ────────────────────────────────────────
+        navigate();
     </script>
 </body>
 </html>
