Update: 2026-05-11 01:16:32

public/shell.php

@@ -2494,50 +2494,11 @@
                         <input x-show="isEditingInvoice" type="number" step="0.01" x-model="currentInvoice.tax_amount" class="form-input" style="padding:4px; font-size:13px; color:var(--amber-mid);" placeholder="الضريبة">
                     </div>
 
-                    <!-- Items Table -->
+                    <!-- Items Button -->
-                    <div x-show="currentInvoice?.items?.length > 0"
+                    <div x-show="currentInvoice?.items?.length > 0" style="margin-top:4px;">
-                        style="border:1px solid var(--border); border-radius:11px; overflow-x:auto;">
+                        <button @click="showItemsModal = true" class="btn btn-navy" style="width:100%; justify-content:center; border-radius:11px; padding:12px;">
-                        <div
+                            📋 عرض بنود الفاتورة (<span x-text="currentInvoice?.items?.length"></span>)
-                            style="padding:8px 12px; background:#F8F7FD; font-size:11px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:0.06em; position:sticky; top:0; z-index:2; border-bottom:1px solid var(--border);">
+                        </button>
-                            بنود الفاتورة
-                        </div>
-                        <table style="width:100%; border-collapse:collapse; font-size:11px; min-width:320px;">
-                            <thead style="background:white;">
-                                <tr>
-                                    <th
-                                        style="padding:8px 10px; text-align:right; color:var(--text-3); font-weight:600; border-bottom:1px solid var(--border);">
-                                        البند</th>
-                                    <th
-                                        style="padding:8px 10px; text-align:center; color:var(--text-3); font-weight:600; border-bottom:1px solid var(--border);">
-                                        الكمية</th>
-                                    <th
-                                        style="padding:8px 10px; text-align:left; color:var(--text-3); font-weight:600; border-bottom:1px solid var(--border);">
-                                        السعر</th>
-                                    <th
-                                        style="padding:8px 10px; text-align:left; color:var(--text-3); font-weight:600; border-bottom:1px solid var(--border);">
-                                        الضريبة</th>
-                                    <th
-                                        style="padding:8px 10px; text-align:left; color:var(--text-3); font-weight:600; border-bottom:1px solid var(--border);">
-                                        الإجمالي</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <template x-for="item in currentInvoice?.items" :key="item.id">
-                                    <tr style="border-bottom:1px solid #F0EFF8;">
-                                        <td style="padding:8px 10px; color:var(--text-2);" x-text="item.description">
-                                        </td>
-                                        <td style="padding:8px 10px; text-align:center; color:var(--text-3); font-family:'Outfit',sans-serif;"
-                                            x-text="item.quantity"></td>
-                                        <td style="padding:8px 10px; text-align:left; color:var(--green-mid); font-family:'Outfit',sans-serif;"
-                                            x-text="item.unit_price"></td>
-                                        <td style="padding:8px 10px; text-align:left; color:var(--amber-mid); font-family:'Outfit',sans-serif;"
-                                            x-text="(item.tax_rate || 0) + '%'"></td>
-                                        <td style="padding:8px 10px; text-align:left; font-weight:bold; color:var(--violet-mid); font-family:'Outfit',sans-serif;"
-                                            x-text="item.line_total"></td>
-                                    </tr>
-                                </template>
-                            </tbody>
-                        </table>
                     </div>
 
                     <!-- QR Code -->
@@ -2601,6 +2562,49 @@
         </div>
     </div>
 
+    <!-- ── VIEW ITEMS MODAL ────────────────────────────── -->
+    <div x-show="showItemsModal" x-cloak class="modal-backdrop" style="z-index:200;">
+        <div class="modal-box" style="max-width:800px; width:95vw; background:var(--bg-card);">
+            <div class="modal-head">
+                <div class="modal-head-icon navy">📋</div>
+                <div style="flex:1;">
+                    <div class="modal-title">بنود الفاتورة</div>
+                    <div class="modal-subtitle" x-text="'عدد البنود: ' + (currentInvoice?.items?.length || 0)"></div>
+                </div>
+                <button @click="showItemsModal = false" class="modal-close-btn">✕</button>
+            </div>
+            <div class="modal-divider"></div>
+            <div class="modal-body" style="max-height:70vh; overflow-y:auto; padding:0;">
+                <table class="data-table" style="width:100%; border-collapse:collapse; text-align:right;">
+                    <thead style="position:sticky; top:0; background:var(--bg-body); z-index:10; border-bottom:1px solid var(--border);">
+                        <tr>
+                            <th style="padding:12px 16px;">البند</th>
+                            <th style="padding:12px 16px; text-align:center;">الكمية</th>
+                            <th style="padding:12px 16px;">السعر</th>
+                            <th style="padding:12px 16px;">الضريبة</th>
+                            <th style="padding:12px 16px;">الإجمالي</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <template x-for="item in currentInvoice?.items" :key="item.id">
+                            <tr style="border-bottom:1px solid var(--border);">
+                                <td style="padding:12px 16px; font-weight:600; color:var(--text-1);" x-text="item.description"></td>
+                                <td style="padding:12px 16px; text-align:center; font-family:'Outfit',sans-serif;" x-text="item.quantity"></td>
+                                <td style="padding:12px 16px; color:var(--green-mid); font-family:'Outfit',sans-serif;" x-text="item.unit_price"></td>
+                                <td style="padding:12px 16px; color:var(--amber-mid); font-family:'Outfit',sans-serif;" x-text="(item.tax_rate || 0) + '%'"></td>
+                                <td style="padding:12px 16px; font-weight:700; color:var(--violet-mid); font-family:'Outfit',sans-serif;" x-text="item.line_total"></td>
+                            </tr>
+                        </template>
+                    </tbody>
+                </table>
+            </div>
+            <div class="modal-divider"></div>
+            <div class="modal-footer" style="padding:16px;">
+                <button @click="showItemsModal = false" class="btn btn-navy" style="width:100%; justify-content:center;">إغلاق البنود والعودة للفاتورة</button>
+            </div>
+        </div>
+    </div>
+
     <!-- ── EDIT TENANT MODAL ───────────────────────────── -->
     <div x-show="showEditTenantModal" x-cloak class="modal-backdrop">
         <div class="modal-box" style="max-width:540px;">
@@ -2851,7 +2855,7 @@
 
                 showAddUserModal: false, showAddCompanyModal: false, showConnectModal: false,
                 showUploadModal: false, showViewModal: false, showCompanyStatsModal: false,
-                showExcelModal: false, showBatchUploadModal: false,
+                showExcelModal: false, showBatchUploadModal: false, showItemsModal: false,
                 isUploadingBatch: false, batchProgress: { total: 0, current: 0 },
                 showAddTenantModal: false, showEditTenantModal: false, showTenantStatsModal: false,
                 acknowledgedWarnings: false, isEditingInvoice: false,