Frontend – Struktur

Version: 1.0.0 | Status: DRAFT | Updated: 2026-04-22

---

Verzeichnisstruktur

frontend/
├── src/
│   ├── lib/
│   │   ├── api/
│   │   │   ├── msGraph.ts        # MS Graph Abstraction
│   │   │   └── rewe.ts           # REWE Concierge Abstraction
│   │   ├── mock/
│   │   │   ├── ms-graph-calendar.json
│   │   │   ├── ms-graph-booking-appointment.json
│   │   │   ├── ms-graph-booking-paid.json
│   │   │   └── rewe-products.json
│   │   └── bookingStore.ts       # Svelte Stores
│   └── routes/
│       ├── +page.svelte          # Landing Page
│       ├── booking/
│       │   ├── +page.svelte      # Schritt 1: Datum & Extras
│       │   └── confirmation/
│       │       └── +page.svelte  # Schritt 3: Bestätigung
│       └── concierge/
│           └── +page.svelte      # Schritt 2: REWE Concierge
├── package.json
├── svelte.config.js
├── tsconfig.json
└── vite.config.ts

Svelte Stores

bookingStore.ts

export const booking = writable<BookingState>({
  checkIn: '',
  checkOut: '',
  guests: 2,
  name: '',
  email: '',
  extras: { linen: false, grill: false, boller: false },
  concierge: null,
  appointmentId: null
});

export const priceBreakdown = derived(booking, ($b) => { ... });

Mock Toggle

// Beide API-Dateien haben denselben Toggle:
const USE_MOCK = true;
// → true:  JSON-Dateien aus /src/lib/mock/
// → false: Echter Fetch mit Auth-Header