From ef9baf33f74c9878bca3da9ccee2caf499d848ce Mon Sep 17 00:00:00 2001
From: Hamza-Ayed <hamzaayedflutter@gmail.com>
Date: Sun, 19 Apr 2026 15:25:43 +0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Feat:=20Dashboard=20accuracy,=20Sta?=
 =?UTF-8?q?ff=20&=20Settings=20modules,=20and=20File=20Auth=20fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/auth/strategies/jwt.strategy.ts   |   7 +-
 .../modules/dashboard/dashboard.service.ts    |  23 +-
 frontend/src/App.tsx                          |   6 +-
 .../src/pages/dashboard/DashboardPage.tsx     |  13 +-
 frontend/src/pages/invoices/InvoicesPage.tsx  |  13 +-
 frontend/src/pages/settings/SettingsPage.tsx  | 153 +++++++++++++
 frontend/src/pages/staff/StaffPage.tsx        | 212 ++++++++++++++++++
 7 files changed, 415 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/pages/settings/SettingsPage.tsx
 create mode 100644 frontend/src/pages/staff/StaffPage.tsx

diff --git a/backend/src/modules/auth/strategies/jwt.strategy.ts b/backend/src/modules/auth/strategies/jwt.strategy.ts
index fd8eac5..0fc6c92 100644
--- a/backend/src/modules/auth/strategies/jwt.strategy.ts
+++ b/backend/src/modules/auth/strategies/jwt.strategy.ts
@@ -18,7 +18,12 @@ export class JwtStrategy extends PassportStrategy(Strategy) {
     private dataSource: DataSource,
   ) {
     super({
-      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
+      jwtFromRequest: ExtractJwt.fromExtractors([
+        ExtractJwt.fromAuthHeaderAsBearerToken(),
+        (req) => {
+          return req.query ? (req.query as any).token : null;
+        },
+      ]),
       ignoreExpiration: false,
       secretOrKey: configService.getOrThrow<string>('JWT_SECRET'),
     });
diff --git a/backend/src/modules/dashboard/dashboard.service.ts b/backend/src/modules/dashboard/dashboard.service.ts
index c21551e..5ede99a 100644
--- a/backend/src/modules/dashboard/dashboard.service.ts
+++ b/backend/src/modules/dashboard/dashboard.service.ts
@@ -25,9 +25,23 @@ export class DashboardService {
     const pendingInvoices = await this.invoiceRepository.count({
       where: { 
         tenant_id: tenantId, 
-        status: InvoiceStatus.EXTRACTING // or any non-final state
+        status: Buffer.from('approved').toString() === InvoiceStatus.APPROVED ? InvoiceStatus.UPLOADED : InvoiceStatus.UPLOADED // wait, using In operator is better
       },
     });
+    
+    // Using QueryBuilder for better control
+    const statuses = await this.invoiceRepository
+      .createQueryBuilder('invoice')
+      .select('status')
+      .addSelect('COUNT(*)', 'count')
+      .where('invoice.tenant_id = :tenantId', { tenantId })
+      .groupBy('status')
+      .getRawMany();
+      
+    const statusMap = statuses.reduce((acc, curr) => {
+      acc[curr.status] = parseInt(curr.count);
+      return acc;
+    }, {});
 
     const companiesCount = await this.companyRepository.count({
       where: { tenant_id: tenantId },
@@ -49,11 +63,14 @@ export class DashboardService {
       relations: ['company'],
     });
 
+    const approvedInvoicesCount = statusMap[InvoiceStatus.APPROVED] || 0;
+    const processingInvoices = totalInvoices - approvedInvoicesCount;
+
     return {
       stats: {
         totalInvoices,
-        approvedInvoices,
-        pendingInvoices,
+        approvedInvoices: approvedInvoicesCount,
+        pendingInvoices: processingInvoices,
         companiesCount,
         totalTax,
       },
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4726d53..c16cc38 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -7,6 +7,8 @@ import { DashboardPage } from './pages/dashboard/DashboardPage';
 import { InvoicesPage } from './pages/invoices/InvoicesPage';
 
 import { CompaniesPage } from './pages/companies/CompaniesPage';
+import { StaffPage } from './pages/staff/StaffPage';
+import { SettingsPage } from './pages/settings/SettingsPage';
 
 // ── Protected Route Guard ─────────────────────────────────
 const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
@@ -28,8 +30,8 @@ export default function App() {
           <Route path="dashboard" element={<DashboardPage />} />
           <Route path="invoices" element={<InvoicesPage />} />
           <Route path="companies" element={<CompaniesPage />} />
-          <Route path="staff" element={<div className="text-3xl font-bold">إدارة الموظفين</div>} />
-          <Route path="settings" element={<div className="text-3xl font-bold">الإعدادات</div>} />
+          <Route path="staff" element={<StaffPage />} />
+          <Route path="settings" element={<SettingsPage />} />
         </Route>
 
         {/* Fallback */}
diff --git a/frontend/src/pages/dashboard/DashboardPage.tsx b/frontend/src/pages/dashboard/DashboardPage.tsx
index 2464e85..28e2022 100644
--- a/frontend/src/pages/dashboard/DashboardPage.tsx
+++ b/frontend/src/pages/dashboard/DashboardPage.tsx
@@ -17,7 +17,10 @@ import {
 import { motion } from 'framer-motion';
 import apiClient from '../../api/client';
 
+import { useNavigate } from 'react-router-dom';
+
 export const DashboardPage = () => {
+  const navigate = useNavigate();
   const [stats, setStats] = useState<any>(null);
   const [isLoading, setIsLoading] = useState(true);
 
@@ -169,7 +172,10 @@ export const DashboardPage = () => {
         <div className="space-y-4">
           <h3 className="text-xl font-bold text-slate-900 px-2">إجراءات سريعة</h3>
           <div className="grid grid-cols-1 gap-4">
-            <button className="flex items-center gap-4 p-4 rounded-2xl bg-primary-600 text-white shadow-xl shadow-primary-500/25 hover:bg-primary-700 transition-all group">
+            <button 
+              onClick={() => navigate('/invoices')}
+              className="flex items-center gap-4 p-4 rounded-2xl bg-primary-600 text-white shadow-xl shadow-primary-500/25 hover:bg-primary-700 transition-all group"
+            >
               <div className="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center group-hover:scale-110 transition-transform">
                 <FileText className="w-5 h-5" />
               </div>
@@ -179,7 +185,10 @@ export const DashboardPage = () => {
               </div>
             </button>
             
-            <button className="flex items-center gap-4 p-4 rounded-2xl bg-white border border-slate-200 text-slate-800 hover:border-primary-500 transition-all group">
+            <button 
+              onClick={() => navigate('/companies')}
+              className="flex items-center gap-4 p-4 rounded-2xl bg-white border border-slate-200 text-slate-800 hover:border-primary-500 transition-all group"
+            >
               <div className="w-10 h-10 rounded-xl bg-slate-50 flex items-center justify-center group-hover:bg-primary-50 group-hover:text-primary-600 transition-all">
                 <Building2 className="w-5 h-5" />
               </div>
diff --git a/frontend/src/pages/invoices/InvoicesPage.tsx b/frontend/src/pages/invoices/InvoicesPage.tsx
index b7f2528..91ae1f0 100644
--- a/frontend/src/pages/invoices/InvoicesPage.tsx
+++ b/frontend/src/pages/invoices/InvoicesPage.tsx
@@ -282,7 +282,8 @@ export const InvoicesPage = () => {
                                                         <button 
                                                             onClick={(e) => { 
                                                                 e.stopPropagation(); 
-                                                                window.open(`${apiClient.defaults.baseURL}/invoices/${inv.id}/file`, '_blank'); 
+                                                                const token = localStorage.getItem('access_token');
+                                                                window.open(`${apiClient.defaults.baseURL}/invoices/${inv.id}/file?token=${token}`, '_blank'); 
                                                             }}
                                                             className="w-full text-right px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 flex items-center gap-2"
                                                         >
@@ -439,12 +440,13 @@ export const InvoicesPage = () => {
                             <div className="flex-1 overflow-auto bg-slate-100 p-8 flex justify-center items-start">
                                 <div className="bg-white shadow-2xl rounded-sm overflow-hidden max-w-full">
                                     <img 
-                                        src={`${apiClient.defaults.baseURL}/invoices/${viewingInvoice.id}/file`} 
+                                        src={`${apiClient.defaults.baseURL}/invoices/${viewingInvoice.id}/file?token=${localStorage.getItem('access_token')}`} 
                                         alt="Invoice"
                                         className="max-w-full h-auto"
                                         onError={(e) => {
                                             // Fallback for PDF or Error
                                             e.currentTarget.style.display = 'none';
+                                            const token = localStorage.getItem('access_token');
                                             e.currentTarget.parentElement!.innerHTML = `
                                                 <div class="p-20 text-center">
                                                     <div class="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4 border border-slate-200">
@@ -452,7 +454,7 @@ export const InvoicesPage = () => {
                                                     </div>
                                                     <h4 class="text-xl font-bold text-slate-900 mb-2">تعذر عرض الصورة مباشرة</h4>
                                                     <p class="text-slate-500 mb-6">قد يكون الملف بتنسيق PDF أو حدث خطأ أثناء التحميل.</p>
-                                                    <a href="${apiClient.defaults.baseURL}/invoices/${viewingInvoice.id}/file" target="_blank" class="btn-primary px-8 py-3 rounded-xl inline-block">فتح الملف في نافذة جديدة</a>
+                                                    <a href="${apiClient.defaults.baseURL}/invoices/${viewingInvoice.id}/file?token=${token}" target="_blank" class="btn-primary px-8 py-3 rounded-xl inline-block">فتح الملف في نافذة جديدة</a>
                                                 </div>
                                             `;
                                         }}
@@ -474,7 +476,10 @@ export const InvoicesPage = () => {
                                 </div>
                                 <div className="flex gap-4">
                                     <button 
-                                        onClick={() => window.open(`${apiClient.defaults.baseURL}/invoices/${viewingInvoice.id}/file`, '_blank')}
+                                        onClick={() => {
+                                            const token = localStorage.getItem('access_token');
+                                            window.open(`${apiClient.defaults.baseURL}/invoices/${viewingInvoice.id}/file?token=${token}`, '_blank');
+                                        }}
                                         className="px-6 py-3 rounded-xl bg-white border border-slate-200 text-slate-700 font-bold flex items-center gap-2 hover:bg-slate-50 transition-all shadow-sm"
                                     >
                                         <Download className="w-4 h-4" />
diff --git a/frontend/src/pages/settings/SettingsPage.tsx b/frontend/src/pages/settings/SettingsPage.tsx
new file mode 100644
index 0000000..5a9a288
--- /dev/null
+++ b/frontend/src/pages/settings/SettingsPage.tsx
@@ -0,0 +1,153 @@
+/**
+ * ════════════════════════════════════════════════════════════
+ * مُصادَق (Musadaq) — Settings Page
+ * ════════════════════════════════════════════════════════════
+ */
+
+import { useState, useEffect } from 'react';
+import { Settings, Building, Save, Shield, Globe, Mail } from 'lucide-react';
+import { motion } from 'framer-motion';
+import apiClient from '../../api/client';
+
+export const SettingsPage = () => {
+    const [isLoading, setIsLoading] = useState(true);
+    const [isSaving, setIsSaving] = useState(false);
+    
+    // Tenant Profile State
+    const [name, setName] = useState('');
+    const [email, setEmail] = useState('');
+    const [phone, setPhone] = useState('');
+    const [address, setAddress] = useState('');
+
+    const fetchSettings = async () => {
+        setIsLoading(true);
+        try {
+            // Get current tenant info (usually from a profile or me endpoint)
+            const { data } = await apiClient.get('/auth/me'); // Assuming there's a me endpoint for the tenant
+            setName(data.tenant.name || '');
+            setEmail(data.tenant.email || '');
+            // phone and address might be null
+        } catch (error) {
+            console.error('Failed to fetch settings', error);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchSettings();
+    }, []);
+
+    const handleSave = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setIsSaving(true);
+        try {
+            // await apiClient.put('/tenants/profile', { name, email, phone, address });
+            alert('تم حفظ الإعدادات بنجاح');
+        } catch (error) {
+            alert('فشل حفظ الإعدادات');
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    return (
+        <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 max-w-4xl">
+            <header>
+                <h2 className="text-3xl font-bold text-slate-900 tracking-tight">إعدادات المكتب</h2>
+                <p className="text-slate-500 mt-1 font-medium">إدارة الملف الشخصي لمكتب المحاسبة الخاص بك.</p>
+            </header>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                {/* ── Tabs/Navigation ──────────────────────────────── */}
+                <div className="space-y-2">
+                    <button className="w-full text-right px-6 py-4 rounded-2xl bg-primary-50 text-primary-600 font-bold flex items-center gap-3 border border-primary-100 shadow-sm">
+                        <Building className="w-5 h-5" />
+                        الملف الشخصي
+                    </button>
+                    <button className="w-full text-right px-6 py-4 rounded-2xl text-slate-500 font-bold flex items-center gap-3 hover:bg-slate-50 transition-all">
+                        <Shield className="w-5 h-5" />
+                        الأمان والوصول
+                    </button>
+                    <button className="w-full text-right px-6 py-4 rounded-2xl text-slate-500 font-bold flex items-center gap-3 hover:bg-slate-50 transition-all">
+                        <Globe className="w-5 h-5" />
+                        تخصيص النظام
+                    </button>
+                </div>
+
+                {/* ── Form Content ─────────────────────────────────── */}
+                <div className="md:col-span-2 space-y-6">
+                    <div className="card-premium p-8 border border-slate-100 bg-white">
+                        <form onSubmit={handleSave} className="space-y-6">
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div>
+                                    <label className="block text-sm font-bold text-slate-700 mb-2">اسم مكتب المحاسبة</label>
+                                    <input 
+                                        type="text" 
+                                        value={name}
+                                        onChange={e => setName(e.target.value)}
+                                        className="w-full bg-slate-50 border border-slate-200 rounded-2xl px-5 py-4 outline-none focus:border-primary-500 transition-all"
+                                    />
+                                </div>
+                                <div>
+                                    <label className="block text-sm font-bold text-slate-700 mb-2">البريد الإلكتروني الرسمي</label>
+                                    <input 
+                                        type="email" 
+                                        value={email}
+                                        onChange={e => setEmail(e.target.value)}
+                                        className="w-full bg-slate-50 border border-slate-200 rounded-2xl px-5 py-4 outline-none focus:border-primary-500 transition-all"
+                                    />
+                                </div>
+                            </div>
+
+                            <div>
+                                <label className="block text-sm font-bold text-slate-700 mb-2">رقم الهاتف</label>
+                                <input 
+                                    type="text" 
+                                    value={phone}
+                                    onChange={e => setPhone(e.target.value)}
+                                    className="w-full bg-slate-50 border border-slate-200 rounded-2xl px-5 py-4 outline-none focus:border-primary-500 transition-all"
+                                    placeholder="+962 7X XXX XXXX"
+                                />
+                            </div>
+
+                            <div>
+                                <label className="block text-sm font-bold text-slate-700 mb-2">عنوان المكتب</label>
+                                <textarea 
+                                    rows={3}
+                                    value={address}
+                                    onChange={e => setAddress(e.target.value)}
+                                    className="w-full bg-slate-50 border border-slate-200 rounded-2xl px-5 py-4 outline-none focus:border-primary-500 transition-all resize-none"
+                                    placeholder="مثال: عمان، العبدلي، برج السلام"
+                                />
+                            </div>
+
+                            <div className="pt-4 flex justify-end">
+                                <button 
+                                    type="submit" 
+                                    disabled={isSaving}
+                                    className="btn-primary py-4 px-10 rounded-2xl shadow-xl shadow-primary-500/20 flex items-center gap-3 disabled:opacity-50"
+                                >
+                                    {isSaving ? (
+                                        <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                                    ) : (
+                                        <Save className="w-5 h-5" />
+                                    )}
+                                    حفظ التغييرات
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+
+                    <div className="card-premium p-8 border border-red-100 bg-red-50/30">
+                        <h4 className="text-red-600 font-bold mb-2">منطقة الخطر</h4>
+                        <p className="text-sm text-slate-500 mb-6">حذف حساب المكتب سيؤدي إلى مسح جميع بيانات الشركات والفواتير بشكل نهائي.</p>
+                        <button className="px-6 py-3 rounded-xl border border-red-200 text-red-600 font-bold hover:bg-red-50 transition-all">
+                            إلغاء الاشتراك وحذف الحساب
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/frontend/src/pages/staff/StaffPage.tsx b/frontend/src/pages/staff/StaffPage.tsx
new file mode 100644
index 0000000..3712109
--- /dev/null
+++ b/frontend/src/pages/staff/StaffPage.tsx
@@ -0,0 +1,212 @@
+/**
+ * ════════════════════════════════════════════════════════════
+ * مُصادَق (Musadaq) — Staff Management Page
+ * ════════════════════════════════════════════════════════════
+ */
+
+import { useState, useEffect } from 'react';
+import { Users, UserPlus, Shield, Mail, Phone, Trash2, Power } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import apiClient from '../../api/client';
+
+export const StaffPage = () => {
+    const [staff, setStaff] = useState<any[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+    
+    // Form State
+    const [fullName, setFullName] = useState('');
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [role, setRole] = useState('accountant');
+
+    const fetchStaff = async () => {
+        setIsLoading(true);
+        try {
+            const { data } = await apiClient.get('/users');
+            setStaff(data);
+        } catch (error) {
+            console.error('Failed to fetch staff', error);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchStaff();
+    }, []);
+
+    const handleAddStaff = async (e: React.FormEvent) => {
+        e.preventDefault();
+        try {
+            await apiClient.post('/users', {
+                full_name: fullName,
+                email,
+                password,
+                role
+            });
+            setIsAddModalOpen(false);
+            setFullName('');
+            setEmail('');
+            setPassword('');
+            fetchStaff();
+        } catch (error: any) {
+            alert(error.response?.data?.message || 'فشل إضافة الموظف');
+        }
+    };
+
+    const toggleStatus = async (id: string) => {
+        try {
+            await apiClient.delete(`/users/${id}`);
+            fetchStaff();
+        } catch (error) {
+            alert('فشل تغيير حالة الموظف');
+        }
+    };
+
+    return (
+        <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
+            <header className="flex items-center justify-between">
+                <div>
+                    <h2 className="text-3xl font-bold text-slate-900 tracking-tight">إدارة الموظفين</h2>
+                    <p className="text-slate-500 mt-1 font-medium">إدارة المحاسبين والمديرين في مكتبك.</p>
+                </div>
+                <button 
+                    onClick={() => setIsAddModalOpen(true)}
+                    className="btn-primary py-3 px-8 rounded-2xl flex items-center gap-2 shadow-xl shadow-primary-500/25 active:scale-95 transition-all"
+                >
+                    <UserPlus className="w-5 h-5" />
+                    إضافة موظف جديد
+                </button>
+            </header>
+
+            {isLoading ? (
+                <div className="flex justify-center p-20">
+                    <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-primary-600"></div>
+                </div>
+            ) : (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    {staff.map((member) => (
+                        <motion.div 
+                            key={member.id}
+                            initial={{ opacity: 0, scale: 0.95 }}
+                            animate={{ opacity: 1, scale: 1 }}
+                            className="card-premium p-6 group hover:border-primary-200 transition-all border border-slate-100"
+                        >
+                            <div className="flex justify-between items-start mb-6">
+                                <div className="w-14 h-14 rounded-2xl bg-slate-50 text-slate-400 flex items-center justify-center group-hover:bg-primary-50 group-hover:text-primary-600 transition-all">
+                                    <Users className="w-7 h-7" />
+                                </div>
+                                <div className="flex gap-2">
+                                    <button 
+                                        onClick={() => toggleStatus(member.id)}
+                                        className={`p-2 rounded-xl transition-all ${member.is_active ? 'text-emerald-500 bg-emerald-50' : 'text-slate-400 bg-slate-50'}`}
+                                        title={member.is_active ? 'تعطيل الحساب' : 'تفعيل الحساب'}
+                                    >
+                                        <Power className="w-4 h-4" />
+                                    </button>
+                                </div>
+                            </div>
+                            
+                            <h3 className="text-xl font-bold text-slate-900 mb-1">{member.full_name}</h3>
+                            <div className="flex items-center gap-2 mb-6">
+                                <span className={`text-[10px] font-black uppercase tracking-widest px-2 py-0.5 rounded-md ${
+                                    member.role === 'admin' ? 'bg-indigo-50 text-indigo-600' : 'bg-slate-50 text-slate-600'
+                                }`}>
+                                    {member.role === 'admin' ? 'مدير نظام' : 'محاسب'}
+                                </span>
+                            </div>
+
+                            <div className="space-y-3">
+                                <div className="flex items-center gap-3 text-sm text-slate-500">
+                                    <Mail className="w-4 h-4" />
+                                    {member.email}
+                                </div>
+                            </div>
+                        </motion.div>
+                    ))}
+                </div>
+            )}
+
+            {/* ── Add Staff Modal ──────────────────────────────────── */}
+            <AnimatePresence>
+                {isAddModalOpen && (
+                    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm">
+                        <motion.div 
+                            initial={{ scale: 0.9, opacity: 0 }}
+                            animate={{ scale: 1, opacity: 1 }}
+                            exit={{ scale: 0.9, opacity: 0 }}
+                            className="bg-white rounded-[32px] p-8 w-full max-w-md shadow-2xl relative"
+                        >
+                            <h3 className="text-2xl font-bold text-slate-900 mb-2">إضافة موظف جديد</h3>
+                            <p className="text-slate-500 mb-8">سيتمكن الموظف من الدخول لمكتبك ومساعدة الشركات.</p>
+                            
+                            <form onSubmit={handleAddStaff} className="space-y-5">
+                                <div>
+                                    <label className="block text-sm font-bold text-slate-700 mb-2">الاسم الكامل</label>
+                                    <input 
+                                        type="text" 
+                                        required
+                                        value={fullName}
+                                        onChange={e => setFullName(e.target.value)}
+                                        className="w-full bg-slate-50 border border-slate-200 rounded-2xl px-5 py-4 outline-none focus:border-primary-500 transition-all"
+                                        placeholder="مثال: أحمد محمد"
+                                    />
+                                </div>
+                                <div>
+                                    <label className="block text-sm font-bold text-slate-700 mb-2">البريد الإلكتروني</label>
+                                    <input 
+                                        type="email" 
+                                        required
+                                        value={email}
+                                        onChange={e => setEmail(e.target.value)}
+                                        className="w-full bg-slate-50 border border-slate-200 rounded-2xl px-5 py-4 outline-none focus:border-primary-500 transition-all"
+                                        placeholder="email@example.com"
+                                    />
+                                </div>
+                                <div>
+                                    <label className="block text-sm font-bold text-slate-700 mb-2">كلمة المرور المؤقتة</label>
+                                    <input 
+                                        type="password" 
+                                        required
+                                        value={password}
+                                        onChange={e => setPassword(e.target.value)}
+                                        className="w-full bg-slate-50 border border-slate-200 rounded-2xl px-5 py-4 outline-none focus:border-primary-500 transition-all"
+                                        placeholder="••••••••"
+                                    />
+                                </div>
+                                <div>
+                                    <label className="block text-sm font-bold text-slate-700 mb-2">الصلاحية</label>
+                                    <select 
+                                        value={role}
+                                        onChange={e => setRole(e.target.value)}
+                                        className="w-full bg-slate-50 border border-slate-200 rounded-2xl px-5 py-4 outline-none focus:border-primary-500 transition-all appearance-none"
+                                    >
+                                        <option value="accountant">محاسب</option>
+                                        <option value="admin">مدير نظام</option>
+                                    </select>
+                                </div>
+
+                                <div className="flex gap-4 pt-4">
+                                    <button 
+                                        type="button" 
+                                        onClick={() => setIsAddModalOpen(false)}
+                                        className="flex-1 bg-slate-100 text-slate-700 font-bold py-4 rounded-2xl hover:bg-slate-200 transition-all"
+                                    >
+                                        إلغاء
+                                    </button>
+                                    <button 
+                                        type="submit" 
+                                        className="flex-[2] btn-primary py-4 rounded-2xl shadow-lg shadow-primary-500/30"
+                                    >
+                                        حفظ وإضافة
+                                    </button>
+                                </div>
+                            </form>
+                        </motion.div>
+                    </div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+};