[WIP] Create complete swing trade journaling web application

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original prompt

Swing-Trade-Journal Web-Applikation

Erstelle eine komplette Swing-Trade-Journaling Website als Frontend mit HTML/CSS/Vanilla-JS (ohne Frameworks). Das Projekt soll mehrere HTML-Seiten haben und Supabase als Backend (Auth + Datenbank) nutzen.

ZIEL

Eine Web-App zum Journaln von Swing Trades. Nutzer können sich registrieren, einloggen, Trades anlegen/bearbeiten/löschen, Screenshots hochladen, Statistiken sehen, Reviews schreiben und alles filtern/suchen. Alles ist pro User getrennt (Row Level Security).

TECH STACK / VORGABEN

• Frontend: HTML + CSS + Vanilla JavaScript (ES6 Module)
• Backend: Supabase (Auth, Postgres, Storage)
• Keine Build-Tools. Alles muss direkt im Browser laufen.
• Verwende Supabase JS Client über CDN.
• Struktur: mehrere HTML-Seiten + /assets (css, js).
• Responsive Design, modern, clean (Dashboard-Look).
• Schreibe sauberen, kommentierten Code.

PROJEKTSTRUKTUR (bitte exakt liefern)

/
  index.html                (Login/Register Landing)
  dashboard.html            (Übersicht)
  trades.html               (Trades Liste + Filter)
  trade-new.html            (Trade erstellen)
  trade-edit.html           (Trade bearbeiten)
  reviews.html              (Wochen/Monatsreviews)
  rules.html                (Regeln & Checklisten)
  settings.html             (Profil/Logout)
  /assets
    /css
      styles.css
    /js
      supabaseClient.js
      auth.js
      guard.js
      dashboard.js
      trades.js
      tradeForm.js
      reviews.js
      rules.js
      settings.js
      utils.js

SUPABASE KONFIG

• In supabaseClient.js soll es Platzhalter für SUPABASE_URL und SUPABASE_ANON_KEY geben.
• Alle DB/Storage Calls müssen über den Supabase Client laufen.

AUTH ANFORDERUNGEN

• index.html: Login + Register Form (Email/Passwort).
• Optional: Password Reset Flow (nice-to-have).
• Nach Login: redirect zu dashboard.html
• guard.js: Route-Guard für alle Seiten außer index.html:
  • wenn nicht eingeloggt -> redirect zu index.html
• settings.html: Logout Button.

DATENBANKSCHEMA (SQL liefern + erklären)

Lege bitte Tabellen an:

1) trades

• id uuid primary key default uuid_generate_v4() (oder gen_random_uuid)
• user_id uuid references auth.users not null
• created_at timestamp default now()
• updated_at timestamp default now()
• symbol text not null
• market text (stock/crypto/forex/index)
• direction text (long/short)
• entry_date date
• entry_price numeric
• exit_date date
• exit_price numeric
• position_size numeric
• fees numeric default 0
• stop_loss numeric
• take_profit numeric
• risk_amount numeric
• strategy text
• timeframe text
• market_phase text
• entry_signal text
• confirmation text
• mood_before text
• emotions text
• discipline_score int
• rules_followed boolean default true
• main_mistake text
• notes text
• screenshot_url text (oder storage path)
• tags text[] (optional)

2) reviews

• id uuid pk
• user_id uuid ref auth.users
• type text (weekly/monthly)
• period_start date
• period_end date
• summary text
• top_trades text
• top_mistakes text
• learnings text
• next_focus text
• created_at timestamp default now()

3) rules

• id uuid pk
• user_id uuid ref auth.users
• title text
• content text
• category text (rules / pretrade / posttrade)
• created_at timestamp default now()

RLS (Row Level Security) MUSS

• Aktiviere RLS für alle Tabellen.
• Policies:
  • SELECT/INSERT/UPDATE/DELETE nur wenn auth.uid() = user_id

STORAGE (Screenshots)

• Supabase Storage Bucket: "trade-screenshots"
• Upload über trade-new.html und trade-edit.html (File Input).
• Speichere Pfad/URL in trades.screenshot_url
• Stelle sicher, dass nur der User seine Files sieht (Policies / private bucket) oder baue signed URL retrieval.

PAGES / FUNKTIONEN

1) dashboard.html

• KPI Cards: Total Trades, Winrate, Profit Factor, Avg R, Net P/L
• Equity Curve (einfach als HTML Canvas Chart ohne libs ODER simple Tabelle; keine externen Chart-Libs nötig)
• Letzte 5 Trades Liste (mit Link zu Edit)

2) trades.html

• Tabelle aller Trades mit:
  • Symbol, Direction, Entry/Exit, P/L, R-Multiple, Strategy, Rules Followed, Discipline Score
• Filter: Zeitraum, Strategy, Market, Long/Short, Gewinn/Verlust, Rules Followed
• Suche nach Symbol/Notizen
• Buttons: "New Trade", "Edit", "Delete"
• Pagination optional, sonst Lazy Load

3) trade-new.html

• Trade Form (alle wichtigen Felder)
• Live-Berechnungen: P/L, R-Multiple, Risiko in %
• Screenshot Upload
• Save -> redirect zu trades.html

4) trade-edit.html

• Wie trade-new, aber lädt Daten anhand query param ?id=...
• Update + Delete Option
• Screenshot ersetzen

5) reviews.html

• Liste Reviews
• "New Review" Modal/Form: Weekly/Monthly + Zeitraum + Textfelder (summary, learnings etc.)
• Edit/Delete

6) rules.html

• CRUD für Regeln und Checklisten
• Kategorien: rules / pretrade / posttrade
• Checkbox UI für Checklisten (optional) – zumindest Darstellung

7) settings.html

• Zeige User Email
• Logout
• Optional: Theme Toggl...

This pull request was created from Copilot chat.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.