From f0755e8046119d2fac38b5590ece0997bd66c789 Mon Sep 17 00:00:00 2001
From: GarandPLG <garandplg@garandplg.com>
Date: Tue, 8 Oct 2024 22:44:31 +0200
Subject: [PATCH] =?UTF-8?q?zaprojektowanie=20struktury=20bazy=20danych=20w?=
 =?UTF-8?q?=20pocketbase=20za=20pomoc=C4=85=20drawio.=20zmiana=20w=20start?=
 =?UTF-8?q?-dev.sh.=20Sosanie=20suspense=20do=20App.vue=20dla=20obs=C5=82u?=
 =?UTF-8?q?gi=20komponent=C3=B3w=20asynchronicznych.=20Ikonki=20do=20paska?=
 =?UTF-8?q?=20nawigacyjnego=20i=20linki=20do=20panelu=20administracyjnego.?=
 =?UTF-8?q?=20Dodanie=20zarysu=20wy=C5=9Bwietlania=20mapy=20z=20uzyciem=20?=
 =?UTF-8?q?savea=20z=20bazy=20danych.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dev-server-containers.yaml                    |  29 ++
 .../1728306649_created_biomes.js              |  81 +++
 .../1728307044_updated_biomes.js              | 290 +++++++++++
 .../1728307154_updated_biomes.js              | 396 +++++++++++++++
 .../1728307230_updated_biomes.js              | 204 ++++++++
 .../1728310072_created_religions.js           | 115 +++++
 .../pb_migrations/1728388642_created_maps.js  |  43 ++
 .../pb_migrations/1728390521_updated_maps.js  |  18 +
 .../pb_migrations/1728396643_updated_users.js |  34 ++
 pocketbase/pocketbase.drawio                  | 466 ++++++++++++++++++
 src/App.vue                                   |  17 +-
 src/components/NavigationBar.vue              | 124 +++--
 src/pages/index.vue                           |   3 +-
 src/pages/map.vue                             |  28 ++
 src/stores/listenCurrentUser.ts               |   3 -
 src/types/pb-types.ts                         |  56 +++
 src/types/typed-router.d.ts                   |   1 +
 start-dev.sh                                  |  32 +-
 types/auto-imports.d.ts                       | 322 ++++++++++++
 types/components.d.ts                         |  13 +
 20 files changed, 2201 insertions(+), 74 deletions(-)
 create mode 100644 dev-server-containers.yaml
 create mode 100644 pocketbase/pb_migrations/1728306649_created_biomes.js
 create mode 100644 pocketbase/pb_migrations/1728307044_updated_biomes.js
 create mode 100644 pocketbase/pb_migrations/1728307154_updated_biomes.js
 create mode 100644 pocketbase/pb_migrations/1728307230_updated_biomes.js
 create mode 100644 pocketbase/pb_migrations/1728310072_created_religions.js
 create mode 100644 pocketbase/pb_migrations/1728388642_created_maps.js
 create mode 100644 pocketbase/pb_migrations/1728390521_updated_maps.js
 create mode 100644 pocketbase/pb_migrations/1728396643_updated_users.js
 create mode 100644 pocketbase/pocketbase.drawio
 create mode 100644 src/pages/map.vue
 create mode 100644 types/auto-imports.d.ts
 create mode 100644 types/components.d.ts

