V2 beta3 (#338 )

* chore: upgrade local build documentation * style: keep scrolling event in screen * feat: delay is time entry * refactor: remove unused * refactor: remove unused * refactor: batch store updates * refactor: virtually remove cap on events * refactor: style and behaviour tweaks to event block * style: tweaks on schedules * chore: remove sentry from server * style: reorder menu * chore: update docs
fix docker on different port (#337 )
2026-07-26 10:38:55 +00:00 · 2023-04-14 10:13:46 +02:00 · 2023-04-14 10:08:42 +02:00 · 2023-04-10 20:00:09 +02:00 · 2023-04-09 19:54:19 +02:00 · 2023-04-09 13:53:51 +02:00
1085 changed files with 28737 additions and 66404 deletions
@@ -11,13 +11,4 @@

 # Ignore git and cache folders
 .git
-.gitignore
 .cache
-
-# Ignore build folders
-node_modules
-dist
-
-# Ignore default volumes created by running docker compose up
-ontime-db
-ontime-styles
@@ -1 +0,0 @@
- "ONTIME_VERSION.js"
@@ -1,5 +1,4 @@
 {
-  "root": true,
  "parserOptions": {
    "ecmaVersion": 2020
  },
@@ -7,47 +6,14 @@
    "es6": true,
    "jest": true
  },
-  "parser": "@typescript-eslint/parser",
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier", "eslint-config-prettier"],
-  "plugins": ["@typescript-eslint", "prettier"],
+  "extends": [
+    "eslint:recommended"
+  ],
  "overrides": [
    {
      "files": ["e2e/**/**.spec.ts", "e2e/**/**.test.ts"],
      "extends": ["plugin:playwright/playwright-test"]
    }
  ],
-  "rules": {
-    "no-useless-concat": "warn",
-    "prefer-template": "warn",
-    "no-throw-literal": "error",
-    "no-console": [
-      "warn",
-      {
-        "allow": ["warn", "error"]
-      }
-    ],
-    "no-restricted-imports": [
-      "error",
-      {
-        "patterns": ["ontime-types/src/*", "ontime-utils/src/*"]
-      }
-    ],
-    "@typescript-eslint/no-non-null-assertion": "warn",
-    "@typescript-eslint/no-explicit-any": "warn",
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      {
-        "argsIgnorePattern": "^_",
-        "caughtErrorsIgnorePattern": "^_",
-        "destructuredArrayIgnorePattern": "^_",
-        "varsIgnorePattern": "^_"
-      }
-    ],
-    "prettier/prettier": [
-      "warn",
-      {
-        "endOfLine": "auto"
-      }
-    ]
-  }
-}
+  "rules": {}
+}
@@ -1,2 +0,0 @@
-github: cpvalente
-buy_me_a_coffee: cpvalente
@@ -2,114 +2,138 @@ name: Ontime build

 on:
  push:
-    tags: [ "*" ]
+    tags: [ "v1.*.*" ]
  workflow_dispatch:

 jobs:
-  build_macos:
-    runs-on: macOS-latest
+  build_mac:
+    runs-on: macos-latest
+    timeout-minutes: 20
+    env:
+      CI: ''

    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v2
      - name: Use Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v2
        with:
-          node-version: 22
+          node-version: '14.x'

-      - name: Setup pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: 10
+      # React
+      - name: React - Install dependencies
+        run: yarn install --frozen-lockfile --network-timeout 300000
+        working-directory: ./client

-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+      - name: React - Build project
+        run: yarn build
+        working-directory: ./client

-      - name: Build project packages
-        env:
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-        run: pnpm build
+      # Node server
+      - name: Server - Install dependencies
+        run: yarn install --frozen-lockfile --production --network-timeout 300000
+        working-directory: ./server/src

+      # App
+      - name: Electron - Install dependencies
+        shell: bash
+        run: yarn install --frozen-lockfile --network-timeout 300000 && yarn setdb
+        working-directory: ./server
      - name: Electron - Build app
-        env: 
-          APPLE_ID: ${{ secrets.APPLEID }}
-          APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLEIDPASS }}
-          APPLE_TEAM_ID: ${{ secrets.TEAMID }}
-          CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
-          CSC_LINK: ${{ secrets.CSC_LINK }}
-        run: pnpm dist-mac --env-mode=loose
-        timeout-minutes: 60
+        run: yarn dist-mac
+        working-directory: ./server

+      # Release
      - name: Release
        uses: softprops/action-gh-release@v1
        with:
-          files: |
-            ./apps/electron/dist/ontime-macOS-x64.dmg
-            ./apps/electron/dist/ontime-macOS-arm64.dmg
+          files: ./server/dist/ontime-macOS.dmg
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

-  build_windows:
+  build_win:
    runs-on: windows-latest
+    timeout-minutes: 20
+    env:
+      CI: ''

    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v2
      - name: Use Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v1
        with:
-          node-version: 22
+          node-version: '14.x'

-      - name: Setup pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: 10
+      # React
+      - name: React - Install dependencies
+        run: yarn install --frozen-lockfile --network-timeout 300000
+        working-directory: ./client

-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+      - name: React - Build project
+        run: yarn build
+        working-directory: ./client

-      - name: Build project packages
-        env:
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-        run: pnpm build
+      # Node server
+      - name: Server - Install dependencies
+        run: yarn install --frozen-lockfile --production --network-timeout 300000
+        working-directory: ./server/src

+      # App
+      - name: Electron - Install dependencies
+        shell: bash
+        run: yarn install --frozen-lockfile --network-timeout 300000 && yarn setdb
+        working-directory: ./server
      - name: Electron - Build app
-        run: pnpm dist-win
+        run: yarn dist-win
+        working-directory: ./server

+      # Release
      - name: Release
        uses: softprops/action-gh-release@v1
        with:
-          files: './apps/electron/dist/ontime-win64.exe'
+          files: ./server/dist/ontime-win64.exe
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

-  build_ubuntu:
+  build_linux:
    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    env:
+      CI: ''

    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v2
      - name: Use Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v1
        with:
-          node-version: 22
+          node-version: '14.x'

-      - name: Setup pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: 10
+      # React
+      - name: React - Install dependencies
+        run: yarn install --frozen-lockfile --network-timeout 300000
+        working-directory: ./client

-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+      - name: React - Build project
+        run: yarn build
+        working-directory: ./client

-      - name: Build project packages
-        env:
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-        run: pnpm build
+      # Node server
+      - name: Server - Install dependencies
+        run: yarn install --frozen-lockfile --production --network-timeout 300000
+        working-directory: ./server/src

+      # App
+      - name: Electron - Install dependencies
+        shell: bash
+        run: yarn install --frozen-lockfile --network-timeout 300000 && yarn setdb
+        working-directory: ./server
      - name: Electron - Build app
-        run: pnpm dist-linux
+        run: yarn dist-linux
+        working-directory: ./server

+      # Release
      - name: Release
        uses: softprops/action-gh-release@v1
        with:
-          files: './apps/electron/dist/ontime-linux.AppImage'
+          files: ./server/dist/ontime-linux.AppImage
        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -1,53 +0,0 @@
