# The Admin Dashboard: Seeing Your Data

You're collecting emails — but where do you see them? In this lesson, we build an admin dashboard: a protected page that shows all signups in a clean table with charts and CSV export.

## What We're Building

By the end of this lesson, you'll have:
- A `/admin` page showing all collected emails in a table
- Basic password protection (so only you can see the data)
- A chart showing signups over time
- A button to download all data as a CSV file

## Creating the Admin Page

<div class="try-it">
<h4>Try It</h4>
In Claude Code:<br><br>
<strong>"Create an admin dashboard page at app/admin/page.tsx that:
- Fetches data from a new API route GET /api/signups
- Displays a clean table with columns: Email, Signup Date, Status
- Shows a total count of signups at the top
- Has a clean, professional design with a header that says 'Waitlist Dashboard'
- This should be a client component that fetches data on mount"</strong>
</div>

Then create the API route to serve the data:

```
Create an API route at app/api/signups/route.ts that reads from 
data/signups.json and returns all signups as JSON, sorted by date 
(newest first).
```

Visit http://localhost:3000/admin — you should see your dashboard with all the emails you submitted earlier!

## Adding Basic Authentication

Right now, anyone can visit `/admin`. Let's add a simple password gate:

<div class="try-it">
<h4>Try It</h4>
In Claude Code:<br><br>
<strong>"Add basic password protection to the admin page:
1. Create a .env.local file with ADMIN_PASSWORD=changeme123
2. When visiting /admin, show a login form first (just a password field and submit button)
3. On successful login, store a session token in a cookie
4. On subsequent visits, check the cookie before showing the dashboard
5. Add a 'Logout' button in the dashboard header
6. The API route /api/signups should also check for the auth cookie"</strong>
</div>

<div class="honest-note">
<h4>Honest Note</h4>
This is <strong>basic</strong> authentication — good enough for a learning project and personal use. A production application would use proper authentication with hashed passwords, session management, CSRF protection, and likely a third-party auth provider. But for our waitlist admin panel, this simple approach works.
</div>

## Data Visualization

A table is useful, but a chart makes trends visible at a glance. Let's add one:

<div class="try-it">
<h4>Try It</h4>
In Claude Code:<br><br>
<strong>"Add a simple bar chart above the table showing signups per day for the last 14 days. Use the Recharts library (install it with npm). The chart should have:
- Date on the X-axis
- Number of signups on the Y-axis
- Navy blue bars matching our color scheme
- Responsive sizing"</strong>
</div>

Claude will install Recharts and create the chart component. You might need to submit a few more test emails on different dates to see interesting data.

<div class="pro-tip">
<h4>Pro Tip</h4>
If you don't have enough test data, ask Claude: <strong>"Add a seed script that generates 50 fake signup entries spread across the last 30 days. Store them in data/signups.json."</strong> This gives you realistic data to visualize.
</div>

## Export Data as CSV

Every dashboard needs an export feature:

```
Add a "Download CSV" button in the dashboard header. When clicked, it should 
generate a CSV file with columns Email,Date,Status and trigger a file download 
in the browser. Name the file waitlist-export-YYYY-MM-DD.csv.
```

## Polish and UX

Let's add some finishing touches:

**Loading state:**
```
Add a loading skeleton while the dashboard data is being fetched. Show 
animated placeholder rows instead of a blank page.
```

**Empty state:**
```
If there are no signups yet, show a friendly empty state message: 
"No signups yet — share your landing page to get started!" with a 
link back to the homepage.
```

**Responsive table:**
```
Make the table horizontally scrollable on mobile devices so it doesn't 
break the layout.
```

## Testing Everything Together

Let's verify the full flow works:

1. Go to http://localhost:3000 (landing page)
2. Submit a test email
3. Go to http://localhost:3000/admin
4. Enter the password (`changeme123`)
5. See the email in the table and chart
6. Click "Download CSV" and verify the file
7. Click "Logout" and verify you need to log in again

<div class="try-it">
<h4>Try It</h4>
Walk through the entire flow above. If anything doesn't work, tell Claude exactly what went wrong, and it will fix it.
</div>

## Git Checkpoint

```
git add .
git commit -m "admin dashboard with auth, chart, and CSV export"
```

Remember: never commit `.env.local` (it contains your password). It should already be in `.gitignore` by default.

## Key Takeaway

You now have a working admin dashboard. You can see your data, visualize trends, and export CSVs. This is a legitimate MVP (Minimum Viable Product) — a functional tool that solves a real problem.

<div class="checkpoint">
<h4>Checkpoint</h4>
Your admin dashboard is protected with a password, shows all signups in a table and chart, and can export data as CSV. The full flow from signup to admin view works end-to-end. Git committed. Next: setting up your AWS account for deployment.
</div>