← back to StudentLoanTracker
src/app/summer-aid/page.tsx
152 lines
'use client';
import { useState } from 'react';
import { Sun, AlertCircle, CheckCircle, Calendar, BookOpen } from 'lucide-react';
interface ChecklistItem {
id: string;
task: string;
deadline: string;
done: boolean;
risk?: string;
}
export default function SummerAidPage() {
const [enrollment, setEnrollment] = useState<'full' | 'half' | 'less'>('half');
const [sessionStart, setSessionStart] = useState('2026-06-01');
const [school, setSchool] = useState('');
const [showChecklist, setShowChecklist] = useState(false);
const [checklist, setChecklist] = useState<ChecklistItem[]>([]);
function generateChecklist() {
const start = new Date(sessionStart);
const items: ChecklistItem[] = [];
const sixWeeksBefore = new Date(start);
sixWeeksBefore.setDate(sixWeeksBefore.getDate() - 42);
items.push({ id: '1', task: 'Submit Summer Aid Request form through your school portal', deadline: sixWeeksBefore.toISOString().split('T')[0], done: false });
const fourWeeksBefore = new Date(start);
fourWeeksBefore.setDate(fourWeeksBefore.getDate() - 28);
items.push({ id: '2', task: 'Verify FAFSA is on file for current aid year', deadline: fourWeeksBefore.toISOString().split('T')[0], done: false });
items.push({ id: '3', task: 'Register for summer courses (minimum credits for aid eligibility)', deadline: fourWeeksBefore.toISOString().split('T')[0], done: false, risk: enrollment === 'less' ? 'Below half-time: you may not qualify for most federal aid' : undefined });
const twoWeeksBefore = new Date(start);
twoWeeksBefore.setDate(twoWeeksBefore.getDate() - 14);
items.push({ id: '4', task: 'Check financial aid portal for summer award letter', deadline: twoWeeksBefore.toISOString().split('T')[0], done: false });
items.push({ id: '5', task: 'Accept/decline summer aid awards', deadline: twoWeeksBefore.toISOString().split('T')[0], done: false });
items.push({ id: '6', task: 'Confirm enrollment is at required intensity for aid', deadline: sessionStart, done: false, risk: enrollment === 'less' ? 'Grace period on loans may end if below half-time' : undefined });
const twoWeeksAfter = new Date(start);
twoWeeksAfter.setDate(twoWeeksAfter.getDate() + 14);
items.push({ id: '7', task: 'Verify aid has disbursed to your student account', deadline: twoWeeksAfter.toISOString().split('T')[0], done: false });
setChecklist(items);
setShowChecklist(true);
}
function toggleItem(id: string) {
setChecklist(checklist.map(item => item.id === id ? { ...item, done: !item.done } : item));
}
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-amber-500/10 text-amber-600">
<Sun className="w-5 h-5" />
</div>
<h1 className="text-3xl font-bold">Summer Aid Planner</h1>
</div>
<p className="text-gray-600 text-lg leading-relaxed">
Plan for summer enrollment. See what forms to submit, by when, and understand
how enrollment intensity affects your financial aid and loan status.
</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div className="lg:col-span-1">
<div className="bg-white rounded-xl border border-gray-200 p-6 sticky top-6 space-y-4">
<h2 className="text-lg font-semibold">Summer Details</h2>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">School Name</label>
<input type="text" value={school} placeholder="e.g. USC, UCLA, NYU" onChange={(e) => setSchool(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500" />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Session Start Date</label>
<input type="date" value={sessionStart} onChange={(e) => setSessionStart(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500" />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Enrollment Intensity</label>
<select value={enrollment} onChange={(e) => setEnrollment(e.target.value as typeof enrollment)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
<option value="full">Full-time (12+ credits)</option>
<option value="half">Half-time (6-11 credits)</option>
<option value="less">Less than half-time (<6 credits)</option>
</select>
</div>
<button onClick={generateChecklist}
className="w-full mt-2 px-6 py-3 bg-amber-500 hover:bg-amber-600 text-white font-semibold rounded-lg transition-colors">
Generate Checklist
</button>
</div>
</div>
<div className="lg:col-span-2 space-y-6">
<div className="bg-white rounded-xl border border-gray-200 p-6">
<h3 className="font-semibold mb-4 flex items-center gap-2">
<BookOpen className="w-5 h-5 text-amber-500" /> Enrollment Impact
</h3>
<div className="space-y-3 text-sm">
<div className={`p-3 rounded-lg ${enrollment === 'full' ? 'bg-green-50 border border-green-200' : 'bg-gray-50'}`}>
<span className="font-medium">Full-time (12+ credits):</span> Eligible for maximum aid, loans remain in grace/deferment.
</div>
<div className={`p-3 rounded-lg ${enrollment === 'half' ? 'bg-amber-50 border border-amber-200' : 'bg-gray-50'}`}>
<span className="font-medium">Half-time (6-11 credits):</span> Eligible for most aid. Loans stay in grace period. May receive reduced amounts.
</div>
<div className={`p-3 rounded-lg ${enrollment === 'less' ? 'bg-red-50 border border-red-200' : 'bg-gray-50'}`}>
<span className="font-medium">Less than half-time:</span> Limited aid eligibility. Loan grace period may end — repayment could begin.
</div>
</div>
</div>
{showChecklist ? (
<div className="bg-white rounded-xl border border-gray-200 p-6">
<h3 className="font-semibold mb-4 flex items-center gap-2">
<Calendar className="w-5 h-5 text-amber-500" /> Your Summer Aid Checklist
</h3>
<div className="space-y-3">
{checklist.map((item) => (
<div key={item.id} className={`flex items-start gap-3 p-3 rounded-lg border ${item.done ? 'bg-green-50 border-green-200' : 'bg-white border-gray-100'}`}>
<button onClick={() => toggleItem(item.id)} className="mt-0.5 shrink-0">
{item.done ? <CheckCircle className="w-5 h-5 text-green-500" /> : <div className="w-5 h-5 rounded-full border-2 border-gray-300" />}
</button>
<div className="flex-1">
<p className={`text-sm ${item.done ? 'text-gray-400 line-through' : 'text-gray-800'}`}>{item.task}</p>
<p className="text-xs text-gray-400 mt-1">By {item.deadline}</p>
{item.risk && (
<div className="flex items-center gap-1 mt-2 text-xs text-red-600">
<AlertCircle className="w-3 h-3" /> {item.risk}
</div>
)}
</div>
</div>
))}
</div>
<p className="text-xs text-gray-400 mt-4">Dates are estimates. Check your school's financial aid office for exact deadlines.</p>
</div>
) : (
<div className="bg-gray-50 rounded-xl border border-gray-200 p-12 text-center">
<Sun className="w-12 h-12 text-gray-300 mx-auto mb-4" />
<p className="text-gray-500 text-lg">Enter your summer details and click “Generate Checklist” to see your personalized timeline.</p>
</div>
)}
</div>
</div>
</div>
);
}