Edit Admin

app/components/admin/LedgerBook.js

@@ -13,9 +13,15 @@ import {
   TrendingUp,
   TrendingDown,
   Wallet,
-  Shield
+  Shield,
+  FileText,
+  Printer,
+  X,
+  CheckCircle
 } from 'lucide-react';
 import { formatCurrency } from '@/app/utils/calculations';
+import toast, { Toaster } from 'react-hot-toast';
+import * as XLSX from 'xlsx';
 
 export default function LedgerBook({ userType = 'admin' }) {
   const [transactions, setTransactions] = useState([]);
@@ -28,6 +34,7 @@ export default function LedgerBook({ userType = 'admin' }) {
     securityDeposits: 0,
     commissionEarned: 0
   });
+  const [isExporting, setIsExporting] = useState(false);
 
   useEffect(() => {
     loadTransactions();
@@ -144,30 +151,239 @@ export default function LedgerBook({ userType = 'admin' }) {
     }
   };
 
-  const exportToExcel = () => {
-    const csvContent = [
-      ['التاريخ', 'الوصف', 'من', 'إلى', 'المبلغ', 'العمولة', 'الحالة'],
-      ...filteredTransactions.map(t => [
-        t.date,
-        t.description,
-        t.fromUser,
-        t.toUser,
-        t.amount,
-        t.commission,
-        t.status
-      ])
-    ].map(row => row.join(',')).join('\n');
+  const exportToExcel = async () => {
+    if (filteredTransactions.length === 0) {
+      toast.error('لا توجد معاملات للتصدير');
+      return;
+    }
 
-    const blob = new Blob([csvContent], { type: 'text/csv' });
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `ledger_${new Date().toISOString()}.csv`;
-    a.click();
+    setIsExporting(true);
+    toast.loading('جاري تصدير البيانات...', { id: 'export' });
+
+    try {
+      const exportData = filteredTransactions.map(t => ({
+        'رقم العملية': t.id,
+        'التاريخ': t.date,
+        'نوع العملية': t.type === 'rent_payment' ? 'دفعة إيجار' :
+                       t.type === 'security_deposit' ? 'سلفة ضمان' :
+                       t.type === 'commission' ? 'عمولة' : 'أخرى',
+        'الوصف': t.description,
+        'من': t.fromUser,
+        'إلى': t.toUser,
+        'المبلغ (ل.س)': t.amount,
+        'العمولة (ل.س)': t.commission || 0,
+        'الحالة': t.status === 'completed' ? 'مكتمل' :
+                  t.status === 'pending' ? 'معلق' :
+                  t.status === 'pending_refund' ? 'بإنتظار الاسترداد' : 'مؤكد',
+      }));
+
+      const summaryRow = {
+        'رقم العملية': '',
+        'التاريخ': '',
+        'نوع العملية': '',
+        'الوصف': '',
+        'من': '',
+        'إلى': '',
+        'المبلغ (ل.س)': summary.totalRevenue,
+        'العمولة (ل.س)': summary.commissionEarned,
+        'الحالة': ''
+      };
+      
+      exportData.push(summaryRow);
+
+      const worksheet = XLSX.utils.json_to_sheet(exportData);
+      
+      const columnWidths = [
+        { wch: 12 }, // رقم العملية
+        { wch: 12 }, // التاريخ
+        { wch: 12 }, // نوع العملية
+        { wch: 30 }, // الوصف
+        { wch: 20 }, // من
+        { wch: 20 }, // إلى
+        { wch: 15 }, // المبلغ
+        { wch: 15 }, // العمولة
+        { wch: 12 }, // الحالة
+      ];
+      worksheet['!cols'] = columnWidths;
+
+      const range = XLSX.utils.decode_range(worksheet['!ref']);
+      for (let C = range.s.c; C <= range.e.c; ++C) {
+        const address = XLSX.utils.encode_col(C) + '1';
+        if (!worksheet[address]) continue;
+        worksheet[address].s = {
+          font: { bold: true, sz: 12 },
+          fill: { fgColor: { rgb: "F59E0B" } },
+          alignment: { horizontal: "center", vertical: "center" }
+        };
+      }
+
+      
+      const workbook = XLSX.utils.book_new();
+      XLSX.utils.book_append_sheet(workbook, worksheet, 'دفتر الحسابات');
+      
+      const fileName = `دفتر_الحسابات_${new Date().toISOString().split('T')[0]}.xlsx`;
+      
+      XLSX.writeFile(workbook, fileName);
+      
+      toast.success(`تم تصدير ${filteredTransactions.length} معاملة بنجاح!`, { id: 'export' });
+      
+    } catch (error) {
+      console.error('Error exporting to Excel:', error);
+      toast.error('حدث خطأ أثناء تصدير البيانات', { id: 'export' });
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  const printReport = () => {
+    const printWindow = window.open('', '_blank');
+    printWindow.document.write(`
+      <!DOCTYPE html>
+      <html dir="rtl">
+      <head>
+        <meta charset="UTF-8">
+        <title>تقرير دفتر الحسابات</title>
+        <style>
+          body {
+            font-family: 'Cairo', Arial, sans-serif;
+            padding: 20px;
+            direction: rtl;
+          }
+          .header {
+            text-align: center;
+            margin-bottom: 30px;
+            padding-bottom: 20px;
+            border-bottom: 2px solid #f59e0b;
+          }
+          .title {
+            font-size: 24px;
+            font-weight: bold;
+            color: #1f2937;
+          }
+          .subtitle {
+            color: #6b7280;
+            margin-top: 5px;
+          }
+          .summary {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 15px;
+            margin-bottom: 30px;
+          }
+          .summary-card {
+            background: #f9fafb;
+            padding: 15px;
+            border-radius: 12px;
+            text-align: center;
+          }
+          .summary-value {
+            font-size: 20px;
+            font-weight: bold;
+            color: #f59e0b;
+          }
+          table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 20px;
+          }
+          th, td {
+            border: 1px solid #e5e7eb;
+            padding: 10px;
+            text-align: right;
+          }
+          th {
+            background: #f59e0b;
+            color: white;
+            font-weight: bold;
+          }
+          .footer {
+            text-align: center;
+            margin-top: 30px;
+            padding-top: 20px;
+            border-top: 1px solid #e5e7eb;
+            color: #9ca3af;
+            font-size: 12px;
+          }
+          @media print {
+            .no-print {
+              display: none;
+            }
+          }
+        </style>
+      </head>
+      <body>
+        <div class="header">
+          <div class="title">تقرير دفتر الحسابات</div>
+          <div class="subtitle">الفترة: ${dateRange.start || 'بداية السجلات'} - ${dateRange.end || 'حتى الآن'}</div>
+          <div class="subtitle">تاريخ التقرير: ${new Date().toLocaleDateString('ar-SA')}</div>
+        </div>
+        
+        <div class="summary">
+          <div class="summary-card">
+            <div>إجمالي الإيرادات</div>
+            <div class="summary-value">${formatCurrency(summary.totalRevenue)}</div>
+          </div>
+          <div class="summary-card">
+            <div>أرباح المنصة</div>
+            <div class="summary-value">${formatCurrency(summary.commissionEarned)}</div>
+          </div>
+          <div class="summary-card">
+            <div>سلف الضمان</div>
+            <div class="summary-value">${formatCurrency(summary.securityDeposits)}</div>
+          </div>
+          <div class="summary-card">
+            <div>المدفوعات المعلقة</div>
+            <div class="summary-value">${formatCurrency(summary.pendingPayments)}</div>
+          </div>
+        </div>
+        
+        <table>
+          <thead>
+            <tr>
+              <th>التاريخ</th>
+              <th>الوصف</th>
+              <th>من</th>
+              <th>إلى</th>
+              <th>المبلغ</th>
+              <th>العمولة</th>
+              <th>الحالة</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${filteredTransactions.map(t => `
+              <tr>
+                <td>${t.date}</td>
+                <td>${t.description}</td>
+                <td>${t.fromUser}</td>
+                <td>${t.toUser}</td>
+                <td>${formatCurrency(t.amount)}</td>
+                <td>${t.commission ? formatCurrency(t.commission) : '-'}</td>
+                <td>${t.status === 'completed' ? 'مكتمل' : t.status === 'pending' ? 'معلق' : 'بإنتظار الرد'}</td>
+              </tr>
+            `).join('')}
+          </tbody>
+        </table>
+        
+        <div class="footer">
+          <p>تقرير صادر عن نظام SweetHome لإدارة العقارات</p>
+          <p>جميع الحقوق محفوظة © ${new Date().getFullYear()}</p>
+        </div>
+        
+        <div class="no-print" style="text-align: center; margin-top: 20px;">
+          <button onclick="window.print()" style="padding: 10px 20px; background: #f59e0b; color: white; border: none; border-radius: 8px; cursor: pointer;">
+            طباعة التقرير
+          </button>
+        </div>
+      </body>
+      </html>
+    `);
+    printWindow.document.close();
   };
 
   return (
     <div className="space-y-6">
+      <Toaster position="top-center" reverseOrder={false} />
+      
       <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -224,13 +440,13 @@ export default function LedgerBook({ userType = 'admin' }) {
       <div className="bg-white rounded-xl p-5 shadow-sm border">
         <div className="flex flex-col md:flex-row gap-4">
           <div className="flex-1 relative">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
             <input
               type="text"
               placeholder="بحث في المعاملات..."
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-full pl-10 pr-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+              className="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
             />
           </div>
           
@@ -239,25 +455,63 @@ export default function LedgerBook({ userType = 'admin' }) {
               type="date"
               value={dateRange.start}
               onChange={(e) => setDateRange({...dateRange, start: e.target.value})}
-              className="px-3 py-2 border rounded-lg"
+              className="px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
             />
             <span className="text-gray-500 self-center">إلى</span>
             <input
               type="date"
               value={dateRange.end}
               onChange={(e) => setDateRange({...dateRange, end: e.target.value})}
-              className="px-3 py-2 border rounded-lg"
+              className="px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
             />
           </div>
 
-          <button
-            onClick={exportToExcel}
-            className="px-4 py-2 bg-green-600 text-white rounded-lg flex items-center gap-2 hover:bg-green-700"
-          >
-            <Download className="w-4 h-4" />
-            تصدير
-          </button>
+          <div className="flex gap-2">
+            <button
+              onClick={exportToExcel}
+              disabled={isExporting || filteredTransactions.length === 0}
+              className="px-5 py-3 bg-green-600 text-white rounded-xl flex items-center gap-2 hover:bg-green-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isExporting ? (
+                <>
+                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                  جاري التصدير...
+                </>
+              ) : (
+                <>
+                  <Download className="w-5 h-5" />
+                  تصدير Excel
+                </>
+              )}
+            </button>
+            <button
+              onClick={printReport}
+              disabled={filteredTransactions.length === 0}
+              className="px-5 py-3 bg-blue-600 text-white rounded-xl flex items-center gap-2 hover:bg-blue-700 transition-colors disabled:opacity-50"
+            >
+              <Printer className="w-5 h-5" />
+              طباعة
+            </button>
+          </div>
         </div>
+
+        {(dateRange.start || dateRange.end || searchTerm) && (
+          <div className="mt-4 pt-4 border-t flex justify-between items-center">
+            <div className="text-sm text-gray-500">
+              <span className="font-medium">{filteredTransactions.length}</span> معاملة من إجمالي <span className="font-medium">{transactions.length}</span>
+            </div>
+            <button
+              onClick={() => {
+                setDateRange({ start: '', end: '' });
+                setSearchTerm('');
+              }}
+              className="text-sm text-red-500 hover:text-red-600 flex items-center gap-1"
+            >
+              <X className="w-4 h-4" />
+              إلغاء الفلترة
+            </button>
+          </div>
+        )}
       </div>
 
       <div className="bg-white rounded-xl shadow-sm border overflow-hidden">
@@ -307,14 +561,14 @@ export default function LedgerBook({ userType = 'admin' }) {
                       <span className="text-sm">{transaction.toUser}</span>
                     </div>
                   </td>
-                  <td className="px-6 py-4 text-sm font-bold">
+                  <td className="px-6 py-4 text-sm font-bold text-green-600">
                     {formatCurrency(transaction.amount)}
                   </td>
                   <td className="px-6 py-4 text-sm text-amber-600">
                     {transaction.commission ? formatCurrency(transaction.commission) : '-'}
                   </td>
                   <td className="px-6 py-4">
-                    <span className={`px-2 py-1 rounded-full text-xs ${
+                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${
                       transaction.status === 'completed' ? 'bg-green-100 text-green-800' :
                       transaction.status === 'pending' ? 'bg-yellow-100 text-yellow-800' :
                       'bg-blue-100 text-blue-800'
@@ -344,6 +598,7 @@ export default function LedgerBook({ userType = 'admin' }) {
             أرصدة المستأجرين
           </h3>
           <div className="space-y-3">
+            <p className="text-gray-500 text-sm">لا توجد أرصدة حالياً</p>
           </div>
         </div>
       )}