'use client';
import { useState, useEffect } from 'react';
import { Plus, Trash2, Building2 } from 'lucide-react';
import Link from 'next/link';
interface MasterBank {
id: number;
name: string;
}
export default function MasterBanksPage() {
const [banks, setBanks] = useState<MasterBank[]>([]);
const [loading, setLoading] = useState(true);
const [newName, setNewName] = useState('');
useEffect(() => {
fetchBanks();
}, []);
const fetchBanks = async () => {
setLoading(true);
try {
const response = await fetch('/api/master-banks');
const result = await response.json();
if (result.success) {
setBanks(result.masterBanks);
}
} catch (err) {
console.error('Failed to fetch banks:', err);
} finally {
setLoading(false);
}
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!newName.trim()) return;
try {
const response = await fetch('/api/master-banks', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: newName }),
});
const result = await response.json();
if (result.success) {
setNewName('');
await fetchBanks();
} else {
alert(result.error || 'Failed to add bank');
}
} catch (err) {
console.error('Error adding bank:', err);
alert('Failed to add bank');
}
};
return (
<div className="min-h-screen bg-gray-50 p-8">
<div className="max-w-4xl mx-auto">
<div className="flex items-center justify-between mb-8">
<div className="flex items-center gap-3">
<Building2 className="h-8 w-8 text-blue-600" />
<h1 className="text-3xl font-bold text-gray-900">Master Banks</h1>
</div>
<Link
href="/admin"
className="text-sm text-blue-600 hover:text-blue-700"
>
← Back to Admin
</Link>
</div>
{/* Add Form */}
<div className="bg-white rounded-lg shadow p-6 mb-6">
<form onSubmit={handleSubmit} className="flex gap-4">
<input
type="text"
value={newName}
onChange={(e) => setNewName(e.target.value)}
placeholder="Enter bank name (e.g. Citibank)"
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
required
/>
<button
type="submit"
className="flex items-center gap-2 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
>
<Plus className="h-4 w-4" />
Add Bank
</button>
</form>
</div>
{/* List */}
<div className="bg-white rounded-lg shadow overflow-hidden">
{loading ? (
<div className="p-8 text-center text-gray-500">Loading...</div>
) : (
<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">
ID
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{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-500">
{bank.id}
</td>
</tr>
))}
{banks.length === 0 && (
<tr>
<td colSpan={2} className="px-6 py-4 text-center text-gray-500">
No master banks found.
</td>
</tr>
)}
</tbody>
</table>
)}
</div>
</div>
</div>
);
}
