`src/app/admin/page.tsx`

59 lines
import { Lock, Users, Database, Activity } from 'lucide-react';

export const metadata = {
  title: 'Admin - StudentLoanTracker',
  description: 'Admin panel for managing servicer data, analytics, and system health.',
};

export default function AdminPage() {
  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-red-500/10 text-red-600">
            <Lock className="w-5 h-5" />
          </div>
          <h1 className="text-3xl font-bold">Admin Panel</h1>
        </div>
        <p className="text-gray-600 text-lg leading-relaxed mb-8">
          Manage servicer directory data, view anonymous usage analytics, and
          monitor system health. Requires admin credentials.
        </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">
          <Database className="w-8 h-8 text-red-500 mb-3" />
          <h3 className="font-semibold text-lg mb-2">Servicer Data</h3>
          <p className="text-gray-600 text-sm">
            Add, edit, or deactivate servicer entries. Update contact info,
            supported plans, and operational status.
          </p>
        </div>
        <div className="p-6 bg-white rounded-xl border border-gray-200">
          <Users className="w-8 h-8 text-red-500 mb-3" />
          <h3 className="font-semibold text-lg mb-2">User Accounts</h3>
          <p className="text-gray-600 text-sm">
            View registered accounts (no PII exposed), manage roles, and
            handle support requests.
          </p>
        </div>
        <div className="p-6 bg-white rounded-xl border border-gray-200">
          <Activity className="w-8 h-8 text-red-500 mb-3" />
          <h3 className="font-semibold text-lg mb-2">Analytics</h3>
          <p className="text-gray-600 text-sm">
            Anonymous usage metrics: calculator runs, popular plans,
            servicer lookups, and system health.
          </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">
          Admin authentication and panels coming soon.
        </p>
      </div>
    </div>
  );
}