From 0b0cd9798c3bc46e0ec2b631dd0665f523fc3f74 Mon Sep 17 00:00:00 2001
From: Hamza-Ayed <hamzaayedflutter@gmail.com>
Date: Sat, 18 Apr 2026 02:23:33 +0300
Subject: [PATCH] Finalize Invoices schema and actions menu

---
 frontend/src/pages/invoices/InvoicesPage.tsx | 71 +++++++++++++-------
 1 file changed, 47 insertions(+), 24 deletions(-)

diff --git a/frontend/src/pages/invoices/InvoicesPage.tsx b/frontend/src/pages/invoices/InvoicesPage.tsx
index b8e4c5e..0c3bd20 100644
--- a/frontend/src/pages/invoices/InvoicesPage.tsx
+++ b/frontend/src/pages/invoices/InvoicesPage.tsx
@@ -206,38 +206,61 @@ export const InvoicesPage = () => {
                                             {Number(inv.grand_total).toLocaleString('en-US', { minimumFractionDigits: 3 })}
                                         </td>
                                         <td className="px-6 py-4"><StatusBadge status={inv.status} /></td>
-                                        <td className="px-6 py-4 text-center">
-                                            <div className="flex items-center justify-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                                        <td className="px-6 py-4 text-center relative">
+                                            <div className="flex items-center justify-center gap-2">
                                                 <button 
-                                                    onClick={(e) => { e.stopPropagation(); console.log('View Invoice', inv.id); }}
+                                                    onClick={(e) => { e.stopPropagation(); console.log('View', inv.id); }}
                                                     className="p-2 text-slate-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-all"
+                                                    title="عرض التفاصيل"
                                                 >
                                                     <Eye className="w-4 h-4" />
                                                 </button>
-                                                {inv.status === 'validated' && (
+                                                
+                                                <div className="relative group/menu">
                                                     <button 
-                                                        onClick={async (e) => { 
-                                                            e.stopPropagation();
-                                                            try {
-                                                                await apiClient.post(`/invoices/${inv.id}/submit`);
-                                                                alert('تم الإرسال لجو فوترة بنجاح');
-                                                                fetchData();
-                                                            } catch (err) {
-                                                                alert('فشل الإرسال');
-                                                            }
-                                                        }}
-                                                        className="p-2 text-emerald-500 hover:text-emerald-600 hover:bg-emerald-50 rounded-lg transition-all" 
-                                                        title="إرسال لجو فوترة"
+                                                        className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-all"
                                                     >
-                                                        <Send className="w-4 h-4" />
+                                                        <MoreVertical className="w-4 h-4" />
                                                     </button>
-                                                )}
-                                                <button 
-                                                    onClick={(e) => { e.stopPropagation(); }}
-                                                    className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-all"
-                                                >
-                                                    <MoreVertical className="w-4 h-4" />
-                                                </button>
+                                                    
+                                                    {/* Dropdown Menu */}
+                                                    <div className="absolute left-0 mt-2 w-48 bg-white border border-slate-100 rounded-2xl shadow-xl shadow-slate-200/50 opacity-0 invisible group-hover/menu:opacity-100 group-hover/menu:visible transition-all z-10 py-2">
+                                                        <button 
+                                                            onClick={async (e) => {
+                                                                e.stopPropagation();
+                                                                if (inv.status !== 'validated') {
+                                                                    alert('يجب أن تكون الفاتورة مدققة أولاً');
+                                                                    return;
+                                                                }
+                                                                try {
+                                                                    await apiClient.post(`/invoices/${inv.id}/submit`);
+                                                                    alert('تم الإرسال لجو فوترة بنجاح! 🎉');
+                                                                    fetchData();
+                                                                } catch (err) {
+                                                                    alert('فشل الإرسال لجو فوترة');
+                                                                }
+                                                            }}
+                                                            className="w-full text-right px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 flex items-center gap-2"
+                                                        >
+                                                            <Send className="w-4 h-4 text-emerald-500" />
+                                                            إرسال لـ جو فوترة
+                                                        </button>
+                                                        <button 
+                                                            onClick={(e) => { e.stopPropagation(); window.open(inv.original_file_path, '_blank'); }}
+                                                            className="w-full text-right px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 flex items-center gap-2"
+                                                        >
+                                                            <Download className="w-4 h-4 text-slate-400" />
+                                                            تحميل الملف الأصلي
+                                                        </button>
+                                                        <div className="h-px bg-slate-100 my-1 mx-2" />
+                                                        <button 
+                                                            className="w-full text-right px-4 py-2 text-sm text-red-600 hover:bg-red-50 flex items-center gap-2"
+                                                        >
+                                                            <Trash2 className="w-4 h-4" />
+                                                            حذف الفاتورة
+                                                        </button>
+                                                    </div>
+                                                </div>
                                             </div>
                                         </td>
                                     </motion.tr>