File size: 5,387 Bytes
75b7b25 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
// Initialize Feather Icons
feather.replace();
document.addEventListener('DOMContentLoaded', function() {
const uploadBtn = document.getElementById('upload-btn');
const pdfUpload = document.getElementById('pdf-upload');
const resultSection = document.getElementById('result-section');
const loadingSection = document.getElementById('loading-section');
const downloadBtn = document.getElementById('download-btn');
// Mock data structure for demonstration
let extractedData = {
bank_name: "",
account_name: "",
account_number: "",
transaction_list: []
};
uploadBtn.addEventListener('click', () => {
pdfUpload.click();
});
pdfUpload.addEventListener('change', async (e) => {
const file = e.target.files[0];
if (!file) return;
// Show loading state
resultSection.classList.add('hidden');
loadingSection.classList.remove('hidden');
// Simulate processing delay (in real app, this would be API call)
setTimeout(() => {
processPDF(file);
}, 2000);
});
function processPDF(file) {
// In a real app, this would send the file to your Python backend
// For demo, we'll use mock data
extractedData = {
bank_name: "Global Bank International",
account_name: "John Doe",
account_number: "XXXX-XXXX-7890",
transaction_list: [
{
date: "2023-05-15",
description: "Salary Deposit",
debit: null,
credit: 4500.00,
currency: "USD",
balance: 4875.32
},
{
date: "2023-05-16",
description: "Amazon Online Shopping",
debit: 125.99,
credit: null,
currency: "USD",
balance: 4749.33
},
{
date: "2023-05-17",
description: "Starbucks Coffee",
debit: 5.75,
credit: null,
currency: "USD",
balance: 4743.58
},
{
date: "2023-05-18",
description: "Electric Bill Payment",
debit: 85.50,
credit: null,
currency: "USD",
balance: 4658.08
},
{
date: "2023-05-19",
description: "Interest Earned",
debit: null,
credit: 12.34,
currency: "USD",
balance: 4670.42
}
]
};
displayResults(extractedData);
}
function displayResults(data) {
// Update bank info
document.getElementById('bank-name').textContent = data.bank_name;
document.getElementById('account-name').textContent = data.account_name;
document.getElementById('account-number').textContent = data.account_number;
// Populate transactions table
const tbody = document.getElementById('transactions-body');
tbody.innerHTML = '';
data.transaction_list.forEach(transaction => {
const row = document.createElement('tr');
row.className = 'hover:bg-gray-50';
const formatCurrency = (value) => {
if (value === null || value === undefined) return '-';
return value.toLocaleString('en-US', {
style: 'currency',
currency: transaction.currency || 'USD'
});
};
row.innerHTML = `
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${transaction.date}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${transaction.description}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm ${transaction.debit ? 'text-red-600' : 'text-gray-500'}">${formatCurrency(transaction.debit)}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm ${transaction.credit ? 'text-green-600' : 'text-gray-500'}">${formatCurrency(transaction.credit)}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${transaction.currency}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${formatCurrency(transaction.balance)}</td>
`;
tbody.appendChild(row);
});
// Show results and hide loading
loadingSection.classList.add('hidden');
resultSection.classList.remove('hidden');
}
downloadBtn.addEventListener('click', () => {
// Create JSON file download
const dataStr = JSON.stringify(extractedData, null, 2);
const dataBlob = new Blob([dataStr], { type: 'application/json' });
const url = URL.createObjectURL(dataBlob);
const link = document.createElement('a');
link.href = url;
link.download = `bank_statement_${new Date().toISOString().split('T')[0]}.json`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
}); |