diff --git a/dev-server-containers.yaml b/dev-server-containers.yaml
new file mode 100644
index 0000000..a01d93a
--- /dev/null
+++ b/dev-server-containers.yaml
@@ -0,0 +1,29 @@
+name: 'garands-wg-dev-containers'
+services:
+  pocketbase:
+    image: dpr.garandplg.com/garandplg/pocketbase:latest
+    container_name: pocketbase
+    ports:
+      - '8090:8090'
+    networks:
+      garands-wg-dev-containers:
+    volumes:
+      - ./pocketbase/pb_data:/pb_data
+      - ./pocketbase/pb_hooks:/pb_hooks
+      - ./pocketbase/pb_migrations:/pb_migrations
+    healthcheck:
+      test: wget --no-verbose --tries=1 --spider http://localhost:8090/api/health || exit 1
+      interval: 5s
+      timeout: 5s
+      retries: 5
+  # azgaar:
+  #   image: dpr.garandplg.com/azgaar/fantasy-map-generator:latest
+  #   container_name: azgaar
+  #   ports:
+  #     - '8091:80'
+  #   networks:
+  #     garands-wg-dev-containers:
+
+networks:
+  garands-wg-dev-containers:
+    name: garands-wg-dev-containers
diff --git a/pocketbase/pb_migrations/1728306649_created_biomes.js b/pocketbase/pb_migrations/1728306649_created_biomes.js
new file mode 100644
index 0000000..bb6c000
--- /dev/null
+++ b/pocketbase/pb_migrations/1728306649_created_biomes.js
@@ -0,0 +1,81 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((db) => {
+  const collection = new Collection({
+    "id": "3r3zyqiq5orbj1v",
+    "created": "2024-10-07 13:10:49.262Z",
+    "updated": "2024-10-07 13:10:49.262Z",
+    "name": "biomes",
+    "type": "base",
+    "system": false,
+    "schema": [
+      {
+        "system": false,
+        "id": "fuod8jq8",
+        "name": "turn",
+        "type": "number",
+        "required": true,
+        "presentable": false,
+        "unique": false,
+        "options": {
+          "min": null,
+          "max": null,
+          "noDecimal": false
+        }
+      },
+      {
+        "system": false,
+        "id": "epzfx3cn",
+        "name": "group",
+        "type": "select",
+        "required": false,
+        "presentable": false,
+        "unique": false,
+        "options": {
+          "maxSelect": 1,
+          "values": [
+            "Cold desert",
+            "Glacier",
+            "Grassland",
+            "Hot desert",
+            "Savanna",
+            "Taiga",
+            "Temperate deciduous forest",
+            "Temperate rainforest",
+            "Tropical rainforest",
+            "Tropical seasonal forest",
+            "Tundra",
+            "Wetland"
+          ]
+        }
+      },
+      {
+        "system": false,
+        "id": "rlbrjxrr",
+        "name": "value",
+        "type": "number",
+        "required": true,
+        "presentable": false,
+        "unique": false,
+        "options": {
+          "min": null,
+          "max": null,
+          "noDecimal": false
+        }
+      }
+    ],
+    "indexes": [],
+    "listRule": null,
+    "viewRule": "",
+    "createRule": null,
+    "updateRule": null,
+    "deleteRule": null,
+    "options": {}
+  });
+
+  return Dao(db).saveCollection(collection);
+}, (db) => {
+  const dao = new Dao(db);
+  const collection = dao.findCollectionByNameOrId("3r3zyqiq5orbj1v");
+
+  return dao.deleteCollection(collection);
+})
diff --git a/pocketbase/pb_migrations/1728307044_updated_biomes.js b/pocketbase/pb_migrations/1728307044_updated_biomes.js
new file mode 100644
index 0000000..ce8f891
--- /dev/null
+++ b/pocketbase/pb_migrations/1728307044_updated_biomes.js
@@ -0,0 +1,290 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((db) => {
+  const dao = new Dao(db)
+  const collection = dao.findCollectionByNameOrId("3r3zyqiq5orbj1v")
+
+  // remove
+  collection.schema.removeField("epzfx3cn")
+
+  // remove
+  collection.schema.removeField("rlbrjxrr")
+
+  // add
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "7fgdlhvp",
+    "name": "Cold_desert",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // add
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "nw7o9edk",
+    "name": "Glacier",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // add
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "gz17qush",
+    "name": "Grassland",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // add
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "afb860j9",
+    "name": "Hot_desert",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // add
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "um6wh4qy",
+    "name": "Savanna",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // add
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "rataw3r6",
+    "name": "Taiga",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // add
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "edfk4bzi",
+    "name": "Temperate_deciduous_forest",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // add
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "yxpdr5yx",
+    "name": "Temperate_rainforest",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // add
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "p31ti2fe",
+    "name": "Tropical_rainforest",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // add
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "m3jmcjsb",
+    "name": "Tropical_seasonal_forest",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // add
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "edpxuqe3",
+    "name": "Tundra",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // add
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "fakphe3p",
+    "name": "Wetland",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  return dao.saveCollection(collection)
+}, (db) => {
+  const dao = new Dao(db)
+  const collection = dao.findCollectionByNameOrId("3r3zyqiq5orbj1v")
+
+  // add
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "epzfx3cn",
+    "name": "group",
+    "type": "select",
+    "required": false,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "maxSelect": 1,
+      "values": [
+        "Cold desert",
+        "Glacier",
+        "Grassland",
+        "Hot desert",
+        "Savanna",
+        "Taiga",
+        "Temperate deciduous forest",
+        "Temperate rainforest",
+        "Tropical rainforest",
+        "Tropical seasonal forest",
+        "Tundra",
+        "Wetland"
+      ]
+    }
+  }))
+
+  // add
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "rlbrjxrr",
+    "name": "value",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // remove
+  collection.schema.removeField("7fgdlhvp")
+
+  // remove
+  collection.schema.removeField("nw7o9edk")
+
+  // remove
+  collection.schema.removeField("gz17qush")
+
+  // remove
+  collection.schema.removeField("afb860j9")
+
+  // remove
+  collection.schema.removeField("um6wh4qy")
+
+  // remove
+  collection.schema.removeField("rataw3r6")
+
+  // remove
+  collection.schema.removeField("edfk4bzi")
+
+  // remove
+  collection.schema.removeField("yxpdr5yx")
+
+  // remove
+  collection.schema.removeField("p31ti2fe")
+
+  // remove
+  collection.schema.removeField("m3jmcjsb")
+
+  // remove
+  collection.schema.removeField("edpxuqe3")
+
+  // remove
+  collection.schema.removeField("fakphe3p")
+
+  return dao.saveCollection(collection)
+})
diff --git a/pocketbase/pb_migrations/1728307154_updated_biomes.js b/pocketbase/pb_migrations/1728307154_updated_biomes.js
new file mode 100644
index 0000000..9ab2b75
--- /dev/null
+++ b/pocketbase/pb_migrations/1728307154_updated_biomes.js
@@ -0,0 +1,396 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((db) => {
+  const dao = new Dao(db)
+  const collection = dao.findCollectionByNameOrId("3r3zyqiq5orbj1v")
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "7fgdlhvp",
+    "name": "cold_desert",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "nw7o9edk",
+    "name": "glacier",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "gz17qush",
+    "name": "grassland",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "afb860j9",
+    "name": "hot_desert",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "um6wh4qy",
+    "name": "savanna",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "rataw3r6",
+    "name": "taiga",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "edfk4bzi",
+    "name": "temperate_deciduous_forest",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "yxpdr5yx",
+    "name": "temperate_rainforest",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "p31ti2fe",
+    "name": "tropical_rainforest",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "m3jmcjsb",
+    "name": "tropical_seasonal_forest",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "edpxuqe3",
+    "name": "tundra",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "fakphe3p",
+    "name": "wetland",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  return dao.saveCollection(collection)
+}, (db) => {
+  const dao = new Dao(db)
+  const collection = dao.findCollectionByNameOrId("3r3zyqiq5orbj1v")
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "7fgdlhvp",
+    "name": "Cold_desert",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "nw7o9edk",
+    "name": "Glacier",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "gz17qush",
+    "name": "Grassland",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "afb860j9",
+    "name": "Hot_desert",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "um6wh4qy",
+    "name": "Savanna",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "rataw3r6",
+    "name": "Taiga",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "edfk4bzi",
+    "name": "Temperate_deciduous_forest",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "yxpdr5yx",
+    "name": "Temperate_rainforest",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "p31ti2fe",
+    "name": "Tropical_rainforest",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "m3jmcjsb",
+    "name": "Tropical_seasonal_forest",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "edpxuqe3",
+    "name": "Tundra",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "fakphe3p",
+    "name": "Wetland",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  return dao.saveCollection(collection)
+})
diff --git a/pocketbase/pb_migrations/1728307230_updated_biomes.js b/pocketbase/pb_migrations/1728307230_updated_biomes.js
new file mode 100644
index 0000000..a715c13
--- /dev/null
+++ b/pocketbase/pb_migrations/1728307230_updated_biomes.js
@@ -0,0 +1,204 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((db) => {
+  const dao = new Dao(db)
+  const collection = dao.findCollectionByNameOrId("3r3zyqiq5orbj1v")
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "7fgdlhvp",
+    "name": "coldDesert",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "afb860j9",
+    "name": "hotDesert",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "edfk4bzi",
+    "name": "temperateDeciduousForest",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "yxpdr5yx",
+    "name": "temperateRainforest",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "p31ti2fe",
+    "name": "tropicalRainforest",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "m3jmcjsb",
+    "name": "tropicalSeasonalForest",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  return dao.saveCollection(collection)
+}, (db) => {
+  const dao = new Dao(db)
+  const collection = dao.findCollectionByNameOrId("3r3zyqiq5orbj1v")
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "7fgdlhvp",
+    "name": "cold_desert",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "afb860j9",
+    "name": "hot_desert",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "edfk4bzi",
+    "name": "temperate_deciduous_forest",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "yxpdr5yx",
+    "name": "temperate_rainforest",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "p31ti2fe",
+    "name": "tropical_rainforest",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  // update
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "m3jmcjsb",
+    "name": "tropical_seasonal_forest",
+    "type": "number",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "min": null,
+      "max": null,
+      "noDecimal": false
+    }
+  }))
+
+  return dao.saveCollection(collection)
+})
diff --git a/pocketbase/pb_migrations/1728310072_created_religions.js b/pocketbase/pb_migrations/1728310072_created_religions.js
new file mode 100644
index 0000000..bf9bbf1
--- /dev/null
+++ b/pocketbase/pb_migrations/1728310072_created_religions.js
@@ -0,0 +1,115 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((db) => {
+  const collection = new Collection({
+    "id": "rus1n6cf88bfapj",
+    "created": "2024-10-07 14:07:52.030Z",
+    "updated": "2024-10-07 14:07:52.030Z",
+    "name": "religions",
+    "type": "base",
+    "system": false,
+    "schema": [
+      {
+        "system": false,
+        "id": "shmhjv0l",
+        "name": "name",
+        "type": "text",
+        "required": true,
+        "presentable": false,
+        "unique": false,
+        "options": {
+          "min": null,
+          "max": null,
+          "pattern": ""
+        }
+      },
+      {
+        "system": false,
+        "id": "xzxhf2eg",
+        "name": "color",
+        "type": "text",
+        "required": true,
+        "presentable": false,
+        "unique": false,
+        "options": {
+          "min": null,
+          "max": null,
+          "pattern": ""
+        }
+      },
+      {
+        "system": false,
+        "id": "qniosem8",
+        "name": "type",
+        "type": "select",
+        "required": false,
+        "presentable": false,
+        "unique": false,
+        "options": {
+          "maxSelect": 1,
+          "values": [
+            "Folk",
+            "Organized",
+            "Cult",
+            "Heresy"
+          ]
+        }
+      },
+      {
+        "system": false,
+        "id": "pihby99x",
+        "name": "form",
+        "type": "text",
+        "required": true,
+        "presentable": false,
+        "unique": false,
+        "options": {
+          "min": null,
+          "max": null,
+          "pattern": ""
+        }
+      },
+      {
+        "system": false,
+        "id": "ucpg4hbi",
+        "name": "supremeDeity",
+        "type": "text",
+        "required": true,
+        "presentable": false,
+        "unique": false,
+        "options": {
+          "min": null,
+          "max": null,
+          "pattern": ""
+        }
+      },
+      {
+        "system": false,
+        "id": "sasrelz3",
+        "name": "population",
+        "type": "number",
+        "required": true,
+        "presentable": false,
+        "unique": false,
+        "options": {
+          "min": null,
+          "max": null,
+          "noDecimal": false
+        }
+      }
+    ],
+    "indexes": [],
+    "listRule": null,
+    "viewRule": null,
+    "createRule": null,
+    "updateRule": null,
+    "deleteRule": null,
+    "options": {}
+  });
+
+  return Dao(db).saveCollection(collection);
+}, (db) => {
+  const dao = new Dao(db);
+  const collection = dao.findCollectionByNameOrId("rus1n6cf88bfapj");
+
+  return dao.deleteCollection(collection);
+})
diff --git a/pocketbase/pb_migrations/1728388642_created_maps.js b/pocketbase/pb_migrations/1728388642_created_maps.js
new file mode 100644
index 0000000..7062e1e
--- /dev/null
+++ b/pocketbase/pb_migrations/1728388642_created_maps.js
@@ -0,0 +1,43 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((db) => {
+  const collection = new Collection({
+    "id": "css8hkmjhm8dg6v",
+    "created": "2024-10-08 11:57:22.351Z",
+    "updated": "2024-10-08 11:57:22.351Z",
+    "name": "maps",
+    "type": "base",
+    "system": false,
+    "schema": [
+      {
+        "system": false,
+        "id": "c0aejakz",
+        "name": "map",
+        "type": "file",
+        "required": false,
+        "presentable": false,
+        "unique": false,
+        "options": {
+          "mimeTypes": [],
+          "thumbs": [],
+          "maxSelect": 1,
+          "maxSize": 999999999,
+          "protected": false
+        }
+      }
+    ],
+    "indexes": [],
+    "listRule": null,
+    "viewRule": null,
+    "createRule": null,
+    "updateRule": null,
+    "deleteRule": null,
+    "options": {}
+  });
+
+  return Dao(db).saveCollection(collection);
+}, (db) => {
+  const dao = new Dao(db);
+  const collection = dao.findCollectionByNameOrId("css8hkmjhm8dg6v");
+
+  return dao.deleteCollection(collection);
+})
diff --git a/pocketbase/pb_migrations/1728390521_updated_maps.js b/pocketbase/pb_migrations/1728390521_updated_maps.js
new file mode 100644
index 0000000..0285d7b
--- /dev/null
+++ b/pocketbase/pb_migrations/1728390521_updated_maps.js
@@ -0,0 +1,18 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((db) => {
+  const dao = new Dao(db)
+  const collection = dao.findCollectionByNameOrId("css8hkmjhm8dg6v")
+
+  collection.listRule = ""
+  collection.viewRule = ""
+
+  return dao.saveCollection(collection)
+}, (db) => {
+  const dao = new Dao(db)
+  const collection = dao.findCollectionByNameOrId("css8hkmjhm8dg6v")
+
+  collection.listRule = null
+  collection.viewRule = null
+
+  return dao.saveCollection(collection)
+})
diff --git a/pocketbase/pb_migrations/1728396643_updated_users.js b/pocketbase/pb_migrations/1728396643_updated_users.js
new file mode 100644
index 0000000..40ef4e0
--- /dev/null
+++ b/pocketbase/pb_migrations/1728396643_updated_users.js
@@ -0,0 +1,34 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((db) => {
+  const dao = new Dao(db)
+  const collection = dao.findCollectionByNameOrId("_pb_users_auth_")
+
+  // add
+  collection.schema.addField(new SchemaField({
+    "system": false,
+    "id": "w01bwswx",
+    "name": "role",
+    "type": "select",
+    "required": true,
+    "presentable": false,
+    "unique": false,
+    "options": {
+      "maxSelect": 1,
+      "values": [
+        "user",
+        "moderator",
+        "admin"
+      ]
+    }
+  }))
+
+  return dao.saveCollection(collection)
+}, (db) => {
+  const dao = new Dao(db)
+  const collection = dao.findCollectionByNameOrId("_pb_users_auth_")
+
+  // remove
+  collection.schema.removeField("w01bwswx")
+
+  return dao.saveCollection(collection)
+})
diff --git a/pocketbase/pocketbase.drawio b/pocketbase/pocketbase.drawio
new file mode 100644
index 0000000..09c9379
--- /dev/null
+++ b/pocketbase/pocketbase.drawio
@@ -0,0 +1,466 @@
+<mxfile host="65bd71144e">
+    <diagram id="A8LKNuee4XFFu6ZtnUE9" name="Page-1">
+        <mxGraphModel dx="1631" dy="686" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="2000" pageHeight="2000" math="0" shadow="0">
+            <root>
+                <mxCell id="0"/>
+                <mxCell id="1" parent="0"/>
+                <mxCell id="115" value="turns" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#a0522d;fontColor=#ffffff;strokeColor=#6D1F00;" parent="1" vertex="1">
+                    <mxGeometry x="910" y="80" width="140" height="180" as="geometry"/>
+                </mxCell>
+                <mxCell id="116" value="id&lt;br&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="115" vertex="1">
+                    <mxGeometry y="30" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="117" value="created" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="115" vertex="1">
+                    <mxGeometry y="60" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="118" value="updated" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="115" vertex="1">
+                    <mxGeometry y="90" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="119" value="turnNumber: Number" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="115" vertex="1">
+                    <mxGeometry y="120" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="120" value="map : File" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="115" vertex="1">
+                    <mxGeometry y="150" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="123" value="burgs" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#a20025;fontColor=#ffffff;strokeColor=#6F0000;" parent="1" vertex="1">
+                    <mxGeometry x="1770" y="340" width="150" height="570" as="geometry">
+                        <mxRectangle x="1840" y="1290" width="70" height="30" as="alternateBounds"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="124" value="id&lt;br&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="123" vertex="1">
+                    <mxGeometry y="30" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="125" value="created" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="123" vertex="1">
+                    <mxGeometry y="60" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="126" value="updated" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="123" vertex="1">
+                    <mxGeometry y="90" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="127" value="name : Text" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="123" vertex="1">
+                    <mxGeometry y="120" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="128" value="province : Relation" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="123" vertex="1">
+                    <mxGeometry y="150" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="129" value="state : Relation" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="123" vertex="1">
+                    <mxGeometry y="180" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="130" value="culture : Relation" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="123" vertex="1">
+                    <mxGeometry y="210" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="131" value="religion : Religion" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="123" vertex="1">
+                    <mxGeometry y="240" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="132" value="population : Number" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="123" vertex="1">
+                    <mxGeometry y="270" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="133" value="isCapital : Boolean" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="123" vertex="1">
+                    <mxGeometry y="300" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="134" value="isPort : Boolean" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="123" vertex="1">
+                    <mxGeometry y="330" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="135" value="isCitadel : Boolean" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="123" vertex="1">
+                    <mxGeometry y="360" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="136" value="isWalls : Boolean" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="123" vertex="1">
+                    <mxGeometry y="390" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="137" value="isPlaza ; Boolean" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="123" vertex="1">
+                    <mxGeometry y="420" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="138" value="isTemple : Boolean" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="123" vertex="1">
+                    <mxGeometry y="450" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="139" value="isShantyTown : Boolean" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="123" vertex="1">
+                    <mxGeometry y="480" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="140" value="emblem : JSON" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="123" vertex="1">
+                    <mxGeometry y="510" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="141" value="cityGeneratorLink : Link" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="123" vertex="1">
+                    <mxGeometry y="540" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="143" value="provinces" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#6a00ff;fontColor=#ffffff;strokeColor=#3700CC;" parent="1" vertex="1">
+                    <mxGeometry x="1510" y="180" width="210" height="450" as="geometry">
+                        <mxRectangle x="1580" y="1130" width="90" height="30" as="alternateBounds"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="144" value="id&lt;br&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="143" vertex="1">
+                    <mxGeometry y="30" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="145" value="created" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="143" vertex="1">
+                    <mxGeometry y="60" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="146" value="updated" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="143" vertex="1">
+                    <mxGeometry y="90" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="147" value="name : Text" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="143" vertex="1">
+                    <mxGeometry y="120" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="148" value="fullName : Text" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="143" vertex="1">
+                    <mxGeometry y="150" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="149" value="form : Select" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="143" vertex="1">
+                    <mxGeometry y="180" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="150" value="state : Relation" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="143" vertex="1">
+                    <mxGeometry y="210" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="151" value="color : Text" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="143" vertex="1">
+                    <mxGeometry y="240" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="163" value="capital : Relation" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="143" vertex="1">
+                    <mxGeometry y="270" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="156" value="burgs : Number" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="143" vertex="1">
+                    <mxGeometry y="300" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="158" value="ruralPopulation : Number" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="143" vertex="1">
+                    <mxGeometry y="330" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="159" value="urbanPopulation : Number" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="143" vertex="1">
+                    <mxGeometry y="360" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="160" value="occupiedUrbanPopulation : Number" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="143" vertex="1">
+                    <mxGeometry y="390" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="161" value="occupiedRuralPopulation : Number" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="143" vertex="1">
+                    <mxGeometry y="420" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="164" value="states" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#60a917;fontColor=#ffffff;strokeColor=#2D7600;" parent="1" vertex="1">
+                    <mxGeometry x="1260" y="80" width="210" height="570" as="geometry">
+                        <mxRectangle x="1330" y="1060" width="70" height="30" as="alternateBounds"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="165" value="id&lt;br&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="164" vertex="1">
+                    <mxGeometry y="30" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="166" value="created" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="164" vertex="1">
+                    <mxGeometry y="60" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="167" value="updated" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="164" vertex="1">
+                    <mxGeometry y="90" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="217" value="user : Relation" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="164" vertex="1">
+                    <mxGeometry y="120" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="168" value="name : Text" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="164" vertex="1">
+                    <mxGeometry y="150" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="169" value="nameFull : Text" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="164" vertex="1">
+                    <mxGeometry y="180" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="170" value="form : Select" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="164" vertex="1">
+                    <mxGeometry y="210" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="171" value="color : Text" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="164" vertex="1">
+                    <mxGeometry y="240" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="182" value="capital : Relation" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="164" vertex="1">
+                    <mxGeometry y="270" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="172" value="culture : Relation" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="164" vertex="1">
+                    <mxGeometry y="300" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="183" value="religion : Relation" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="164" vertex="1">
+                    <mxGeometry y="330" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="173" value="cells : Number" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="164" vertex="1">
+                    <mxGeometry y="360" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="251" value="bioms: JSON" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" vertex="1" parent="164">
+                    <mxGeometry y="390" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="174" value="burgs : Number" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="164" vertex="1">
+                    <mxGeometry y="420" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="179" value="urbanPopulation : Number" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="164" vertex="1">
+                    <mxGeometry y="450" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="178" value="ruralPopulation : Number" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="164" vertex="1">
+                    <mxGeometry y="480" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="181" value="occupiedRuralPopulation : Number" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="164" vertex="1">
+                    <mxGeometry y="510" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="180" value="occupiedUrbanPopulation : Number" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="164" vertex="1">
+                    <mxGeometry y="540" width="210" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="185" value="cultures" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#e3c800;fontColor=#000000;strokeColor=#B09500;" parent="1" vertex="1">
+                    <mxGeometry x="1450" y="670" width="140" height="300" as="geometry">
+                        <mxRectangle x="1530" y="1620" width="80" height="30" as="alternateBounds"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="186" value="id&lt;br&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="185" vertex="1">
+                    <mxGeometry y="30" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="187" value="created" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="185" vertex="1">
+                    <mxGeometry y="60" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="188" value="updated" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="185" vertex="1">
+                    <mxGeometry y="90" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="189" value="name : Text" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="185" vertex="1">
+                    <mxGeometry y="120" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="190" value="color : Text" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="185" vertex="1">
+                    <mxGeometry y="150" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="191" value="cells : Numbers" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="185" vertex="1">
+                    <mxGeometry y="180" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="192" value="type : Select" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="185" vertex="1">
+                    <mxGeometry y="210" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="193" value="population : Number" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="185" vertex="1">
+                    <mxGeometry y="240" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="194" value="namebase : Select" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="185" vertex="1">
+                    <mxGeometry y="270" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="195" value="religions" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#6d8764;fontColor=#ffffff;strokeColor=#3A5431;" parent="1" vertex="1">
+                    <mxGeometry x="1620" y="670" width="120" height="330" as="geometry">
+                        <mxRectangle x="1700" y="1620" width="90" height="30" as="alternateBounds"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="196" value="id&lt;br&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="195" vertex="1">
+                    <mxGeometry y="30" width="120" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="197" value="created" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="195" vertex="1">
+                    <mxGeometry y="60" width="120" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="198" value="updated" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="195" vertex="1">
+                    <mxGeometry y="90" width="120" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="199" value="name : Text" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="195" vertex="1">
+                    <mxGeometry y="120" width="120" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="200" value="color : Text" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="195" vertex="1">
+                    <mxGeometry y="150" width="120" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="205" value="cells : Number" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="195" vertex="1">
+                    <mxGeometry y="180" width="120" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="201" value="type : Select" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="195" vertex="1">
+                    <mxGeometry y="210" width="120" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="202" value="form : Text" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="195" vertex="1">
+                    <mxGeometry y="240" width="120" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="203" value="supremeDeity : Text" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="195" vertex="1">
+                    <mxGeometry y="270" width="120" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="204" value="population : Number" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="195" vertex="1">
+                    <mxGeometry y="300" width="120" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="206" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;strokeColor=#2D7600;shadow=0;fillColor=#60a917;entryX=-0.008;entryY=0.576;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" source="183" target="196" edge="1">
+                    <mxGeometry relative="1" as="geometry">
+                        <mxPoint x="1260" y="750" as="targetPoint"/>
+                        <Array as="points">
+                            <mxPoint x="1240" y="425"/>
+                            <mxPoint x="1240" y="660"/>
+                            <mxPoint x="1610" y="660"/>
+                            <mxPoint x="1610" y="717"/>
+                        </Array>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="208" style="edgeStyle=orthogonalEdgeStyle;sketch=0;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;shadow=0;strokeColor=#2D7600;fillColor=#60a917;" parent="1" source="172" target="186" edge="1">
+                    <mxGeometry relative="1" as="geometry">
+                        <Array as="points">
+                            <mxPoint x="1250" y="395"/>
+                            <mxPoint x="1250" y="670"/>
+                            <mxPoint x="1440" y="670"/>
+                            <mxPoint x="1440" y="715"/>
+                        </Array>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="209" style="edgeStyle=orthogonalEdgeStyle;sketch=0;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;shadow=0;strokeColor=#3700CC;fillColor=#6a00ff;" parent="1" source="150" target="165" edge="1">
+                    <mxGeometry relative="1" as="geometry">
+                        <Array as="points">
+                            <mxPoint x="1500" y="405"/>
+                            <mxPoint x="1500" y="120"/>
+                            <mxPoint x="1470" y="120"/>
+                        </Array>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="210" style="edgeStyle=orthogonalEdgeStyle;sketch=0;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;shadow=0;strokeColor=#2D7600;endArrow=classic;endFill=1;dashed=1;fillColor=#60a917;" parent="1" source="182" target="124" edge="1">
+                    <mxGeometry relative="1" as="geometry">
+                        <Array as="points">
+                            <mxPoint x="1480" y="365"/>
+                            <mxPoint x="1480" y="650"/>
+                            <mxPoint x="1740" y="650"/>
+                            <mxPoint x="1740" y="390"/>
+                            <mxPoint x="1770" y="390"/>
+                        </Array>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="211" style="edgeStyle=elbowEdgeStyle;sketch=0;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;shadow=0;strokeColor=#3700CC;dashed=1;fillColor=#6a00ff;" parent="1" source="163" target="124" edge="1">
+                    <mxGeometry relative="1" as="geometry">
+                        <Array as="points">
+                            <mxPoint x="1730" y="370"/>
+                            <mxPoint x="1730" y="410"/>
+                            <mxPoint x="1730" y="410"/>
+                        </Array>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="212" style="edgeStyle=orthogonalEdgeStyle;sketch=0;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;shadow=0;strokeColor=#6F0000;endArrow=classic;endFill=1;fillColor=#a20025;" parent="1" source="128" target="144" edge="1">
+                    <mxGeometry relative="1" as="geometry">
+                        <Array as="points">
+                            <mxPoint x="1750" y="505"/>
+                            <mxPoint x="1750" y="225"/>
+                        </Array>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="213" style="edgeStyle=orthogonalEdgeStyle;sketch=0;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;shadow=0;strokeColor=#6F0000;endArrow=classic;endFill=1;fillColor=#a20025;" parent="1" source="129" target="165" edge="1">
+                    <mxGeometry relative="1" as="geometry">
+                        <Array as="points">
+                            <mxPoint x="1730" y="535"/>
+                            <mxPoint x="1730" y="640"/>
+                            <mxPoint x="1490" y="640"/>
+                            <mxPoint x="1490" y="125"/>
+                        </Array>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="214" style="edgeStyle=orthogonalEdgeStyle;sketch=0;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;shadow=0;strokeColor=#6F0000;endArrow=classic;endFill=1;fillColor=#a20025;" parent="1" source="130" target="186" edge="1">
+                    <mxGeometry relative="1" as="geometry">
+                        <Array as="points">
+                            <mxPoint x="1750" y="565"/>
+                            <mxPoint x="1750" y="660"/>
+                            <mxPoint x="1600" y="660"/>
+                            <mxPoint x="1600" y="715"/>
+                        </Array>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="216" style="edgeStyle=orthogonalEdgeStyle;sketch=0;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;shadow=0;strokeColor=#6F0000;endArrow=classic;endFill=1;fillColor=#a20025;" parent="1" source="131" target="196" edge="1">
+                    <mxGeometry relative="1" as="geometry">
+                        <Array as="points">
+                            <mxPoint x="1760" y="595"/>
+                            <mxPoint x="1760" y="715"/>
+                        </Array>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="218" value="users" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#d80073;fontColor=#ffffff;strokeColor=#A50040;" parent="1" vertex="1">
+                    <mxGeometry x="1140" y="350" width="90" height="300" as="geometry">
+                        <mxRectangle x="1210" y="1300" width="60" height="30" as="alternateBounds"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="219" value="id" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="218" vertex="1">
+                    <mxGeometry y="30" width="90" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="220" value="created" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="218" vertex="1">
+                    <mxGeometry y="60" width="90" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="221" value="updated" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="218" vertex="1">
+                    <mxGeometry y="90" width="90" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="222" value="username" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="218" vertex="1">
+                    <mxGeometry y="120" width="90" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="223" value="email" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="218" vertex="1">
+                    <mxGeometry y="150" width="90" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="224" value="emailVisibility" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="218" vertex="1">
+                    <mxGeometry y="180" width="90" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="225" value="verified" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="218" vertex="1">
+                    <mxGeometry y="210" width="90" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="226" value="avatar" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="218" vertex="1">
+                    <mxGeometry y="240" width="90" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="227" value="role : Select" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="218" vertex="1">
+                    <mxGeometry y="270" width="90" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="228" style="edgeStyle=orthogonalEdgeStyle;sketch=0;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;shadow=0;strokeColor=#2D7600;endArrow=classic;endFill=1;fillColor=#60a917;" parent="1" source="217" target="219" edge="1">
+                    <mxGeometry relative="1" as="geometry">
+                        <Array as="points">
+                            <mxPoint x="1250" y="215"/>
+                            <mxPoint x="1250" y="395"/>
+                        </Array>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="229" value="reports" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#1ba1e2;fontColor=#ffffff;strokeColor=#006EAF;" parent="1" vertex="1">
+                    <mxGeometry x="1080" y="80" width="150" height="240" as="geometry"/>
+                </mxCell>
+                <mxCell id="230" value="id&lt;br&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="229" vertex="1">
+                    <mxGeometry y="30" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="231" value="created" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="229" vertex="1">
+                    <mxGeometry y="60" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="232" value="updated" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="229" vertex="1">
+                    <mxGeometry y="90" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="233" value="turn : Relation" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="229" vertex="1">
+                    <mxGeometry y="120" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="235" value="state : Relation" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="229" vertex="1">
+                    <mxGeometry y="150" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="243" value="reportActions : Relation" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" vertex="1" parent="229">
+                    <mxGeometry y="180" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="248" value="reportOutput : Relation" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" vertex="1" parent="229">
+                    <mxGeometry y="210" width="150" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="236" style="edgeStyle=orthogonalEdgeStyle;sketch=0;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;shadow=0;strokeColor=#006EAF;endArrow=classic;endFill=1;fillColor=#1ba1e2;" parent="1" source="235" target="165" edge="1">
+                    <mxGeometry relative="1" as="geometry">
+                        <Array as="points">
+                            <mxPoint x="1240" y="245"/>
+                            <mxPoint x="1240" y="125"/>
+                        </Array>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="237" value="reportActions" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#76608a;fontColor=#ffffff;strokeColor=#432D57;" parent="1" vertex="1">
+                    <mxGeometry x="740" y="290" width="140" height="120" as="geometry"/>
+                </mxCell>
+                <mxCell id="238" value="id&lt;br&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="237" vertex="1">
+                    <mxGeometry y="30" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="239" value="created" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="237" vertex="1">
+                    <mxGeometry y="60" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="240" value="updated" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="237" vertex="1">
+                    <mxGeometry y="90" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="242" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;fillColor=#1ba1e2;strokeColor=#006EAF;" edge="1" parent="1" source="233" target="116">
+                    <mxGeometry relative="1" as="geometry">
+                        <Array as="points">
+                            <mxPoint x="1070" y="215"/>
+                            <mxPoint x="1070" y="125"/>
+                        </Array>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="244" value="reportOutput" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#647687;fontColor=#ffffff;strokeColor=#314354;" vertex="1" parent="1">
+                    <mxGeometry x="910" y="290" width="140" height="120" as="geometry"/>
+                </mxCell>
+                <mxCell id="245" value="id&lt;br&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" vertex="1" parent="244">
+                    <mxGeometry y="30" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="246" value="created" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" vertex="1" parent="244">
+                    <mxGeometry y="60" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="247" value="updated" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" vertex="1" parent="244">
+                    <mxGeometry y="90" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="249" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;fillColor=#1ba1e2;strokeColor=#006EAF;" edge="1" parent="1" source="248" target="245">
+                    <mxGeometry relative="1" as="geometry">
+                        <Array as="points">
+                            <mxPoint x="1070" y="305"/>
+                            <mxPoint x="1070" y="335"/>
+                        </Array>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="250" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;fillColor=#1ba1e2;strokeColor=#006EAF;" edge="1" parent="1" source="243" target="238">
+                    <mxGeometry relative="1" as="geometry">
+                        <Array as="points">
+                            <mxPoint x="900" y="275"/>
+                            <mxPoint x="900" y="335"/>
+                        </Array>
+                    </mxGeometry>
+                </mxCell>
+            </root>
+        </mxGraphModel>
+    </diagram>
+</mxfile>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 26f09fa..e0f9a01 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,4 +1,6 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+</script>
 
 <template>
   <header>