-name: Ontime CLI build
-
-on:
-  release:
-    types: [published]
-  workflow_dispatch:
-
-jobs:
-  build_cli:
-    permissions:
-      id-token: write
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
-          registry-url: 'https://registry.npmjs.org'
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: 10
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build project packages
-        env:
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-        run: pnpm build
-
-      - name: Copy server
-        run: mkdir -p apps/cli/server && cp apps/server/dist/index.cjs apps/cli/server/index.cjs
-      
-      - name: Copy client
-        run: cp -R apps/client/build apps/cli/client
-
-      - name: Copy external
-        run: cp -R apps/server/src/external apps/cli/external
-      
-      - name: Publish to NPM
-        run: pnpm publish --access public --no-git-checks
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-          NPM_CONFIG_PROVENANCE: true
-        working-directory: ./apps/cli
@@ -1,48 +0,0 @@
-name: Docker Image CI Ontime
-
-on:
-  release:
-    types: [published]
-  workflow_dispatch:
-
-jobs:
-
-  publish_docker:
-    runs-on: ubuntu-latest
-    env:
-      CI: ''
-
-    steps:
-    - uses: actions/checkout@v4
-
-    - name: Docker Login
-      uses: docker/login-action@v2.1.0
-      with:
-        username: ${{ secrets.DOCKERHUB_USERNAME }}
-        password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-    - name: Docker Setup Buildx
-      uses: docker/setup-buildx-action@v2.5.0
-
-    - name: Build and push stable release
-      if: github.event.release.prerelease == false
-      uses: docker/build-push-action@v4.0.0
-      with:
-        context: .
-        file: ./Dockerfile
-        platforms: linux/amd64,linux/arm64,linux/arm/v7
-        # Push is a shorthand for --output=type=registry
-        push: true
-        tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ github.event.release.tag_name }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:latest
-
-    - name: Build and push pre-release
-      if: github.event.release.prerelease == true
-      uses: docker/build-push-action@v4.0.0
-      with:
-        context: .
-        file: ./Dockerfile
-        platforms: linux/amd64,linux/arm64,linux/arm/v7
-        # Push is a shorthand for --output=type=registry
-        push: true
-        tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ github.event.release.tag_name }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:nightly
-
@@ -0,0 +1,56 @@
+name: Docker Image CI Ontime V2
+
+on:
+  push:
+    tags: [ "v2.*.*" ]
+  workflow_dispatch:
+
+jobs:
+
+  publish_docker:
+    runs-on: ubuntu-latest
+    env:
+      CI: ''
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Setup env
+      run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
+      
+    - name: Setup Node.js environment
+      uses: actions/setup-node@v3.6.0
+      with:
+        version: 16.16.0
+        
+    - name: Setup pnpm
+      uses: pnpm/action-setup@v2.2.4
+      with:
+        version: 7.26.3
+          
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
+
+    - name: Build project packages
+      env:
+        SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+      run: pnpm turbo build:docker
+        
+    - name: Docker Login
+      uses: docker/login-action@v2.1.0
+      with:
+        username: ${{ secrets.DOCKERHUB_USERNAME }}
+        password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+    - name: Docker Setup Buildx
+      uses: docker/setup-buildx-action@v2.5.0
+
+    - name: Build and push Docker images
+      uses: docker/build-push-action@v4.0.0
+      with:
+        context: .
+        file: ./Dockerfile
+        platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6
+        # Push is a shorthand for --output=type=registry
+        push: true
+        tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:beta_${{ env.RELEASE_VERSION  }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:beta_v2
+
@@ -0,0 +1,106 @@
+name: Ontime build v2
+
+on:
+  push:
+    tags: [ "v2.*.*" ]
+  workflow_dispatch:
+
+jobs:
+  build_macos:
+    runs-on: macOS-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2.2.4
+        with:
+          version: 7.26.3
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project packages
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: pnpm build
+
+      - name: Electron - Build app
+        run: pnpm dist-mac
+
+      - name: Release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: './apps/electron/dist/ontime-macOS.dmg'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  build_windows:
+    runs-on: windows-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2.2.4
+        with:
+          version: 7.26.3
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project packages
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: pnpm build
+
+      - name: Electron - Build app
+        run: pnpm dist-win
+
+      - name: Release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: './apps/electron/dist/ontime-win64.exe'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  build_ubuntu:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2.2.4
+        with:
+          version: 7.26.3
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project packages
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: pnpm build
+
+      - name: Electron - Build app
+        run: pnpm dist-linux
+
+      - name: Release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: './apps/electron/dist/ontime-linux.AppImage'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -0,0 +1,66 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: ontime_test_CI
+
+on:
+  pull_request:
+    branches: [ master ]
+  workflow_dispatch:
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    env:
+      CI: ''
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      # React
+      - name: React - Install dependencies
+        run: yarn install
+        working-directory: ./client
+
+      - name: React - Run tests
+        run: yarn test:pipeline
+        working-directory: ./client
+
+      - name: React - Build project
+        run: yarn build
+        working-directory: ./client
+
+      # Node server
+      - name: Server - Install dependencies
+        run: yarn install
+        working-directory: ./server/src
+
+      # App
+      - name: Electron - Install dependencies
+        run: yarn setup
+        working-directory: ./server
+
+      - name: Server - run tests
+        run: yarn test
+        working-directory: ./server
+
+#      - name: Install Playwright Browsers
+#        run: npx playwright install --with-deps
+#        working-directory: ./server
+#
+#      - name: Run Playwright tests
+#        run: yarn e2e
+#        working-directory: ./server
+#
+#      - uses: actions/upload-artifact@v3
+#        if: always()
+#        with:
+#          name: playwright-report
+#          path: playwright-report/
+#          retention-days: 7
@@ -1,8 +1,8 @@
-name: Ontime test
+name: Ontime test v2

 on:
  pull_request:
-    branches: '*'
+    branches: [ v2 ]
  workflow_dispatch:

 jobs:
@@ -13,54 +13,30 @@ jobs:
      CI: ''

    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - name: Use Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v3
        with:
-          node-version: 22
+          node-version: 16

      - name: Setup pnpm
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v2.2.4
        with:
-          version: 10
+          version: 7.26.3

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

-      # Run code quality per package
-      - name: React - Run linter +  TypeScript checks
-        if: always()
-        run: pnpm lint && tsc --noEmit
-        working-directory: ./apps/client
-
-      - name: Server - Run linter +  TypeScript checks
-        if: always()
-        run: pnpm lint && tsc --noEmit
-        working-directory: ./apps/server
-
-      - name: Utils - Run linter +  TypeScript checks
-        if: always()
-        run: pnpm lint && tsc --noEmit
-        working-directory: ./packages/utils
-
-      - name: Types - Run linter
-        if: always()
-        run: pnpm lint
-        working-directory: ./packages/types
-
      # We choose to run tests separately
      - name: React - Run unit tests
-        if: always()
        run: pnpm test:pipeline
        working-directory: ./apps/client

      - name: Server - Run unit tests
-        if: always()
        run: pnpm test:pipeline
        working-directory: ./apps/server

      - name: Utils - Run unit tests
-        if: always()
        run: pnpm test:pipeline
        working-directory: ./packages/utils

@@ -69,16 +45,16 @@ jobs:
    timeout-minutes: 20

    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - name: Use Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v3
        with:
-          node-version: 22
+          node-version: 16

      - name: Setup pnpm
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v2.2.4
        with:
-          version: 10
+          version: 7.26.3

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -92,15 +68,9 @@ jobs:
      - name: Run Playwright tests
        run: pnpm e2e

-      - uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@v3
        if: always()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30
-
-      - uses: actions/upload-artifact@v4
-        with:
-          name: automated-screenshots
-          path: automated-screenshots/
-          retention-days: 14
@@ -27,8 +27,6 @@ ontime.code-workspace
 test-results
 playwright-report
 /playwright/.cache/
-automated-screenshots
-e2e/tests/fixtures/tmp/*

 # production
 build/
@@ -40,10 +38,9 @@ dist/
 # docker utils
 ontime-db
 ontime-external/
-ontime-data/
+
+# working database
+apps/server/src/preloaded-db/db.json

 # versioning file
 **/ONTIME_VERSION.js
-
-# temporary write files
-**.tmp
@@ -1,10 +0,0 @@
-build
-coverage
-dist
-node_modules
-
-playwright-report
-
-**/*.toml
-**/*.yml
-**/*.json
@@ -1,5 +1,4 @@
 {
-  "endOfLine": "lf",
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
@@ -1,107 +1,47 @@
 # GETTING STARTED

 Ontime consists of 3 distinct parts
-
- __client__: A React app for Ontime's UI and web clients
+- __client__: A React app for Ontime's UI and web clients 
 - __electron__: An electron app which facilitates the cross-platform distribution of Ontime
 - __server__: A node application which handles the domains services and integrations

-The steps below will assume you have locally installed the necessary dependencies.
+The steps below will assume you have locally installed the necessary dependencies. 
 Other dependencies will be installed as part of the setup
-
- __node__ (~22)
- __pnpm__ (~10)
+- __node__ (>=16.16)
+- __pnpm__ (>=7)
 - __docker__ (only necessary to run and build docker images)

 ## LOCAL DEVELOPMENT

-The electron app is only necessary to distribute an installable version of the app and is not required for local
-development.
+The electron app is only necessary to distribute an installable version of the app and is not required for local development.
 Locally, we would need to run both the React client and the node.js server in development mode

 From the project root, run the following commands
-
 - __Install the project dependencies__ by running `pnpm i`
 - __Run dev mode__ by running `turbo dev`

-### Debugging backend
-
-To debug backend code in Node.js:
-
- Open two separate terminals and navigate to the `apps/client` and `apps/server` directories.
- In each terminal, run the command `pnpm dev` to start the development servers for both the client and server
-  applications.
- If you need to set breakpoints and inspect the code execution, enable Node.js inspect mode by
-  running `pnpm dev:inspect`.
-
-## TESTING
-
-Generally we have 2 types of tests.
-
- Unit tests for functions that contain business logic
- End-to-end tests for core features
-
-### Unit tests
-
-Unit tests are contained in mostly all the apps and packages (client, server and utils)
-
-You can run unit tests by running turbo `turbo test:pipeline` from the project root.
-This will run all tests and close test runner.
-
-Alternatively you can navigate to an app or project and run `pnpm test` to run those tests in watch mode
-
-### E2E tests
-
-E2E tests are in a separate package. On running, [playwright](https://playwright.dev/) will spin up an instance of the
-webserver to test against
-These tests also run against a separate version of the DB (test-db)
-
-Before running the E2E, you should first build the project with `pnpm build:local`.
-
-You can run playwright tests from project root with `pnpm e2e`
-
-When writing tests, it can be handy to run playwright in interactive mode with `pnpm e2e:i`. You would need to manually
-start the webserver with `pnpm dev:server`
-
-Some other useful commands
-
- `pnpm e2e --ui` open playwright UI
- `pnpm e2e --headed` run tests with a visible browser window
-
 ## CREATE AN INSTALLABLE FILE (Windows | MacOS | Linux)

 Ontime uses Electron to distribute the application.
 You can generate a distribution for your OS by running the following steps.

 From the project root, run the following commands
-
 - __Install the project dependencies__ by running `pnpm i`
- __Build the UI and server__ by running `turbo build:electron`
+- __Build the UI and server__ by running `turbo build:local`
 - __Create the package__ by running `turbo dist-win`, `turbo dist-mac` or `turbo dist-linux`

 The build distribution assets will be at `.apps/electron/dist`

-Note: The MacOS build will only work in CI, locally it will fail due to notarisation issues.
-Use the `turbo dist-mac:local` command to build a MacOS distribution locally.
-
 ## DOCKER

 Ontime provides a docker-compose file to aid with building and running docker images.
 While it should allow for a generic setup, it might need to be modified to fit your infrastructure.

 From the project root, run the following commands
-
- __Build docker image from__ by running `docker build -t getontime/ontime .`
+- __Install the project dependencies__ by running `pnpm i`
+- __Build docker image from__ by running `docker build -t getontime/ontime`
 - __Run docker image from compose__ by running `docker-compose up -d`

 Other useful commands
-
 - __List running processes__ by running `docker ps`
 - __Kill running process__ by running `docker kill <process-id>`
-
-## General Info
-
-# APP Building
-
-We build the app from app.js for almost all applications. The output file will still be named index.cjs. This is because of Electron.
-Building the app from index.ts only applies for applications that don't use electron. index.ts will take over the initialization of the server and UI when electron isn't present.
@@ -1,30 +1,20 @@
-FROM node:22-bullseye AS builder
-ENV PNPM_HOME="/pnpm"
-ENV PATH="$PNPM_HOME:$PATH"
-RUN npm install -g pnpm@10.11.0
-COPY . /app
-WORKDIR /app
-RUN pnpm --filter=ontime-ui --filter=ontime-server --filter=ontime-utils install --config.dedupe-peer-dependents=false --frozen-lockfile
-RUN pnpm --filter=ontime-ui --filter=ontime-server run build:docker
-
-FROM node:22-alpine
+FROM node:16-alpine

 # Set environment variables
 # Environment Variable to signal that we are running production
 ENV NODE_ENV=docker
 # Ontime Data path
-ENV ONTIME_DATA=/data/
+ENV ONTIME_DATA=/external/

 WORKDIR /app/

 # Prepare UI
-COPY --from=builder /app/apps/client/build ./client/
+COPY /apps/client/build ./client/

 # Prepare Backend
-COPY --from=builder /app/apps/server/dist/ ./server/
-COPY --from=builder /app/apps/server/src/external/ ./external/
-COPY --from=builder /app/apps/server/src/user/ ./user/
-COPY --from=builder /app/apps/server/src/html/ ./html/
+COPY /apps/server/dist/ ./server/
+COPY /demo-db/ ./preloaded-db/
+COPY /apps/server/src/external/ ./external/

 # Export default ports
 EXPOSE 4001/tcp 8888/udp 9999/udp
@@ -34,4 +24,4 @@ CMD ["node", "server/docker.cjs"]
 # Build and run commands
 # !!! Note that this command needs pre-build versions of the UI and server apps
 # docker buildx build . -t getontime/ontime
-# docker run -p 4001:4001 -p 8888:8888/udp -p 9999:9999/udp -v ./ontime-db:/data/ getontime/ontime
+# docker run -p 4001:4001 -p 8888:8888/udp -p 9999:9999/udp -v ./ontime-db:/external/db/ -v ./ontime-styles:/external/styles/ getontime/ontime
@@ -1,185 +1,204 @@
-[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-green.svg)](https://www.gnu.org/licenses/gpl-3.0)
-![GitHub Downloads (all assets, all releases)](https://img.shields.io/github/downloads/cpvalente/ontime/total)
-![Docker Pulls](https://img.shields.io/docker/pulls/getontime/ontime)
-![NPM Downloads](https://img.shields.io/npm/dy/%40getontime%2Fcli)
-![Homebrew Cask Version](https://img.shields.io/homebrew/cask/v/ontime)
-[![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/cpvalente)
-[![](https://img.shields.io/static/v1?label=Buy%20me%20a%20coffee&message=%E2%9D%A4&logo=buymeacoffee&color=%23fe8e86)](https://www.buymeacoffee.com/cpvalente)
+[![ontime_test_CI](https://github.com/cpvalente/ontime/actions/workflows/ontime_cy.yml/badge.svg)](https://github.com/cpvalente/ontime/actions/workflows/ontime_cy.yml) [![Ontime build](https://github.com/cpvalente/ontime/actions/workflows/build.yml/badge.svg)](https://github.com/cpvalente/ontime/actions/workflows/build.yml)
+[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-green.svg)](https://www.gnu.org/licenses/gpl-3.0) [![Documentation in Gitbook](https://badges.aleen42.com/src/gitbook_2.svg)](https://cpvalente.gitbook.io/ontime/)

-## Download the latest release
-<a href="https://www.buymeacoffee.com/cpvalente" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" height="32"></a>
+## Download the latest releases here

- Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-win64.exe">Windows</a>
- Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS-arm64.dmg">MacOS Arm</a>
- Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS-x64.dmg">MacOS Intel</a>
- Download AppImage for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-linux.AppImage">Linux</a>
-
-... or
- Get from <a href="https://hub.docker.com/r/getontime/ontime">Docker hub</a>
- Install from <a href="https://www.npmjs.com/package/ontime">NPM</a>
- Install from <a href="https://formulae.brew.sh/cask/ontime">Homebrew</a>
-
-## Need help?
-We do our best to have most topics covered by the documentation. However, if your question is not covered, you are welcome to [fill in a bug report in an issue](https://github.com/cpvalente/ontime/issues), [ask a question in GitHub discussions](https://github.com/cpvalente/ontime/discussions) or hop in the [discord server](https://discord.com/invite/eje3CSUEXm) for a chat.
-
-## Using Ontime?
-Let us know!
-Ontime improves from the collaboration with its users. We would like to understand how you use Ontime and appreciate your feedback.
-
-We would also like to include a testimonials section in our ✨new website✨. It would be great to showcase the diversity of users running Ontime.
+<div style="display: flex; justify-content: space-around">
+  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS.dmg"><img alt="Download MacOS" src="https://github.com/cpvalente/ontime/blob/master/.github/mac-download.png"/></a>
+  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-win64.exe"><img alt="Download Windows" src="https://github.com/cpvalente/ontime/blob/master/.github/win-download.png"/></a>
+  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-linux.AppImage"><img alt="Download Linux" src="https://github.com/cpvalente/ontime/blob/master/.github/linux-download.png"/></a>
+  <a href="https://hub.docker.com/r/getontime/ontime"><img alt="Get from Dockerhub" src="https://github.com/cpvalente/ontime/blob/master/.github/dockerhub.png"/></a>
+</div>

 # Ontime

-Ontime is a browser-based application that manages event rundowns, scheduling, and cueing.
+Ontime is an application for managing event rundowns and running stage timers.

-With Ontime, you can plan, track your schedule, manage automation and cross-department show information all in one place.
+A single, locally hosted central application distributes your event information over the local network.
+This enables the distribution of the data to a series of viewers and allows integration into video and control workflows, including OBS and d3.

-Ontime is made by entertainment and broadcast engineers and used by
+![App Window](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/app.jpg)

- Conference organisers
- Touring shows and receiving venues
- Broadcasters and streamers
- Theatres and opera houses
- Houses of worship
-
-## Main features
- [x] **Multiplatform**: Available for Windows / MacOS, Linux. You can also self host with the docker image
- [x] **In any device**: Ontime is available in the local network to any device with a browser, eg: tablets, mobile phones, laptops, signage, media servers...
- [x] **Made for teams**: Ontime caters to different roles in your production team: directors, operators, backstage and front of house signage...
- [x] **Delay workflows**: Manage and communicate runtime delays in real-time to your team
- [x] **Automatable**: Ontime can be fully or partially controlled by an operator, or run standalone with the system clock
- [x] **Focus on integrations**: Use one of the APIs provided (OSC, HTTP, Websocket) or the available [Companion module](https://bitfocus.io/connections/getontime-ontime) to integrate into your workflow (vMix, disguise, Qlab, OBS)
-
-... and a lot more ...
-
-### For live environments
-
-Ontime is designed for use in live environments. \
-This guides the application into being flexible and efficiently integrating into different workflows.
-
-### For teams
-
-All information added in Ontime is shared with the production team and other software / hardware in your workflow. \
-Ontime also improves team collaboration with dedicated views for cuesheets and operators, and for public and production
-signage.
-
-### Simple infrastructure
-
-All the data is distributed over the network, making its distribution and infrastructure flexible and cheap. \
-With the availability of the docker image, you can also leverage IT infrastructure to make Ontime available online for
-your team and clients.
-
-Ontime is made by video engineers and entertainment technicians.
-
-![App Window](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/editor.png)
-
-![Views](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/ontime-overview.webp)
-
-[Read the docs to learn more](https://docs.getontime.no)
+![Views](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/02_screentypes.png)

 ## Using Ontime

-Ontime can be started by downloading the latest release for your platform. \
-Alternatively you can also use the docker image, available at [Docker Hub](https://hub.docker.com/r/getontime/ontime)
+Once installed and running, Ontime starts a background server that is the heart of all processes.
+From the app, you can add / edit your running order and control the timer playback.

-Once installed and running, any device in the network has access to Ontime.
+Any device with a browser in the same network can choose one of the supported views to render the available data. 
+This is done by reaching the ontime server at the _default port 4001_ eg: `localhost:4001`
+or `192.168.1.3:4001`
+<br />
+You can then use the Ontime logo in the top left corner to select the desired view.
+The logo will be initially hidden until there is mouse interaction.

-Ontime provides different screens which allow for different types of interactions with the data. These are called
-views. \
-Each view in Ontime focuses on empowering a specific role or achieving a particular task.
-
-You can access the different views by reaching the ontime server, in your browser, at (_default port
-4001_) `http://localhost:4001` or `http://192.168.1.3:4001`
+In the case of unattended machines or automation, it is possible to use different URL to recall
+individual views and extend view settings using the URL aliases feature

 ```
-For the backstage views
+For the presentation views
 -------------------------------------------------------------
+IP.ADDRESS:4001            > Web server default to presenter timer view
 IP.ADDRESS:4001/timer      > Presenter / Stage timer view
 IP.ADDRESS:4001/minimal    > Simple timer view
 IP.ADDRESS:4001/clock      > Simple clock view
-IP.ADDRESS:4001/backstage  > Stage Manager / Backstage view
-IP.ADDRESS:4001/countdown  > Countdown to anything
-IP.ADDRESS:4001/studio     > Studio Clock
-IP.ADDRESS:4001/timeline   > Timeline
-```
-
-```
-For the public views
-------------------------------------------------------------
+IP.ADDRESS:4001/sm         > Stage Manager / Backstage view
 IP.ADDRESS:4001/public     > Public / Foyer view
 IP.ADDRESS:4001/lower      > Lower Thirds
+IP.ADDRESS:4001/studio     > Studio Clock
 ```
-
 ```
-For production views
+For management views 
 -------------------------------------------------------------
 IP.ADDRESS:4001/editor    > the control interface, same as the app
 IP.ADDRESS:4001/cuesheet  > realtime cuesheets for collaboration
-IP.ADDRESS:4001/operator  > automated views for operators
 ```

-More information is available [in our docs](https://docs.getontime.no)
+More documentation is available [in our docs](https://cpvalente.gitbook.io/ontime/)
+
+## Feature List (in no specific order)
+
+- [x] Distribute data over network and render it in the browser
+- [x] Different screen types
+    - Stage Timer
+    - Backstage Info
+    - Public Info
+    - Studio Clock
+    - Countdown
+    - [Make your own?](#make-your-own-viewer)
+- [x] Configurable Lower Thirds
+- [x] Cuesheets with user definable fields
+- [x] Send live messages to different screen types
+- [x] Differentiate between backstage and public data
+- [x] Workflow for managing delays
+- [x] Protocol integrations for Control and Feedback
+  - OSC (Open Sound Control)
+  - HTTP
+  - WebSockets
+- [x] Roll mode: run independently using the system clock
+- [x] [Headless run](#headless-run): run server in a separate machine, configure from a browser locally
+- [x] [Countdown to anything!](https://cpvalente.gitbook.io/ontime/views/countdown): have
+  a countdown to any scheduled event
+- [x] Multi-platform  (available on Windows, MacOS and Linux)
+- [x] [Companion integration](https://bitfocus.io/connections/getontime-ontime)
+
+## Unopinionated
+
+We are not interested in forcing workflows and have made Ontime, so it is flexible to whichever way
+you would like to work.
+
+- [x] If you want just the info screens, there is no need to use the timer!
+- [x] Don't have or care for a schedule?
+    - [x] a single event with no data is enough to use one of the APIs and use a dynamic timer
+    - [x] use the order list to create a set of quick timers by setting the beginning and start
+      times to 00:00 and 00:10 (**BAM**! 10 minute timer). You can quickly recall this with OSC or any of the other available integrations
+
+## Rich APIs for workflow integrations
+
+The app is currently being developed for a broad user base, from broadcast to entertainment and
+conference halls.
+
+Taking advantage of the integrations, we currently use Ontime with:
+
+- `disguise`: trigger Ontime from d3's timeline using the **OSC API**, and **render views** using d3's
+  webmodule
+- `OBS`: **render views** using the Browser Module
+- `QLab`: trigger Ontime using **OSC API**
+- `Companion`: Ontime has a **companion module**. Issue report and feature requests should be done
+  in the [repository getontime/ontime](https://github.com/bitfocus/companion-module-getontime-ontime)
+
+### Make your own viewer
+
+Ontime broadcasts its data over WebSockets. This allows you to consume its data outside the application.
+
+Writing a new view for the browser can be done with basic knowledge of HTML + CSS + Javascript (or any other language that can run in the browser).
+<br />
+See [this repository](https://github.com/cpvalente/ontime-viewer-template-v2) with a small template on
+how to get you started and read the docs about
+the [Websocket API](https://app.gitbook.com/s/-Mc0giSOToAhq0ROd0CR/control-and-feedback/websocket-api)
+
+### Headless run️
+
+You can self-host and run Ontime in a docker image. The run command will:
+
+- expose the necessary ports (listed in the Dockerfile)
+- mount a local file to persist your data (in the example: ````$(pwd)/local-data````)
+- the image name __getontime/ontime__
+
+The docker image is
+in [available Docker Hub at getontime/ontime](https://hub.docker.com/r/getontime/ontime)
+
+```bash
+docker pull getontime/ontime
+```
+
+and use the included docker compose to get started
+
+```bash
+docker-compose up
+```

 ## Roadmap

 ### Continued development

-Ontime is under active development. We continue adding and improving features in collaboration with users.
-
-Have an idea? Reach out via [email](mail@getontime.no)
-or [open an issue](https://github.com/cpvalente/ontime/issues/new)
+Several features are planned in the roadmap, and we continuously adjust this to match how users interact with the app.
+<br />
+Have an idea? Reach out via [email](mail@getontime.no) or [open an issue](https://github.com/cpvalente/ontime/issues/new)

 ### Issues

-We use Github's issue tracking for bug reporting and feature requests. \
-Found a bug? [Open an issue](https://github.com/cpvalente/ontime/issues/new).
+We use Github's issue tracking for bug reporting and feature requests. <br />
+Found a bug? [Open an issue](https://github.com/cpvalente/ontime/issues/new). 

 #### Unsigned App

 When installing the app you would see warning screens from the Operating System like:

-in Windows
+```Microsoft Defender SmartScreen prevented an unrecognised app from starting. Running this app might put your PC at risk.```

-`Microsoft Defender SmartScreen prevented an unrecognised app from starting. Running this app might put your PC at risk.`
+or
+
+```Ontime can't be opened because it is from an unidentified developer```

 or in Linux

-`Could Not Display "ontime-linux.AppImage`
-
-We currently only sign MacOS releases. \
-Purchasing the certificates for both Mac and Windows would mean a recurrent expense which we are not able to cover.
+```Could Not Display "ontime-linux.AppImage```

 You can circumvent this by allowing the execution of the app manually.

- In Windows: click `more` -> `Run Anyway`
- In Linux: right-click the AppImage file: `Properties` -> `Permissions` -> `Allow Executing File as a Program`
+- In Windows: click more and select "Run Anyway"
+- in macOS: after attempting to run the installer, navigate to System Preferences ->  Security &
+  Privacy and allow the execution of the app
+- In Linux: right-click the AppImage file -> Properties -> Permissions -> select Allow Executing
+  File as a Program

-If you have tips on how to improve this or would like to sponsor the code signing,
+Long story short: Ontime app is unsigned. </br>Purchasing the certificates for both Mac and Windows
+would mean a recurrent expense and is not a priority. This is unlikely to change in future. If you
+have tips on how to improve this or would like to sponsor the code signing,
 please [open an issue](https://github.com/cpvalente/ontime/issues/new)

-## Contributing
+#### Safari
+
+There are known issues with Safari versions lower than 13:
+- Spacing and text styles might have small inconsistencies
+- Table view does not work
+
+There is no plan for any further work on this.
+
+# Contributing

 Looking to contribute? All types of help are appreciated, from coding to testing and feature specification.
-
-If you are a developer and would like to contribute with code, please open an issue to discuss before opening a Pull Request.
-
+<br /><br />
+If you are a developer and would like to contribute with some code, please open an issue to discuss before opening a Pull Request.
+<br />
 Information about the project setup can be found in the [development documentation](./DEVELOPMENT.md)

-## Links
- [Ontime website](https://getontime.no) 
- [Documentation](https://docs.getontime.no)
- [Ontime discord server](https://discord.com/invite/eje3CSUEXm)
+# Help

-## License
+Help is underway! ... and can be found [here](https://cpvalente.gitbook.io/ontime/)
+
+# License

 This project is licensed under the terms of the GNU GPL v3
-
-## Sponsor
-
-You can help the development of this project or say thank you with a one time donation. \
-See [the terms of donations](https://github.com/cpvalente/ontime/blob/master/.github/FUNDING.md).
-
-<p align="center">
-<br>
-<a href="https://www.buymeacoffee.com/cpvalente" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" width="200"></a>
-</p>
@@ -1,19 +0,0 @@
-# Terms of sponsorship
-Ontime does not exist as a fiscal entity. The sponsorship recipient is the project owner. In this light, contributors are funding the project owner's capacity to work on the project, not the project itself. As a contribution recipient, the code owner reserves the right to redistribute.
-
-## Why sponsor
-Ontime is and will remain free, regardless of your decision to contribute.
-Regardless, you may choose to provide a monetary contribution:
-
-### Improve user experience
-Certain parts of the application user experience are tied to our capacity to pay for services. App signing and Google Sheets integration are good examples of this.
-
-### Cool stuff
-We may choose not to implement some features. This could be related to the complexity required, to the skill set, or to the fact that we just feel it doesn't improve the app for a significant percentage of users. In those cases, a feature may be considered "not worth it," regardless of its pertinence.
-
-As a user, you can choose to sponsor a particular feature or donate to the app so that we can create bounties for features.
-
-### Priorities
-Monetary contributions are most immediately needed to offset the costs of presenting and distributing Ontime, i.e., hosting, domains, and certificates.
-
-Additional funding will be considered according to the needs at the time.
@@ -1,16 +0,0 @@
-{
-  "parserOptions": {
-    "sourceType": "module"
-  },
-  "env": {
-    "browser": true,
-    "node": true
-  },
-  "extends": [
-    "eslint:recommended"
-  ],
-  "plugins": [],
-  "rules": {
-    "@typescript-eslint/no-var-requires": "off"
-  }
-}
@@ -1,3 +0,0 @@
-server
-external
-client
@@ -1,9 +0,0 @@
-{
-  "endOfLine": "lf",
-  "trailingComma": "all",
-  "tabWidth": 2,
-  "semi": true,
-  "singleQuote": true,
-  "jsxSingleQuote": true,
-  "printWidth": 120
-}
@@ -1,44 +0,0 @@
-# Ontime CLI
-
-![Ontime](https://github.com/cpvalente/ontime/blob/9e63261b350e5b7b61c7ffb17c9e75a6c5a8c711/.github/aux-images/editor.png)
-> Ontime is an application for managing rundown and event timers.
-
-Congratulations! You got this far into Ontime's rabbit hole and want to manage your installation.
-
-The CLI tool is a fast and lightweight way of installing Ontime and is perfect for self-hosting and headless installs.
-
-## Getting started
-
-### Prerequisites
-You will need to have installed the correct version of node.js
-Please check [the app engines declaration](https://github.com/cpvalente/ontime/blob/master/package.json) for the correct version.
-
-### Running Ontime
-To get Ontime running, all you need to do is install it in your system using your package manager of choice:
-
-Install globally in your system 
-```bash
-npm install -g @getontime/cli
-```
-
-... and run using the installed script
-```bash
-ontime
-```
-
-Or install and run ontime (the installation here is temporary for the duration of the session)
-```bash
-npx install @getontime/cli
-```
-
-## Links
- [Ontime's repository](https://github.com/cpvalente/ontime)
- [Ontime's documentation](https://docs.getontime.no/)
- [Ontime's website](https://getontime.no/)
-
-## Sponsoring
-You can help the development of this project or say thank you with a one time donation. \
-See the [terms of donations](https://github.com/cpvalente/ontime/blob/master/SPONSOR.md)
-
-[![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/cpvalente)
-[![](https://img.shields.io/static/v1?label=Buy%20me%20a%20coffee&message=%E2%9D%A4&logo=buymeacoffee&color=%23fe8e86)](https://www.buymeacoffee.com/cpvalente)
@@ -1,20 +0,0 @@
-#!/usr/bin/env node
-
-// NOTE: for now the following needs to be in place: ./server/index.cjs, ./client, ./external
-
-const ontimeServer = require('./server/index.cjs');
-const { initAssets, startServer, startIntegrations, shutdown } = ontimeServer;
-
-async function startOntime() {
-  await initAssets();
-
-  await startServer();
-
-  await startIntegrations();
-}
-
-startOntime();
-
-process.on(['SIGHUP', 'SIGINT', 'SIGTERM'], () => {
-  shutdown();
-});
@@ -1,27 +0,0 @@
-{
-    "name": "@getontime/cli",
-    "version": "3.16.1",
-    "author": "Carlos Valente",
-    "description": "Time keeping for live events",
-    "repository": "https://github.com/cpvalente/ontime",
-    "keywords": [
-        "lighdev",
-        "ontime",
-        "timer"
-    ],
-    "license": "AGPL-3.0-only",
-    "main": "main.js",
-    "bin": {
-        "ontime": "main.js"
-    },
-    "files": [
-        "client",
-        "external",
-        "server"
-    ],
-    "devDependencies": {
-        "eslint": "catalog:",
-        "eslint-config-prettier": "catalog:",
-        "prettier": "catalog:"
-    }
-}
@@ -8,17 +8,33 @@
    "browser": true,
    "node": true
  },
+  "parser": "@typescript-eslint/parser",
  "extends": [
+    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
-    "plugin:@tanstack/eslint-plugin-query/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "eslint-config-prettier",
+    "plugin:@tanstack/eslint-plugin-query/recommended",
+    "prettier"
  ],
  "plugins": [
    "react",
+    "testing-library",
    "simple-import-sort",
-    "@tanstack/query"
+    "@tanstack/query",
+    "@typescript-eslint",
+    "prettier"
  ],
  "rules": {
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ],
+    "no-useless-concat": "warn",
+    "prefer-template": "warn",
    "react/jsx-no-bind": [
      "error",
      {
@@ -1,5 +1,4 @@
 {
-  "endOfLine": "lf",
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "stylelint-config-standard-scss",
+    "stylelint-config-prettier"
+  ]
+}
@@ -1,28 +1,37 @@
 <!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <base href="/" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#101010" />
-    <meta name="ontime" content="ontime - time keeping for live events" />
-    <link rel="apple-touch-icon" href="/ontime-logo.png" />
-    <link rel="icon" type="image/png" href="/ontime-logo.png" />
-    <link rel="manifest" href="/site.webmanifest" />
-    <link rel="manifest" href="/manifest.json" />
-    <meta name="robots" content="noindex" />
-    <title>ontime</title>
-    <style>
-      body,
-      html {
-        background-color: rgba(0, 0, 0, 0) !important;
-      }
-    </style>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <script type="module" src="/src/index.tsx"></script>
-  </body>
+<html lang='en'>
+<head>
+  <meta charset='utf-8' />
+  <link rel='icon' href='/favicon.ico' />
+  <meta name='viewport' content='width=device-width, initial-scale=1' />
+  <meta name='theme-color' content='#121212' />
+  <meta name='ontime' content='ontime - event timer manager' />
+  <link rel='apple-touch-icon' href='/logo192.png' />
+  <link
+    rel='icon'
+    type='image/png'
+    sizes='32x32'
+    href='/favicon-32x32.png'
+  />
+  <link
+    rel='icon'
+    type='image/png'
+    sizes='16x16'
+    href='/favicon-16x16.png'
+  />
+  <link rel='manifest' href='/site.webmanifest' />
+  <link rel='manifest' href='/manifest.json' />
+  <title>ontime</title>
+  <style>
+    body,
+    html {
+      background-color: rgba(0, 0, 0, 0) !important;
+    }
+  </style>
+</head>
+<body>
+<noscript>You need to enable JavaScript to run this app.</noscript>
+<div id='root'></div>
+<script type='module' src='/src/index.tsx'></script>
+</body>
 </html>
@@ -1,40 +1,35 @@
 {
  "name": "ontime-ui",
-  "version": "3.16.1",
+  "version": "2.0.0-beta2",
  "private": true,
-  "type": "module",
  "dependencies": {
-    "@chakra-ui/react": "^2.7.0",
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/sortable": "^8.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@emotion/is-prop-valid": "^1.3.1",
+    "@chakra-ui/react": "^2.5.5",
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/utilities": "^3.2.1",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
-    "@fontsource/open-sans": "^5.0.28",
-    "@mantine/hooks": "^7.13.3",
-    "@sentry/react": "^8.43.0",
-    "@table-nav/react": "^0.0.7",
-    "@tanstack/react-query": "^5.62.7",
-    "@tanstack/react-query-devtools": "^5.62.7",
-    "@tanstack/react-table": "^8.21.3",
-    "autosize": "^6.0.1",
+    "@react-icons/all-files": "^4.1.0",
+    "@sentry/react": "^7.46.0",
+    "@sentry/tracing": "^7.46.0",
+    "@tanstack/react-query": "^4.28.0",
+    "@tanstack/react-query-devtools": "^4.29.0",
+    "autosize": "^5.0.2",
    "axios": "^1.2.0",
    "color": "^4.2.3",
-    "csv-stringify": "^6.4.5",
+    "csv-stringify": "^6.2.3",
+    "deepmerge": "^4.3.0",
    "framer-motion": "^10.10.0",
-    "prismjs": "^1.29.0",
-    "react": "^18.3.1",
-    "react-colorful": "^5.6.1",
-    "react-dom": "^18.3.1",
-    "react-fast-compare": "^3.2.2",
-    "react-hook-form": "^7.53.1",
-    "react-icons": "5.4.0",
-    "react-qr-code": "^2.0.12",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-fast-compare": "^3.2.0",
+    "react-hook-form": "^7.43.5",
+    "react-qr-code": "^2.0.11",
    "react-router-dom": "^6.3.0",
-    "react-simple-code-editor": "^0.14.1",
+    "react-table": "^7.7.0",
+    "typeface-open-sans": "^1.1.13",
    "web-vitals": "^3.1.1",
-    "zustand": "^5.0.3"
+    "zustand": "^4.3.6"
  },
  "scripts": {
    "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",
@@ -42,14 +37,12 @@
    "dev": "cross-env BROWSER=none vite",
    "build": "vite build",
    "build:local": "cross-env NODE_ENV=local vite build",
-    "build:electron": "cross-env NODE_ENV=local vite build",
-    "build:docker": "cross-env VITE_IS_DOCKER=true vite build",
-    "build:localdocker": "cross-env NODE_ENV=local vite build",
-    "lint": "eslint . --quiet",
+    "build:docker": "vite build",
+    "lint": "eslint .",
+    "stylelint": "npx stylelint \"**/*.scss\"\n",
    "test": "vitest",
    "test:pipeline": "vitest run",
-    "cleanup": "rm -rf .turbo && rm -rf node_modules && rm -rf build",
-    "analyse": "npx vite-bundle-visualizer"
+    "cleanup": "rm -rf .turbo && rm -rf node_modules && rm -rf build"
  },
  "browserslist": {
    "production": [
@@ -64,32 +57,41 @@
    ]
  },
  "devDependencies": {
-    "@sentry/vite-plugin": "^2.16.1",
-    "@tanstack/eslint-plugin-query": "^5.8.4",
+    "@sentry/vite-plugin": "^0.4.0",
+    "@tanstack/eslint-plugin-query": "^4.26.2",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.1.1",
+    "@testing-library/user-event": "^14.1.1",
    "@types/color": "^3.0.3",
-    "@types/prismjs": "^1.26.5",
+    "@types/luxon": "^3.2.0",
+    "@types/prop-types": "^15.7.5",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
-    "@typescript-eslint/eslint-plugin": "catalog:",
-    "@typescript-eslint/parser": "catalog:",
-    "@vitejs/plugin-react": "4.5.1",
-    "eslint": "catalog:",
-    "eslint-config-prettier": "catalog:",
-    "eslint-plugin-jest": "^28.6.0",
-    "eslint-plugin-prettier": "catalog:",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "@typescript-eslint/eslint-plugin": "^5.48.1",
+    "@typescript-eslint/parser": "^5.48.1",
+    "@vitejs/plugin-react": "^3.0.1",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-jest": "^27.1.7",
+    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-simple-import-sort": "^8.0.0",
-    "happy-dom": "^16.7.2",
+    "eslint-plugin-testing-library": "^5.9.1",
+    "jsdom": "^21.1.0",
    "ontime-types": "workspace:*",
    "ontime-utils": "workspace:*",
-    "prettier": "catalog:",
+    "prettier": "^2.8.3",
+    "prop-types": "^15.8.1",
    "sass": "^1.57.1",
-    "typescript": "catalog:",
-    "vite": "6.3.1",
-    "vite-plugin-compression2": "1.4.0",
-    "vite-plugin-svgr": "4.3.0",
-    "vite-tsconfig-paths": "5.1.4",
-    "vitest": "catalog:"
+    "stylelint": "^14.16.1",
+    "stylelint-config-prettier": "^9.0.4",
+    "stylelint-config-standard-scss": "^6.1.0",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.4",
+    "vite-plugin-svgr": "^2.4.0",
+    "vite-tsconfig-paths": "^4.0.3",
+    "vitest": "^0.29.8"
  }
 }
