import React, { useState, useEffect } from 'react'; import axios from 'axios'; import KasaEkleBox from './KasaEkleBox'; import KasaCıkarBox from './KasaCıkarBox'; import ConfirmBox from './ConfirmBox'; import BankaUpdateForm from './BankaUpdateForm'; import Logs from '../components/Logs'; const BASE_URL = "http://localhost:8000"; const BankTable = () => { const [showKasaEkle, setShowKasaEkle] = useState(false); const [showKasaCıkar, setShowKasaCıkar] = useState(false); const [selectedAccountId, setSelectedAccountId] = useState(null); const [selectedAccountBalance, setSelectedAccountBalance] = useState(null); const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [confirmModal, setConfirmModal] = useState(null); const [updateModal, setUpdateModal] = useState(null); const [logsModal, setLogsModal] = useState(null); const [searchTerm, setSearchTerm] = useState(''); const fetchData = async () => { try { setLoading(true); const response = await axios.get(`${BASE_URL}/bank/accounts`); const sortedUsers = response.data.data.sort((a, b) => new Date(b.created_at) - new Date(a.created_at)); setUsers(sortedUsers); setError(null); } catch (error) { console.error("Error fetching bank accounts:", error); setError("Failed to load bank accounts. Please try again later."); } finally { setLoading(false); } }; useEffect(() => { fetchData(); }, []); const handleKasaTakviyeOn = (accountId, accountBalance) => { setSelectedAccountId(accountId); setSelectedAccountBalance(accountBalance); setShowKasaEkle(true); }; const handleKasaLogs = (accountId) => { setSelectedAccountId(accountId); setLogsModal(true); setUpdateModal(false); setConfirmModal(false); }; const handleKasaCıkarOn = (accountId, accountBalance) => { setSelectedAccountId(accountId); setSelectedAccountBalance(accountBalance); setShowKasaCıkar(true); }; const handleDeleteBank = async (accountId) => { const token = localStorage.getItem('token'); try { await axios.delete(`${BASE_URL}/bank/${accountId}`, { headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` } }); fetchData(); setConfirmModal(null); } catch (error) { console.error("Error deleting bank account:", error); } }; const formatIBAN = (accountNumber) => { let cleanedIBAN = accountNumber.replace(/\s+/g, ''); return cleanedIBAN.match(/.{1,4}/g).join(' '); }; if (loading) { return (
); } const filteredAccounts = users.filter(account => account.accountName.toLowerCase().includes(searchTerm.toLowerCase()) || account.bankName.toLowerCase().includes(searchTerm.toLowerCase()) || account.accountNumber.toLowerCase().includes(searchTerm.toLowerCase()) ); return (
{/* Search and Refresh Section */}
setSearchTerm(e.target.value)} />
{error && (

Error

{error}

)}
{filteredAccounts.map((account) => ( ))}
ID Account Name Bank IBAN Balance Created At Status Actions
{account.id} {account.accountName} {account.bankName} TR {formatIBAN(account.accountNumber)} {Number(account.accountBalance).toLocaleString("tr-TR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ₺ {new Date(account.created_at).toLocaleString("tr-TR")}
{account.isActive ? 'Active' : 'Inactive'}
{filteredAccounts.length === 0 && (
No accounts found matching your search criteria.
)}
{/* Modals */} {confirmModal && ( handleDeleteBank(selectedAccountId)} onClose={() => { setConfirmModal(false); setSelectedAccountId(null); }} /> )} {updateModal && ( { setUpdateModal(false); setSelectedAccountId(null); }} /> )} {logsModal && ( { setLogsModal(false); setSelectedAccountId(null); }} /> )} setShowKasaEkle(false)} accountId={selectedAccountId} accountBalance={selectedAccountBalance} onSuccess={fetchData} /> setShowKasaCıkar(false)} accountId={selectedAccountId} accountBalance={selectedAccountBalance} onSuccess={fetchData} />
); }; export default BankTable;