@@ -6,7 +8,18 @@
   </header>
 
   <main>
-    <RouterView />
+    <Suspense>
+      <template #default>
+        <RouterView />
+      </template>
+
+      <template #fallback>
+        <div class="flex items-center justify-center h-screen">
+          <Icon icon="svg-spinners:blocks-wave" class="h-1/2 w-1/2" />
+        </div>
+      </template>
+    </Suspense>
+
     <Toaster />
   </main>
 </template>
diff --git a/src/components/NavigationBar.vue b/src/components/NavigationBar.vue
index c2f04ae..3e85ed1 100644
--- a/src/components/NavigationBar.vue
+++ b/src/components/NavigationBar.vue
@@ -11,12 +11,9 @@ onMounted(() => {
 })
 
 const { currentUser } = storeToRefs(listenCurrentUser())
-
-watch(currentUser, (user) => {
-  console.log('watch currentUser', user)
-})
-
 const mode = useColorMode()
+
+console.table(currentUser.value)
 </script>
 
 <template>
@@ -24,32 +21,62 @@ const mode = useColorMode()
     <NavigationMenu>
       <NavigationMenuList>
         <NavigationMenuItem>
-          <NavigationMenuLink href="/" :class="navigationMenuTriggerStyle()">
-            Strona główna
+          <NavigationMenuLink
+            href="/"
+            :class="navigationMenuTriggerStyle()"
+            class="flex items-center gap-1"
+          >
+            <Icon icon="line-md:home" class="h-4 w-4" />
+
+            <span>Strona główna</span>
           </NavigationMenuLink>
         </NavigationMenuItem>
 
         <NavigationMenuItem>