@@ -4,11 +4,18 @@
  "icons": [
    {
      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
-      "src": "ontime-logo.png",
-      "type": "image/png"
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
    }
  ],
  "scope": "/",
@@ -1,10 +1 @@
-{
-  "name": "",
-  "short_name": "",
-  "icons": [
-    { "src": "/ontime-logo.png", "sizes": "295x295", "type": "image/png" }
-  ],
-  "theme_color": "#2B5ABC",
-  "background_color": "#101010",
-  "display": "standalone"
-}
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
@@ -1,38 +1,65 @@
+import { Suspense, useEffect } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { ChakraProvider } from '@chakra-ui/react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

 import ErrorBoundary from './common/components/error-boundary/ErrorBoundary';
-import IdentifyOverlay from './common/components/identify-overlay/IdentifyOverlay';
 import { AppContextProvider } from './common/context/AppContext';
+import useElectronEvent from './common/hooks/useElectronEvent';
 import { ontimeQueryClient } from './common/queryClient';
 import { connectSocket } from './common/utils/socket';
 import theme from './theme/theme';
 import { TranslationProvider } from './translation/TranslationProvider';
 import AppRouter from './AppRouter';
-import { baseURI } from './externals';
+
+// Load Open Sans typeface
+// @ts-expect-error no types from font import
+import('typeface-open-sans');

 connectSocket();

 function App() {
+  const { isElectron, sendToElectron } = useElectronEvent();
+
+  const handleKeyPress = (event: KeyboardEvent) => {
+    // handle held key
+    if (event.repeat) return;
+    // check if the alt key is pressed
+    if (event.altKey) {
+      if (event.code === 'KeyT') {
+        // ask to see debug
+        sendToElectron('set-window', 'show-dev');
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (isElectron) {
+      document.addEventListener('keydown', handleKeyPress);
+    }
+    return () => {
+      if (isElectron) {
+        document.removeEventListener('keydown', handleKeyPress);
+      }
+    };
+  }, []);
+
  return (
-    <ChakraProvider disableGlobalStyle resetCSS theme={theme}>
+    <ChakraProvider resetCSS theme={theme}>
      <QueryClientProvider client={ontimeQueryClient}>
        <AppContextProvider>
-          <BrowserRouter basename={baseURI}>
+          <BrowserRouter>
            <div className='App'>
              <ErrorBoundary>
-                <TranslationProvider>
-                  <IdentifyOverlay />
-                  <AppRouter />
-                </TranslationProvider>
+                <Suspense fallback={null}>
+                  <TranslationProvider>
+                    <AppRouter />
+                  </TranslationProvider>
+                </Suspense>
              </ErrorBoundary>
              <ReactQueryDevtools initialIsOpen={false} />
            </div>
-            <ErrorBoundary>
-              <div id='identify-portal' />
-            </ErrorBoundary>
          </BrowserRouter>
        </AppContextProvider>
      </QueryClientProvider>
@@ -1,208 +1,131 @@
-import React from 'react';
-import {
-  createRoutesFromChildren,
-  matchRoutes,
-  Navigate,
-  Route,
-  Routes,
-  useLocation,
-  useNavigationType,
-} from 'react-router-dom';
-import * as Sentry from '@sentry/react';
+import { lazy, useEffect } from 'react';
+import { Navigate, Route, Routes, useLocation, useNavigate, useSearchParams } from 'react-router-dom';

-import { useClientPath } from './common/hooks/useClientPath';
-import Log from './features/log/Log';
-import withPreset from './features/PresetWrapper';
+import useAliases from './common/hooks-query/useAliases';
 import withData from './features/viewers/ViewWrapper';
-import ViewLoader from './views/ViewLoader';
-import { ONTIME_VERSION } from './ONTIME_VERSION';
-import { sentryDsn, sentryRecommendedIgnore } from './sentry.config';
+import { useTranslation } from './translation/TranslationProvider';

-const Editor = React.lazy(() => import('./features/editors/ProtectedEditor'));
-const Cuesheet = React.lazy(() => import('./views/cuesheet/ProtectedCuesheet'));
-const Operator = React.lazy(() => import('./features/operator/OperatorExport'));
+const Editor = lazy(() => import('./features/editors/ProtectedEditor'));
+const Table = lazy(() => import('./features/table/ProtectedTable'));

-const TimerView = React.lazy(() => import('./views/timer/Timer'));
-const MinimalTimerView = React.lazy(() => import('./features/viewers/minimal-timer/MinimalTimer'));
-const ClockView = React.lazy(() => import('./features/viewers/clock/Clock'));
-const Countdown = React.lazy(() => import('./features/viewers/countdown/Countdown'));
+const TimerView = lazy(() => import('./features/viewers/timer/Timer'));
+const MinimalTimerView = lazy(() => import('./features/viewers/minimal-timer/MinimalTimer'));
+const ClockView = lazy(() => import('./features/viewers/clock/Clock'));
+const Countdown = lazy(() => import('./features/viewers/countdown/Countdown'));

-const Backstage = React.lazy(() => import('./views/backstage/Backstage'));
-const Timeline = React.lazy(() => import('./views/timeline/TimelinePage'));
-const Public = React.lazy(() => import('./views/public/Public'));
-const Lower = React.lazy(() => import('./features/viewers/lower-thirds/LowerThird'));
-const StudioClock = React.lazy(() => import('./features/viewers/studio/StudioClock'));
-const ProjectInfo = React.lazy(() => import('./views/project-info/ProjectInfo'));
+const Backstage = lazy(() => import('./features/viewers/backstage/Backstage'));
+const Public = lazy(() => import('./features/viewers/public/Public'));
+const Lower = lazy(() => import('./features/viewers/lower-thirds/LowerWrapper'));
+const StudioClock = lazy(() => import('./features/viewers/studio/StudioClock'));

-const STimer = withPreset(withData(TimerView));
-const SMinimalTimer = withPreset(withData(MinimalTimerView));
-const SClock = withPreset(withData(ClockView));
-const SCountdown = withPreset(withData(Countdown));
-const SBackstage = withPreset(withData(Backstage));
-const SProjectInfo = withPreset(withData(ProjectInfo));
-const SPublic = withPreset(withData(Public));
-const SLowerThird = withPreset(withData(Lower));
-const SStudio = withPreset(withData(StudioClock));
-const STimeline = withPreset(withData(Timeline));
-const PCuesheet = withPreset(Cuesheet);
-const POperator = withPreset(Operator);
+const STimer = withData(TimerView);
+const SMinimalTimer = withData(MinimalTimerView);
+const SClock = withData(ClockView);
+const SCountdown = withData(Countdown);
+const SBackstage = withData(Backstage);
+const SPublic = withData(Public);
+const SLowerThird = withData(Lower);
+const SStudio = withData(StudioClock);

-const EditorFeatureWrapper = React.lazy(() => import('./features/EditorFeatureWrapper'));
-const RundownPanel = React.lazy(() => import('./features/rundown/RundownExport'));
-const TimerControl = React.lazy(() => import('./features/control/playback/TimerControlExport'));
-const MessageControl = React.lazy(() => import('./features/control/message/MessageControlExport'));
-
-Sentry.init({
-  dsn: sentryDsn,
-  integrations: [
-    Sentry.reactRouterV6BrowserTracingIntegration({
-      useEffect: React.useEffect,
-      useLocation,
-      useNavigationType,
-      createRoutesFromChildren,
-      matchRoutes,
-    }),
-  ],
-  tracesSampleRate: 0.3,
-  release: ONTIME_VERSION,
-  enabled: import.meta.env.PROD,
-  ignoreErrors: [...sentryRecommendedIgnore, /Unable to preload CSS/i, /dynamically imported module/i],
-  denyUrls: [/extensions\//i, /^chrome:\/\//i, /^chrome-extension:\/\//i],
-});
-
-const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);
+const FeatureWrapper = lazy(() => import('./features/FeatureWrapper'));
+const RundownPanel = lazy(() => import('./features/rundown/RundownExport'));
+const TimerControl = lazy(() => import('./features/control/playback/TimerControlExport'));
+const MessageControl = lazy(() => import('./features/control/message/MessageControlExport'));
+const Info = lazy(() => import('./features/info/InfoExport'));

 export default function AppRouter() {
-  // handle client path changes
-  useClientPath();
+  const { data } = useAliases();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { setLanguage } = useTranslation();
+
+  // Set output language
+  useEffect(() => {
+    const langParam = searchParams.get('lang');
+    if (langParam && langParam.length === 2) {
+      setLanguage(searchParams.get('lang'));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchParams]);
+
+  // navigate if is alias route
+  useEffect(() => {
+    if (!data) return;
+
+    for (const d of data) {
+      if (`/${d.alias}` === location.pathname && d.enabled) {
+        navigate(`/${d.pathAndParams}`);
+        break;
+      }
+    }
+  }, [data, location, navigate]);

  return (
-    <React.Suspense fallback={null}>
-      <SentryRoutes>
-        <Route path='/' element={<Navigate to='/timer' />} />
-        <Route
-          path='/timer'
-          element={
-            <ViewLoader>
-              <STimer />
-            </ViewLoader>
-          }
-        />
-        <Route
-          path='/public'
-          element={
-            <ViewLoader>
-              <SPublic />
-            </ViewLoader>
-          }
-        />
-        <Route
-          path='/minimal'
-          element={
-            <ViewLoader>
-              <SMinimalTimer />
-            </ViewLoader>
-          }
-        />
-        <Route
-          path='/clock'
-          element={
-            <ViewLoader>
-              <SClock />
-            </ViewLoader>
-          }
-        />
-        <Route
-          path='/countdown'
-          element={
-            <ViewLoader>
-              <SCountdown />
-            </ViewLoader>
-          }
-        />
-        <Route
-          path='/backstage'
-          element={
-            <ViewLoader>
-              <SBackstage />
-            </ViewLoader>
-          }
-        />
-        <Route
-          path='/studio'
-          element={
-            <ViewLoader>
-              <SStudio />
-            </ViewLoader>
-          }
-        />
-        {/*/!* Lower third cannot have a loading screen *!/*/}
-        <Route path='/lower' element={<SLowerThird />} />
-        <Route
-          path='/timeline'
-          element={
-            <ViewLoader>
-              <STimeline />
-            </ViewLoader>
-          }
-        />
-        <Route
-          path='/info'
-          element={
-            <ViewLoader>
-              <SProjectInfo />
-            </ViewLoader>
-          }
-        />
+    <Routes>
+      <Route path='/' element={<Navigate to='/timer' />} />
+      <Route path='/speaker' element={<STimer />} />
+      <Route path='/presenter' element={<STimer />} />
+      <Route path='/stage' element={<STimer />} />
+      <Route path='/timer' element={<STimer />} />

-        {/*/!* Protected Routes *!/*/}
-        <Route path='/editor' element={<Editor />} />
-        <Route path='/cuesheet' element={<PCuesheet />} />
-        <Route
-          path='/op'
-          element={
-            <ViewLoader>
-              <POperator />
-            </ViewLoader>
-          }
-        />
+      <Route path='/minimal' element={<SMinimalTimer />} />
+      <Route path='/minimalTimer' element={<SMinimalTimer />} />
+      <Route path='/simpleTimer' element={<SMinimalTimer />} />

-        {/*/!* Protected Routes - Elements *!/*/}
-        <Route
-          path='/rundown'
-          element={
-            <EditorFeatureWrapper>
-              <RundownPanel />
-            </EditorFeatureWrapper>
-          }
-        />
-        <Route
-          path='/timercontrol'
-          element={
-            <EditorFeatureWrapper>
-              <TimerControl />
-            </EditorFeatureWrapper>
-          }
-        />
-        <Route
-          path='/messagecontrol'
-          element={
-            <EditorFeatureWrapper>
-              <MessageControl />
-            </EditorFeatureWrapper>
-          }
-        />
-        <Route
-          path='/log'
-          element={
-            <EditorFeatureWrapper>
-              <Log />
-            </EditorFeatureWrapper>
-          }
-        />
-        {/*/!* Send to default if nothing found *!/*/}
-        <Route path='*' element={<STimer />} />
-      </SentryRoutes>
-    </React.Suspense>
+      <Route path='/clock' element={<SClock />} />
+
+      <Route path='/countdown' element={<SCountdown />} />
+
+      <Route path='/sm' element={<SBackstage />} />
+      <Route path='/backstage' element={<SBackstage />} />
+
+      <Route path='/public' element={<SPublic />} />
+      <Route path='/studio' element={<SStudio />} />
+      {/*/!* Lower cannot have fallback *!/*/}
+      <Route path='/lower' element={<SLowerThird />} />
+
+      {/*/!* Protected Routes *!/*/}
+      <Route path='/editor' element={<Editor />} />
+      <Route path='/cuesheet' element={<Table />} />
+      <Route path='/cuelist' element={<Table />} />
+      <Route path='/table' element={<Table />} />
+
+      {/*/!* Protected Routes - Elements *!/*/}
+      <Route
+        path='/rundown'
+        element={
+          <FeatureWrapper>
+            <RundownPanel />
+          </FeatureWrapper>
+        }
+      />
+      <Route
+        path='/timercontrol'
+        element={
+          <FeatureWrapper>
+            <TimerControl />
+          </FeatureWrapper>
+        }
+      />
+      <Route
+        path='/messagecontrol'
+        element={
+          <FeatureWrapper>
+            <MessageControl />
+          </FeatureWrapper>
+        }
+      />
+      <Route
+        path='/info'
+        element={
+          <FeatureWrapper>
+            <Info />
+          </FeatureWrapper>
+        }
+      />
+      {/*/!* Send to default if nothing found *!/*/}
+      <Route path='*' element={<STimer />} />
+    </Routes>
  );
 }
@@ -0,0 +1,9 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClientMock = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
@@ -0,0 +1,22 @@
+// Exported viewer link location
+const minimalLocation = 'minimal';
+const speakerLocation = 'speaker';
+const smLocation = 'sm';
+const publicLocation = 'public';
+const studioLocation = 'studio';
+const cuesheetLocation = 'cuesheet';
+const countdownLocation = 'countdown';
+const clockLocation = 'clock';
+const lowerLocation = 'lower';
+
+export const viewerLocations = [
+  { link: speakerLocation, label: 'Stage timer' },
+  { link: clockLocation, label: 'Clock' },
+  { link: minimalLocation, label: 'Minimal timer' },
+  { link: smLocation, label: 'Backstage screen' },
+  { link: publicLocation, label: 'Public screen' },
+  { link: lowerLocation, label: 'Lower thirds' },
+  { link: studioLocation, label: 'Studio clock' },
+  { link: countdownLocation, label: 'Countdown' },
+  { link: cuesheetLocation, label: 'Cuesheet' },
+];
@@ -1,21 +0,0 @@
-<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="256" height="256" rx="24" fill="#222222"/>
-<path d="M40.5 131.781V128.193C40.5 114.635 42.4369 102.159 46.3106 90.7659C50.1843 79.2587 55.8239 69.2896 63.2295 60.8586C70.6351 52.4277 79.7497 45.8765 90.5733 41.2053C101.397 36.4202 113.815 34.0276 127.829 34.0276C141.843 34.0276 154.318 36.4202 165.256 41.2053C176.193 45.8765 185.365 52.4277 192.771 60.8586C200.29 69.2896 205.987 79.2587 209.86 90.7659C213.734 102.159 215.671 114.635 215.671 128.193V131.781C215.671 145.226 213.734 157.701 209.86 169.208C205.987 180.601 200.29 190.571 192.771 199.115C185.365 207.546 176.25 214.098 165.427 218.769C154.603 223.44 142.185 225.776 128.171 225.776C114.157 225.776 101.682 223.44 90.7442 218.769C79.9206 214.098 70.7491 207.546 63.2295 199.115C55.8239 190.571 50.1843 180.601 46.3106 169.208C42.4369 157.701 40.5 145.226 40.5 131.781ZM89.7188 128.193V131.781C89.7188 139.529 90.4024 146.764 91.7696 153.486C93.1368 160.208 95.3015 166.132 98.2637 171.259C101.34 176.272 105.328 180.203 110.227 183.051C115.126 185.899 121.107 187.323 128.171 187.323C135.007 187.323 140.874 185.899 145.773 183.051C150.673 180.203 154.603 176.272 157.565 171.259C160.528 166.132 162.692 160.208 164.06 153.486C165.541 146.764 166.281 139.529 166.281 131.781V128.193C166.281 120.673 165.541 113.609 164.06 107.001C162.692 100.279 160.471 94.3547 157.395 89.2278C154.432 83.9869 150.502 79.8853 145.603 76.9231C140.703 73.9609 134.779 72.4797 127.829 72.4797C120.879 72.4797 114.955 73.9609 110.056 76.9231C105.271 79.8853 101.34 83.9869 98.2637 89.2278C95.3015 94.3547 93.1368 100.279 91.7696 107.001C90.4024 113.609 89.7188 120.673 89.7188 128.193Z" fill="#FFFFFA"/>
-<mask id="mask0_30_31" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="40" y="34" width="176" height="192">
-<path d="M40.5 131.781V128.193C40.5 114.635 42.4369 102.159 46.3106 90.7659C50.1843 79.2587 55.8239 69.2896 63.2295 60.8586C70.6351 52.4277 79.7497 45.8765 90.5733 41.2053C101.397 36.4202 113.815 34.0276 127.829 34.0276C141.843 34.0276 154.318 36.4202 165.256 41.2053C176.193 45.8765 185.365 52.4277 192.771 60.8586C200.29 69.2896 205.987 79.2587 209.86 90.7659C213.734 102.159 215.671 114.635 215.671 128.193V131.781C215.671 145.226 213.734 157.701 209.86 169.208C205.987 180.601 200.29 190.571 192.771 199.115C185.365 207.546 176.25 214.098 165.427 218.769C154.603 223.44 142.185 225.776 128.171 225.776C114.157 225.776 101.682 223.44 90.7442 218.769C79.9206 214.098 70.7491 207.546 63.2295 199.115C55.8239 190.571 50.1843 180.601 46.3106 169.208C42.4369 157.701 40.5 145.226 40.5 131.781ZM89.7188 128.193V131.781C89.7188 139.529 90.4024 146.764 91.7696 153.486C93.1368 160.208 95.3015 166.132 98.2637 171.259C101.34 176.272 105.328 180.203 110.227 183.051C115.126 185.899 121.107 187.323 128.171 187.323C135.007 187.323 140.874 185.899 145.773 183.051C150.673 180.203 154.603 176.272 157.565 171.259C160.528 166.132 162.692 160.208 164.06 153.486C165.541 146.764 166.281 139.529 166.281 131.781V128.193C166.281 120.673 165.541 113.609 164.06 107.001C162.692 100.279 160.471 94.3547 157.395 89.2278C154.432 83.9869 150.502 79.8853 145.603 76.9231C140.703 73.9609 134.779 72.4797 127.829 72.4797C120.879 72.4797 114.955 73.9609 110.056 76.9231C105.271 79.8853 101.34 83.9869 98.2637 89.2278C95.3015 94.3547 93.1368 100.279 91.7696 107.001C90.4024 113.609 89.7188 120.673 89.7188 128.193Z" fill="white"/>
-</mask>
-<g mask="url(#mask0_30_31)">
-<path d="M17.7519 90.6278C32.2336 84.5548 31.0535 58.0568 38.3066 62.5986C47.3731 68.2758 38.3066 41.1095 50.9198 47.1825C71.1339 56.9152 40.7009 64.5389 62.3666 76.9778C84.0323 89.4167 171.756 99.642 202.839 160.802C214.766 184.27 220.843 191.199 223.166 192.958C224.57 192.837 224.823 194.214 223.166 192.958C222.812 192.989 222.385 193.115 221.898 193.401C216.763 196.422 122.406 273.336 83.6205 225.168C44.8346 177 2.09417 132.401 13.321 120.526C22.3025 111.025 14.6184 97.1566 17.7519 90.6278Z" fill="url(#paint0_linear_30_31)"/>
-<path d="M39.2409 66.8029C31.9877 62.2612 38.8572 79.7789 16.8175 87.8247C13.684 94.3536 21.1274 106.353 12.1459 115.854C0.919109 127.73 47.1703 180.27 85.9563 228.438C124.742 276.606 200.88 205.765 206.015 202.745C211.149 199.724 219.133 212.629 196.599 168.158C165.523 106.828 78.8569 98.1563 57.3454 76.3867C38.7095 57.5272 88.9205 36.7794 67.2701 41.1095C39.2409 46.7153 48.3073 72.4802 39.2409 66.8029Z" fill="url(#paint1_linear_30_31)"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_30_31" x1="87.4684" y1="-29.7758" x2="62.9476" y2="328.852" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FF0000" stop-opacity="0.74"/>
-<stop offset="1" stop-color="#FF0000" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint1_linear_30_31" x1="82.3228" y1="-32.8735" x2="57.802" y2="325.754" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FF005C" stop-opacity="0.74"/>
-<stop offset="1" stop-color="#FF005C" stop-opacity="0"/>
-</linearGradient>
-</defs>
-</svg>
@@ -0,0 +1,32 @@
+export const STATIC_PORT = 4001;
+
+// REST stuff
+export const EVENTDATA_TABLE = ['eventdata'];
+export const ALIASES = ['aliases'];
+export const USERFIELDS = ['userFields'];
+export const RUNDOWN_TABLE_KEY = 'rundown';
+export const RUNDOWN_TABLE = [RUNDOWN_TABLE_KEY];
+export const APP_INFO = ['appinfo'];
+export const OSC_SETTINGS = ['oscSettings'];
+export const APP_SETTINGS = ['appSettings'];
+export const VIEW_SETTINGS = ['viewSettings'];
+export const RUNTIME = ['runtimeStore'];
+
+// external stuff
+export const githubURL = 'https://api.github.com/repos/cpvalente/ontime/releases/latest';
+
+/**
+ * @description finds server path given the current location, it
+ * @return {*}
+ */
+export const calculateServer = () => (import.meta.env.DEV ? `http://localhost:${window.location.port}` : window.location.origin);
+
+export const serverURL = calculateServer();
+export const websocketUrl = `ws://${window.location.hostname}:${window.location.port}/ws`;
+
+export const eventURL = `${serverURL}/eventdata`;
+export const rundownURL = `${serverURL}/events`;
+export const ontimeURL = `${serverURL}/ontime`;
+
+export const stylesPath = 'external/styles/override.css';
+export const overrideStylesURL = `${serverURL}/${stylesPath}`;
@@ -1,30 +0,0 @@
-import axios from 'axios';
-
-import { apiEntryUrl } from './constants';
-
-const assetsPath = `${apiEntryUrl}/assets`;
-
-/**
- * HTTP request to get css contents
- */
-export async function getCSSContents(): Promise<string> {
-  const res = await axios.get(`${assetsPath}/css`);
-  return res.data;
-}
-
-/**
- * HTTP request to post css contents
- */
-export async function postCSSContents(css: string): Promise<void> {
-  await axios.post(`${assetsPath}/css`, {
-    css,
-  });
-}
-
-/**
- * HTTP request to restore default css
- */
-export async function restoreCSSContents(): Promise<string> {
-  const res = await axios.post(`${assetsPath}/css/restore`);
-  return res.data;
-}
@@ -1,85 +0,0 @@
-import axios from 'axios';
-import type {
-  Automation,
-  AutomationDTO,
-  AutomationOutput,
-  AutomationSettings,
-  Trigger,
-  TriggerDTO,
-} from 'ontime-types';
-
-import { apiEntryUrl } from './constants';
-
-const automationsPath = `${apiEntryUrl}/automations`;
-
-/**
- * HTTP request to get the automations settings
- */
-export async function getAutomationSettings(): Promise<AutomationSettings> {
-  const res = await axios.get(automationsPath);
-  return res.data;
-}
-
-/**
- * HTTP request to edit the automations settings
- */
-export async function editAutomationSettings(
-  automationSettings: Partial<AutomationSettings>,
-): Promise<AutomationSettings> {
-  const res = await axios.post(automationsPath, automationSettings);
-  return res.data;
-}
-
-/**
- * HTTP request to create a new automation trigger
- */
-export async function addTrigger(trigger: TriggerDTO): Promise<Trigger> {
-  const res = await axios.post(`${automationsPath}/trigger`, trigger);
-  return res.data;
-}
-
-/**
- * HTTP request to update an automation trigger
- */
-export async function editTrigger(id: string, trigger: Trigger): Promise<Trigger> {
-  const res = await axios.put(`${automationsPath}/trigger/${id}`, trigger);
-  return res.data;
-}
-
-/**
- * HTTP request to delete an automation trigger
- */
-export function deleteTrigger(id: string): Promise<void> {
-  return axios.delete(`${automationsPath}/trigger/${id}`);
-}
-
-/**
- * HTTP request to create a new automation
- */
-export async function addAutomation(automation: AutomationDTO): Promise<Automation> {
-  const res = await axios.post(`${automationsPath}/automation`, automation);
-  return res.data;
-}
-
-/**
- * HTTP request to update a automation
- */
-export async function editAutomation(id: string, automation: Automation): Promise<Automation> {
-  const res = await axios.put(`${automationsPath}/automation/${id}`, automation);
-  return res.data;
-}
-
-/**
- * HTTP request to delete a automation
- */
-export function deleteAutomation(id: string): Promise<void> {
-  return axios.delete(`${automationsPath}/automation/${id}`);
-}
-
-/**
- * HTTP request to test automation output
- * The return is irrelevant as we care for the resolution of the promise
- */
-export function testOutput(output: AutomationOutput): Promise<void> {
-  return axios.post(`${automationsPath}/test`, output);
-}
@@ -1,29 +0,0 @@
-import { serverURL } from '../../externals';
-
-// keys in tanstack store
-export const APP_INFO = ['appinfo'];
-export const APP_SETTINGS = ['appSettings'];
-export const APP_VERSION = ['appVersion'];
-export const AUTOMATION = ['automation'];
-export const CUSTOM_FIELDS = ['customFields'];
-export const PROJECT_DATA = ['project'];
-export const PROJECT_LIST = ['projectList'];
-export const RUNDOWN = ['rundown'];
-export const RUNTIME = ['runtimeStore'];
-export const SHEET_STATE = ['sheetState'];
-export const URL_PRESETS = ['urlpresets'];
-export const VIEW_SETTINGS = ['viewSettings'];
-export const CLIENT_LIST = ['clientList'];
-export const REPORT = ['report'];
-
-// API URLs
-export const apiEntryUrl = `${serverURL}/data`;
-
-export const projectDataURL = `${serverURL}/project`;
-export const rundownURL = `${serverURL}/events`;
-export const ontimeURL = `${serverURL}/ontime`;
-
-export const userAssetsPath = 'user';
-export const cssOverridePath = 'styles/override.css';
-export const overrideStylesURL = `${serverURL}/${userAssetsPath}/${cssOverridePath}`;
-export const projectLogoPath = `${serverURL}/${userAssetsPath}/logo`;
@@ -1,38 +0,0 @@
-import axios from 'axios';
-import { CustomField, CustomFieldLabel, CustomFields } from 'ontime-types';
-
-import { apiEntryUrl } from './constants';
-
-const customFieldsPath = `${apiEntryUrl}/custom-fields`;
-
-/**
- * Requests list of known custom fields
- */
-export async function getCustomFields(): Promise<CustomFields> {
-  const res = await axios.get(customFieldsPath);
-  return res.data;
-}
-
-/**
- * Sets list of known custom fields
- */
-export async function postCustomField(newField: CustomField): Promise<CustomFields> {
-  const res = await axios.post(customFieldsPath, { ...newField });
-  return res.data;
-}
-
-/**
- * Edits single custom field
- */
-export async function editCustomField(label: CustomFieldLabel, newField: CustomField): Promise<CustomFields> {
-  const res = await axios.put(`${customFieldsPath}/${label}`, { ...newField });
-  return res.data;
-}
-
-/**
- * Deletes single custom field
- */
-export async function deleteCustomField(label: CustomFieldLabel): Promise<CustomFields> {
-  const res = await axios.delete(`${customFieldsPath}/${label}`);
-  return res.data;
-}
@@ -1,177 +0,0 @@
-import axios, { AxiosResponse } from 'axios';
-import { DatabaseModel, MessageResponse, ProjectData, ProjectFileListResponse, QuickStartData } from 'ontime-types';
-
-import { makeTable } from '../../views/cuesheet/cuesheet.utils';
-import { makeCSVFromArrayOfArrays } from '../utils/csv';
-
-import { apiEntryUrl } from './constants';
-import { createBlob, downloadBlob } from './utils';
-
-const dbPath = `${apiEntryUrl}/db`;
-
-/**
- * HTTP request to the current DB
- */
-export function getDb(filename: string): Promise<AxiosResponse<DatabaseModel>> {
-  return axios.post(`${dbPath}/download`, { filename });
-}
-
-/**
- * Request download of the current project file
- * @param fileName
- */
-export async function downloadProject(fileName: string) {
-  try {
-    const { data, name } = await fileDownload(fileName);
-
-    const fileContent = JSON.stringify(data, null, 2);
-
-    const blob = createBlob(fileContent, 'application/json;charset=utf-8;');
-    downloadBlob(blob, `${name}.json`);
-  } catch (error) {
-    console.error(error);
-  }
-}
-
-/**
- * Request download of the current rundown as a CSV file
- * @param fileName
- */
-export async function downloadCSV(fileName: string = 'rundown') {
-  try {
-    const { data, name } = await fileDownload(fileName);
-    const { project, rundown, customFields } = data;
-
-    const sheetData = makeTable(project, rundown, customFields);
-    const fileContent = makeCSVFromArrayOfArrays(sheetData);
-
-    const blob = createBlob(fileContent, 'text/csv;charset=utf-8;');
-    downloadBlob(blob, `${name}.csv`);
-  } catch (error) {
-    console.error(error);
-  }
-}
-
-/**
- * HTTP request to upload project file
- */
-export async function uploadProjectFile(file: File): Promise<MessageResponse> {
-  const formData = new FormData();
-  formData.append('project', file);
-  const response = await axios.post(`${dbPath}/upload`, formData, {
-    headers: {
-      'Content-Type': 'multipart/form-data',
-    },
-  });
-  return response.data;
-}
-
-/**
- * Make patch changes to the objects in the db
- */
-export async function patchData(patchDb: Partial<DatabaseModel>): Promise<AxiosResponse<DatabaseModel>> {
-  return await axios.patch(dbPath, patchDb);
-}
-
-/**
- * HTTP request to create a project file
- */
-export async function createProject(
-  project: Partial<
-    ProjectData & {
-      filename: string;
-    }
-  >,
-): Promise<MessageResponse> {
-  const res = await axios.post(`${dbPath}/new`, project);
-  return res.data;
-}
-
-/**
- * HTTP request to create a project file
- */
-export async function quickProject(data: QuickStartData): Promise<MessageResponse> {
-  const res = await axios.post(`${dbPath}/quick`, data);
-  return res.data;
-}
-
-/**
- * HTTP request to get the list of available project files
- */
-export async function getProjects(): Promise<ProjectFileListResponse> {
-  const res = await axios.get(`${dbPath}/all`);
-  return res.data;
-}
-
-/**
- * HTTP request to load a project file
- */
-export async function loadProject(filename: string): Promise<MessageResponse> {
-  const res = await axios.post(`${dbPath}/load`, {
-    filename,
-  });
-  return res.data;
-}
-
-/**
- * HTTP request to load the demo project file
- */
-export async function loadDemo(): Promise<MessageResponse> {
-  const res = await axios.post(`${dbPath}/demo`);
-  return res.data;
-}
-
-/**
- * HTTP request to duplicate a project file
- */
-export async function duplicateProject(filename: string, newFilename: string): Promise<MessageResponse> {
-  const url = `${dbPath}/${filename}/duplicate`;
-  const decodedUrl = decodeURIComponent(url);
-  const res = await axios.post(decodedUrl, {
-    newFilename,
-  });
-  return res.data;
-}
-
-/**
- * HTTP request to rename a project file
- */
-export async function renameProject(filename: string, newFilename: string): Promise<MessageResponse> {
-  const url = `${dbPath}/${filename}/rename`;
-  const decodedUrl = decodeURIComponent(url);
-  const res = await axios.put(decodedUrl, {
-    newFilename,
-  });
-  return res.data;
-}
-
-/**
- * HTTP request to delete a project file
- */
-export async function deleteProject(filename: string): Promise<MessageResponse> {
-  const url = `${dbPath}/${filename}`;
-  const decodedUrl = decodeURIComponent(url);
-  const res = await axios.delete(decodedUrl);
-  return res.data;
-}
-
-/**
- * Utility function gets project from db
- * @param fileName
- * @returns
- */
-async function fileDownload(fileName: string): Promise<{ data: DatabaseModel; name: string }> {
-  const response = await getDb(fileName);
-
-  const headerLine = response.headers['Content-Disposition'];
-
-  // try and get the filename from the response
-  let name = fileName;
-  if (headerLine != null) {
-    const startFileNameIndex = headerLine.indexOf('"') + 1;
-    const endFileNameIndex = headerLine.lastIndexOf('"');
-    name = headerLine.substring(startFileNameIndex, endFileNameIndex);
-  }
-
-  return { data: response.data, name };
-}
@@ -0,0 +1,21 @@
+import axios from 'axios';
+import { EventData } from 'ontime-types';
+
+import { eventURL } from './apiConstants';
+
+/**
+ * @description HTTP request to fetch event data
+ * @return {Promise}
+ */
+export async function fetchEventData(): Promise<EventData> {
+  const res = await axios.get(eventURL);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate event data
+ * @return {Promise}
+ */
+export async function postEventData(data: EventData) {
+  return axios.post(eventURL, data);
+}
@@ -0,0 +1,75 @@
+import axios from 'axios';
+import { OntimeRundown, OntimeRundownEntry } from 'ontime-types';
+
+import { rundownURL } from './apiConstants';
+
+/**
+ * @description HTTP request to fetch all events
+ * @return {Promise}
+ */
+export async function fetchRundown(): Promise<OntimeRundown> {
+  const res = await axios.get(rundownURL);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to post new event
+ * @return {Promise}
+ */
+export async function requestPostEvent(data: OntimeRundownEntry) {
+  return axios.post(rundownURL, data);
+}
+
+/**
+ * @description HTTP request to put new event
+ * @return {Promise}
+ */
+export async function requestPutEvent(data: Partial<OntimeRundownEntry>) {
+  return axios.put(rundownURL, data);
+}
+
+/**
+ * @description HTTP request to modify event
+ * @return {Promise}
+ */
+export async function requestPatchEvent(data: OntimeRundownEntry) {
+  return axios.patch(rundownURL, data);
+}
+
+export type ReorderEntry = {
+  eventId: string;
+  from: number;
+  to: number;
+};
+
+/**
+ * @description HTTP request to reorder events
+ * @return {Promise}
+ */
+export async function requestReorderEvent(data: ReorderEntry) {
+  return axios.patch(`${rundownURL}/reorder`, data);
+}
+
+/**
+ * @description HTTP request to request application of delay
+ * @return {Promise}
+ */
+export async function requestApplyDelay(eventId: string) {
+  return axios.patch(`${rundownURL}/applydelay/${eventId}`);
+}
+
+/**
+ * @description HTTP request to delete given event
+ * @return {Promise}
+ */
+export async function requestDelete(eventId: string) {
+  return axios.delete(`${rundownURL}/${eventId}`);
+}
+
+/**
+ * @description HTTP request to delete all events
+ * @return {Promise}
+ */
+export async function requestDeleteAll() {
+  return axios.delete(`${rundownURL}/all`);
+}
@@ -1,42 +0,0 @@
-import axios, { AxiosResponse } from 'axios';
-import { CustomFields, OntimeRundown } from 'ontime-types';
-import { ImportMap } from 'ontime-utils';
-
-import { apiEntryUrl } from './constants';
-
-const excelPath = `${apiEntryUrl}/excel`;
-
-type PreviewSpreadsheetResponse = {
-  rundown: OntimeRundown;
-  customFields: CustomFields;
-};
-
-/**
- * upload Excel file to server
- * @return string - file ID op the uploaded file
- */
-export async function upload(file: File) {
-  const formData = new FormData();
-  formData.append('excel', file);
-  await axios.post(`${excelPath}/upload`, formData, {
-    headers: {
-      'Content-Type': 'multipart/form-data',
-    },
-  });
-}
-
-/**
- * Get Worksheet names
- * @return string[] - array of available worksheets
- */
-export async function getWorksheetNames(): Promise<string[]> {
-  const response: AxiosResponse<string[]> = await axios.get(`${excelPath}/worksheets`);
-  return response.data;
-}
-
-export async function importRundownPreview(options: ImportMap): Promise<PreviewSpreadsheetResponse> {
-  const response: AxiosResponse<PreviewSpreadsheetResponse> = await axios.post(`${excelPath}/preview`, {
-    options,
-  });
-  return response.data;
-}
@@ -1,19 +0,0 @@
-import axios from 'axios';
-
-import { apiRepoLatest } from '../../externals';
-
-export type HasUpdate = {
-  url: string;
-  version: string;
-};
-
-/**
- * HTTP request to get the latest version and url from github
- */
-export async function getLatestVersion(): Promise<HasUpdate> {
-  const res = await axios.get(`${apiRepoLatest}`);
-  return {
-    url: res.data.html_url as string,
-    version: res.data.tag_name as string,
-  };
-}
@@ -0,0 +1,162 @@
+import axios from 'axios';
+import { Alias, OSCSettings, Settings, UserFields, ViewSettings } from 'ontime-types';
+
+import { InfoType } from '../models/Info';
+
+import { githubURL, ontimeURL } from './apiConstants';
+
+/**
+ * @description HTTP request to retrieve application settings
+ * @return {Promise}
+ */
+export async function getSettings(): Promise<Settings> {
+  const res = await axios.get(`${ontimeURL}/settings`);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate application settings
+ * @return {Promise}
+ */
+export async function postSettings(data: Settings) {
+  return axios.post(`${ontimeURL}/settings`, data);
+}
+
+/**
+ * @description HTTP request to retrieve application info
+ * @return {Promise}
+ */
+export async function getInfo(): Promise<InfoType> {
+  const res = await axios.get(`${ontimeURL}/info`);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to retrieve view settings
+ * @return {Promise}
+ */
+export async function getView(): Promise<ViewSettings> {
+  const res = await axios.get(`${ontimeURL}/views`);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate view settings
+ * @return {Promise}
+ */
+export async function postView(data: ViewSettings) {
+  return axios.post(`${ontimeURL}/views`, data);
+}
+
+/**
+ * @description HTTP request to retrieve aliases
+ * @return {Promise}
+ */
+export async function getAliases(): Promise<Alias[]> {
+  const res = await axios.get(`${ontimeURL}/aliases`);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate aliases
+ * @return {Promise}
+ */
+export async function postAliases(data: Alias[]) {
+  return axios.post(`${ontimeURL}/aliases`, data);
+}
+
+/**
+ * @description HTTP request to retrieve user fields
+ * @return {Promise}
+ */
+export async function getUserFields(): Promise<UserFields> {
+  const res = await axios.get(`${ontimeURL}/userfields`);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate user fields
+ * @return {Promise}
+ */
+export async function postUserFields(data: UserFields) {
+  return axios.post(`${ontimeURL}/userfields`, data);
+}
+
+/**
+ * @description HTTP request to retrieve osc settings
+ * @return {Promise}
+ */
+export async function getOSC(): Promise<OSCSettings> {
+  const res = await axios.get(`${ontimeURL}/osc`);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate osc settings
+ * @return {Promise}
+ */
+export async function postOSC(data: OSCSettings) {
+  return axios.post(`${ontimeURL}/osc`, data);
+}
+
+/**
+ * @description HTTP request to download db
+ * @return {Promise}
+ */
+export const downloadRundown = async () => {
+  await axios({
+    url: `${ontimeURL}/db`,
+    method: 'GET',
+    responseType: 'blob', // important
+  }).then((response) => {
+    const headerLine = response.headers['Content-Disposition'];
+    let filename = 'rundown.json';
+
+    // try and get the filename from the response
+    if (headerLine != null) {
+      const startFileNameIndex = headerLine.indexOf('"') + 1;
+      const endFileNameIndex = headerLine.lastIndexOf('"');
+      filename = headerLine.substring(startFileNameIndex, endFileNameIndex);
+    }
+
+    const url = window.URL.createObjectURL(new Blob([response.data], { type: 'application/json' }));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', filename);
+    document.body.appendChild(link);
+    link.click();
+  });
+};
+
+/**
+ * @description HTTP request to upload events db
+ * @return {Promise}
+ */
+type UploadDataOptions = {
+  onlyRundown?: boolean;
+};
+export const uploadData = async (file: string, setProgress: (value: number) => void, options?: UploadDataOptions) => {
+  const formData = new FormData();
+  formData.append('userFile', file);
+  const onlyRundown = options?.onlyRundown || 'false';
+  await axios
+    .post(`${ontimeURL}/db?onlyRundown=${onlyRundown}`, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      onUploadProgress: (progressEvent) => {
+        const complete = progressEvent?.total ? Math.round((progressEvent.loaded * 100) / progressEvent.total) : 0;
+        setProgress(complete);
+      },
+    })
+    .then((response) => response.data.id);
+};
+
+/**
+ * @description HTTP request to get the latest version and url from github
+ * @return {Promise}
+ */
+export async function getLatestVersion(): Promise<object> {
+  const res = await axios.get(`${githubURL}`);
+  return { url: res.data.html_url, version: res.data.tag_name };
+}
@@ -1,36 +0,0 @@
-import axios, { AxiosResponse } from 'axios';
-import { ProjectData, ProjectLogoResponse } from 'ontime-types';
-
-import { apiEntryUrl } from './constants';
-
-const projectPath = `${apiEntryUrl}/project`;
-
-/**
- * HTTP request to fetch project data
- */
-export async function getProjectData(): Promise<ProjectData> {
-  const res = await axios.get(projectPath);
-  return res.data;
-}
-
-/**
- * HTTP request to mutate project data
- */
-export async function postProjectData(data: ProjectData): Promise<AxiosResponse<ProjectData>> {
-  return axios.post(projectPath, data);
-}
-
-/**
- * HTTP request to upload a project logo
- */
-export async function uploadProjectLogo(file: File): Promise<AxiosResponse<ProjectLogoResponse>> {
-  const formData = new FormData();
-  formData.append('image', file);
-  const response = await axios.post(`${projectPath}/upload`, formData, {
-    headers: {
-      'Content-Type': 'multipart/form-data',
-    },
-  });
-
-  return response;
-}
@@ -1,26 +0,0 @@
-import axios from 'axios';
-import { OntimeReport } from 'ontime-types';
-
-import { ontimeQueryClient } from '../../common/queryClient';
-
-import { apiEntryUrl, REPORT } from './constants';
-
-export const reportUrl = `${apiEntryUrl}/report`;
-
-/**
- * HTTP request to fetch all reports
- */
-export async function fetchReport(): Promise<OntimeReport> {
-  const res = await axios.get(`${reportUrl}/`);
-  return res.data;
-}
-
-export async function deleteReport(id: string) {
-  await axios.delete(`${reportUrl}/${id}`);
-  await ontimeQueryClient.invalidateQueries({ queryKey: REPORT });
-}
-
-export async function deleteAllReport() {
-  await axios.delete(`${reportUrl}/all`);
-  await ontimeQueryClient.invalidateQueries({ queryKey: REPORT });
-}
@@ -1,86 +0,0 @@
-import axios, { AxiosResponse } from 'axios';
-import { MessageResponse, OntimeEvent, OntimeRundownEntry, RundownCached, TransientEventPayload } from 'ontime-types';
-
-import { apiEntryUrl } from './constants';
-
-const rundownPath = `${apiEntryUrl}/rundown`;
-
-/**
- * HTTP request to fetch all events
- */
-export async function fetchNormalisedRundown(): Promise<RundownCached> {
-  const res = await axios.get(`${rundownPath}/normalised`);
-  return res.data;
-}
-
-/**
- * HTTP request to post new event
- */
-export async function requestPostEvent(data: TransientEventPayload): Promise<AxiosResponse<OntimeRundownEntry>> {
-  return axios.post(rundownPath, data);
-}
-
-/**
- * HTTP request to put new event
- */
-export async function requestPutEvent(data: Partial<OntimeRundownEntry>): Promise<AxiosResponse<OntimeRundownEntry>> {
-  return axios.put(rundownPath, data);
-}
-
-type BatchEditEntry = {
-  data: Partial<OntimeEvent>;
-  ids: string[];
-};
-
-/**
- * HTTP request to put multiple events
- */
-export async function requestBatchPutEvents(data: BatchEditEntry): Promise<AxiosResponse<MessageResponse>> {
-  return axios.put(`${rundownPath}/batch`, data);
-}
-
-export type ReorderEntry = {
-  eventId: string;
-  from: number;
-  to: number;
-};
-
-/**
- * HTTP request to reorder events
- */
-export async function requestReorderEvent(data: ReorderEntry): Promise<AxiosResponse<OntimeRundownEntry>> {
-  return axios.patch(`${rundownPath}/reorder`, data);
-}
-
-export type SwapEntry = {
-  from: string;
-  to: string;
-};
-
-/**
- * HTTP request to swap two events
- */
-export async function requestEventSwap(data: SwapEntry): Promise<AxiosResponse<MessageResponse>> {
-  return axios.patch(`${rundownPath}/swap`, data);
-}
-
-/**
- * HTTP request to request application of delay
- */
-export async function requestApplyDelay(eventId: string): Promise<AxiosResponse<MessageResponse>> {
-  return axios.patch(`${rundownPath}/applydelay/${eventId}`);
-}
-
-/**
- * HTTP request to delete given event
- */
-export async function requestDelete(eventIds: string[]): Promise<AxiosResponse<MessageResponse>> {
-  return axios.delete(rundownPath, { data: { ids: eventIds } });
-}
-
-/**
- * HTTP request to delete all events
- */
-export async function requestDeleteAll(): Promise<AxiosResponse<MessageResponse>> {
-  return axios.delete(`${rundownPath}/all`);
-}
@@ -1,27 +0,0 @@
-import axios from 'axios';
-import { GetInfo } from 'ontime-types';
-
-import { apiEntryUrl } from './constants';
-
-const sessionPath = `${apiEntryUrl}/session`;
-
-/**
- * HTTP request to retrieve application info
- */
-export async function getInfo(): Promise<GetInfo> {
-  const res = await axios.get(`${sessionPath}/info`);
-  return res.data;
-}
-
-/**
- * HTTP request to get a pre-authenticated URL
- */
-export async function generateUrl(
-  baseUrl: string,
-  path: string,
-  lock: boolean,
-  authenticate: boolean,
-): Promise<string> {
-  const res = await axios.post(`${sessionPath}/url`, { baseUrl, path, lock, authenticate });
-  return res.data.url;
-}
@@ -1,28 +0,0 @@
-import axios, { AxiosResponse } from 'axios';
-import { Settings } from 'ontime-types';
-
-import { apiEntryUrl } from './constants';
-
-const settingsPath = `${apiEntryUrl}/settings`;
-
-/**
- * HTTP request to retrieve application settings
- */
-export async function getSettings(): Promise<Settings> {
-  const res = await axios.get(settingsPath);
-  return res.data;
-}
-
-/**
- * HTTP request to mutate application settings
- */
-export async function postSettings(data: Settings): Promise<AxiosResponse<Settings>> {
-  return axios.post(settingsPath, data);
-}
-
-/**
- * Allows setting the welcome modal dialog state from the clients
- */
-export async function postShowWelcomeDialog(show: boolean) {
-  axios.post(`${settingsPath}/welcomedialog`, { show });
-}
@@ -1,75 +0,0 @@
-import axios, { AxiosResponse } from 'axios';
-import { AuthenticationStatus, CustomFields, OntimeRundown } from 'ontime-types';
-import { ImportMap } from 'ontime-utils';
-
-import { apiEntryUrl } from './constants';
-
-const sheetsPath = `${apiEntryUrl}/sheets`;
-
-/**
- * HTTP request to verify whether we are authenticated with Google Sheet service
- */
-export const verifyAuthenticationStatus = async (): Promise<{
-  authenticated: AuthenticationStatus;
-  sheetId: string;
-}> => {
-  const response = await axios.get(`${sheetsPath}/connect`);
-  return response.data;
-};
-
-/**
- * HTTP request to initiate the authentication service with google
- */
-export const requestConnection = async (
-  file: File,
-  sheetId: string,
-): Promise<{
-  verification_url: string;
-  user_code: string;
-}> => {
-  const formData = new FormData();
-  formData.append('client_secret', file);
-
-  const response = await axios.post(`${sheetsPath}/${sheetId}/connect`, formData, {
-    headers: {
-      'Content-Type': 'multipart/form-data',
-    },
-  });
-
-  return response.data;
-};
-
-/**
- * HTTP request to revoke authentication to google sheet
- */
-export const revokeAuthentication = async (): Promise<{ authenticated: AuthenticationStatus }> => {
-  const response = await axios.post(`${sheetsPath}/revoke`);
-  return response.data;
-};
-
-/**
- * HTTP request to upload preview the contents of a google sheet as rundown
- */
-export const previewRundown = async (
-  sheetId: string,
-  options: ImportMap,
-): Promise<{
-  rundown: OntimeRundown;
-  customFields: CustomFields;
-}> => {
-  const response = await axios.post(`${sheetsPath}/${sheetId}/read`, { options });
-  return response.data;
-};
-
-export const getWorksheetNames = async (sheetId: string): Promise<string[]> => {
-  const response: AxiosResponse<string[]> = await axios.post(`${sheetsPath}/${sheetId}/worksheets`);
-  return response.data;
-};
-
-/**
- * HTTP request to upload the rundown to a google sheet
- */
-export const uploadRundown = async (sheetId: string, options: ImportMap): Promise<void> => {
-  const response = await axios.post(`${sheetsPath}/${sheetId}/write`, { options });
-  return response.data;
-};
@@ -1,21 +0,0 @@
-import axios from 'axios';
-import { URLPreset } from 'ontime-types';
-
-import { apiEntryUrl } from './constants';
-
-const urlPresetsPath = `${apiEntryUrl}/url-presets`;
-
-/**
- * HTTP request to retrieve aliases
- */
-export async function getUrlPresets(): Promise<URLPreset[]> {
-  const res = await axios.get(urlPresetsPath);
-  return res.data;
-}
-
-/**
- * HTTP request to mutate aliases
- */
-export async function postUrlPresets(data: URLPreset[]): Promise<URLPreset[]> {
-  return axios.post(urlPresetsPath, data);
-}
@@ -1,85 +0,0 @@
-import axios, { AxiosError } from 'axios';
-import { LogLevel } from 'ontime-types';
-import { generateId, millisToString } from 'ontime-utils';
-
-import { ontimeQueryClient } from '../queryClient';
-import { addLog } from '../stores/logger';
-import { nowInMillis } from '../utils/time';
-
-/**
- * Utility unrwap a potential axios error
- * @param error
- * @returns
- */
-export function maybeAxiosError(error: unknown) {
-  if (axios.isAxiosError(error)) {
-    const statusText = (error as AxiosError).response?.statusText ?? '';
-    let data = (error as AxiosError).response?.data ?? '';
-    if (typeof data === 'object') {
-      if ('message' in data) {
-        data = JSON.stringify(data.message);
-      } else {
-        data = JSON.stringify(data);
-      }
-    }
-    return `${statusText}: ${data}`;
-  } else if (error instanceof Error) {
-    return error.message;
-  } else {
-    if (typeof error !== 'string') {
-      return JSON.stringify(error);
-    }
-    return error;
-  }
-}
-
-/**
- * Utility unrwaps a potential axios error and sends to logger
- * @param prepend
- * @param error
- */
-export function logAxiosError(prepend: string, error: unknown) {
-  const message = `${prepend}: ${maybeAxiosError(error)}`;
-
-  addLog({
-    id: generateId(),
-    origin: 'SERVER',
-    time: millisToString(nowInMillis()),
-    level: LogLevel.Error,
-    text: message,
-  });
-}
-
-/**
- * Utility function invalidates react-query caches
- */
-export async function invalidateAllCaches() {
-  await ontimeQueryClient.invalidateQueries();
-}
-
-/**
- * Creates blob from content
- * @param fileContent
- * @param type
- * @returns
- */
-export function createBlob(fileContent: string, type: string): Blob {
-  return new Blob([fileContent], { type });
-}
-
-/**
- * downloads a blob
- * @param downloadUrl
- * @param fileName
- */
-export function downloadBlob(blob: Blob, fileName: string) {
-  const downloadUrl = URL.createObjectURL(blob);
-  const link = document.createElement('a');
-  link.setAttribute('href', downloadUrl);
-  link.setAttribute('download', fileName);
-  document.body.appendChild(link);
-  link.click();
-
-  // Clean up the URL.createObjectURL to release resources
-  URL.revokeObjectURL(downloadUrl);
-}
@@ -1,21 +0,0 @@
-import axios from 'axios';
-import { ViewSettings } from 'ontime-types';
-
-import { apiEntryUrl } from './constants';
-
-const viewSettingsPath = `${apiEntryUrl}/view-settings`;
-
-/**
- * HTTP request to retrieve view settings
- */
-export async function getView(): Promise<ViewSettings> {
-  const res = await axios.get(viewSettingsPath);
-  return res.data;
-}
-
-/**
- * HTTP request to mutate view settings
- */
-export async function postViewSettings(data: ViewSettings) {
-  return axios.post(viewSettingsPath, data);
-}
@@ -0,0 +1,26 @@
+import { Button } from '@chakra-ui/react';
+import { IoCheckmarkSharp } from '@react-icons/all-files/io5/IoCheckmarkSharp';
+import { IoCloseSharp } from '@react-icons/all-files/io5/IoCloseSharp';
+import PropTypes from 'prop-types';
+
+export default function EnableBtn(props) {
+  const { active, text, actionHandler, size = 'xs' } = props;
+  return (
+    <Button
+      size={size}
+      leftIcon={active ? <IoCheckmarkSharp /> : <IoCloseSharp />}
+      colorScheme='blue'
+      variant={active ? 'solid' : 'outline'}
+      onClick={actionHandler}
+    >
+      {text}
+    </Button>
+  );
+}
+
+EnableBtn.propTypes = {
+  active: PropTypes.bool,
+  text: PropTypes.string,
+  actionHandler: PropTypes.func,
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+}
--- a/Show More
+++ b/Show More