added frontend

backend/main.py

@@ -3,6 +3,7 @@ from typing import List
 from models import CreateOrderRequest, Order, DrinkType, MateType
 from database import db
 from websocket_manager import websocket_manager
+import json
 
 app = FastAPI(
     title="Tschunk Order API",
@@ -10,22 +11,8 @@ app = FastAPI(
     version="1.0.0"
 )
 
-
-@app.get("/")
-async def root():
-    """Root endpoint with API information."""
-    return {
-        "message": "Willkommen zur Tschunk Order API!",
-        "version": "1.0.0",
-        "endpoints": {
-            "POST /orders": "Neue Bestellung erstellen",
-            "GET /orders": "Alle Bestellungen abrufen",
-            "DELETE /orders/{order_id}": "Bestellung löschen",
-            "WS /ws": "WebSocket für Echtzeit-Updates"
-        },
-        "available_drinks": [drink.value for drink in DrinkType],
-        "available_mate_types": [mate.value for mate in MateType]
-    }
+# Datenbank-Referenz im WebSocketManager setzen
+websocket_manager.set_database(db)
 
 
 @app.websocket("/ws")
@@ -41,6 +28,9 @@ async def websocket_endpoint(websocket: WebSocket):
     - order_created: {"type": "order_created", "order": {...}}
     - order_deleted: {"type": "order_deleted", "order_id": "..."}
     - all_orders: {"type": "all_orders", "orders": [...]}
+    - create_order: {"type": "create_order", "drinks": [...]}
+    - get_all_orders: {"type": "get_all_orders"}
+    - delete_order: {"type": "delete_order", "order_id": "..."}
     """
     await websocket_manager.connect(websocket)
     
@@ -51,12 +41,31 @@ async def websocket_endpoint(websocket: WebSocket):
         
         # Halte die Verbindung aufrecht und warte auf Nachrichten
         while True:
-            # Warte auf Nachrichten vom Client (kann für Pings/Pongs verwendet werden)
+            # Warte auf Nachrichten vom Client
             data = await websocket.receive_text()
             
-            # Optional: Echo für Pings
-            if data == "ping":
-                await websocket.send_text("pong")
+            try:
+                # Versuche JSON zu parsen
+                message = json.loads(data)
+                message_type = message.get("type")
+                
+                if message_type == "ping":
+                    await websocket.send_text("pong")
+                elif message_type == "create_order":
+                    await websocket_manager.handle_create_order(websocket, message)
+                elif message_type == "get_all_orders":
+                    await websocket_manager.handle_get_all_orders(websocket)
+                elif message_type == "delete_order":
+                    await websocket_manager.handle_delete_order(websocket, message)
+                else:
+                    print(f"Unbekannte Nachrichtenart: {message_type}")
+                    
+            except json.JSONDecodeError:
+                # Fallback für einfache Textnachrichten (z.B. "ping")
+                if data == "ping":
+                    await websocket.send_text("pong")
+                else:
+                    print(f"Ungültige JSON-Nachricht: {data}")
                 
     except WebSocketDisconnect:
         websocket_manager.disconnect(websocket)

backend/websocket_manager.py

@@ -3,11 +3,17 @@ from typing import List, Dict, Any
 import json
 import asyncio
 from datetime import datetime
+from models import CreateOrderRequest, Drink
 
 
 class WebSocketManager:
     def __init__(self):
         self.active_connections: List[WebSocket] = []
+        self.db = None  # Wird später gesetzt
+    
+    def set_database(self, database):
+        """Setzt die Datenbank-Referenz (Dependency Injection)."""
+        self.db = database
     
     async def connect(self, websocket: WebSocket):
         """Neue WebSocket-Verbindung hinzufügen."""
@@ -42,6 +48,144 @@ class WebSocketManager:
         for connection in disconnected:
             self.disconnect(connection)
     
+    async def send_to_client(self, websocket: WebSocket, message: Dict[str, Any]):
+        """Nachricht an einen spezifischen Client senden."""
+        try:
+            message_json = json.dumps(message, default=str)
+            await websocket.send_text(message_json)
+        except Exception as e:
+            print(f"Fehler beim Senden an WebSocket: {e}")
+            self.disconnect(websocket)
+    
+    async def handle_create_order(self, websocket: WebSocket, data: Dict[str, Any]):
+        """Behandelt eine Bestellungsanfrage über WebSocket."""
+        try:
+            # Validierung der Anfrage
+            if "drinks" not in data or not data["drinks"]:
+                await self.send_to_client(websocket, {
+                    "type": "order_created_response",
+                    "success": False,
+                    "error": "Mindestens ein Getränk muss bestellt werden",
+                    "timestamp": datetime.now().isoformat()
+                })
+                return
+            
+            # Drinks aus der Anfrage erstellen
+            drinks = []
+            for drink_data in data["drinks"]:
+                drink = Drink(
+                    drink_type=drink_data["drink_type"],
+                    mate_type=drink_data["mate_type"],
+                    quantity=drink_data["quantity"],
+                    notes=drink_data.get("notes", "")
+                )
+                drinks.append(drink)
+            
+            # Bestellung in der Datenbank erstellen
+            if self.db:
+                order = await self.db.create_order(drinks)
+                
+                # Erfolgsantwort an den Client senden
+                await self.send_to_client(websocket, {
+                    "type": "order_created_response",
+                    "success": True,
+                    "order": order.model_dump(),
+                    "timestamp": datetime.now().isoformat()
+                })
+            else:
+                await self.send_to_client(websocket, {
+                    "type": "order_created_response",
+                    "success": False,
+                    "error": "Datenbank nicht verfügbar",
+                    "timestamp": datetime.now().isoformat()
+                })
+            
+        except Exception as e:
+            print(f"Fehler beim Erstellen der Bestellung über WebSocket: {e}")
+            await self.send_to_client(websocket, {
+                "type": "order_created_response",
+                "success": False,
+                "error": f"Fehler beim Erstellen der Bestellung: {str(e)}",
+                "timestamp": datetime.now().isoformat()
+            })
+    
+    async def handle_get_all_orders(self, websocket: WebSocket):
+        """Sendet alle Bestellungen an den anfragenden Client."""
+        try:
+            if self.db:
+                orders = self.db.get_all_orders()
+                await self.send_to_client(websocket, {
+                    "type": "all_orders",
+                    "orders": [order.model_dump() for order in orders],
+                    "timestamp": datetime.now().isoformat()
+                })
+            else:
+                await self.send_to_client(websocket, {
+                    "type": "all_orders",
+                    "orders": [],
+                    "error": "Datenbank nicht verfügbar",
+                    "timestamp": datetime.now().isoformat()
+                })
+        except Exception as e:
+            print(f"Fehler beim Abrufen aller Bestellungen: {e}")
+            await self.send_to_client(websocket, {
+                "type": "all_orders",
+                "orders": [],
+                "error": f"Fehler beim Abrufen der Bestellungen: {str(e)}",
+                "timestamp": datetime.now().isoformat()
+            })
+    
+    async def handle_delete_order(self, websocket: WebSocket, data: Dict[str, Any]):
+        """Behandelt eine Bestelllöschung über WebSocket."""
+        try:
+            # Validierung der Anfrage
+            if "order_id" not in data or not data["order_id"]:
+                await self.send_to_client(websocket, {
+                    "type": "order_deleted_response",
+                    "success": False,
+                    "error": "Order ID ist erforderlich",
+                    "timestamp": datetime.now().isoformat()
+                })
+                return
+            
+            order_id = data["order_id"]
+            
+            # Bestellung in der Datenbank löschen
+            if self.db:
+                success = await self.db.delete_order(order_id)
+                
+                if success:
+                    # Erfolgsantwort an den Client senden
+                    await self.send_to_client(websocket, {
+                        "type": "order_deleted_response",
+                        "success": True,
+                        "message": f"Bestellung {order_id} wurde erfolgreich gelöscht",
+                        "timestamp": datetime.now().isoformat()
+                    })
+                else:
+                    await self.send_to_client(websocket, {
+                        "type": "order_deleted_response",
+                        "success": False,
+                        "error": "Bestellung nicht gefunden",
+                        "timestamp": datetime.now().isoformat()
+                    })
+            else:
+                await self.send_to_client(websocket, {
+                    "type": "order_deleted_response",
+                    "success": False,
+                    "error": "Datenbank nicht verfügbar",
+                    "timestamp": datetime.now().isoformat()
+                })
+            
+        except Exception as e:
+            print(f"Fehler beim Löschen der Bestellung über WebSocket: {e}")
+            await self.send_to_client(websocket, {
+                "type": "order_deleted_response",
+                "success": False,
+                "error": f"Fehler beim Löschen der Bestellung: {str(e)}",
+                "timestamp": datetime.now().isoformat()
+            })
+    
     async def broadcast_order_created(self, order: Dict[str, Any]):
         """Broadcast für neue Bestellung."""
         message = {

frontend/.editorconfig

@@ -0,0 +1,9 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+end_of_line = lf
+max_line_length = 100

frontend/.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

frontend/.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo

frontend/.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig"
+  ]
+}

frontend/README.md

@@ -0,0 +1,39 @@
+# frontend
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```

frontend/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

frontend/eslint.config.ts

@@ -0,0 +1,20 @@
+import { globalIgnores } from 'eslint/config'
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
+import pluginVue from 'eslint-plugin-vue'
+
+// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
+// import { configureVueProject } from '@vue/eslint-config-typescript'
+// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
+// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
+
+export default defineConfigWithVueTs(
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{ts,mts,tsx,vue}'],
+  },
+
+  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
+
+  pluginVue.configs['flat/essential'],
+  vueTsConfigs.recommended,
+)

frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "frontend",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint": "eslint . --fix"
+  },
+  "dependencies": {
+    "pinia": "^3.0.3",
+    "vue": "^3.5.17",
+    "vue-router": "^4.5.1"
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "^22.0.2",
+    "@types/node": "^22.15.32",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "@vue/eslint-config-typescript": "^14.5.1",
+    "@vue/tsconfig": "^0.7.0",
+    "eslint": "^9.29.0",
+    "eslint-plugin-vue": "~10.2.0",
+    "jiti": "^2.4.2",
+    "npm-run-all2": "^8.0.4",
+    "typescript": "~5.8.0",
+    "vite": "^7.0.0",
+    "vite-plugin-vue-devtools": "^7.7.7",
+    "vue-tsc": "^2.2.10"
+  }
+}

frontend/src/App.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router'
+</script>
+
+<template>
+  <header>
+    <div class="header-content">
+      <div class="logo-section">
+        <h1 class="app-title">🍹 Tschunk Order</h1>
+      </div>
+
+      <nav>
+        <RouterLink to="/" class="nav-link">Bestellübersicht</RouterLink>
+        <RouterLink to="/create" class="nav-link">Neue Bestellung</RouterLink>
+      </nav>
+    </div>
+  </header>
+
+  <main>
+    <RouterView />
+  </main>
+</template>
+
+<style scoped>
+header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 1rem 0;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.header-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo-section h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+nav {
+  display: flex;
+  gap: 0;
+}
+
+.nav-link {
+  color: white;
+  text-decoration: none;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  font-weight: 500;
+}
+
+.nav-link:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateY(-1px);
+}
+
+.nav-link.router-link-active {
+  background: rgba(255, 255, 255, 0.2);
+  font-weight: 600;
+}
+
+main {
+  min-height: calc(100vh - 80px);
+  background: #f8fafc;
+}
+
+@media (max-width: 768px) {
+  .header-content {
+    flex-direction: column;
+    gap: 1rem;
+    text-align: center;
+  }
+  
+  nav {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  
+  .nav-link {
+    font-size: 0.9rem;
+    padding: 0.4rem 0.8rem;
+  }
+}
+</style>

frontend/src/assets/base.css

@@ -0,0 +1,86 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

frontend/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

frontend/src/assets/main.css

@@ -0,0 +1,22 @@
+@import './base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+  padding: 3px;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}

frontend/src/components/NewDrinkCard.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="drink-card">
+    <div class="drink-selector">
+      <div class="drink-type-selector">
+        <div class="button-group">
+          <button 
+            v-for="drinkType in drinkTypes" 
+            :key="drinkType"
+            type="button"
+            @click="selectDrinkType(drinkType)"
+            :class="['toggle-btn', { 'active': drink.drink_type === drinkType }]"
+          >
+            {{ drinkType }}
+          </button>
+        </div>
+      </div>
+
+      <div class="mate-type-selector">
+        <div class="button-group">
+          <button 
+            v-for="mateType in mateTypes" 
+            :key="mateType"
+            type="button"
+            @click="selectMateType(mateType)"
+            :class="['toggle-btn', { 'active': drink.mate_type === mateType }]"
+          >
+            {{ mateType }}
+          </button>
+        </div>
+      </div>
+
+      <div class="quantity-selector">
+        <div class="quantity-controls">
+          <button 
+            type="button"
+            @click="decreaseQuantity"
+            class="toggle-btn minus"
+            :disabled="drink.quantity <= 1"
+          >
+            -
+          </button>
+          <input 
+            :id="`quantity-${index}`"
+            v-model.number="drink.quantity"
+            type="number"
+            min="1"
+            max="99"
+            class="quantity-input"
+            readonly
+          />
+          <button 
+            type="button"
+            @click="increaseQuantity"
+            class="toggle-btn plus"
+          >
+            +
+          </button>
+          <div class="quick-quantity-group">
+            <button
+              v-for="n in 10"
+              :key="n"
+              type="button"
+              @click="setQuantity(n)"
+              :class="['toggle-btn', { 'active': drink.quantity === n }]"
+            >
+              {{ n }}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="notes-input">
+        <input 
+          :id="`notes-${index}`"
+          v-model="drink.notes"
+          type="text"
+          placeholder="Notiz (optional)"
+          class="notes-field"
+        />
+      </div>
+
+      <button 
+        type="button"
+        @click="$emit('remove')"
+        class="remove-drink-btn"
+        title="Getränk entfernen"
+      >
+        🗑️
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue'
+import { DrinkType, MateType, type Drink } from '@/types/order'
+
+interface Props {
+  drink: Drink
+  index: number
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  remove: []
+  update: [drink: Drink]
+}>()
+
+// Computed properties
+const drinkTypes = Object.values(DrinkType)
+const mateTypes = Object.values(MateType)
+
+// Methods
+const selectDrinkType = (drinkType: DrinkType) => {
+  const updatedDrink = { ...props.drink, drink_type: drinkType }
+  emit('update', updatedDrink)
+}
+
+const selectMateType = (mateType: MateType) => {
+  const updatedDrink = { ...props.drink, mate_type: mateType }
+  emit('update', updatedDrink)
+}
+
+const increaseQuantity = () => {
+  if (props.drink.quantity < 99) {
+    const updatedDrink = { ...props.drink, quantity: props.drink.quantity + 1 }
+    emit('update', updatedDrink)
+  }
+}
+
+const decreaseQuantity = () => {
+  if (props.drink.quantity > 1) {
+    const updatedDrink = { ...props.drink, quantity: props.drink.quantity - 1 }
+    emit('update', updatedDrink)
+  }
+}
+
+const setQuantity = (n: number) => {
+  const updatedDrink = { ...props.drink, quantity: n }
+  emit('update', updatedDrink)
+}
+
+// Watch for changes and emit updates
+watch(() => props.drink, (newDrink) => {
+  emit('update', newDrink)
+}, { deep: true })
+</script>
+
+<style scoped>
+.drink-card {
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 16px;
+  position: relative;
+}
+
+.drink-selector {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.drink-type-selector,
+.mate-type-selector,
+.quantity-selector,
+.notes-input {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.button-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.toggle-btn {
+  padding: 8px 16px;
+  border: 2px solid #d1d5db;
+  background: white;
+  border-radius: 6px;
+  font-size: 0.95rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  min-height: 40px;
+}
+
+.toggle-btn:hover {
+  border-color: #3b82f6;
+  background: #f0f9ff;
+}
+
+.toggle-btn.active {
+  background: #3b82f6;
+  color: white;
+  border-color: #3b82f6;
+}
+
+.toggle-btn.active:hover {
+  background: #2563eb;
+  border-color: #2563eb;
+}
+
+.quantity-controls {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  justify-content: flex-start;
+}
+
+.quantity-input {
+  width: 60px;
+  height: 40px;
+  text-align: center;
+  border: 2px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 1.125rem;
+  font-weight: 600;
+  background: #f9fafb;
+  cursor: default;
+}
+
+.quick-quantity-group {
+  display: flex;
+  gap: 2px;
+  margin-left: 8px;
+}
+
+.notes-field {
+  padding: 12px;
+  border: 2px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 1rem;
+  min-height: 40px;
+}
+
+.notes-field:focus {
+  outline: none;
+  border-color: #3b82f6;
+}
+
+.remove-drink-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 32px;
+  height: 32px;
+  border: 2px solid #ef4444;
+  background: white;
+  border-radius: 8px;
+  font-size: 1.1rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.remove-drink-btn:hover {
+  background: #fef2f2;
+  border-color: #dc2626;
+}
+
+@media (max-width: 768px) {
+  .drink-card {
+    padding: 10px;
+  }
+  .button-group {
+    justify-content: center;
+  }
+  .quantity-controls {
+    justify-content: flex-start;
+  }
+  .remove-drink-btn {
+    top: 6px;
+    right: 6px;
+    width: 28px;
+    height: 28px;
+    font-size: 1rem;
+  }
+}
+</style> 

frontend/src/components/OrderCard.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="order-card" @dblclick="handleDeleteOrder">
+    <div class="order-header">
+      <div class="order-info">
+        <h3 class="order-id">Bestellung #{{ order.id }}</h3>
+        <p class="order-date">{{ formatDate(order.order_date) }}</p>
+      </div>
+      <div class="order-status">
+        <span class="status-badge">Offen</span>
+      </div>
+    </div>
+    
+    <div class="drinks-list">
+      <div 
+        v-for="(drink, index) in order.drinks" 
+        :key="index"
+        class="drink-item"
+      >
+        <div class="drink-info">
+          <div class="drink-header">
+            <span class="drink-type">{{ drink.drink_type }}</span>
+            <span class="drink-quantity">x{{ drink.quantity }}</span>
+          </div>
+          <div class="drink-details">
+            <span class="mate-type">{{ drink.mate_type }}</span>
+            <span v-if="drink.notes" class="drink-notes">{{ drink.notes }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="order-footer">
+      <div class="total-drinks">
+        <span>{{ getTotalDrinks() }} Getränke insgesamt</span>
+      </div>
+      <div class="delete-hint">
+        <span class="hint-text">Doppelklick zum Löschen</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Order } from '@/types/order'
+import { useOrderStore } from '@/stores/orderStore'
+
+interface Props {
+  order: Order
+}
+
+const props = defineProps<Props>()
+const orderStore = useOrderStore()
+
+const formatDate = (dateString: string): string => {
+  const date = new Date(dateString)
+  return date.toLocaleString('de-DE', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+const getTotalDrinks = (): number => {
+  return props.order.drinks.reduce((total, drink) => total + drink.quantity, 0)
+}
+
+const handleDeleteOrder = async () => {
+  try {
+    await orderStore.deleteOrder(props.order.id)
+  } catch (error) {
+    console.error('Fehler beim Löschen der Bestellung:', error)
+    alert('Fehler beim Löschen der Bestellung')
+  }
+}
+</script>
+
+<style scoped>
+.order-card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  margin-bottom: 16px;
+  border: 1px solid #e5e7eb;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.order-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-2px);
+}
+
+.order-card:active {
+  transform: translateY(0);
+}
+
+.order-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.order-info h3 {
+  margin: 0 0 4px 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.order-date {
+  margin: 0;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.status-badge {
+  background: #10b981;
+  color: white;
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.drinks-list {
+  margin-bottom: 16px;
+}
+
+.drink-item {
+  padding: 12px 0;
+  border-bottom: 1px solid #f9fafb;
+}
+
+.drink-item:last-child {
+  border-bottom: none;
+}
+
+.drink-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
+}
+
+.drink-type {
+  font-weight: 600;
+  color: #1f2937;
+  font-size: 1rem;
+}
+
+.drink-quantity {
+  background: #3b82f6;
+  color: white;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  min-width: 24px;
+  text-align: center;
+}
+
+.drink-details {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.mate-type {
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.drink-notes {
+  font-size: 0.8rem;
+  color: #059669;
+  font-style: italic;
+  background: #d1fae5;
+  padding: 4px 8px;
+  border-radius: 6px;
+  margin-top: 4px;
+}
+
+.order-footer {
+  padding-top: 12px;
+  border-top: 1px solid #f3f4f6;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.total-drinks {
+  text-align: left;
+  font-size: 0.875rem;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.delete-hint {
+  text-align: right;
+}
+
+.hint-text {
+  font-size: 0.75rem;
+  color: #9ca3af;
+  font-style: italic;
+}
+
+@media (max-width: 768px) {
+  .order-footer {
+    flex-direction: column;
+    gap: 8px;
+    align-items: flex-start;
+  }
+  
+  .delete-hint {
+    text-align: left;
+  }
+}
+</style> 

frontend/src/components/icons/IconCommunity.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>

frontend/src/components/icons/IconDocumentation.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>

frontend/src/components/icons/IconEcosystem.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>

frontend/src/components/icons/IconSupport.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>

frontend/src/components/icons/IconTooling.vue

@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>

frontend/src/main.ts

@@ -0,0 +1,14 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')

frontend/src/router/index.ts

@@ -0,0 +1,19 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: () => import('../views/OrdersView.vue'),
+    },
+    {
+      path: '/create',
+      name: 'create-order',
+      component: () => import('../views/CreateOrderView.vue'),
+    },
+  ],
+})
+
+export default router

frontend/src/stores/counter.ts

@@ -0,0 +1,12 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})

frontend/src/stores/orderStore.ts

@@ -0,0 +1,306 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import type { Order, CreateOrderRequest } from '@/types/order'
+
+export const useOrderStore = defineStore('orders', () => {
+  // State
+  const orders = ref<Order[]>([])
+  const isLoading = ref(false)
+  const error = ref<string | null>(null)
+  const wsConnection = ref<WebSocket | null>(null)
+  const connectionStatus = ref<'disconnected' | 'connecting' | 'connected'>('disconnected')
+
+  // Getters
+  const openOrders = computed(() => {
+    return orders.value.filter(order => {
+      // Hier können wir später Logik für "offene" Bestellungen hinzufügen
+      // Momentan zeigen wir alle Bestellungen an
+      return true
+    })
+  })
+
+  const totalOrders = computed(() => orders.value.length)
+
+  // Actions
+  const connectWebSocket = () => {
+    try {
+      connectionStatus.value = 'connecting'
+      // WebSocket-Verbindung zum Backend
+      wsConnection.value = new WebSocket('ws://localhost:8000/ws')
+      
+      wsConnection.value.onopen = () => {
+        console.log('WebSocket verbunden')
+        connectionStatus.value = 'connected'
+        error.value = null
+        // Nach der Verbindung alle Bestellungen anfordern
+        requestAllOrders()
+      }
+
+      wsConnection.value.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data)
+          handleWebSocketMessage(data)
+        } catch (e) {
+          console.error('Fehler beim Parsen der WebSocket-Nachricht:', e)
+        }
+      }
+
+      wsConnection.value.onerror = (event) => {
+        console.error('WebSocket Fehler:', event)
+        connectionStatus.value = 'disconnected'
+        error.value = 'WebSocket-Verbindungsfehler'
+      }
+
+      wsConnection.value.onclose = () => {
+        console.log('WebSocket-Verbindung geschlossen')
+        connectionStatus.value = 'disconnected'
+        // Automatische Wiederverbindung nach 5 Sekunden
+        setTimeout(() => {
+          if (connectionStatus.value === 'disconnected') {
+            connectWebSocket()
+          }
+        }, 5000)
+      }
+    } catch (e) {
+      console.error('Fehler beim Verbinden zum WebSocket:', e)
+      connectionStatus.value = 'disconnected'
+      error.value = 'Verbindungsfehler'
+    }
+  }
+
+  const requestAllOrders = () => {
+    if (wsConnection.value?.readyState === WebSocket.OPEN) {
+      wsConnection.value.send(JSON.stringify({ type: 'get_all_orders' }))
+      isLoading.value = true
+    }
+  }
+
+  const handleWebSocketMessage = (data: any) => {
+    switch (data.type) {
+      case 'all_orders':
+        setOrders(data.orders)
+        isLoading.value = false
+        break
+      case 'order_created':
+        addOrder(data.order)
+        break
+      case 'order_updated':
+        updateOrder(data.order)
+        break
+      case 'order_deleted':
+        removeOrder(data.order_id)
+        break
+      case 'order_created_response':
+        handleOrderCreatedResponse(data)
+        break
+      case 'order_deleted_response':
+        handleOrderDeletedResponse(data)
+        break
+      default:
+        console.log('Unbekannte WebSocket-Nachricht:', data)
+    }
+  }
+
+  const handleOrderCreatedResponse = (data: any) => {
+    if (data.success) {
+      // Bestellung wurde erfolgreich erstellt
+      console.log('Bestellung erfolgreich erstellt:', data.order)
+      // Die Bestellung wird bereits über den 'order_created' Broadcast hinzugefügt
+    } else {
+      // Fehler beim Erstellen der Bestellung
+      console.error('Fehler beim Erstellen der Bestellung:', data.error)
+      error.value = data.error || 'Unbekannter Fehler beim Erstellen der Bestellung'
+    }
+  }
+
+  const handleOrderDeletedResponse = (data: any) => {
+    if (data.success) {
+      // Bestellung wurde erfolgreich gelöscht
+      console.log('Bestellung erfolgreich gelöscht:', data.message)
+      // Die Bestellung wird bereits über den 'order_deleted' Broadcast entfernt
+    } else {
+      // Fehler beim Löschen der Bestellung
+      console.error('Fehler beim Löschen der Bestellung:', data.error)
+      error.value = data.error || 'Unbekannter Fehler beim Löschen der Bestellung'
+    }
+  }
+
+  const createOrder = async (orderRequest: CreateOrderRequest) => {
+    return new Promise((resolve, reject) => {
+      if (wsConnection.value?.readyState === WebSocket.OPEN) {
+        // WebSocket-Nachricht senden
+        wsConnection.value.send(JSON.stringify({
+          type: 'create_order',
+          drinks: orderRequest.drinks
+        }))
+        
+        // Timeout für die Antwort setzen
+        const timeout = setTimeout(() => {
+          reject(new Error('Timeout beim Erstellen der Bestellung'))
+        }, 10000)
+        
+        // Temporärer Event-Listener für die Antwort
+        const handleResponse = (event: MessageEvent) => {
+          try {
+            const data = JSON.parse(event.data)
+            if (data.type === 'order_created_response') {
+              clearTimeout(timeout)
+              wsConnection.value?.removeEventListener('message', handleResponse)
+              
+              if (data.success) {
+                resolve(data.order)
+              } else {
+                reject(new Error(data.error || 'Unbekannter Fehler'))
+              }
+            }
+          } catch (e) {
+            // Ignoriere andere Nachrichten
+          }
+        }
+        
+        wsConnection.value.addEventListener('message', handleResponse)
+      } else {
+        // Fallback auf HTTP-API
+        createOrderHttp(orderRequest).then(resolve).catch(reject)
+      }
+    })
+  }
+
+  const createOrderHttp = async (orderRequest: CreateOrderRequest) => {
+    try {
+      const response = await fetch('http://localhost:8000/orders', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(orderRequest),
+      })
+      
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+      
+      const newOrder = await response.json()
+      addOrder(newOrder)
+      return newOrder
+    } catch (e) {
+      console.error('Fehler beim Erstellen der Bestellung:', e)
+      error.value = 'Fehler beim Erstellen der Bestellung'
+      throw e
+    }
+  }
+
+  const deleteOrder = async (orderId: string) => {
+    return new Promise((resolve, reject) => {
+      if (wsConnection.value?.readyState === WebSocket.OPEN) {
+        // WebSocket-Nachricht senden
+        wsConnection.value.send(JSON.stringify({
+          type: 'delete_order',
+          order_id: orderId
+        }))
+        
+        // Timeout für die Antwort setzen
+        const timeout = setTimeout(() => {
+          reject(new Error('Timeout beim Löschen der Bestellung'))
+        }, 10000)
+        
+        // Temporärer Event-Listener für die Antwort
+        const handleResponse = (event: MessageEvent) => {
+          try {
+            const data = JSON.parse(event.data)
+            if (data.type === 'order_deleted_response') {
+              clearTimeout(timeout)
+              wsConnection.value?.removeEventListener('message', handleResponse)
+              
+              if (data.success) {
+                resolve(data.message)
+              } else {
+                reject(new Error(data.error || 'Unbekannter Fehler'))
+              }
+            }
+          } catch (e) {
+            // Ignoriere andere Nachrichten
+          }
+        }
+        
+        wsConnection.value.addEventListener('message', handleResponse)
+      } else {
+        // Fallback auf HTTP-API
+        deleteOrderHttp(orderId).then(resolve).catch(reject)
+      }
+    })
+  }
+
+  const deleteOrderHttp = async (orderId: string) => {
+    try {
+      const response = await fetch(`http://localhost:8000/orders/${orderId}`, {
+        method: 'DELETE',
+      })
+      
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+      
+      const result = await response.json()
+      return result.message
+    } catch (e) {
+      console.error('Fehler beim Löschen der Bestellung:', e)
+      error.value = 'Fehler beim Löschen der Bestellung'
+      throw e
+    }
+  }
+
+  const addOrder = (order: Order) => {
+    orders.value.unshift(order) // Neue Bestellung am Anfang hinzufügen
+  }
+
+  const updateOrder = (updatedOrder: Order) => {
+    const index = orders.value.findIndex(order => order.id === updatedOrder.id)
+    if (index !== -1) {
+      orders.value[index] = updatedOrder
+    }
+  }
+
+  const removeOrder = (orderId: string) => {
+    const index = orders.value.findIndex(order => order.id === orderId)
+    if (index !== -1) {
+      orders.value.splice(index, 1)
+    }
+  }
+
+  const setOrders = (newOrders: Order[]) => {
+    orders.value = newOrders
+  }
+
+  const disconnectWebSocket = () => {
+    if (wsConnection.value) {
+      wsConnection.value.close()
+      wsConnection.value = null
+    }
+    connectionStatus.value = 'disconnected'
+  }
+
+  return {
+    // State
+    orders,
+    isLoading,
+    error,
+    wsConnection,
+    connectionStatus,
+    
+    // Getters
+    openOrders,
+    totalOrders,
+    
+    // Actions
+    connectWebSocket,
+    disconnectWebSocket,
+    requestAllOrders,
+    createOrder,
+    deleteOrder,
+    addOrder,
+    updateOrder,
+    removeOrder,
+    setOrders
+  }
+}) 

frontend/src/types/order.ts

@@ -0,0 +1,28 @@
+export enum MateType {
+  FLORA_MATE = "Flora Mate",
+  CLUB_MATE = "Club Mate"
+}
+
+export enum DrinkType {
+  TSCHUNK = "Tschunk",
+  TSCHUNK_HANNOVER_MISCHE = "Tschunk Hannover-Mische",
+  TSCHUNK_ALKOHOLFREIER_RUM = "Tschunk alkoholfreier Rum",
+  VIRGIN_TSCHUNK = "Virgin Tschunk"
+}
+
+export interface Drink {
+  drink_type: DrinkType
+  mate_type: MateType
+  quantity: number
+  notes?: string
+}
+
+export interface Order {
+  id: string
+  order_date: string
+  drinks: Drink[]
+}
+
+export interface CreateOrderRequest {
+  drinks: Drink[]
+} 

frontend/src/views/CreateOrderView.vue

@@ -0,0 +1,541 @@
+<template>
+  <div class="create-order-view">
+    <div class="header">
+      <h1>Neue Bestellung</h1>
+      <div class="header-actions">
+        <div class="connection-status">
+          <span 
+            :class="['status-indicator', { 
+              'connected': isConnected,
+              'connecting': orderStore.connectionStatus === 'connecting'
+            }]"
+            :title="getConnectionTooltip()"
+          ></span>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="error" class="error-message">
+      <p>{{ error }}</p>
+      <button @click="retryConnection" class="retry-btn">
+        Erneut versuchen
+      </button>
+    </div>
+
+    <form @submit.prevent="submitOrder" class="order-form">
+      <div class="drinks-section">
+        <div class="drinks-actions-row">
+          <button 
+            type="submit"
+            :disabled="!canSubmit || isSubmitting"
+            class="submit-btn"
+          >
+            <span v-if="isSubmitting">Wird erstellt...</span>
+            <span v-else>Bestellung aufgeben</span>
+          </button>
+          <button 
+            type="button"
+            @click="resetForm"
+            class="reset-btn"
+          >
+            Zurücksetzen
+          </button>
+        </div>
+        
+        <div class="drinks-actions-row">
+          <button 
+            type="button"
+            @click="addDrink"
+            class="add-drink-btn"
+          >
+            + Getränk hinzufügen
+          </button>
+        </div>
+
+        <div class="drinks-list">
+          <DrinkCard
+            v-for="(drink, index) in selectedDrinks"
+            :key="index"
+            :drink="drink"
+            :index="index"
+            @remove="removeDrink(index)"
+            @update="updateDrink(index, $event)"
+          />
+        </div>
+      </div>
+
+    </form>
+
+    <!-- Toast Notification außerhalb des Haupt-Containers -->
+    <div v-if="toast.show" class="toast">
+      {{ toast.message }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useOrderStore } from '@/stores/orderStore'
+import { DrinkType, MateType, type Drink } from '@/types/order'
+import DrinkCard from '@/components/NewDrinkCard.vue'
+
+const router = useRouter()
+const orderStore = useOrderStore()
+
+// State
+const selectedDrinks = ref<Drink[]>([
+  {
+    drink_type: '' as DrinkType,
+    mate_type: '' as MateType,
+    quantity: 1,
+    notes: ''
+  }
+])
+
+const isSubmitting = ref(false)
+const toast = ref<{ show: boolean, message: string }>({ show: false, message: '' })
+
+// Computed properties
+const isConnected = computed(() => {
+  return orderStore.connectionStatus === 'connected'
+})
+
+const error = computed(() => orderStore.error)
+
+const validDrinks = computed(() => {
+  return selectedDrinks.value.filter(drink => 
+    drink.drink_type && drink.mate_type && drink.quantity > 0
+  )
+})
+
+const canSubmit = computed(() => {
+  return validDrinks.value.length > 0 && !isSubmitting.value
+})
+
+// Methods
+const addDrink = () => {
+  selectedDrinks.value.unshift({
+    drink_type: '' as DrinkType,
+    mate_type: '' as MateType,
+    quantity: 1,
+    notes: ''
+  })
+}
+
+const removeDrink = (index: number) => {
+  if (selectedDrinks.value.length > 1) {
+    selectedDrinks.value.splice(index, 1)
+  }
+}
+
+const updateDrink = (index: number, updatedDrink: Drink) => {
+  selectedDrinks.value[index] = updatedDrink
+}
+
+const resetForm = () => {
+  selectedDrinks.value = [{
+    drink_type: '' as DrinkType,
+    mate_type: '' as MateType,
+    quantity: 1,
+    notes: ''
+  }]
+}
+
+const submitOrder = async () => {
+  if (!canSubmit.value) return
+
+  isSubmitting.value = true
+  try {
+    const newOrder = await orderStore.createOrder({
+      drinks: validDrinks.value
+    })
+    toast.value = {
+      show: true,
+      message: `Bestellung erfolgreich! ID: ${newOrder.id}`
+    }
+    resetForm()
+    setTimeout(() => {
+      toast.value.show = false
+    }, 4000)
+  } catch (e) {
+    console.error('Fehler beim Erstellen der Bestellung:', e)
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+// Modal- und createNewOrder-Logik entfernt
+
+const closeSuccessModal = () => {
+  showSuccessModal.value = false
+}
+
+const createNewOrder = () => {
+  showSuccessModal.value = false
+  resetForm()
+}
+
+const retryConnection = () => {
+  orderStore.connectWebSocket()
+}
+
+const getConnectionTooltip = () => {
+  if (orderStore.connectionStatus === 'connected') {
+    return 'WebSocket verbunden'
+  } else if (orderStore.connectionStatus === 'connecting') {
+    return 'Verbindung wird hergestellt...'
+  } else {
+    return 'WebSocket getrennt'
+  }
+}
+
+// Lifecycle
+onMounted(() => {
+  orderStore.connectWebSocket()
+})
+
+onUnmounted(() => {
+  orderStore.disconnectWebSocket()
+})
+</script>
+
+<style scoped>
+.create-order-view {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32px;
+  padding-bottom: 16px;
+  border-bottom: 2px solid #e5e7eb;
+}
+
+.header h1 {
+  margin: 0;
+  font-size: 2rem;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.connection-status {
+  display: flex;
+  align-items: center;
+}
+
+.status-indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #ef4444;
+  transition: background-color 0.3s ease;
+}
+
+.status-indicator.connected {
+  background: #10b981;
+}
+
+.status-indicator.connecting {
+  background: #f59e0b;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.1);
+  }
+}
+
+.error-message {
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 24px;
+  text-align: center;
+}
+
+.error-message p {
+  margin: 0 0 12px 0;
+  color: #dc2626;
+  font-weight: 500;
+}
+
+.retry-btn {
+  background: #dc2626;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.retry-btn:hover {
+  background: #b91c1c;
+}
+
+.order-form {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.drinks-section h2 {
+  margin: 0 0 20px 0;
+  font-size: 1.5rem;
+  color: #1f2937;
+}
+
+.drinks-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.add-drink-btn {
+  background: #10b981;
+  color: white;
+  border: none;
+  padding: 16px 24px;
+  border-radius: 8px;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.add-drink-btn:hover {
+  background: #059669;
+  transform: translateY(-1px);
+}
+
+.drinks-actions-row {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  margin-bottom: 18px;
+  width: 100%;
+}
+.drinks-actions-row button {
+  flex: 1 1 0;
+  width: 100%;
+  min-width: 0;
+  border-radius: 8px;
+  font-size: 1rem;
+  min-height: 38px;
+  margin: 0;
+  display: block;
+  padding: 4px 8px;
+}
+
+.add-drink-row {
+  display: flex;
+  justify-content: center;
+  margin-top: 10px; /* Add some space above the add drink button */
+}
+
+.form-actions {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+}
+
+.submit-btn,
+.reset-btn {
+  padding: 16px 32px;
+  border-radius: 8px;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-width: 160px;
+}
+
+.submit-btn {
+  background: #3b82f6;
+  color: white;
+  border: none;
+}
+
+.submit-btn:hover:not(:disabled) {
+  background: #2563eb;
+  transform: translateY(-1px);
+}
+
+.submit-btn:disabled {
+  background: #9ca3af;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.reset-btn {
+  background: white;
+  color: #6b7280;
+  border: 2px solid #d1d5db;
+}
+
+.reset-btn:hover {
+  background: #f9fafb;
+  border-color: #9ca3af;
+}
+
+/* Modal Styles */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 12px;
+  padding: 32px;
+  text-align: center;
+  max-width: 400px;
+  width: 90%;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+}
+
+.success-icon {
+  font-size: 3rem;
+  margin-bottom: 16px;
+}
+
+.modal-content h3 {
+  margin: 0 0 12px 0;
+  color: #1f2937;
+  font-size: 1.5rem;
+}
+
+.modal-content p {
+  margin: 0 0 24px 0;
+  color: #6b7280;
+}
+
+.modal-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+}
+
+.modal-btn {
+  padding: 12px 24px;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 2px solid #d1d5db;
+  background: white;
+  color: #374151;
+}
+
+.modal-btn:hover {
+  background: #f9fafb;
+}
+
+.modal-btn.primary {
+  background: #3b82f6;
+  color: white;
+  border-color: #3b82f6;
+}
+
+.modal-btn.primary:hover {
+  background: #2563eb;
+  border-color: #2563eb;
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+  .create-order-view {
+    padding: 16px;
+  }
+  
+  .header {
+    flex-direction: column;
+    gap: 16px;
+    align-items: flex-start;
+  }
+  
+  .header h1 {
+    font-size: 1.5rem;
+  }
+  
+  .form-actions {
+    flex-direction: column;
+  }
+  
+  .submit-btn,
+  .reset-btn {
+    width: 100%;
+  }
+  
+  .modal-actions {
+    flex-direction: column;
+  }
+  
+  .modal-btn {
+    width: 100%;
+  }
+}
+
+.toast {
+  position: fixed;
+  top: 24px;
+  right: 24px;
+  min-width: 280px;
+  max-width: 350px;
+  background: #323232;
+  color: #fff;
+  padding: 16px 24px;
+  border-radius: 8px;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
+  z-index: 2000;
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  animation: toast-in 0.3s;
+}
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+</style> 

frontend/src/views/OrdersView.vue

@@ -0,0 +1,328 @@
+<template>
+  <div class="orders-view">
+    <div class="header">
+      <h1>Bestellübersicht</h1>
+      <div class="header-actions">
+        <div class="connection-status">
+          <span 
+            :class="['status-indicator', { 
+              'connected': isConnected,
+              'connecting': orderStore.connectionStatus === 'connecting'
+            }]"
+            :title="getConnectionTooltip()"
+          ></span>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="error" class="error-message">
+      <p>{{ error }}</p>
+      <button @click="retryConnection" class="retry-btn">
+        Erneut versuchen
+      </button>
+    </div>
+
+    <div v-if="isLoading && orders.length === 0" class="loading">
+      <div class="loading-spinner"></div>
+      <p>Lade Bestellungen...</p>
+    </div>
+
+    <div v-else-if="orders.length === 0" class="empty-state">
+      <div class="empty-icon">🍹</div>
+      <h3>Keine Bestellungen vorhanden</h3>
+      <p>Es sind noch keine Bestellungen eingegangen.</p>
+    </div>
+
+    <div v-else class="orders-container">
+      <div class="orders-stats">
+        <div class="stat-item">
+          <span class="stat-label">Offene Bestellungen:</span>
+          <span class="stat-value">{{ totalOrders }}</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-label">Letzte Aktualisierung:</span>
+          <span class="stat-value">{{ lastUpdate }}</span>
+        </div>
+      </div>
+
+      <div class="orders-list">
+        <OrderCard 
+          v-for="order in openOrders" 
+          :key="order.id" 
+          :order="order"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, computed } from 'vue'
+import { useOrderStore } from '@/stores/orderStore'
+import OrderCard from '@/components/OrderCard.vue'
+
+const orderStore = useOrderStore()
+
+// Computed properties
+const orders = computed(() => orderStore.orders)
+const openOrders = computed(() => orderStore.openOrders)
+const isLoading = computed(() => orderStore.isLoading)
+const error = computed(() => orderStore.error)
+const totalOrders = computed(() => orderStore.totalOrders)
+
+const isConnected = computed(() => {
+  return orderStore.connectionStatus === 'connected'
+})
+
+const lastUpdate = computed(() => {
+  return new Date().toLocaleTimeString('de-DE')
+})
+
+// Methods
+const refreshOrders = () => {
+  orderStore.requestAllOrders()
+}
+
+const retryConnection = () => {
+  orderStore.connectWebSocket()
+}
+
+const getConnectionTooltip = () => {
+  if (orderStore.connectionStatus === 'connected') {
+    return 'WebSocket verbunden'
+  } else if (orderStore.connectionStatus === 'connecting') {
+    return 'Verbindung wird hergestellt...'
+  } else {
+    return 'WebSocket getrennt'
+  }
+}
+
+// Lifecycle
+onMounted(() => {
+  orderStore.connectWebSocket()
+})
+
+onUnmounted(() => {
+  orderStore.disconnectWebSocket()
+})
+</script>
+
+<style scoped>
+.orders-view {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32px;
+  padding-bottom: 16px;
+  border-bottom: 2px solid #e5e7eb;
+}
+
+.header h1 {
+  margin: 0;
+  font-size: 2rem;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.refresh-btn {
+  background: #3b82f6;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.refresh-btn:hover:not(:disabled) {
+  background: #2563eb;
+  transform: translateY(-1px);
+}
+
+.refresh-btn:disabled {
+  background: #9ca3af;
+  cursor: not-allowed;
+}
+
+.connection-status {
+  display: flex;
+  align-items: center;
+}
+
+.status-indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #ef4444;
+  transition: background-color 0.3s ease;
+}
+
+.status-indicator.connected {
+  background: #10b981;
+}
+
+.status-indicator.connecting {
+  background: #f59e0b;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.1);
+  }
+}
+
+.error-message {
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 24px;
+  text-align: center;
+}
+
+.error-message p {
+  margin: 0 0 12px 0;
+  color: #dc2626;
+  font-weight: 500;
+}
+
+.retry-btn {
+  background: #dc2626;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.retry-btn:hover {
+  background: #b91c1c;
+}
+
+.loading {
+  text-align: center;
+  padding: 60px 20px;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #f3f4f6;
+  border-top: 4px solid #3b82f6;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 16px;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.loading p {
+  color: #6b7280;
+  font-size: 1rem;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 80px 20px;
+}
+
+.empty-icon {
+  font-size: 4rem;
+  margin-bottom: 16px;
+}
+
+.empty-state h3 {
+  margin: 0 0 8px 0;
+  color: #374151;
+  font-size: 1.5rem;
+}
+
+.empty-state p {
+  margin: 0;
+  color: #6b7280;
+  font-size: 1rem;
+}
+
+.orders-stats {
+  display: flex;
+  gap: 32px;
+  margin-bottom: 24px;
+  padding: 16px;
+  background: #f9fafb;
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.stat-label {
+  font-size: 0.875rem;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.stat-value {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.orders-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+@media (max-width: 768px) {
+  .orders-view {
+    padding: 16px;
+  }
+  
+  .header {
+    flex-direction: column;
+    gap: 16px;
+    align-items: flex-start;
+  }
+  
+  .header h1 {
+    font-size: 1.5rem;
+  }
+  
+  .orders-stats {
+    flex-direction: column;
+    gap: 16px;
+  }
+}
+</style> 

frontend/tsconfig.app.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

frontend/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

frontend/tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*",
+    "eslint.config.*"
+  ],
+  "compilerOptions": {
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

frontend/vite.config.ts

@@ -0,0 +1,18 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+})