# Das Admin-Dashboard: Deine Daten sehen

Du sammelst E-Mails -- aber wo siehst du sie? In dieser Lektion bauen wir ein Admin-Dashboard: eine geschuetzte Seite, die alle Anmeldungen in einer uebersichtlichen Tabelle mit Diagrammen und CSV-Export zeigt.

## Was wir bauen

Am Ende dieser Lektion hast du:
- Eine `/admin`-Seite, die alle gesammelten E-Mails in einer Tabelle zeigt
- Einfachen Passwortschutz (damit nur du die Daten sehen kannst)
- Ein Diagramm, das Anmeldungen ueber die Zeit zeigt
- Einen Button zum Herunterladen aller Daten als CSV-Datei

## Die Admin-Seite erstellen

<div class="try-it">
<h4>Probier es aus</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>

Dann erstelle die API Route, um die Daten bereitzustellen:

```
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).
```

Besuche http://localhost:3000/admin -- du solltest dein Dashboard mit allen E-Mails sehen, die du vorher eingereicht hast!

## Einfache Authentifizierung hinzufuegen

Im Moment kann jeder `/admin` besuchen. Lass uns eine einfache Passwortsperre hinzufuegen:

<div class="try-it">
<h4>Probier es aus</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>Ehrlicher Hinweis</h4>
Das ist <strong>einfache</strong> Authentifizierung -- gut genug fuer ein Lernprojekt und den persoenlichen Gebrauch. Eine Produktionsanwendung wuerde richtige Authentifizierung mit gehashten Passwoertern, Session-Management, CSRF-Schutz und wahrscheinlich einem Drittanbieter-Auth-Provider nutzen. Aber fuer unser Waitlist-Admin-Panel funktioniert dieser einfache Ansatz.
</div>

## Datenvisualisierung

Eine Tabelle ist nuetzlich, aber ein Diagramm macht Trends auf einen Blick sichtbar. Lass uns eins hinzufuegen:

<div class="try-it">
<h4>Probier es aus</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 installiert Recharts und erstellt die Diagramm-Komponente. Moeglicherweise musst du noch ein paar Test-E-Mails an verschiedenen Tagen abschicken, um interessante Daten zu sehen.

<div class="pro-tip">
<h4>Pro-Tipp</h4>
Wenn du nicht genug Testdaten hast, frag 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> Das gibt dir realistische Daten zum Visualisieren.
</div>

## Daten als CSV exportieren

Jedes Dashboard braucht eine Export-Funktion:

```
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.
```

## Feinschliff und UX

Lass uns ein paar letzte Details hinzufuegen:

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

**Leerer Zustand:**
```
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 Tabelle:**
```
Make the table horizontally scrollable on mobile devices so it doesn't 
break the layout.
```

## Alles zusammen testen

Lass uns ueberpruefen, ob der gesamte Ablauf funktioniert:

1. Gehe zu http://localhost:3000 (Landingpage)
2. Schicke eine Test-E-Mail ab
3. Gehe zu http://localhost:3000/admin
4. Gib das Passwort ein (`changeme123`)
5. Sieh die E-Mail in der Tabelle und im Diagramm
6. Klicke auf "Download CSV" und ueberpruefen die Datei
7. Klicke auf "Logout" und ueberprüfe, dass du dich erneut einloggen musst

<div class="try-it">
<h4>Probier es aus</h4>
Gehe den gesamten Ablauf oben durch. Wenn etwas nicht funktioniert, sag Claude genau, was schiefgelaufen ist, und es wird es beheben.
</div>

## Git Checkpoint

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

Denk daran: Committe niemals `.env.local` (sie enthaelt dein Passwort). Sie sollte standardmaessig bereits in `.gitignore` stehen.

## Wichtigste Erkenntnis

Du hast jetzt ein funktionierendes Admin-Dashboard. Du kannst deine Daten sehen, Trends visualisieren und CSVs exportieren. Das ist ein legitimes MVP (Minimum Viable Product) -- ein funktionales Tool, das ein echtes Problem loest.

<div class="checkpoint">
<h4>Checkpoint</h4>
Dein Admin-Dashboard ist mit einem Passwort geschuetzt, zeigt alle Anmeldungen in einer Tabelle und einem Diagramm und kann Daten als CSV exportieren. Der gesamte Ablauf von der Anmeldung bis zur Admin-Ansicht funktioniert End-to-End. Git committed. Als Naechstes: Dein AWS-Konto fuer das Deployment einrichten.
</div>