import React, { useState, useEffect, useMemo } from 'react'; import { Search, Plus, TrendingUp, TrendingDown, DollarSign, Calendar, BarChart3, Home, List, PieChart, Settings, BarChart } from 'lucide-react'; // Mock data to simulate MySQL database const mockTransactions = [ { id: 1778, type: 'income', category: 'שכר', description: 'סיכה של כל הכמויות', amount: 180.00, date: '2025-08-15', status: 'completed', client: 'חברת איגם איט 300 גרם איט', createdAt: '2025-08-15 09:46:23' }, { id: 1779, type: 'expense', category: 'קניות', description: 'כשרות', amount: 100.00, date: '2025-08-15', status: 'completed', client: 'פרעת שכר', createdAt: '2025-08-15 11:49:52' }, { id: 1777, type: 'expense', category: 'מזון', description: 'הזמנת אוכל וקטאל בסופר 46', amount: 0.00, date: '2025-08-15', status: 'pending', client: 'הזמנת הזדות מפכולות שידור', createdAt: '2025-08-15 08:45:47' }, { id: 1776, type: 'income', category: 'שכר', description: 'רוי אמיר', amount: 50.00, date: '2025-08-15', status: 'completed', client: 'הורדה של 200 כיהול סביצה וזיכר זי עצי', createdAt: '2025-08-15 08:09:08' }, { id: 1775, type: 'expense', category: 'מזון', description: 'אכל בן', amount: 0.00, date: '2025-08-15', status: 'pending', client: 'בנים משלווחים ציורי כל שינו משלרוהים', createdAt: '2025-08-15 08:38:41' }, { id: 1774, type: 'expense', category: 'מזון', description: 'רחן אש', amount: 1050.00, date: '2025-08-15', status: 'completed', client: '30 מקפאים של תעודות מפלולות שידוד', createdAt: '2025-08-15 08:09:08' } ]; const categories = { income: ['שכר', 'השקעות', 'מתנות', 'עבודות צד', 'אחר'], expense: ['מזון', 'דלק', 'קניות', 'בילויים', 'חשבונות', 'אחר'] }; const FinanceApp = () => { const [transactions, setTransactions] = useState(mockTransactions); const [searchTerm, setSearchTerm] = useState(''); const [selectedPeriod, setSelectedPeriod] = useState('כל התקופות'); const [activeTab, setActiveTab] = useState('dashboard'); const [showAddModal, setShowAddModal] = useState(false); const [newTransaction, setNewTransaction] = useState({ type: 'income', category: '', description: '', amount: '', client: '', date: new Date().toISOString().split('T')[0] }); // Calculate summary statistics const stats = useMemo(() => { const filteredTransactions = transactions.filter(t => { const matchesSearch = t.description.toLowerCase().includes(searchTerm.toLowerCase()) || t.category.toLowerCase().includes(searchTerm.toLowerCase()) || t.client.toLowerCase().includes(searchTerm.toLowerCase()); return matchesSearch; }); const totalIncome = filteredTransactions .filter(t => t.type === 'income') .reduce((sum, t) => sum + t.amount, 0); const totalExpenses = filteredTransactions .filter(t => t.type === 'expense') .reduce((sum, t) => sum + t.amount, 0); const pendingPayments = filteredTransactions .filter(t => t.status === 'pending') .reduce((sum, t) => sum + t.amount, 0); const completedPayments = filteredTransactions .filter(t => t.status === 'completed') .length; return { totalIncome, totalExpenses, balance: totalIncome - totalExpenses, pendingPayments, completedPayments, totalTransactions: filteredTransactions.length, readyForPayment: filteredTransactions.filter(t => t.status === 'pending').length, monthlySavings: 640 }; }, [transactions, searchTerm]); const filteredTransactions = useMemo(() => { return transactions.filter(t => { const matchesSearch = t.description.toLowerCase().includes(searchTerm.toLowerCase()) || t.category.toLowerCase().includes(searchTerm.toLowerCase()) || t.client.toLowerCase().includes(searchTerm.toLowerCase()); return matchesSearch; }); }, [transactions, searchTerm]); const addTransaction = () => { if (!newTransaction.description || !newTransaction.amount || !newTransaction.category) { alert('אנא מלא את כל השדות החובה'); return; } const transaction = { id: Math.max(...transactions.map(t => t.id)) + 1, ...newTransaction, amount: parseFloat(newTransaction.amount), status: 'completed', createdAt: new Date().toISOString().replace('T', ' ').split('.')[0] }; setTransactions([transaction, ...transactions]); setNewTransaction({ type: 'income', category: '', description: '', amount: '', client: '', date: new Date().toISOString().split('T')[0] }); setShowAddModal(false); }; const formatCurrency = (amount) => { return `₪${amount.toFixed(2)}`; }; const getStatusColor = (status) => { return status === 'completed' ? 'bg-green-500' : 'bg-orange-500'; }; const getTypeColor = (type) => { return type === 'income' ? 'bg-green-500' : 'bg-red-500'; }; const StatCard = ({ title, value, icon, color = 'bg-purple-500' }) => (
{value}
{title}
{icon}
); const TransactionCard = ({ transaction }) => (
{transaction.type === 'income' ? 'הכנסה' : 'הוצאה'}
{transaction.status === 'completed' ? 'שולם' : 'ממתין'}
{transaction.category}
#{transaction.id}
{transaction.date}
לקוח: {transaction.description}
{transaction.client}
{formatCurrency(transaction.amount)}
תאריך יצירה: {transaction.createdAt}
); return (
{/* Header */}
בית דפוס דורון 🏪
יצא משתמש 👤
{/* Navigation */}
setActiveTab('dashboard')} className={`px-4 py-2 rounded-lg flex items-center gap-2 ${activeTab === 'dashboard' ? 'bg-white text-purple-700' : 'bg-purple-600'}`} >
לוח בקרה ראשי
setActiveTab('transactions')} className={`px-4 py-2 rounded-lg flex items-center gap-2 ${activeTab === 'transactions' ? 'bg-white text-purple-700' : 'bg-purple-600'}`} >
ניהול הזמנות
לקוחות 👥
ארכיון 📁
הזמנות 📋
הזמנה חדשה ➕
יותר ממני 🔧
{/* Search Bar */}
setSearchTerm(e.target.value)} />
{activeTab === 'dashboard' && ( <> {/* Filter */}
setSelectedPeriod(e.target.value)} className="bg-orange-500 text-white px-4 py-2 rounded-lg" >
כל התקופות
החודש הנוכחי
השבוע האחרון
היום
{/* Stats Grid */}
} color="bg-purple-600" />
} color="bg-purple-600" />
} color="bg-purple-600" />
} color="bg-purple-600" />
} color="bg-purple-600" />
} color="bg-purple-600" />
} color="bg-purple-600" />
} color="bg-purple-600" />
{/* Large Total Card */}
{formatCurrency(66726.10)}
הכנסות חודשיות 📊
{/* Recent Transactions Header */}
הזמנות אחרונות
{/* Recent Transactions */}
{filteredTransactions.slice(0, 3).map(transaction => (
))}
)} {activeTab === 'transactions' && (
ניהול הזמנות
setShowAddModal(true)} className="bg-green-500 text-white px-4 py-2 rounded-lg flex items-center gap-2" >
הוסף הזמנה חדשה
{filteredTransactions.map(transaction => (
))}
)}
{/* Add Transaction Modal */} {showAddModal && (
הוסף הזמנה חדשה
סוג
setNewTransaction({...newTransaction, type: e.target.value, category: ''})} className="w-full p-2 border rounded-lg" >
הכנסה
הוצאה
קטגוריה
setNewTransaction({...newTransaction, category: e.target.value})} className="w-full p-2 border rounded-lg" >
בחר קטגוריה
{categories[newTransaction.type].map(cat => (
{cat}
))}
תיאור *
setNewTransaction({...newTransaction, description: e.target.value})} className="w-full p-2 border rounded-lg" placeholder="הכנס תיאור" />
לקוח/פרטים
setNewTransaction({...newTransaction, client: e.target.value})} className="w-full p-2 border rounded-lg" placeholder="פרטי לקוח או תיאור נוסף" />
סכום *
setNewTransaction({...newTransaction, amount: e.target.value})} className="w-full p-2 border rounded-lg" placeholder="0.00" />
תאריך
setNewTransaction({...newTransaction, date: e.target.value})} className="w-full p-2 border rounded-lg" />
הוסף הזמנה
setShowAddModal(false)} className="flex-1 bg-gray-300 text-gray-700 py-2 rounded-lg font-medium" > ביטול
)}
); }; export default FinanceApp;