chore(views): adjusted viewport heights and scrolls

fix(app): region dropdown z-index
chore(profile): added activity region
2026-05-03 05:18:11 +00:00 · 2026-02-23 22:03:49 +01:00 · 2026-02-23 21:36:51 +01:00 · 2026-02-23 21:35:41 +01:00 · 2026-02-23 21:25:46 +01:00 · 2026-02-20 02:13:52 +01:00
102 changed files with 4886 additions and 9866 deletions
@@ -0,0 +1,23 @@
+name: Build & Deploy to VPS
+
+on:
+  push:
+    branches:
+      - main
+
+env:
+  PROJECT_NAME: stacjownik-td2
+
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:    
+      - uses: actions/checkout@v3
+      - name: Build the app
+        run: yarn && yarn build
+      - name: Setup SSH key for connection with the server
+        run: |
+            mkdir -p ~/.ssh
+            echo "${{ secrets.VPS_SSH_PRIVATE_KEY }}" > ~/.ssh/id_rsa && chmod 600 ~/.ssh/id_rsa
+      - name: Send new files
+        run: rsync -avP -e "ssh -o StrictHostKeyChecking=no -i ~/.ssh/id_rsa -p 2022" ./dist/ ${{ secrets.VPS_USER }}@${{ secrets.VPS_HOST }}:/var/www/$PROJECT_NAME --delete
@@ -15,8 +15,8 @@ app.get('/api/getSceneries', (_, res) => {
  res.sendFile(path.join(cwd(), 'endpoints', 'getSceneries.json'));
 });