-          <NavigationMenuLink href="/sandbox" :class="navigationMenuTriggerStyle()">
-            Sandbox
+          <NavigationMenuLink
+            href="/sandbox"
+            :class="navigationMenuTriggerStyle()"
+            class="flex items-center gap-1"
+          >
+            <Icon icon="file-icons:sandbox" class="h-4 w-4" />
+
+            <span>Sandbox</span>
           </NavigationMenuLink>
         </NavigationMenuItem>
 
         <NavigationMenuItem>
-          <NavigationMenuLink href="/raport" :class="navigationMenuTriggerStyle()">
-            Raport
+          <NavigationMenuLink
+            href="/raport"
+            :class="navigationMenuTriggerStyle()"
+            class="flex items-center gap-1"
+          >
+            <Icon icon="oui:app-reporting" class="h-4 w-4" />
+
+            <span>Raport</span>
           </NavigationMenuLink>
         </NavigationMenuItem>
 
         <NavigationMenuItem>
-          <NavigationMenuLink href="/charts-and-stats" :class="navigationMenuTriggerStyle()">
-            Wykresy i statystyki
+          <NavigationMenuLink
+            href="/charts-and-stats"
+            :class="navigationMenuTriggerStyle()"
+            class="flex items-center gap-1"
+          >
+            <Icon icon="majesticons:presentation-chart" class="h-4 w-4" />
+
+            <span>Wykresy i statystyki</span>
           </NavigationMenuLink>
         </NavigationMenuItem>
 
         <NavigationMenuItem>
