'use client';
import { useState, useEffect } from 'react';
import { Plus, Edit, Trash2, X, Save } from 'lucide-react';
import Link from 'next/link';
interface Bank {
id: number;
name: string;
ifsc_code: string | null;
account_name: string | null;
account_number: string | null;
balance: number;
}
export default function BanksPage() {
const [banks, setBanks] = useState<Bank[]>([]);
const [loading, setLoading] = useState(true);
const [editingId, setEditingId] = useState<number | null>(null);
const [formData, setFormData] = useState({
name: '',
balance: '',
ifsc_code: '',
account_name: '',
account_number: '',
});
const [showForm, setShowForm] = useState(false);
useEffect(() => {
fetchBanks();
}, []);
const fetchBanks = async () => {
setLoading(true);
try {
const response = await fetch('/api/balancesheet/banks');
const result = await response.json();
if (result.success) {
setBanks(result.banks);
}
} catch (err) {
console.error('Failed to fetch banks:', err);
} finally {
setLoading(false);
}
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
try {
if (editingId) {
// Update
const response = await fetch(`/api/balancesheet/banks/${editingId}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
name: formData.name,
balance: parseFloat(formData.balance) || 0,
ifsc_code: formData.ifsc_code || null,
account_name: formData.account_name || null,
account_number: formData.account_number || null,
}),
});
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({
name: formData.name,
balance: parseFloat(formData.balance) || 0,
ifsc_code: formData.ifsc_code || null,
account_name: formData.account_name || null,
account_number: formData.account_number || null,
}),
});
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,
balance: bank.balance.toString(),
ifsc_code: bank.ifsc_code || '',
account_name: bank.account_name || '',
account_number: bank.account_number || '',
});
setShowForm(true);
};
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: '', balance: '', ifsc_code: '', account_name: '', account_number: '' });
setEditingId(null);
setShowForm(false);
};
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">
{/* Add/Edit Form */}
<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>
{showForm && (
<button
onClick={resetForm}
className="text-gray-500 hover:text-gray-700"
>
<X className="h-5 w-5" />
</button>
)}
</div>
{!showForm ? (
<Link
href="/balancesheet/banks/add"
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 w-fit"
>
<Plus className="h-4 w-4" />
Add Bank
</Link>
) : (
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Bank 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">
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">
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 className="flex gap-2">
<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>
<button
type="button"
onClick={resetForm}
className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200"
>
Cancel
</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">
IFSC Code
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Account Name
</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">
{banks.length > 0 ? (
banks.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.ifsc_code || '-'}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
{bank.account_name || '-'}
</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">
₹{bank.balance.toLocaleString('en-IN', { maximumFractionDigits: 2 })}
</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 added yet
</td>
</tr>
)}
</tbody>
</table>
</div>
)}
</main>
</div>
);
}
