@startuml
skin rose
skinparam backgroundColor #EEEBDC
left to right direction

package "Backend Server" as backend {
  [App.rs] --> [Router.rs]
  [App.rs] --> [Hooks.rs]
  [Router.rs] --> [Controllers.rs]
  [Router.rs] --> [DataViews.rs]
  [Controllers.rs] --> [DataModels.rs]
  [Controllers.rs] --> [Mailers.rs]
  [Controllers.rs] -r-> [DataViews.rs]
  [Controllers.rs] -l-> [APIProviders.rs]
  [DataModels.rs] -l-> [DatabaseEntities.rs]
}

package "Database" as db {
  [DatabaseEntities.rs] --> [DatabaseMigrations.rs]
}

package "Frontend Server" as frontend {
  [main.tsx] -u-> [routes]
  [routes] -u-> [components]
  [components] -u-> [hooks]
  [hooks] -u-> [store]
  [hooks] -u-> [api]
  [api] -r-> [types]
  [store] -l-> [types]
}


package "Mobile App" {
  [MainActivity.kt] -u-> [Fragments.kt]
  [Fragments.kt] -u-> [ViewModels.kt]
  [Fragments.kt] -r-> [Adapters.kt]
  [ViewModels.kt] -u-> [APIClient.kt]
  [APIClient.kt] -r-> [DataModels.kt]
  [DataModels.kt] -l-> [ViewModels.kt]
}

[App.rs] -u- [APIClient.kt] : Rest
[App.rs] -u- [api] : Rest

@enduml