-          <NavigationMenuLink href="/map" :class="navigationMenuTriggerStyle()">
-            Mapy
+          <NavigationMenuLink
+            href="/map"
+            :class="navigationMenuTriggerStyle()"
+            class="flex items-center gap-1"
+          >
+            <Icon icon="game-icons:treasure-map" class="h-4 w-4" />
+
+            <span>Mapy</span>
           </NavigationMenuLink>
         </NavigationMenuItem>
       </NavigationMenuList>
@@ -57,24 +84,14 @@ const mode = useColorMode()
 
     <NavigationMenu>
       <NavigationMenuList>
-        <!-- <NavigationMenuItem>
-          <NavigationMenuLink
-            v-if="currentUser"
-            href="/"
-            :class="navigationMenuTriggerStyle()"
-            @select="pb.authStore.clear()"
-          >
-            {{ currentUser.username }}
-          </NavigationMenuLink>
-          <NavigationMenuLink v-else href="/login" :class="navigationMenuTriggerStyle()">
-            Zaloguj się
-          </NavigationMenuLink>
-        </NavigationMenuItem> -->
-
         <NavigationMenuItem v-if="currentUser">
           <DropdownMenu>
             <DropdownMenuTrigger as-child>
-              <Button variant="ghost"> Konto </Button>
+              <Button variant="ghost" class="flex items-center gap-1">
+                <Icon icon="line-md:account" class="h-4 w-4" />
+
+                <span>{{ currentUser.username }}</span>
+              </Button>
             </DropdownMenuTrigger>
 
             <DropdownMenuContent align="end">
