'use client';
import { useState, useEffect } from 'react';
import { Plus, Edit, Trash2, X, Save, Check } from 'lucide-react';
import Link from 'next/link';
interface MasterBank {
id: number;
name: string;
}
interface Account {
id: number;
name: string;
}
interface Bank {
id: number;
name: string;
master_bank_id: number | null;
account_id: number | null;
ifsc_code: string | null;
account_name: string | null;
account_number: string | null;
balance: number;
min_balance: number;
master_bank_name?: string;
linked_account_name?: string;
}
export default function BanksPage() {
const [banks, setBanks] = useState<Bank[]>([]);
const [masterBanks, setMasterBanks] = useState<MasterBank[]>([]);
const [accounts, setAccounts] = useState<Account[]>([]);
const [loading, setLoading] = useState(true);
const [editingId, setEditingId] = useState<number | null>(null);
const [filterAccountId, setFilterAccountId] = useState<number | null>(null);
// Inline editing for balance
const [editingBalanceId, setEditingBalanceId] = useState<number | null>(null);
const [inlineBalance, setInlineBalance] = useState<string>('');
const [formData, setFormData] = useState({
name: '',
master_bank_id: '',
account_id: '',
balance: '',
min_balance: '',
ifsc_code: '',
account_name: '',
account_number: '',
});
const [showForm, setShowForm] = useState(false);
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
setLoading(true);
try {
const [banksRes, masterBanksRes, accountsRes] = await Promise.all([
fetch('/api/balancesheet/banks'),
fetch('/api/master-banks'),
fetch('/api/accounts')
]);
const banksResult = await banksRes.json();
const masterBanksResult = await masterBanksRes.json();
const accountsResult = await accountsRes.json();
if (banksResult.success) {
setBanks(banksResult.banks.map((b: any) => ({
...b,
balance: Number(b.balance),
min_balance: Number(b.min_balance || 0)
})));
}
if (masterBanksResult.success) setMasterBanks(masterBanksResult.masterBanks);
if (accountsResult.success) setAccounts(accountsResult.accounts);
} catch (err) {
console.error('Failed to fetch data:', err);
} finally {
setLoading(false);
}
};
const fetchBanks = async () => {
try {
const response = await fetch('/api/balancesheet/banks');
const result = await response.json();
if (result.success) {
setBanks(result.banks.map((b: any) => ({
...b,
balance: Number(b.balance),
min_balance: Number(b.min_balance || 0)
})));
}
} catch (err) {
console.error('Failed to fetch banks:', err);
}
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
try {
// Find master bank name if selected
let bankName = formData.name;
if (formData.master_bank_id) {
const mb = masterBanks.find(m => m.id === parseInt(formData.master_bank_id));
if (mb) bankName = mb.name;
}
if (!formData.account_id) {
alert('Please select an associated account.');
return;
}
const payload = {
name: bankName,
master_bank_id: formData.master_bank_id ? parseInt(formData.master_bank_id) : null,
account_id: formData.account_id ? parseInt(formData.account_id) : null,
balance: parseFloat(formData.balance) || 0,
min_balance: parseFloat(formData.min_balance) || 0,
ifsc_code: formData.ifsc_code || null,
account_name: formData.account_name || null,
account_number: formData.account_number || null,
};
if (editingId) {
// Update
const response = await fetch(`/api/balancesheet/banks/${editingId}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
});
const result = await response.json();
if (result.success) {
await fetchBanks();
resetForm();
} else {
alert(result.error || 'Failed to update bank');
}
} else {
// Create
const response = await fetch('/api/balancesheet/banks', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
});
const result = await response.json();
if (result.success) {
await fetchBanks();
resetForm();
} else {
alert(result.error || 'Failed to create bank');
}
}
} catch (err) {
console.error('Error saving bank:', err);
alert('Failed to save bank');
}
};
const handleEdit = (bank: Bank) => {
setEditingId(bank.id);
setFormData({
name: bank.name,
master_bank_id: bank.master_bank_id?.toString() || '',
account_id: bank.account_id?.toString() || '',
balance: bank.balance.toString(),
min_balance: bank.min_balance.toString(),
ifsc_code: bank.ifsc_code || '',
account_name: bank.account_name || '',
account_number: bank.account_number || '',
});
setShowForm(true);
};
const handleInlineBalanceEdit = (bank: Bank) => {
setEditingBalanceId(bank.id);
setInlineBalance(bank.balance.toString());
};
const saveInlineBalance = async (bank: Bank) => {
try {
const response = await fetch(`/api/balancesheet/banks/${bank.id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
...bank,
balance: parseFloat(inlineBalance) || 0,
}),
});
const result = await response.json();
if (result.success) {
await fetchBanks();
setEditingBalanceId(null);
} else {
alert(result.error || 'Failed to update balance');
}
} catch (err) {
console.error('Error updating balance:', err);
}
};
const handleDelete = async (id: number) => {
if (!confirm('Are you sure you want to delete this bank?')) return;
try {
const response = await fetch(`/api/balancesheet/banks/${id}`, {
method: 'DELETE',
});
const result = await response.json();
if (result.success) {
await fetchBanks();
} else {
alert(result.error || 'Failed to delete bank');
}
} catch (err) {
console.error('Error deleting bank:', err);
alert('Failed to delete bank');
}
};
const resetForm = () => {
setFormData({
name: '',
master_bank_id: '',
account_id: '',
balance: '',
min_balance: '',
ifsc_code: '',
account_name: '',
account_number: ''
});
setEditingId(null);
setShowForm(false);
};
const filteredBanks = filterAccountId
? banks.filter(b => b.account_id === filterAccountId)
: banks;
const totalBalance = filteredBanks.reduce((sum, bank) => sum + (bank.balance ?? 0), 0);
return (
<div className="min-h-screen bg-gray-50">
<header className="bg-white shadow">
<div className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
<div className="flex items-center justify-between">
<h1 className="text-3xl font-bold tracking-tight text-gray-900">
Manage Banks
</h1>
<Link
href="/balancesheet"
className="text-sm text-blue-600 hover:text-blue-700"
>
← Back to Dashboard
</Link>
</div>
</div>
</header>
<main className="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
{/* Filters and Actions */}
<div className="flex justify-between items-center mb-6">
<div className="flex items-center gap-4">
<select
value={filterAccountId || ''}
onChange={(e) => setFilterAccountId(e.target.value ? parseInt(e.target.value) : null)}
className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="">All Accounts</option>
{accounts.map(account => (
<option key={account.id} value={account.id}>
{account.name}
</option>
))}
</select>
</div>
{!showForm && (
<button
onClick={() => setShowForm(true)}
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
>
<Plus className="h-4 w-4" />
Add Bank
</button>
)}
</div>
{/* Add/Edit Form */}
{showForm && (
<div className="mb-6 bg-white rounded-lg shadow p-6">
<div className="flex items-center justify-between mb-4">
<h2 className="text-xl font-semibold text-gray-900">
{editingId ? 'Edit Bank' : 'Add Bank'}
</h2>
<button
onClick={resetForm}
className="text-gray-500 hover:text-gray-700"
>
<X className="h-5 w-5" />
</button>
</div>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Bank (Reference)
</label>
<select
value={formData.master_bank_id}
onChange={(e) => {
const id = e.target.value;
const bank = masterBanks.find(m => m.id.toString() === id);
setFormData({
...formData,
master_bank_id: id,
name: bank ? bank.name : formData.name
});
}}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="">Select a Bank</option>
{masterBanks.map(bank => (
<option key={bank.id} value={bank.id}>
{bank.name}
</option>
))}
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Display Name *
</label>
<input
type="text"
required
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Associated Account *
</label>
<select
required
value={formData.account_id}
onChange={(e) => setFormData({ ...formData, account_id: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="">Select Account</option>
{accounts.map(account => (
<option key={account.id} value={account.id}>
{account.name}
</option>
))}
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Balance *
</label>
<input
type="number"
step="0.01"
required
value={formData.balance}
onChange={(e) => setFormData({ ...formData, balance: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Minimum Balance
</label>
<input
type="number"
step="0.01"
value={formData.min_balance}
onChange={(e) => setFormData({ ...formData, min_balance: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="0.00"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
IFSC Code (Optional)
</label>
<input
type="text"
value={formData.ifsc_code}
onChange={(e) => setFormData({ ...formData, ifsc_code: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Account Name (Optional)
</label>
<input
type="text"
value={formData.account_name}
onChange={(e) => setFormData({ ...formData, account_name: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Account Number (Optional)
</label>
<input
type="text"
value={formData.account_number}
onChange={(e) => setFormData({ ...formData, account_number: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
</div>
<div className="flex gap-2 justify-end mt-4">
<button
type="button"
onClick={resetForm}
className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200"
>
Cancel
</button>
<button
type="submit"
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
>
<Save className="h-4 w-4" />
{editingId ? 'Update' : 'Create'}
</button>
</div>
</form>
</div>
)}
{/* Banks Table */}
{loading ? (
<div className="flex items-center justify-center py-12">
<div className="text-gray-700">Loading banks...</div>
</div>
) : (
<div className="bg-white rounded-lg shadow overflow-hidden">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Bank Name
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Account
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
IFSC Code
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Account Number
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Balance
</th>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
Actions
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{filteredBanks.length > 0 ? (
filteredBanks.map((bank) => (
<tr key={bank.id}>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
{bank.name}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
{bank.linked_account_name || '-'}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
{bank.ifsc_code || '-'}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
{bank.account_number || '-'}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
{editingBalanceId === bank.id ? (
<div className="flex items-center gap-2">
<input
type="number"
value={inlineBalance}
onChange={(e) => setInlineBalance(e.target.value)}
className="w-24 px-2 py-1 border border-gray-300 rounded text-right"
autoFocus
/>
<button onClick={() => saveInlineBalance(bank)} className="text-green-600 hover:text-green-800">
<Check className="h-4 w-4" />
</button>
<button onClick={() => setEditingBalanceId(null)} className="text-red-600 hover:text-red-800">
<X className="h-4 w-4" />
</button>
</div>
) : (
<div className="flex flex-col">
<span
className={`cursor-pointer hover:bg-gray-100 px-2 py-1 rounded ${
bank.min_balance > 0 && bank.balance < bank.min_balance ? 'text-red-600 font-medium' : ''
}`}
onClick={() => handleInlineBalanceEdit(bank)}
title={`Min Balance: ₹${(bank.min_balance ?? 0).toLocaleString()}`}
>
₹{(bank.balance ?? 0).toLocaleString('en-IN', { maximumFractionDigits: 2 })}
</span>
{(bank.min_balance ?? 0) > 0 && (bank.balance ?? 0) < (bank.min_balance ?? 0) && (
<span className="text-xs text-red-500 ml-2">
Shortfall: ₹{((bank.min_balance ?? 0) - (bank.balance ?? 0)).toLocaleString('en-IN', { maximumFractionDigits: 2 })}
</span>
)}
</div>
)}
</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<div className="flex justify-end gap-2">
<button
onClick={() => handleEdit(bank)}
className="text-blue-600 hover:text-blue-900"
>
<Edit className="h-4 w-4" />
</button>
<button
onClick={() => handleDelete(bank.id)}
className="text-red-600 hover:text-red-900"
>
<Trash2 className="h-4 w-4" />
</button>
</div>
</td>
</tr>
))
) : (
<tr>
<td colSpan={6} className="px-6 py-4 text-center text-sm text-gray-500">
No banks found
</td>
</tr>
)}
</tbody>
<tfoot className="bg-gray-50 font-semibold">
<tr>
<td colSpan={4} className="px-6 py-4 text-right text-sm text-gray-900">
Total Balance:
</td>
<td className="px-6 py-4 text-left text-sm text-gray-900">
₹{totalBalance.toLocaleString('en-IN', { maximumFractionDigits: 2 })}
</td>
<td></td>
</tr>
</tfoot>
</table>
</div>
)}
</main>
</div>
);
}
