Compare commits
No commits in common. "a060751f45c03925e3a7f81bb2b623f27b83112d" and "00a49c1de62472628cde19d8ade22bc59dbaf79f" have entirely different histories.
a060751f45
...
00a49c1de6
File diff suppressed because it is too large
Load Diff
|
|
@ -1,199 +0,0 @@
|
|||
# Design: Modul-Integration & Supabase-Anbindung
|
||||
|
||||
**Datum:** 2026-05-12
|
||||
**Projekt:** MBO-Tech-IT Website (Next.js 15)
|
||||
**Supabase:** Self-hosted, Docker VM unter `supabase.mbo-tech-it.de`
|
||||
|
||||
---
|
||||
|
||||
## Ausgangssituation
|
||||
|
||||
Die Module 01 (E-Mail), 02 (Admin-Auth), 03 (Analytics), 06-Kunden-Portal und 07-KPI-Dashboard haben ihre Code-Dateien bereits im Projekt. Modul 06-Website-CMS fehlt noch vollständig. Supabase läuft im Docker-Container, aber DB-Migrationen, Storage Buckets und Auth-Konfiguration fehlen noch. Die Supabase-Keys sind bereits in `.env.local` eingetragen.
|
||||
|
||||
---
|
||||
|
||||
## Ziel
|
||||
|
||||
Alle 6 Module vollständig einbinden: Datenbank-Tabellen anlegen, CMS-Code integrieren, öffentliche Website-Sektionen (Hero, Über uns, Galerie, Kontakt) aus der Datenbank laden, Storage Buckets und Auth konfigurieren.
|
||||
|
||||
---
|
||||
|
||||
## Architektur
|
||||
|
||||
```
|
||||
mbo-tech-it.de (Next.js 15 App Router)
|
||||
│
|
||||
├── Öffentliche Seiten ← Hero, Über uns, Galerie, Kontakt aus Supabase DB
|
||||
├── /admin/* ← CMS + Analytics + Statistik (HMAC-Auth)
|
||||
└── /kunden/* ← Kunden-Portal (Supabase Auth)
|
||||
|
||||
supabase.mbo-tech-it.de (Docker VM)
|
||||
├── 13 DB-Tabellen
|
||||
├── 4 Public Storage Buckets
|
||||
└── Supabase Auth (Kunden-Portal)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Umsetzungsplan (Option A — Modul für Modul)
|
||||
|
||||
### Schritt 1: DB-Migrationen
|
||||
|
||||
Alle SQL-Dateien nacheinander im Supabase SQL-Editor ausführen:
|
||||
|
||||
| Migration | Erstellt |
|
||||
|---|---|
|
||||
| `modules/02-admin-auth/migrations/MIGRATIONS_AUDIT_LOGS.sql` | `admin_audit_logs` |
|
||||
| `modules/02-admin-auth/migrations/MIGRATIONS_TOKEN_BLACKLIST.sql` | `admin_session_blacklist`, `action_token_blacklist` |
|
||||
| `modules/03-analytics/migrations/MIGRATIONS_PAGE_VIEWS.sql` | `page_views` |
|
||||
| `modules/03-analytics/migrations/MIGRATIONS_PHONE_CLICKS.sql` | `phone_clicks` |
|
||||
| `modules/06-website-cms/migrations/MIGRATIONS_WEBSITE_CMS.sql` | 8 CMS-Tabellen |
|
||||
|
||||
Zusätzlich manuell:
|
||||
- `admin_users` Tabelle (für Admin-Auth, Tabellenname abweichend von Template: `admin_users` statt `benutzer`)
|
||||
- `email_queue` Tabelle (Modul 01)
|
||||
- `anfragen` Tabelle (Modul 06-Kunden)
|
||||
|
||||
### Schritt 2: Supabase-Typen ergänzen (`lib/supabase.ts`)
|
||||
|
||||
CMS-Tabellentypen hinzufügen:
|
||||
- `hero_content`, `hero_badges`
|
||||
- `ueber_uns_content`, `ueber_uns_stats`
|
||||
- `galerie_bilder`
|
||||
- `kontakt_info`, `kontakt_oeffnungszeiten`, `kontakt_social`
|
||||
|
||||
### Schritt 3: Modul 06-Website-CMS Code integrieren
|
||||
|
||||
**Neue Dateien kopieren** aus `modules/06-website-cms/files/`:
|
||||
|
||||
API-Routen:
|
||||
- `app/api/admin/hero/route.ts` + bild, logo, favicon, badges
|
||||
- `app/api/admin/hero/badges/[id]/route.ts` (Ordner umbenennen: `id/` → `[id]/`)
|
||||
- `app/api/admin/galerie/route.ts` + sort
|
||||
- `app/api/admin/ueber-uns/route.ts` + upload, stats, stats/[id]
|
||||
- `app/api/admin/kontakt/route.ts` + oeffnungszeiten/[id], social/[id]
|
||||
- `app/api/admin/passwort/route.ts`
|
||||
|
||||
Admin-Seiten:
|
||||
- `app/admin/hero/page.tsx`
|
||||
- `app/admin/galerie/page.tsx`
|
||||
- `app/admin/ueber-uns/page.tsx`
|
||||
- `app/admin/kontakt/page.tsx`
|
||||
- `app/admin/passwort/page.tsx`
|
||||
|
||||
Komponenten:
|
||||
- `components/GalerieAnzeige.tsx`
|
||||
- `components/admin/HeroVerwaltung.tsx`
|
||||
- `components/admin/GalerieVerwaltung.tsx`
|
||||
- `components/admin/UeberUnsVerwaltung.tsx`
|
||||
- `components/admin/KontaktVerwaltung.tsx`
|
||||
- `components/admin/PasswortAendern.tsx`
|
||||
|
||||
**Hinweis:** `SUPABASE_INTERNAL_URL` muss in den CMS-API-Routen für Docker-internen Zugriff verwendet werden.
|
||||
|
||||
### Schritt 4: Öffentliche Seiten dynamisieren
|
||||
|
||||
**`app/page.tsx`** wird zu einer async Server Component, die alle CMS-Daten lädt und als Props weitergibt.
|
||||
|
||||
**Komponenten erhalten Props statt hardcodierter Werte:**
|
||||
|
||||
| Komponente | Datenquelle |
|
||||
|---|---|
|
||||
| `components/Hero.tsx` | `hero_content` + `hero_badges` aus Supabase |
|
||||
| `components/About.tsx` | `ueber_uns_content` + `ueber_uns_stats` |
|
||||
| `components/Contact.tsx` | `kontakt_info` + `kontakt_oeffnungszeiten` + `kontakt_social` |
|
||||
| `components/GalerieAnzeige.tsx` | `galerie_bilder` (neue Komponente) |
|
||||
|
||||
**Fallback-Strategie:** Jede Sektion nutzt `try/catch`. Bei DB-Fehler greift ein hardcodierter Fallback, die Seite bleibt immer aufrufbar.
|
||||
|
||||
**`app/layout.tsx`:** `PageTracker` von Analytics einbinden.
|
||||
|
||||
**`components/admin/AdminNav.tsx`:** Links zu `/admin/hero`, `/admin/ueber-uns`, `/admin/galerie`, `/admin/kontakt`, `/admin/passwort` ergänzen.
|
||||
|
||||
### Schritt 5: npm-Pakete prüfen
|
||||
|
||||
```bash
|
||||
npm install nodemailer @types/nodemailer
|
||||
npm install bcryptjs @types/bcryptjs
|
||||
# @supabase/supabase-js + @supabase/ssr bereits vorhanden
|
||||
```
|
||||
|
||||
### Schritt 6: Env-Variablen ergänzen
|
||||
|
||||
```env
|
||||
SUPABASE_INTERNAL_URL=http://supabase-kong:8000
|
||||
# SMTP-Felder ausfüllen (SMTP_HOST, SMTP_USER, SMTP_PASS)
|
||||
```
|
||||
|
||||
### Schritt 7: Infrastructure (manuell im Supabase-Dashboard)
|
||||
|
||||
**Storage Buckets anlegen (alle Public):**
|
||||
- `hero-bilder`
|
||||
- `site-assets`
|
||||
- `ueber-uns-bilder`
|
||||
- `galerie-bilder`
|
||||
|
||||
**Auth konfigurieren:**
|
||||
- Site URL: `https://mbo-tech-it.de`
|
||||
- Redirect URL: `https://mbo-tech-it.de/auth/callback`
|
||||
- E-Mail-Bestätigung aktivieren
|
||||
|
||||
**Ersten Admin-User anlegen:**
|
||||
```sql
|
||||
INSERT INTO admin_users (email, password_hash, name)
|
||||
VALUES ('jonny@mbo-tech-it.de', '<bcrypt-hash>', 'Admin');
|
||||
```
|
||||
|
||||
### Schritt 8: Queue-Worker (instrumentation.ts)
|
||||
|
||||
```ts
|
||||
import { startEmailQueueWorker } from "@/lib/email-queue";
|
||||
export async function register() {
|
||||
if (process.env.NEXT_RUNTIME === "nodejs") startEmailQueueWorker();
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Datenbank-Schema (13 Tabellen)
|
||||
|
||||
| Tabelle | Modul | Typ |
|
||||
|---|---|---|
|
||||
| `email_queue` | 01 | Queue |
|
||||
| `admin_users` | 02 | Singleton-Liste |
|
||||
| `admin_audit_logs` | 02 | Protokoll |
|
||||
| `admin_session_blacklist` | 02 | Blacklist |
|
||||
| `action_token_blacklist` | 02 | Blacklist |
|
||||
| `page_views` | 03 | Tracking |
|
||||
| `phone_clicks` | 03 | Tracking |
|
||||
| `anfragen` | 06-Kunden | CRUD |
|
||||
| `hero_content` | 06-CMS | Singleton |
|
||||
| `hero_badges` | 06-CMS | Liste |
|
||||
| `ueber_uns_content` | 06-CMS | Singleton |
|
||||
| `ueber_uns_stats` | 06-CMS | Liste |
|
||||
| `galerie_bilder` | 06-CMS | Liste |
|
||||
| `kontakt_info` | 06-CMS | Singleton |
|
||||
| `kontakt_oeffnungszeiten` | 06-CMS | Liste |
|
||||
| `kontakt_social` | 06-CMS | Liste |
|
||||
|
||||
---
|
||||
|
||||
## Wichtige Abweichungen von den Modul-Templates
|
||||
|
||||
- **`email_queue` — andere Spaltennamen:** Das Modul-Template definiert `to_addr`, `text`, `attempts`, `max_attempts`, `last_error`. Der tatsächliche Code (`lib/email-queue.ts` + `lib/supabase.ts`) verwendet `mail_from`, `mail_to`, `reply_to`, `body_text`, `retry_count`, `error_last`. Die DB-Migration muss die Spaltennamen aus dem Code verwenden, **nicht** aus dem Template.
|
||||
|
||||
- **`admin_users` statt `benutzer`:** Tabelle heißt `admin_users`, Spalten: `id, email, name, password_hash, aktiv, created_at`.
|
||||
|
||||
- **KPI-Dashboard ohne `anfragen_positionen`:** `app/api/admin/statistik/route.ts` ist bereits ans Projekt angepasst und fragt nur `anfragen` ab (keine `anfragen_positionen` wie im generischen Template).
|
||||
|
||||
- **`lib/supabase.ts` nutzt `SUPABASE_URL`** (nicht `NEXT_PUBLIC_SUPABASE_URL`) für den Service Client — korrekt so.
|
||||
|
||||
- **CMS-API-Routen:** Sollen `SUPABASE_INTERNAL_URL` für Docker-internen Zugriff verwenden.
|
||||
|
||||
---
|
||||
|
||||
## Nicht im Scope
|
||||
|
||||
- Docker-Compose-Konfiguration für Supabase (läuft bereits)
|
||||
- Modul 04 (Reservierungssystem) — nicht vorhanden; KPI-Dashboard und Kunden-Portal sind bereits ohne es angepasst
|
||||
- CI/CD-Pipeline
|
||||
Loading…
Reference in New Issue