@@ -86,12 +103,25 @@ const mode = useColorMode()
                 </div>
               </DropdownMenuLabel>
 
-              <DropdownMenuSeparator />
+              <DropdownMenuSeparator v-if="['moderator', 'admin'].includes(currentUser.role)" />
+
+              <DropdownMenuGroup v-if="['moderator', 'admin'].includes(currentUser.role)">
+                <DropdownMenuItem v-if="currentUser.role === 'admin'">
+                  <NavigationMenuLink href="/pb/_/" class="w-full h-full flex items-center gap-1">
+                    <Icon icon="logos:pocket-base" class="h-4 w-4" />
+
+                    <span>PocketBase</span>
+                  </NavigationMenuLink>
+                </DropdownMenuItem>
 
-              <DropdownMenuGroup>
                 <DropdownMenuItem>
-                  <NavigationMenuLink href="/profile" class="w-full h-full">
-                    Profil
+                  <NavigationMenuLink
+                    href="/admin-panel"
+                    class="w-full h-full flex items-center gap-1"
+                  >
+                    <Icon icon="eos-icons:admin-outlined" class="h-4 w-4" />
+
+                    <span>Admin Panel</span>
                   </NavigationMenuLink>
                 </DropdownMenuItem>
               </DropdownMenuGroup>
@@ -99,8 +129,24 @@ const mode = useColorMode()
               <DropdownMenuSeparator />
 
               <DropdownMenuItem>
-                <NavigationMenuLink href="/" @select="pb.authStore.clear()" class="w-full h-full">
-                  Wyloguj się
+                <NavigationMenuLink href="/profile" class="w-full h-full flex items-center gap-1">
+                  <Icon icon="streamline:user-profile-focus" class="h-4 w-4" />
+
+                  <span>Profil</span>
+                </NavigationMenuLink>
+              </DropdownMenuItem>
+
+              <DropdownMenuSeparator />
+
+              <DropdownMenuItem>
+                <NavigationMenuLink
+                  href="/"
+                  @select="pb.authStore.clear()"
+                  class="w-full h-full flex items-center gap-1"
+                >
+                  <Icon icon="material-symbols:logout" class="h-4 w-4" />
+
+                  <span>Wyloguj się</span>
                 </NavigationMenuLink>
               </DropdownMenuItem>
             </DropdownMenuContent>
@@ -110,7 +156,11 @@ const mode = useColorMode()
         <NavigationMenuItem v-else>
           <DropdownMenu>
             <DropdownMenuTrigger as-child>
-              <Button variant="ghost"> Użytkownik </Button>
+              <Button variant="ghost" class="flex items-center gap-1">
+                <Icon icon="line-md:account" class="h-4 w-4" />
+
+                <span>Konto</span>
+              </Button>
             </DropdownMenuTrigger>
 
             <DropdownMenuContent align="end">
diff --git a/src/pages/index.vue b/src/pages/index.vue
index d53f8c8..b11d770 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue'
 const pb = usePocketBase()
 </script>
 
 <template>
-  <div class="mt-6"></div>
+  <div class="mt-6 flex flex-col items-center justify-center h-screen"></div>
 </template>