-app.get('/api/getVehicles', (_, res) => {
-  res.sendFile(path.join(cwd(), 'endpoints', 'getVehicles.json'));
+app.get('/api/getVehiclesData', (_, res) => {
+  res.sendFile(path.join(cwd(), 'endpoints', 'getVehiclesData.json'));
 });

 app.get('/api/getDonators', (_, res) => {
@@ -22,10 +22,64 @@

    <link rel="icon" href="favicon.ico" />

-    <link rel="stylesheet" href="fa/css/fontawesome.css" />
-    <link rel="stylesheet" href="fa/css/brands.css" />
-    <link rel="stylesheet" href="fa/css/regular.css" />
-    <link rel="stylesheet" href="fa/css/solid.css" />
+    <link rel="stylesheet" href="/fa/css/fontawesome.css" />
+    <link rel="stylesheet" href="/fa/css/brands.css" />
+    <link rel="stylesheet" href="/fa/css/regular.css" />
+    <link rel="stylesheet" href="/fa/css/solid.css" />
+
+    <!-- Preloads -->
+    <link rel="preload" href="fonts/Quicksand-Bold.woff2" as="font" type="font/woff2" crossorigin />
+
+    <link
+      rel="preload"
+      href="/fonts/Quicksand-Light.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+
+    <link
+      rel="preload"
+      href="/fonts/Quicksand-Medium.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+
+    <link
+      rel="preload"
+      href="/fonts/Quicksand-Regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+
+    <link
+      rel="preload"
+      href="/fonts/Quicksand-SemiBold.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+
+    <link rel="preload" as="image" href="/images/stacjownik-header-logo.svg" />
+    <link rel="preload" as="image" href="/images/icon-dispatcher.svg" />
+    <link rel="preload" as="image" href="/images/icon-train.svg" />
+    <link rel="preload" as="image" href="/images/icon-arrow-desc.svg" />
+    <link rel="preload" as="image" href="/images/icon-pojazdownik.svg" />
+    <link rel="preload" as="image" href="/images/icon-stats.svg" />
+    <link rel="preload" as="image" href="/images/icon-filter2.svg" />
+    <link rel="preload" as="image" href="/images/icon-user.svg" />
+    <link rel="preload" as="image" href="/images/icon-like.svg" />
+    <link rel="preload" as="image" href="/images/icon-gnr.svg" />
+    <link rel="preload" as="image" href="/images/icon-spawn.svg" />
+    <link rel="preload" as="image" href="/images/icon-timetableAll.svg" />
+    <link rel="preload" as="image" href="/images/icon-timetableUnconfirmed.svg" />
+    <link rel="preload" as="image" href="/images/icon-timetableConfirmed.svg" />
+    <link rel="preload" as="image" href="/images/icon-discord.png" />
+    
+    <link rel="prefetch" as="image" href="/images/icon-arrow-asc.svg" />
+    <link rel="prefetch" as="image" href="/images/icon-diamond.svg" />

    <!-- Static OpenGraph meta -->
    <meta name="description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" />
@@ -36,10 +90,12 @@
      property="og:description"
      content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2"
    />
+
    <meta
      property="og:image"
      content="https://raw.githubusercontent.com/Spythere/api/main/thumbnails/stacjownik.jpg"
    />
+
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:site_name" content="Stacjownik" />
@@ -1,6 +1,6 @@
 {
  "name": "stacjownik",
-  "version": "1.30.3",
+  "version": "1.31.1",
  "private": true,
  "type": "module",
  "scripts": {
@@ -17,7 +17,7 @@
  },
  "dependencies": {
    "core-js": "^3.42.0",
-    "dotenv": "^16.5.0",
+    "dotenv": "^17.2.2",
    "pinia": "^3.0.2",
    "sass": "^1.87.0",
    "showdown": "^2.1.0",
@@ -26,17 +26,17 @@
    "vue-router": "^4.4.0"
  },
  "devDependencies": {
-    "@types/node": "^22.15.15",
+    "@types/node": "^24.3.1",
    "@types/showdown": "^2.0.6",
    "@vite-pwa/assets-generator": "^1.0.0",
-    "@vitejs/plugin-vue": "^5.1.0",
-    "@vue/tsconfig": "^0.7.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
    "axios": "^1.9.0",
    "prettier": "^3.3.3",
    "typescript": "^5.5.4",
-    "vite": "^6.3.5",
+    "vite": "^7.1.4",
    "vite-plugin-pwa": "^1.0.0",
-    "vue-tsc": "^2.0.28"
+    "vue-tsc": "^3.0.6"
  },
  "browserslist": [
    "> 1%",
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-cz" viewBox="0 0 640 480">
+  <path fill="#fff" d="M0 0h640v240H0z"/>
+  <path fill="#d7141a" d="M0 240h640v240H0z"/>
+  <path fill="#11457e" d="M360 240 0 0v480z"/>
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-de" viewBox="0 0 640 480">
+  <path fill="#fc0" d="M0 320h640v160H0z"/>
+  <path fill="#000001" d="M0 0h640v160H0z"/>
+  <path fill="red" d="M0 160h640v160H0z"/>
+</svg>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-gb" viewBox="0 0 640 480">
+  <path fill="#012169" d="M0 0h640v480H0z"/>
+  <path fill="#FFF" d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z"/>
+  <path fill="#C8102E" d="m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z"/>
+  <path fill="#FFF" d="M241 0v480h160V0zM0 160v160h640V160z"/>
+  <path fill="#C8102E" d="M0 193v96h640v-96zM273 0v480h96V0z"/>
+</svg>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-it" viewBox="0 0 640 480">
+  <g fill-rule="evenodd" stroke-width="1pt">
+    <path fill="#fff" d="M0 0h640v480H0z"/>
+    <path fill="#009246" d="M0 0h213.3v480H0z"/>
+    <path fill="#ce2b37" d="M426.7 0H640v480H426.7z"/>
+  </g>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-pl" viewBox="0 0 640 480">
+  <g fill-rule="evenodd">
+    <path fill="#fff" d="M640 480H0V0h640z"/>
+    <path fill="#dc143c" d="M640 480H0V240h640z"/>
+  </g>
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ru" viewBox="0 0 640 480">
+  <path fill="#fff" d="M0 0h640v160H0z"/>
+  <path fill="#0039a6" d="M0 160h640v160H0z"/>
+  <path fill="#d52b1e" d="M0 320h640v160H0z"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-se" viewBox="0 0 640 480">
+  <path fill="#005293" d="M0 0h640v480H0z"/>
+  <path fill="#fecb00" d="M176 0v192H0v96h176v192h96V288h368v-96H272V0z"/>
+</svg>
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-sk" viewBox="0 0 640 480">
+  <path fill="#ee1c25" d="M0 0h640v480H0z"/>
+  <path fill="#0b4ea2" d="M0 0h640v320H0z"/>
+  <path fill="#fff" d="M0 0h640v160H0z"/>
+  <path fill="#fff" d="M233 370.8c-43-20.7-104.6-61.9-104.6-143.2 0-81.4 4-118.4 4-118.4h201.3s3.9 37 3.9 118.4S276 350 233 370.8"/>
+  <path fill="#ee1c25" d="M233 360c-39.5-19-96-56.8-96-131.4s3.6-108.6 3.6-108.6h184.8s3.5 34 3.5 108.6C329 303.3 272.5 341 233 360"/>
+  <path fill="#fff" d="M241.4 209c10.7.2 31.6.6 50.1-5.6 0 0-.4 6.7-.4 14.4s.5 14.4.5 14.4c-17-5.7-38.1-5.8-50.2-5.7v41.2h-16.8v-41.2c-12-.1-33.1 0-50.1 5.7 0 0 .5-6.7.5-14.4s-.5-14.4-.5-14.4c18.5 6.2 39.4 5.8 50 5.6v-25.9c-9.7 0-23.7.4-39.6 5.7 0 0 .5-6.6.5-14.4 0-7.7-.5-14.4-.5-14.4 15.9 5.3 29.9 5.8 39.6 5.7-.5-16.4-5.3-37-5.3-37s9.9.7 13.8.7 13.8-.7 13.8-.7-4.8 20.6-5.3 37c9.7.1 23.7-.4 39.6-5.7 0 0-.5 6.7-.5 14.4s.5 14.4.5 14.4a119 119 0 0 0-39.7-5.7v26z"/>
+  <path fill="#0b4ea2" d="M233 263.3c-19.9 0-30.5 27.5-30.5 27.5s-6-13-22.2-13c-11 0-19 9.7-24.2 18.8 20 31.7 51.9 51.3 76.9 63.4 25-12 57-31.7 76.9-63.4-5.2-9-13.2-18.8-24.2-18.8-16.2 0-22.2 13-22.2 13S253 263.3 233 263.3"/>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ua" viewBox="0 0 640 480">
+  <g fill-rule="evenodd" stroke-width="1pt">
+    <path fill="gold" d="M0 0h640v480H0z"/>
+    <path fill="#0057b8" d="M0 0h640v240H0z"/>
+  </g>
+</svg>
@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
+  <path d="M12 9v4" />
+  <path d="M12 17h.01" />
+</svg>
@@ -0,0 +1,60 @@
+<svg width="79" height="127" viewBox="0 0 79 127" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon-loading">
+<g id="Rectangle 37">
+<rect id="Rectangle 38" x="36.9999" y="79" width="6" height="16" fill="#FF0000"/>
+<rect id="Rectangle 40" x="36.9999" y="111" width="6" height="16" fill="#FF0000"/>
+<rect id="Rectangle 39" x="36.9999" y="95" width="6" height="16" fill="white"/>
+</g>
+<g id="Group 8">
+<path id="Vector 15" d="M59.5018 41.0003H23.0018C-1.49817 41.0003 -0.498171 79.5003 23.0018 79.5003H59.5018C83.0018 79.5003 84.0018 41.0003 59.5018 41.0003Z" fill="#3F3E3E"/>
+<g id="Group 51">
+<circle id="light-left" cx="22.9999" cy="60" r="9" fill="#FF1313" fill-opacity="1"/>
+
+<animate
+    attributeType="XML"
+    attributeName="opacity"
+    values="0.25;1;1;0.25;0.25"
+    dur="1s"
+    repeatCount="indefinite"
+/>
+</g>
+
+<g id="Group 51">
+<circle id="light-right" cx="57.9999" cy="60" r="9" fill="#FF1313" fill-opacity="1"/>
+
+<animate
+    attributeType="XML"
+    attributeName="opacity"
+    values="1;0.25;0.25;1;1"
+    dur="1s"
+    repeatCount="indefinite"
+/>
+</g>
+
+
+</g>
+<g id="Group 52">
+<rect id="Rectangle 36" x="37.9999" y="10" width="4" height="31" fill="#525252"/>
+<g id="Vector 23">
+<path id="Rectangle 28" d="M4.09756 32.3241L10.9579 29.2933L14.1908 36.611L7.33047 39.6418L3.42724 36.9932L4.09756 32.3241Z" fill="#FF0000"/>
+<path id="Rectangle 30" d="M10.9579 29.2933L20.105 25.2522L23.3379 32.5698L14.1908 36.611L12.5743 32.9521L10.9579 29.2933Z" fill="white"/>
+<path id="Rectangle 34" d="M20.105 25.2522L29.2521 21.211L32.485 28.5287L23.3379 32.5698L21.7214 28.911L20.105 25.2522Z" fill="#FF0000"/>
+<path id="Rectangle 35" d="M47.5463 13.1288L56.6934 9.08762L59.9263 16.4053L50.7792 20.4464L49.1627 16.7876L47.5463 13.1288Z" fill="#FF0000"/>
+<path id="Rectangle 31" d="M29.2521 21.211L38.3992 17.1699L41.6321 24.4876L32.485 28.5287L30.8685 24.8699L29.2521 21.211Z" fill="white"/>
+<path id="Rectangle 32" d="M38.3992 17.1699L47.5463 13.1288L50.7792 20.4464L41.6321 24.4876L40.0156 20.8287L38.3992 17.1699Z" fill="white"/>
+<path id="Rectangle 33" d="M56.6934 9.08762L65.8404 5.04649L69.0734 12.3642L59.9263 16.4053L58.3098 12.7465L56.6934 9.08762Z" fill="white"/>
+<path id="Rectangle 29" d="M73.1581 1.81359L65.8405 5.04649L69.0734 12.3642L76.391 9.13126L76.604 4.6642L73.1581 1.81359Z" fill="#FF0000"/>
+</g>
+<g id="Vector 24">
+<path id="Rectangle 28_2" d="M6.36567 3.47438L13.3598 6.18222L10.4714 13.6426L3.47731 10.9348L2.59012 6.30195L6.36567 3.47438Z" fill="#FF0000"/>
+<path id="Rectangle 30_2" d="M13.3597 6.18222L22.6852 9.79268L19.7969 17.2531L10.4714 13.6426L11.9156 9.91241L13.3597 6.18222Z" fill="white"/>
+<path id="Rectangle 34_2" d="M22.6853 9.79268L32.0108 13.4031L29.1224 20.8635L19.7969 17.2531L21.2411 13.5229L22.6853 9.79268Z" fill="#FF0000"/>
+<path id="Rectangle 35_2" d="M50.6617 20.6241L59.9872 24.2345L57.0989 31.6949L47.7734 28.0844L49.2176 24.3542L50.6617 20.6241Z" fill="#FF0000"/>
+<path id="Rectangle 31_2" d="M32.0107 13.4031L41.3362 17.0136L38.4479 24.474L29.1224 20.8635L30.5666 17.1333L32.0107 13.4031Z" fill="white"/>
+<path id="Rectangle 32_2" d="M41.3363 17.0136L50.6618 20.6241L47.7734 28.0844L38.4479 24.474L39.8921 20.7438L41.3363 17.0136Z" fill="white"/>
+<path id="Rectangle 33_2" d="M59.9872 24.2345L69.3127 27.845L66.4243 35.3054L57.0988 31.6949L58.543 27.9647L59.9872 24.2345Z" fill="white"/>
+<path id="Rectangle 29_2" d="M76.7731 30.7333L69.3127 27.845L66.4243 35.3054L73.8847 38.1937L77.194 35.1856L76.7731 30.7333Z" fill="#FF0000"/>
+</g>
+</g>
+</g>
+</svg>
@@ -1,4 +0,0 @@
-<svg width="39" height="23" viewBox="0 0 39 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="39" height="23" fill="#FF0F0F"/>
-<rect width="39" height="11.5" fill="white"/>
-</svg>
@@ -9,11 +9,11 @@

    <Tooltip />

-    <AppHeader :current-lang="store.currentLocale" @change-lang="changeLang" />
+    <AppHeader />

    <main class="app_main">
      <router-view v-slot="{ Component }">
-        <keep-alive exclude="SceneryView">
+        <keep-alive>
          <component :is="Component" :key="$route.name" />
        </keep-alive>
      </router-view>
@@ -50,6 +50,7 @@ import AppWelcomeCard from './components/App/AppWelcomeCard.vue';

 const STORAGE_VERSION_KEY = 'app_version';
 const WELCOME_CARD_SEEN_KEY = 'welcome_card_seen';
+const MIGRATE_INFO_CARD_SEEN_KEY = 'migrate_info_card_seen';

 export default defineComponent({
  components: {
@@ -71,7 +72,7 @@ export default defineComponent({
    isUpdateCardOpen: false,
    isWelcomeCardOpen: false,

-    isOnProductionHost: location.hostname == 'stacjownik-td2.web.app'
+    isOnProductionHost: /(stacjownik-td2)(\.web\.app|\.spythere\.eu)/.test(location.hostname)
  }),

  created() {
@@ -91,6 +92,7 @@ export default defineComponent({
      this.setupOfflineHandling();
      this.checkAppVersion();
      this.handleQueries();
+      this.handleMigrateInfo();

      this.apiStore.setupAPIData();
    },
@@ -101,6 +103,10 @@ export default defineComponent({
      if (query.get('welcomeCard') == '1') {
        this.isWelcomeCardOpen = true;
      }
+
+      if (query.get('migrateCard') == '1') {
+        this.store.isMigrateInfoCardOpen = true;
+      }
    },

    async checkAppVersion() {
@@ -159,18 +165,18 @@ export default defineComponent({
      this.apiStore.connectToAPI();
    },

-    changeLang(lang: string) {
-      this.$i18n.locale = lang;
-      this.store.currentLocale = lang;
+    handleMigrateInfo() {
+      if (location.hostname != 'stacjownik-td2.web.app') return;
+      if (StorageManager.getBooleanValue(MIGRATE_INFO_CARD_SEEN_KEY) === true) return;

-      StorageManager.setStringValue('lang', lang);
+      this.store.isMigrateInfoCardOpen = true;
    },

    loadLang() {
      const storageLang = StorageManager.getStringValue('lang');

      if (storageLang) {
-        this.changeLang(storageLang);
+        this.store.changeLocale(storageLang);
        return;
      }

@@ -179,7 +185,7 @@ export default defineComponent({
      const naviLanguage = window.navigator.language.toString();

      if (!naviLanguage.startsWith('pl')) {
-        this.changeLang('en');
+        this.store.changeLocale('en');
        return;
      }
    },
@@ -187,6 +193,11 @@ export default defineComponent({
    closeWelcomeCard() {
      this.isWelcomeCardOpen = false;
      StorageManager.setBooleanValue(WELCOME_CARD_SEEN_KEY, true);
+    },
+
+    closeMigrateInfoCard() {
+      this.store.isMigrateInfoCardOpen = false;
+      StorageManager.setBooleanValue(MIGRATE_INFO_CARD_SEEN_KEY, true);
    }
  }
 });
@@ -194,6 +205,7 @@ export default defineComponent({

 <style lang="scss">
@use './styles/animations';
+@use './styles/global';

 // APP
 #app {
@@ -7,13 +7,6 @@
      v{{ version }}{{ isOnProductionHost ? '' : 'dev' }}
    </button>

-    <br />
-    <a href="https://discord.gg/x2mpNN3svk">
-      <img src="/images/icon-discord.png" alt="discord logo icon" />&nbsp;<b class="text--discord">
-        {{ $t('footer.discord') }}
-      </b>
-    </a>
-
    <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
  </footer>
 </template>
@@ -1,18 +1,6 @@
 <template>
  <header class="app_header">
    <div class="header_container">
-      <div class="header_icons">
-        <span class="icons-top">
-          <img
-            src="/images/icon-pl.svg"
-            alt="icon-pl"
-            @click="changeLang('en')"
-            v-if="currentLang == 'pl'"
-          />
-          <img src="/images/icon-en.jpg" alt="icon-en" @click="changeLang('pl')" v-else />
-        </span>
-      </div>
-
      <div class="header_body">
        <StatusIndicator />

@@ -76,27 +64,12 @@ import RegionDropdown from '../Global/RegionDropdown.vue';
 export default defineComponent({
  components: { StatusIndicator, Clock, RegionDropdown },

-  emits: ['changeLang'],
-
-  props: {
-    currentLang: {
-      type: String,
-      required: true
-    }
-  },
-
  setup() {
    return {
      store: useMainStore()
    };
  },

-  methods: {
-    changeLang(lang: string) {
-      this.$emit('changeLang', lang);
-    }
-  },
-
  computed: {
    onlineTrainsCount() {
      return this.store.trainList.filter((train) => train.region == this.store.region.id).length;
@@ -111,7 +84,7 @@ export default defineComponent({
    isChristmas() {
      const date = new Date();

-      return date.getUTCMonth() == 11 && date.getUTCDate() >= 20 && date.getUTCDate() <= 31;
+      return date.getUTCMonth() == 11 && date.getUTCDate() >= 6 && date.getUTCDate() <= 31;
    }
  }
 });
@@ -141,7 +114,7 @@ export default defineComponent({

    border-radius: 0 0 1em 1em;

-    @include responsive.smallScreen{
+    @include responsive.smallScreen {
      position: relative;
      margin-top: 0.5em;
    }
@@ -180,20 +153,12 @@ export default defineComponent({

    padding: 0.5em;

-    @include responsive.smallScreen{
+    @include responsive.smallScreen {
      transform: translateX(85%);
    }
  }
 }

-// ICONS
-.icons-top {
-  img {
-    width: 2.5em;
-    cursor: pointer;
-  }
-}
-
 // COUNTER
 .info_counter {
  display: flex;
@@ -4,12 +4,12 @@
      <h1>{{ $t('welcome.title') }}</h1>

      <div class="language-select">
-        <button :data-active="$i18n.locale == 'pl'" @click="changeLang('pl')">
-          <img src="/images/icon-pl.svg" alt="" width="45" />
+        <button :data-active="$i18n.locale == 'pl'" @click="store.changeLocale('pl')">
+          <FlagIcon :language-id="0" width="2.5em" />
        </button>

-        <button :data-active="$i18n.locale == 'en'" @click="changeLang('en')">
-          <img src="/images/icon-en.jpg" alt="" width="45" />
+        <button :data-active="$i18n.locale == 'en'" @click="store.changeLocale('en')">
+          <FlagIcon :language-id="1" width="2.5em" />
        </button>
      </div>

@@ -114,12 +114,10 @@
 </template>

 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import Card from '../Global/Card.vue';
 import { useMainStore } from '../../store/mainStore';
-import StorageManager from '../../managers/storageManager';
+import FlagIcon from '../Global/FlagIcon.vue';

-const i18n = useI18n();
 const store = useMainStore();

 const emit = defineEmits(['toggleCard']);
@@ -130,13 +128,6 @@ const props = defineProps({
 function toggleCard(state: boolean) {
  emit('toggleCard', state);
 }
-
-function changeLang(localeName: string) {
-  i18n.locale.value = localeName;
-  store.currentLocale = localeName;
-
-  StorageManager.setStringValue('lang', localeName);
-}
 </script>

 <style lang="scss" scoped>
@@ -167,7 +158,7 @@ a.link {
  justify-content: center;
  margin: 0.5em 0;

-  button[data-active='false'] img {
+  button[data-active='false'] ::v-deep(img) {
    opacity: 0.5;
  }
 }
@@ -0,0 +1,94 @@
+<template>
+  <Card :is-open="isOpen" @toggle-card="toggleCard">
+    <div class="body-content">
+      <div class="content-top">
+        <img src="/images/icon-loading.svg" alt="loading" height="125" />
+        <h1>{{ t('migrate-info.header-text') }}</h1>
+      </div>
+
+      <div>
+        <p v-html="t('migrate-info.paragraph-1-html')"></p>
+
+        <p>
+          <a class="new-link" href="https://stacjownik-td2.spythere.eu/" target="_blank">
+            {{ t('migrate-info.paragraph-2-link-text') }}
+          </a>
+        </p>
+
+        <p>
+          {{ t('migrate-info.paragraph-3-text') }}
+        </p>
+
+        <p class="info-bottom" v-html="t('migrate-info.paragraph-4-html')"></p>
+      </div>
+
+      <div class="content-actions">
+        <button class="btn btn--action" @click="toggleCard">PRZYJĄŁEM!</button>
+      </div>
+    </div>
+  </Card>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+import Card from '../Global/Card.vue';
+
+const { t } = useI18n();
+
+defineProps({
+  isOpen: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const emit = defineEmits(['toggleCard']);
+
+function toggleCard() {
+  emit('toggleCard');
+}
+</script>
+
+<style lang="scss" scoped>
+.body-content {
+  max-width: 800px;
+  min-height: 500px;
+  padding: 1em 0.5em;
+
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  gap: 0.5em;
+
+  text-align: center;
+  font-size: 1.1em;
+}
+
+p {
+  padding: 0.5em 0;
+}
+
+a.new-link {
+  font-size: 1.2em;
+  color: var(--clr-primary);
+  color: transparent;
+
+  background: var(--clr-primary);
+  background: linear-gradient(90deg, var(--clr-primary), #ffffff);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  text-shadow: var(--clr-primary) 0 0 10px;
+}
+
+.info-bottom {
+  font-size: 0.9em;
+  color: #ccc;
+}
+
+.content-actions {
+  display: flex;
+  justify-content: center;
+  font-size: 1.2em;
+}
+</style>
@@ -1,6 +1,6 @@
 <template>
  <Card :is-open="isUpdateCardOpen" @toggle-card="toggleCard(false)">
-    <div class="content">
+    <div class="content" tabindex="0" ref="content">
      <h1 style="margin-bottom: 0.5em">🚀 {{ $t('update.title') }}</h1>

      <div class="features-body" v-if="htmlChangelog != ''" v-html="htmlChangelog"></div>
@@ -13,7 +13,14 @@
      <p class="bottom-info">
        {{ $t('update.info-1') }}
        <br />
-        <span v-html="$t('update.info-2')"></span>
+
+        <i18n-t keypath="update.info-2">
+          <template v-slot:link>
+            <a href="https://github.com/Spythere/stacjownik" target="_blank">{{
+              $t('update.info-2-link-text')
+            }}</a>
+          </template>
+        </i18n-t>
      </p>
    </div>
  </Card>
@@ -51,7 +58,7 @@ export default defineComponent({
  watch: {
    isUpdateCardOpen(val: boolean) {
      this.$nextTick(() => {
-        if (val) (this.$refs['confirm-btn'] as HTMLElement).focus();
+        if (val) (this.$refs['content'] as HTMLElement).focus();
      });
    }
  },
@@ -79,13 +86,18 @@ export default defineComponent({
 }

 ::v-deep(h2) {
-  padding: 0.25em 0;
+  margin-top: 1em;
+  padding: 0.5em 0;
  border-bottom: 1px solid #aaa;
 }

+::v-deep(h3) {
+  padding: 0.5em 0;
+}
+
 ::v-deep(ul) {
-  list-style: initial;
-  padding: 1em;
+  list-style: disc;
+  padding: 0 1.5em;
  line-height: 1.5em;
 }

@@ -105,7 +117,7 @@ export default defineComponent({
 }

 button {
-  margin: 0 auto;
+  margin: 0.5em auto;
  padding: 0.5em 0.75em;
  font-size: 1.1em;
 }
@@ -117,5 +129,6 @@ p.bottom-info {

 a {
  text-decoration: underline;
+  color: white;
 }
 </style>
@@ -1,37 +1,41 @@
 <template>
-    <div class="driver-top-actions">
-        <div class="actions-container">
-            <div class="actions actions-left">
-                <button class="a-button btn--filled btn--image" @click="routerReturn">
-                    <img src="/images/icon-back.svg" alt="train icon" />
-                    <span>
-                        {{ t('trains.driver-return-link') }}
-                    </span>
-                </button>
-            </div>
+  <div class="driver-top-actions">
+    <div class="actions-container">
+      <div class="actions actions-left">
+        <button class="a-button btn--filled btn--image" @click="routerReturn">
+          <img src="/images/icon-back.svg" alt="train icon" />
+          <span>
+            {{ t('trains.driver-return-link') }}
+          </span>
+        </button>
+      </div>

-            <div class="actions actions-right">
-                <a class="a-button btn--filled btn--image" :href="`https://srjp-td2.web.app/?id=${chosenTrain.id}`"
-                    target="_blank">
-                    <span class="hidable">
-                        {{ t('trains.driver-srjp-link') }}
-                    </span>
+      <div class="actions actions-right">
+        <a
+          class="a-button btn--filled btn--image"
+          :href="`https://srjp-td2.web.app/?id=${chosenTrain.id}`"
+          target="_blank"
+        >
+          <span class="hidable">
+            {{ t('trains.driver-srjp-link') }}
+          </span>

-                    <img src="/images/icon-srjp.svg" alt="srjp icon" />
-                </a>
+          <img src="/images/icon-srjp.svg" alt="srjp icon" />
+        </a>

-                <router-link :to="`/journal/timetables?search-driver=${chosenTrain.driverName}`"
-                    class="a-button btn--filled btn--image">
-                    <span class="hidable">
-                        {{ t('trains.driver-journal-link') }}
-                    </span>
-
-                    <img src="/images/icon-train.svg" alt="train icon" />
-                </router-link>
-            </div>
-        </div>
+        <router-link
+          :to="`/profile?playerId=${chosenTrain.driverId}`"
+          class="a-button btn--filled btn--image"
+        >
+          <span class="hidable">
+            {{ t('trains.driver-profile-link') }}
+          </span>

+          <img src="/images/icon-user.svg" alt="user icon" />
+        </router-link>
+      </div>
    </div>
+  </div>
 </template>

 <script setup lang="ts">
@@ -44,42 +48,40 @@ const router = useRouter();
 const { t } = useI18n();

 defineProps({
-    chosenTrain: {
-        type: Object as PropType<Train>,
-        required: true
-    }
+  chosenTrain: {
+    type: Object as PropType<Train>,
+    required: true
+  }
 });

 function routerReturn() {
-    router.back();
+  router.back();
 }
 </script>

-
 <style lang="scss" scoped>
@use '../../styles/responsive';

-
 .actions-container {
-    display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
-    gap: 0.5em;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 0.5em;
 }

 .actions {
-    display: flex;
-    gap: 0.5em;
+  display: flex;
+  gap: 0.5em;
 }

-.actions-container>.actions>.a-button {
-    padding: 0.5em;
-    border-radius: 0.5em 0.5em 0 0;
+.actions-container > .actions > .a-button {
+  padding: 0.5em;
+  border-radius: 0.5em 0.5em 0 0;
 }

@include responsive.smallScreen {
-    span.hidable {
-        display: none;
-    }
+  span.hidable {
+    display: none;
+  }
 }
-</style>
+</style>
@@ -205,7 +205,7 @@ const availableCategories = computed(() => {
  for (const stockName of stockList) {
    const [vehicleName, ...cargoList] = stockName.split(':');

-    const vehicleData = apiStore.vehiclesData?.find((v) => v.name == vehicleName);
+    const vehicleData = apiStore.vehiclesData?.vehicles.find((v) => v.name == vehicleName);

    if (!vehicleData) continue;

@@ -1,23 +0,0 @@
-<template>
-  <button class="action-btn btn--filled">
-    <div class="button_content">
-      <slot></slot>
-    </div>
-  </button>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({});
-</script>
-
-<style lang="scss">
-@use '../../styles/responsive';
-
-.button_content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-</style>
@@ -81,13 +81,8 @@ export default defineComponent({

  background-color: #1a1a1a;
  box-shadow: 0 0 15px 10px #0e0e0e;
+  border-radius: 1em;

  overflow: auto;
 }
-
-@include responsive.smallScreen{
-  .card {
-    align-items: flex-start;
-  }
-}
 </style>
@@ -0,0 +1,43 @@
+<template>
+  <div class="flag-icon">
+    <img
+      :src="languageFlagSrc"
+      alt="language flag"
+      :style="{
+        width: width
+      }"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { getLanguageNameById } from '../../utils/languageUtils';
+
+const props = defineProps({
+  languageId: {
+    type: Number,
+    required: true
+  },
+
+  width: {
+    type: String
+  }
+});
+
+const languageFlagSrc = computed(
+  () => `/images/flags/${getLanguageNameById(props.languageId)}.svg`
+);
+</script>
+
+<style scoped>
+.flag-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.flag-icon img {
+  vertical-align: middle;
+}
+</style>
@@ -160,7 +160,7 @@ ul.options {

  height: auto;

-  z-index: 100;
+  z-index: 150;
  width: 100%;

  font-size: 0.9em;
@@ -9,7 +9,7 @@
      <img
        v-for="(thumbnailImage, imageIndex) in images"
        :src="`https://stacjownik.spythere.eu/static/thumbnails/${thumbnailImage}.png`"
-        height="60"
+        height="70"
        loading="lazy"
        data-tooltip-type="VehiclePreviewTooltip"
        :data-tooltip-content="vehicleString"
@@ -20,7 +20,7 @@
  </div>
 </template>

-<script setup lang="ts">
+<script setup lang="ts">    
 import { computed, PropType, Ref, ref } from 'vue';

 const props = defineProps({
@@ -56,16 +56,17 @@ function onImageLoad() {
  transition: opacity 100ms ease-in-out;

  &[data-load-status='loading'] {
-    min-height: 60px;
+    min-height: 70px;
    min-width: 200px;
  }
 }

 .stock-text {
+  max-width: 90%;
  text-align: center;
  color: #aaa;
-  font-size: 0.9em;
-  margin-bottom: 0.25em;
+  font-size: 0.85em;
+  margin: 0 auto;
  padding: 0.25em 0;
 }

@@ -1,6 +1,6 @@
 <template>
  <section class="daily-stats">
-    <span :data-active="statsStatus">
+    <span :data-active="apiStore.dataStatuses.dailyStatsData">
      <h3>
        {{ $t('journal.daily-stats.title') }}
        <b class="text--primary">{{ new Date().toLocaleDateString($i18n.locale) }}</b>
@@ -8,11 +8,11 @@

      <hr class="header-separator" />

-      <b v-if="statsStatus == Status.Data.Loading">
+      <b v-if="apiStore.dataStatuses.dailyStatsData == Status.Data.Loading">
        {{ $t('app.loading') }}
      </b>

-      <b class="text--error" v-else-if="statsStatus == Status.Data.Error">
+      <b class="text--error" v-else-if="apiStore.dataStatuses.dailyStatsData == Status.Data.Error">
        {{ $t('journal.stats-error') }}
      </b>

@@ -20,42 +20,48 @@
        {{ $t('journal.daily-stats.info') }}
      </b>

-      <div v-else>
+      <div v-else-if="apiStore.dailyStatsData">
        <ul class="stats-list">
-          <li v-if="stats.totalTimetables">
+          <li v-if="apiStore.dailyStatsData.totalTimetables">
            <i18n-t keypath="journal.daily-stats.total">
              <template #count>
                <b class="text--primary">
-                  {{ stats.totalTimetables }}
-                  {{ $t('journal.daily-stats.count', stats.totalTimetables) }}
+                  {{ apiStore.dailyStatsData.totalTimetables }}
+                  {{ $t('journal.daily-stats.count', apiStore.dailyStatsData.totalTimetables) }}
                </b>
              </template>

              <template #distance>
-                <b class="text--primary"> {{ stats.distanceSum?.toFixed(2) }} km</b>
+                <b class="text--primary">
+                  {{ apiStore.dailyStatsData.distanceSum?.toFixed(2) }} km</b
+                >
              </template>
            </i18n-t>
          </li>

-          <li v-if="stats.maxTimetable">
+          <li v-if="apiStore.dailyStatsData.maxTimetable">
            <i18n-t keypath="journal.daily-stats.longest">
              <template #id>
-                <router-link :to="`/journal/timetables?search-train=%23${stats.maxTimetable.id}`">
-                  <b>{{ stats.maxTimetable.id }}</b>
+                <router-link
+                  :to="`/journal/timetables?search-train=%23${apiStore.dailyStatsData.maxTimetable.id}`"
+                >
+                  <b>{{ apiStore.dailyStatsData.maxTimetable.id }}</b>
                </router-link>
              </template>
              <template #author>
                <router-link
-                  :to="`/journal/timetables?search-dispatcher=${stats.maxTimetable.authorName}`"
+                  :to="`/journal/timetables?search-dispatcher=${apiStore.dailyStatsData.maxTimetable.authorName}`"
                >
-                  <b>{{ stats.maxTimetable.authorName }}</b>
+                  <b>{{ apiStore.dailyStatsData.maxTimetable.authorName }}</b>
                </router-link>
              </template>
              <template #driver>
-                <b class="text--primary">{{ stats.maxTimetable.driverName }}</b>
+                <b class="text--primary">{{ apiStore.dailyStatsData.maxTimetable.driverName }}</b>
              </template>
              <template #distance>
-                <b class="text--primary">{{ stats.maxTimetable.routeDistance }} km</b>
+                <b class="text--primary"
+                  >{{ apiStore.dailyStatsData.maxTimetable.routeDistance }} km</b
+                >
              </template>
            </i18n-t>
          </li>
@@ -101,35 +107,37 @@
            </i18n-t>
          </li>

-          <li v-if="stats.longestDuties.length > 0">
+          <li v-if="apiStore.dailyStatsData.longestDuties.length > 0">
            <i18n-t keypath="journal.daily-stats.longest-duties">
              <template #dispatcher>
                <router-link
-                  :to="`/journal/dispatchers?search-dispatcher=${stats.longestDuties[0].name}`"
+                  :to="`/journal/dispatchers?search-dispatcher=${apiStore.dailyStatsData.longestDuties[0].name}`"
                >
-                  <b>{{ stats.longestDuties[0].name }}</b>
+                  <b>{{ apiStore.dailyStatsData.longestDuties[0].name }}</b>
                </router-link>
              </template>

-              <template #station>{{ stats.longestDuties[0].station }}</template>
+              <template #station>{{ apiStore.dailyStatsData.longestDuties[0].station }}</template>

              <template #duration>
-                {{ calculateDuration(stats.longestDuties[0].duration) }}
+                {{ humanizeDuration(apiStore.dailyStatsData.longestDuties[0].duration) }}
              </template>
            </i18n-t>
          </li>

-          <li v-if="stats.mostActiveDrivers.length > 0">
+          <li v-if="apiStore.dailyStatsData.mostActiveDrivers.length > 0">
            <i18n-t keypath="journal.daily-stats.most-active-driver">
              <template #driver>
                <router-link
-                  :to="`/journal/timetables?search-driver=${stats.mostActiveDrivers[0].name}`"
+                  :to="`/journal/timetables?search-driver=${apiStore.dailyStatsData.mostActiveDrivers[0].name}`"
                >
-                  <b>{{ stats.mostActiveDrivers[0].name }}</b>
+                  <b>{{ apiStore.dailyStatsData.mostActiveDrivers[0].name }}</b>
                </router-link>
              </template>
              <template #distance>
-                <b class="text--primary">{{ stats.mostActiveDrivers[0].distance.toFixed(2) }} km</b>
+                <b class="text--primary"
+                  >{{ apiStore.dailyStatsData.mostActiveDrivers[0].distance.toFixed(2) }} km</b
+                >
              </template>
            </i18n-t>
          </li>
@@ -151,7 +159,11 @@
          >
            <span>{{ $t(`journal.daily-stats.${key}`) }}</span>
            <span>
-              {{ Object.entries(stats.globalDiff).find(([k, v]) => k == key)?.[1] || '--' }}
+              {{
+                Object.entries(apiStore.dailyStatsData.globalDiff).find(
+                  ([k, v]) => k == key
+                )?.[1] || '--'
+              }}
            </span>
          </span>
        </div>
@@ -160,76 +172,25 @@
  </section>
 </template>

-<script lang="ts">
-import { defineComponent } from 'vue';
-import dateMixin from '../../mixins/dateMixin';
-
-import { API } from '../../typings/api';
-import { Status } from '../../typings/common';
+<script lang="ts" setup>
+import { computed, onMounted } from 'vue';
 import { useApiStore } from '../../store/apiStore';
+import { Status } from '../../typings/common';
+import { humanizeDuration } from '../../composables/time';

-export default defineComponent({
-  name: 'journal-daily-stats',
+onMounted(() => {
+  apiStore.fetchDailyStats();
+});

-  mixins: [dateMixin],
+const apiStore = useApiStore();

-  data() {
-    return {
-      Status,
-      statsStatus: Status.Data.Loading,
-      intervalId: -1,
+const topDispatchers = computed(() => {
+  if (!apiStore.dailyStatsData || apiStore.dailyStatsData.mostActiveDispatchers.length == 0)
+    return [];

-      stats: {} as API.DailyStats.Response,
-      apiStore: useApiStore()
-    };
-  },
+  const maxCount = apiStore.dailyStatsData.mostActiveDispatchers[0].count;

-  activated() {
-    this.startFetchingDailyStats();
-  },
-
-  deactivated() {
-    this.stopFetchingDailyStats();
-  },
-
-  computed: {
-    topDispatchers() {
-      if (this.stats.mostActiveDispatchers.length == 0) return [];
-      const maxCount = this.stats.mostActiveDispatchers[0].count;
-
-      return this.stats.mostActiveDispatchers.filter((disp) => disp.count === maxCount);
-    }
-  },
-
-  methods: {
-    async fetchDailyTimetableStats() {
-      try {
-        const res: API.DailyStats.Response = await (
-          await this.apiStore.client!.get('api/getDailyStats')
-        ).data;
-
-        this.stats = res;
-
-        this.statsStatus = Status.Data.Loaded;
-      } catch (error) {
-        console.error('Ups! Wystąpił błąd podczas pobierania statystyk rozkładów jazdy...');
-        this.statsStatus = Status.Data.Error;
-      }
-    },
-
-    startFetchingDailyStats() {
-      this.fetchDailyTimetableStats();
-
-      if (this.intervalId != -1) return;
-
-      this.intervalId = window.setInterval(this.fetchDailyTimetableStats, 60000);
-    },
-
-    stopFetchingDailyStats() {
-      clearInterval(this.intervalId);
-      this.intervalId = -1;
-    }
-  }
+  return apiStore.dailyStatsData.mostActiveDispatchers.filter((disp) => disp.count === maxCount);
 });
 </script>

@@ -265,7 +226,7 @@ ul.stats-list {
  gap: 0.5em;
 }

-@include responsive.smallScreen{
+@include responsive.smallScreen {
  h3 {
    text-align: center;
  }
@@ -1,23 +1,22 @@
 <template>
  <li class="dispatcher-history-entry">
    <div class="entry-info">
-      <span>
-        <span>
+      <span class="entry-info-left">
+        <div class="station-info">
          <router-link :to="`/journal/dispatchers?search-station=${entry.stationName}`">
            <b>{{ entry.stationName }}</b>
          </router-link>

          <b class="text--grayed"> #{{ entry.stationHash }}</b>
-        </span>
-        &bull;
-        <b
-          v-if="entry.dispatcherLevel !== null"
-          class="level-badge dispatcher"
-          :style="calculateExpStyle(entry.dispatcherLevel, entry.dispatcherIsSupporter)"
-        >
-          {{ entry.dispatcherLevel >= 2 ? entry.dispatcherLevel : 'L' }}
-        </b>
-        <b style="margin-left: 5px">
+          &bull;
+          <b
+            v-if="entry.dispatcherLevel !== null"
+            class="level-badge dispatcher"
+            :style="calculateExpStyle(entry.dispatcherLevel, entry.dispatcherIsSupporter)"
+          >
+            {{ entry.dispatcherLevel >= 2 ? entry.dispatcherLevel : 'L' }}
+          </b>
+
          <span
            v-if="apiStore.donatorsData.includes(entry.dispatcherName)"
            data-tooltip-type="DonatorTooltip"
@@ -37,7 +36,11 @@
          >
            {{ entry.dispatcherName }}
          </router-link>
-        </b>
+
+          <span class="dispatcher-language" v-if="entry.dispatcherLanguageId != null">
+            <FlagIcon :language-id="entry.dispatcherLanguageId" width="1.75em" />
+          </span>
+        </div>

        <div>
          <span v-if="entry.timestampTo">
@@ -118,6 +121,7 @@ import dateMixin from '../../../mixins/dateMixin';
 import styleMixin from '../../../mixins/styleMixin';
 import { useApiStore } from '../../../store/apiStore';
 import StationStatusBadge from '../../Global/StationStatusBadge.vue';
+import FlagIcon from '../../Global/FlagIcon.vue';

 export default defineComponent({
  props: {
@@ -125,7 +129,7 @@ export default defineComponent({
    showExtraInfo: { type: Boolean, required: true }
  },

-  components: { StationStatusBadge },
+  components: { StationStatusBadge, FlagIcon },
  mixins: [dateMixin, styleMixin],
  emits: ['toggleShowExtraInfo'],

@@ -164,6 +168,11 @@ export default defineComponent({
  padding: 1em;
 }

+.dispatcher-language {
+  display: inline-block;
+  vertical-align: middle;
+}
+
 .entry-info {
  display: flex;
  justify-content: space-between;
@@ -185,6 +194,15 @@ export default defineComponent({
  margin-top: 1em;
 }

+.station-info {
+  display: flex;
+  flex-wrap: wrap;
+  text-align: center;
+  align-items: center;
+  gap: 0.25em;
+  font-weight: bold;
+}
+
 .status-list {
  display: flex;
  overflow: auto;
@@ -198,11 +216,15 @@ export default defineComponent({
  border-radius: 1em;
 }

-@include responsive.smallScreen{
+@include responsive.smallScreen {
  .entry-info {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
+
+  .station-info {
+    justify-content: center;
+  }
 }
 </style>
@@ -1,85 +0,0 @@
-<template>
-  <div class="journal-stats dispatcher" v-if="dispatcherName && stats">
-    <span class="loading" v-if="!stats.issuedTimetables && !stats.services">
-      {{ $t('journal.dispatcher-stats.empty') }}
-    </span>
-
-    <span v-else>
-      <h3>
-        <i18n-t keypath="journal.dispatcher-stats.title">
-          <template #name>
-            <span class="text--primary">{{ dispatcherName.toUpperCase() }}</span>
-          </template>
-        </i18n-t>
-      </h3>
-
-      <hr class="header-separator" />
-
-      <div class="info-stats">
-        <span class="badge stat-badge" v-if="stats.services">
-          <span>{{ $t('journal.dispatcher-stats.services-count') }}</span>
-          <span>{{ stats.services.count }}</span>
-        </span>
-
-        <span class="badge stat-badge" v-if="stats.services">
-          <span>{{ $t('journal.dispatcher-stats.service-max') }}</span>
-          <span>{{ calculateDuration(stats.services.durationMax) }}</span>
-        </span>
-
-        <span class="badge stat-badge" v-if="stats.services">
-          <span>{{ $t('journal.dispatcher-stats.service-avg') }}</span>
-          <span>{{ calculateDuration(stats.services.durationAvg) }}</span>
-        </span>
-      </div>
-
-      <hr class="section-separator" v-if="stats.issuedTimetables" />
-
-      <div class="info-stats" v-if="stats.issuedTimetables">
-        <span class="badge stat-badge">
-          <span>{{ $t('journal.dispatcher-stats.timetables-count') }}</span>
-          <span>{{ stats.issuedTimetables.count }}</span>
-        </span>
-
-        <span class="badge stat-badge">
-          <span>{{ $t('journal.dispatcher-stats.timetables-sum') }}</span>
-          <span>{{ stats.issuedTimetables.distanceSum.toFixed(2) }}km</span>
-        </span>
-
-        <span class="badge stat-badge">
-          <span>{{ $t('journal.dispatcher-stats.timetables-max') }}</span>
-          <span>{{ stats.issuedTimetables.distanceMax.toFixed(2) }}km</span>
-        </span>
-
-        <span class="badge stat-badge">
-          <span>{{ $t('journal.dispatcher-stats.timetables-avg') }}</span>
-          <span>{{ stats.issuedTimetables.distanceAvg.toFixed(2) }}km</span>
-        </span>
-      </div>
-    </span>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import dateMixin from '../../../mixins/dateMixin';
-import { useMainStore } from '../../../store/mainStore';
-
-export default defineComponent({
-  name: 'journal-dispatcher-stats',
-
-  mixins: [dateMixin],
-
-  setup() {
-    const store = useMainStore();
-
-    return {
-      stats: store.dispatcherStatsData,
-      dispatcherName: store.dispatcherStatsName
-    };
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@use '../../../styles/journal-stats';
-</style>
@@ -1,5 +1,5 @@
 <template>
-  <div class="filters-options dropdown" @keydown.esc="showOptions = false">
+  <div class="dropdown filters-options" @keydown.esc="showOptions = false">
    <div class="dropdown_background" v-if="showOptions" @click="showOptions = false"></div>

    <div class="actions-bar">
@@ -57,7 +57,7 @@
                <label v-if="propName == 'search-date-from'" for="search-date">{{
                  $t(`options.search-${optionsType}-date`)
                }}</label>
-                
+
                <div class="search-box">
                  <input
                    class="search-input"
@@ -330,4 +330,9 @@ export default defineComponent({
 <style lang="scss" scoped>
@use '../../styles/dropdown';
@use '../../styles/dropdown-filters';
+
+.filters-options > .dropdown_wrapper {
+  height: calc(100vh - 19em);
+  min-height: 500px;
+}
 </style>
@@ -2,87 +2,70 @@
  <div
    class="journal-stats dropdown"
    v-if="!mainStore.isOffline"
-    @keydown.esc="currentStatsTab = null"
+    @keydown.esc="isDropdownOpen = false"
  >
-    <div
-      class="dropdown_background"
-      v-if="currentStatsTab !== null"
-      @click="currentStatsTab = null"
-    ></div>
+    <div class="dropdown_background" v-if="isDropdownOpen" @click="isDropdownOpen = false"></div>

    <div class="actions-bar">
+      <button class="btn--filled btn--image" @click="toggleDropdown">
+        <img :src="`/images/icon-stats.svg`" alt="stats icon" />
+        {{ $t('journal.daily-stats.button') }}
+      </button>
+
      <button
-        v-for="button in statsButtons"
-        :key="button.tab"
        class="btn--filled btn--image"
-        :data-selected="button.tab == currentStatsTab"
-        :data-disabled="button.disabled"
-        :disabled="button.disabled"
-        @click="onTabButtonClick(button.tab)"
+        :data-disabled="chosenPlayerId == -1"
+        @click="navigateToProfile"
      >
-        <img
-          v-if="button.iconName"
-          :src="`/images/icon-${button.iconName}.svg`"
-          :alt="button.iconName"
-        />
-        {{ $t(button.localeKey) }}
+        <img :src="`/images/icon-user.svg`" alt="user icon" />
+        {{ $t('profile.journal-button') }}
      </button>
    </div>

    <transition name="dropdown-anim">
-      <div
-        class="dropdown_wrapper"
-        :class="{ 'dropdown-align-right': true }"
-        v-if="currentStatsTab !== null"
-      >
+      <div class="dropdown_wrapper" v-if="isDropdownOpen">
        <keep-alive>
-          <component :is="currentStatsTab" :key="currentStatsTab"></component>
+          <JournalDailyStats />
        </keep-alive>
      </div>
    </transition>
  </div>
 </template>

-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
+<script lang="ts" setup>
+import { ref } from 'vue';
 import { useMainStore } from '../../store/mainStore';
-import StorageManager from '../../managers/storageManager';
-import { Journal } from './typings';
 import JournalDailyStats from './JournalDailyStats.vue';
-import JournalDispatcherStats from '../JournalView/JournalDispatchers/JournalDispatcherStats.vue';
-import JournalDriverStats from '../JournalView/JournalTimetables/JournalDriverStats.vue';
+import { useRouter } from 'vue-router';

-export default defineComponent({
-  components: { JournalDailyStats, JournalDriverStats, JournalDispatcherStats },
-  props: {
-    statsButtons: {
-      type: Array as PropType<Journal.StatsButton[]>,
-      required: true
-    }
-  },
-  data() {
-    return {
-      Journal,
-      mainStore: useMainStore(),
-      currentStatsTab: null as Journal.StatsTab | null
-    };
-  },
+const router = useRouter();

-  methods: {
-    onTabButtonClick(tab: Journal.StatsTab) {
-      this.currentStatsTab = tab == this.currentStatsTab ? null : tab;
-
-      StorageManager.setStringValue('journalStatsTab', this.currentStatsTab ?? '');
-    }
+const props = defineProps({
+  chosenPlayerId: {
+    type: Number,
+    required: true
  }
 });
+
+const mainStore = useMainStore();
+const isDropdownOpen = ref(false);
+
+function toggleDropdown() {
+  isDropdownOpen.value = !isDropdownOpen.value;
+}
+
+function navigateToProfile() {
+  if (props.chosenPlayerId == -1) return;
+
+  router.push(`/profile?playerId=${props.chosenPlayerId}`);
+}
 </script>

 <style lang="scss" scoped>
@use '../../styles/dropdown';
@use '../../styles/dropdown-filters';

-.dropdown_wrapper.dropdown-align-right {
+.dropdown_wrapper {
  left: auto;
  right: 0;
  max-width: 700px;
@@ -19,209 +19,238 @@
    <div class="details-body" v-if="showExtraInfo">
      <div class="g-separator"></div>

-      <EntryStops :timetable="timetable" />
+      <div v-if="timetableDetails">
+        <EntryStops :timetable="timetableDetails" />

-      <div class="g-separator"></div>
-
-      <div class="timetable-specs">
-        <span class="badge specs-badge" v-if="timetable.authorName">
-          <span>{{ $t('journal.dispatcher-name') }}</span>
-          <span>{{ timetable.authorName }}</span>
-        </span>
-
-        <span class="badge specs-badge" v-if="timetable.trainMaxSpeed">
-          <span>{{ $t('journal.stock-timetable-speed') }}</span>
-          <span> {{ timetable.trainMaxSpeed }}km/h </span>
-        </span>
-
-        <span class="badge specs-badge" v-if="timetable.maxSpeed">
-          <span>{{ $t('journal.stock-max-speed') }}</span>
-          <span>{{ timetable.maxSpeed }}km/h</span>
-        </span>
-      </div>
-
-      <div class="stock-dangers" v-if="timetable.warningNotes">
        <div class="g-separator"></div>

-        <b>{{ $t('journal.stock-dangers') }}:</b>
-
-        <ul>
-          <li v-if="timetable.twr">
-            <b class="text--primary">{{ $t('warnings.TWR') }} (TWR)</b>
-          </li>
-
-          <li v-if="timetable.skr">
-            <b class="text--primary">{{ $t('warnings.SKR') }}</b>
-          </li>
-
-          <li v-if="timetable.hasDangerousCargo">
-            <b class="text--primary">{{ $t('warnings.TN') }}</b>
-          </li>
-
-          <li v-if="timetable.hasExtraDeliveries">
-            <b class="text--primary">{{ $t('warnings.PN') }}</b>
-          </li>
-        </ul>
-
-        <div class="dangers-notes" v-if="timetable.warningNotes">
-          <h4>{{ $t('warnings.header-title') }}</h4>
-          <p>
-            <i>{{ timetable.warningNotes }}</i>
-          </p>
-        </div>
-      </div>
-
-      <!-- Historia zmian w składzie -->
-      <div v-if="timetable.stockString || stockHistory.length != 0">
-        <div class="g-separator"></div>
-
-        <b>{{ $t('journal.stock-preview') }}:</b>
-
-        <div class="stock-specs" style="margin-top: 0.5em">
-          <span class="badge specs-badge" v-if="timetable.stockLength">
-            <span>{{ $t('journal.stock-length') }}</span>
-            <span>
-              {{
-                currentHistoryIndex == 0
-                  ? timetable.stockLength
-                  : stockHistory[currentHistoryIndex].stockLength || timetable.stockLength
-              }}m
-            </span>
+        <div class="timetable-specs">
+          <span class="badge specs-badge" v-if="timetableDetails.authorName">
+            <span>{{ $t('journal.dispatcher-name') }}</span>
+            <span>{{ timetableDetails.authorName }}</span>
          </span>

-          <span class="badge specs-badge" v-if="timetable.stockMass">
-            <span>{{ $t('journal.stock-mass') }}</span>
-            <span>
-              {{
-                Math.floor(
-                  (currentHistoryIndex == 0
-                    ? timetable.stockMass
-                    : stockHistory[currentHistoryIndex].stockMass || timetable.stockMass) / 1000
-                )
-              }}t
-            </span>
+          <span class="badge specs-badge" v-if="timetableDetails.trainMaxSpeed">
+            <span>{{ $t('journal.stock-timetable-speed') }}</span>
+            <span> {{ timetableDetails.trainMaxSpeed }}km/h </span>
+          </span>
+
+          <span class="badge specs-badge" v-if="timetableDetails.maxSpeed">
+            <span>{{ $t('journal.stock-max-speed') }}</span>
+            <span>{{ timetableDetails.maxSpeed }}km/h</span>
          </span>
        </div>

-        <div class="stock-history">
-          <button class="btn btn--action" @click="copyStockToClipboard()">
-            <i class="fa-regular fa-copy"></i> {{ $t('journal.stock-copy') }}
-          </button>
+        <div class="stock-dangers" v-if="timetableDetails.warningNotes">
+          <div class="g-separator"></div>

-          <button
-            v-for="(sh, i) in stockHistory"
-            :key="i"
-            class="btn--action"
-            :data-checked="i == currentHistoryIndex"
-            @click.stop="currentHistoryIndex = i"
-          >
-            {{ sh.updatedAt }}
-          </button>
+          <b>{{ $t('journal.stock-dangers') }}:</b>
+
+          <ul>
+            <li v-if="timetableDetails.twr">
+              <b class="text--primary">{{ $t('warnings.TWR') }} (TWR)</b>
+            </li>
+
+            <li v-if="timetableDetails.skr">
+              <b class="text--primary">{{ $t('warnings.SKR') }}</b>
+            </li>
+
+            <li v-if="timetableDetails.hasDangerousCargo">
+              <b class="text--primary">{{ $t('warnings.TN') }}</b>
+            </li>
+
+            <li v-if="timetableDetails.hasExtraDeliveries">
+              <b class="text--primary">{{ $t('warnings.PN') }}</b>
+            </li>
+          </ul>
+
+          <div class="dangers-notes" v-if="timetableDetails.warningNotes">
+            <h4>{{ $t('warnings.header-title') }}</h4>
+            <p>
+              <i>{{ timetableDetails.warningNotes }}</i>
+            </p>
+          </div>
        </div>

-        <div v-if="timetable.stockString" style="margin-top: 1em">
-          <StockList
-            :trainStockList="
-              (currentHistoryIndex == 0
-                ? timetable.stockString
-                : stockHistory[currentHistoryIndex].stockString
-              ).split(';')
-            "
-          />
+        <!-- Historia zmian w składzie -->
+        <div v-if="timetableDetails.stockString || stockHistory.length != 0">
+          <div class="g-separator"></div>
+
+          <b>{{ $t('journal.stock-preview') }}:</b>
+
+          <div class="stock-specs" style="margin-top: 0.5em">
+            <span class="badge specs-badge" v-if="timetableDetails.stockLength">
+              <span>{{ $t('journal.stock-length') }}</span>
+              <span>
+                {{
+                  currentHistoryIndex == 0
+                    ? timetableDetails.stockLength
+                    : stockHistory[currentHistoryIndex].stockLength || timetableDetails.stockLength
+                }}m
+              </span>
+            </span>
+
+            <span class="badge specs-badge" v-if="timetableDetails.stockMass">
+              <span>{{ $t('journal.stock-mass') }}</span>
+              <span>
+                {{
+                  Math.floor(
+                    (currentHistoryIndex == 0
+                      ? timetableDetails.stockMass
+                      : stockHistory[currentHistoryIndex].stockMass || timetableDetails.stockMass) /
+                      1000
+                  )
+                }}t
+              </span>
+            </span>
+          </div>
+
+          <div class="stock-history">
+            <button class="btn btn--action" @click="copyStockToClipboard()">
+              <i class="fa-regular fa-copy"></i> {{ $t('journal.stock-copy') }}
+            </button>
+
+            <button
+              v-for="(sh, i) in stockHistory"
+              :key="i"
+              class="btn--action"
+              :data-checked="i == currentHistoryIndex"
+              @click.stop="currentHistoryIndex = i"
+            >
+              {{ sh.updatedAt }}
+            </button>
+          </div>
+
+          <div v-if="timetableDetails.stockString" style="margin-top: 1em">
+            <StockList
+              :trainStockList="
+                (currentHistoryIndex == 0
+                  ? timetableDetails.stockString
+                  : stockHistory[currentHistoryIndex].stockString
+                ).split(';')
+              "
+            />
+          </div>
        </div>
      </div>
    </div>
  </div>
 </template>

-<script lang="ts">
-import { PropType, defineComponent } from 'vue';
-import StockList from '../../Global/StockList.vue';
-import { API } from '../../../typings/api';
+<script lang="ts" setup>
+import { computed, PropType, ref } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
-import EntryStops from './EntryStops.vue';
 import { useI18n } from 'vue-i18n';

-export default defineComponent({
-  components: { StockList, EntryStops },
+import StockList from '../../Global/StockList.vue';
+import EntryStops from './EntryStops.vue';
+import { API } from '../../../typings/api';
+import { useApiStore } from '../../../store/apiStore';

-  emits: ['toggleExtraInfo'],
+const i18n = useI18n();
+const apiStore = useApiStore();

-  props: {
-    showExtraInfo: {
-      type: Boolean,
-      required: true
-    },
-    timetable: {
-      type: Object as PropType<API.TimetableHistory.Data>,
-      required: true
-    }
+const props = defineProps({
+  showExtraInfo: {
+    type: Boolean,
+    required: true
  },
-  data() {
-    return {
-      currentHistoryIndex: 0,
-      i18n: useI18n()
-    };
-  },
-  computed: {
-    stockHistory() {
-      return this.timetable.stockHistory
-        .slice()
-        .reverse()
-        .map((h) => {
-          const historyData = h.split('@');
-          return {
-            updatedAt: new Date(Number(historyData[0])).toLocaleTimeString(this.$i18n.locale, {
-              hour: '2-digit',
-              minute: '2-digit'
-            }),
-            stockString: historyData[1],
-            stockMass: Number(historyData[2]) || undefined,
-            stockLength: Number(historyData[3]) || undefined
-          };
-        });
-    },

-    driverRouteLocation(): RouteLocationRaw | null {
-      if (this.timetable.terminated) return null;
-      return {
-        name: 'DriverView',
-        query: {
-          trainId: `${this.timetable.driverId}|${this.timetable.trainNo}|eu`
-        }
-      };
-    }
-  },
-  methods: {
-    onImageError(e: Event) {
-      const imageEl = e.target as HTMLImageElement;
-      imageEl.src = '/images/icon-unknown.png';
-    },
-
-    toggleExtraInfo() {
-      this.$emit('toggleExtraInfo', this.timetable.id);
-    },
-
-    copyStockToClipboard() {
-      const currentStockString =
-        this.stockHistory[this.currentHistoryIndex]?.stockString ?? this.timetable.stockString;
-
-      if (!currentStockString) {
-        alert(this.i18n.t('journal.stock-clipboard-failure'));
-        return;
-      }
-
-      navigator.clipboard
-        .writeText(currentStockString)
-        .then(() => {
-          prompt(this.i18n.t('journal.stock-clipboard-success'), currentStockString);
-        })
-        .catch(() => {
-          alert(this.i18n.t('journal.stock-clipboard-failure'));
-        });
-    }
+  timetableEntry: {
+    type: Object as PropType<API.TimetableHistory.DataShort>,
+    required: true
  }
 });
+
+const emits = defineEmits(['toggleExtraInfo']);
+const currentHistoryIndex = ref(0);
+
+const timetableDetails = ref<API.TimetableHistory.Data | null>(null);
+
+const stockHistory = computed(() => {
+  return (
+    timetableDetails.value?.stockHistory
+      .slice()
+      .reverse()
+      .map((h) => {
+        const historyData = h.split('@');
+        return {
+          updatedAt: new Date(Number(historyData[0])).toLocaleTimeString(i18n.locale.value, {
+            hour: '2-digit',
+            minute: '2-digit'
+          }),
+          stockString: historyData[1],
+          stockMass: Number(historyData[2]) || undefined,
+          stockLength: Number(historyData[3]) || undefined
+        };
+      }) ?? []
+  );
+});
+
+const driverRouteLocation = computed<RouteLocationRaw | null>(() => {
+  if (props.timetableEntry.terminated) return null;
+
+  return {
+    name: 'DriverView',
+    query: {
+      trainId: `${props.timetableEntry.driverId}|${props.timetableEntry.trainNo}|eu`
+    }
+  };
+});
+
+async function fetchTimetableDetails() {
+  try {
+    const responseData = await apiStore.client!.get<API.TimetableHistory.Response>(
+      'api/getTimetables',
+      {
+        params: {
+          timetableId: props.timetableEntry.id,
+          returnType: 'detailed'
+        }
+      }
+    );
+
+    if (!responseData || responseData.data.length != 1) {
+      timetableDetails.value = null;
+      return;
+    }
+
+    timetableDetails.value = responseData.data[0];
+  } catch (error) {
+    // this.dataStatus = Status.Data.Error;
+    console.error(error);
+  }
+}
+
+async function toggleExtraInfo() {
+  if (props.showExtraInfo == false) {
+    await fetchTimetableDetails();
+  }
+
+  emits('toggleExtraInfo', timetableDetails.value);
+}
+
+function copyStockToClipboard() {
+  if (!timetableDetails.value) return;
+
+  const currentStockString =
+    stockHistory.value[currentHistoryIndex.value]?.stockString ??
+    timetableDetails.value.stockString;
+
+  if (!currentStockString) {
+    alert(i18n.t('journal.stock-clipboard-failure'));
+    return;
+  }
+
+  navigator.clipboard
+    .writeText(currentStockString)
+    .then(() => {
+      prompt(i18n.t('journal.stock-clipboard-success'), currentStockString);
+    })
+    .catch(() => {
+      alert(i18n.t('journal.stock-clipboard-failure'));
+    });
+}
 </script>

 <style lang="scss" scoped>
@@ -299,7 +328,7 @@ hr {
  }
 }

-@include responsive.smallScreen{
+@include responsive.smallScreen {
  .timetable-specs {
    justify-content: center;
  }
@@ -71,6 +71,10 @@
      <router-link v-else :to="`/journal/timetables?search-driver=${timetable.driverName}`">
        <strong>{{ timetable.driverName }}</strong>
      </router-link>
+
+      <div v-if="timetable.driverLanguageId != null">
+        <FlagIcon :language-id="timetable.driverLanguageId" width="1.75em" />
+      </div>
    </span>

    <span class="general-time">
@@ -83,7 +87,7 @@
      </b>

      <b
-        class="info-badge"
+        class="timetable-status-badge"
        :class="{
          fulfilled: timetable.fulfilled,
          terminated: timetable.terminated && !timetable.fulfilled,
@@ -110,8 +114,10 @@ import dateMixin from '../../../mixins/dateMixin';
 import styleMixin from '../../../mixins/styleMixin';
 import { useApiStore } from '../../../store/apiStore';
 import trainCategoryMixin from '../../../mixins/trainCategoryMixin';
+import FlagIcon from '../../Global/FlagIcon.vue';

 export default defineComponent({
+  components: { FlagIcon },
  mixins: [dateMixin, styleMixin, trainCategoryMixin],

  data() {
@@ -122,7 +128,7 @@ export default defineComponent({

  props: {
    timetable: {
-      type: Object as PropType<API.TimetableHistory.Data>,
+      type: Object as PropType<API.TimetableHistory.DataShort>,
      required: true
    }
  }
@@ -165,23 +171,6 @@ export default defineComponent({
  gap: 0.25em;
 }

-.info-badge {
-  padding: 0.05em 0.35em;
-  color: black;
-
-  &.terminated {
-    background-color: salmon;
-  }
-
-  &.fulfilled {
-    background-color: lightgreen;
-  }
-
-  &.active {
-    background-color: lightblue;
-  }
-}
-
 .btn-timetable {
  display: flex;
  padding: 0.2em 0.5em;
@@ -191,7 +180,7 @@ export default defineComponent({
  }
 }

-@include responsive.smallScreen{
+@include responsive.smallScreen {
  .item-general {
    flex-direction: column;
    justify-content: center;
@@ -51,7 +51,7 @@ export default defineComponent({
  components: { ProgressBar },
  props: {
    timetable: {
-      type: Object as PropType<API.TimetableHistory.Data>,
+      type: Object as PropType<API.TimetableHistory.DataShort>,
      required: true
    }
  }
@@ -1,105 +0,0 @@
-<template>
-  <div class="journal-stats driver" v-if="store.driverStatsData">
-    <span>
-      <h3>
-        <i18n-t keypath="journal.driver-stats.title">
-          <template #name>
-            <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
-          </template>
-        </i18n-t>
-      </h3>
-
-      <hr class="header-separator" />
-
-      <div class="info-stats">
-        <span class="badge stat-badge">
-          <span>{{ $t('journal.driver-stats.longest-timetable') }}</span>
-          <span> {{ store.driverStatsData._max.routeDistance.toFixed(2) }}km </span>
-        </span>
-
-        <span class="badge stat-badge">
-          <span>{{ $t('journal.driver-stats.avg-timetable') }}</span>
-          <span> {{ store.driverStatsData._avg.routeDistance.toFixed(2) }}km </span>
-        </span>
-      </div>
-
-      <hr class="section-separator" />
-
-      <div class="info-stats">
-        <span class="badge stat-badge">
-          <span>{{ $t('journal.driver-stats.timetables') }}</span>
-          <span>
-            {{ store.driverStatsData._count.fulfilled }} /
-            {{ store.driverStatsData._count._all }}
-
-            <template v-if="store.driverStatsData._count._all > 0">
-              ({{
-                (
-                  (store.driverStatsData._count.fulfilled / store.driverStatsData._count._all) *
-                  100
-                ).toFixed(2)
-              }}%)
-            </template>
-          </span>
-        </span>
-
-        <span class="badge stat-badge">
-          <span>{{ $t('journal.driver-stats.distance') }}</span>
-          <span>
-            {{ store.driverStatsData._sum.currentDistance.toFixed(2) }} /
-            {{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km
-
-            <template v-if="store.driverStatsData._sum.routeDistance > 0">
-              ({{
-                (
-                  (store.driverStatsData._sum.currentDistance /
-                    store.driverStatsData._sum.routeDistance) *
-                  100
-                ).toFixed(2)
-              }}%)
-            </template>
-          </span>
-        </span>
-
-        <span class="badge stat-badge">
-          <span>{{ $t('journal.driver-stats.stations') }}</span>
-          <span>
-            {{ store.driverStatsData._sum.confirmedStopsCount }} /
-            {{ store.driverStatsData._sum.allStopsCount }}
-
-            <template v-if="store.driverStatsData._sum.allStopsCount > 0">
-              ({{
-                (
-                  (store.driverStatsData._sum.confirmedStopsCount /
-                    store.driverStatsData._sum.allStopsCount) *
-                  100
-                ).toFixed(2)
-              }}%)
-            </template>
-          </span>
-        </span>
-      </div>
-    </span>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useMainStore } from '../../../store/mainStore';
-import { Status } from '../../../typings/common';
-
-export default defineComponent({
-  name: 'journal-driver-stats',
-
-  data() {
-    return {
-      store: useMainStore(),
-      Status: Status
-    };
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@use '../../../styles/journal-stats';
-</style>
@@ -10,14 +10,14 @@

    <hr />

-    <div @click="toggleExtraInfo" style="cursor: pointer">
+    <div style="cursor: pointer">
      <!-- Status -->
      <EntryStatus :timetable="timetableEntry" />
    </div>

    <!-- Extra -->
    <EntryDetails
-      :timetable="timetableEntry"
+      :timetableEntry="timetableEntry"
      :show-extra-info="showExtraInfo"
      @toggle-extra-info="toggleExtraInfo"
    />
@@ -28,7 +28,6 @@
 import { defineComponent, PropType } from 'vue';
 import { API } from '../../../typings/api';
 import { useApiStore } from '../../../store/apiStore';
-import { Journal } from '../typings';

 import trainCategoryMixin from '../../../mixins/trainCategoryMixin';
 import dateMixin from '../../../mixins/dateMixin';
@@ -41,7 +40,7 @@ import EntryDetails from './EntryDetails.vue';
 export default defineComponent({
  props: {
    timetableEntry: {
-      type: Object as PropType<API.TimetableHistory.Data>,
+      type: Object as PropType<API.TimetableHistory.DataShort>,
      required: true
    },
    showExtraInfo: {
@@ -60,74 +59,9 @@ export default defineComponent({
    };
  },

-  computed: {
-    timetablePathDetails() {
-      if (!this.timetableEntry.path || this.timetableEntry.path == '') return null;
-
-      return this.timetableEntry.path.split(';').map((pathEl, i) => {
-        const [arrival, name, departure] = pathEl.split(',');
-        const sceneryName = name.split(' ').slice(0, -1).join(' ');
-        const sceneryHash = name.split(' ').pop()?.replace('.sc', '') ?? '';
-
-        return {
-          arrival,
-          sceneryName,
-          sceneryHash,
-          departure,
-          isVisited: this.timetableEntry.visitedSceneries?.includes(sceneryHash) ?? false
-        };
-      });
-    },
-
-    timetableStops(): Journal.TimetableStopDetails[] {
-      const timetableEntry = this.timetableEntry;
-
-      const stopNames = timetableEntry.sceneriesString.split('%');
-
-      return stopNames.reduce<Journal.TimetableStopDetails[]>((acc, stopName, i, arr) => {
-        const arrivalDate =
-          i == arr.length - 1
-            ? (timetableEntry.checkpointArrivals.at(i) ?? timetableEntry.endDate)
-            : timetableEntry.checkpointArrivals.at(i);
-
-        const scheduledArrivalDate =
-          i == arr.length - 1
-            ? (timetableEntry.checkpointArrivalsScheduled.at(i) ?? timetableEntry.scheduledEndDate)
-            : timetableEntry.checkpointArrivalsScheduled.at(i);
-
-        const departureDate =
-          i == 0
-            ? (timetableEntry.checkpointDepartures.at(i) ?? timetableEntry.beginDate)
-            : timetableEntry.checkpointDepartures.at(i);
-
-        const scheduledDepartureDate =
-          i == 0
-            ? (timetableEntry.checkpointDeparturesScheduled.at(i) ??
-              timetableEntry.scheduledBeginDate)
-            : timetableEntry.checkpointDeparturesScheduled.at(i);
-
-        const stopTime = Number(timetableEntry.checkpointStopTypes.at(i)?.split(',')[0]) || 0;
-        const stopType = timetableEntry.checkpointStopTypes.at(i)?.split(',')[1] || '';
-
-        acc.push({
-          stopName,
-          arrivalTimestamp: this.dateStringToTimestamp(arrivalDate),
-          scheduledArrivalTimestamp: this.dateStringToTimestamp(scheduledArrivalDate),
-          departureTimestamp: this.dateStringToTimestamp(departureDate),
-          scheduledDepartureTimestamp: this.dateStringToTimestamp(scheduledDepartureDate),
-          stopTime,
-          stopType,
-          isConfirmed: i < timetableEntry.confirmedStopsCount
-        });
-
-        return acc;
-      }, []);
-    }
-  },
-
  methods: {
-    toggleExtraInfo() {
-      this.$emit('toggleShowExtraInfo');
+    toggleExtraInfo(data: API.TimetableHistory.Data | null) {
+      this.$emit('toggleShowExtraInfo', data);
    }
  }
 });
@@ -145,7 +79,7 @@ export default defineComponent({
  display: flex;
 }

-@include responsive.smallScreen{
+@include responsive.smallScreen {
  .entry-route {
    justify-content: center;
    text-align: center;
@@ -20,7 +20,7 @@
          v-for="(timetableEntry, i) in timetableHistory"
          :key="timetableEntry.id"
          :timetableEntry="timetableEntry"
-          :onToggleShowExtraInfo="() => toggleExtraInfo(timetableEntry.id)"
+          :onToggleShowExtraInfo="toggleExtraInfo"
          :showExtraInfo="extraInfoIndexes.includes(timetableEntry.id)"
        />
      </transition-group>
@@ -59,9 +59,11 @@ export default defineComponent({
    JournalTimetableEntry
  },

+  emits: ['toggleExtraInfo'],
+
  props: {
    timetableHistory: {
-      type: Array as PropType<API.TimetableHistory.Response>,
+      type: Array as PropType<API.TimetableHistory.ResponseShort>,
      required: true
    },
    scrollNoMoreData: {
@@ -75,32 +77,23 @@ export default defineComponent({
    },
    dataStatus: {
      type: Number as PropType<Status.Data>
+    },
+    extraInfoIndexes: {
+      type: Object as PropType<number[]>,
+      required: true
    }
  },

  data() {
    return {
      Status,
-      store: useMainStore(),
-      extraInfoIndexes: [] as number[]
+      store: useMainStore()
    };
  },

-  watch: {
-    '$route.query': {
-      deep: true,
-      handler() {
-        this.extraInfoIndexes.length = 0;
-      }
-    }
-  },
-  
  methods: {
-    toggleExtraInfo(id: number) {
-      const existingIdx = this.extraInfoIndexes.indexOf(id);
-
-      if (existingIdx != -1) this.extraInfoIndexes.splice(existingIdx, 1);
-      else this.extraInfoIndexes.push(id);
+    toggleExtraInfo(data: API.TimetableHistory.Data | null) {
+      this.$emit('toggleExtraInfo', data);
    }
  }
 });
@@ -111,7 +104,7 @@ export default defineComponent({
@use '../../../styles/journal-section';
@use '../../../styles/responsive';

-@include responsive.smallScreen{
+@include responsive.smallScreen {
  .journal_item-info {
    text-align: center;
  }
@@ -1,5 +1,6 @@
 export namespace Journal {
  export type DispatcherSearchKey =
+    | 'search-duty-id'
    | 'search-dispatcher'
    | 'search-station'
    | 'search-date-from'
@@ -10,6 +11,7 @@ export namespace Journal {
    | 'search-train'
    | 'search-date-from'
    | 'search-dispatcher'
+    | 'search-includesScenery'
    | 'search-issuedFrom'
    | 'search-terminatingAt'
    | 'search-via'
@@ -61,19 +63,6 @@ export namespace Journal {
    default: boolean;
  }

-  export enum StatsTab {
-    DRIVER_STATS = 'journal-driver-stats',
-    DISPATCHER_STATS = 'journal-dispatcher-stats',
-    DAILY_STATS = 'journal-daily-stats'
-  }
-
-  export interface StatsButton {
-    tab: StatsTab;
-    localeKey: string;
-    iconName: string;
-    disabled: boolean;
-  }
-
  export interface TimetableStopDetails {
    stopName: string;
    arrivalTimestamp: number;
@@ -0,0 +1,327 @@
+<template>
+  <section class="profile-history-list">
+    <div class="list-header">
+      <div class="history-menu">
+        <button
+          v-for="(filterState, filterKey) in activeFilterTypes"
+          class="menu-btn btn--option"
+          :data-active="filterState"
+          @click="toggleFilter(filterKey)"
+        >
+          {{ t(`profile.filters.${filterKey}`) }}
+        </button>
+      </div>
+    </div>
+
+    <div class="history-list-box">
+      <Loading v-if="journalDataStatus == Status.Data.Loading" />
+
+      <div v-else-if="combinedJournal.length == 0" class="no-recent-history">
+        {{ t('profile.list.no-recent-history') }}
+      </div>
+
+      <router-link
+        v-else
+        v-for="entry in combinedJournal"
+        :to="
+          'trainNo' in entry.value
+            ? `/journal/timetables?search-train=%23${entry.value.id}`
+            : `/journal/dispatchers?search-duty-id=${entry.value.id}`
+        "
+      >
+        <!-- Date -->
+        <div class="entry-top-date">
+          <img
+            v-if="entry.type == 'Dispatcher'"
+            src="/images/icon-user.svg"
+            width="25"
+            alt="user icon"
+          />
+
+          <img
+            v-else-if="entry.type == 'Timetable'"
+            src="/images/icon-train.svg"
+            width="25"
+            alt="train icon"
+          />
+
+          <img v-else src="/images/icon-timetable.svg" width="25" alt="timetable icon" />
+
+          <b
+            class="timestamp-indicator"
+            :data-online="
+              'isOnline' in entry.value
+                ? entry.value.isOnline
+                : !entry.value.terminated && entry.type != 'IssuedTimetable'
+            "
+          >
+            {{ dateToLocaleString(entry.date, { dateStyle: 'long', timeStyle: 'short' }) }}
+            <span v-if="'timestampTo' in entry.value && entry.value.timestampTo">
+              -
+              <span v-if="new Date(entry.value.timestampTo).getDay() == entry.date.getDay()">{{
+                dateToLocaleString(new Date(entry.value.timestampTo), {
+                  timeStyle: 'short'
+                })
+              }}</span>
+              <span v-else>{{
+                dateToLocaleString(new Date(entry.value.timestampTo), {
+                  dateStyle: 'long',
+                  timeStyle: 'short'
+                })
+              }}</span>
+            </span>
+          </b>
+        </div>
+
+        <!-- Timetables -->
+        <div v-if="'trainNo' in entry.value">
+          <b class="text--primary">
+            {{ entry.value.trainCategoryCode }}
+          </b>
+          {{ ' ' }}
+          <b>{{ entry.value.trainNo }}</b>
+          <b class="text--grayed" v-if="entry.type == 'IssuedTimetable'">
+            {{ ' ' }} {{ t('profile.list.for') }}: {{ entry.value.driverName }}
+          </b>
+          {{ ' ' }}
+          <b>{{ entry.value.route.replace('|', ' > ') }}</b>
+          {{ ' ' }}
+          <b class="text--primary">{{ entry.value.currentDistance }} km</b>
+          <b> / {{ entry.value.routeDistance }} km</b>
+        </div>
+
+        <!-- Dispatchers -->
+        <div v-else>
+          <b class="text--primary">{{ entry.value.stationName }}</b>
+          {{ ' - ' }}
+          <b class="timestamp-indicator" :data-online="entry.value.isOnline">
+            <span v-if="entry.value.isOnline">{{ t('profile.list.online-since') }}: </span>
+            <span>{{
+              humanizeDuration((entry.value.timestampTo || Date.now()) - entry.value.timestampFrom)
+            }}</span>
+          </b>
+        </div>
+      </router-link>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { computed, onActivated, onDeactivated, onMounted, reactive, ref } from 'vue';
+import { dateToLocaleString, humanizeDuration } from '../../composables/time';
+import { API } from '../../typings/api';
+import { useI18n } from 'vue-i18n';
+import { useApiStore } from '../../store/apiStore';
+import { useRoute } from 'vue-router';
+import { Status } from '../../typings/common';
+import Loading from '../Global/Loading.vue';
+
+type JournalEntryType = 'Timetable' | 'Dispatcher' | 'IssuedTimetable';
+
+interface JournalEntry {
+  type: JournalEntryType;
+  date: Date;
+  value: API.TimetableHistory.DataShort | API.DispatcherHistory.Data;
+}
+
+const props = defineProps({
+  playerName: {
+    type: String
+  }
+});
+
+const { t } = useI18n();
+const apiStore = useApiStore();
+const route = useRoute();
+
+const playerId = ref(-1);
+const playerJournal = ref<API.PlayerJournal.Data | null>(null);
+const journalDataStatus = ref(Status.Data.Initialized);
+
+const intervalId = ref(-1);
+
+const activeFilterTypes = reactive<Record<JournalEntryType, boolean>>({
+  Timetable: true,
+  Dispatcher: true,
+  IssuedTimetable: true
+});
+
+onMounted(() => {
+  fetchPlayerJournal();
+  intervalId.value = setInterval(fetchPlayerJournal, 30000);
+});
+
+onDeactivated(() => {
+  clearInterval(intervalId.value);
+  intervalId.value = -1;
+});
+
+const combinedJournal = computed<JournalEntry[]>(() => {
+  if (!playerJournal.value || !props.playerName) return [];
+
+  const list = [
+    ...playerJournal.value.timetables,
+    ...playerJournal.value.duties,
+    ...playerJournal.value.issuedTimetables
+  ]
+    .reduce<JournalEntry[]>((acc, v) => {
+      // Timetable or dispatcher type
+      if ('trainNo' in v) {
+        const isIssued = v.authorName == props.playerName;
+
+        if (!isIssued && !activeFilterTypes['Timetable']) return acc;
+        if (isIssued && !activeFilterTypes['IssuedTimetable']) return acc;
+
+        acc.push({
+          date: new Date(v.createdAt),
+          type: isIssued ? 'IssuedTimetable' : 'Timetable',
+          value: v
+        });
+      } else {
+        if (!activeFilterTypes['Dispatcher']) return acc;
+
+        acc.push({
+          date: new Date(v.timestampFrom),
+          type: 'Dispatcher',
+          value: v
+        });
+      }
+
+      return acc;
+    }, [])
+    .sort((a, b) => {
+      return a.date.getTime() - b.date.getTime() > 0 ? -1 : 1;
+    });
+
+  return list;
+});
+
+function toggleFilter(filterType: JournalEntryType) {
+  const toggledState = !activeFilterTypes[filterType];
+
+  // Prevent switching off all filters at the same time (at least one must be active)
+  if (
+    toggledState === false &&
+    Object.values(activeFilterTypes).filter((v) => v === false).length ==
+      Object.values(activeFilterTypes).length - 1
+  )
+    return;
+
+  activeFilterTypes[filterType] = toggledState;
+}
+
+async function fetchPlayerJournal() {
+  const queryPlayerId = Number(route.query.playerId) || -1;
+
+  if (!apiStore.client || !queryPlayerId) return;
+
+  if (queryPlayerId != playerId.value) {
+    journalDataStatus.value = Status.Data.Loading;
+  }
+
+  playerId.value = queryPlayerId;
+
+  try {
+    const response = await apiStore.client.get<API.PlayerJournal.Data>('api/getPlayerJournal', {
+      params: {
+        playerId: queryPlayerId,
+        dateScope: '30d'
+      }
+    });
+
+    playerJournal.value = response.data;
+    journalDataStatus.value = Status.Data.Loaded;
+  } catch (error) {
+    console.error(error);
+    journalDataStatus.value = Status.Data.Error;
+  }
+
+  return null;
+}
+</script>
+
+<style lang="scss" scoped>
+@use '../../styles/responsive';
+
+.profile-history-list {
+  overflow-y: scroll;
+  height: 100%;
+}
+
+.list-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+
+  & > h3 {
+    padding: 0.5em;
+    margin-bottom: 0.5em;
+  }
+}
+
+.history-menu {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1em;
+  background-color: var(--clr-tile);
+  padding: 0.5em;
+}
+
+.menu-btn {
+  padding: 0.5em;
+  font-weight: bold;
+  color: #aaa;
+
+  &[data-active='true'] {
+    color: var(--clr-success);
+  }
+}
+
+.history-list-box {
+  padding: 0 0.5em;
+  position: relative;
+}
+
+.history-list-box > a {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+
+  background-color: var(--clr-bg-light);
+  padding: 0.5em;
+
+  margin-bottom: 0.5em;
+  text-align: initial;
+
+  &:hover {
+    background-color: #333;
+  }
+}
+
+.no-recent-history {
+  padding: 1em;
+  font-size: 1.25em;
+  font-weight: bold;
+  color: #aaa;
+}
+
+.entry-top-date {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+}
+
+.timestamp-indicator {
+  color: #ccc;
+
+  &[data-online='true'] {
+    color: var(--clr-success);
+  }
+}
+
+@include responsive.midScreen {
+  .profile-history-list {
+    height: 100vh;
+  }
+}
+</style>
@@ -0,0 +1,72 @@
+<template>
+  <div class="player-avatar">
+    <img
+      v-if="avatarId"
+      class="player-avatar-image"
+      ref="avatarImageRef"
+      :src="`https://td2.info.pl/index.php?action=dlattach;attach=${avatarId};type=avatar`"
+      alt="player image"
+      @load="onAvatarLoadSuccess"
+      @error="onAvatarLoadError"
+    />
+
+    <img
+      v-if="avatarLoadingStatus == Status.Data.Error || avatarId == 0"
+      class="img-placeholder"
+      height="100"
+      src="/images/default-avatar.jpg"
+    />
+
+    <Loading v-else-if="avatarLoadingStatus == Status.Data.Loading || avatarId === undefined" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { Status } from '../../typings/common';
+import Loading from '../Global/Loading.vue';
+
+defineProps({
+  avatarId: {
+    type: Number
+  }
+});
+
+const avatarImageRef = ref<HTMLImageElement | null>(null);
+const avatarLoadingStatus = ref<Status.Data>(Status.Data.Loading);
+
+function onAvatarLoadSuccess() {
+  if (!avatarImageRef.value) return;
+
+  avatarLoadingStatus.value = Status.Data.Loaded;
+  avatarImageRef.value.style.opacity = '1';
+}
+
+function onAvatarLoadError() {
+  if (!avatarImageRef.value) return;
+
+  avatarLoadingStatus.value = Status.Data.Error;
+  avatarImageRef.value.src = '/images/default-avatar.jpg';
+  avatarImageRef.value.style.opacity = '1';
+}
+</script>
+
+<style lang="scss" scoped>
+.player-avatar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  position: relative;
+  min-height: 110px;
+
+  .loading {
+    top: 50%;
+    margin: 0;
+  }
+
+  img.player-avatar-image {
+    opacity: 0;
+  }
+}
+</style>
@@ -0,0 +1,107 @@
+<template>
+  <section class="profile-recent-stats">
+    <h2 class="stats-header">
+      <img src="/images/icon-stats.svg" width="30" alt="stats icon" />
+      {{ t('profile.recent-stats.header') }}
+    </h2>
+
+    <div class="month-stats-box">
+      <div class="month-stat">
+        <div><img src="/images/icon-train.svg" width="30" alt="train icon" /></div>
+        <div>
+          <h3 class="text--primary">{{ playerInfo.driverStatsLastMonth.countAll }}</h3>
+        </div>
+        <div>{{ t('profile.recent-stats.timetables') }}</div>
+      </div>
+
+      <div class="month-stat">
+        <div><img src="/images/icon-spawn.svg" width="30" alt="spawn icon" /></div>
+        <div>
+          <h3 class="text--primary">
+            {{ playerInfo.driverStatsLastMonth.currentDistanceTotal?.toFixed(2) || 0 }}
+          </h3>
+        </div>
+        <div>{{ t('profile.recent-stats.distance') }}</div>
+      </div>
+
+      <div class="month-stat">
+        <div><img src="/images/icon-user.svg" width="30" alt="user icon" /></div>
+        <div>
+          <h3 class="text--primary">
+            {{ playerInfo.dispatcherStatsLastMonth.services?.count || 0 }}
+          </h3>
+        </div>
+        <div>{{ t('profile.recent-stats.duties') }}</div>
+      </div>
+
+      <div class="month-stat">
+        <div><img src="/images/icon-timetable.svg" width="30" alt="timetable icon" /></div>
+        <div>
+          <h3 class="text--primary">
+            {{ playerInfo.dispatcherStatsLastMonth.issuedTimetables?.count || 0 }}
+          </h3>
+        </div>
+        <div>{{ t('profile.recent-stats.created-timetables') }}</div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { API } from '../../typings/api';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+defineProps({
+  playerInfo: {
+    type: Object as PropType<API.PlayerInfo.Data>,
+    required: true
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../../styles/responsive';
+
+.profile-recent-stats {
+  overflow: hidden;
+}
+
+.stats-header {
+  padding: 1em;
+
+  img {
+    vertical-align: text-bottom;
+  }
+}
+
+.month-stats-box {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.5em;
+  padding: 0.5em;
+}
+
+.month-stat {
+  background-color: var(--clr-bg-light);
+  border-radius: 0.5em;
+  padding: 0.5em;
+
+  h3 {
+    font-size: 1.3em;
+  }
+
+  div:nth-child(3) {
+    margin-top: 0.5em;
+    font-size: 0.9em;
+  }
+}
+
+@include responsive.smallScreen {
+  .month-stats-box {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>
@@ -0,0 +1,418 @@
+<template>
+  <section class="profile-summary">
+    <div class="player-info">
+      <div class="info-main">
+        <ProfilePlayerAvatar :avatarId="playerTD2Info?.avatar" />
+
+        <div>
+          <h2 class="player-name-header" :class="{ 'text--donator': isPlayerDonator }">
+            <a :href="`https://td2.info.pl/profile/?u=${route.query.playerId}`" target="_blank">
+              <img
+                v-if="isPlayerDonator"
+                src="/images/icon-diamond.svg"
+                width="25"
+                alt="diamond icon"
+              />
+              {{ playerName }}
+            </a>
+          </h2>
+
+          <div class="player-badges">
+            <div class="badge-container" v-if="playerInfo.driverStats.driverLevel != null">
+              <span
+                class="level-badge driver"
+                :style="calculateExpStyles(playerInfo.driverStats.driverLevel)"
+              >
+                {{
+                  playerInfo.driverStats.driverLevel > 1 ? playerInfo.driverStats.driverLevel : 'L'
+                }}
+              </span>
+              {{ t('profile.stats.driver') }}
+            </div>
+
+            <div class="badge-container" v-if="playerInfo.dispatcherStats.dispatcherLevel != null">
+              <span
+                class="level-badge dispatcher"
+                :style="calculateExpStyles(playerInfo.dispatcherStats.dispatcherLevel)"
+              >
+                {{
+                  playerInfo.dispatcherStats.dispatcherLevel > 1
+                    ? playerInfo.dispatcherStats.dispatcherLevel
+                    : 'L'
+                }}
+              </span>
+              {{ t('profile.stats.dispatcher') }}
+            </div>
+          </div>
+
+          <div class="player-journal-links">
+            <router-link
+              class="a-button btn--action"
+              :to="`/journal/timetables?search-driver=${playerInfo.driverStats.driverName}`"
+            >
+              {{ t('profile.stats.timetables-journal') }}
+            </router-link>
+
+            <router-link
+              class="a-button btn--action"
+              :to="`/journal/dispatchers?search-dispatcher=${playerInfo.dispatcherStats.dispatcherName}`"
+            >
+              {{ t('profile.stats.dispatchers-journal') }}
+            </router-link>
+
+            <a
+              class="a-button btn--action"
+              :href="`https://td2.info.pl/profile/?u=${route.query.playerId}`"
+              target="_blank"
+            >
+              {{ t('profile.stats.forum-profile') }}
+            </a>
+          </div>
+
+          <!-- Current activity -->
+          <div
+            class="player-activity"
+            v-if="activeDispatches.length > 0 || activeTrains.length > 0"
+          >
+            <div class="info-activity" v-if="activeDispatches.length > 0">
+              <router-link
+                v-for="d in activeDispatches"
+                class="dispatcher-badge"
+                :to="`/scenery?station=${d.stationName}`"
+              >
+                <img src="/images/icon-user.svg" width="25" alt="user icon" />
+                <b>{{ d.stationName }} ({{ getRegionNameById(d.region) }})</b>
+                <StationStatusBadge :isOnline="true" :dispatcherStatus="d.dispatcherStatus" />
+              </router-link>
+            </div>
+
+            <div class="info-activity" v-if="activeTrains.length > 0">
+              <router-link
+                v-for="d in activeTrains"
+                :to="`/driver?trainId=${d.id}`"
+                class="driver-badge"
+              >
+                <img src="/images/icon-train.svg" width="25" alt="train icon" />
+                <span v-if="d.timetable" class="text--primary">{{ d.timetable.category }}</span>
+                <span>{{ d.trainNo }}</span>
+                &bull;
+                <span>{{ d.currentStationName }} ({{ getRegionNameById(d.region) }})</span>
+                &bull;
+                <span class="text--grayed">{{ d.stockString.split(';')[0] }}</span>
+              </router-link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="player-stats">
+      <div class="stats-driver">
+        <h3 class="stats-header">
+          <img src="/images/icon-train.svg" width="30" alt="train icon" />
+          {{ t('profile.stats.header-driver') }}
+        </h3>
+        <hr />
+
+        <div v-if="playerInfo.driverStats.countAll > 0">
+          <div>
+            <b class="text--primary">
+              {{ playerInfo.driverStats.countFulfilled }} /
+              {{ playerInfo.driverStats.countAll }} ({{
+                getCountPercentage(
+                  playerInfo.driverStats.countFulfilled,
+                  playerInfo.driverStats.countAll,
+                  2
+                )
+              }}%)
+            </b>
+            - {{ t('profile.stats.fulfilled-timetables') }}
+          </div>
+          <div>
+            <b class="text--primary">
+              {{ playerInfo.driverStats.currentDistanceTotal?.toFixed(2) }} /
+              {{ playerInfo.driverStats.routeDistanceTotal?.toFixed(2) }} ({{
+                getCountPercentage(
+                  playerInfo.driverStats.currentDistanceTotal || 0,
+                  playerInfo.driverStats.routeDistanceTotal || 0,
+                  2
+                )
+              }}%)
+            </b>
+            - {{ t('profile.stats.route-distance') }}
+          </div>
+          <div>
+            <b class="text--primary">
+              {{ playerInfo.driverStats.confirmedStopsTotal }} /
+              {{ playerInfo.driverStats.allStopsTotal }} ({{
+                getCountPercentage(
+                  playerInfo.driverStats.confirmedStopsTotal || 0,
+                  playerInfo.driverStats.allStopsTotal || 0,
+                  2
+                )
+              }}%)
+            </b>
+            - {{ t('profile.stats.confirmed-stops') }}
+          </div>
+          <div>
+            <b class="text--primary">{{ playerInfo.driverStats.routeDistanceMax || 0 }}km</b> -
+            {{ t('profile.stats.longest-timetable') }}
+          </div>
+          <div>
+            <b class="text--primary">
+              {{ playerInfo.driverStats.routeDistanceAvg?.toFixed(2) || 0 }}km
+            </b>
+            - {{ t('profile.stats.avg-timetable-length') }}
+          </div>
+        </div>
+
+        <div class="text--grayed" v-else>
+          {{ t('profile.stats.no-timetable-stats') }}
+        </div>
+      </div>
+
+      <div
+        class="stats-dispatcher"
+        v-if="playerInfo.dispatcherStats && playerInfo.dispatcherStats.services?.count"
+      >
+        <h3 class="stats-header">
+          <img src="/images/icon-user.svg" width="30" alt="user icon" />
+          {{ t('profile.stats.header-dispatcher') }}
+        </h3>
+
+        <hr />
+
+        <div>
+          <b class="text--primary">{{ playerInfo.dispatcherStats.services.count }}</b> -
+          {{ t('profile.stats.duties-count') }}
+        </div>
+        <div>
+          <b class="text--primary">{{
+            humanizeDuration(playerInfo.dispatcherStats.services.durationMax)
+          }}</b>
+          - {{ t('profile.stats.longest-duty') }}
+        </div>
+
+        <div v-if="playerInfo.dispatcherStats.issuedTimetables">
+          <div>
+            <b class="text--primary">{{ playerInfo.dispatcherStats.issuedTimetables.count }}</b>
+            - {{ t('profile.stats.created-timetables-count') }}
+          </div>
+          <div>
+            <b class="text--primary">
+              {{ playerInfo.dispatcherStats.issuedTimetables.distanceMax }}km
+            </b>
+            - {{ t('profile.stats.longest-created-timetable') }}
+          </div>
+          <div>
+            <b class="text--primary">
+              {{ playerInfo.dispatcherStats.issuedTimetables.distanceSum.toFixed(2) }}km
+            </b>
+            - {{ t('profile.stats.created-timetables-length-sum') }}
+          </div>
+        </div>
+
+        <div class="text--grayed" v-else>
+          {{ t('profile.stats.no-dispatcher-stats') }}
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, PropType, ref } from 'vue';
+import { API, Td2API } from '../../typings/api';
+import { calculateExpStyles } from '../../composables/badge';
+import { getCountPercentage } from '../../utils/calcUtils';
+import { humanizeDuration } from '../../composables/time';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useApiStore } from '../../store/apiStore';
+import StationStatusBadge from '../Global/StationStatusBadge.vue';
+import axios from 'axios';
+import ProfilePlayerAvatar from './ProfilePlayerAvatar.vue';
+import { getRegionNameById } from '../../utils/regionUtils';
+
+const { t } = useI18n();
+
+const route = useRoute();
+const apiStore = useApiStore();
+
+const props = defineProps({
+  playerInfo: {
+    type: Object as PropType<API.PlayerInfo.Data>,
+    required: true
+  },
+
+  playerName: {
+    type: String
+  }
+});
+
+const playerTD2Info = ref<Td2API.UsersInfoByName.UserInfo | null>(null);
+
+const isPlayerDonator = computed(() =>
+  props.playerName ? apiStore.donatorsData.includes(props.playerName) : false
+);
+
+onMounted(() => {
+  fetchTD2Data();
+});
+
+const activeDispatches = computed(() => {
+  if (!props.playerName) return [];
+  if (!apiStore.activeData || !apiStore.activeData.activeSceneries) return [];
+
+  return apiStore.activeData.activeSceneries.filter(
+    (sc) =>
+      sc.dispatcherName == props.playerName && (sc.lastSeen >= Date.now() - 60000 || sc.isOnline)
+  );
+});
+
+const activeTrains = computed(() => {
+  if (!props.playerName) return [];
+  if (!apiStore.activeData || !apiStore.activeData.trains) return [];
+
+  return apiStore.activeData.trains.filter(
+    (t) => t.driverName == props.playerName && (t.lastSeen >= Date.now() - 60000 || t.online)
+  );
+});
+
+async function fetchTD2Data() {
+  if (!props.playerName) return;
+
+  try {
+    const response = await axios.get<Td2API.UsersInfoByName.Response>('https://api.td2.info.pl', {
+      params: {
+        method: 'getUsersInfoByName',
+        name: props.playerName
+      }
+    });
+
+    if (response.data.success && response.data.message.length == 1) {
+      playerTD2Info.value = response.data.message[0];
+    }
+  } catch (error) {
+    console.error(error);
+  }
+
+  return;
+}
+</script>
+
+<style lang="scss" scoped>
+@use '../../styles/badge';
+@use '../../styles/responsive';
+
+.profile-summary {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  overflow: auto;
+}
+
+.player-name-header {
+  margin: 0.5em 0;
+
+  a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.25em;
+  }
+}
+
+.player-badges {
+  display: flex;
+  justify-content: center;
+  gap: 1em;
+}
+
+.badge-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25em;
+
+  font-weight: bold;
+
+  & > .level-badge {
+    font-size: 1.15em;
+  }
+}
+
+.player-journal-links {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-top: 1em;
+}
+
+.info-activity {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1em;
+  margin-top: 1em;
+
+  .dispatcher-badge {
+    display: flex;
+    align-items: center;
+    gap: 0.25em;
+  }
+
+  .driver-badge {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+
+    gap: 0.25em;
+    font-weight: bold;
+
+    padding: 0.25em 0.5em;
+    border-radius: 0.5em;
+  }
+}
+
+.player-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+
+  hr {
+    margin: 0.5em 0;
+  }
+}
+
+.player-info,
+.player-stats > div {
+  background-color: var(--clr-tile);
+  border-radius: 0.5em;
+  padding: 1em;
+}
+
+.stats-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25em;
+}
+
+@include responsive.midScreen {
+  .player-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
+  }
+}
+
+@include responsive.smallScreen {
+  .player-stats {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+}
+</style>
@@ -96,6 +96,7 @@ export default defineComponent({
  data() {
    return {
      historyList: [] as API.DispatcherHistory.Response,
+      lastStationName: '',
      dataStatus: Status.Data.Loading,
      DataStatus: Status.Data,
      apiStore: useApiStore()
@@ -103,10 +104,10 @@ export default defineComponent({
  },

  async activated() {
-    // if (this.historyList.length == 0) {
+    this.historyList.length = 0;
+
    const fetchedHistory = await this.fetchAPIData();
    if (fetchedHistory) this.historyList = fetchedHistory;
-    // }
  },

  methods: {
@@ -150,6 +151,7 @@ export default defineComponent({
 <style lang="scss" scoped>
@use '../../styles/responsive';
@use '../../styles/scenery-history-table';
+@use '../../styles/badge';

 .scenery-dispatchers-history {
  height: 100%;
@@ -194,7 +196,7 @@ export default defineComponent({
  color: springgreen;
 }

-@include responsive.smallScreen{
+@include responsive.smallScreen {
  .journal-list > div {
    flex-direction: column;
    justify-content: center;
@@ -57,20 +57,8 @@ export default defineComponent({
 });
 </script>

-<style lang="scss">
+<style lang="scss" scoped>
@use '../../styles/responsive';
-@use '../../styles/badge';
-
-h3.section-header {
-  margin: 0.5em 0;
-  padding: 0.3em;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  font-size: 1.2em;
-}

 .info-lists {
  display: flex;
@@ -8,10 +8,7 @@
        {{ onlineScenery.dispatcherExp > 1 ? onlineScenery.dispatcherExp : 'L' }}
      </span>

-      <router-link
-        class="dispatcher-name"
-        :to="`/journal/dispatchers?search-dispatcher=${onlineScenery.dispatcherName}`"
-      >
+      <router-link class="dispatcher-name" :to="`/profile?playerId=${onlineScenery.dispatcherId}`">
        <span
          class="text--donator"
          v-if="apiStore.donatorsData.includes(onlineScenery.dispatcherName)"
@@ -21,6 +18,8 @@
        </span>
        <span v-else>{{ onlineScenery.dispatcherName }}</span>
      </router-link>
+
+      <FlagIcon :languageId="onlineScenery.dispatcherLanguageId" width="1.25em" />
    </div>

    <div class="info-bottom">
@@ -51,9 +50,11 @@ import styleMixin from '../../../mixins/styleMixin';
 import StationStatusBadge from '../../Global/StationStatusBadge.vue';
 import { ActiveScenery } from '../../../typings/common';
 import { useApiStore } from '../../../store/apiStore';
+import FlagIcon from '../../Global/FlagIcon.vue';

 export default defineComponent({
  mixins: [styleMixin, dateMixin, routerMixin],
+  components: { StationStatusBadge, FlagIcon },

  data() {
    return {
@@ -66,8 +67,7 @@ export default defineComponent({
      type: Object as PropType<ActiveScenery>,
      required: false
    }
-  },
-  components: { StationStatusBadge }
+  }
 });
 </script>

@@ -118,6 +118,7 @@ export default defineComponent({
  align-items: center;

  width: 3em;
+  height: 3em;
  margin: 0.25em;

  border: 2px solid #4e4e4e;
@@ -43,8 +43,12 @@
          <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">
            {{ route.routeName }}
          </span>
-          <span v-if="route.routeSpeed" class="speed">{{ route.routeSpeed }}</span>
-          <span v-if="route.routeSpeedExit" class="speed">| {{ route.routeSpeedExit }}</span>
+          <span v-if="route.routeSpeed" class="speed">
+            <span>{{ route.routeSpeed }}</span>
+            <span v-if="route.routeSpeedExit && route.routeSpeedExit != route.routeSpeed">
+              | {{ route.routeSpeedExit }}
+            </span>
+          </span>
          <span v-if="route.routeLength" class="length">
            {{ (route.routeLength / 1000).toFixed(1) + 'km' }}
          </span>
@@ -156,7 +160,7 @@ ul.routes-list {
    -moz-user-select: none;
    -webkit-user-select: none;

-    span {
+    & > span {
      padding: 0.2em;
      background-color: #007599;
      font-weight: bold;
@@ -1,6 +1,6 @@
 <template>
  <section class="info-spawn-list">
-    <h3 class="spawn-header section-header">
+    <h3 class="spawn-header">
      <img src="/images/icon-spawn.svg" alt="Open spawns icon" />
      &nbsp;{{ $t('scenery.spawns') }} &nbsp;
      <span class="text--primary">{{ onlineScenery?.spawns.length || '0' }}</span>
@@ -53,10 +53,23 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
+@use '../../../styles/badge';
+
 ul {
  position: relative;
 }

+h3.spawn-header {
+  margin: 0.5em 0;
+  padding: 0.3em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 1.2em;
+}
+
 .spawns-anim {
  &-move,
  &-enter-active,
@@ -1,6 +1,6 @@
 <template>
  <section class="info-user-list">
-    <h3 class="user-header section-header">
+    <h3 class="user-header">
      <img src="/images/icon-user.svg" alt="Users icon" />
      &nbsp;{{ $t('scenery.users') }} &nbsp;
      <span class="text--primary">{{ onlineScenery?.stationTrains?.length || 0 }}</span
@@ -18,7 +18,11 @@
        :key="train.id"
        :data-status="status"
      >
-        <router-link :to="train.driverRouteLocation">
+        <router-link
+          :to="train.driverRouteLocation"
+          data-tooltip-type="TrainInfoTooltip"
+          :data-tooltip-content="train.id"
+        >
          <span class="user_train"> {{ train.trainNo }}</span>
          <span class="user_name">
            {{ train.driverName }}
@@ -83,7 +87,8 @@ export default defineComponent({
        const stop = train.timetableData?.followingStops.find(
          (stop) =>
            stop.stopNameRAW.toLowerCase() == name.toLowerCase() ||
-            this.station?.generalInfo?.checkpoints.includes(stop.stopNameRAW)
+            this.station?.generalInfo?.checkpoints.includes(stop.stopNameRAW) ||
+            this.onlineScenery?.missingCheckpoints.includes(stop.stopNameRAW)
        );

        const sceneryName =
@@ -106,6 +111,8 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
+@use '../../../styles/badge';
+
 $no-timetable: #aaa;
 $departed: springgreen;
 $stopped: #ffa600;
@@ -113,6 +120,17 @@ $online: gold;
 $terminated: salmon;
 $disconnected: slategray;

+h3.user-header {
+  margin: 0.5em 0;
+  padding: 0.3em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 1.2em;
+}
+
 .info-user-list {
  width: 100%;
 }
@@ -54,6 +54,18 @@
          >
        </template>
      </div>
+
+      <div class="timetable-checkpoints" v-else-if="onlineScenery">
+        <template v-for="(ch, i) in onlineScenery.missingCheckpoints" :key="i">
+          <template v-if="i > 0">&bull;</template>
+          <router-link
+            class="checkpoint-item"
+            :class="{ current: chosenCheckpoint === ch }"
+            :to="`/scenery?station=${onlineScenery.name}&checkpoint=${ch}`"
+            >{{ ch }}</router-link
+          >
+        </template>
+      </div>
    </div>

    <div class="timetable-list">
@@ -122,28 +134,30 @@
                </span>

                <!-- Train info -->
-                <span>
-                  <b
-                    data-tooltip-type="BaseTooltip"
-                    :data-tooltip-content="
-                      getCategoryExplanation(row.train.timetableData!.category)
-                    "
-                    class="text--primary tooltip-help"
-                  >
+                <span
+                  data-tooltip-type="TrainInfoTooltip"
+                  :data-tooltip-content="row.train.id"
+                  class="tooltip-help"
+                >
+                  <b class="text--primary">
                    {{ row.train.timetableData!.category }}
                  </b>

                  <b>&nbsp;{{ row.train.trainNo }}</b>
+                  &bull;
+                  {{ row.train.driverName }}
+
+                  <i
+                    class="fa-solid fa-user-slash"
+                    style="color: salmon"
+                    v-if="!row.train.online && row.train.lastSeen <= Date.now() - 60000"
+                  ></i>
                </span>
-                <span>&bull;</span>
-                <span>{{ row.train.driverName }}</span>
-                <span>&bull;</span>
-                <b style="color: #ddd">{{ row.train.stockList[0] }}</b>

                <!-- Train stop comments -->
                <span
-                  class="stop-comments-icon"
                  v-if="row.checkpointStop.comments"
+                  class="stop-comments-icon"
                  data-tooltip-type="BaseTooltip"
                  :data-tooltip-content="row.checkpointStop.comments"
                >
@@ -243,7 +257,7 @@ import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
 import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
 import { SceneryTimetableRow } from './typings';
-import { ActiveScenery, Station } from '../../typings/common';
+import { ActiveScenery, Station, TooltipTrainInfo, Train } from '../../typings/common';
 import { getTrainStopStatus, stopStatusPriority } from './utils';

 export default defineComponent({
@@ -285,6 +299,7 @@ export default defineComponent({

    const chosenCheckpoint = ref(
      props.station?.generalInfo?.checkpoints[0] ??
+        props.onlineScenery?.missingCheckpoints[0] ??
        props.station?.name ??
        route.query['station']?.toString() ??
        ''
@@ -363,21 +378,30 @@ export default defineComponent({

  methods: {
    loadSelectedOption() {
-      if (!this.station) return;
-
-      if (!this.station.generalInfo) {
-        this.chosenCheckpoint = this.station.name;
-        return;
-      }
-
      const queryCheckpoint = this.$route.query['checkpoint']?.toString();

-      this.chosenCheckpoint =
-        this.station.generalInfo.checkpoints.find(
-          (ch) => ch.toLocaleLowerCase() === queryCheckpoint?.toLocaleLowerCase()
-        ) ??
-        this.station.generalInfo.checkpoints[0] ??
-        this.station.name;
+      let checkpointsListRef: string[] | null = null;
+      let sceneryName = '';
+
+      if (this.station && this.station.generalInfo) {
+        checkpointsListRef = this.station.generalInfo.checkpoints;
+        sceneryName = this.station.name;
+      } else if (this.onlineScenery) {
+        checkpointsListRef = this.onlineScenery.missingCheckpoints;
+        sceneryName = this.onlineScenery.name;
+      } else if (this.station) {
+        this.chosenCheckpoint = this.station.name;
+        sceneryName = this.station.name;
+      }
+
+      if (checkpointsListRef) {
+        this.chosenCheckpoint =
+          checkpointsListRef.find(
+            (ch) => ch.toLocaleLowerCase() === queryCheckpoint?.toLocaleLowerCase()
+          ) ??
+          checkpointsListRef[0] ??
+          sceneryName;
+      }
    },

    setCheckpoint(cp: string) {
@@ -527,11 +551,12 @@ export default defineComponent({

 .info-route {
  width: 100%;
+  margin-top: 0.25em;
 }

 .stop-comments-icon > img {
-  width: 1.2em;
-  vertical-align: middle;
+  width: 1.3em;
+  vertical-align: top;
 }

 .schedule {
@@ -40,36 +40,28 @@
              <span>
                {{ $t('scenery.timetable-issued-date') }}
                <b>
-                  {{
-                    localeDateTime(
-                      timetableHistory.createdAt > timetableHistory.beginDate
-                        ? timetableHistory.beginDate
-                        : timetableHistory.createdAt,
-                      $i18n.locale
-                    )
-                  }}
-                </b></span
-              >
-              <span v-if="timetableHistory.authorName">
-                {{ $t('scenery.timetable-issued-by') }}
-                <b>
-                  <router-link
-                    :to="`/journal/timetables?search-dispatcher=${timetableHistory.authorName}`"
-                  >
-                    {{ timetableHistory.authorName }}
-                  </router-link>
+                  {{ parseCreatedDate(timetableHistory, $i18n.locale) }}
                </b>
              </span>

              <span>
                {{ $t('scenery.timetable-issued-for') }}
-                <b>
-                  <router-link
-                    :to="`/journal/timetables?search-driver=${timetableHistory.driverName}`"
-                  >
-                    {{ timetableHistory.driverName }}
-                  </router-link>
-                </b>
+                <router-link
+                  class="journal-link"
+                  :to="`/journal/timetables?search-driver=${timetableHistory.driverName}`"
+                >
+                  {{ timetableHistory.driverName }}
+                </router-link>
+              </span>
+
+              <span v-if="timetableHistory.authorName">
+                {{ $t('scenery.timetable-issued-by') }}
+                <router-link
+                  class="journal-link"
+                  :to="`/journal/timetables?search-dispatcher=${timetableHistory.authorName}`"
+                >
+                  {{ timetableHistory.authorName }}
+                </router-link>
              </span>
            </div>
          </span>
@@ -106,7 +98,7 @@ import { useApiStore } from '../../store/apiStore';
 import routerMixin from '../../mixins/routerMixin';
 import { useMainStore } from '../../store/mainStore';

-const historyModeList = ['via', 'issuedFrom', 'terminatingAt'] as const;
+const historyModeList = ['includesScenery', 'issuedFrom', 'via', 'terminatingAt'] as const;
 type HistoryMode = (typeof historyModeList)[number];

 export default defineComponent({
@@ -123,7 +115,7 @@ export default defineComponent({

  data() {
    return {
-      historyList: [] as API.TimetableHistory.Response,
+      historyList: [] as API.TimetableHistory.ResponseShort,
      historyModeList,

      apiStore: useApiStore(),
@@ -131,17 +123,19 @@ export default defineComponent({
      dataStatus: Status.Data.Loading,
      DataStatus: Status.Data,

-      checkedHistoryMode: 'via' as HistoryMode
+      checkedHistoryMode: 'includesScenery' as HistoryMode
    };
  },

  async activated() {
+    this.checkedHistoryMode = 'includesScenery';
    this.fetchAPIData();
  },

  methods: {
    async fetchAPIData() {
      const stationName = this.$route.query['station'];
+      this.dataStatus = Status.Data.Loading;

      if (!stationName) {
        this.historyList = [];
@@ -152,9 +146,10 @@ export default defineComponent({
      const requestFilters: Record<string, any> = {};
      requestFilters[this.checkedHistoryMode] = stationName.toString();
      requestFilters.countLimit = 30;
+      requestFilters['returnType'] = 'short';

      try {
-        const response: API.TimetableHistory.Response = await (
+        const response: API.TimetableHistory.ResponseShort = await (
          await this.apiStore.client!.get('api/getTimetables', {
            params: requestFilters
          })
@@ -165,12 +160,12 @@ export default defineComponent({
        this.dataStatus = Status.Data.Loaded;
      } catch (error) {
        console.error(error);
+        this.dataStatus = Status.Data.Error;
      }
    },

    checkHistoryMode(mode: HistoryMode) {
      this.checkedHistoryMode = mode;
-      this.dataStatus = Status.Data.Loading;
      this.fetchAPIData();
    },

@@ -181,6 +176,18 @@ export default defineComponent({
          [`search-${this.checkedHistoryMode}`]: this.station?.name || this.onlineScenery?.name
        }
      });
+    },
+
+    parseCreatedDate(timetable: API.TimetableHistory.DataShort, locale: string) {
+      const createdDate =
+        timetable.createdAt > timetable.beginDate
+          ? new Date(timetable.beginDate)
+          : new Date(timetable.createdAt);
+
+      return createdDate.toLocaleString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
+        timeStyle: 'short',
+        dateStyle: 'medium'
+      });
    }
  },
  components: { Loading }
@@ -215,7 +222,15 @@ export default defineComponent({

  button {
    padding: 0.35em;
-    min-width: 120px;
+  }
+}
+
+.journal-link {
+  font-weight: bold;
+  color: #eee;
+
+  &:hover {
+    color: var(--clr-primary);
  }
 }

@@ -1,11 +1,18 @@
 <template>
  <div class="general-status">
-    <span
+    <router-link
+      v-if="computedScheduledTrain.stationNameHref"
+      :to="`/scenery?station=${computedScheduledTrain.stationNameHref}`"
      :class="computedScheduledTrain.status"
-      @click.prevent="() => {}"
      v-html="computedScheduledTrain.stopStatusIndicator"
    >
-    </span>
+    </router-link>
+
+    <span
+      v-else
+      :class="computedScheduledTrain.status"
+      v-html="computedScheduledTrain.stopStatusIndicator"
+    ></span>
  </div>
 </template>

@@ -27,6 +34,7 @@ export default defineComponent({
      const { status, prevElement, currentElement, nextElement } = this.sceneryTimetableRow;

      let stopStatusIndicator = '';
+      let stationNameHref = '';

      switch (status) {
        case StopStatus.ARRIVING:
@@ -35,6 +43,8 @@ export default defineComponent({
              prevStationName: prevElement?.stationName ?? '',
              prevDepartureLine: prevElement?.departureRouteExt ?? ''
            });
+
+            stationNameHref = prevElement?.stationName ?? '';
          } else {
            stopStatusIndicator = this.$t('timetables.desc-beginning');
          }
@@ -48,6 +58,9 @@ export default defineComponent({
                nextArrivalLine: nextElement?.arrivalRouteExt
              })
            : this.$t(`timetables.desc-end`);
+
+          stationNameHref = nextElement?.stationName ?? '';
+
          break;

        case StopStatus.DEPARTED:
@@ -55,11 +68,15 @@ export default defineComponent({
            stopStatusIndicator = this.$t('timetables.desc-departed-ends', {
              nextStationName: currentElement.stationName
            });
+
+            stationNameHref = nextElement?.stationName ?? '';
          } else {
            stopStatusIndicator = this.$t('timetables.desc-departed', {
              nextStationName: nextElement?.stationName ?? currentElement.stationName,
              nextArrivalLine: nextElement?.arrivalRouteExt
            });
+
+            stationNameHref = nextElement?.stationName ?? '';
          }

          break;
@@ -69,6 +86,8 @@ export default defineComponent({
            nextStationName: nextElement?.stationName,
            nextArrivalLine: nextElement?.arrivalRouteExt
          });
+
+          stationNameHref = nextElement?.stationName ?? '';
          break;

        case StopStatus.TERMINATED:
@@ -80,9 +99,18 @@ export default defineComponent({
      }
      return {
        ...this.sceneryTimetableRow,
+        stationNameHref,
        stopStatusIndicator
      };
    }
+  },
+
+  methods: {
+    navigateToScenery(sceneryName?: string) {
+      if (!sceneryName) return;
+
+      this.$router.push(`/scenery?station=${sceneryName}`);
+    }
  }
 });
 </script>
@@ -91,11 +119,11 @@ export default defineComponent({
 .general-status {
  margin-top: 0.5em;

-  span.arriving {
+  & > .arriving {
    color: #ccc;
  }

-  span.departed {
+  & > .departed {
    color: lime;

    &-away {
@@ -103,15 +131,15 @@ export default defineComponent({
    }
  }

-  span.stopped {
+  & > .stopped {
    color: #ffa600;
  }

-  span.online {
+  & > .online {
    color: gold;
  }

-  span.terminated {
+  & > .terminated {
    color: salmon;
  }
 }
@@ -21,9 +21,7 @@
            <template v-else>{{ $t('filters.no-changed-filters') }}</template>
          </div>

-          <section class="card_sceneries-search">
-            <h3 class="section-header">{{ $t('filters.sceneries-search') }}</h3>
-
+          <section class="card_input-search">
            <datalist id="sceneries">
              <option
                v-for="scenery in sortedStationList"
@@ -32,18 +30,59 @@
              ></option>
            </datalist>

-            <form action="javascript:void(0);" @submit="handleSceneriesInput">
-              <input
-                v-model="chosenSearchScenery"
-                id="scenery-search"
-                list="sceneries"
-                :placeholder="$t('filters.sceneries-placeholder')"
-                @focus="preventKeyDown = true"
-                @blur="preventKeyDown = false"
-              />
+            <input
+              v-model="chosenSearchScenery"
+              id="scenery-search"
+              list="sceneries"
+              :placeholder="$t('filters.sceneries-placeholder')"
+              @change="handleSceneriesInput"
+              @focus="preventKeyDown = true"
+              @blur="preventKeyDown = false"
+            />

-              <button class="btn--action">{{ $t('filters.search-button-title') }}</button>
-            </form>
+            <button class="btn--action" @click="handleSceneriesInput">
+              {{ $t('filters.search-button-title') }}
+            </button>
+          </section>
+
+          <section class="card_input-search">
+            <input
+              v-model="filters['lines']"
+              id="line-numbers-search"
+              :placeholder="$t('filters.line-numbers-placeholder')"
+              @focus="preventKeyDown = true"
+              @blur="preventKeyDown = false"
+            />
+
+            <button class="btn--action btn--image" @click="resetLineNumbersInput">
+              <img src="/images/icon-exit.svg" alt="reset line numbers search" />
+            </button>
+          </section>
+
+          <section class="card_input-search">
+            <select id="author" name="authors" v-model="filters['authors']">
+              <option value="">{{ $t('filters.authors-placeholder') }}</option>
+              <option v-for="(author, i) in authorsOptions" :key="i" :value="author">
+                {{ author }}
+              </option>
+            </select>
+
+            <button class="btn--action btn--image" @click="resetAuthorsInput">
+              <img src="/images/icon-exit.svg" alt="reset authors search" />
+            </button>
+          </section>
+
+          <section class="card_input-search">
+            <select id="projects" name="projects" v-model="filters['projects']">
+              <option value="">{{ $t('filters.projects-placeholder') }}</option>
+              <option v-for="(project, i) in projectsOptions" :key="i" :value="project">
+                {{ project }}
+              </option>
+            </select>
+
+            <button class="btn--action btn--image" @click="resetProjectsInput">
+              <img src="/images/icon-exit.svg" alt="reset projects search" />
+            </button>
          </section>

          <section class="card_options">
@@ -52,7 +91,7 @@
              v-for="(sectionFilters, sectionKey) in filtersSections"
              :key="sectionKey"
            >
-              <h3 class="text--primary">
+              <h3 class="section-header">
                <span class="active-indicator" v-if="!areSectionFiltersDefault(sectionKey)"></span>
                {{ $t(`filters.sections.${sectionKey}`) }}
                <button @click="resetSectionFilters(sectionKey)">RESET</button>
@@ -82,7 +121,7 @@
          </section>

          <section class="card_timestamp">
-            <h3 class="section-header">{{ $t('filters.minimum-hours-title') }}</h3>
+            <h3 class="hours-section-header">{{ $t('filters.minimum-hours-title') }}</h3>

            <span class="clock">
              <button class="btn--action" @click="subHour">-</button>
@@ -97,29 +136,6 @@
            </span>
          </section>

-          <section class="card_authors-search">
-            <h3 class="section-header">{{ $t('filters.authors-search') }}</h3>
-
-            <datalist id="authors" name="authors">
-              <option v-for="(author, i) in authorsHint" :key="i" :value="author"></option>
-            </datalist>
-
-            <form action="javascript:void(0);" @submit="handleAuthorsInput">
-              <input
-                type="text"
-                id="author"
-                list="authors"
-                name="authors"
-                v-model="authors"
-                :placeholder="$t('filters.authors-placeholder')"
-                @focus="preventKeyDown = true"
-                @blur="preventKeyDown = false"
-              />
-
-              <button class="btn--action">{{ $t('filters.search-button-title') }}</button>
-            </form>
-          </section>
-
          <section class="card_sliders">
            <div class="slider" v-for="(slider, i) in sliderStates" :key="i">
              <input
@@ -200,7 +216,6 @@ export default defineComponent({
    sliderStates,

    minimumHours: 0,
-    authors: '',

    currentRegion: { id: '', value: '' },

@@ -255,13 +270,11 @@ export default defineComponent({
        .sort((s1, s2) => (s1.name > s2.name ? 1 : -1));
    },

-    currentOptionsActive() {
-      return true;
-    },
-
-    authorsHint() {
+    authorsOptions() {
      return this.store.stationList
        .reduce((acc, station) => {
+          if (station.generalInfo?.hidden === true) return acc;
+
          station.generalInfo?.authors?.forEach((author) => {
            if (author.trim() != '' && !acc.includes(author.toLocaleLowerCase()))
              acc.push(author.toLocaleLowerCase());
@@ -270,6 +283,19 @@ export default defineComponent({
          return acc;
        }, [] as string[])
        .sort((a, b) => a.localeCompare(b));
+    },
+
+    projectsOptions() {
+      return this.store.stationList
+        .reduce((acc, station) => {
+          if (!station.generalInfo || !station.generalInfo.project || station.generalInfo.hidden)
+            return acc;
+          if (!acc.includes(station.generalInfo.project.trim()))
+            acc.push(station.generalInfo.project.trim());
+
+          return acc;
+        }, [] as string[])
+        .sort((a, b) => a.localeCompare(b));
    }
  },

@@ -294,8 +320,16 @@ export default defineComponent({
      this.scrollTop = (e.target as HTMLElement).scrollTop;
    },

-    handleAuthorsInput() {
-      this.filters['authors'] = this.authors;
+    resetAuthorsInput() {
+      this.filters['authors'] = '';
+    },
+
+    resetProjectsInput() {
+      this.filters['projects'] = '';
+    },
+
+    resetLineNumbersInput() {
+      this.filters['lines'] = '';
    },

    handleSceneriesInput() {
@@ -340,7 +374,6 @@ export default defineComponent({

      // Reset local model values
      this.minimumHours = 0;
-      this.authors = '';

      // Reset global filters
      Object.keys(this.filters).forEach((filterKey) => {
@@ -384,6 +417,14 @@ export default defineComponent({
@use '../../styles/animations';

 h3.section-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.25em;
+  gap: 0.5em;
+  color: var(--clr-primary);
+}
+
+h3.hours-section-header {
  text-align: center;
  margin: 0.5em 0;
 }
@@ -456,27 +497,20 @@ h3.section-header {
  }
 }

-.card_authors-search,
-.card_sceneries-search {
-  margin: 1em 0;
+.card_input-search {
  display: flex;
-  flex-direction: column;
  align-items: center;
+  gap: 0.5em;

-  form {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 0.5em;
-    width: 100%;
-    margin-top: 1em;
+  button {
+    height: 100%;
  }

-  input {
-    width: 70%;
-    max-width: 400px;
+  input,
+  select {
+    width: 100%;
    padding: 0.5em;
-    outline: 1px solid white;
+    border: 1px solid #aaa;
  }
 }

@@ -548,12 +582,6 @@ h3.section-header {
 }

 .option-section h3 {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.25em;
-
-  gap: 0.5em;
-
  button {
    padding: 0.15em;
    color: coral;
@@ -14,10 +14,10 @@
    <transition name="dropdown-anim">
      <div class="dropdown_wrapper" v-if="showDropdown">
        <div>
-          <h1 class="stats-title text--primary">
+          <h2 class="stats-title text--primary">
            <img src="/images/icon-stats.svg" alt="Open filters icon" height="28" />
            {{ $t('station-stats.title') }}
-          </h1>
+          </h2>

          <hr style="margin: 0.5em 0" />

@@ -245,7 +245,7 @@ export default defineComponent({
@use '../../styles/badge';
@use '../../styles/responsive';

-h1.stats-title img {
+.stats-title img {
  vertical-align: text-bottom;
 }

@@ -279,7 +279,7 @@ h1.stats-title img {
 }

@include responsive.smallScreen {
-  h1.stats-title {
+  .stats-title {
    text-align: center;
  }

@@ -14,7 +14,7 @@
            class="header-text"
            :class="headerName"
          >
-            <span class="header_wrapper">
+            <div class="header_wrapper">
              <div v-html="$t(`sceneries.headers.${headerName}`)"></div>

              <img
@@ -23,7 +23,7 @@
                :src="`/images/icon-arrow-${activeSorter.dir == 1 ? 'asc' : 'desc'}.svg`"
                alt="sort icon"
              />
-            </span>
+            </div>
          </th>

          <th
@@ -33,12 +33,12 @@
            class="header-image"
            :class="headerName"
          >
-            <span class="header_wrapper">
-              <img
-                :src="`/images/icon-${headerName}.svg`"
-                :alt="headerName"
-                :title="$t(`sceneries.headers.${headerName}`)"
-              />
+            <span
+              class="header_wrapper"
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t(`sceneries.headers.${headerName}`)"
+            >
+              <img :src="`/images/icon-${headerName}.svg`" :alt="headerName" />

              <img
                class="sort-icon"
@@ -52,14 +52,14 @@
      </thead>

      <tbody>
-        <router-link
+        <tr
          v-for="station in filteredStationList"
          class="a-row"
-          role="row"
+          tabindex="0"
          :key="station.name"
          @click.right.prevent="openForumSite($event, station.generalInfo?.url)"
-          @keydown.space.prevent="openForumSite($event, station.generalInfo?.url)"
-          :to="getSceneryRoute(station)"
+          @click="getSceneryRoute(station)"
+          @keydown.enter="getSceneryRoute(station)"
        >
          <td class="station-name" :class="station.generalInfo?.availability">
            <b v-if="station.generalInfo?.project" style="color: salmon">{{
@@ -76,37 +76,49 @@
                  station.generalInfo.availability != 'nonPublic' &&
                  station.generalInfo.availability != 'unavailable'
                "
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="`${$t(`sceneries.info.${station.generalInfo.availability}`)} (${$t(
+                  'sceneries.info.req-level',
+                  { lvl: station.generalInfo.reqLevel },
+                  station.generalInfo.reqLevel
+                )})`"
                :style="calculateExpStyle(station.generalInfo.reqLevel)"
              >
                {{ station.generalInfo.reqLevel >= 2 ? station.generalInfo.reqLevel : 'L' }}
              </span>

-              <span v-else-if="station.generalInfo.availability == 'abandoned'">
-                <img
-                  src="/images/icon-abandoned.svg"
-                  alt="non-public"
-                  :title="$t('sceneries.info.abandoned')"
-                />
+              <span
+                v-else-if="station.generalInfo.availability == 'abandoned'"
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="$t('sceneries.info.abandoned')"
+              >
+                <img src="/images/icon-abandoned.svg" alt="non-public" />
              </span>

-              <span v-else-if="station.generalInfo.availability == 'nonPublic'">
-                <img
-                  src="/images/icon-lock.svg"
-                  alt="non-public"
-                  :title="$t('sceneries.info.non-public')"
-                />
+              <span
+                v-else-if="station.generalInfo.availability == 'nonPublic'"
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="$t('sceneries.info.non-public')"
+              >
+                <img src="/images/icon-lock.svg" alt="non-public" />
              </span>

-              <span v-else>
-                <img
-                  src="/images/icon-unavailable.svg"
-                  alt="unavailable"
-                  :title="$t('sceneries.info.unavailable')"
-                />
+              <span
+                v-else
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="$t('sceneries.info.unavailable')"
+              >
+                <img src="/images/icon-unavailable.svg" alt="unavailable" />
              </span>
            </span>

-            <span v-else> ? </span>
+            <span
+              v-else
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t('sceneries.info.unknown')"
+            >
+              ?
+            </span>
          </td>

          <td class="station-status">
@@ -120,7 +132,6 @@
            <span v-if="station.onlineInfo?.dispatcherName">
              <b
                v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
-                @click.prevent="openDonationCard"
                data-tooltip-type="DonatorTooltip"
                :data-tooltip-content="$t('donations.dispatcher-message')"
              >
@@ -134,6 +145,14 @@
            </span>
          </td>

+          <td class="station-dispatcher-lang">
+            <FlagIcon
+              v-if="station.onlineInfo && station.onlineInfo.dispatcherLanguageId != -1"
+              :language-id="station.onlineInfo.dispatcherLanguageId"
+              width="2.25em"
+            />
+          </td>
+
          <td class="station-dispatcher-exp">
            <span
              v-if="station.onlineInfo && station.onlineInfo?.dispatcherExp != -1"
@@ -153,7 +172,8 @@
              <span
                v-if="station.generalInfo.routes.singleElectrifiedNames.length != 0"
                class="track catenary"
-                :title="`${$t('sceneries.info.single-track-routes-catenary')}${
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="`${$t('sceneries.info.single-track-routes-catenary')}${
                  station.generalInfo.routes.singleElectrifiedNames.length
                }`"
              >
@@ -163,7 +183,8 @@
              <span
                v-if="station.generalInfo.routes.singleOtherNames.length != 0"
                class="track no-catenary"
-                :title="`${$t('sceneries.info.single-track-routes-other')}${
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="`${$t('sceneries.info.single-track-routes-other')}${
                  station.generalInfo.routes.singleOtherNames.length
                }`"
              >
@@ -177,7 +198,8 @@
              <span
                v-if="station.generalInfo.routes.doubleElectrifiedNames.length != 0"
                class="track catenary"
-                :title="`${$t('sceneries.info.double-track-routes-catenary')}${
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="`${$t('sceneries.info.double-track-routes-catenary')}${
                  station.generalInfo.routes.doubleElectrifiedNames.length
                }`"
              >
@@ -187,7 +209,8 @@
              <span
                v-if="station.generalInfo.routes.doubleOtherNames.length != 0"
                class="track no-catenary"
-                :title="`${$t('sceneries.info.double-track-routes-other')}${
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="`${$t('sceneries.info.double-track-routes-other')}${
                  station.generalInfo.routes.doubleOtherNames.length
                }`"
              >
@@ -201,7 +224,8 @@
              v-if="station.generalInfo?.signalType"
              class="scenery-icon icon-info"
              :class="station.generalInfo?.controlType.replace('+', '-')"
-              :title="
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="
                $t('sceneries.info.control-type') +
                $t(`controls.${station.generalInfo?.controlType}`)
              "
@@ -214,7 +238,8 @@
              class="icon-info"
              :src="`/images/icon-${station.generalInfo.signalType}.svg`"
              :alt="station.generalInfo.signalType"
-              :title="
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="
                $t('sceneries.info.signals-type') + $t(`signals.${station.generalInfo.signalType}`)
              "
            />
@@ -224,7 +249,8 @@
              class="icon-info"
              src="/images/icon-SUP.svg"
              alt="SUP (RASP-UZK)"
-              :title="$t('sceneries.info.SUP')"
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t('sceneries.info.SUP')"
            />

            <img
@@ -232,7 +258,8 @@
              class="icon-info"
              src="/images/icon-ASDEK.svg"
              alt="dSAT ASDEK"
-              :title="$t('sceneries.info.ASDEK')"
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t('sceneries.info.ASDEK')"
            />

            <img
@@ -240,7 +267,8 @@
              class="icon-info"
              src="/images/icon-unknown.svg"
              alt="icon-unknown"
-              :title="$t('sceneries.info.unknown')"
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t('sceneries.info.unknown')"
            />
          </td>

@@ -248,7 +276,7 @@
            class="station-users"
            :class="{ inactive: !station.onlineInfo }"
            data-tooltip-type="UsersTooltip"
-            :data-tooltip-content="JSON.stringify(station.onlineInfo?.stationTrains ?? [])"
+            :data-tooltip-content="getUsersTooltipContent(station.onlineInfo?.stationTrains ?? [])"
          >
            <span class="text--primary">{{
              station.onlineInfo?.stationTrains?.length ?? '-'
@@ -293,7 +321,7 @@
          >
            {{ station.onlineInfo?.scheduledTrainCount.confirmed ?? '-' }}
          </td>
-        </router-link>
+        </tr>
      </tbody>
    </table>

@@ -318,16 +346,18 @@ import dateMixin from '../../mixins/dateMixin';
 import styleMixin from '../../mixins/styleMixin';
 import { useApiStore } from '../../store/apiStore';
 import { useMainStore } from '../../store/mainStore';
-import { Station, Status } from '../../typings/common';
+import { Station, Status, TooltipUserTrain, Train } from '../../typings/common';
 import { useTooltipStore } from '../../store/tooltipStore';
 import { getChangedFilters } from '../../managers/stationFilterManager';
 import { ActiveSorter, HeadIdsType, headIconsIds, headIds } from './typings';
 import { filterStations, sortStations } from './utils';
+import { getLanguageNameById } from '../../utils/languageUtils';
+import FlagIcon from '../Global/FlagIcon.vue';

 export default defineComponent({
  emits: ['toggleDonationCard'],

-  components: { Loading, StationStatusBadge },
+  components: { Loading, StationStatusBadge, FlagIcon },
  mixins: [styleMixin, dateMixin],

  data: () => ({
@@ -363,15 +393,13 @@ export default defineComponent({

  methods: {
    getSceneryRoute(station: Station) {
-      // TODO: Hide tooltips when navigating away
-
-      return {
+      this.$router.push({
        name: 'SceneryView',
        query: {
          station: station.name,
          region: this.$route.query.region || undefined
        }
-      };
+      });
    },

    openDonationCard(e: Event) {
@@ -394,6 +422,15 @@ export default defineComponent({
      else this.activeSorter.dir = 1;

      this.activeSorter.headerName = headerName;
+    },
+
+    getUsersTooltipContent(stationTrains: Train[]): string {
+      const usersTrains: TooltipUserTrain[] = stationTrains.map((train) => ({
+        driverName: train.driverName,
+        trainNo: train.trainNo
+      }));
+
+      return JSON.stringify(usersTrains);
    }
  }
 });
@@ -408,7 +445,7 @@ export default defineComponent({
 $rowCol: #424242;

 .station_table {
-  height: calc(100vh - 11em);
+  height: calc(100vh - 17em);
  max-height: 2000px;
  min-height: 500px;
  overflow: auto;
@@ -429,78 +466,82 @@ table {
  width: 100%;
  min-width: 1250px;
  white-space: wrap;
+}

-  thead {
-    position: sticky;
-    top: 0;
+thead {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+thead tr {
+  background-color: var(--clr-bg3);
+}
+
+thead th {
+  background-color: var(--clr-bg3);
+  white-space: pre-wrap;
+  padding: 0.5em 0.25em;
+
+  cursor: pointer;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+
+  &.station {
+    width: 12em;
  }

-  thead tr {
-    background-color: var(--clr-bg3);
+  &.min-lvl {
+    width: 4em;
  }

-  thead th {
-    &.station {
-      width: 12em;
-    }
+  &.status {
+    width: 10em;
+  }

-    &.min-lvl {
-      width: 4em;
-    }
+  &.dispatcher {
+    width: 12em;
+  }

-    &.status {
-      width: 10em;
-    }
+  &.dispatcher-lang {
+    width: 6em;
+  }

-    &.dispatcher {
-      width: 12em;
-    }
+  &.dispatcher-lvl {
+    width: 6em;
+  }

-    &.dispatcher-lvl {
-      width: 6em;
-    }
+  &.routes-double,
+  &.routes-single {
+    width: 7em;
+  }

-    &.routes-double,
-    &.routes-single {
-      width: 7em;
-    }
+  &.general {
+    width: 11em;
+  }

-    &.general {
-      width: 11em;
-    }
+  &.header-image {
+    width: 3.5em;

-    &.header-image {
-      width: 3.5em;
-
-      &.user {
-        width: 5em;
-      }
-    }
-
-    padding: 0.5em 0.25em;
-    background-color: var(--clr-bg3);
-    white-space: pre-wrap;
-
-    cursor: pointer;
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-
-    span {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      img {
-        width: 1.5em;
-        vertical-align: middle;
-      }
+    &.user {
+      width: 5em;
    }
  }
 }

-tr,
-.a-row {
+thead th .header_wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 1.5em;
+    vertical-align: middle;
+  }
+}
+
+tbody tr {
  background-color: $rowCol;
  vertical-align: middle;

@@ -520,6 +561,7 @@ tr,
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
+    height: 2.5em;

    &.inactive {
      opacity: 0.2;
@@ -10,6 +10,7 @@ export const headIds = [
  'min-lvl',
  'status',
  'dispatcher',
+  'dispatcher-lang',
  'dispatcher-lvl',
  'routes-single',
  'routes-double',
@@ -132,23 +132,46 @@ function filterSliderValues(filters: Record<string, any>, generalInfo: StationGe
    filters['minOneWayCatenary'] > routes.singleElectrifiedNames.length ||
    filters['minOneWay'] > routes.singleOtherNames.length ||
    filters['minTwoWayCatenary'] > routes.doubleElectrifiedNames.length ||
-    // filters['minTwoWay'] > routes.doubleOtherNames.length ||
+    filters['minTwoWay'] > routes.doubleOtherNames.length ||
    filters['minOneWayCatenaryInt'] >
      internalRoutes.filter((r) => r.routeTracks == 1 && r.isElectric == true).length ||
    filters['minOneWayInt'] >
      internalRoutes.filter((r) => r.routeTracks == 1 && r.isElectric == false).length ||
    filters['minTwoWayCatenaryInt'] >
-      internalRoutes.filter((r) => r.routeTracks == 2 && r.isElectric == true).length
+      internalRoutes.filter((r) => r.routeTracks == 2 && r.isElectric == true).length ||
+    filters['minTwoWayInt'] >
+      internalRoutes.filter((r) => r.routeTracks == 2 && r.isElectric == false).length
  );
 }

 function filterInputValues(filters: Record<string, any>, generalInfo: StationGeneralInfo) {
-  return (
+  if (
    filters['authors'].length > 3 &&
-    !generalInfo.authors
-      ?.map((a) => a.toLocaleLowerCase())
-      .includes(filters['authors'].toLocaleLowerCase())
-  );
+    generalInfo.authors &&
+    !generalInfo.authors.some(
+      (a) => a.toLocaleLowerCase() == filters['authors'].toLocaleLowerCase()
+    )
+  )
+    return true;
+
+  if (filters['projects'].length > 0 && generalInfo.project != filters['projects']) return true;
+
+  if (filters['lines'].length > 0) {
+    const linesNumbers = (filters['lines'] as string)
+      .split(',')
+      .map((l) => Number(l))
+      .filter((l) => !isNaN(l) && l != 0);
+
+    if (
+      !generalInfo.lines
+        ?.split(',')
+        .map((l) => Number(l))
+        .some((l) => linesNumbers.includes(l))
+    )
+      return true;
+  }
+
+  return false;
 }

 export const sortStations = (a: Station, b: Station, sorter: ActiveSorter) => {
@@ -187,6 +210,11 @@ export const sortStations = (a: Station, b: Station, sorter: ActiveSorter) => {
      diff = (a.onlineInfo?.dispatcherExp || 0) - (b.onlineInfo?.dispatcherExp || 0);
      break;

+    case 'dispatcher-lang':
+      diff =
+        (a.onlineInfo?.dispatcherLanguageId ?? -1) - (b.onlineInfo?.dispatcherLanguageId ?? -1);
+      break;
+
    case 'routes-single':
      diff =
        (a.generalInfo?.routes.single.filter((r) => !r.hidden && !r.isInternal).length ?? -1) -
@@ -243,7 +271,7 @@ export const sortStations = (a: Station, b: Station, sorter: ActiveSorter) => {
  return a.name.localeCompare(b.name);
 };

-export const filterStations = (station: Station, filters: Record<string, any>) => {  
+export const filterStations = (station: Station, filters: Record<string, any>) => {
  if (filters['free'] && (!station.onlineInfo || station.onlineInfo.dispatcherId == -1))
    return false;

@@ -13,6 +13,7 @@ import BaseTooltip from './BaseTooltip.vue';
 import SpawnsTooltip from './SpawnsTooltip.vue';
 import UsersTooltip from './UsersTooltip.vue';
 import HtmlTooltip from './HtmlTooltip.vue';
+import TrainInfoTooltip from "./TrainInfoTooltip.vue";

 const BOX_PADDING_PX = 20;

@@ -23,7 +24,8 @@ export default defineComponent({
    BaseTooltip,
    SpawnsTooltip,
    UsersTooltip,
-    HtmlTooltip
+    HtmlTooltip,
+    TrainInfoTooltip
  },

  data() {
@@ -0,0 +1,78 @@
+<template>
+  <div class="tooltip-content">
+    <span v-if="trainInfo">
+      <b v-if="trainInfo.timetableData" style="text-transform: uppercase">
+        <span class="text--primary">{{ trainInfo.timetableData.category }}</span>
+        {{ getCategoryExplanation(trainInfo.timetableData.category) }}
+      </b>
+
+      <div class="text--primary">
+        <b>{{ trainInfo.stockList[0] }}</b> &bull; {{ trainInfo.length }}m &bull;
+        {{ (trainInfo.mass / 1000).toFixed(2) }}t
+        <span v-if="trainInfo.timetableData">
+          &bull; vRJ:
+          {{
+            trainInfo.timetableData?.trainMaxSpeed ||
+            getStockSpeedLimit(trainInfo.stockList, trainInfo.mass)
+          }}km/h
+        </span>
+        <span v-else class="text--grayed font--italic">
+          &bull; vMax:
+          {{ getStockSpeedLimit(trainInfo.stockList, trainInfo.mass) }}km/h
+        </span>
+      </div>
+
+      <div class="text--grayed">
+        {{ displayTrainPosition(trainInfo) }} - {{ trainInfo.speed }}km/h
+        <span v-if="!trainInfo.online" style="color: salmon">
+          - offline {{ lastSeenMessage(trainInfo.lastSeen) }}</span
+        >
+      </div>
+
+      <div></div>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useTooltipStore } from '../../store/tooltipStore';
+import trainCategoryMixin from '../../mixins/trainCategoryMixin';
+import trainInfoMixin from '../../mixins/trainInfoMixin';
+import { useMainStore } from '../../store/mainStore';
+
+export default defineComponent({
+  mixins: [trainCategoryMixin, trainInfoMixin],
+
+  data: () => ({
+    tooltipStore: useTooltipStore(),
+    mainStore: useMainStore()
+  }),
+
+  computed: {
+    trainInfo() {
+      if (this.tooltipStore.content == '') return null;
+
+      // Passed "content" string should be the desired train's ID
+      return this.mainStore.trainList.find((t) => t.id === this.tooltipStore.content);
+    },
+
+    lastSceneryStatus() {}
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.tooltip-content {
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+
+  width: 100%;
+  background-color: #1f1f1f;
+  box-shadow: 0 0 5px 2px #aaa;
+}
+
+img {
+  height: 1em;
+}
+</style>
@@ -10,7 +10,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { useTooltipStore } from '../../store/tooltipStore';
-import { Train } from '../../typings/common';
+import { TooltipUserTrain } from '../../typings/common';

 export default defineComponent({
  data() {
@@ -23,7 +23,7 @@ export default defineComponent({
    trains() {
      if (this.tooltipStore.content == '') return [];

-      const parsedTrains = JSON.parse(this.tooltipStore.content) as Train[];
+      const parsedTrains = JSON.parse(this.tooltipStore.content) as TooltipUserTrain[];
      return (parsedTrains ?? []).sort((a, b) => a.trainNo - b.trainNo);
    }
  }
@@ -18,9 +18,9 @@
      <span v-if="vehicleCargo">({{ vehicleCargo.id }})</span>
    </div>

-    <div class="vehicle-props" v-if="vehicleData">
-      {{ vehicleData.group.speed }}km/h &bull; {{ vehicleData.group.length }}m &bull;
-      {{ (vehicleData.group.weight / 1000).toFixed(1) }}t
+    <div class="vehicle-props" v-if="vehicleGroup">
+      {{ vehicleGroup.speed }}km/h &bull; {{ vehicleGroup.length }}m &bull;
+      {{ (vehicleGroup.weight / 1000).toFixed(1) }}t
      <span v-if="vehicleCargo">(+{{ (vehicleCargo.weight / 1000).toFixed(1) }}t)</span>
    </div>
  </div>
@@ -73,12 +73,18 @@ export default defineComponent({
      return this.tooltipStore.content.split(':')[0];
    },

-    vehicleData() {
-      return this.apiStore.vehiclesData?.find((v) => v.name == this.vehicleName);
+    vehicleGroup() {
+      if (!this.apiStore.vehiclesData) return null;
+
+      const vehicle = this.apiStore.vehiclesData.vehicles.find((v) => v.name == this.vehicleName);
+
+      if (!vehicle) return null;
+
+      return this.apiStore.vehiclesData.vehicleGroups.find((g) => g.id == vehicle?.vehicleGroupsId);
    },

    vehicleCargo() {
-      const x = this.vehicleData?.group.cargoTypes?.find(
+      const x = this.vehicleGroup?.cargoTypes?.find(
        (c) => c.id == this.tooltipStore.content.split(':')[1]
      );

@@ -66,6 +66,10 @@

          <span v-else>{{ train.driverName }}</span>
        </div>
+
+        <div class="train-language-flag">
+          <FlagIcon :language-id="train.driverLanguageId" width="1.75em" />
+        </div>
      </div>
    </div>

@@ -110,7 +114,10 @@
          {{ $t('trains.scenery-offline') }}
        </div>

-        <div v-if="!train.online" class="train-badge offline">
+        <div
+          v-if="!train.online && train.lastSeen <= Date.now() - 60000"
+          class="train-badge offline"
+        >
          <i class="fa-solid fa-user-slash"></i>
          Offline {{ lastSeenMessage(train.lastSeen) }}
        </div>
@@ -132,7 +139,11 @@
        <img src="/images/icon-speed.svg" alt="speed icon" />
        {{ train.speed }} km/h

-        <span v-if="stockSpeedLimit != Infinity">
+        <span v-if="train.timetableData">
+          &bull; vRJ: {{ train.timetableData.trainMaxSpeed }} km/h
+        </span>
+
+        <span v-else-if="stockSpeedLimit != Infinity">
          &bull;
          <em
            class="text--grayed"
@@ -192,10 +203,11 @@ import trainInfoMixin from '../../mixins/trainInfoMixin';
 import trainCategoryMixin from '../../mixins/trainCategoryMixin';
 import ProgressBar from '../Global/ProgressBar.vue';
 import StockList from '../Global/StockList.vue';
+import FlagIcon from '../Global/FlagIcon.vue';

 export default defineComponent({
  mixins: [trainInfoMixin, styleMixin, trainCategoryMixin],
-  components: { ProgressBar, StockList },
+  components: { ProgressBar, StockList, FlagIcon },

  props: {
    train: {
@@ -216,57 +228,9 @@ export default defineComponent({

  computed: {
    stockSpeedLimit() {
-      let isPassenger = true;
-
-      // Check the whole consist speed limit
-      const vehicleMaxSpeed = this.train.stockList.reduce((acc, stockName, i) => {
-        const [vehicleName, vehicleCargo] = stockName.split(':');
-
-        const vehicleData = this.apiStore.vehiclesData?.find((v) => v.name == vehicleName);
-
-        if (!vehicleData) return acc;
-
-        let vehicleSpeed = vehicleData.group.speed;
-
-        if (vehicleData.type == 'wagon-freight') {
-          isPassenger = false;
-
-          if (vehicleCargo !== undefined && vehicleData.group.speedLoaded) {
-            vehicleSpeed = vehicleData.group.speedLoaded;
-          }
-        }
-
-        return Math.min(vehicleSpeed, acc);
-      }, Infinity);
-
-      // Check the head vehicle speed limit
-      const headLocoName = this.train.stockList[0];
-      const headLocoVehicleData = this.apiStore.vehiclesData?.find((v) => v.name == headLocoName);
-
-      // Omit speed check for head vehicle if there's no data for it
-      if (!headLocoName || !headLocoVehicleData || !headLocoVehicleData.group.massSpeeds)
-        return vehicleMaxSpeed;
-
-      const massSpeeds =
-        headLocoVehicleData.group.massSpeeds[
-          this.train.stockList.length == 1 ? 'none' : isPassenger ? 'passenger' : 'cargo'
-        ];
-
-      // Omit speed check if there's no data on mass speeds
-      if (!massSpeeds) return vehicleMaxSpeed;
-
-      // Number type for locomotives alone
-      if (typeof massSpeeds === 'number') return massSpeeds;
-
-      // Record type for passenger or cargo, find the closest range
-      const massKey = Object.keys(massSpeeds).findLast(
-        (massKey) => this.train.mass >= Number(massKey)
-      );
-
-      const massMaxSpeed = massKey ? massSpeeds[massKey] : Infinity;
-
-      return Math.min(massMaxSpeed, vehicleMaxSpeed);
+      return this.getStockSpeedLimit(this.train.stockList, this.train.mass);
    },
+
    journalRouteLocation() {
      return {
        path: '/journal/timetables',
@@ -394,6 +358,7 @@ export default defineComponent({
 .status-badges {
  display: flex;
  flex-wrap: wrap;
+  margin-left: 0.25em;

  gap: 0.25em;

@@ -30,17 +30,22 @@
            </div>

            <div class="search-box">
-              <select
-                class="search-input"
-                name="active-trains"
-                id="active-trains"
-                v-model="searchedDriver"
-              >
-                <option value="">{{ $t('options.select-driver') }}</option>
+              <datalist id="search-active-driver">
                <option v-for="driverName in activeDriverNames" :value="driverName">
                  {{ driverName }}
                </option>
-              </select>
+              </datalist>
+
+              <input
+                class="search-input"
+                list="search-active-driver"
+                name="search-active-driver"
+                id="search-active-driver"
+                :placeholder="$t(`options.search-driver`)"
+                v-model="searchedDriver"
+                @focus="preventKeyDown = true"
+                @blur="preventKeyDown = false"
+              />

              <button class="btn btn--action search-exit" @click="onInputClear('driver')">
                <img src="/images/icon-exit.svg" alt="Trains search clear icon" />
@@ -12,8 +12,16 @@
          :data-delayed="stop.departureDelay > 0"
          :data-stop-type="stop.type"
          :data-is-active="stop.isActive"
-          :data-track-count-departure="stop.departureLineInfo?.routeTracks ?? 2"
-          :data-track-count-arrival="stop.arrivalLineInfo?.routeTracks ?? 2"
+          :data-track-count-departure="
+            stop.departureLineInfo?.routeTracks ??
+            stop.nextPointRef?.arrivalLineInfo?.routeTracks ??
+            2
+          "
+          :data-track-count-arrival="
+            stop.arrivalLineInfo?.routeTracks ??
+            scheduleStops[i - 1]?.departureLineInfo?.routeTracks ??
+            2
+          "
        >
          <span class="stop_info">
            <span class="distance">
@@ -60,7 +68,8 @@
                    <span>
                      |
                      {{
-                        stop.departureLineInfo.routeSpeedExit
+                        stop.departureLineInfo.routeSpeedExit &&
+                        stop.departureLineInfo.routeSpeedExit != stop.departureLineInfo.routeSpeed
                          ? `${stop.departureLineInfo.routeSpeedExit} (${stop.departureLineInfo.routeSpeed})`
                          : stop.departureLineInfo.routeSpeed
                      }}</span
@@ -113,10 +122,16 @@
                  <span> {{ stop.nextPointRef.arrivalLine }}</span>

                  <span v-if="stop.nextPointRef.arrivalLineInfo">
-                    <span> | {{ stop.nextPointRef.arrivalLineInfo!.routeSpeed }}</span>
-                    <span v-if="stop.nextPointRef.arrivalLineInfo!.routeSpeedExit"
-                      >({{ stop.nextPointRef.arrivalLineInfo!.routeSpeedExit }})</span
+                    <span> | {{ stop.nextPointRef.arrivalLineInfo.routeSpeed }}</span>
+                    <span
+                      v-if="
+                        stop.nextPointRef.arrivalLineInfo.routeSpeedExit &&
+                        stop.nextPointRef.arrivalLineInfo.routeSpeedExit !=
+                          stop.nextPointRef.arrivalLineInfo.routeSpeed
+                      "
                    >
+                      ({{ stop.nextPointRef.arrivalLineInfo.routeSpeedExit }})
+                    </span>

                    <img
                      :src="
@@ -186,26 +201,28 @@ export default defineComponent({
      const sceneryData =
        this.store.stationList?.find((sc) => sc.name == pathEl.stationName) ?? null;

-      if (!sceneryData || !sceneryData.generalInfo) return null;
-
      const activeScenery = this.apiStore.activeData?.activeSceneries?.find(
        (sc) => sc.stationName == pathEl.stationName
      );

-      const arrivalLineData = pathEl.arrivalRouteExt
-        ? (sceneryData.generalInfo.routes.all.find(
-            (rt) => rt.routeName == pathEl.arrivalRouteExt
-          ) ?? null)
+      const arrivalLineData = sceneryData?.generalInfo
+        ? pathEl.arrivalRouteExt
+          ? (sceneryData.generalInfo.routes.all.find(
+              (rt) => rt.routeName == pathEl.arrivalRouteExt
+            ) ?? null)
+          : null
        : null;

-      const departureLineData = pathEl.departureRouteExt
-        ? (sceneryData.generalInfo.routes.all.find(
-            (rt) => rt.routeName == pathEl.departureRouteExt
-          ) ?? null)
+      const departureLineData = sceneryData?.generalInfo
+        ? pathEl.departureRouteExt
+          ? (sceneryData.generalInfo.routes.all.find(
+              (rt) => rt.routeName == pathEl.departureRouteExt
+            ) ?? null)
+          : null
        : null;

      return {
-        generalInfo: sceneryData.generalInfo,
+        generalInfo: sceneryData?.generalInfo ?? null,
        isOnline:
          activeScenery &&
          (activeScenery.isOnline == 1 || activeScenery.lastSeen >= Date.now() - 60000),
@@ -234,7 +251,7 @@ export default defineComponent({
      let isActive = false;

      if (pathData?.departureLineData) {
-        // arrivalLineInfo = pathData.departureLineData;
+        arrivalLineInfo = pathData.departureLineData;
        departureLineInfo = pathData.departureLineData;
      }

@@ -245,22 +262,16 @@ export default defineComponent({
          isExternal = true;

          departureLineInfo = pathData?.arrivalLineData ?? null;
-
-          if (pathData?.arrivalLineData) {
-            arrivalLineInfo = pathData.arrivalLineData;
-          }
+          arrivalLineInfo = pathData.arrivalLineData;
        }

-        let correctedDepartureLineData: StationRoutesInfo | null = null;
-
        const internalRouteInfo = stop.departureLine
-          ? pathData?.generalInfo.routes.all.find(
+          ? pathData?.generalInfo?.routes.all.find(
              (route) => route.isInternal && route.routeName == stop.departureLine
            )
          : undefined;

        if (internalRouteInfo) {
-          correctedDepartureLineData = internalRouteInfo;
          departureLineInfo = internalRouteInfo;
        }

@@ -13,10 +13,10 @@

    <transition name="dropdown-anim">
      <div class="dropdown_wrapper" v-if="showOptions">
-        <h1 class="text--primary">
+        <h2 class="stats-title text--primary">
          <img src="/images/icon-stats.svg" alt="Open filters icon" height="28" />
          {{ $t('train-stats.title') }}
-        </h1>
+        </h2>

        <hr style="margin: 0.5em 0" />

@@ -229,7 +229,7 @@ export default defineComponent({
@use '../../styles/badge';
@use '../../styles/responsive';

-h1 img {
+.stats-title img {
  vertical-align: text-bottom;
 }

@@ -257,7 +257,7 @@ h3 {
    text-align: center;
  }

-  h1 {
+  .stats-title {
    text-align: center;
  }
 }
@@ -97,7 +97,7 @@ export default defineComponent({
@use '../../styles/animations';

 .train-table {
-  height: calc(100vh - 11em);
+  height: calc(100vh - 17em);
  min-height: 500px;

  position: relative;
@@ -0,0 +1,8 @@
+export function calculateExpStyles(exp: number, isSupporter = false) {
+  const bgColor = exp > -1 ? (exp < 2 ? '#26B0D9' : `hsl(${-exp * 5 + 100},  85%, 50%)`) : '#666';
+
+  const fontColor = exp > 14 || exp == -1 ? 'white' : 'black';
+  const boxShadow = isSupporter ? `0 0 6px 2px ${bgColor};` : '';
+
+  return { 'background-color': bgColor, color: fontColor, 'box-shadow': boxShadow };
+}
@@ -0,0 +1,37 @@
+import { useI18n } from 'vue-i18n';
+
+export function calculateDuration(timestampMs: number) {
+  const secondsTotal = Math.floor(timestampMs / 1000);
+  const minsTotal = Math.round(timestampMs / 60000);
+  const hoursTotal = Math.floor(minsTotal / 60);
+  const minsInHour = minsTotal % 60;
+
+  return {
+    secondsTotal,
+    minsTotal,
+    hoursTotal,
+    minsInHour
+  };
+}
+
+export function humanizeDuration(timestampMs: number, showSeconds = false) {
+  const { t } = useI18n();
+
+  const duration = calculateDuration(timestampMs);
+
+  return duration.minsTotal >= 60
+    ? `${t('journal.hours', { value: duration.hoursTotal }, duration.hoursTotal)} ${t(
+        'journal.minutes',
+        { value: duration.minsInHour },
+        duration.minsInHour
+      )}`
+    : showSeconds && duration.secondsTotal <= 60
+      ? t('journal.seconds', { value: duration.secondsTotal }, duration.secondsTotal)
+      : t('journal.minutes', { value: duration.minsTotal }, duration.minsTotal);
+}
+
+export function dateToLocaleString(date: Date, dateOptions: Intl.DateTimeFormatOptions) {
+  const { locale } = useI18n();
+
+  return date.toLocaleString(locale.value == 'pl' ? 'pl-PL' : 'en-GB', dateOptions);
+}
@@ -23,6 +23,15 @@
    "bottom-text": "Enjoy!\n~Spythere",
    "button-confirm": "Start using the app!"
  },
+  "migrate-info": {
+    "tooltip-content": "Information about migration of\nStacjownik site!",
+    "header-text": "Attention!",
+    "paragraph-1-html": "Due to the growing interest in Stacjownik and other applications I have made, <b>as of January 1, 2026, Stacjownik will be <u>permanently moved</u> to a new dedicated domain:</b>",
+    "paragraph-2-link-text": "https://stacjownik-td2.spythere.eu",
+    "paragraph-3-text": "This website will no longer receive future updates and after the New Year it will only redirect to the address above.",
+    "paragraph-4-italic-text": "\"Why are you messing this up? It's been fine for so long!\"",
+    "paragraph-4-html": "<i>\"Why are you messing this up? It's been fine for so long!\"</i> <br /> The change is mainly caused by the growing website interest and exceeding the free limit plan of the current Google hosting, which forces additional fees for each use of the service above a certain threshold (or otherwise blocks access to it). By moving the site to a dedicated domain (which has already been purchased and is maintained with the financial help of <span class=\"text--donator\">Supporters</span>), I will get rid of unnecessary expenses for a large corporation that can shut down my application at any given time."
+  },
  "donations": {
    "button-title": "TOSS A COIN",
    "header": "Toss a coin to Stacjownik!",
@@ -60,7 +69,8 @@
    "confirm": "ROGER THAT!",
    "no-data": "No data about the latest app update has been found",
    "info-1": "This changelog will be available to see once again after clicking the version number in the footer",
-    "info-2": "The full app changelog available on <a href='https://github.com/Spythere/stacjownik' target='_blank'>the project's GitHub</a>"
+    "info-2": "The full app changelog available on {link}",
+    "info-2-link-text": "the project's GitHub page"
  },
  "app": {
    "sceneries": "SCENERIES",
@@ -76,10 +86,9 @@
    "tooltip-driver-offline": "Driver is offline",
    "tooltip-scenery-offline": "Scenery is offline",
    "pojazdownik-link-content": "POJAZDOWNIK",
-    "gnr-link-content": "TRAIN ORDERS <br> GENERATOR"
-  },
-  "footer": {
-    "discord": "Stacjownik Discord server"
+    "language-tooltip-content": "JĘZYK / LANGUAGE",
+    "gnr-link-content": "TRAIN ORDERS <br> GENERATOR",
+    "discord-link-content": "STACJOWNIK <br> DISCORD SERVER"
  },
  "categories": {
    "EI": "domestic express",
@@ -142,7 +151,7 @@
    "title": "Control type",
    "SPK": "SPK",
    "SCS": "SCS",
-    "SCS-SPK": "SCS/SPK",
+    "SCS-SPK": "SCS + SPK",
    "SPE": "SPE",
    "ręczne": "manual",
    "ręczne+SPK": "manual + SPK",
@@ -153,7 +162,7 @@
    "abbrevs": {
      "SPK": "SPK",
      "SCS": "SCS",
-      "SCS-SPK": "S/S",
+      "SCS-SPK": "S+S",
      "SPE": "SPE",
      "ręczne": "R",
      "ręczne+SPK": "R",
@@ -186,9 +195,11 @@
    "search-train": "Train no. / #",
    "select-driver": "Choose a driver...",
    "search-driver": "Driver name",
+    "search-duty-id": "Duty ID",
    "search-dispatcher": "Dispatcher name",
    "search-station": "Scenery name / #",
    "search-author": "Timetable author name",
+    "search-includesScenery": "Includes scenery name",
    "search-issuedFrom": "Issuing scenery name",
    "search-via": "Via scenery name",
    "search-terminatingAt": "Terminating scenery name",
@@ -271,6 +282,7 @@
    "SCS": "SCS",
    "SCS-R": "SCS + MANUAL",
    "SCS-M": "SCS + MECH.",
+    "SCS-SPK": "SCS + SPK",
    "SPE": "SPE",
    "manual": "MANUAL",
    "mechanical": "MECHANICAL",
@@ -304,10 +316,10 @@
      "minTwoWayCatenaryInt": "MIN. INTERNAL CATENARY DOUBLE TRACK ROUTES",
      "minTwoWayInt": "MIN. INTERNAL OTHER DOUBLE TRACK ROUTES"
    },
-    "sceneries-search": "SCENERY SEARCH:",
-    "sceneries-placeholder": "Enter scenery name...",
-    "authors-search": "SEARCH BY AUTHOR NAME (other filters apply):",
-    "authors-placeholder": "Enter the author nickname...",
+    "sceneries-placeholder": "Search for scenery",
+    "line-numbers-placeholder": "Line numbers (separated by commas)",
+    "authors-placeholder": "Scenery author",
+    "projects-placeholder": "Scenery project",
    "search-button-title": "SEARCH",
    "minimum-hours-title": "SHOW ONLY SCENERIES UNTIL:",
    "now": "NOW",
@@ -324,6 +336,7 @@
      "min-lvl": "Scenery\nlevel",
      "status": "Status",
      "dispatcher": "Dispatcher",
+      "dispatcher-lang": "Language",
      "dispatcher-lvl": "Dispatcher\nlevel",
      "routes-single": "1-track\nroutes",
      "routes-double": "2-track\nroutes",
@@ -337,18 +350,20 @@
    },
    "info": {
      "control-type": "Control type: ",
-      "signals-type": "Signals type: ",
-      "SBL": "This scenery has automatic block signalling (ABS/SBL) system on following routes: ",
+      "signals-type": "Signalling type: ",
+      "SBL": "A scenery with automatic block signalling (ABS/SBL) on routes: ",
      "SUP": "Requires the SUP program (level crossing remote control)",
-      "ASDEK": "Requires the ASDEK program (defect detection of moving rolling stock)",
+      "ASDEK": "ASDEK program available (defect detection of moving rolling stock)",
      "TWB-all": "This scenery has two-way route blockade on all routes",
      "TWB-routes": "This scenery has two-way route blockade on following routes: ",
-      "default": "This scenery is available by default",
-      "non-public": "This scenery is not public",
-      "unavailable": "This scenery is unavailable",
-      "abandoned": "This scenery is no longer supported by its creators",
-      "unknown": "This scenery isn't recognizable right now",
-      "real": "Scenery with real lines: ",
+      "default": "Scenery available in the game package",
+      "nonDefault": "Scenery available to download from the forum site",
+      "req-level": "all dispatcher levels | requries {lvl} dispatcher lvl | requires {lvl} dispatcher lvl",
+      "non-public": "Non-public scenery",
+      "unavailable": "Unavailable scenery",
+      "abandoned": "Abandoned scenery",
+      "unknown": "Unknown scenery",
+      "real": "Scenery with real Polish routes: ",
      "double-track-routes-catenary": "Electrified double-track routes count: ",
      "single-track-routes-catenary": "Electrified single-track routes count: ",
      "double-track-routes-other": "Not electrified double-track routes count: ",
@@ -412,7 +427,7 @@
    "last-seen-ago": "since {minutes} minutes",
    "scenery-offline": "Offline ride",
    "timeout": "An error occured while trying to refresh SWDR timetable data!",
-    "driver-journal-link": "DRIVER JOURNAL",
+    "driver-profile-link": "PLAYER'S PROFILE",
    "driver-srjp-link": "SRJP",
    "driver-return-link": "RETURN",
    "driver-not-found-header": "Train not found! :/",
@@ -557,12 +572,13 @@
    "option-active-timetables": "Active timetables",
    "option-timetables-history": "Timetables history PL1",
    "option-dispatchers-history": "Dispatchers history PL1",
-    "timetable-via": "ALL TIMETABLES",
+    "timetable-includesScenery": "ALL TIMETABLES",
+    "timetable-via": "PASSES THROUGH",
    "timetable-issuedFrom": "BEGINS HERE",
-    "timetable-terminatingAt": "TERMINATES HERE",
+    "timetable-terminatingAt": "ENDS HERE",
    "timetable-issued-date": "Issued",
    "timetable-issued-by": " by:",
-    "timetable-issued-for": " for driver:",
+    "timetable-issued-for": " for:",
    "dispatcher-rate": "Rate:",
    "dispatcher-status-changes": "Status changes:",
    "req-level": "all dispatcher levels | dispatcher level {lvl} required | dispatcher level {lvl} required",
@@ -591,20 +607,65 @@
    "terminates": "TERMINATES\nHERE",
    "from": "Arrives from",
    "to": "Departs to",
-    "desc-beginning": "The train begins here",
-    "desc-arriving": "<i>Arrives from: <b>{prevStationName} ({prevDepartureLine})</b></i>",
-    "desc-online": "On scenery / <i>direction: <b>{nextStationName} ({nextArrivalLine})</b></i>",
-    "desc-stopped": "On scenery - stopped / <i>direction: <b>{nextStationName} ({nextArrivalLine})</b></i>",
-    "desc-next-arrival": "On scenery / <i>direction: <b>{nextStationName} ({nextArrivalLine})</b></i>",
-    "desc-departed": "On scenery / <i>departed to: <b>{nextStationName} ({nextArrivalLine})</b></i>",
-    "desc-departed-ends": "On scenery / <i>departed to: <b>{nextStationName}</b></i>",
-    "desc-departed-away": "<i>Departed to: <b>{nextStationName} ({nextArrivalLine})</b></i>",
+    "desc-beginning": "Outside scenery / begins here",
+    "desc-arriving": "Arrives from: <b><u>{prevStationName} ({prevDepartureLine})</u></b>",
+    "desc-online": "On scenery / direction: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-stopped": "On scenery - stopped / direction: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-next-arrival": "On scenery / direction: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-departed": "On scenery / departed to: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-departed-ends": "On scenery / departed to: <b><u>{nextStationName}</u></b>",
+    "desc-departed-away": "Departed to: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
    "desc-end": "The train terminates here",
    "desc-terminated": "The train has been terminated"
  },
-  "history": {
-    "title": "TIMETABLE JOURNAL",
-    "search-train": "Train no.",
-    "search-driver": "Driver name"
+  "profile": {
+    "journal-button": "PLAYER'S PROFILE",
+    "no-player-found": "Player not found! :/",
+    "return-to-main": "Return to the main site",
+
+    "filters": {
+      "Timetable": "TIMETABLES",
+      "Dispatcher": "DISPATCHER DUTIES",
+      "IssuedTimetable": "ISSUED TIMETABLES"
+    },
+
+    "stats": {
+      "timetables-journal": "TIMETABLE JOURNAL",
+      "dispatchers-journal": "DISPATCHER JOURNAL",
+      "forum-profile": "FORUM PROFILE",
+
+      "driver": "DRIVER",
+      "dispatcher": "DISPATCHER",
+
+      "header-driver": "DRIVER'S STATS",
+      "fulfilled-timetables": "fulfilled timetables",
+      "route-distance": "confirmed timetables distance",
+      "confirmed-stops": "confirmed stations in timetables",
+      "longest-timetable": "longest timetable",
+      "avg-timetable-length": "average distance of all timetables",
+      "no-timetable-stats": "This player does not have any registered timetables in Stacjownik!",
+
+      "header-dispatcher": "DISPATCHER'S STATS",
+      "duties-count": "duties as dispatcher",
+      "longest-duty": "longest duty",
+      "created-timetables-count": "issued timetables as dispatcher",
+      "longest-created-timetable": "longest issued timetable",
+      "created-timetables-length-sum": "distance sum of issued timetables",
+      "no-dispatcher-stats": "No registered dispatcher duties in Stacjownik!"
+    },
+
+    "recent-stats": {
+      "header": "ACTIVITY STATISTICS (30 LAST DAYS)",
+      "timetables": "TIMETABLES",
+      "distance": "MADE KILOMETERS",
+      "duties": "DISPATCHER DUTIES",
+      "created-timetables": "ISSUED TIMETABLES"
+    },
+
+    "list": {
+      "for": "for",
+      "online-since": "online since",
+      "no-recent-history": "No recent activity in the simulator :("
+    }
  }
-}
+}
@@ -23,6 +23,14 @@
    "bottom-text": "Miłego korzystania\n~Spythere",
    "button-confirm": "Zacznij korzystać z aplikacji!"
  },
+  "migrate-info": {
+    "tooltip-content": "Informacja o migracji\nstrony Stacjownika!",
+    "header-text": "Uwaga!",
+    "paragraph-1-html": "Ze względu na coraz większe zainteresowanie Stacjownikiem oraz innymi aplikacjami mojego autorstwa <b>z dniem 1 stycznia 2026r. Stacjownik zostaje <u>permamentnie przeniesiony</u> na nową dedykowaną domenę:</b>",
+    "paragraph-2-link-text": "https://stacjownik-td2.spythere.eu",
+    "paragraph-3-text": "Obecna strona nie będzie otrzymywać już przyszłych aktualizacji, a po Nowym Roku będzie jedynie przenosić na powyższy adres.",
+    "paragraph-4-html": "<i>\"Po co psujesz? Przecież było dobrze tyle czasu!\"</i> <br /> Zmiana podyktowana jest głównie wzrostem zainteresowania stroną i przekraczaniem darmowego limitu obecnego hostingu Google'a, który wymusza płatność za każde użycie serwisu ponad określoną wartość (lub w przeciwnym wypadku blokuje do niego dostęp). Przenosząc stronę na dedykowaną domenę (która jest już wykupiona i utrzymywana dzięki pomocy <span class=\"text--donator\">Wspierających</span>), pozbędę się niepotrzebnego wydatku dla wielkiej korporacji, która w każdej chwili może mi wyłączyć aplikację."
+  },
  "donations": {
    "button-title": "GROSZA DAJ",
    "header": "Grosza daj Stacjownikowi!",
@@ -60,7 +68,8 @@
    "confirm": "PRZYJĄŁEM!",
    "no-data": "Nie znaleziono informacji o ostatnich zmianach w aplikacji",
    "info-1": "Ten changelog będzie zawsze dostępny po kliknięciu numeru wersji w stopce strony",
-    "info-2": "Pełny changelog dostępny na <a href='https://github.com/Spythere/stacjownik' target='_blank'>GitHubie projektu</a>"
+    "info-2": "Pełny changelog dostępny na {link}",
+    "info-2-link-text": "GitHubie projektu"
  },
  "app": {
    "sceneries": "SCENERIE",
@@ -73,10 +82,9 @@
    "tooltip-driver-offline": "Maszynista offline",
    "tooltip-scenery-offline": "Sceneria offline",
    "pojazdownik-link-content": "POJAZDOWNIK",
-    "gnr-link-content": "GENERATOR <br> ROZKAZÓW PISEMNYCH"
-  },
-  "footer": {
-    "discord": "Serwer Discord Stacjownika"
+    "language-tooltip-content": "JĘZYK / LANGUAGE",
+    "gnr-link-content": "GENERATOR <br> ROZKAZÓW PISEMNYCH",
+    "discord-link-content": "SERWER DISCORD <br> STACJOWNIKA"
  },
  "categories": {
    "EI": "ekspres krajowy",
@@ -139,7 +147,7 @@
    "title": "Sterowanie",
    "SPK": "SPK",
    "SCS": "SCS",
-    "SCS-SPK": "SCS/SPK",
+    "SCS-SPK": "SCS + SPK",
    "SPE": "SPE",
    "ręczne": "ręczne",
    "ręczne+SPK": "ręczne z SPK",
@@ -150,7 +158,7 @@
    "abbrevs": {
      "SPK": "SPK",
      "SCS": "SCS",
-      "SCS-SPK": "S/S",
+      "SCS-SPK": "S+S",
      "SPE": "SPE",
      "ręczne": "R",
      "ręczne+SPK": "R",
@@ -183,9 +191,11 @@
    "search-train": "Nr pociągu / #",
    "search-driver": "Nick maszynisty",
    "select-driver": "Wybierz maszynistę...",
+    "search-duty-id": "ID służby",
    "search-dispatcher": "Nick dyżurnego",
    "search-station": "Nazwa scenerii / #",
    "search-author": "Nick autora rozkładu jazdy",
+    "search-includesScenery": "Zawiera scenerię",
    "search-issuedFrom": "Sceneria początkowa",
    "search-via": "Przez scenerię",
    "search-terminatingAt": "Sceneria końcowa",
@@ -269,6 +279,7 @@
    "SCS": "SCS",
    "SCS-R": "SCS + RĘCZNE",
    "SCS-M": "SCS + MECH.",
+    "SCS-SPK": "SCS + SPK",
    "SPE": "SPE",
    "manual": "RĘCZNE",
    "SUP": "SUP (RASP-UZK)",
@@ -302,10 +313,10 @@
      "minTwoWayCatenaryInt": "SZLAKI DWUTOROWE ZELEKTR. WEWNĘTRZNE (MINIMUM)",
      "minTwoWayInt": "SZLAKI DWUTOROWE NIEZELEKTR. WEWNĘTRZNE (MINIMUM)"
    },
-    "sceneries-search": "WYSZUKAJ SCENERIĘ:",
-    "sceneries-placeholder": "Wpisz nazwę scenerii...",
-    "authors-search": "WYSZUKAJ AUTORA (uwzględnia inne filtry):",
-    "authors-placeholder": "Wpisz nick autora...",
+    "sceneries-placeholder": "Wyszukaj scenerię",
+    "line-numbers-placeholder": "Numery linii (oddzielone przecinkami)",
+    "authors-placeholder": "Autor scenerii",
+    "projects-placeholder": "Projekt scenerii",
    "search-button-title": "SZUKAJ",
    "minimum-hours-title": "POKAŻ TYLKO SCENERIE DOSTĘPNE MINIMUM DO:",
    "now": "TERAZ",
@@ -322,6 +333,7 @@
      "min-lvl": "Poziom\nscenerii",
      "status": "Status",
      "dispatcher": "Dyżurny",
+      "dispatcher-lang": "Język",
      "dispatcher-lvl": "Poziom\ndyżurnego",
      "routes-single": "Szlaki\n1-torowe",
      "routes-double": "Szlaki\n2-torowe",
@@ -338,8 +350,10 @@
      "signals-type": "Sygnalizacja: ",
      "SBL": "Sceneria posiada SBL na szlakach: ",
      "SUP": "Wymaga programu SUP do kontroli systemu RASP-UZK",
-      "ASDEK": "Wymaga programu ASDEK do detekcji stanów awaryjnych taboru w ruchu",
+      "ASDEK": "Dostępny program ASDEK do detekcji stanów awaryjnych taboru w ruchu",
      "default": "Sceneria dostępna domyślnie w paczce z grą",
+      "nonDefault": "Sceneria dostępna do pobrania z forum symulatora",
+      "req-level": "ogólnodostępna | od {lvl} poz. DR | od {lvl} poz. DR",
      "non-public": "Sceneria niepubliczna",
      "unavailable": "Sceneria niedostępna",
      "abandoned": "Sceneria wycofana z rozgrywki",
@@ -399,7 +413,7 @@
    "last-seen-ago": "od {minutes} minut",
    "scenery-offline": "Przejazd offline",
    "timeout": "Wystąpił problem z aktualizacją rozkładów jazdy z SWDR",
-    "driver-journal-link": "DZIENNIK MASZYNISTY",
+    "driver-profile-link": "PROFIL GRACZA",
    "driver-srjp-link": "SRJP",
    "driver-return-link": "POWRÓT",
    "driver-not-found-header": "Nie znaleziono pociągu! :/",
@@ -543,12 +557,13 @@
    "option-active-timetables": "Aktywne rozkłady jazdy",
    "option-timetables-history": "Historia rozkładów PL1",
    "option-dispatchers-history": "Historia dyżurów PL1",
-    "timetable-via": "WSZYSTKIE RJ",
+    "timetable-includesScenery": "WSZYSTKIE RJ",
+    "timetable-via": "PRZEJEŻDŻA",
    "timetable-issuedFrom": "ROZPOCZYNA BIEG",
    "timetable-terminatingAt": "KOŃCZY BIEG",
-    "timetable-issued-date": "Wystawiony",
+    "timetable-issued-date": "Wystawiony: ",
    "timetable-issued-by": " przez:",
-    "timetable-issued-for": " dla maszynisty:",
+    "timetable-issued-for": " dla:",
    "dispatcher-rate": "Ocena:",
    "dispatcher-status-changes": "Zmiany statusów:",
    "req-level": "ogólnodostępna | minimum {lvl} poziom dyżurnego | minimum {lvl} poziom dyżurnego",
@@ -577,18 +592,65 @@
    "terminates": "KOŃCZY BIEG",
    "from": "Przyjedzie z",
    "to": "Odjeżdża do",
-    "desc-beginning": "Pociąg rozpoczyna bieg",
-    "desc-arriving": "<i>Przyjedzie z: <b>{prevStationName} ({prevDepartureLine})</b></i>",
-    "desc-online": "Na scenerii / <i>kierunek: <b>{nextStationName} ({nextArrivalLine})</b></i>",
-    "desc-stopped": "Na scenerii - postój / <i>kierunek: <b>{nextStationName} ({nextArrivalLine})</b></i>",
-    "desc-next-arrival": "Na scenerii / <i>kierunek: <b>{nextStationName} ({nextArrivalLine})</b></i>",
-    "desc-departed": "Na scenerii / <i>odprawiony do: <b>{nextStationName} ({nextArrivalLine})</b></i>",
-    "desc-departed-ends": "Na scenerii / <i>odprawiony do: <b>{nextStationName}</b></i>",
-    "desc-departed-away": "<i>Odprawiony do: <b>{nextStationName} ({nextArrivalLine})</b></i>",
+    "desc-beginning": "Poza scenerią / rozpoczyna bieg",
+    "desc-arriving": "Przyjedzie z: <b><u>{prevStationName} ({prevDepartureLine})</u></b>",
+    "desc-online": "Na scenerii / kierunek: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-stopped": "Na scenerii - postój / kierunek: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-next-arrival": "Na scenerii / kierunek: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-departed": "Na scenerii / odprawiony do: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-departed-ends": "Na scenerii / odprawiony do: <b><u>{nextStationName}</u></b>",
+    "desc-departed-away": "Odprawiony do: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
    "desc-end": "Pociąg kończy bieg",
    "desc-terminated": "Pociąg zakończył bieg"
  },
-  "history": {
-    "title": "DZIENNIK ROZKŁADÓW JAZDY"
+  "profile": {
+    "journal-button": "PROFIL GRACZA",
+    "no-player-found": "Nie znaleziono gracza! :/",
+    "return-to-main": "Powrót do strony głównej",
+
+    "filters": {
+      "Timetable": "ROZKŁADY JAZDY",
+      "Dispatcher": "SŁUŻBY DYŻURNEGO",
+      "IssuedTimetable": "WYSTAWIONE RJ"
+    },
+
+    "stats": {
+      "timetables-journal": "DZIENNIK RJ",
+      "dispatchers-journal": "DZIENNIK DR",
+      "forum-profile": "PROFIL FORUM",
+
+      "driver": "MASZYNISTA",
+      "dispatcher": "DYŻURNY RUCHU",
+
+      "header-driver": "STATYSTYKI MASZYNISTY",
+      "fulfilled-timetables": "wypełnione rozkłady jazdy",
+      "route-distance": "zatwierdzony kilometraż w RJ",
+      "confirmed-stops": "potwierdzonych stacji w RJ",
+      "longest-timetable": "najdłuższy rozkład jazdy",
+      "avg-timetable-length": "średnia długość wszystkich rozkładów",
+      "no-timetable-stats": "Ten użytkownik nie posiada statystyk maszynisty zarejestrowanych przez Stacjownik!",
+
+      "header-dispatcher": "STATYSTYKI DYŻURNEGO RUCHU",
+      "duties-count": "służby jako dyżurny ruchu",
+      "longest-duty": "najdłuższa służba",
+      "created-timetables-count": "wystawione RJ jako dyżurny ruchu",
+      "longest-created-timetable": "najdłuższy wystawiony RJ",
+      "created-timetables-length-sum": "suma długości wystawionych RJ",
+      "no-dispatcher-stats": "Ten użytkownik nie posiada statystyk dyżurnego zarejestrowanych przez Stacjownik!"
+    },
+
+    "recent-stats": {
+      "header": "STATYSTYKI AKTYWNOŚCI (30 DNI)",
+      "timetables": "ROZKŁADÓW JAZDY",
+      "distance": "POKONANYCH KILOMETRÓW",
+      "duties": "SŁUŻB DYŻURNEGO",
+      "created-timetables": "WYSTAWIONYCH ROZKŁADÓW"
+    },
+
+    "list": {
+      "for": "dla",
+      "online-since": "online od",
+      "no-recent-history": "Brak ostatniej aktywności w symulatorze :("
+    }
  }
-}
+}
@@ -31,6 +31,7 @@ export const initFilters = {
  mechanical: false,
  'SPK-M': false,
  'SCS-M': false,
+  'SCS-SPK': false,
  modern: false,
  semaphores: false,
  historical: false,
@@ -61,12 +62,15 @@ export const initFilters = {
  maxLevel: 20,
  minOneWay: 0,
  minOneWayCatenary: 0,
-  minTwoWayCatenary: 0,
  minOneWayInt: 0,
  minOneWayCatenaryInt: 0,
+  minTwoWay: 0,
+  minTwoWayCatenary: 0,
+  minTwoWayInt: 0,
  minTwoWayCatenaryInt: 0,
-  // minTwoWay: 0,
-  authors: ''
+  authors: '',
+  projects: '',
+  lines: ''
 };

 export const sliderStates = [
@@ -76,12 +80,12 @@ export const sliderStates = [
  { id: 'maxLevel', minRange: 0, maxRange: 20, step: 1 },
  { id: 'minOneWay', minRange: 0, maxRange: 5, step: 1 },
  { id: 'minOneWayCatenary', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minTwoWayCatenary', minRange: 0, maxRange: 5, step: 1 },
  { id: 'minOneWayInt', minRange: 0, maxRange: 5, step: 1 },
  { id: 'minOneWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minTwoWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 },
-  // { id: 'minTwoWay', minRange: 0, maxRange: 5, step: 1 },
-  // { id: 'minTwoWayInt', minRange: 0, maxRange: 5, step: 1 }
+  { id: 'minTwoWay', minRange: 0, maxRange: 5, step: 1 },
+  { id: 'minTwoWayCatenary', minRange: 0, maxRange: 5, step: 1 },
+  { id: 'minTwoWayInt', minRange: 0, maxRange: 5, step: 1 },
+  { id: 'minTwoWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 }
 ];

 export type StationFilter = keyof typeof initFilters;
@@ -95,7 +99,18 @@ export const filtersSections: Record<StationFilterSection, StationFilter[]> = {
  stationType: ['junction', 'nonJunction'],
  access: ['nonPublic', 'unavailable', 'abandoned'],
  addons: ['SUP', 'ASDEK', 'noSUP', 'noASDEK'],
-  control: ['SPK', 'SCS', 'SPE', 'SPK-M', 'SCS-M', 'mechanical', 'SPK-R', 'SCS-R', 'manual'],
+  control: [
+    'SPK',
+    'SCS',
+    'SPE',
+    'SCS-SPK',
+    'SPK-M',
+    'SCS-M',
+    'mechanical',
+    'SPK-R',
+    'SCS-R',
+    'manual'
+  ],
  blockades: ['SBL', 'PBL'],
  signals: ['modern', 'semaphores', 'mixed', 'historical']
 };
@@ -116,7 +131,7 @@ export function setupFilters(currentFilters: Record<string, any>) {
  });
 }

-export function getChangedFilters(currentFilters: Record<string, any>): string[] {  
+export function getChangedFilters(currentFilters: Record<string, any>): string[] {
  return (
    Object.keys(currentFilters).filter(
      (filterKey) =>
@@ -1,45 +1,10 @@
 import { defineComponent } from 'vue';
 import { Train, TrainStop } from '../typings/common';
+import { useApiStore } from '../store/apiStore';

 export default defineComponent({
  data: () => ({
-    STATS: {
-      main: [
-        {
-          name: 'speed',
-          unit: 'km/h'
-        },
-        {
-          name: 'length',
-          unit: 'm'
-        },
-        {
-          name: 'mass',
-          unit: 't',
-          multiplier: 0.001
-        }
-      ],
-
-      position: [
-        {
-          name: 'scenery',
-          prop: 'currentStationName'
-        },
-        {
-          name: 'route',
-          prop: 'connectedTrack'
-        },
-        {
-          name: 'signal',
-          prop: 'signal'
-        },
-        {
-          name: 'distance',
-          prop: 'distance',
-          unit: 'm'
-        }
-      ]
-    }
+    apiStore: useApiStore()
  }),

  methods: {
@@ -150,6 +115,74 @@ export default defineComponent({
      if (distance < 1000) return `${distance}m`;

      return `${(distance / 1000).toPrecision(2)}km`;
+    },
+
+    getStockSpeedLimit(stockList: string[], trainMass: number) {
+      let isPassenger = true;
+
+      // Check the whole consist speed limit
+      const vehicleMaxSpeed = stockList.reduce((acc, stockName, i) => {
+        if (!this.apiStore.vehiclesData) return acc;
+
+        const [vehicleName, vehicleCargo] = stockName.split(':');
+
+        const vehicle = this.apiStore.vehiclesData.vehicles.find((v) => v.name == vehicleName);
+
+        if (!vehicle) return acc;
+
+        const vehicleGroup = this.apiStore.vehiclesData.vehicleGroups.find(
+          (g) => g.id == vehicle.vehicleGroupsId
+        );
+
+        if (!vehicleGroup) return acc;
+
+        let vehicleSpeed = vehicleGroup.speed;
+
+        if (vehicle.type == 'wagon-freight') {
+          isPassenger = false;
+
+          if (vehicleCargo !== undefined && vehicleGroup.speedLoaded) {
+            vehicleSpeed = vehicleGroup.speedLoaded;
+          }
+        }
+
+        return Math.min(vehicleSpeed, acc);
+      }, Infinity);
+
+      // Check the head vehicle speed limit
+      const headLocoName = stockList[0];
+
+      const headLocoVehicle = this.apiStore.vehiclesData!.vehicles.find(
+        (v) => v.name == headLocoName
+      );
+
+      const headLocoVehicleGroup = this.apiStore.vehiclesData!.vehicleGroups.find(
+        (g) => g.id == headLocoVehicle?.vehicleGroupsId
+      );
+
+      if (!headLocoVehicleGroup) return vehicleMaxSpeed;
+
+      // Omit speed check for head vehicle if there's no data for it
+      if (!headLocoName || !headLocoVehicle || !headLocoVehicleGroup.massSpeeds)
+        return vehicleMaxSpeed;
+
+      const massSpeeds =
+        headLocoVehicleGroup.massSpeeds[
+          stockList.length == 1 ? 'none' : isPassenger ? 'passenger' : 'cargo'
+        ];
+
+      // Omit speed check if there's no data on mass speeds
+      if (!massSpeeds) return vehicleMaxSpeed;
+
+      // Number type for locomotives alone
+      if (typeof massSpeeds === 'number') return massSpeeds;
+
+      // Record type for passenger or cargo, find the closest range
+      const massKey = Object.keys(massSpeeds).findLast((massKey) => trainMass >= Number(massKey));
+
+      const massMaxSpeed = massKey ? massSpeeds[massKey] : Infinity;
+
+      return Math.min(massMaxSpeed, vehicleMaxSpeed);
    }
  }
 });
@@ -61,6 +61,11 @@ const routes: Array<RouteRecordRaw> = [
      region: route.query.region
    })
  },
+  {
+    path: '/profile',
+    name: 'PlayerProfileView',
+    component: () => import('../views/PlayerProfileView.vue')
+  },
  {
    path: '/:catchAll(.*)',
    redirect: '/'
@@ -69,13 +74,14 @@ const routes: Array<RouteRecordRaw> = [

 const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
+    console.log(to.name);
    if (
-      (to.name == 'SceneryView' || to.name == 'DriverView') &&
+      (to.name == 'SceneryView' || to.name == 'DriverView' || to.name == 'PlayerProfileView') &&
      from.name !== to.name &&
      from.query['view'] === undefined &&
      !savedPosition
    )
-      return { el: `.app_main`, behavior: 'instant', top: -13 };
+      return { el: `.app_main`, behavior: 'smooth', top: 0 };

    if (savedPosition) return savedPosition;
  },
@@ -9,15 +9,18 @@ export const useApiStore = defineStore('apiStore', {
    dataStatuses: {
      connection: Status.Data.Loading,
      sceneries: Status.Data.Loading,
-      vehicles: Status.Data.Loading
+      vehicles: Status.Data.Loading,
+      dailyStatsData: Status.Data.Loading
    },

    activeData: undefined as API.ActiveData.Response | undefined,
-    vehiclesData: undefined as API.Vehicles.Response | undefined,
+    vehiclesData: undefined as API.VehiclesData.Response | undefined,

    donatorsData: [] as API.Donators.Response,
    sceneryData: [] as StationJSONData[],

+    dailyStatsData: null as API.DailyStats.Response | null,
+
    nextUpdateTime: 0,
    nextDataCheckTime: 0,

@@ -111,7 +114,7 @@ export const useApiStore = defineStore('apiStore', {

    async fetchVehiclesInfo() {
      try {
-        const response = await this.client!.get<API.Vehicles.Response>('api/getVehicles');
+        const response = await this.client!.get<API.VehiclesData.Response>('api/getVehiclesData');

        this.vehiclesData = response.data;
        this.dataStatuses.vehicles = response.data ? Status.Data.Loaded : Status.Data.Warning;
@@ -119,6 +122,21 @@ export const useApiStore = defineStore('apiStore', {
        this.dataStatuses.vehicles = Status.Data.Error;
        console.error('Ups! Wystąpił błąd podczas pobierania informacji o pojazdach:', error);
      }
+    },
+
+    async fetchDailyStats() {
+      try {
+        const res: API.DailyStats.Response = await (
+          await this.client!.get('api/getDailyStats')
+        ).data;
+
+        this.dailyStatsData = res;
+
+        this.dataStatuses.dailyStatsData = Status.Data.Loaded;
+      } catch (error) {
+        console.error('Ups! Wystąpił błąd podczas pobierania statystyk rozkładów jazdy...');
+        this.dataStatuses.dailyStatsData = Status.Data.Error;
+      }
    }
  }
 });
@@ -11,8 +11,11 @@ import {
 } from '../typings/common';
 import { useApiStore } from './apiStore';
 import { MainStoreState } from './typings';
+import i18n from '../i18n';
+import StorageManager from '../managers/storageManager';

 const checkpointsTrains: Map<string, CheckpointTrain[]> = new Map();
+const unknownSceneryCheckpoints: Map<string, Set<string>> = new Map();
 const sceneriesTrains: Map<string, Train[]> = new Map();

 export const useMainStore = defineStore('mainStore', {
@@ -23,25 +26,30 @@ export const useMainStore = defineStore('mainStore', {
      isOffline: false,
      appUpdate: null,

-      dispatcherStatsName: '',
-      dispatcherStatsStatus: Status.Data.Initialized,
-
-      driverStatsName: '',
-      driverStatsData: undefined,
-      driverStatsStatus: Status.Data.Initialized,
-
      chosenModalTrainId: undefined,

      modalLastClickedTarget: null,
-      currentLocale: 'pl'
+      currentLocale: 'pl',
+
+      isMigrateInfoCardOpen: false
    }) as MainStoreState,

+  actions: {
+    changeLocale(localeName: string) {
+      (i18n.global.locale.value as any) = localeName;
+      this.currentLocale = localeName;
+
+      StorageManager.setStringValue('lang', localeName);
+    }
+  },
+
  getters: {
    trainList(): Train[] {
      const apiStore = useApiStore();

      checkpointsTrains.clear();
      sceneriesTrains.clear();
+      unknownSceneryCheckpoints.clear();

      const dateNow = new Date();

@@ -71,6 +79,7 @@ export const useMainStore = defineStore('mainStore', {
            online: Boolean(train.online),
            driverId: train.driverId,
            driverName: train.driverName,
+            driverLanguageId: train.driverLanguageId,
            currentStationName: train.currentStationName,
            currentStationHash: train.currentStationHash,
            connectedTrack: train.connectedTrack,
@@ -133,8 +142,13 @@ export const useMainStore = defineStore('mainStore', {

          // Checkpoints trains map
          if (trainObj.timetableData) {
-            let currentSceneryIndex = 0;
            const timetablePath = trainObj.timetableData.timetablePath;
+            let currentSceneryIndex = 0;
+
+            let currentSceneryData: Station | null =
+              this.stationList.find(
+                (s) => s.name == timetablePath[currentSceneryIndex].stationName
+              ) ?? null;

            trainObj.timetableData.followingStops.forEach((stop, i) => {
              if (/strong|podg|pe/.test(stop.stopName)) {
@@ -153,16 +167,41 @@ export const useMainStore = defineStore('mainStore', {
                  timetablePathElement: timetablePath[currentSceneryIndex]
                };

+                // Adding missing sceneries checkpoints as a fallback when scenery data is missing (and "generalInfo" is unavailable)
+                if (!currentSceneryData) {
+                  const sceneryCheckpointsSet = unknownSceneryCheckpoints.get(
+                    checkpointTrain.timetablePathElement.stationName
+                  );
+
+                  if (!sceneryCheckpointsSet) {
+                    unknownSceneryCheckpoints.set(
+                      checkpointTrain.timetablePathElement.stationName,
+                      new Set([stop.stopNameRAW])
+                    );
+                  } else {
+                    sceneryCheckpointsSet.add(stop.stopNameRAW);
+                  }
+                }
+
+                // Adding trains to their corresponding checkpoints
                if (checkpointsTrains.has(stop.stopNameRAW.toLowerCase())) {
                  checkpointsTrains.set(stop.stopNameRAW.toLowerCase(), [
                    ...checkpointsTrains.get(stop.stopNameRAW.toLowerCase())!,
                    checkpointTrain
                  ]);
-                } else checkpointsTrains.set(stop.stopNameRAW.toLowerCase(), [checkpointTrain]);
+                } else {
+                  checkpointsTrains.set(stop.stopNameRAW.toLowerCase(), [checkpointTrain]);
+                }
              }

-              if (timetablePath[currentSceneryIndex].departureRouteExt == stop.departureLine)
+              if (timetablePath[currentSceneryIndex].departureRouteExt == stop.departureLine) {
                currentSceneryIndex++;
+
+                currentSceneryData =
+                  this.stationList.find(
+                    (s) => s.name == timetablePath[currentSceneryIndex].stationName
+                  ) ?? null;
+              }
            });
          }

@@ -212,6 +251,7 @@ export const useMainStore = defineStore('mainStore', {
            dispatcherIsSupporter: false,
            dispatcherStatus: Status.ActiveDispatcher.FREE,
            dispatcherTimestamp: -1,
+            dispatcherLanguageId: -1,

            isOnline: false,

@@ -222,7 +262,9 @@ export const useMainStore = defineStore('mainStore', {
              all: 0,
              confirmed: 0,
              unconfirmed: 0
-            }
+            },
+
+            missingCheckpoints: []
          });
        });

@@ -256,6 +298,7 @@ export const useMainStore = defineStore('mainStore', {
          dispatcherIsSupporter: scenery.dispatcherIsSupporter,
          dispatcherStatus: scenery.dispatcherStatus,
          dispatcherTimestamp: dispatcherTimestamp,
+          dispatcherLanguageId: scenery.dispatcherLanguageId,

          isOnline: scenery.isOnline == 1,

@@ -266,7 +309,9 @@ export const useMainStore = defineStore('mainStore', {
            all: 0,
            confirmed: 0,
            unconfirmed: 0
-          }
+          },
+
+          missingCheckpoints: []
        });

        return list;
@@ -277,7 +322,7 @@ export const useMainStore = defineStore('mainStore', {
      for (let i = 0, n = allActiveSceneries.length; i < n; i++) {
        const scenery = allActiveSceneries[i];

-        const station = this.stationList.find((s) => s.name === scenery.name);
+        let station = this.stationList.find((s) => s.name === scenery.name);

        let checkpointsSet: Set<string> = new Set();

@@ -293,6 +338,18 @@ export const useMainStore = defineStore('mainStore', {
        scenery.stationTrains =
          sceneriesTrains.get(scenery.name)?.filter((sc) => sc.region == this.region.id) ?? [];

+        // Missing checkpoints as a fallback for sceneries without generalInfo & checkpoints property
+        const missingCheckpointsToAdd = unknownSceneryCheckpoints.get(scenery.name);
+
+        if (missingCheckpointsToAdd) {
+          [...missingCheckpointsToAdd].forEach((cp) => {
+            if (cp.toLowerCase() == scenery.name.toLowerCase()) return;
+
+            checkpoints.push(cp);
+            scenery.missingCheckpoints.push(cp);
+          });
+        }
+
        const uniqueTrainIds: string[] = [];
        checkpoints.forEach((cp) => {
          const scheduledTrains = checkpointsTrains.get(cp.toLowerCase());
@@ -370,7 +427,6 @@ export const useMainStore = defineStore('mainStore', {

        return {
          name: scenery.name,
-
          generalInfo: {
            ...scenery,
            authors: scenery.authors?.split(',').map((a) => a.trim()),
@@ -385,7 +441,7 @@ export const useMainStore = defineStore('mainStore', {
    },

    allStationInfo(): Station[] {
-      const onlineUnsavedStations = this.activeSceneryList
+      const onlineUnsavedStations: Station[] = this.activeSceneryList
        .filter(
          (scenery) =>
            this.stationList.findIndex((st) => st.name == scenery.name) == -1 &&
@@ -8,7 +8,8 @@ export const tooltipKeys = [
  'VehiclePreviewTooltip',
  'SpawnsTooltip',
  'UsersTooltip',
-  'HtmlTooltip'
+  'HtmlTooltip',
+  'TrainInfoTooltip'
 ] as const;

 export type TooltipType = (typeof tooltipKeys)[number];
@@ -33,6 +34,7 @@ export const useTooltipStore = defineStore('tooltipStore', {
      this.content = '';
    },

+    // Tooltip handler reading attributes of DOM elements
    handle(e: MouseEvent) {
      const targetEl = e
        .composedPath()
@@ -44,6 +46,7 @@ export const useTooltipStore = defineStore('tooltipStore', {
        return;
      }

+      // Tooltip content is a string but may be parsed to objects / html in corresponding tooltip type components
      const tooltipType = targetEl.getAttribute('data-tooltip-type');
      const tooltipContent = targetEl.getAttribute('data-tooltip-content');

@@ -5,14 +5,10 @@ export interface MainStoreState {
  region: { id: string; value: string; name: string };
  isOffline: boolean;
  appUpdate: { version: string; changelog: string; releaseURL: string } | null;
-  dispatcherStatsName: string;
-  dispatcherStatsData?: API.DispatcherStats.Response;
-  driverStatsName: string;
-  driverStatsData?: API.DriverStats.Response;
-  driverStatsStatus: Status.Data;
  chosenModalTrainId?: string;
  modalLastClickedTarget: EventTarget | null;
  currentLocale: string;
+  isMigrateInfoCardOpen: boolean;
 }

 export interface StationJSONData {
@@ -23,6 +19,7 @@ export interface StationJSONData {
  project: string;
  projectUrl: string;
  hash: string;
+  hidden: boolean;

  reqLevel: number;

@@ -135,3 +135,20 @@
    color: black;
  }
 }
+
+.timetable-status-badge {
+  padding: 0.05em 0.35em;
+  color: black;
+
+  &.terminated {
+    background-color: salmon;
+  }
+
+  &.fulfilled {
+    background-color: lightgreen;
+  }
+
+  &.active {
+    background-color: lightblue;
+  }
+}
@@ -9,6 +9,9 @@
  --clr-bg2: #1b1b1b;
  --clr-bg3: #1d1d1d;
  --clr-view-bg: #1a1a1a;
+  --clr-bg-light: #2b2b2b;
+
+  --clr-tile: #181818;

  --clr-accent: #1085b3;
  --clr-accent2: #ff3d5d;
@@ -23,6 +26,8 @@

  --clr-donator: #f7a4ff;

+  --clr-success: springgreen;
+
  --no-scroll-padding: 17px;
  --max-container-width: 1700px;

@@ -30,9 +35,8 @@
 }

 ::-webkit-scrollbar {
-  width: var(--no-scroll-padding);
-  height: var(--no-scroll-padding);
-  background-color: transparent;
+  // width: var(--no-scroll-padding);
+  // height: var(--no-scroll-padding);

  &-track {
    background-color: #333;
@@ -49,6 +53,7 @@

 body {
  background: var(--clr-bg);
+  color-scheme: dark;

  margin: 0;
  padding: 0;
@@ -89,7 +94,8 @@ select {
  font-size: 1em;
 }

-input {
+input,
+select {
  background: none;
  color: white;
  font-size: 1em;
@@ -225,6 +231,12 @@ ul {
  }
 }

+.font {
+  &--italic {
+    font-style: italic;
+  }
+}
+
 button,
 a.a-button {
  cursor: pointer;
@@ -324,19 +336,6 @@ a.a-button {
 }

@include responsive.smallScreen {
-  ::-webkit-scrollbar {
-    width: 0.5em;
-    height: 0.5em;
-
-    &-track {
-      background-color: #222;
-    }
-
-    &-thumb {
-      background-color: #777;
-    }
-  }
-
  [data-tooltip]:hover::after,
  [data-tooltip]:focus::after {
    transform: translate(-50%, 2em);
@@ -352,3 +351,22 @@ a.a-button {
  background-color: #aaa;
  margin: 0.5em 0;
 }
+
+.g-checkbox {
+  position: relative;
+  display: inline-block;
+
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+  }
+}
@@ -36,6 +36,6 @@
  }

  &.SCS-SPK {
-    color: white;
+    color: #aefff8;
  }
 }
@@ -11,8 +11,8 @@

 .list_wrapper {
  overflow-y: auto;
-  height: calc(100vh - 12.5em);
-  min-height: 700px;
+  height: calc(100vh - 21em);
+  min-height: 500px;
  margin-top: 0.5em;
  position: relative;

@@ -61,8 +61,4 @@
  top: 50%;
  transform: translateY(-50%);
  padding-right: 0.5em;
-}
-
-select.search-input {
-
-}
+}
@@ -1,4 +1,5 @@
-import { Status, VehicleData } from './common';
+import { Journal } from '../components/JournalView/typings';
+import { Status, Vehicle, VehicleGroup } from './common';

 export enum APIDataStatus {
  OK = 'OK',
@@ -27,17 +28,29 @@ export namespace API {
    }
  }

+  export namespace PlayerActivity {
+    export interface Data {
+      dispatcher: API.ActiveSceneries.Data[];
+      driver: API.ActiveTrains.Data | null;
+    }
+
+    export type Response = Data;
+  }
+
  export namespace DispatcherHistory {
    export type Response = Data[];

    export interface Data {
      id: number;
+      createdAt: string;
+      updatedAt: string;
      currentDuration: number;
      dispatcherId: number;
      dispatcherName: string;
      dispatcherLevel: number | null;
      dispatcherRate: number;
      dispatcherIsSupporter: boolean;
+      dispatcherLanguageId: number | null;
      dispatcherStatus?: number;
      isOnline: boolean;
      lastOnlineTimestamp: number;
@@ -51,61 +64,64 @@ export namespace API {
  }

  export namespace DispatcherStats {
-    export interface DistanceStat {
-      routeDistance: number | null;
+    export interface Services {
+      count: number;
+      durationMax: number;
+      durationAvg: number;
    }

-    export interface DurationStat {
-      currentDuration: number | null;
+    export interface IssuedTimetables {
+      count: number;
+      distanceMax: number;
+      distanceAvg: number;
+      distanceSum: number;
    }

-    export interface Count {
-      _all: number;
+    export interface Data {
+      dispatcherId: number | null;
+      dispatcherName: string | null;
+      dispatcherLevel: number | null;
+      services: Services | null;
+      issuedTimetables: IssuedTimetables | null;
    }

-    export interface Response {
-      services: {
-        count: number;
-        durationMax: number;
-        durationAvg: number;
-      } | null;
-
-      issuedTimetables: {
-        count: number;
-        distanceMax: number;
-        distanceAvg: number;
-        distanceSum: number;
-      } | null;
-    }
+    export type Response = Data;
  }

  export namespace DriverStats {
-    export interface SumStats {
-      routeDistance: number;
-      confirmedStopsCount: number;
-      allStopsCount: number;
-      currentDistance: number;
+    export interface Data {
+      driverName: string | null;
+      driverId: number | null;
+      driverLevel: number | null;
+      countAll: number;
+      countTerminated: number;
+      countFulfilled: number;
+      routeDistanceTotal: number | null;
+      routeDistanceAvg: number | null;
+      routeDistanceMax: number | null;
+      currentDistanceTotal: number | null;
+      confirmedStopsTotal: number | null;
+      allStopsTotal: number | null;
    }

-    export interface CountStats {
-      fulfilled: number;
-      terminated: number;
-      _all: number;
-    }
+    export type Response = Data;
+  }

-    export interface MaxStats {
-      routeDistance: number;
+  export namespace PlayerInfo {
+    export interface Data {
+      currentActivity: PlayerActivity.Data;
+      dispatcherStats: DispatcherStats.Data;
+      dispatcherStatsLastMonth: DispatcherStats.Data;
+      driverStats: DriverStats.Data;
+      driverStatsLastMonth: DriverStats.Data;
    }
+  }

-    export interface AvdStats {
-      routeDistance: number;
-    }
-
-    export interface Response {
-      _sum: SumStats;
-      _count: CountStats;
-      _max: MaxStats;
-      _avg: AvdStats;
+  export namespace PlayerJournal {
+    export interface Data {
+      timetables: TimetableHistory.DataShort[];
+      issuedTimetables: TimetableHistory.DataShort[];
+      duties: DispatcherHistory.Data[];
    }
  }

@@ -114,6 +130,7 @@ export namespace API {
      dispatcherId: number;
      dispatcherName: string;
      dispatcherIsSupporter: boolean;
+      dispatcherLanguageId: number;
      stationName: string;
      stationHash: string;
      region: string;
@@ -152,6 +169,7 @@ export namespace API {
      driverId: number;
      driverIsSupporter: boolean;
      driverLevel?: number;
+      driverLanguageId: number;

      currentStationName: string;
      currentStationHash?: string;
@@ -208,24 +226,58 @@ export namespace API {
  }

  export namespace TimetableHistory {
-    export interface Data {
+    export interface QueryParams {
+      driverName?: string;
+      trainNo?: string;
+      timetableId?: string;
+      categoryCode?: string;
+
+      authorName?: string;
+
+      dateFrom?: string;
+      dateTo?: string;
+
+      issuedFrom?: string;
+      terminatingAt?: string;
+      via?: string;
+      includesScenery?: string;
+
+      countFrom?: number;
+      countLimit?: number;
+
+      fulfilled?: number;
+      terminated?: number;
+
+      twr?: number;
+      skr?: number;
+      pn?: number;
+      tn?: number;
+
+      returnType?: 'all' | 'short' | 'detailed';
+
+      sortBy?: Journal.TimetableSorter['id'];
+    }
+
+    export interface Data extends DataShort, DataDetailsOnly {
+      updatedAt: string;
+    }
+
+    export interface DataShort {
      id: number;
      createdAt: string;
-      updatedAt: string;
-
-      timetableId: number;
      trainNo: number;
      trainCategoryCode: string;
+      timetableId: number;

      driverId: number;
      driverName: string;
      driverLevel: number | null;
      driverIsSupporter: boolean;
+      driverLanguageId: number | null;

      route: string;
      twr: number;
      skr: number;
-      sceneriesString: string;
      currentLocation: string[];

      routeDistance: number;
@@ -236,7 +288,6 @@ export namespace API {

      beginDate: string;
      endDate: string;
-
      scheduledBeginDate: string;
      scheduledEndDate: string;

@@ -246,15 +297,25 @@ export namespace API {
      authorName?: string;
      authorId?: number;

+      currentSceneryName?: string;
+      currentSceneryHash?: string;
+      hasDangerousCargo: boolean;
+      hasExtraDeliveries: boolean;
+    }
+
+    export interface DataDetailsOnly {
+      id: number;
+      timetableId: number;
+
+      sceneriesString: string;
      stockString?: string;
      stockHistory: string[];

      stockMass?: number;
      stockLength?: number;
      maxSpeed?: number;
+      trainMaxSpeed?: number;

-      currentSceneryName?: string;
-      currentSceneryHash?: string;
      routeSceneries: string;
      checkpointArrivals: string[];
      checkpointDepartures: string[];
@@ -264,14 +325,20 @@ export namespace API {
      checkpointComments: string[];
      visitedSceneries: string[];
      sceneryNames: string[];
+
      path: string;
      warningNotes: string | null;
-      hasDangerousCargo: boolean;
-      hasExtraDeliveries: boolean;
-      trainMaxSpeed?: number;
+
+      authorId?: number;
+      authorName?: string;
+      driverId: number;
+      driverName: string;
+      driverLanguageId: number | null;
    }

    export type Response = Data[];
+    export type ResponseShort = DataShort[];
+    export type ResponseDetailsOnly = DataDetailsOnly[];
  }

  export namespace DailyStats {
@@ -329,8 +396,51 @@ export namespace API {
    export type Response = string[];
  }

-  export namespace Vehicles {
-    export type Response = VehicleData[];
+  export namespace VehiclesData {
+    export interface VehicleObject {
+      id: number;
+      name: string;
+      type: string;
+      cabinName: string | null;
+      restrictions: Record<string, any> | null;
+      vehicleGroupsId: number;
+    }
+
+    export interface VehicleGroupObject {
+      id: number;
+      name: string;
+      speed: number;
+      speedLoaded?: number;
+      speedLoco?: number;
+      length: number;
+      weight: number;
+      cargoTypes: VehicleCargo[] | null;
+
+      locoProps: {
+        coldStart: boolean;
+        doubleManned: boolean;
+      } | null;
+
+      massSpeeds: VehicleGroupMassSpeeds | null;
+    }
+
+    export interface VehicleGroupMassSpeeds {
+      passenger: Record<string, number> | null;
+      cargo: Record<string, number> | null;
+      none: number | null;
+    }
+
+    export interface VehicleCargo {
+      id: string;
+      weight: number;
+    }
+
+    export interface Data {
+      vehicles: VehicleObject[];
+      vehicleGroups: VehicleGroupObject[];
+    }
+
+    export type Response = Data;
  }
 }

@@ -380,6 +490,62 @@ export namespace GithubAPI {
  }
 }

+export namespace Td2API {
+  export namespace UsersInfoByName {
+    export interface UserStat {
+      variable: string;
+      value: number;
+      position: number;
+      server_total: number;
+      server_max: number;
+      server_min: number;
+      server_avg: number;
+    }
+
+    export interface Levels {
+      driver: number;
+      dispatcher: number;
+    }
+
+    export interface UserGroup {
+      id_group: number;
+      group_name: string;
+      description: string;
+      online_color: string;
+      min_posts: number;
+      max_messages: number;
+      stars: string;
+      group_type: number;
+      hidden: number;
+      id_parent: number;
+    }
+
+    export interface UserInfo {
+      id_member: number;
+      id_group: number;
+      additional_groups: string;
+      member_name: string;
+      karma_bad: number;
+      karma_good: number;
+      date_registered: number;
+      last_login: number;
+      avatar: number;
+      lngfile: string;
+      user_stats: UserStat[];
+      levels: Levels;
+      user_groups: UserGroup[];
+    }
+
+    export type Message = UserInfo[];
+
+    export interface Response {
+      success: boolean;
+      respCode: number;
+      message: Message;
+    }
+  }
+}
+
 export namespace Websocket {
  export interface Payload {
    activeSceneries: API.ActiveSceneries.Response;
@@ -1,5 +1,6 @@
 import { RouteLocationRaw } from 'vue-router';
 import { StationJSONData } from '../store/typings';
+import { API } from './api';

 export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
 export type ScenerySpawnType = 'passenger' | 'freight' | 'loco' | 'all';
@@ -59,6 +60,7 @@ export interface Train {
  distance: number;
  connectedTrack: string;
  driverId: number;
+  driverLanguageId: number;
  trainNo: number;
  driverName: string;
  driverLevel: number;
@@ -95,9 +97,7 @@ export interface TrainTimetableData {

 export interface Station {
  name: string;
-
  generalInfo?: StationGeneralInfo;
-
  onlineInfo?: ActiveScenery;
 }

@@ -107,7 +107,7 @@ export interface StationGeneralInfo {
  abbr: string;
  hash?: string;
  reqLevel: number;
-  lines: string;
+  lines?: string;
  project: string;
  projectUrl?: string;
  signalType: string;
@@ -118,6 +118,7 @@ export interface StationGeneralInfo {
  availability: Availability;
  routes: StationRoutes;
  checkpoints: string[];
+  hidden: boolean;
 }

 export interface StationRoutes {
@@ -162,6 +163,7 @@ export interface ActiveScenery {
  dispatcherIsSupporter: boolean;
  dispatcherStatus: Status.ActiveDispatcher | number;
  dispatcherTimestamp: number | null;
+  dispatcherLanguageId: number;
  isOnline: boolean;
  stationTrains: Train[];
  scheduledTrains: CheckpointTrain[];
@@ -170,6 +172,7 @@ export interface ActiveScenery {
    confirmed: number;
    unconfirmed: number;
  };
+  missingCheckpoints: string[];
 }

 export interface ScenerySpawn {
@@ -214,42 +217,28 @@ export interface CheckpointTrain {
 }

 // Vehicles Data
+export type Vehicle = API.VehiclesData.VehicleObject;
+export type VehicleGroup = API.VehiclesData.VehicleGroupObject;

-export interface VehicleData {
-  id: number;
-  name: string;
-  type: string;
-  cabinName: string | null;
-  restrictions: Record<string, any> | null;
-  vehicleGroupsId: number;
-  group: VehiclesGroup;
+// Train Tooltip Info
+export interface TooltipUserTrain {
+  driverName: string;
+  trainNo: number;
 }

-export interface VehiclesGroup {
-  id: number;
-  name: string;
-  speed: number;
-  speedLoaded?: number;
-  speedLoco?: number;
+export interface TooltipTrainInfo {
+  mass: number;
  length: number;
-  weight: number;
-  cargoTypes: VehicleCargo[] | null;
-
-  locoProps: {
-    coldStart: boolean;
-    doubleManned: boolean;
-  } | null;
-
-  massSpeeds: VehicleGroupMassSpeeds | null;
-}
-
-export interface VehicleGroupMassSpeeds {
-  passenger: Record<string, number> | null;
-  cargo: Record<string, number> | null;
-  none: number | null;
-}
-
-export interface VehicleCargo {
-  id: string;
-  weight: number;
-}
+  speed: number;
+  signal: string;
+  distance: number;
+  connectedTrack: string;
+  trainNo: number;
+  driverName: string;
+  driverLevel: number;
+  currentStationName: string;
+  currentStationHash: string;
+  headVehicleName: string;
+  stockCount: number;
+  trainTimetableCategory?: string;
+}
@@ -0,0 +1,5 @@
+export function getCountPercentage(partCount: number, allCount: number, fixedDigits: number) {
+  if (allCount == 0) return 0;
+
+  return ((partCount / allCount) * 100).toFixed(fixedDigits);
+}
@@ -0,0 +1,5 @@
+export const languageFlagNames = ['pl', 'en', 'de', 'cz', 'sk', 'ru', 'se', 'ua', 'it'];
+
+export function getLanguageNameById(languageId: number) {
+  return languageFlagNames[languageId] ?? 'pl';
+}
@@ -0,0 +1,19 @@
+export enum ServerRegion {
+  'eu' = 'PL1',
+  'cae' = 'PL2',
+  'usw' = 'DE',
+  'us' = 'CZE',
+  'ru' = 'ENG'
+}
+
+export const regions: Record<string, string> = {
+  eu: 'PL1',
+  cae: 'PL2',
+  usw: 'DE',
+  us: 'CZE',
+  ru: 'ENG'
+};
+
+export function getRegionNameById(id: string) {
+  return regions[id] ?? 'PL1';
+}
@@ -47,6 +47,6 @@ const chosenTrain = computed(() =>
  margin: 0 auto;
  padding: 1em 0;
  max-width: var(--max-container-width);
-  min-height: calc(100vh - 7em);
+  min-height: 100vh;
 }
 </style>
@@ -14,7 +14,7 @@
          optionsType="dispatchers"
        />

-        <JournalStats :statsButtons="statsButtons" />
+        <JournalStats :chosen-player-id="chosenPlayerId" />
      </div>

      <div class="journal_refreshed-date">
@@ -50,16 +50,8 @@ import JournalHeader from '../components/JournalView/JournalHeader.vue';
 import JournalStats from '../components/JournalView/JournalStats.vue';
 import { useApiStore } from '../store/apiStore';

-const statsButtons: Journal.StatsButton[] = [
-  {
-    tab: Journal.StatsTab.DISPATCHER_STATS,
-    localeKey: 'journal.dispatcher-stats.button',
-    iconName: 'user',
-    disabled: true
-  }
-];
-
 interface DispatchersQueryParams {
+  dutyId?: number;
  dispatcherName?: string;
  stationName?: string;
  stationHash?: string;
@@ -105,18 +97,15 @@ export default defineComponent({
  },

  data: () => ({
-    statsButtons,
-
    dataRefreshedAt: null as Date | null,
    currentQueryParams: {} as DispatchersQueryParams,

    scrollDataLoaded: true,
    scrollNoMoreData: false,

-    showReturnButton: false,
-    statsCardOpen: false,
-    currentOptionsActive: false,
+    chosenPlayerId: -1,

+    currentOptionsActive: false,
    dataStatus: Status.Data.Loading,

    historyList: [] as API.DispatcherHistory.Response
@@ -126,12 +115,13 @@ export default defineComponent({
    const sorterActive: Journal.DispatcherSorter = reactive({ id: 'timestampFrom', dir: -1 });
    const journalFilterActive = ref({});

-    const searchersValues = reactive({
+    const searchersValues = reactive<Record<Journal.DispatcherSearchKey, string>>({
+      'search-duty-id': '',
      'search-dispatcher': '',
      'search-station': '',
      'search-date-from': '',
      'search-date-to': ''
-    } as Journal.DispatcherSearchType);
+    });

    provide('sorterActive', sorterActive);
    provide('journalFilterActive', journalFilterActive);
@@ -158,15 +148,6 @@ export default defineComponent({
          queryParams[k as keyof DispatchersQueryParams] !=
          defaultQueryParams[k as keyof DispatchersQueryParams]
      );
-    },
-
-    'mainStore.dispatcherStatsData'(stats) {
-      this.statsButtons.find((sb) => sb.tab == Journal.StatsTab.DISPATCHER_STATS)!.disabled =
-        stats === undefined;
-    },
-
-    async 'mainStore.dispatcherStatsName'() {
-      this.fetchDispatcherStats();
    }
  },

@@ -192,6 +173,7 @@ export default defineComponent({
    handleRouteParams() {
      this.$router.push({
        query: {
+          'search-duty-id': this.searchersValues['search-duty-id'] || undefined,
          'search-date-from': this.searchersValues['search-date-from'] || undefined,
          'search-date-to': this.searchersValues['search-date-to'] || undefined,
          'search-station': this.searchersValues['search-station'] || undefined,
@@ -215,30 +197,8 @@ export default defineComponent({
      this.setOptions(query as any);
    },

-    async fetchDispatcherStats() {
-      if (!this.mainStore.dispatcherStatsName) {
-        this.mainStore.dispatcherStatsData = undefined;
-        return;
-      }
-
-      try {
-        const statsData: API.DispatcherStats.Response = await (
-          await this.apiStore.client!.get('api/getDispatcherStats', {
-            params: {
-              name: this.mainStore.dispatcherStatsName
-            }
-          })
-        ).data;
-
-        this.mainStore.dispatcherStatsData = statsData;
-      } catch (error) {
-        this.mainStore.dispatcherStatsData = undefined;
-
-        console.error('Ups! Wystąpił błąd przy próbie pobrania statystyk dyżurnego! :/');
-      }
-    },
-
-    setOptions(options: { [key: string]: string }) {
+    setOptions(options: Record<string, string>) {
+      this.searchersValues['search-duty-id'] = options['search-duty-id'] ?? '';
      this.searchersValues['search-date-from'] = options['search-date-from'] ?? '';
      this.searchersValues['search-date-to'] = options['search-date-to'] ?? '';
      this.searchersValues['search-station'] = options['search-station'] ?? '';
@@ -272,17 +232,35 @@ export default defineComponent({
      this.scrollDataLoaded = true;
    },

-    async fetchHistoryData() {      
+    async fetchHistoryData() {
      const queryParams: DispatchersQueryParams = {};

+      const dutyId = this.searchersValues['search-duty-id'].trim() || undefined;
      const dispatcherName = this.searchersValues['search-dispatcher'].trim() || undefined;
      const stationName = this.searchersValues['search-station'].trim() || undefined;
      const dateFromString = this.searchersValues['search-date-from'].trim() || undefined;
      const dateToString = this.searchersValues['search-date-to'].trim() || undefined;

+      let dateFromISO: string | undefined = undefined;
+      let dateToISO: string | undefined = undefined;
+
+      if (dateFromString) {
+        let dateFrom = new Date(dateFromString);
+        dateFrom.setMinutes(dateFrom.getMinutes() + dateFrom.getTimezoneOffset());
+        dateFromISO = dateFrom.toISOString();
+      }
+
+      if (dateToString) {
+        let dateTo = new Date(dateToString);
+        dateTo.setMinutes(dateTo.getMinutes() + dateTo.getTimezoneOffset());
+        dateToISO = dateTo.toISOString();
+      }
+
+      queryParams['dutyId'] = Number(dutyId) || undefined;
      queryParams['dispatcherName'] = dispatcherName;
-      queryParams['dateFrom'] = dateFromString;
-      queryParams['dateTo'] = dateToString ? `${dateToString}T23:00:00` : undefined;
+
+      queryParams['dateFrom'] = dateFromISO;
+      queryParams['dateTo'] = dateToISO;

      queryParams['countLimit'] = 30;

@@ -304,24 +282,24 @@ export default defineComponent({

        if (!responseData) {
          this.dataStatus = Status.Data.Error;
+          this.chosenPlayerId = -1;
+
          return;
        }

-        if (!responseData) return;
-
        // Response data exists
        this.historyList = responseData;

-        // Stats display
-        this.mainStore.dispatcherStatsName =
-          this.historyList.length > 0 && this.searchersValues['search-dispatcher'].trim()
-            ? this.historyList[0].dispatcherName
-            : '';
+        this.chosenPlayerId =
+          this.historyList.length > 0 && this.searchersValues['search-dispatcher'].trim() != ''
+            ? this.historyList[0].dispatcherId
+            : -1;

        this.dataRefreshedAt = new Date();
        this.dataStatus = Status.Data.Loaded;
      } catch (error) {
        this.dataStatus = Status.Data.Error;
+        this.chosenPlayerId = -1;
      }

      this.scrollNoMoreData = false;
@@ -14,7 +14,7 @@
          optionsType="timetables"
        />

-        <JournalStats :statsButtons="statsButtons" />
+        <JournalStats :chosen-player-id="chosenPlayerId" />
      </div>

      <div class="journal_refreshed-date">
@@ -29,6 +29,8 @@
          :dataStatus="dataStatus"
          :scrollDataLoaded="scrollDataLoaded"
          :scrollNoMoreData="scrollNoMoreData"
+          :extraInfoIndexes="extraInfoIndexes"
+          @toggleExtraInfo="toggleExtraInfo"
        />
      </div>
    </div>
@@ -118,35 +120,6 @@ export const journalTimetableFilters: Journal.TimetableFilter[] = [
  }
 ];

-interface TimetablesQueryParams {
-  driverName?: string;
-  trainNo?: string;
-  timetableId?: string;
-  categoryCode?: string;
-
-  authorName?: string;
-
-  dateFrom?: string;
-  dateTo?: string;
-
-  issuedFrom?: string;
-  terminatingAt?: string;
-  via?: string;
-
-  countFrom?: number;
-  countLimit?: number;
-
-  fulfilled?: number;
-  terminated?: number;
-
-  twr?: number;
-  skr?: number;
-  pn?: number;
-  tn?: number;
-
-  sortBy?: Journal.TimetableSorter['id'];
-}
-
 export default defineComponent({
  components: {
    JournalOptions,
@@ -169,35 +142,18 @@ export default defineComponent({
    mainStore: useMainStore(),
    apiStore: useApiStore(),

-    statsButtons: [
-      {
-        tab: Journal.StatsTab.DAILY_STATS,
-        localeKey: 'journal.daily-stats.button',
-        iconName: 'stats',
-        disabled: false
-      },
-      {
-        tab: Journal.StatsTab.DRIVER_STATS,
-        localeKey: 'journal.driver-stats.button',
-        iconName: 'train',
-        disabled: true
-      }
-    ],
-
-    currentQueryParams: {} as TimetablesQueryParams,
+    currentQueryParams: {} as API.TimetableHistory.QueryParams,
    dataRefreshedAt: null as Date | null,

    scrollDataLoaded: true,
    scrollNoMoreData: false,
+    extraInfoIndexes: [] as number[],

-    showReturnButton: false,
-    statsCardOpen: false,
-    currentOptionsActive: false,
+    chosenPlayerId: -1,

-    timetableHistory: [] as API.TimetableHistory.Response,
+    timetableHistory: [] as API.TimetableHistory.ResponseShort,

-    dataStatus: Status.Data.Loading,
-    dataErrorMessage: ''
+    dataStatus: Status.Data.Loading
  }),

  setup() {
@@ -213,6 +169,7 @@ export default defineComponent({
      'search-train': '',
      'search-driver': '',
      'search-dispatcher': '',
+      'search-includesScenery': '',
      'search-issuedFrom': '',
      'search-via': '',
      'search-terminatingAt': '',
@@ -243,18 +200,11 @@ export default defineComponent({
    };
  },

-  watch: {
-    currentQueryParams(q: TimetablesQueryParams) {
-      this.currentOptionsActive = Object.values(q).some((v) => v !== undefined);
-    },
-
-    'mainStore.driverStatsData'(driverStats) {
-      this.statsButtons.find((sb) => sb.tab == Journal.StatsTab.DRIVER_STATS)!.disabled =
-        driverStats === undefined;
-    },
-
-    async 'mainStore.driverStatsName'() {
-      this.fetchDriverStats();
+  computed: {
+    currentOptionsActive() {
+      return Object.keys(this.currentQueryParams)
+        .filter((k) => k != 'countFrom' && k != 'returnType')
+        .some((k) => (this.currentQueryParams as any)[k] !== undefined);
    }
  },

@@ -285,28 +235,21 @@ export default defineComponent({
      this.setOptions(query as any);
    },

-    async fetchDriverStats() {
-      if (!this.mainStore.driverStatsName) {
-        this.mainStore.driverStatsData = undefined;
-        this.mainStore.driverStatsStatus = Status.Data.Initialized;
-        return;
-      }
+    async toggleExtraInfo(timetableDetails: API.TimetableHistory.Data | null) {
+      if (!timetableDetails) return;

-      try {
-        this.mainStore.driverStatsStatus = Status.Data.Loading;
+      const existingIdx = this.extraInfoIndexes.indexOf(timetableDetails.id);

-        const statsData: API.DriverStats.Response = await (
-          await this.apiStore.client!.get(
-            `api/getDriverInfo?name=${this.mainStore.driverStatsName}`
-          )
-        ).data;
+      if (existingIdx == -1) {
+        this.extraInfoIndexes.push(timetableDetails.id);

-        this.mainStore.driverStatsData = statsData;
-        this.mainStore.driverStatsStatus = Status.Data.Loaded;
-      } catch (error) {
-        this.mainStore.driverStatsData = undefined;
-        this.mainStore.driverStatsStatus = Status.Data.Error;
-        console.error('Ups! Wystąpił błąd przy próbie pobrania statystyk maszynisty! :/');
+        const synchedTimetable = this.timetableHistory.find((t) => t.id == timetableDetails.id);
+
+        if (synchedTimetable) {
+          Object.assign(synchedTimetable, timetableDetails);
+        }
+      } else {
+        this.extraInfoIndexes.splice(existingIdx, 1);
      }
    },

@@ -352,25 +295,33 @@ export default defineComponent({
    },

    async fetchHistoryData() {
+      this.extraInfoIndexes.length = 0;
+
      const driverName = this.searchersValues['search-driver'].trim() || undefined;
      const trainNo = this.searchersValues['search-train'].trim() || undefined;
      const authorName = this.searchersValues['search-dispatcher'].trim() || undefined;
-      const dateFrom = this.searchersValues['search-date-from'].trim() || undefined;
+      const dateFromString = this.searchersValues['search-date-from'].trim() || undefined;
+      const includesScenery = this.searchersValues['search-includesScenery'].trim() || undefined;
      const issuedFrom = this.searchersValues['search-issuedFrom'].trim() || undefined;
      const via = this.searchersValues['search-via'].trim() || undefined;
      const terminatingAt = this.searchersValues['search-terminatingAt'].trim() || undefined;
      const categoryCode = this.searchersValues['select-categoryCode'].trim() || undefined;

-      let dateTo: string | undefined = undefined;
+      let dateFromISO: string | undefined = undefined;
+      let dateToISO: string | undefined = undefined;

-      if (dateFrom) {
-        const d = new Date(dateFrom);
-        d.setDate(d.getDate() + 1);
+      if (dateFromString) {
+        let dateFrom = new Date(dateFromString);
+        dateFrom.setMinutes(dateFrom.getMinutes() + dateFrom.getTimezoneOffset());

-        dateTo = d.toISOString().split('T')[0];
+        let dateTo = new Date(dateFrom);
+        dateTo.setDate(dateTo.getDate() + 1);
+
+        dateFromISO = dateFrom.toISOString();
+        dateToISO = dateTo.toISOString();
      }

-      const queryParams: TimetablesQueryParams = {};
+      const queryParams: API.TimetableHistory.QueryParams = {};

      this.filterList
        .filter((f) => f.isActive)
@@ -430,12 +381,14 @@ export default defineComponent({
      queryParams['countLimit'] = undefined;

      queryParams['authorName'] = authorName;
-      queryParams['dateFrom'] = dateFrom;
-      queryParams['dateTo'] = dateTo;
+      queryParams['dateFrom'] = dateFromISO;
+      queryParams['dateTo'] = dateToISO;
+      queryParams['includesScenery'] = includesScenery;
      queryParams['issuedFrom'] = issuedFrom;
      queryParams['terminatingAt'] = terminatingAt;
      queryParams['via'] = via;
      queryParams['categoryCode'] = categoryCode;
+      queryParams['returnType'] = 'short';

      queryParams['issuedFrom'] = issuedFrom;
      queryParams['sortBy'] =
@@ -447,7 +400,7 @@ export default defineComponent({
      this.currentQueryParams = queryParams;

      try {
-        const responseData: API.TimetableHistory.Response = await (
+        const responseData: API.TimetableHistory.ResponseShort = await (
          await this.apiStore.client!.get('api/getTimetables', {
            params: this.currentQueryParams
          })
@@ -455,26 +408,23 @@ export default defineComponent({

        if (!responseData) {
          this.dataStatus = Status.Data.Error;
-          this.dataErrorMessage = 'Brak danych!';
+          this.chosenPlayerId = -1;
          return;
        }

-        if (!responseData) return;
-
        // Response data exists
        this.timetableHistory = responseData;

-        // Stats display
-        this.mainStore.driverStatsName =
-          this.timetableHistory.length > 0 && this.searchersValues['search-driver'].trim()
-            ? this.timetableHistory[0].driverName
-            : '';
+        this.chosenPlayerId =
+          this.timetableHistory.length > 0 && this.searchersValues['search-driver'].trim() != ''
+            ? this.timetableHistory[0].driverId
+            : -1;

        this.dataStatus = Status.Data.Loaded;
        this.dataRefreshedAt = new Date();
      } catch (error) {
        this.dataStatus = Status.Data.Error;
-        this.dataErrorMessage = 'Ups! Coś poszło nie tak!';
+        this.chosenPlayerId = -1;
      }

      this.scrollNoMoreData = false;
@@ -0,0 +1,150 @@
+<template>
+  <div class="profile-view">
+    <div class="profile-wrapper" v-if="playerInfo && playerDataStatus == Status.Data.Loaded">
+      <ProfileSummary :playerInfo="playerInfo" :playerName="playerName" />
+
+      <div class="profile-side">
+        <ProfileRecentStats :playerInfo="playerInfo" />
+        <ProfileHistoryList :playerName="playerName" />
+      </div>
+    </div>
+
+    <Loading v-else-if="playerDataStatus == Status.Data.Loading" />
+
+    <div class="no-data-found" v-else>
+      <div>
+        <h3>{{ t('profile.no-player-found') }}</h3>
+        <router-link to="/" class="btn btn--text"> {{ t('profile.return-to-main') }}</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onActivated, onDeactivated, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useApiStore } from '../store/apiStore';
+import { API } from '../typings/api';
+import { useI18n } from 'vue-i18n';
+import { Status } from '../typings/common';
+
+import Loading from '../components/Global/Loading.vue';
+import ProfileSummary from '../components/PlayerProfileView/ProfileSummary.vue';
+import ProfileRecentStats from '../components/PlayerProfileView/ProfileRecentStats.vue';
+import ProfileHistoryList from '../components/PlayerProfileView/ProfileHistoryList.vue';
+
+const { t } = useI18n();
+
+const apiStore = useApiStore();
+const route = useRoute();
+
+const playerId = ref(-1);
+const playerName = ref('');
+
+const playerInfo = ref<API.PlayerInfo.Data | null>(null);
+const playerDataStatus = ref(Status.Data.Initialized);
+
+const intervalId = ref(-1);
+
+onActivated(() => {
+  fetchPlayerData();
+
+  intervalId.value = setInterval(fetchPlayerData, 30000);
+});
+
+onDeactivated(() => {
+  clearInterval(intervalId.value);
+  intervalId.value = -1;
+});
+
+async function fetchPlayerData() {
+  const queryPlayerId = Number(route.query.playerId) || -1;
+
+  if (!apiStore.client || !queryPlayerId) return;
+
+  if (queryPlayerId != playerId.value) {
+    playerDataStatus.value = Status.Data.Loading;
+  }
+
+  playerId.value = queryPlayerId;
+
+  try {
+    const response = await apiStore.client.get<API.PlayerInfo.Data>('api/getPlayerInfo', {
+      params: {
+        playerId: queryPlayerId
+      }
+    });
+
+    playerName.value =
+      response.data.driverStats.driverName || response.data.dispatcherStats.dispatcherName || '';
+
+    playerInfo.value = response.data || null;
+    playerDataStatus.value = Status.Data.Loaded;
+  } catch (error) {
+    console.error(error);
+    playerDataStatus.value = Status.Data.Error;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@use '../styles/responsive';
+
+.profile-view {
+  display: flex;
+  justify-content: center;
+
+  height: 100vh;
+  min-height: 500px;
+  max-height: 2000px;
+}
+
+.no-data-found {
+  text-align: center;
+
+  max-width: var(--max-container-width);
+  width: 100%;
+  background-color: var(--clr-tile);
+  padding: 1em;
+  margin: 1em;
+
+  a {
+    display: inline-block;
+    text-decoration: underline;
+    margin-top: 0.5em;
+  }
+}
+
+.profile-wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr;
+
+  gap: 1em;
+  position: relative;
+
+  max-width: var(--max-container-width);
+  width: 100%;
+
+  padding: 1rem 0;
+  text-align: center;
+}
+
+.profile-side {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  overflow: auto;
+  background-color: var(--clr-tile);
+  border-radius: 0.5em;
+}
+
+@include responsive.midScreen {
+  .profile-view {
+    height: auto;
+  }
+
+  .profile-wrapper {
+    grid-template-columns: 1fr;
+    max-width: 1000px;
+  }
+}
+</style>
@@ -135,6 +135,10 @@ function setViewMode(componentName: string) {
  &-view {
    display: flex;
    justify-content: center;
+
+    height: 100vh;
+    min-height: 500px;
+    max-height: 2000px;
  }

  &-offline {
@@ -181,10 +185,6 @@ function setViewMode(componentName: string) {
  background-color: #181818;
  border-radius: 0.5em;
  padding: 1em 0.5em;
-
-  height: calc(100vh - 0.5em);
-  min-height: 500px;
-  max-height: 2000px;
 }

 .scenery-left {
@@ -236,6 +236,10 @@ function setViewMode(componentName: string) {
 }

@include responsive.midScreen {
+  .scenery-view {
+    height: auto;
+  }
+  
  .scenery-wrapper {
    grid-template-columns: 1fr;
    gap: 0;
@@ -13,6 +13,35 @@
        </div>

        <div class="topbar-links">
+          <button
+            v-if="isOldStacjownikDomain"
+            class="btn--image migrate-info-button"
+            @click="toggleMigrateInfoCard(true)"
+            data-tooltip-type="HtmlTooltip"
+            :data-tooltip-content="`<b>${$t('migrate-info.tooltip-content')}</b>`"
+          >
+            <img :src="`/images/icon-alert-triangle.svg`" alt="show migrate info card" />
+          </button>
+
+          <button
+            class="btn--image lang-button"
+            @click="toggleLocales()"
+            data-tooltip-type="HtmlTooltip"
+            :data-tooltip-content="`<b>${$t('app.language-tooltip-content')}</b>`"
+          >
+            <FlagIcon :language-id="mainStore.currentLocale == 'pl' ? 0 : 1" />
+          </button>
+
+          <a
+            class="a-button btn--image discord-link"
+            href="https://discord.gg/x2mpNN3svk"
+            target="_blank"
+            data-tooltip-type="HtmlTooltip"
+            :data-tooltip-content="`<b>${$t('app.discord-link-content')}</b>`"
+          >
+            <img src="/images/icon-discord.png" alt="discord logo icon" />
+          </a>
+
          <a
            class="a-button btn--image gnr-link"
            href="https://generator-td2.web.app/"
@@ -63,6 +92,7 @@ import { reactive } from 'vue';
 import { provide } from 'vue';
 import { ActiveSorter } from '../components/StationsView/typings';
 import { onMounted } from 'vue';
+import FlagIcon from '../components/Global/FlagIcon.vue';

 const filterInitStates = { ...initFilters };

@@ -71,7 +101,8 @@ export default defineComponent({
    StationTable,
    StationFilterCard,
    StationStats,
-    DonationCard
+    DonationCard,
+    FlagIcon
  },

  data: () => ({
@@ -96,6 +127,20 @@ export default defineComponent({
  methods: {
    toggleDonationCard(value: boolean) {
      this.isDonationCardOpen = value;
+    },
+
+    toggleMigrateInfoCard(value: boolean) {
+      this.mainStore.isMigrateInfoCardOpen = value;
+    },
+
+    toggleLocales() {
+      this.mainStore.changeLocale(this.mainStore.currentLocale == 'pl' ? 'en' : 'pl');
+    }
+  },
+
+  computed: {
+    isOldStacjownikDomain() {
+      return location.hostname == 'stacjownik-td2.web.app';
    }
  }
 });
@@ -120,11 +165,12 @@ export default defineComponent({

 .stations-topbar {
  display: flex;
+  flex-wrap: wrap;
  gap: 0.5em;
  justify-content: space-between;

-  position: relative;
  margin-bottom: 0.5em;
+  position: relative;

  & > div {
    display: flex;
@@ -149,6 +195,16 @@ button.donation-button {
  }
 }

+button.lang-button {
+  padding: 0 0.5em;
+  background-color: #111;
+}
+
+button.migrate-info-button {
+  padding: 0 0.5em;
+  background-color: var(--clr-primary);
+}
+
 a.pojazdownik-link {
  background-color: #1f263b;

@@ -157,11 +213,12 @@ a.pojazdownik-link {
  }
 }

-a.gnr-link {
+a.gnr-link,
+a.discord-link {
  background-color: #141414;

  &:hover {
-    background-color: #222222;
+    background-color: #333;
  }
 }

@@ -1,8 +1,8 @@
 {
  "compilerOptions": {
    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Spythere	65c1ab809f	chore(views): adjusted viewport heights and scrolls	2026-02-23 22:03:49 +01:00
Spythere	e7c8ba62d7	fix(app): region dropdown z-index	2026-02-23 21:36:51 +01:00
Spythere	38a9f1987f	chore(profile): added activity region	2026-02-23 21:35:41 +01:00
Spythere	f90dfd3cc8	chore(css): enabled dark mode and restored default scrollbar design	2026-02-23 21:25:46 +01:00
Spythere	9b765c7fdd	chore(profile): added periodic player info & history updates	2026-02-20 02:13:52 +01:00
Spythere	0f7e3e8820	chore(profile): minor design fixes	2026-02-20 02:01:13 +01:00
Spythere	1735444176	refactor(profile): data loading indicators	2026-02-20 01:58:29 +01:00
Spythere	1d95b26e9c	chore(app): moved discord link from footer to stations view	2026-02-20 01:38:13 +01:00
Spythere	86fbaa2510	chore(profile): moved player avatar and its logic to separate component	2026-02-20 01:27:35 +01:00
Spythere	b7db3edd9b	chore(app): removed migration card rendering	2026-02-18 23:56:32 +01:00
Spythere	72fa9523e8	refactor(stats): moved fetching daily stats data to store	2026-02-18 02:51:33 +01:00
Spythere	7b07a43715	fix(profile): wrapping journal links	2026-02-18 02:32:28 +01:00
Spythere	448c6e387e	chore(profile): added information about no recent history	2026-02-18 02:31:47 +01:00
Spythere	527c929b53	chore(profile): added TD2 forum profile link button	2026-02-18 02:23:08 +01:00
Spythere	b622df19f6	chore(profile): added stacjownik donator indicator	2026-02-18 02:20:47 +01:00
Spythere	03e69b315c	chore(profile): design & layout adjustments	2026-02-18 02:14:30 +01:00
Spythere	f2c11bf2cf	chore(profile): date formatting from utils	2026-02-18 01:55:59 +01:00
Spythere	92c73b9ed9	chore(profile): added missing translations	2026-02-18 01:55:34 +01:00
Spythere	acc15619a9	chore(profile): improved responsiveness & design	2026-02-17 23:00:53 +01:00
Spythere	3705325a9a	chore(profile): added links to player journals; merged player activity into main info	2026-02-17 22:37:16 +01:00
Spythere	1655aa2c94	chore(profile): moved fetching history journal to separate component	2026-02-17 22:19:54 +01:00
Spythere	f38ad8fa81	chore(journal): added dispatcher filtering by duty id	2026-02-17 21:56:40 +01:00
Spythere	1a7801259f	chore(profile): added router links for history list	2026-02-17 17:06:14 +01:00
Spythere	abd1c8b684	fix(journal): timetable entries minor fixes	2026-02-17 16:47:06 +01:00
Spythere	7f315b549e	chore(journal): added synching detailed timetable data with basic	2026-02-17 02:17:32 +01:00
Spythere	329c85b858	refactor(journal): fetching heavy timetable details separately on demand	2026-02-16 02:16:22 +01:00
Spythere	dcef8cdac8	chore(profile): improved history list design	2026-02-15 17:50:52 +01:00
Spythere	298f8a5f23	chore(driver): changed button to navigate to player's profile	2026-02-15 17:22:12 +01:00
Spythere	51d952ffee	chore(profile): improved profile player stats header	2026-02-15 17:18:17 +01:00
Spythere	83b22e5978	chore(profile): player activity section design	2026-02-15 17:13:42 +01:00
Spythere	87ad7b8ede	chore(stations): disabled opening donation modal on clicking nickname	2026-02-15 16:28:58 +01:00
Spythere	440e11bdd9	fix(profile): i18n keys	2026-02-15 16:27:16 +01:00
Spythere	84ecd3c175	chore(profile): added i18n translation bindings & pl locale keys	2026-02-14 02:27:03 +01:00
Spythere	72b3aef045	refactor(profile): moved view sections and their logic to separate components	2026-02-14 00:53:45 +01:00
Spythere	36ae24fdaf	refactor(profile): moved view sections and their logic to separate components	2026-02-14 00:53:19 +01:00
Spythere	41e3d018e6	chore: profile	2026-02-13 00:52:02 +01:00
Spythere	d9faa486d2	chore(app): improved scrolling into view for main tabs	2026-02-12 03:32:01 +01:00
Spythere	89dc265e1b	hotfix(app): caching CSS files; reusing global styles in App.vue	2026-02-11 23:24:23 +01:00
Spythere	200e994ae6	chore(profile): change appearance of activity history entries	2026-02-10 00:28:57 +01:00
Spythere	150b7749ae	chore(profile): added level badges for player summary	2026-02-09 00:52:11 +01:00
Spythere	0f8932b53c	refactor(journal): removed seperate driver & dispatcher stats dropdowns; added button leading to player profile view	2026-02-08 22:00:15 +01:00
Spythere	1365140802	chore(profile): added loading status	2026-02-08 01:34:59 +01:00
Spythere	ce8bbe4c67	chore(profile): updated api objects; replaced mock data with api results	2026-02-07 20:54:03 +01:00
Spythere	1d49de1c6b	chore(profile): organized fetching data; added link to profile in scenery view	2026-02-07 01:18:28 +01:00
Spythere	b8574f9ea1	chore(profile): translation setup	2026-02-06 17:15:29 +01:00
Spythere	ecced14cca	chore(profile): generating menu buttons from object	2026-02-06 17:12:58 +01:00
Spythere	212a87126d	chore(profile): changed routing from params to query	2026-02-06 17:05:21 +01:00
Spythere	41e50b8207	chore(profile): view container responsiveness	2026-02-06 17:00:12 +01:00
Spythere	565b0dfd8c	chore(profile): journal history list design	2026-02-06 03:20:25 +01:00
Spythere	40a0b47984	chore(profile): added combined journal with timetables and dispatchers; added journal filters	2026-02-06 01:49:18 +01:00
Spythere	ccca1c8752	chore(profile): added grid layout & cleaned up styles	2026-02-06 01:16:32 +01:00
Spythere	cf51045343	chore(player profile): added typings for player info response object	2026-02-04 01:02:57 +01:00
Spythere	23a8b9e8d4	feature: player profile view	2026-02-02 03:12:40 +01:00
Spythere	b34f8229cc	bump(version): v1.31.1	2026-01-15 17:32:53 +01:00
Spythere	f1eee97d46	chore(stations): added sorting by dispatcher language id	2026-01-15 17:30:35 +01:00
Spythere	d93be0b9be	fix(stations): fixed displaying dispatcher flag for inactive sceneries	2026-01-15 17:27:11 +01:00
Spythere	5190eed7ee	fix(journal): restored bold font for journal dispatcher entry	2026-01-14 21:22:53 +01:00
Spythere	a6f284270e	chore(flags): adjusted flags styles	2026-01-14 21:21:09 +01:00
Spythere	08422caa96	chore(journal): added language flags to journal entries	2026-01-14 20:57:22 +01:00
Spythere	3a70d8f6a6	chore(index): changed some images from preloads to prefetches	2026-01-14 20:38:18 +01:00
Spythere	e3e5eb3460	refactor: added language flag component	2026-01-14 20:29:02 +01:00
Spythere	1819569234	feat: user communication flags	2026-01-14 00:14:35 +01:00
Spythere	052ca08f01	fix(app): badges styling	2026-01-10 21:19:27 +01:00
Spythere	b01b2f8360	fix(update card): minor style improvements	2026-01-10 21:09:13 +01:00
Spythere	bda369d13b	bump(version): v1.31.0	2026-01-10 20:51:29 +01:00
Spythere	a8cac9ebe9	refactor(vehicles): replaced URL for fetching vehicles data; changed vehicle group finding	2026-01-05 22:45:30 +01:00
Spythere	0d55a10ec2	fix(journal): including timezone in date filters	2025-12-19 13:44:56 +01:00
Spythere	fa7b1c1629	fix(journal): including timezone in date filters	2025-12-19 01:13:42 +01:00
Spythere	c99b5df4aa	refactor(sceneryinfo): styles scope	2025-12-18 01:14:56 +01:00
Spythere	0b435c95a0	feat(journal): added timetable filtering by included scenery	2025-12-18 00:46:18 +01:00
Spythere	5d32145f13	refactor(app): styles cleanup; minor code improvements	2025-12-18 00:39:17 +01:00
Spythere	cb6ea1edb2	chore(icons): added heart icon	2025-12-16 20:42:27 +01:00
Spythere	6a3974f899	chore(dev): vite config adjustments	2025-12-16 20:42:02 +01:00
Spythere	2cbeef7611	feat(filters) filtering stations by real lines	2025-12-15 21:38:50 +01:00
Spythere	43be04826d	chore(filters): removed authors propositions for hidden sceneries	2025-12-15 20:45:23 +01:00
Spythere	d9986da354	refactor(filters): changed datalists to selecting options for authors & projects filters	2025-12-15 20:41:26 +01:00
Spythere	ac2269c5a5	chore(update card): improved heading and list style, fixed github link	2025-12-15 15:00:14 +01:00
Spythere	6957120b3b	chore(workflows): changed push branch from master to main	2025-12-15 13:18:55 +01:00
Spythere	c0b892da97	fix(stations): replaced toolbar from overflow (bugging statistics dropdown) to flex wrap	2025-12-13 02:18:35 +01:00
Spythere	907b75f12b	chore(workflows): replaced sending files via rsync instead of scp	2025-12-13 02:13:43 +01:00
Spythere	47f824bef0	fix(migrate): translation correction	2025-12-13 00:19:20 +01:00
Spythere	2d3e830cf9	chore(migrate): migrate card toggle button visible only for old domain	2025-12-13 00:16:35 +01:00
Spythere	c888b3d386	chore(translation): added missing translations; corrections	2025-12-13 00:11:15 +01:00
Spythere	645a70ef9c	chore(app): added button for manual migration info card toggle	2025-12-12 18:24:51 +01:00
Spythere	1cd93f09c4	chore(migrate info): completed english translation; opening card on query	2025-12-12 15:07:08 +01:00
Spythere	6b4231496e	chore(app): displaying migration card only on web.app domain	2025-12-11 01:53:10 +01:00
Spythere	b72ee13bdb	chore(workflow): added project name env to vps deploy	2025-12-11 01:43:01 +01:00
Spythere	ce053a5a82	chore(app): added card with information about scheduled migration to new hosting	2025-12-11 01:37:16 +01:00
Spythere	b08e39ae1a	chore(workflow): separated job steps for ssh & scp commands	2025-12-10 13:59:16 +01:00
Spythere	dc27500237	chore: updated regex for production host flag	2025-12-10 13:55:39 +01:00
Spythere	47193181e5	chore: extended isChristmas check from 20th to 6th December	2025-12-05 21:25:43 +01:00
Spythere	7bbabdd7bf	hotfix: VPS deploy	2025-12-04 00:26:39 +01:00
Spythere	200318def7	chore: updated gh workflow for deploying files to VPS	2025-12-04 00:19:16 +01:00
Spythere	f335ca8fc2	chore: updated welcome card english flag image	2025-11-28 00:58:19 +01:00
Spythere	15e599fe3c	chore: moved language button to sceneries table top bar	2025-11-27 21:33:19 +01:00
Spythere	bd25914ed4	fix: missing typings for hidden property	2025-11-27 21:30:32 +01:00
Spythere	01ea259381	fix: added hiding project filter propositions for hidden sceneries	2025-11-27 21:10:34 +01:00
Spythere	aea26fa538	chore: groupped station filters inputs to the top of the card; added project filter	2025-11-27 21:04:55 +01:00
Spythere	28d78cd2bc	chore: improved scenery timetables history router link style	2025-11-22 23:00:11 +01:00
Spythere	a021deae96	refactor: scenery timetables history date parsing	2025-11-22 22:54:43 +01:00
Spythere	8840576796	chore: changed alignment and order of history mode buttons	2025-11-22 22:05:20 +01:00
Spythere	5018e21736	chore: updated locales	2025-11-22 22:04:57 +01:00
Spythere	a7fa1dfb6d	chore: added filter for fetching all scenery timetables	2025-11-22 22:04:37 +01:00
Spythere	a3558c0b30	bump: v1.30.7	2025-11-22 01:30:48 +01:00
Spythere	ee159fd582	fix: vehicle thumbnail overflowing text	2025-11-22 01:30:29 +01:00
Spythere	35c9fb7ef1	Merge pull request #142 from Spythere/development hotfix: loading indicator for scenery history tabs	2025-10-25 19:40:33 +02:00
Spythere	e24097c240	hotfix: loading indicator for scenery history tabs	2025-10-25 19:37:02 +02:00
Spythere	01cbebd019	Merge pull request #141 from Spythere/development hotfix: preload & prefetch optimization	2025-10-07 22:36:59 +02:00
Spythere	3a5ef7e025	hotfix: preload & prefetch optimization	2025-10-07 18:37:27 +02:00
Spythere	c78a5b4d67	Merge pull request #140 from Spythere/development hotfix: checkpoints filtering for unknown sceneries	2025-09-17 20:06:19 +02:00
Spythere	023de9f7b8	fix: view caching & icons flicker	2025-09-16 22:32:04 +02:00
Spythere	1024e44cc0	hotfix: checkpoints filtering for unknown sceneries	2025-09-16 20:45:27 +02:00
Spythere	580d404d4a	Merge pull request #139 from Spythere/development v1.30.6	2025-09-15 14:23:43 +02:00
Spythere	6d1ef26ac1	chore: added a display of the timetable max speed in the active train info & tooltip	2025-09-14 15:10:48 +02:00
Spythere	bf9799e0c3	bump: v1.30.6	2025-09-14 14:52:04 +02:00
Spythere	1d13e31d79	chore: restored station filtering by non-electric double track routes	2025-09-14 14:51:44 +02:00
Spythere	16f272bd7d	chore: added SCS+SPK station filter	2025-09-14 14:43:20 +02:00
Spythere	23ca33264c	chore: PWA caching	2025-09-14 14:38:56 +02:00
Spythere	324ca3de4d	chore: config adjustments	2025-09-14 14:38:42 +02:00
Spythere	e0548e593c	fix: stats header font size	2025-09-14 14:38:17 +02:00
Spythere	2727350837	Merge pull request #138 from Spythere/development v1.30.5	2025-09-07 23:57:19 +02:00
Spythere	6c3af0a8d3	chore: updated packages versions	2025-09-06 14:04:18 +02:00
Spythere	e784202a36	chore: removed displaying exit track speeds if they are the same as the base ones	2025-09-06 13:42:00 +02:00
Spythere	c24f691693	fix: track count depiction in train schedule for unknown sceneries	2025-09-06 13:34:03 +02:00
Spythere	3aeabd63c9	bump: v1.30.5	2025-09-06 02:18:14 +02:00
Spythere	4c79376318	chore: restored SCS+SPK control type support	2025-09-06 02:17:28 +02:00
Spythere	bc1c446c37	chore: added missing checkpoints data fallback for unknown sceneries	2025-09-06 01:57:59 +02:00
Spythere	fba335d0c7	fix: scenery without general info shown always as offline; wrong route info for unknown sceneries	2025-09-05 20:03:17 +02:00
Spythere	b4e536da40	Merge pull request #137 from Spythere/development v1.30.4 hotfixes	2025-07-27 14:42:53 +02:00
Spythere	8cde8e6323	hotfix: offline train badge visibility	2025-07-27 14:39:44 +02:00
Spythere	d7a9e93978	hotfix: added missing input field keybind prevention	2025-07-27 14:37:50 +02:00
Spythere	69aa62e77f	Merge pull request #136 from Spythere/development hotfix: translations	2025-07-20 14:09:44 +02:00
Spythere	4b842627fb	hotfix: translations	2025-07-20 14:09:07 +02:00
Spythere	5ffc63a815	Merge pull request #135 from Spythere/development v1.30.4	2025-07-20 14:03:10 +02:00
Spythere	87f7ff58e8	chore: added info about offline driver for train info tooltip and scenery timetables	2025-07-19 15:34:49 +02:00
Spythere	8b6944a8e5	fix(ScheduledTrainStatus): router link only for timetable statuses with station name hrefs	2025-07-19 15:21:32 +02:00
Spythere	cfeeb8fddd	bump: v1.30.4	2025-07-17 14:46:02 +02:00
Spythere	89f7fd3c53	refactor: changed drivers select to datalist in active train options	2025-07-17 14:45:33 +02:00
Spythere	86259988c9	refactor: added more advanced tooltips for station table icons	2025-07-17 14:34:05 +02:00
Spythere	7b5ef18ad6	chore: added train info tooltips for scenery user badges	2025-07-17 14:09:10 +02:00
Spythere	d784042691	chore: added router links to timetable train statuses in scenery view	2025-07-17 14:03:18 +02:00
Spythere	d0e482aa4f	chore: changed speed placement in train info tooltip	2025-07-17 13:45:45 +02:00
Spythere	3bf1db52b4	chore(scenery): advanced active train tooltip information	2025-07-11 15:33:28 +02:00
Spythere	8e713a5c6e	chore: added & optimized users tooltip data typings	2025-07-11 14:46:07 +02:00