`src/app/dashboard/page.tsx`

60 lines
import { LayoutDashboard, Save, History, Settings } from 'lucide-react';

export const metadata = {
  title: 'Dashboard - StudentLoanTracker',
  description: 'Your saved loan data, calculations, and PSLF progress.',
};

export default function DashboardPage() {
  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="max-w-3xl">
        <div className="flex items-center gap-3 mb-6">
          <div className="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-indigo-500/10 text-indigo-600">
            <LayoutDashboard className="w-5 h-5" />
          </div>
          <h1 className="text-3xl font-bold">Dashboard</h1>
        </div>
        <p className="text-gray-600 text-lg leading-relaxed mb-8">
          Your saved loan portfolio, calculation history, and PSLF progress.
          This page requires an account -- create one to persist your data
          across sessions.
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
        <div className="p-6 bg-white rounded-xl border border-gray-200">
          <Save className="w-8 h-8 text-indigo-500 mb-3" />
          <h3 className="font-semibold text-lg mb-2">Saved Loans</h3>
          <p className="text-gray-600 text-sm">
            View and manage your saved loan portfolio. Update balances and
            track payoff progress over time.
          </p>
        </div>
        <div className="p-6 bg-white rounded-xl border border-gray-200">
          <History className="w-8 h-8 text-indigo-500 mb-3" />
          <h3 className="font-semibold text-lg mb-2">Calculation History</h3>
          <p className="text-gray-600 text-sm">
            Review past repayment plan comparisons and see how your options
            have changed over time.
          </p>
        </div>
        <div className="p-6 bg-white rounded-xl border border-gray-200">
          <Settings className="w-8 h-8 text-indigo-500 mb-3" />
          <h3 className="font-semibold text-lg mb-2">Account Settings</h3>
          <p className="text-gray-600 text-sm">
            Manage your account, export your data, or delete everything.
            You control your information.
          </p>
        </div>
      </div>

      <div className="mt-12 p-8 bg-gray-50 rounded-xl border border-gray-200 text-center">
        <p className="text-gray-500 text-lg">
          Authentication and saved mode coming soon.
        </p>
      </div>
    </div>
  );
}