🚀 مُصادَق: تحديث برمجي جديد 2026-05-03 02:38

app/Modules/Invoices/InvoiceController.php

@@ -6,6 +6,7 @@ namespace App\Modules\Invoices;
 
 use App\Core\{Request, Response};
 use App\Services\FileStorageService;
+use App\Services\AiExtractionService;
 use App\Modules\Invoices\InvoiceModel;
 use Throwable;
 
@@ -13,7 +14,8 @@ final class InvoiceController
 {
     public function __construct(
         private readonly InvoiceModel $invoiceModel,
-        private readonly FileStorageService $storage
+        private readonly FileStorageService $storage,
+        private readonly AiExtractionService $aiExtraction
     ) {}
 
     public function list(Request $request): void
@@ -45,24 +47,52 @@ final class InvoiceController
             $fileHash = $this->storage->getHash($filePath);
 
             // Create invoice record
-            $invoiceId = $this->invoiceModel->create([
+            $invoiceId = \Ramsey\Uuid\Uuid::uuid4()->toString();
+            $this->invoiceModel->create([
+                'id' => $invoiceId,
+                'invoice_uuid' => \Ramsey\Uuid\Uuid::uuid4()->toString(),
                 'tenant_id' => $tenantId,
                 'company_id' => $companyId,
                 'uploaded_by' => $request->user->user_id,
-                'status' => 'uploaded',
+                'status' => 'PROCESSING',
                 'original_file_path' => $filePath,
                 'original_file_hash' => $fileHash,
                 'idempotency_key' => bin2hex(random_bytes(16))
             ]);
 
-            // TODO: Push to queue for AI extraction
-            // QueueService::push('extract_invoice', ['invoice_id' => $invoiceId]);
+            // Attempt AI Extraction
+            try {
+                $mimeType = mime_content_type($filePath);
+                $extractedData = $this->aiExtraction->extractInvoiceData($filePath, $mimeType);
+                
+                // Update Invoice with extracted data
+                $this->invoiceModel->update($invoiceId, [
+                    'status' => 'EXTRACTED',
+                    'extracted_data' => json_encode($extractedData, JSON_UNESCAPED_UNICODE)
+                ]);
+
+                Response::json([
+                    'success' => true,
+                    'data' => [
+                        'invoice_id' => $invoiceId,
+                        'extracted_data' => $extractedData
+                    ],
+                    'message' => 'تم رفع الفاتورة واستخراج البيانات بنجاح بالذكاء الاصطناعي'
+                ]);
+
+            } catch (Throwable $aiError) {
+                // Keep it uploaded, maybe manual retry later
+                $this->invoiceModel->update($invoiceId, [
+                    'status' => 'AI_FAILED'
+                ]);
+                
+                Response::json([
+                    'success' => true,
+                    'data' => ['invoice_id' => $invoiceId],
+                    'message' => 'تم الرفع ولكن فشل استخراج البيانات. ' . $aiError->getMessage()
+                ]);
+            }
 
-            Response::json([
-                'success' => true,
-                'data' => ['invoice_id' => $invoiceId],
-                'message' => 'تم رفع الفاتورة بنجاح وبدء المعالجة'
-            ]);
         } catch (Throwable $e) {
             Response::error($e->getMessage(), 'UPLOAD_FAILED', 500);
         }

app/Modules/Users/UsersController.php

@@ -0,0 +1,71 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Modules\Users;
+
+use App\Core\{Request, Response, Database};
+use Throwable;
+
+final class UsersController
+{
+    public function __construct(private readonly UserModel $userModel) {}
+
+    public function list(Request $request): void
+    {
+        try {
+            $tenantId = $request->tenantId;
+            $db = Database::getInstance();
+            $stmt = $db->prepare("SELECT id, name, email, role, is_active, created_at FROM users WHERE tenant_id = ? AND deleted_at IS NULL ORDER BY created_at DESC");
+            $stmt->execute([$tenantId]);
+            $users = $stmt->fetchAll();
+
+            Response::json([
+                'success' => true,
+                'data' => $users
+            ]);
+        } catch (Throwable $e) {
+            Response::error('Failed to load users: ' . $e->getMessage(), 'USERS_FETCH_ERROR', 500);
+        }
+    }
+
+    public function create(Request $request): void
+    {
+        $name = $request->input('name');
+        $email = $request->input('email');
+        $password = $request->input('password');
+        $role = $request->input('role', 'accountant');
+
+        if (!$name || !$email || !$password) {
+            Response::error('Name, email, and password are required', 'VALIDATION_ERROR', 422);
+            return;
+        }
+
+        try {
+            // Check if email exists
+            if ($this->userModel->findByEmail($email)) {
+                Response::error('Email already in use', 'EMAIL_EXISTS', 409);
+                return;
+            }
+
+            $userId = \Ramsey\Uuid\Uuid::uuid4()->toString();
+            $this->userModel->create([
+                'id' => $userId,
+                'tenant_id' => $request->tenantId,
+                'name' => $name,
+                'email' => $email,
+                'password_hash' => password_hash($password, PASSWORD_BCRYPT),
+                'role' => $role,
+                'is_active' => 1
+            ]);
+
+            Response::json([
+                'success' => true,
+                'message' => 'User created successfully',
+                'data' => ['id' => $userId]
+            ]);
+        } catch (Throwable $e) {
+            Response::error($e->getMessage(), 'USER_CREATE_ERROR', 500);
+        }
+    }
+}

app/Services/AiExtractionService.php

@@ -0,0 +1,89 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Services;
+
+use Exception;
+
+final class AiExtractionService
+{
+    private string $apiKey;
+    private string $model;
+
+    public function __construct()
+    {
+        $this->apiKey = $_ENV['GEMINI_API_KEY'] ?? '';
+        $this->model = $_ENV['GEMINI_MODEL'] ?? 'gemini-2.0-flash';
+    }
+
+    public function extractInvoiceData(string $filePath, string $mimeType): array
+    {
+        if (empty($this->apiKey)) {
+            throw new Exception("Gemini API Key is missing. Please configure it in .env");
+        }
+
+        $fileContent = file_get_contents($filePath);
+        if ($fileContent === false) {
+            throw new Exception("Could not read uploaded invoice file.");
+        }
+
+        $base64Data = base64_encode($fileContent);
+
+        $prompt = "Please extract the following information from this invoice and return it strictly as JSON without markdown blocks or backticks:\n"
+            . "- invoice_number\n"
+            . "- invoice_date (YYYY-MM-DD)\n"
+            . "- total_amount\n"
+            . "- tax_amount\n"
+            . "- vendor_name\n"
+            . "- vendor_tax_number";
+
+        $payload = [
+            'contents' => [
+                [
+                    'parts' => [
+                        ['text' => $prompt],
+                        [
+                            'inline_data' => [
+                                'mime_type' => $mimeType,
+                                'data' => $base64Data
+                            ]
+                        ]
+                    ]
+                ]
+            ],
+            'generationConfig' => [
+                'temperature' => 0.1,
+                'response_mime_type' => 'application/json'
+            ]
+        ];
+
+        $url = "https://generativelanguage.googleapis.com/v1beta/models/{$this->model}:generateContent?key={$this->apiKey}";
+
+        $ch = curl_init($url);
+        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+        curl_setopt($ch, CURLOPT_POST, true);
+        curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($payload));
+        curl_setopt($ch, CURLOPT_HTTPHEADER, [
+            'Content-Type: application/json'
+        ]);
+
+        $response = curl_exec($ch);
+        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+        curl_close($ch);
+
+        if ($httpCode !== 200) {
+            throw new Exception("AI Extraction failed. HTTP Code: {$httpCode}. Response: {$response}");
+        }
+
+        $result = json_decode($response, true);
+        $text = $result['candidates'][0]['content']['parts'][0]['text'] ?? '{}';
+        
+        $data = json_decode($text, true);
+        if (!is_array($data)) {
+            throw new Exception("Failed to parse AI output as JSON: {$text}");
+        }
+
+        return $data;
+    }
+}

app/Services/FileStorageService.php

@@ -22,9 +22,9 @@ final class FileStorageService
         $mime = finfo_file($finfo, $file['tmp_name']);
         finfo_close($finfo);
 
-        $allowedMimes = ['application/pdf', 'image/jpeg', 'image/png', 'image/webp'];
+        $allowedMimes = ['application/pdf', 'image/jpeg', 'image/png', 'image/webp', 'application/json', 'text/plain', 'text/xml', 'application/xml'];
         if (!in_array($mime, $allowedMimes)) {
-            throw new Exception("نوع الملف غير مسموح به");
+            throw new Exception("نوع الملف غير مسموح به ({$mime})");
         }
 
         // 2. Generate path
@@ -37,8 +37,15 @@ final class FileStorageService
         $filename = hash('sha256', $file['name'] . time() . uniqid()) . '.' . $extension;
         $targetPath = "{$dir}/{$filename}";
 
+        if (isset($file['error']) && $file['error'] !== UPLOAD_ERR_OK) {
+            throw new Exception("حدث خطأ أثناء رفع الملف من المتصفح. كود الخطأ: " . $file['error']);
+        }
+
         if (!move_uploaded_file($file['tmp_name'], $targetPath)) {
-            throw new Exception("فشل رفع الملف");
+            // Fallback for some non-standard PHP environments
+            if (!copy($file['tmp_name'], $targetPath)) {
+                throw new Exception("فشل نقل الملف إلى المسار النهائي: " . $targetPath);
+            }
         }
 
         return $targetPath;

describe.php

@@ -0,0 +1,7 @@
+<?php
+require_once __DIR__ . '/vendor/autoload.php';
+$dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
+$dotenv->load();
+$db = new PDO("mysql:host={$_ENV['DB_HOST']};port={$_ENV['DB_PORT']};dbname={$_ENV['DB_DATABASE']}", $_ENV['DB_USERNAME'], $_ENV['DB_PASSWORD']);
+$stmt = $db->query("DESCRIBE invoices");
+print_r($stmt->fetchAll(PDO::FETCH_ASSOC));

public/index.php

@@ -28,6 +28,16 @@ $router->addRoute('PUT', '/api/v1/companies/{id}/jofotara', [
     'handler' => [\App\Modules\Companies\CompanyController::class, 'updateJoFotara']
 ]);
 
+// ══ User Routes ══════════════════════════════════════════════
+$router->addRoute('GET', '/api/v1/users', [
+    'middleware' => [\App\Middleware\AuthMiddleware::class],
+    'handler' => [\App\Modules\Users\UsersController::class, 'list']
+]);
+$router->addRoute('POST', '/api/v1/users', [
+    'middleware' => [\App\Middleware\AuthMiddleware::class],
+    'handler' => [\App\Modules\Users\UsersController::class, 'create']
+]);
+
 // ══ Invoice Routes ═══════════════════════════════════════════
 $router->addRoute('GET', '/api/v1/invoices', [
     'middleware' => [\App\Middleware\AuthMiddleware::class],

public/shell.php

@@ -171,25 +171,99 @@
         async function renderUsers() {
             document.getElementById('page-title').textContent = 'إدارة المستخدمين';
             try {
-                // We'll build the API for this later, for now just show a placeholder
-                contentDiv.innerHTML = `
-                    <div class="flex justify-between items-center mb-6">
-                        <p class="text-slate-400">لوحة تحكم السوبر يوزر لإدارة المحاسبين والمدراء وربطهم بالشركات.</p>
-                        <button 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">
-                            + إضافة مستخدم
+                const res = await API.get('/users');
+                const users = res.data;
+
+                let html = `
+                    <div class="flex justify-end mb-6">
+                        <button onclick="showAddUserModal()" 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 p-12 rounded-3xl text-center">
-                        <svg class="w-16 h-16 text-slate-600 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
-                        <h3 class="text-xl font-bold mb-2">قريباً...</h3>
-                        <p class="text-slate-500">جاري برمجة واجهات ربط المحاسبين بالشركات وتحديد الصلاحيات الخاصة بهم.</p>
-                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 `;
+
+                if (users.length === 0) {
+                    html += `<div class="col-span-full text-center py-12 text-slate-500 glass-panel rounded-3xl">لا يوجد مستخدمين مسجلين.</div>`;
+                } else {
+                    users.forEach(user => {
+                        const roleColor = user.role === 'admin' ? 'text-primary' : (user.role === 'manager' ? 'text-blue-400' : 'text-slate-400');
+                        const roleLabel = user.role === 'admin' ? 'سوبر أدمن' : (user.role === 'manager' ? 'مدير' : 'محاسب');
+                        html += `
+                            <div class="glass-panel p-6 rounded-3xl flex flex-col h-full border-t-4 border-t-primary">
+                                <div class="flex items-center gap-4 mb-4">
+                                    <div class="w-12 h-12 rounded-full bg-black/40 flex items-center justify-center font-bold text-xl text-primary">
+                                        ${user.name.charAt(0)}
+                                    </div>
+                                    <div>
+                                        <h3 class="text-xl font-bold">${user.name}</h3>
+                                        <p class="text-slate-400 text-sm">${user.email}</p>
+                                    </div>
+                                </div>
+                                <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">الصلاحية</span>
+                                        <span class="${roleColor} font-bold">${roleLabel}</span>
+                                    </div>
+                                    <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">الحالة</span>
+                                        ${user.is_active ? '<span class="text-emerald-400 font-bold">نشط</span>' : '<span class="text-red-400 font-bold">معطل</span>'}
+                                    </div>
+                                </div>
+                            </div>
+                        `;
+                    });
+                }
+                
+                html += `</div>`;
+                contentDiv.innerHTML = html;
             } catch(err) {
                 contentDiv.innerHTML = `<div class="text-red-400">خطأ في جلب المستخدمين</div>`;
             }
         }
 
+        function showAddUserModal() {
+            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 p-4 overflow-y-auto" id="user-modal">
+                    <div class="glass-panel p-8 rounded-3xl w-full max-w-md border border-white/10 shadow-2xl my-auto">
+                        <h3 class="text-2xl font-bold mb-6">إضافة مستخدم جديد</h3>
+                        <form id="add-user-form" class="space-y-4">
+                            <input type="text" id="usr-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="email" id="usr-email" 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="password" id="usr-password" 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>
+                            <select id="usr-role" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none" required>
+                                <option value="accountant">محاسب</option>
+                                <option value="manager">مدير</option>
+                            </select>
+                            
+                            <div class="flex gap-3 mt-6 pt-4 border-t border-white/10">
+                                <button type="button" onclick="document.getElementById('user-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-user-form').onsubmit = async (e) => {
+                e.preventDefault();
+                try {
+                    const data = {
+                        name: document.getElementById('usr-name').value,
+                        email: document.getElementById('usr-email').value,
+                        password: document.getElementById('usr-password').value,
+                        role: document.getElementById('usr-role').value
+                    };
+                    await API.post('/users', data);
+                    document.getElementById('user-modal').remove();
+                    renderUsers();
+                } catch(err) {
+                    alert(err.error?.message_ar || err.error?.details?.message || err.message || 'حدث خطأ');
+                }
+            };
+        }
+
         // ── Login View ───────────────────────────────────────────
         function renderLogin() {
             document.getElementById('sidebar').classList.add('hidden');
@@ -240,50 +314,104 @@
 
         // ── Dashboard View ───────────────────────────────────────
         async function renderDashboard() {
-            document.getElementById('page-title').textContent = 'لوحة التحكم';
+            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 class="glass-panel p-6 rounded-3xl border-t-4 border-t-primary shadow-xl bg-gradient-to-br from-black/40 to-transparent">
+                            <div class="flex items-center justify-between mb-4">
+                                <p class="text-slate-400 font-bold">فواتير هذا الشهر</p>
+                                <svg class="w-8 h-8 text-primary opacity-50" 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>
+                            </div>
+                            <h3 class="text-5xl font-black 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 class="glass-panel p-6 rounded-3xl border-t-4 border-t-emerald-500 shadow-xl bg-gradient-to-br from-black/40 to-transparent">
+                            <div class="flex items-center justify-between mb-4">
+                                <p class="text-slate-400 font-bold">نسبة استهلاك الباقة</p>
+                                <svg class="w-8 h-8 text-emerald-500 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
+                            </div>
+                            <h3 class="text-5xl font-black text-emerald-400">${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 class="glass-panel p-6 rounded-3xl flex flex-col justify-center gap-3 bg-gradient-to-br from-primary/10 to-transparent">
+                            <h3 class="text-lg font-bold text-white mb-2">إجراءات سريعة</h3>
+                            <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 flex items-center justify-center gap-2">
+                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
+                                عرض الفواتير
+                            </button>
+                            <button onclick="showUploadInvoiceModal()" class="w-full py-3 bg-primary hover:bg-primary-dark rounded-xl transition text-white text-sm font-bold shadow-lg flex items-center justify-center gap-2">
+                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
+                                رفع فاتورة جديدة
+                            </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="glass-panel p-8 rounded-3xl shadow-2xl">
+                            <h4 class="font-bold mb-6 text-xl flex items-center gap-2"><span class="w-2 h-6 bg-primary rounded-full"></span> أحدث الفواتير</h4>
                             <div class="space-y-4">
                 `;
                 
                 if (stats.recent_invoices.length === 0) {
-                    html += `<p class="text-slate-500 text-center py-4">لا توجد فواتير بعد</p>`;
+                    html += `<p class="text-slate-500 text-center py-8 bg-black/20 rounded-xl">لا توجد فواتير بعد</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 class="flex justify-between items-center p-5 bg-black/30 rounded-2xl border border-white/5 hover:border-white/10 transition-colors">
+                            <div class="flex items-center gap-4">
+                                <div class="w-10 h-10 rounded-full bg-white/5 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="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>
+                                </div>
+                                <div>
+                                    <p class="font-bold text-sm text-slate-200">${inv.invoice_uuid.substring(0,8)}...</p>
+                                    <p class="text-xs text-slate-400 mt-1">${inv.company_name}</p>
+                                </div>
                             </div>
-                            <span class="${statusColor} text-sm font-bold bg-white/5 px-3 py-1 rounded-full">${inv.status}</span>
+                            <span class="${statusColor} text-xs font-bold bg-white/5 px-4 py-2 rounded-full tracking-wider border border-white/5">${inv.status}</span>
                         </div>`;
                     });
                 }
                 
-                html += `</div></div></div>`;
+                html += `
+                            </div>
+                        </div>
+                        <div class="glass-panel p-8 rounded-3xl shadow-2xl flex flex-col items-center justify-center">
+                            <h4 class="font-bold mb-6 text-xl self-start flex items-center gap-2"><span class="w-2 h-6 bg-primary rounded-full"></span> حالة الفواتير</h4>
+                            <div class="w-full max-w-[250px] aspect-square relative">
+                                <canvas id="statusChart"></canvas>
+                            </div>
+                        </div>
+                    </div>`;
                 contentDiv.innerHTML = html;
+
+                // Render Chart
+                if (stats.status_distribution && stats.status_distribution.length > 0) {
+                    const ctx = document.getElementById('statusChart').getContext('2d');
+                    if (currentChart) currentChart.destroy();
+                    currentChart = new Chart(ctx, {
+                        type: 'doughnut',
+                        data: {
+                            labels: stats.status_distribution.map(s => s.status),
+                            datasets: [{
+                                data: stats.status_distribution.map(s => s.count),
+                                backgroundColor: ['#10b981', '#fbbf24', '#f87171', '#60a5fa'],
+                                borderWidth: 0,
+                                hoverOffset: 4
+                            }]
+                        },
+                        options: {
+                            responsive: true,
+                            plugins: {
+                                legend: { position: 'bottom', labels: { color: '#cbd5e1', font: { family: 'system-ui' } } }
+                            },
+                            cutout: '70%'
+                        }
+                    });
+                }
+
             } catch (err) {
                 contentDiv.innerHTML = `<div class="text-red-400 p-4 glass-panel rounded-xl">خطأ في جلب الإحصائيات: ${err.error?.message_ar || err.message}</div>`;
             }