diff --git a/src/pages/map.vue b/src/pages/map.vue
new file mode 100644
index 0000000..3077fdc
--- /dev/null
+++ b/src/pages/map.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+const pb = usePocketBase()
+const fps = useFps()
+
+const map = await pb.collection('maps').getOne('3dcnacg5httj51c')
+const maps = await pb.collection('maps').getFullList()
+console.table(maps)
+const map1 = maps[1]
+console.table(map1)
+const url = ref(`http://localhost:5173/pb/api/files/${map1.collectionId}/${map1.id}/${map1.map}`)
+const url2 = ref(`http://localhost:5173/pb/api/files/${map.collectionId}/${map.id}/${map.map}`)
+</script>
+
+<template>
+  <div class="mt-6 flex flex-col items-center justify-center h-screen">
+    <p class="text-2xl absolute left-0 top-14 m-2">FPS: {{ fps }}</p>
+
+    <a :href="url" target="_blank">{{ url }}</a>
+
+    <iframe
+      title="mapa"
+      :src="`https://azgaar.github.io/Fantasy-Map-Generator/?maplink=${url}`"
+      width="95%"
+      height="95%"
+    ></iframe>
+  </div>
+</template>
diff --git a/src/stores/listenCurrentUser.ts b/src/stores/listenCurrentUser.ts
index 5373aac..14e2ab9 100644
--- a/src/stores/listenCurrentUser.ts
+++ b/src/stores/listenCurrentUser.ts
@@ -6,18 +6,15 @@ export const listenCurrentUser = defineStore('listenCurrentUser', () => {
   const currentUser = ref<AuthModel | null>(null)
 
   function setCurrentUser(user: AuthModel | null) {
-    console.log('setCurrentUser', user)
     currentUser.value = user
   }
 
   function initCurrentUser() {
-    console.log('initCurrentUser', pb.authStore.model)
     setCurrentUser(pb.authStore.model)
   }
 
   function listenCurrentUserChange() {
     pb.authStore.onChange((user) => {
-      console.log('listenCurrentUserChange', user)
       setCurrentUser(pb.authStore.model)
     })
   }
diff --git a/src/types/pb-types.ts b/src/types/pb-types.ts
index a24c8fb..db79f9e 100644
--- a/src/types/pb-types.ts
+++ b/src/types/pb-types.ts
@@ -6,6 +6,9 @@ import type PocketBase from 'pocketbase'
 import type { RecordService } from 'pocketbase'
 
 export enum Collections {
+	Biomes = "biomes",
+	Maps = "maps",
+	Religions = "religions",
 	Users = "users",
 }
 
@@ -33,20 +36,70 @@ export type AuthSystemFields<T = never> = {
 
 // Record types for each collection
 
+export type BiomesRecord = {
+	coldDesert: number
+	glacier: number
+	grassland: number
+	hotDesert: number
+	savanna: number
+	taiga: number
+	temperateDeciduousForest: number
+	temperateRainforest: number
+	tropicalRainforest: number
+	tropicalSeasonalForest: number
+	tundra: number
+	turn: number
+	wetland: number
+}
+
+export type MapsRecord = {
+	map?: string
+}
+
+export enum ReligionsTypeOptions {
+	"Folk" = "Folk",
+	"Organized" = "Organized",
+	"Cult" = "Cult",
+	"Heresy" = "Heresy",
+}
+export type ReligionsRecord = {
+	color: string
+	form: string
+	name: string
+	population: number
+	supremeDeity: string
+	type?: ReligionsTypeOptions
+}
+
+export enum UsersRoleOptions {
+	"user" = "user",
+	"moderator" = "moderator",
+	"admin" = "admin",
+}
 export type UsersRecord = {
 	avatar?: string
+	role: UsersRoleOptions
 }
 
 // Response types include system fields and match responses from the PocketBase API
+export type BiomesResponse<Texpand = unknown> = Required<BiomesRecord> & BaseSystemFields<Texpand>
+export type MapsResponse<Texpand = unknown> = Required<MapsRecord> & BaseSystemFields<Texpand>
+export type ReligionsResponse<Texpand = unknown> = Required<ReligionsRecord> & BaseSystemFields<Texpand>
 export type UsersResponse<Texpand = unknown> = Required<UsersRecord> & AuthSystemFields<Texpand>
 
 // Types containing all Records and Responses, useful for creating typing helper functions
 
 export type CollectionRecords = {
+	biomes: BiomesRecord
+	maps: MapsRecord
+	religions: ReligionsRecord
 	users: UsersRecord
 }
 
 export type CollectionResponses = {
+	biomes: BiomesResponse
+	maps: MapsResponse
+	religions: ReligionsResponse
 	users: UsersResponse
 }
 
@@ -54,5 +107,8 @@ export type CollectionResponses = {
 // https://github.com/pocketbase/js-sdk#specify-typescript-definitions
 
 export type TypedPocketBase = PocketBase & {
+	collection(idOrName: 'biomes'): RecordService<BiomesResponse>
+	collection(idOrName: 'maps'): RecordService<MapsResponse>
+	collection(idOrName: 'religions'): RecordService<ReligionsResponse>
 	collection(idOrName: 'users'): RecordService<UsersResponse>
 }
diff --git a/src/types/typed-router.d.ts b/src/types/typed-router.d.ts
index b009c8a..3aca3a3 100644
--- a/src/types/typed-router.d.ts
+++ b/src/types/typed-router.d.ts
@@ -20,6 +20,7 @@ declare module 'vue-router/auto-routes' {
   export interface RouteNamedMap {
     '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
     '/login': RouteRecordInfo<'/login', '/login', Record<never, never>, Record<never, never>>,
+    '/map': RouteRecordInfo<'/map', '/map', Record<never, never>, Record<never, never>>,
     '/profile': RouteRecordInfo<'/profile', '/profile', Record<never, never>, Record<never, never>>,
     '/register': RouteRecordInfo<'/register', '/register', Record<never, never>, Record<never, never>>,
     '/reset-password': RouteRecordInfo<'/reset-password', '/reset-password', Record<never, never>, Record<never, never>>,
diff --git a/start-dev.sh b/start-dev.sh
index 63f9490..ae297e6 100755
--- a/start-dev.sh
+++ b/start-dev.sh
@@ -1,35 +1,5 @@
 #!/bin/bash
 
-if [ ! -f ./pocketbase/pocketbase ]; then
-  curl -L https://github.com/pocketbase/pocketbase/releases/download/v0.22.21/pocketbase_0.22.21_linux_amd64.zip -o ./pocketbase/pb.zip
-
-  unzip ./pocketbase/pb.zip -d ./pocketbase
-
-  rm -rf ./pocketbase/CHANGELOG.md ./pocketbase/LICENSE.md ./pocketbase/pb.zip
-
-  chmod +x ./pocketbase/pocketbase
-
-  echo -e "\n##################\nPobrano PocketBase\n##################\n"
-
-  if [ ! -d ./pocketbase/pb_data ]; then
-    mkdir ./pocketbase/pb_data
-
-    echo -e "\n##################\nUtworzono folder pb_data\n##################\n"
-  fi
-  
-  if [ ! -d ./pocketbase/pb_hooks ]; then
-    mkdir ./pocketbase/pb_hooks
-
-    echo -e "\n##################\nUtworzono folder pb_hooks\n##################\n"
-  fi
-  
-  if [ ! -d ./pocketbase/pb_migrations ]; then
-    mkdir ./pocketbase/pb_migrations
-
-    echo -e "\n##################\nUtworzono folder pb_migrations\n##################\n"
-  fi
-fi
-
-./pocketbase/pocketbase serve --http="localhost:8090" --dir="./pocketbase/pb_data" --hooksDir="./pocketbase/pb_hooks" --migrationsDir="./pocketbase/pb_migrations" &
+docker-compose -f ./dev-server-containers.yaml up -d &
 
 bun run dev
diff --git a/types/auto-imports.d.ts b/types/auto-imports.d.ts
new file mode 100644
index 0000000..bcc138a
--- /dev/null
+++ b/types/auto-imports.d.ts
@@ -0,0 +1,322 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
+  const afterAll: typeof import('vitest')['afterAll']
+  const afterEach: typeof import('vitest')['afterEach']
+  const assert: typeof import('vitest')['assert']
+  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
+  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const beforeAll: typeof import('vitest')['beforeAll']
+  const beforeEach: typeof import('vitest')['beforeEach']
+  const chai: typeof import('vitest')['chai']
+  const computed: typeof import('vue')['computed']
+  const computedAsync: typeof import('@vueuse/core')['computedAsync']
+  const computedEager: typeof import('@vueuse/core')['computedEager']
+  const computedInject: typeof import('@vueuse/core')['computedInject']
+  const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
+  const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
+  const controlledRef: typeof import('@vueuse/core')['controlledRef']
+  const createApp: typeof import('vue')['createApp']
+  const createEventHook: typeof import('@vueuse/core')['createEventHook']
+  const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
+  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
+  const createPinia: typeof import('pinia')['createPinia']
+  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
+  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
+  const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
+  const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
+  const customRef: typeof import('vue')['customRef']
+  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
+  const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const defineStore: typeof import('pinia')['defineStore']
+  const describe: typeof import('vitest')['describe']
+  const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
+  const effectScope: typeof import('vue')['effectScope']
+  const expect: typeof import('vitest')['expect']
+  const extendRef: typeof import('@vueuse/core')['extendRef']
+  const getActivePinia: typeof import('pinia')['getActivePinia']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
+  const inject: typeof import('vue')['inject']
+  const injectLocal: typeof import('@vueuse/core')['injectLocal']
+  const isDefined: typeof import('@vueuse/core')['isDefined']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const it: typeof import('vitest')['it']
+  const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
+  const mapActions: typeof import('pinia')['mapActions']
+  const mapGetters: typeof import('pinia')['mapGetters']
+  const mapState: typeof import('pinia')['mapState']
+  const mapStores: typeof import('pinia')['mapStores']
+  const mapWritableState: typeof import('pinia')['mapWritableState']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
+  const onLongPress: typeof import('@vueuse/core')['onLongPress']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
+  const provide: typeof import('vue')['provide']
+  const provideLocal: typeof import('@vueuse/core')['provideLocal']
+  const reactify: typeof import('@vueuse/core')['reactify']
+  const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
+  const reactive: typeof import('vue')['reactive']
+  const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
+  const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
+  const reactivePick: typeof import('@vueuse/core')['reactivePick']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
+  const refDebounced: typeof import('@vueuse/core')['refDebounced']
+  const refDefault: typeof import('@vueuse/core')['refDefault']
+  const refThrottled: typeof import('@vueuse/core')['refThrottled']
+  const refWithControl: typeof import('@vueuse/core')['refWithControl']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveRef: typeof import('@vueuse/core')['resolveRef']
+  const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
+  const setActivePinia: typeof import('pinia')['setActivePinia']
+  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const storeToRefs: typeof import('pinia')['storeToRefs']
+  const suite: typeof import('vitest')['suite']
+  const syncRef: typeof import('@vueuse/core')['syncRef']
+  const syncRefs: typeof import('@vueuse/core')['syncRefs']
+  const templateRef: typeof import('@vueuse/core')['templateRef']
+  const test: typeof import('vitest')['test']
+  const throttledRef: typeof import('@vueuse/core')['throttledRef']
+  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
+  const toRaw: typeof import('vue')['toRaw']
+  const toReactive: typeof import('@vueuse/core')['toReactive']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
+  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
+  const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
+  const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
+  const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
+  const unref: typeof import('vue')['unref']
+  const unrefElement: typeof import('@vueuse/core')['unrefElement']
+  const until: typeof import('@vueuse/core')['until']
+  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useAnimate: typeof import('@vueuse/core')['useAnimate']
+  const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
+  const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
+  const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
+  const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
+  const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
+  const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
+  const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
+  const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
+  const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
+  const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
+  const useArraySome: typeof import('@vueuse/core')['useArraySome']
+  const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
+  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
+  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useBase64: typeof import('@vueuse/core')['useBase64']
+  const useBattery: typeof import('@vueuse/core')['useBattery']
+  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
+  const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
+  const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
+  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
+  const useCached: typeof import('@vueuse/core')['useCached']
+  const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
+  const useCloned: typeof import('@vueuse/core')['useCloned']
+  const useColorMode: typeof import('@vueuse/core')['useColorMode']
+  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
+  const useCounter: typeof import('@vueuse/core')['useCounter']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVar: typeof import('@vueuse/core')['useCssVar']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
+  const useCycleList: typeof import('@vueuse/core')['useCycleList']
+  const useDark: typeof import('@vueuse/core')['useDark']
+  const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
+  const useDebounce: typeof import('@vueuse/core')['useDebounce']
+  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
+  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
+  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
+  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
+  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
+  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
+  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
+  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
+  const useDraggable: typeof import('@vueuse/core')['useDraggable']
+  const useDropZone: typeof import('@vueuse/core')['useDropZone']
+  const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
+  const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
+  const useElementHover: typeof import('@vueuse/core')['useElementHover']
+  const useElementSize: typeof import('@vueuse/core')['useElementSize']
+  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
+  const useEventBus: typeof import('@vueuse/core')['useEventBus']
+  const useEventListener: typeof import('@vueuse/core')['useEventListener']
+  const useEventSource: typeof import('@vueuse/core')['useEventSource']
+  const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
+  const useFavicon: typeof import('@vueuse/core')['useFavicon']
+  const useFetch: typeof import('@vueuse/core')['useFetch']
+  const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
+  const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
+  const useFocus: typeof import('@vueuse/core')['useFocus']
+  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
+  const useFps: typeof import('@vueuse/core')['useFps']
+  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
+  const useGamepad: typeof import('@vueuse/core')['useGamepad']
+  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useId: typeof import('vue')['useId']
+  const useIdle: typeof import('@vueuse/core')['useIdle']
+  const useImage: typeof import('@vueuse/core')['useImage']
+  const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
+  const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
+  const useInterval: typeof import('@vueuse/core')['useInterval']
+  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
+  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
+  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
+  const useLink: typeof import('vue-router')['useLink']
+  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
+  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
+  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
+  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
+  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
+  const useMemoize: typeof import('@vueuse/core')['useMemoize']
+  const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useModel: typeof import('vue')['useModel']
+  const useMounted: typeof import('@vueuse/core')['useMounted']
+  const useMouse: typeof import('@vueuse/core')['useMouse']
+  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
+  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
+  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
+  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
+  const useNetwork: typeof import('@vueuse/core')['useNetwork']
+  const useNow: typeof import('@vueuse/core')['useNow']
+  const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
+  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
+  const useOnline: typeof import('@vueuse/core')['useOnline']
+  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
+  const useParallax: typeof import('@vueuse/core')['useParallax']
+  const useParentElement: typeof import('@vueuse/core')['useParentElement']
+  const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
+  const usePermission: typeof import('@vueuse/core')['usePermission']
+  const usePointer: typeof import('@vueuse/core')['usePointer']
+  const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
+  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
+  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
+  const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
+  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
+  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
+  const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
+  const usePrevious: typeof import('@vueuse/core')['usePrevious']
+  const useRafFn: typeof import('@vueuse/core')['useRafFn']
+  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
+  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
+  const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
+  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
+  const useScroll: typeof import('@vueuse/core')['useScroll']
+  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
+  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
+  const useShare: typeof import('@vueuse/core')['useShare']
+  const useSlots: typeof import('vue')['useSlots']
+  const useSorted: typeof import('@vueuse/core')['useSorted']
+  const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
+  const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
+  const useStepper: typeof import('@vueuse/core')['useStepper']
+  const useStorage: typeof import('@vueuse/core')['useStorage']
+  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
+  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
+  const useSupported: typeof import('@vueuse/core')['useSupported']
+  const useSwipe: typeof import('@vueuse/core')['useSwipe']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
+  const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
+  const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
+  const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
+  const useThrottle: typeof import('@vueuse/core')['useThrottle']
+  const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
+  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
+  const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
+  const useTimeout: typeof import('@vueuse/core')['useTimeout']
+  const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
+  const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
+  const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
+  const useTitle: typeof import('@vueuse/core')['useTitle']
+  const useToNumber: typeof import('@vueuse/core')['useToNumber']
+  const useToString: typeof import('@vueuse/core')['useToString']
+  const useToggle: typeof import('@vueuse/core')['useToggle']
+  const useTransition: typeof import('@vueuse/core')['useTransition']
+  const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
+  const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
+  const useVModel: typeof import('@vueuse/core')['useVModel']
+  const useVModels: typeof import('@vueuse/core')['useVModels']
+  const useVibrate: typeof import('@vueuse/core')['useVibrate']
+  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
+  const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
+  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
+  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
+  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
+  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
+  const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
+  const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
+  const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
+  const vi: typeof import('vitest')['vi']
+  const vitest: typeof import('vitest')['vitest']
+  const watch: typeof import('vue')['watch']
+  const watchArray: typeof import('@vueuse/core')['watchArray']
+  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
+  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
+  const watchDeep: typeof import('@vueuse/core')['watchDeep']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
+  const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
+  const watchOnce: typeof import('@vueuse/core')['watchOnce']
+  const watchPausable: typeof import('@vueuse/core')['watchPausable']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+  const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
+  const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
+  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
+  const whenever: typeof import('@vueuse/core')['whenever']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}
diff --git a/types/components.d.ts b/types/components.d.ts
new file mode 100644
index 0000000..4edc351
--- /dev/null
+++ b/types/components.d.ts
@@ -0,0 +1,13 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}