@startuml "Frontend Klassendiagramm"

skinparam packageStyle rectangle
skinparam classAttributeIconSize 0
skinparam classFontSize 10
skinparam defaultFontSize 9
skinparam wrapWidth 100
skinparam nodesep 30
skinparam ranksep 30

top to bottom direction

title Frontend (Expo React Native)

' ===== SCREENS =====
package "Screens" #87CEEB {
    class LoginScreen
    class RegisterScreen
    class CalendarScreen
    class ChatScreen
    class EventDetailScreen
    class NoteScreen
}

' ===== COMPONENTS =====
package "Components" #FFA07A  {
    class EventCard
    class ProposedEventCard
    class EventConfirmDialog
}

' ===== SERVICES =====
package "Services" #90EE90 {
    class ApiClient {
        +get()
        +post()
        +put()
        +delete()
    }
    class AuthService
    class EventService
    class ChatService
}

' ===== STORES =====
package "Stores" #FFD700 {
    class AuthStore {
        ' +user
        ' +token
    }
    class EventsStore {
        ' +events
    }
    class ChatStore {
        ' +messages
    }
}

' ===== MODELS =====
package "Models (shared)" #D3D3D3 {
    class User
    class CalendarEvent
    class ChatMessage
}

' ===== RELATIONSHIPS =====

' Screens -> Services
LoginScreen --> AuthService
CalendarScreen --> EventService
ChatScreen --> ChatService
NoteScreen --> EventService

' Screens -> Components
CalendarScreen --> EventCard
ChatScreen --> ProposedEventCard
ChatScreen --> EventConfirmDialog

' Services -> ApiClient
AuthService --> ApiClient
EventService --> ApiClient
ChatService --> ApiClient

' Services/Screens -> Stores
AuthService --> AuthStore
EventService --> EventsStore
ChatScreen --> ChatStore

@enduml