← back to StudentLoanTracker
src/app/servicers/page.tsx
127 lines
'use client';
import { useState, useEffect } from 'react';
import { Building2, Phone, Globe, AlertTriangle, Search, CheckCircle } from 'lucide-react';
interface Servicer {
id: number;
name: string;
phone: string;
website: string;
official: boolean;
notes: string;
last_verified: string;
}
// Hardcoded servicer data (mirrors DB seed — no API call needed for guest mode)
const SERVICERS: Servicer[] = [
{ id: 1, name: 'Edfinancial', phone: '1-855-337-6884', website: 'https://edfinancial.com', official: true, notes: 'Official federal servicer', last_verified: '2026-03-25' },
{ id: 2, name: 'MOHELA', phone: '1-888-866-4352', website: 'https://www.mohela.com', official: true, notes: 'Official federal servicer, commonly handles PSLF', last_verified: '2026-03-25' },
{ id: 3, name: 'Aidvantage', phone: '1-800-722-1300', website: 'https://aidvantage.com', official: true, notes: 'Official federal servicer', last_verified: '2026-03-25' },
{ id: 4, name: 'Nelnet', phone: '1-888-486-4722', website: 'https://www.nelnet.com', official: true, notes: 'Official federal servicer', last_verified: '2026-03-25' },
{ id: 5, name: 'ECSI (Heartland)', phone: '1-888-549-3274', website: 'https://www.heartland.ecsi.net', official: true, notes: 'Perkins and institutional loans', last_verified: '2026-03-25' },
{ id: 6, name: 'Default Resolution Group', phone: '1-800-621-3115', website: 'https://myeddebt.ed.gov', official: true, notes: 'Handles defaulted federal loans', last_verified: '2026-03-25' },
];
export default function ServicersPage() {
const [search, setSearch] = useState('');
const filtered = SERVICERS.filter(s =>
s.name.toLowerCase().includes(search.toLowerCase()) ||
s.notes.toLowerCase().includes(search.toLowerCase())
);
return (
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div className="max-w-3xl mb-10">
<div className="flex items-center gap-3 mb-4">
<div className="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-purple-500/10 text-purple-600">
<Building2 className="w-5 h-5" />
</div>
<h1 className="text-3xl font-bold">Servicer Directory</h1>
</div>
<p className="text-gray-600 text-lg leading-relaxed">
Official federal student loan servicers with verified contact information.
Not sure who services your loans? Log into StudentAid.gov to check.
</p>
</div>
{/* Search */}
<div className="relative max-w-md mb-8">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
<input
type="text"
placeholder="Search servicers..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
/>
</div>
{/* Servicer Cards */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{filtered.map((s) => (
<div key={s.id} className="bg-white rounded-xl border border-gray-200 p-6">
<div className="flex items-start justify-between mb-3">
<h3 className="text-lg font-semibold">{s.name}</h3>
{s.official && (
<span className="flex items-center gap-1 px-2 py-0.5 bg-green-50 text-green-700 text-xs font-medium rounded-full">
<CheckCircle className="w-3 h-3" />
Official
</span>
)}
</div>
<p className="text-gray-600 text-sm mb-4">{s.notes}</p>
<div className="space-y-2 text-sm">
<div className="flex items-center gap-2">
<Phone className="w-4 h-4 text-gray-400" />
<a href={`tel:${s.phone.replace(/\D/g, '')}`} className="text-purple-600 hover:underline font-medium">
{s.phone}
</a>
</div>
<div className="flex items-center gap-2">
<Globe className="w-4 h-4 text-gray-400" />
<a href={s.website} target="_blank" rel="noopener noreferrer" className="text-purple-600 hover:underline">
{s.website.replace('https://', '').replace('http://', '')}
</a>
</div>
</div>
<div className="mt-4 text-xs text-gray-400">
Last verified: {s.last_verified}
</div>
</div>
))}
</div>
{filtered.length === 0 && (
<div className="text-center py-12 text-gray-500">
No servicers match your search.
</div>
)}
{/* Scam Warning */}
<div className="mt-10 bg-amber-50 border border-amber-200 rounded-xl p-6">
<div className="flex items-start gap-3">
<AlertTriangle className="w-6 h-6 text-amber-600 shrink-0 mt-0.5" />
<div>
<h3 className="font-semibold text-amber-800 mb-2">Beware of Student Loan Scams</h3>
<ul className="text-sm text-amber-700 space-y-1 list-disc list-inside">
<li>You never need to pay to apply for federal repayment plans or consolidation</li>
<li>Your servicer will never ask for your FSA ID password</li>
<li>Be wary of companies promising “immediate forgiveness” or “loan elimination”</li>
<li>Report suspected scams to the FTC at reportfraud.ftc.gov</li>
</ul>
</div>
</div>
</div>
<div className="text-xs text-gray-400 text-center mt-8">
Not affiliated with the U.S. Department of Education. Contact information sourced from StudentAid.gov.
</div>
</div>
);
}