fleetops: fix filters, improve drawer component w/ state, several patches and upgrades

Merge pull request #155 from fleetbase/dev-v0.2.9
v0.2.9
2025-12-19 22:27:22 +00:00 · 2023-11-16 18:49:17 +08:00 · 2023-11-09 17:21:56 +08:00 · 2023-11-09 17:04:10 +08:00 · 2023-11-06 20:12:39 +08:00 · 2023-11-06 19:55:42 +08:00
370 changed files with 32002 additions and 6597 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -18,5 +18,8 @@ act.sh
 composer-auth.json
 packages/billing-api
 packages/billing-engine
+packages/flespi-engine
+packages/flespi-integration
+packages/projectargus-engine
 docker/database/*
 docker/database/mysql/*
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,15 +1,16 @@
-[submodule "console"]
-	path = console
-	url = git@github.com:fleetbase/console.git
-	branch = main
+[submodule "packages/fleetops"]
+	path = packages/fleetops
+	url = git@github.com:fleetbase/fleetops.git
+[submodule "packages/storefront"]
+	path = packages/storefront
+	url = git@github.com:fleetbase/storefront.git
+[submodule "packages/pallet"]
+	path = packages/pallet
+	url = git@github.com:fleetbase/pallet.git
 [submodule "packages/core-api"]
 	path = packages/core-api
 	url = git@github.com:fleetbase/core-api.git
 	branch = main
-[submodule "packages/fleetops-api"]
-	path = packages/fleetops-api
-	url = git@github.com:fleetbase/fleetops-api.git
-	branch = main
 [submodule "packages/ember-core"]
 	path = packages/ember-core
 	url = git@github.com:fleetbase/ember-core.git
@@ -18,10 +19,6 @@
 	path = packages/ember-ui
 	url = git@github.com:fleetbase/ember-ui.git
 	branch = main
-[submodule "packages/storefront-engine"]
-	path = packages/storefront-engine
-	url = git@github.com:fleetbase/storefront-engine.git
-	branch = main
 [submodule "packages/iam-engine"]
 	path = packages/iam-engine
 	url = git@github.com:fleetbase/iam-engine.git
@@ -32,9 +29,9 @@
 [submodule "packages/fleetbase-extensions-indexer"]
 	path = packages/fleetbase-extensions-indexer
 	url = git@github.com:fleetbase/fleetbase-extensions-indexer.git
-[submodule "packages/fleetops-engine"]
-	path = packages/fleetops-engine
-	url = git@github.com:fleetbase/fleetops-engine.git
+[submodule "packages/fleetops-data"]
+	path = packages/fleetops-data
+	url = git@github.com:fleetbase/fleetops-data.git
 	branch = main
 [submodule "docs/guides"]
 	path = docs/guides
@@ -42,23 +39,3 @@
 [submodule "docs/api-reference"]
 	path = docs/api-reference
 	url = git@github.com:fleetbase/api-reference.git
-[submodule "packages/storefront-api"]
-	path = packages/storefront-api
-	url = git@github.com:fleetbase/storefront-api.git
-	branch = main
-[submodule "packages/fleetops-data"]
-	path = packages/fleetops-data
-	url = git@github.com:fleetbase/fleetops-data.git
-	branch = main
-[submodule "socket"]
-	path = socket
-	url = git@github.com:fleetbase/socket.git
-	branch = main
-[submodule "packages/pallet-api"]
-	path = packages/pallet-api
-	url = git@github.com:fleetbase/pallet-api.git
-	branch = main
-[submodule "packages/pallet-engine"]
-	path = packages/pallet-engine
-	url = git@github.com:fleetbase/pallet-engine.git
-	branch = main
--- a/api/.gitignore
+++ b/api/.gitignore
@@ -13,3 +13,4 @@ npm-debug.log
 yarn-error.log
 /.idea
 /.vscode
+.composer.dev.json
--- a/api/README.md
+++ b/api/README.md
@@ -1,64 +0,0 @@
-<p align="center"><a href="https://laravel.com" target="_blank"><img src="https://raw.githubusercontent.com/laravel/art/master/logo-lockup/5%20SVG/2%20CMYK/1%20Full%20Color/laravel-logolockup-cmyk-red.svg" width="400"></a></p>
-
-<p align="center">
-<a href="https://travis-ci.org/laravel/framework"><img src="https://travis-ci.org/laravel/framework.svg" alt="Build Status"></a>
-<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/dt/laravel/framework" alt="Total Downloads"></a>
-<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/v/laravel/framework" alt="Latest Stable Version"></a>
-<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/l/laravel/framework" alt="License"></a>
-</p>
-
-## About Laravel
-
-Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. Laravel takes the pain out of development by easing common tasks used in many web projects, such as:
-
- [Simple, fast routing engine](https://laravel.com/docs/routing).
- [Powerful dependency injection container](https://laravel.com/docs/container).
- Multiple back-ends for [session](https://laravel.com/docs/session) and [cache](https://laravel.com/docs/cache) storage.
- Expressive, intuitive [database ORM](https://laravel.com/docs/eloquent).
- Database agnostic [schema migrations](https://laravel.com/docs/migrations).
- [Robust background job processing](https://laravel.com/docs/queues).
- [Real-time event broadcasting](https://laravel.com/docs/broadcasting).
-
-Laravel is accessible, powerful, and provides tools required for large, robust applications.
-
-## Learning Laravel
-
-Laravel has the most extensive and thorough [documentation](https://laravel.com/docs) and video tutorial library of all modern web application frameworks, making it a breeze to get started with the framework.
-
-If you don't feel like reading, [Laracasts](https://laracasts.com) can help. Laracasts contains over 1500 video tutorials on a range of topics including Laravel, modern PHP, unit testing, and JavaScript. Boost your skills by digging into our comprehensive video library.
-
-## Laravel Sponsors
-
-We would like to extend our thanks to the following sponsors for funding Laravel development. If you are interested in becoming a sponsor, please visit the Laravel [Patreon page](https://patreon.com/taylorotwell).
-
-### Premium Partners
-
- **[Vehikl](https://vehikl.com/)**
- **[Tighten Co.](https://tighten.co)**
- **[Kirschbaum Development Group](https://kirschbaumdevelopment.com)**
- **[64 Robots](https://64robots.com)**
- **[Cubet Techno Labs](https://cubettech.com)**
- **[Cyber-Duck](https://cyber-duck.co.uk)**
- **[Many](https://www.many.co.uk)**
- **[Webdock, Fast VPS Hosting](https://www.webdock.io/en)**
- **[DevSquad](https://devsquad.com)**
- **[Curotec](https://www.curotec.com/services/technologies/laravel/)**
- **[OP.GG](https://op.gg)**
- **[WebReinvent](https://webreinvent.com/?utm_source=laravel&utm_medium=github&utm_campaign=patreon-sponsors)**
- **[Lendio](https://lendio.com)**
-
-## Contributing
-
-Thank you for considering contributing to the Laravel framework! The contribution guide can be found in the [Laravel documentation](https://laravel.com/docs/contributions).
-
-## Code of Conduct
-
-In order to ensure that the Laravel community is welcoming to all, please review and abide by the [Code of Conduct](https://laravel.com/docs/contributions#code-of-conduct).
-
-## Security Vulnerabilities
-
-If you discover a security vulnerability within Laravel, please send an e-mail to Taylor Otwell via [taylor@laravel.com](mailto:taylor@laravel.com). All security vulnerabilities will be promptly addressed.
-
-## License
-
-The Laravel framework is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).
--- a/api/composer-install-dev.sh
+++ b/api/composer-install-dev.sh
@@ -1,7 +0,0 @@
-#!/bin/bash
-
-if [ -f composer.lock ]; then
-    rm composer.lock
-fi
-
-mv composer.json composer.prod.json && cp composer.dev.json composer.json && composer install && mv composer.prod.json composer.json
--- a/api/composer.dev.json
+++ b/api/composer.dev.json
@@ -1,99 +0,0 @@
-{
-    "name": "laravel/laravel",
-    "type": "project",
-    "description": "The Laravel Framework.",
-    "keywords": ["framework", "laravel"],
-    "license": "MIT",
-    "require": {
-        "php": "^7.3|^8.0",
-        "fleetbase/core-api": "^1.2.8",
-        "fleetbase/fleetops-api": "^1.1.7",
-        "fleetbase/storefront-api": "^1.1.2",
-        "fleetbase/pallet-api": "^0.0.1",
-        "fleetbase/billing-api": "^0.0.2",
-        "fleetbase/flespi-integration": "^0.0.1",
-        "fruitcake/laravel-cors": "^2.0",
-        "guzzlehttp/guzzle": "^7.0.1",
-        "laravel/framework": "^8.75",
-        "laravel/sanctum": "^2.11",
-        "laravel/tinker": "^2.5",
-        "league/flysystem-aws-s3-v3": "^1.0",
-        "maatwebsite/excel": "^3.1",
-        "phpoffice/phpspreadsheet": "^1.28",
-        "predis/predis": "^2.1",
-        "psr/http-factory-implementation": "*"
-    },
-    "require-dev": {
-        "facade/ignition": "^2.5",
-        "fakerphp/faker": "^1.9.1",
-        "kitloong/laravel-migrations-generator": "^6.10",
-        "laravel/sail": "^1.0.1",
-        "mockery/mockery": "^1.4.4",
-        "nunomaduro/collision": "^5.10",
-        "phpunit/phpunit": "^9.5.10"
-    },
-    "repositories": [
-        {
-            "type": "path",
-            "url": "../packages/core-api"
-        },
-        {
-            "type": "path",
-            "url": "../packages/fleetops-api"
-        },
-        {
-            "type": "path",
-            "url": "../packages/storefront-api"
-        },
-        {
-            "type": "path",
-            "url": "../packages/pallet-api"
-        },
-        {
-            "type": "path",
-            "url": "../packages/billing-api"
-        },
-        {
-            "type": "path",
-            "url": "../packages/flespi-integration"
-        }
-    ],
-    "autoload": {
-        "psr-4": {
-            "App\\": "app/",
-            "Database\\Factories\\": "database/factories/",
-            "Database\\Seeders\\": "database/seeders/"
-        }
-    },
-    "autoload-dev": {
-        "psr-4": {
-            "Tests\\": "tests/"
-        }
-    },
-    "scripts": {
-        "post-autoload-dump": ["Illuminate\\Foundation\\ComposerScripts::postAutoloadDump", "@php artisan package:discover --ansi"],
-        "post-update-cmd": ["@php artisan vendor:publish --tag=laravel-assets --ansi --force"],
-        "post-root-package-install": ["@php -r \"file_exists('.env') || copy('.env.example', '.env');\""],
-        "post-create-project-cmd": ["@php artisan key:generate --ansi"],
-        "clear-logs": ["rm -rf storage/logs/*.log", "composer dump-autoload", "chmod -R 777 storage", "chmod -R 777 bootstrap/cache", "chmod -R 777 resources"],
-        "clean-logs": ["composer run-script clear-logs"],
-        "dock": ["docker exec -it fleetbase_os_application_1 /usr/bin/tmux -u new"],
-        "dock-server": ["docker exec -it fleetbase_os_httpd_1 /bin/sh"],
-        "tunnel": ["ngrok http --region=ap --hostname=fleetbase.ap.ngrok.io 8000"]
-    },
-    "extra": {
-        "laravel": {
-            "dont-discover": []
-        }
-    },
-    "config": {
-        "optimize-autoloader": true,
-        "preferred-install": "dist",
-        "sort-packages": true,
-        "allow-plugins": {
-            "php-http/discovery": true
-        }
-    },
-    "minimum-stability": "dev",
-    "prefer-stable": true
-}
--- a/api/composer.json
+++ b/api/composer.json
@@ -9,9 +9,9 @@
    "license": "MIT",
    "require": {
        "php": "^7.3|^8.0",
-        "fleetbase/core-api": "^1.2.8",
-        "fleetbase/fleetops-api": "^1.1.7",
-        "fleetbase/storefront-api": "^1.1.2",
+        "fleetbase/core-api": "^1.3.2",
+        "fleetbase/fleetops-api": "^0.3.4",
+        "fleetbase/storefront-api": "^0.2.4",
        "fruitcake/laravel-cors": "^2.0",
        "guzzlehttp/guzzle": "^7.0.1",
        "laravel/framework": "^8.75",
--- a/api/composer.lock
+++ b/api/composer.lock
--- a/1
+++ b/1
--- a/console/.dockerignore
+++ b/console/.dockerignore
@@ -0,0 +1,25 @@
+# Ignore files not needed for docker to build microservice image
+node_modules/*
+postgres/*
+typings/*
+*/.git*
+*.git*
+*.git
+*.md
+!gulpfile.js
+ci/
+.circleci/
+Vagrantfile
+concourse/
+infra/*
+vagrant/*
+docker/*
+deploy/*
+media/*
+data/*
+appspec.yml
+compose.yml
+docker-compose-prod.yml
+docker-compose.yml
+$virtualenv.tar.gz
+$node_modules.tar.gz
--- a/console/.editorconfig
+++ b/console/.editorconfig
@@ -0,0 +1,19 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+
+[*.hbs]
+insert_final_newline = false
+
+[*.{diff,md}]
+trim_trailing_whitespace = false
--- a/console/.ember-cli
+++ b/console/.ember-cli
@@ -0,0 +1,15 @@
+{
+  /**
+    Ember CLI sends analytics information by default. The data is completely
+    anonymous, but there are times when you might want to disable this behavior.
+
+    Setting `disableAnalytics` to true will prevent any data from being sent.
+  */
+  "disableAnalytics": false,
+
+  /**
+  Setting `isTypeScriptProject` to true will force the blueprint generators to generate TypeScript
+  rather than JavaScript by default, when a TypeScript version of a given blueprint is available.
+  */
+  "isTypeScriptProject": false
+}
--- a/console/.eslintignore
+++ b/console/.eslintignore
@@ -0,0 +1,25 @@
+# unconventional js
+/blueprints/*/files/
+/vendor/
+
+# compiled output
+/dist/
+/tmp/
+
+# dependencies
+/bower_components/
+/node_modules/
+
+# misc
+/coverage/
+!.*
+.*/
+.eslintcache
+
+# ember-try
+/.node_modules.ember-try/
+/bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
+/package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try
--- a/console/.eslintrc.js
+++ b/console/.eslintrc.js
@@ -0,0 +1,82 @@
+'use strict';
+
+module.exports = {
+    root: true,
+    parser: 'babel-eslint',
+    parserOptions: {
+        ecmaVersion: 2018,
+        sourceType: 'module',
+        ecmaFeatures: {
+            legacyDecorators: true,
+        },
+    },
+    plugins: ['ember'],
+    extends: ['eslint:recommended', 'plugin:ember/recommended', 'plugin:prettier/recommended'],
+    ignorePatterns: ['prebuild.js'],
+    env: {
+        browser: true,
+    },
+    globals: {
+        socketClusterClient: 'readonly',
+        L: 'readonly',
+        module: 'readonly',
+        require: 'readonly',
+    },
+    rules: {
+        'ember/no-array-prototype-extensions': 'off',
+        'ember/no-computed-properties-in-native-classes': 'off',
+        'ember/no-controller-access-in-routes': 'off',
+        'ember/no-empty-glimmer-component-classes': 'off',
+        'ember/no-get': 'off',
+        'ember/classic-decorator-no-classic-methods': 'off',
+        'node/no-unpublished-require': [
+            'error',
+            {
+                allowModules: [
+                    'ember-cli',
+                    'tailwindcss',
+                    '@tailwindcss/forms',
+                    'postcss-import',
+                    'postcss-preset-env',
+                    'postcss-each',
+                    'postcss-mixins',
+                    'postcss-conditionals-renewed',
+                    'autoprefixer',
+                    'broccoli-funnel',
+                    'ember-auto-import',
+                ],
+            },
+        ],
+        'no-prototype-builtins': 'off',
+    },
+    overrides: [
+        // node files
+        {
+            files: [
+                './.eslintrc.js',
+                './.prettierrc.js',
+                './.template-lintrc.js',
+                './ember-cli-build.js',
+                './index.js',
+                './testem.js',
+                './blueprints/*/index.js',
+                './config/**/*.js',
+                './tests/dummy/config/**/*.js',
+            ],
+            parserOptions: {
+                sourceType: 'script',
+            },
+            env: {
+                browser: false,
+                node: true,
+            },
+            plugins: ['node'],
+            extends: ['plugin:node/recommended'],
+        },
+        {
+            // test files
+            files: ['tests/**/*-test.{js,ts}'],
+            extends: ['plugin:qunit/recommended'],
+        },
+    ],
+};
--- a/console/.github/workflows/ci.yml
+++ b/console/.github/workflows/ci.yml
@@ -0,0 +1,60 @@
+name: Ember CI
+
+on:
+  push:
+    branches: [ main ]
+    tags:
+      - 'v*'
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]  # Build on Node.js 16
+
+    steps:
+    - uses: actions/checkout@v2
+
+    - name: Setup Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Setup pnpm
+      uses: pnpm/action-setup@v2.0.1
+      with:
+        version: latest
+
+    - name: Get pnpm Store Directory
+      id: pnpm-cache
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+    - uses: actions/cache@v3
+      name: Setup pnpm Cache
+      with:
+        path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+
+    - name: Create .npmrc
+      run: |
+        if [[ -n "${{ secrets._GITHUB_AUTH_TOKEN }}" ]]; then
+          echo "@fleetbase:registry=https://npm.pkg.github.com/" > .npmrc
+          echo "//npm.pkg.github.com/:_authToken=${{ secrets._GITHUB_AUTH_TOKEN }}" >> .npmrc
+        fi
+
+    - name: Install Dependencies
+      run: pnpm install
+
+    - name: Lint
+      run: pnpm run lint
+
+    - name: Build
+      run: npx ember build --environment production
--- a/console/.gitignore
+++ b/console/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist/
+/tmp/
+
+# dependencies
+/bower_components/
+/node_modules/
+
+# misc
+/.env*
+/environments/.env*
+/.pnp*
+/.sass-cache
+/.eslintcache
+/connect.lock
+/coverage/
+/libpeerconnection.log
+/npm-debug.log*
+/testem.log
+/yarn-error.log
+/.npmrc
+
+# ember-try
+/.node_modules.ember-try/
+/bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
+/package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try
+
+# broccoli-debug
+/DEBUG/
--- a/console/.prettierignore
+++ b/console/.prettierignore
@@ -0,0 +1,25 @@
+# unconventional js
+/blueprints/*/files/
+/vendor/
+
+# compiled output
+/dist/
+/tmp/
+
+# dependencies
+/bower_components/
+/node_modules/
+
+# misc
+/coverage/
+!.*
+.eslintcache
+.lint-todo/
+
+# ember-try
+/.node_modules.ember-try/
+/bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
+/package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try
--- a/console/.prettierrc.js
+++ b/console/.prettierrc.js
@@ -0,0 +1,17 @@
+'use strict';
+
+module.exports = {
+    trailingComma: 'es5',
+    tabWidth: 4,
+    semi: true,
+    singleQuote: true,
+    printWidth: 190,
+    overrides: [
+        {
+            files: '*.hbs',
+            options: {
+                singleQuote: false,
+            },
+        },
+    ],
+};
--- a/console/.template-lintrc.js
+++ b/console/.template-lintrc.js
@@ -0,0 +1,14 @@
+'use strict';
+
+module.exports = {
+    extends: 'recommended',
+    rules: {
+        'no-bare-strings': 'off',
+        'no-invalid-interactive': 'off',
+        'no-yield-only': 'off',
+        'no-down-event-binding': 'off',
+        'table-groups': 'off',
+        'link-href-attributes': 'off',
+        'require-input-label': 'off',
+    },
+};
--- a/console/.watchmanconfig
+++ b/console/.watchmanconfig
@@ -0,0 +1,3 @@
+{
+  "ignore_dirs": ["tmp", "dist"]
+}
--- a/console/Dockerfile
+++ b/console/Dockerfile
@@ -0,0 +1,51 @@
+# ---- Build Stage ----
+FROM node:16.20-alpine AS builder
+
+# Set the working directory in the container to /app
+WORKDIR /app
+
+# Create the pnpm directory and set the PNPM_HOME environment variable
+RUN mkdir -p ~/.pnpm
+ENV PNPM_HOME /root/.pnpm
+
+# Add the pnpm global bin to the PATH
+ENV PATH /root/.pnpm/bin:$PATH
+
+# Copy pnpm-lock.yaml (or package.json) into the directory /app in the container
+COPY console/package.json console/pnpm-lock.yaml ./
+
+# Copy over .npmrc if applicable
+COPY console/.npmr[c] ./
+
+# Install global dependencies
+RUN npm install -g ember-cli pnpm 
+
+# Install git
+RUN apk update && apk add git openssh-client
+
+# Trust GitHub's RSA host key
+RUN mkdir -p -m 0600 ~/.ssh && ssh-keyscan github.com >> ~/.ssh/known_hosts
+
+# Install app dependencies
+RUN pnpm install
+
+# Copy the console directory contents into the container at /app
+COPY console .
+
+# Build the application
+RUN pnpm build
+
+# ---- Serve Stage ----
+FROM nginx:alpine
+
+# Copy the built app to our served directory
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Expose the port nginx is bound to
+EXPOSE 4200
+
+# Use custom nginx.conf
+COPY console/nginx.conf /etc/nginx/conf.d/default.conf
+
+# Start Nginx server
+CMD ["nginx", "-g", "daemon off;"]
--- a/console/README.md
+++ b/console/README.md
@@ -0,0 +1,22 @@
+<div id="hero">
+  <p align="center" dir="auto">
+      <a href="https://fleetbase.io" rel="nofollow">
+        <img src="https://user-images.githubusercontent.com/58805033/191936702-fed04b0f-7966-4041-96d0-95e27bf98248.png" alt="Fleetbase logo" width="600" height="140" style="max-width: 100%;">
+      </a>
+    </p>
+    <h2 align="center" dir="auto">
+      Fleetbase Console
+    </h2>
+</div>
+
+<p align="center" dir="auto">
+  <img src="https://user-images.githubusercontent.com/816371/246987420-deef79fa-e30c-4ce9-8a04-0dee990ffd9d.png" alt="Fleetbase Console" width="600" style="max-width: 100%;" />
+</p>
+
+# ⭐️ Overview
+
+<p>The Fleetbase Console, a vital component of the Fleetbase Platform, serves as the graphical user interface that facilitates interaction with all Fleetbase extensions. It's architecturally designed to be lightweight, primarily employing Ember Engines for its operational foundation. Ember Engines, a scalable development paradigm for ambitious web applications, allow the Console to dynamically load and manage extensions, ensuring a streamlined and efficient user experience.</p>
+
+<p>The responsibilities of the Console are kept minimalistic to maintain its performance and agility. The Console's key responsibilities encompass administration management, configuration of organization and user settings, and establishing a robust connection to the Fleetbase extensions repository. In its administrative capacity, it provides an intuitive interface for configuring the Fleetbas instance.</p>
+
+<p>Lastly, the Console plays a pivotal role in connecting to the Fleetbase extensions repository. This provides the flexibility to add, update, or remove extensions as per the organizational needs and preferences, all while ensuring the seamless operation and integrity of the Fleetbase Platform.</p>
--- a/console/app/adapters/application.js
+++ b/console/app/adapters/application.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-core/adapters/application';
--- a/console/app/adapters/brand.js
+++ b/console/app/adapters/brand.js
@@ -0,0 +1,15 @@
+import ApplicationAdapter from './application';
+
+export default class BrandAdapter extends ApplicationAdapter {
+    urlForFindRecord() {
+        return `${this.host}/${this.namespace}/settings/branding`;
+    }
+
+    urlForUpdateRecord() {
+        return `${this.host}/${this.namespace}/settings/branding`;
+    }
+
+    urlForCreateRecord() {
+        return `${this.host}/${this.namespace}/settings/branding`;
+    }
+}
--- a/console/app/app.js
+++ b/console/app/app.js
@@ -0,0 +1,23 @@
+import Application from '@ember/application';
+import Resolver from 'ember-resolver';
+import loadInitializers from 'ember-load-initializers';
+import config from '@fleetbase/console/config/environment';
+import loadExtensions from '@fleetbase/ember-core/utils/load-extensions';
+import mapEngines from '@fleetbase/ember-core/utils/map-engines';
+
+export default class App extends Application {
+    modulePrefix = config.modulePrefix;
+    podModulePrefix = config.podModulePrefix;
+    Resolver = Resolver;
+    extensions = [];
+    engines = {};
+
+    async ready() {
+        const extensions = await loadExtensions();
+
+        this.extensions = extensions;
+        this.engines = mapEngines(extensions);
+    }
+}
+
+loadInitializers(App, config.modulePrefix);
--- a/console/app/components/.gitkeep
+++ b/console/app/components/.gitkeep
--- a/console/app/components/configure/filesystem.hbs
+++ b/console/app/components/configure/filesystem.hbs
@@ -0,0 +1,21 @@
+<ContentPanel @title="Filesystem" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <InputGroup @name="Driver" @helpText="Select the default filesystem driver for Fleetbase to use.">
+        <Select @options={{this.disks}} @value={{this.driver}} @onSelect={{this.setDriver}} @placeholder="Select filesystem driver" class="w-full" disabled={{this.isLoading}} />
+    </InputGroup>
+    {{#if (eq this.driver "s3")}}
+        <InputGroup @name="S3 Bucket" @value={{this.s3Bucket}} disabled={{this.isLoading}} />
+        <InputGroup @name="S3 URL" @value={{this.s3Url}} disabled={{this.isLoading}} />
+        <InputGroup @name="S3 Endpoint" @value={{this.s3Endpoint}} disabled={{this.isLoading}} />
+    {{/if}}
+    {{#if this.testResponse}}
+        <div class="animate-pulse flex flex-row items-center rounded-lg border {{if (eq this.testResponse.status 'error') 'border-red-900 bg-red-800 text-red-100' 'border-green-900 bg-green-800 text-green-100'}} shadow-sm my-2 px-4 py-2">
+            <FaIcon @icon={{if (eq this.testResponse.status 'error') 'triangle-exclamation' 'circle-check'}} class="mr-1.5 {{if (eq this.testResponse.status 'error') 'text-red-200' 'text-green-200'}}" />
+            <span class="text-xs">{{this.this.testResponse.message}}</span>
+        </div>
+    {{/if}}
+    <Button @wrapperClass="mt-3" @icon="plug" @text="Test Config" @onClick={{this.test}} @isLoading={{this.isLoading}} />
+</ContentPanel>
+
+<EmberWormhole @to="next-view-section-subheader-actions">
+    <Button @type="primary" @size="sm" @icon="save" @text="Save Changes" @onClick={{this.save}} @disabled={{this.isLoading}} @isLoading={{this.isLoading}} />
+</EmberWormhole>
--- a/console/app/components/configure/filesystem.js
+++ b/console/app/components/configure/filesystem.js
@@ -0,0 +1,85 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class ConfigureFilesystemComponent extends Component {
+    @service fetch;
+    @service notifications;
+    @tracked isLoading = false;
+    @tracked testResponse;
+    @tracked disks = [];
+    @tracked driver = 'local';
+    @tracked s3Bucket = null;
+    @tracked s3Url = null;
+    @tracked s3Endpoint = null;
+
+    /**
+     * Creates an instance of ConfigureFilesystemComponent.
+     * @memberof ConfigureFilesystemComponent
+     */
+    constructor() {
+        super(...arguments);
+        this.loadConfigValues();
+    }
+
+    @action setConfigValues(config) {
+        for (const key in config) {
+            if (this[key] !== undefined) {
+                this[key] = config[key];
+            }
+        }
+    }
+
+    @action setDriver(driver) {
+        this.driver = driver;
+    }
+
+    @action loadConfigValues() {
+        this.isLoading = true;
+
+        this.fetch
+            .get('settings/filesystem-config')
+            .then((response) => {
+                this.setConfigValues(response);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action save() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/filesystem-config', {
+                driver: this.driver,
+                s3: {
+                    bucket: this.s3Bucket,
+                    url: this.s3Url,
+                    endpoint: this.s3Endpoint,
+                },
+            })
+            .then(() => {
+                this.notifications.success('Filesystem configuration saved.');
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action test() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/test-filesystem-config', {
+                disk: this.driver,
+            })
+            .then((response) => {
+                this.testResponse = response;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}
--- a/console/app/components/configure/mail.hbs
+++ b/console/app/components/configure/mail.hbs
@@ -0,0 +1,27 @@
+<ContentPanel @title="Mail" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <InputGroup @name="Mailer" @helpText="Select the default mailer for Fleetbase to use.">
+        <Select @options={{this.mailers}} @value={{this.mailer}} @onSelect={{this.setMailer}} @placeholder="Select mailer" class="w-full" />
+    </InputGroup>
+    {{#if (eq this.mailer "smtp")}}
+        <InputGroup @name="SMTP Host" @value={{this.smtpHost}} disabled={{this.isLoading}} />
+        <InputGroup @name="SMTP Port" @type="number" @value={{this.smtpPort}} disabled={{this.isLoading}} />
+        <InputGroup @name="SMTP Encryption" @value={{this.smtpEncryption}} disabled={{this.isLoading}} />
+        <InputGroup @name="SMTP Username" @value={{this.smtpUsername}} disabled={{this.isLoading}} />
+        <InputGroup @name="SMTP Password" @type="password" @value={{this.smtpPassword}} disabled={{this.isLoading}} />
+        <InputGroup @name="SMTP Timeout" @value={{this.smtpTimeout}} disabled={{this.isLoading}} />
+        <InputGroup @name="SMTP Auth Mode" @value={{this.smtpAuth_mode}} disabled={{this.isLoading}} />
+    {{/if}}
+    <InputGroup @name="From Address" @helpText="Input the email address for Fleetbase to send emails from." @value={{this.fromAddress}} @placeholder="From Address" disabled={{this.isLoading}} />
+    <InputGroup @name="From Name" @helpText="Input the name for Fleetbase to send emails from." @value={{this.fromName}} @placeholder="From Name" disabled={{this.isLoading}} />
+    {{#if this.testResponse}}
+        <div class="animate-pulse flex flex-row items-center rounded-lg border {{if (eq this.testResponse.status 'error') 'border-red-900 bg-red-800 text-red-100' 'border-green-900 bg-green-800 text-green-100'}} shadow-sm my-2 px-4 py-2">
+            <FaIcon @icon={{if (eq this.testResponse.status 'error') 'triangle-exclamation' 'circle-check'}} class="mr-1.5 {{if (eq this.testResponse.status 'error') 'text-red-200' 'text-green-200'}}" />
+            <span class="text-xs">{{this.this.testResponse.message}}</span>
+        </div>
+    {{/if}}
+    <Button @wrapperClass="mt-3" @icon="plug" @text="Test Config" @onClick={{this.test}} @isLoading={{this.isLoading}} />
+</ContentPanel>
+
+<EmberWormhole @to="next-view-section-subheader-actions">
+    <Button @type="primary" @size="sm" @icon="save" @text="Save Changes" @onClick={{this.save}} @disabled={{this.isLoading}} @isLoading={{this.isLoading}} />
+</EmberWormhole>
--- a/console/app/components/configure/mail.js
+++ b/console/app/components/configure/mail.js
@@ -0,0 +1,108 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class ConfigureMailComponent extends Component {
+    @service fetch;
+    @service notifications;
+    @tracked isLoading = false;
+    @tracked testResponse;
+    @tracked mailers = [];
+    @tracked mailer = 'smtp';
+    @tracked fromAddress = null;
+    @tracked fromName = null;
+    @tracked smtpHost = 'smtp.mailgun.org';
+    @tracked smtpPort = 587;
+    @tracked smtpEncryption = 'tls';
+    @tracked smtpUsername = null;
+    @tracked smtpPassword = null;
+    @tracked smtpTimeout = null;
+    @tracked smtpAuth_mode = null;
+
+    /**
+     * Creates an instance of ConfigureFilesystemComponent.
+     * @memberof ConfigureFilesystemComponent
+     */
+    constructor() {
+        super(...arguments);
+        this.loadConfigValues();
+    }
+
+    @action setConfigValues(config) {
+        for (const key in config) {
+            if (this[key] !== undefined) {
+                this[key] = config[key];
+            }
+        }
+    }
+
+    @action setMailer(mailer) {
+        this.mailer = mailer;
+    }
+
+    @action serializeSmtpConfig() {
+        return {
+            host: this.smtpHost,
+            port: this.smtpPort,
+            encryption: this.smtpEncryption,
+            username: this.smtpUsername,
+            password: this.smtpPassword,
+            timeout: this.smtpTimeout,
+            auth_mode: this.smtpAuth_mode,
+        };
+    }
+
+    @action loadConfigValues() {
+        this.isLoading = true;
+
+        this.fetch
+            .get('settings/mail-config')
+            .then((response) => {
+                this.setConfigValues(response);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action test() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/test-mail-config', {
+                mailer: this.mailer,
+                from: {
+                    address: this.fromAddress,
+                    name: this.fromName,
+                },
+                smtp: this.serializeSmtpConfig(),
+            })
+            .then((response) => {
+                this.testResponse = response;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action save() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/mail-config', {
+                mailer: this.mailer,
+                from: {
+                    address: this.fromAddress,
+                    name: this.fromName,
+                },
+                smtp: this.serializeSmtpConfig(),
+            })
+            .then(() => {
+                this.notifications.success('Mail configuration saved.');
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}
--- a/console/app/components/configure/notification-channels.hbs
+++ b/console/app/components/configure/notification-channels.hbs
@@ -0,0 +1,52 @@
+<ContentPanel @title="APN Configutation" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <InputGroup @name="APN Key ID" @value={{this.apn.key_id}} disabled={{this.isLoading}} />
+    <InputGroup @name="APN Team ID" @value={{this.apn.team_id}} disabled={{this.isLoading}} />
+    <InputGroup @name="APN App Bundle ID" @value={{this.apn.app_bundle_id}} disabled={{this.isLoading}} />
+    {{!-- <InputGroup @name="APN Private Key" disabled={{this.isLoading}}>
+        <Textarea class="form-input w-full" @value={{this.apn.private_key_content}} placeholder="APN Private Key" rows="10" disabled={{this.isLoading}} />
+    </InputGroup> --}}
+    <InputGroup @wrapperClass="flex flex-row items-center">
+        <UploadButton @name="apn-key" @accept="text/plain,application/x-pem-file,application/x-pkcs12,application/x-x509-ca-cert,.p12,.pem,.p8" @onFileAdded={{this.uploadApnKey}} @buttonText="Upload P8 Key File" @uploadIcon="upload" class="w-auto m-0i mt-0i" />
+        {{#if this.apn.private_key_file}}
+            <div class="ml-2.5 text-sm dark:text-white text-black flex flex-row items-center border border-blue-500 rounded-lg px-2 py-0.5 -mt-1">
+                <FaIcon @icon="file-text" @size="sm" class="mr-2 dark:text-white text-black" />
+                <span>{{this.apn.private_key_file.original_filename}}</span>
+                <a href="javascript:;" class="text-red-500 ml-2" {{on "click" this.removeApnFile}}><FaIcon @icon="times" class="text-red-500" /></a>
+            </div>
+        {{/if}}
+    </InputGroup>
+    <InputGroup>
+        <Checkbox @label="APN Production" @value={{this.apn.production}} @onToggle={{fn (mut this.apn.production)}} @disabled={{this.isLoading}} />
+    </InputGroup>
+    {{#if this.testResponse}}
+        <div class="animate-pulse flex flex-row items-center rounded-lg border {{if (eq this.testResponse.status 'error') 'border-red-900 bg-red-800 text-red-100' 'border-green-900 bg-green-800 text-green-100'}} shadow-sm my-2 px-4 py-2">
+            <FaIcon @icon={{if (eq this.testResponse.status 'error') 'triangle-exclamation' 'circle-check'}} class="mr-1.5 {{if (eq this.testResponse.status 'error') 'text-red-200' 'text-green-200'}}" />
+            <span class="text-xs">{{this.this.testResponse.message}}</span>
+        </div>
+    {{/if}}
+    <div class="mt-3 rounded-lg bg-gray-900 shadow-inner p-3">
+        <div class="flex flex-col space-y-2">
+            <div class="flex flex-row items-center">
+                <div class="text-sm w-40">Title:</div>
+                <Input @value={{this.testTitle}} placeholder="Push Notification Title" class="form-input flex-1" />
+            </div>
+            <div class="flex flex-row items-center">
+                <div class="text-sm w-40">Message:</div>
+                <Input @value={{this.testMessage}} placeholder="Push Notification Message" class="form-input flex-1" />
+            </div>
+            <div class="flex flex-row items-center">
+                <div class="text-sm w-40">APN Device Token:</div>
+                <Input @value={{this.apnToken}} placeholder="APN Device Token" class="form-input flex-1" />
+            </div>
+            <div class="flex flex-row items-center">
+                <div class="text-sm w-40">FCM Device Token:</div>
+                <Input @value={{this.fcmToken}} placeholder="FCM Device Token" class="form-input flex-1" />
+            </div>
+        </div>
+        <Button @wrapperClass="mt-3" @icon="plug" @text="Test Config" @onClick={{this.test}} @isLoading={{this.isLoading}} />
+    </div>
+</ContentPanel>
+
+<EmberWormhole @to="next-view-section-subheader-actions">
+    <Button @type="primary" @size="sm" @icon="save" @text="Save Changes" @onClick={{this.save}} @disabled={{this.isLoading}} @isLoading={{this.isLoading}} />
+</EmberWormhole>
--- a/console/app/components/configure/notification-channels.js
+++ b/console/app/components/configure/notification-channels.js
@@ -0,0 +1,127 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class ConfigureNotificationChannelsComponent extends Component {
+    @service fetch;
+    @service notifications;
+    @service currentUser;
+    @tracked isLoading = false;
+    @tracked testResponse;
+    @tracked testTitle = 'Hello World from Fleetbase 🚀';
+    @tracked testMessage = 'This is a test push notification!';
+    @tracked apnToken;
+    @tracked fcmToken;
+    @tracked apn = {
+        key_id: '',
+        team_id: '',
+        app_bundle_id: '',
+        private_key_path: '',
+        private_key_file_id: '',
+        private_key_file: null,
+        production: true,
+    };
+    @tracked fcm = {
+        firebase_credentials_json: '',
+        firebase_database_url: '',
+        firebase_project_name: '',
+    };
+
+    constructor() {
+        super(...arguments);
+        this.loadConfigValues();
+    }
+
+    @action removeApnFile() {
+        const apnConfig = this.apn;
+        apnConfig.private_key_file = null;
+        apnConfig.private_key_file_id = '';
+        apnConfig.private_key_path = '';
+
+        this.apn = apnConfig;
+    }
+
+    @action uploadApnKey(file) {
+        try {
+            this.fetch.uploadFile.perform(
+                file,
+                {
+                    disk: 'local',
+                    path: `apn`,
+                    subject_uuid: this.currentUser.companyId,
+                    subject_type: `company`,
+                    type: `apn_key`,
+                },
+                (uploadedFile) => {
+                    const apnConfig = this.apn;
+                    apnConfig.private_key_file = uploadedFile;
+                    apnConfig.private_key_file_id = uploadedFile.id;
+                    apnConfig.private_key_path = uploadedFile.path;
+
+                    this.apn = apnConfig;
+                }
+            );
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action setConfigValues(config) {
+        for (const key in config) {
+            if (this[key] !== undefined) {
+                this[key] = config[key];
+            }
+        }
+    }
+
+    @action loadConfigValues() {
+        this.isLoading = true;
+
+        this.fetch
+            .get('settings/notification-channels-config')
+            .then((response) => {
+                this.setConfigValues(response);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action save() {
+        this.isLoading = true;
+
+        const apnConfig = this.apn;
+        delete apnConfig.private_key_file;
+
+        this.fetch
+            .post('settings/notification-channels-config', {
+                apn: apnConfig,
+            })
+            .then(() => {
+                this.notifications.success("Notification channel's configuration saved.");
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action test() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/test-notification-channels-config', {
+                apn: this.apn,
+                title: this.testTitle,
+                message: this.testMessage,
+                apnToken: this.apnToken,
+                fcmToken: this.fcmToken,
+            })
+            .then((response) => {
+                this.testResponse = response;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}
--- a/console/app/components/configure/queue.hbs
+++ b/console/app/components/configure/queue.hbs
@@ -0,0 +1,25 @@
+<ContentPanel @title="Queue" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <InputGroup @name="Driver" @helpText="Select the default queue driver for Fleetbase to use.">
+        <Select @options={{this.connections}} @value={{this.driver}} @onSelect={{this.setDriver}} @placeholder="Select queue driver" disabled={{this.isLoading}} class="w-full" />
+    </InputGroup>
+    {{#if (eq this.driver "beanstalkd")}}
+        <InputGroup @name="Beanstalk Host" @value={{this.beanstalkdHost}} disabled={{this.isLoading}} />
+        <InputGroup @name="Beanstalk Queue" @value={{this.beanstalkdQueue}} />
+    {{/if}}
+    {{#if (eq this.driver "sqs")}}
+        <InputGroup @name="SQS Prefix" @value={{this.sqsPrefix}} disabled={{this.isLoading}} />
+        <InputGroup @name="SQS Queue" @value={{this.sqsQueue}} disabled={{this.isLoading}} />
+        <InputGroup @name="SQS Suffix" @value={{this.sqsSuffix}} disabled={{this.isLoading}} />
+    {{/if}}
+    {{#if this.testResponse}}
+        <div class="animate-pulse flex flex-row items-center rounded-lg border {{if (eq this.testResponse.status 'error') 'border-red-900 bg-red-800 text-red-100' 'border-green-900 bg-green-800 text-green-100'}} shadow-sm my-2 px-4 py-2">
+            <FaIcon @icon={{if (eq this.testResponse.status 'error') 'triangle-exclamation' 'circle-check'}} class="mr-1.5 {{if (eq this.testResponse.status 'error') 'text-red-200' 'text-green-200'}}" />
+            <span class="text-xs">{{this.this.testResponse.message}}</span>
+        </div>
+    {{/if}}
+    <Button @wrapperClass="mt-3" @icon="plug" @text="Test Config" @onClick={{this.test}} @isLoading={{this.isLoading}} />
+</ContentPanel>
+
+<EmberWormhole @to="next-view-section-subheader-actions">
+    <Button @type="primary" @size="sm" @icon="save" @text="Save Changes" @onClick={{this.save}} @disabled={{this.isLoading}} @isLoading={{this.isLoading}} />
+</EmberWormhole>
--- a/console/app/components/configure/queue.js
+++ b/console/app/components/configure/queue.js
@@ -0,0 +1,91 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class ConfigureQueueComponent extends Component {
+    @service fetch;
+    @service notifications;
+    @tracked isLoading = false;
+    @tracked testResponse;
+    @tracked connections = [];
+    @tracked driver = 'sync';
+    @tracked sqsPrefix = null;
+    @tracked sqsQueue = null;
+    @tracked sqsSuffix = null;
+    @tracked beanstalkdHost = 'localhost';
+    @tracked beanstalkdQueue = 'default';
+
+    /**
+     * Creates an instance of ConfigureQueueComponent.
+     * @memberof ConfigureQueueComponent
+     */
+    constructor() {
+        super(...arguments);
+        this.loadConfigValues();
+    }
+
+    @action setConfigValues(config) {
+        for (const key in config) {
+            if (this[key] !== undefined) {
+                this[key] = config[key];
+            }
+        }
+    }
+
+    @action setDriver(driver) {
+        this.driver = driver;
+    }
+
+    @action loadConfigValues() {
+        this.isLoading = true;
+
+        this.fetch
+            .get('settings/queue-config')
+            .then((response) => {
+                this.setConfigValues(response);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action save() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/queue-config', {
+                driver: this.driver,
+                sqs: {
+                    prefix: this.sqsPrefix,
+                    queue: this.sqsQueue,
+                    suffix: this.sqsSuffix,
+                },
+                beanstalkd: {
+                    host: this.beanstalkdHost,
+                    queue: this.beanstalkdQueue,
+                },
+            })
+            .then(() => {
+                this.notifications.success('Queue configuration saved.');
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action test() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/test-queue-config', {
+                queue: this.driver,
+            })
+            .then((response) => {
+                this.testResponse = response;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}
--- a/console/app/components/configure/services.hbs
+++ b/console/app/components/configure/services.hbs
@@ -0,0 +1,45 @@
+<ContentPanel @title="AWS" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <InputGroup @name="AWS Access Key" @value={{this.awsKey}} disabled={{this.isLoading}} />
+    <InputGroup @name="AWS Access Secret" @value={{this.awsSecret}} disabled={{this.isLoading}} />
+    <InputGroup @name="AWS Region" @value={{this.awsRegion}} disabled={{this.isLoading}} />
+</ContentPanel>
+
+<ContentPanel @title="Google Maps" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <InputGroup @name="Google Maps API Key" @value={{this.googleMapsApiKey}} disabled={{this.isLoading}} />
+    <InputGroup @name="Google Maps Locale" @value={{this.googleMapsLocale}} disabled={{this.isLoading}} />
+</ContentPanel>
+
+<ContentPanel @title="Twilio" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <InputGroup @name="Twilio SID" @value={{this.twilioSid}} disabled={{this.isLoading}} />
+    <InputGroup @name="Twilio Token" @value={{this.twilioToken}} disabled={{this.isLoading}} />
+    <InputGroup @name="Twilio From" @value={{this.twilioFrom}} disabled={{this.isLoading}} />
+    {{#if this.twilioTestResponse}}
+        <div class="animate-pulse flex flex-row items-center rounded-lg border {{if (eq this.twilioTestResponse.status 'error') 'border-red-900 bg-red-800 text-red-100' 'border-green-900 bg-green-800 text-green-100'}} shadow-sm my-2 px-4 py-2">
+            <FaIcon @icon={{if (eq this.twilioTestResponse.status 'error') 'triangle-exclamation' 'circle-check'}} class="mr-1.5 {{if (eq this.twilioTestResponse.status 'error') 'text-red-200' 'text-green-200'}}" />
+            <span class="text-xs">{{this.this.twilioTestResponse.message}}</span>
+        </div>
+    {{/if}}
+    <div class="flex flex-row items-center mt-3">
+        <Input @value={{this.twilioTestPhone}} @type="tel" placeholder="Send Test SMS Here" class="form-input form-input-sm" />
+        <Button @wrapperClass="ml-2" @icon="plug" @text="Test Twilio Config" @onClick={{this.testTwilio}} @isLoading={{this.isLoading}} @disabled={{not this.twilioTestPhone}} />
+    </div>
+</ContentPanel>
+
+<ContentPanel @title="Sentry" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <InputGroup @name="Sentry DSN" @value={{this.sentryDsn}} disabled={{this.isLoading}} />
+    {{#if this.sentryTestResponse}}
+        <div class="animate-pulse flex flex-row items-center rounded-lg border {{if (eq this.sentryTestResponse.status 'error') 'border-red-900 bg-red-800 text-red-100' 'border-green-900 bg-green-800 text-green-100'}} shadow-sm my-2 px-4 py-2">
+            <FaIcon @icon={{if (eq this.sentryTestResponse.status 'error') 'triangle-exclamation' 'circle-check'}} class="mr-1.5 {{if (eq this.sentryTestResponse.status 'error') 'text-red-200' 'text-green-200'}}" />
+            <span class="text-xs">{{this.this.sentryTestResponse.message}}</span>
+        </div>
+    {{/if}}
+    <Button @wrapperClass="mt-3" @icon="plug" @text="Test Sentry Config" @onClick={{this.testSentry}} @isLoading={{this.isLoading}} />
+</ContentPanel>
+
+<ContentPanel @title="IP Info" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <InputGroup @name="IP Info API Key" @value={{this.ipinfoApiKey}} disabled={{this.isLoading}} />
+</ContentPanel>
+
+<EmberWormhole @to="next-view-section-subheader-actions">
+    <Button @type="primary" @size="sm" @icon="save" @text="Save Changes" @onClick={{this.save}} @disabled={{this.isLoading}} @isLoading={{this.isLoading}} />
+</EmberWormhole>
--- a/console/app/components/configure/services.js
+++ b/console/app/components/configure/services.js
@@ -0,0 +1,130 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class ConfigureServicesComponent extends Component {
+    @service fetch;
+    @service notifications;
+    @tracked isLoading = false;
+
+    /** aws service */
+    @tracked awsKey = null;
+    @tracked awsSecret = null;
+    @tracked awsRegion = null;
+
+    /** ipinfo service */
+    @tracked ipinfoApiKey = null;
+
+    /** google maps service */
+    @tracked googleMapsApiKey = null;
+    @tracked googleMapsLocale = 'us';
+
+    /** twilio service */
+    @tracked twilioSid = null;
+    @tracked twilioToken = null;
+    @tracked twilioFrom = null;
+    @tracked twilioTestPhone = null;
+    @tracked twilioTestResponse;
+
+    /** sentry service */
+    @tracked sentryDsn = null;
+    @tracked sentryTestResponse;
+
+    /**
+     * Creates an instance of ConfigureServicesComponent.
+     * @memberof ConfigureServicesComponent
+     */
+    constructor() {
+        super(...arguments);
+        this.loadConfigValues();
+    }
+
+    @action setConfigValues(config) {
+        for (const key in config) {
+            if (this[key] !== undefined) {
+                this[key] = config[key];
+            }
+        }
+    }
+
+    @action loadConfigValues() {
+        this.isLoading = true;
+
+        this.fetch
+            .get('settings/services-config')
+            .then((response) => {
+                this.setConfigValues(response);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action save() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/services-config', {
+                aws: {
+                    key: this.awsKey,
+                    secret: this.awsSecret,
+                    region: this.awsRegion,
+                },
+                ipinfo: {
+                    api_key: this.ipinfoApiKey,
+                },
+                googleMaps: {
+                    api_key: this.googleMapsApiKey,
+                    locale: this.googleMapsLocale,
+                },
+                twilio: {
+                    sid: this.twilioSid,
+                    token: this.twilioToken,
+                    from: this.twilioFrom,
+                },
+                sentry: {
+                    dsn: this.sentryDsn,
+                },
+            })
+            .then(() => {
+                this.notifications.success('Services configuration saved.');
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action testTwilio() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/test-twilio-config', {
+                sid: this.twilioSid,
+                token: this.twilioToken,
+                from: this.twilioFrom,
+                phone: this.twilioTestPhone,
+            })
+            .then((response) => {
+                this.twilioTestResponse = response;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action testSentry() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/test-sentry-config', {
+                dsn: this.sentryDsn,
+            })
+            .then((response) => {
+                this.sentryTestResponse = response;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}
--- a/console/app/components/configure/socket.hbs
+++ b/console/app/components/configure/socket.hbs
@@ -0,0 +1,46 @@
+<ContentPanel @title="SocketCluster Connection" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <p class="mb-4">The SocketCluster configuration cannot be changed at this time.</p>
+    <div id="output" class="font-mono rounded-lg max-h-full px-6 py-4 overflow-y-scroll bg-black shadow-inner dark:shadow-none">
+        <div class="flex items-center justify-between mb-4">
+            <div class="block w-1/2 font-mono text-sm font-semibold text-green-300">
+                Output
+            </div>
+            {{#if this.events.length}}
+                <div class="flex items-center justify-end w-1/2 text-sm text-green-300">
+                    <Spinner @iconClass="green-loader" />
+
+                    <span class="ml-2 text-sm font-mono">
+                        Awaiting events...
+                    </span>
+                </div>
+            {{/if}}
+        </div>
+
+        <div>
+            {{#each this.events as |event|}}
+                <div class="mb-3 text-sm font-mono rounded-lg shadow-sm flex flex-row">
+                    <div class="text-{{event.color}}-300 uppercase text-sm font-mono pr-2 flex-shrink-0">
+                        [{{event.time}}]:
+                    </div>
+                    <div class="text-{{event.color}}-300 text-sm font-mono">
+                        {{html-safe event.content}}
+                    </div>
+                </div>
+            {{else}}
+                <div class="flex items-center mt-6 text-green-300">
+                    <Spinner @iconClass="green-loader" />
+                    <span class="ml-2 text-sm font-mono">
+                        Awaiting events...
+                    </span>
+                </div>
+            {{/each}}
+        </div>
+    </div>
+    {{#if this.testResponse}}
+        <div class="animate-pulse flex flex-row items-center rounded-lg border {{if (eq this.testResponse.status 'error') 'border-red-900 bg-red-800 text-red-100' 'border-green-900 bg-green-800 text-green-100'}} shadow-sm my-2 px-4 py-2">
+            <FaIcon @icon={{if (eq this.testResponse.status 'error') 'triangle-exclamation' 'circle-check'}} class="mr-1.5 {{if (eq this.testResponse.status 'error') 'text-red-200' 'text-green-200'}}" />
+            <span class="text-xs">{{this.this.testResponse.message}}</span>
+        </div>
+    {{/if}}
+    <Button @wrapperClass="mt-3" @icon="plug" @text="Test Socket Connection" @onClick={{this.testSocketConnection}} @isLoading={{this.isLoading}} />
+</ContentPanel>
--- a/console/app/components/configure/socket.js
+++ b/console/app/components/configure/socket.js
@@ -0,0 +1,165 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { format } from 'date-fns';
+
+export default class ConfigureSocketComponent extends Component {
+    /**
+     * Inject the `router` service
+     *
+     * @var {Service}
+     * @memberof ConfigureSocketComponent
+     */
+    @service router;
+
+    /**
+     * Inject the `fetch` service
+     *
+     * @var {Service}
+     * @memberof ConfigureSocketComponent
+     */
+    @service fetch;
+
+    /**
+     * Inject the `notifications` service
+     *
+     * @var {Service}
+     * @memberof ConfigureSocketComponent
+     */
+    @service notifications;
+
+    /**
+     * Inject the `socket` service
+     *
+     * @var {Service}
+     * @memberof ConfigureSocketComponent
+     */
+    @service socket;
+
+    /**
+     * State of the test request.
+     *
+     * @memberof ConfigureSocketComponent
+     */
+    @tracked isLoading = null;
+
+    /**
+     * The response form testing the socket.
+     *
+     * @memberof ConfigureSocketComponent
+     */
+    @tracked testResponse = null;
+
+    /**
+     * Incoming events logged from test socket channel.
+     *
+     * @memberof ConfigureSocketComponent
+     */
+    @tracked events = [];
+
+    /**
+     * Date format to use for socket console events.
+     *
+     * @memberof ConfigureSocketComponent
+     */
+    consoleDateFormat = 'MMM-dd HH:mm';
+
+    /**
+     * Creates an instance of ConfigureSocketComponent.
+     * @memberof ConfigureSocketComponent
+     */
+    constructor() {
+        super(...arguments);
+        this.listenToTestSocket();
+    }
+
+    /**
+     * Send a request to test the socket connection.
+     *
+     * @memberof ConfigureSocketComponent
+     */
+    @action testSocketConnection() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/test-socket', {
+                channel: 'test',
+            })
+            .then((response) => {
+                this.testResponse = response;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    /**
+     * Opens socket and logs all incoming events.
+     *
+     * @memberof ConfigureSocketComponent
+     */
+    @action async listenToTestSocket() {
+        // Create SocketClusterClient
+        const socket = this.socket.instance();
+
+        // Listen for socket connection errors
+        (async () => {
+            // eslint-disable-next-line no-unused-vars
+            for await (let event of socket.listener('error')) {
+                // Push an event or notification for socket connection here
+                this.events.pushObject({
+                    time: format(new Date(), this.consoleDateFormat),
+                    content: 'Socket connection error!',
+                    color: 'red',
+                });
+            }
+        })();
+
+        // Listen for socket connection
+        (async () => {
+            // eslint-disable-next-line no-unused-vars
+            for await (let event of socket.listener('connect')) {
+                // Push an event or notification for socket connection here
+                this.events.pushObject({
+                    time: format(new Date(), this.consoleDateFormat),
+                    content: 'Socket is connected',
+                    color: 'green',
+                });
+            }
+        })();
+
+        // Listed on company channel
+        const channel = socket.subscribe('test');
+
+        // Listen for channel subscription
+        (async () => {
+            // eslint-disable-next-line no-unused-vars
+            for await (let event of channel.listener('subscribe')) {
+                // Push an event or notification for channel subscription here
+                this.events.pushObject({
+                    time: format(new Date(), this.consoleDateFormat),
+                    content: `Socket subscribed to test channel`,
+                    color: 'blue',
+                });
+            }
+        })();
+
+        // Listen for channel subscription
+        (async () => {
+            for await (let data of channel) {
+                this.events.pushObject({
+                    time: format(new Date(), this.consoleDateFormat),
+                    content: JSON.stringify(data, undefined, 2),
+                    color: 'green',
+                });
+            }
+        })();
+
+        // disconnect when transitioning
+        this.router.on('routeWillChange', () => {
+            channel.close();
+            this.events = [];
+        });
+    }
+}
--- a/console/app/components/dashboard.hbs
+++ b/console/app/components/dashboard.hbs
@@ -0,0 +1,7 @@
+<div class="fleetbase-dashboard-grid">
+    <div class="grid grid-cols-1 md:grid-cols-12 gap-4">
+        {{#each this.dashboards as |dashboard index|}}
+            <Dashboard::Create @index={{index}} @dashboard={{dashboard}} />
+        {{/each}}
+    </div>
+</div>
--- a/console/app/components/dashboard.js
+++ b/console/app/components/dashboard.js
@@ -0,0 +1,48 @@
+import Component from '@glimmer/component';
+import loadExtensions from '@fleetbase/ember-core/utils/load-extensions';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+import { tracked } from '@glimmer/tracking';
+import { task } from 'ember-concurrency-decorators';
+
+export default class DashboardComponent extends Component {
+    @service fetch;
+    @tracked extensions;
+    @tracked dashboards = [];
+    @tracked isLoading;
+
+    constructor() {
+        super(...arguments);
+        this.loadExtensions();
+    }
+
+    @action async loadExtensions() {
+        this.extensions = await loadExtensions();
+        this.loadDashboardBuilds.perform();
+    }
+
+    @task *loadDashboard(extension) {
+        this.isLoading = extension.extension;
+        let dashboardBuild;
+
+        try {
+            dashboardBuild = yield this.fetch.get(extension.fleetbase.dashboard, {}, { namespace: '' });
+        } catch {
+            return;
+        }
+
+        if (isArray(dashboardBuild)) {
+            this.dashboards = [...this.dashboards, ...dashboardBuild.map((build) => ({ ...build, extension }))];
+        }
+    }
+
+    @task({ enqueue: true, maxConcurrency: 1 }) *loadDashboardBuilds() {
+        const extensionsWithDashboards = this.extensions.filter((extension) => typeof extension.fleetbase?.dashboard === 'string');
+
+        for (let i = 0; i < extensionsWithDashboards.length; i++) {
+            const extension = extensionsWithDashboards[i];
+            yield this.loadDashboard.perform(extension);
+        }
+    }
+}
--- a/console/app/components/dashboard/count.hbs
+++ b/console/app/components/dashboard/count.hbs
@@ -0,0 +1,6 @@
+<div class="dashboard-component-count lg:col-span-2">
+    <h3 class="text-sm dark:text-gray-100 text-black mb-4">{{@options.title}}</h3>
+    <h1 class="text-3xl font-bold dark:text-gray-100 text-black mb-4">
+        {{this.displayValue}}
+    </h1>
+</div>
--- a/console/app/components/dashboard/count.js
+++ b/console/app/components/dashboard/count.js
@@ -0,0 +1,43 @@
+import Component from '@glimmer/component';
+import { computed } from '@ember/object';
+import formatCurrency from '@fleetbase/ember-ui/utils/format-currency';
+import formatMeters from '@fleetbase/ember-ui/utils/format-meters';
+import formatBytes from '@fleetbase/ember-ui/utils/format-bytes';
+import formatDuration from '@fleetbase/ember-ui/utils/format-duration';
+import formatDate from '@fleetbase/ember-ui/utils/format-date';
+
+export default class DashboardCountComponent extends Component {
+    @computed('args.options.{currency,dateFormat,format,value}') get displayValue() {
+        let format = this.args.options?.format;
+        let currency = this.args.options?.currency;
+        let dateFormat = this.args.options?.dateFormat;
+        let value = this.args.options?.value;
+
+        switch (format) {
+            case 'money':
+                value = formatCurrency([value, currency]);
+                break;
+
+            case 'meters':
+                value = formatMeters([value]);
+                break;
+
+            case 'bytes':
+                value = formatBytes([value]);
+                break;
+
+            case 'duration':
+                value = formatDuration([value]);
+                break;
+
+            case 'date':
+                value = formatDate([value, dateFormat]);
+                break;
+
+            default:
+                break;
+        }
+
+        return value;
+    }
+}
--- a/console/app/components/dashboard/create.hbs
+++ b/console/app/components/dashboard/create.hbs
@@ -0,0 +1,18 @@
+<div class="col-span-{{or @dashboard.size 12}}">
+    <div class="dashboard-title flex flex-col lg:flex-row lg:items-center">
+        <div class="flex flex-row items-center mb-2 lg:mb-0">
+            {{#if this.isLoading}}
+                <Spinner class="mr-2i" />
+            {{/if}}
+            <h2 class="text-sm font-bold dark:text-gray-100 text-black">{{@dashboard.title}}</h2>
+        </div>
+        <div>
+            <Dashboard::QueryParams @params={{@dashboard.queryParams}} @onChange={{this.onQueryParamsChanged}} />
+        </div>
+    </div>
+    <div class="grid grid-cols-2 lg:grid-cols-12 gap-4">
+        {{#each this.dashboard.widgets as |widget|}}
+            {{component (concat "dashboard/" widget.component) options=widget.options}}
+        {{/each}}
+    </div>
+</div>
--- a/console/app/components/dashboard/create.js
+++ b/console/app/components/dashboard/create.js
@@ -0,0 +1,41 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+import { task } from 'ember-concurrency-decorators';
+
+export default class DashboardCreateComponent extends Component {
+    @service fetch;
+    @tracked isLoading = false;
+    @tracked dashboard;
+
+    constructor() {
+        super(...arguments);
+        this.dashboard = this.args.dashboard;
+    }
+
+    @action onQueryParamsChanged(changedParams) {
+        this.reloadDashboard.perform(changedParams);
+    }
+
+    @task *reloadDashboard(params) {
+        const { extension } = this.args.dashboard;
+        const index = this.args.index;
+        let dashboards = [];
+
+        this.isLoading = true;
+
+        try {
+            dashboards = yield this.fetch.get(extension.fleetbase.dashboard, params, { namespace: '' });
+        } catch {
+            return;
+        }
+
+        this.isLoading = false;
+
+        if (isArray(dashboards)) {
+            this.dashboard = dashboards.objectAt(index);
+        }
+    }
+}
--- a/console/app/components/dashboard/query-params.hbs
+++ b/console/app/components/dashboard/query-params.hbs
@@ -0,0 +1,8 @@
+<div class="flex flex-row items-center space-x-3" ...attributes>
+    {{#each-in @params as |param options|}}
+        <div class="flex flex-col lg:flex-row lg:items-center">
+            <label class="hidden lg:flex mr-2 text-sm">{{humanize param}}:</label>
+            {{component options.component onChange=(fn this.onChange param) placeholder=(humanize param) class="form-input-sm"}}
+        </div>
+    {{/each-in}}
+</div>
--- a/console/app/components/dashboard/query-params.js
+++ b/console/app/components/dashboard/query-params.js
@@ -0,0 +1,21 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DashboardQueryParamsComponent extends Component {
+    @tracked changedParams = {};
+
+    @action onChange(param, value) {
+        const component = this.args.params[param].component;
+
+        if (component === 'date-picker') {
+            value = value.formattedDate;
+        }
+
+        this.changedParams = { ...this.changedParams, [param]: value };
+
+        if (typeof this.args.onChange === 'function') {
+            this.args.onChange(this.changedParams);
+        }
+    }
+}
--- a/console/app/components/fleetbase-blog.hbs
+++ b/console/app/components/fleetbase-blog.hbs
@@ -0,0 +1,27 @@
+<div class="fleetbase-blog" ...attributes>
+    <div class="border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-gray-50 rounded-lg shadow-sm flex flex-col">
+        <div class="flex flex-row items-center justify-between rounded-t-lg px-4 py-2 border-b border-gray-200 dark:border-gray-700">
+            <span class="text-base font-bold text-black dark:text-gray-100">Fleetbase Blog</span>
+            <a href="https://www.fleetbase.io/blog" target="_blog" class="flex flex-row items-center text-sm">
+                <FaIcon @icon="arrow-up-right-from-square" @size="xs" class="mr-2" />
+                <span>Visit Blog</span>
+            </a>
+        </div>
+        <div class="px-4 py-2.5">
+            {{#if this.isLoading}}
+                <Spinner />
+            {{else}}
+                <ul class="space-y-2">
+                    {{#each this.posts as |post|}}
+                        <li class="text-sm flex flex-col lg:flex-row">
+                            <a href={{post.link}} target="_blog" class="text-black truncate max-w-lg dark:text-gray-200">
+                                <span class="truncate">{{post.title}}</span>
+                            </a>
+                            <span class="ml-1 text-gray-900 dark:text-gray-400">- {{post.pubDate}}</span>
+                        </li>
+                    {{/each}}
+                </ul>
+            {{/if}}
+        </div>
+    </div>
+</div>
--- a/console/app/components/fleetbase-blog.js
+++ b/console/app/components/fleetbase-blog.js
@@ -0,0 +1,28 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class FleetbaseBlogComponent extends Component {
+    @service fetch;
+    @tracked posts = [];
+    @tracked isLoading = false;
+
+    constructor() {
+        super(...arguments);
+        this.loadBlogPosts();
+    }
+
+    @action loadBlogPosts() {
+        this.isLoading = true;
+
+        return this.fetch
+            .get('lookup/fleetbase-blog')
+            .then((response) => {
+                this.posts = response;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}
--- a/console/app/components/github-card.hbs
+++ b/console/app/components/github-card.hbs
@@ -0,0 +1,49 @@
+<div class="fleetbase-github-card relative flex-1 w-full" ...attributes>
+    <div class="border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-gray-50 rounded-lg shadow-sm flex flex-col">
+        {{#if this.isLoading}}
+            <div class="p-4">
+                <Spinner />
+            </div>
+        {{else}}
+            <div class="flex flex-row p-4 border-b dark:border-gray-700 border-gray-200">
+                <div class="w-12 flex-shrink-0"><img src={{this.data.owner.avatar_url}} alt="fleetbase/fleetbase" class="rounded-full w-8 h-8" width="32" height="32" /></div>
+                <div class="flex-1 -mt-2">
+                    <div class="flex flex-1 flex-row items-center justify-between mb-2">
+                        <a href={{this.data.html_url}} target="_github" class="dark:text-gray-100 text-black text-lg font-semibold">{{this.data.full_name}}</a>
+                        <a href={{this.data.html_url}} target="_github" class="btn btn-xs btn-default">
+                            <FaIcon @icon="star" class="text-yellow-400" />
+                            <span class="hidden lg:flex ml-2.5">Star on Github</span>
+                        </a>
+                    </div>
+                    <p class="dark:text-gray-100 text-black text-sm">{{this.data.description}}</p>
+                    <div class="flex-grow-0 flex mt-2">
+                        <a href={{this.releaseUrl}} class="rounded-lg px-2 py-1 flex flex-row items-center text-xs text-white font-bold font-mono">
+                            <FaIcon @icon="arrow-up-right-from-square" @size="xs" class="mr-2" />
+                            <span>Latest Release: {{this.latestRelease.name}}</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="rounded-b-lg px-4 py-2">
+                <div class="grid grid-cols-12 gap-2">
+                    <div class="col-span-3 dark:text-gray-100 text-black text-xs flex flex-row">
+                        <span class="font-bold mr-1">{{this.data.stargazers_count}}</span>
+                        <span>Stars</span>
+                    </div>
+                    <div class="col-span-3 dark:text-gray-100 text-black text-xs flex flex-row">
+                        <span class="font-bold mr-1">{{this.data.subscribers_count}}</span>
+                        <span>Watchers</span>
+                    </div>
+                    <div class="col-span-3 dark:text-gray-100 text-black text-xs flex flex-row">
+                        <span class="font-bold mr-1">{{this.data.forks_count}}</span>
+                        <span>Forks</span>
+                    </div>
+                    <div class="col-span-3 dark:text-gray-100 text-black text-xs flex flex-row">
+                        <span class="font-bold mr-1">{{this.data.open_issues_count}}</span>
+                        <span><span class="hidden lg:inline-flex">Open</span> Issues</span>
+                    </div>
+                </div>
+            </div>
+        {{/if}}
+    </div>
+</div>
--- a/console/app/components/github-card.js
+++ b/console/app/components/github-card.js
@@ -0,0 +1,58 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action, computed } from '@ember/object';
+import { isArray } from '@ember/array';
+import { isBlank } from '@ember/utils';
+import fetch from 'fetch';
+
+export default class GithubCardComponent extends Component {
+    @tracked data;
+    @tracked tags;
+    @tracked isLoading = false;
+
+    @computed('tags.length') get latestRelease() {
+        if (isArray(this.tags) && this.tags.length) {
+            return this.tags[0];
+        }
+
+        return { name: 'v0.0.1' };
+    }
+
+    @computed('data.releases_url', 'latestRelease.name') get releaseUrl() {
+        let url = 'https://github.com/fleetbase/fleetbase/releases';
+
+        if (!isBlank(this.latestRelease?.name)) {
+            url += '/tag/' + this.latestRelease.name;
+        }
+
+        return url;
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadRepositoryData();
+        this.loadRepositoryTags();
+    }
+
+    @action loadRepositoryData() {
+        this.isLoading = true;
+
+        return fetch('https://api.github.com/repos/fleetbase/fleetbase')
+            .then((response) => {
+                return response.json().then((data) => {
+                    this.data = data;
+                });
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action loadRepositoryTags() {
+        return fetch('https://api.github.com/repos/fleetbase/fleetbase/tags').then((response) => {
+            return response.json().then((data) => {
+                this.tags = data;
+            });
+        });
+    }
+}
--- a/console/app/controllers/.gitkeep
+++ b/console/app/controllers/.gitkeep
--- a/console/app/controllers/application.js
+++ b/console/app/controllers/application.js
@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class ApplicationController extends Controller {}
--- a/console/app/controllers/auth/forgot-password.js
+++ b/console/app/controllers/auth/forgot-password.js
@@ -0,0 +1,68 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class AuthForgotPasswordController extends Controller {
+    /**
+     * Inject the `fetch` service
+     *
+     * @memberof AuthForgotPasswordController
+     */
+    @service fetch;
+
+    /**
+     * Inject the `notifications` service
+     *
+     * @memberof AuthForgotPasswordController
+     */
+    @service notifications;
+
+    /**
+     * The email variable
+     *
+     * @memberof AuthForgotPasswordController
+     */
+    @tracked email;
+
+    /**
+     * The loading state
+     *
+     * @memberof AuthForgotPasswordController
+     */
+    @tracked isLoading;
+
+    /**
+     * Indicator if request has been sent.
+     *
+     * @memberof AuthForgotPasswordController
+     */
+    @tracked isSent = false;
+
+    /**
+     * Sends a secure magic reset link to the user provided email.
+     *
+     * @memberof AuthForgotPasswordController
+     */
+    @action sendSecureLink(event) {
+        // firefox patch
+        event.preventDefault();
+
+        const { email } = this;
+
+        this.isLoading = true;
+
+        this.fetch
+            .post('auth/get-magic-reset-link', { email })
+            .then(() => {
+                this.notifications.success('Check your email to continue!');
+                this.isSent = true;
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}
--- a/console/app/controllers/auth/login.js
+++ b/console/app/controllers/auth/login.js
@@ -0,0 +1,207 @@
+import Controller, { inject as controller } from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import pathToRoute from '@fleetbase/ember-core/utils/path-to-route';
+
+export default class AuthLoginController extends Controller {
+    /**
+     * Inject the `forgotPassword` controller
+     *
+     * @var {Controller}
+     */
+    @controller('auth.forgot-password') forgotPasswordController;
+
+    /**
+     * Inject the `notifications` service
+     *
+     * @var {Service}
+     */
+    @service notifications;
+
+    /**
+     * Inject the `urlSearchParams` service
+     *
+     * @var {Service}
+     */
+    @service urlSearchParams;
+
+    /**
+     * Inject the `session` service
+     *
+     * @var {Service}
+     */
+    @service session;
+
+    /**
+     * Whether or not to remember the users session
+     *
+     * @var {Boolean}
+     */
+    @tracked rememberMe = false;
+
+    /**
+     * The identity to authenticate with
+     *
+     * @var {String}
+     */
+    @tracked identity = null;
+
+    /**
+     * The password to authenticate with
+     *
+     * @var {String}
+     */
+    @tracked password = null;
+
+    /**
+     * Login is validating user input
+     *
+     * @var {Boolean}
+     */
+    @tracked isValidating = false;
+
+    /**
+     * Login is processing
+     *
+     * @var {Boolean}
+     */
+    @tracked isLoading = false;
+
+    /**
+     * If the connection or requesst it taking too long
+     *
+     * @var {Boolean}
+     */
+    @tracked isSlowConnection = false;
+
+    /**
+     * Interval to determine when to timeout the request
+     *
+     * @var {Integer}
+     */
+    @tracked timeout = null;
+
+    /**
+     * Number of failed login attempts
+     *
+     * @var {Integer}
+     */
+    @tracked failedAttempts = 0;
+
+    /**
+     * Authenticate the user
+     *
+     * @void
+     */
+    @action async login(event) {
+        // firefox patch
+        event.preventDefault();
+
+        // get user credentials
+        const { email, password, rememberMe } = this;
+
+        // start loader
+        this.set('isLoading', true);
+
+        // set where to redirect on login
+        this.setRedirect();
+
+        try {
+            await this.session.authenticate('authenticator:fleetbase', { email, password }, rememberMe);
+        } catch (error) {
+            this.failedAttempts++;
+
+            return this.failure(error);
+        }
+
+        if (this.session.isAuthenticated) {
+            this.success();
+        }
+    }
+
+    /**
+     * Transition user to onboarding screen
+     */
+    @action transitionToOnboard() {
+        return this.transitionToRoute('onboard');
+    }
+
+    /**
+     * Transition to forgot password screen, if email is set - set it.
+     */
+    @action forgotPassword() {
+        return this.transitionToRoute('auth.forgot-password').then(() => {
+            if (this.email) {
+                this.forgotPasswordController.email = this.email;
+            }
+        });
+    }
+
+    /**
+     * Sets correct route to send user to after login.
+     *
+     * @void
+     */
+    setRedirect() {
+        const shift = this.urlSearchParams.get('shift');
+
+        if (shift) {
+            this.session.setRedirect(pathToRoute(shift));
+        }
+    }
+
+    /**
+     * Handles the authentication success
+     *
+     * @void
+     */
+    success() {
+        this.reset('success');
+    }
+
+    /**
+     * Handles the authentication failure
+     *
+     * @param {String} error An error message
+     * @void
+     */
+    failure(error) {
+        this.notifications.serverError(error);
+        this.reset('error');
+    }
+
+    /**
+     * Handles the request slow connection
+     *
+     * @void
+     */
+    slowConnection() {
+        this.notifications.error('Experiencing connectivity issues.');
+    }
+
+    /**
+     * Reset the login form
+     *
+     * @param {String} type
+     * @void
+     */
+    reset(type) {
+        // reset login form state
+        this.isLoading = false;
+        this.isSlowConnection = false;
+        // reset login form state depending on type of reset
+        switch (type) {
+            case 'success':
+                this.identity = null;
+                this.password = null;
+                this.isValidating = false;
+                break;
+            case 'error':
+            case 'fail':
+                this.password = null;
+                break;
+        }
+        // clearTimeout(this.timeout);
+    }
+}
--- a/console/app/controllers/auth/reset-password.js
+++ b/console/app/controllers/auth/reset-password.js
@@ -0,0 +1,77 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class AuthResetPasswordController extends Controller {
+    /**
+     * Inject the `fetch` service
+     *
+     * @memberof AuthResetPasswordController
+     */
+    @service fetch;
+
+    /**
+     * Inject the `notifications` service
+     *
+     * @memberof AuthResetPasswordController
+     */
+    @service notifications;
+
+    /**
+     * The code param.
+     *
+     * @memberof AuthResetPasswordController
+     */
+    @tracked code;
+
+    /**
+     * Users new password.
+     *
+     * @memberof AuthResetPasswordController
+     */
+    @tracked password;
+
+    /**
+     * Users new password confirmation.
+     *
+     * @memberof AuthResetPasswordController
+     */
+    @tracked password_confirmation;
+
+    /**
+     * Loading stae of password reset.
+     *
+     * @memberof AuthResetPasswordController
+     */
+    @tracked isLoading;
+
+    /**
+     * The reset password action.
+     *
+     * @memberof AuthResetPasswordController
+     */
+    @action resetPassword(event) {
+        // firefox patch
+        event.preventDefault();
+
+        const { code, password, password_confirmation } = this;
+        const { id } = this.model;
+
+        this.isLoading = true;
+
+        this.fetch
+            .post('auth/reset-password', { link: id, code, password, password_confirmation })
+            .then(() => {
+                this.notifications.success('Your password has been reset! Login to continue.');
+
+                return this.transitionToRoute('auth.login');
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}
--- a/console/app/controllers/console.js
+++ b/console/app/controllers/console.js
@@ -0,0 +1,257 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { getOwner } from '@ember/application';
+import { later } from '@ember/runloop';
+import { action, computed } from '@ember/object';
+import { alias } from '@ember/object/computed';
+import { isArray } from '@ember/array';
+import first from '@fleetbase/ember-core/utils/first';
+
+export default class ConsoleController extends Controller {
+    /**
+     * Inject the `currentUser` service.
+     *
+     * @var {Service}
+     */
+    @service currentUser;
+
+    /**
+     * Inject the `modalsManager` service.
+     *
+     * @var {Service}
+     */
+    @service modalsManager;
+
+    /**
+     * Inject the `session` service.
+     *
+     * @var {Service}
+     */
+    @service session;
+
+    /**
+     * Inject the `fetch` service.
+     *
+     * @var {Service}
+     */
+    @service fetch;
+
+    /**
+     * Inject the `notifications` service.
+     *
+     * @var {Service}
+     */
+    @service notifications;
+
+    /**
+     * Inject the `router` service.
+     *
+     * @var {Service}
+     */
+    @service router;
+
+    /**
+     * Inject the `universe` service.
+     *
+     * @var {Service}
+     */
+    @service universe;
+
+    /**
+     * Authenticated user organizations.
+     *
+     * @var {Array}
+     */
+    @tracked organizations = [];
+
+    /**
+     * Sidebar Context Controls
+     *
+     * @var {SidebarContext}
+     */
+    @tracked sidebarContext;
+
+    /**
+     * Routes which should hide the sidebar menu.
+     *
+     * @var {Array}
+     */
+    @tracked hiddenSidebarRoutes = ['console.home', 'console.extensions', 'console.notifications'];
+
+    /**
+     * Installed extensions.
+     *
+     * @var {Array}
+     */
+    @computed() get extensions() {
+        return getOwner(this).application.extensions;
+    }
+
+    /**
+     * Get the currently authenticated user
+     *
+     * @var {Model}
+     */
+    @alias('currentUser.user') user;
+
+    /**
+     * Creates an instance of ConsoleController.
+     * @memberof ConsoleController
+     */
+    constructor() {
+        super(...arguments);
+
+        this.router.on('routeDidChange', (transition) => {
+            if (this.sidebarContext) {
+                if (this.hiddenSidebarRoutes.includes(transition.to.name)) {
+                    this.sidebarContext.hideNow();
+                } else {
+                    this.sidebarContext.show();
+                }
+            }
+        });
+    }
+
+    /**
+     * Sets the sidebar context
+     *
+     * @param {SidebarContext} sidebarContext
+     * @memberof ConsoleController
+     */
+    @action setSidebarContext(sidebarContext) {
+        this.sidebarContext = sidebarContext;
+        this.universe.sidebarContext = sidebarContext;
+
+        if (this.hiddenSidebarRoutes.includes(this.router.currentRouteName)) {
+            this.sidebarContext.hideNow();
+        }
+    }
+
+    /**
+     * Action handler.
+     *
+     * @void
+     */
+    @action onAction(action, ...params) {
+        if (typeof this[action] === 'function') {
+            this[action](...params);
+        }
+    }
+
+    /**
+     * Action to invalidate and log user out
+     *
+     * @void
+     */
+    @action invalidateSession(noop, event) {
+        event.preventDefault();
+        this.session.invalidateWithLoader();
+    }
+
+    /**
+     * Action to invalidate and log user out
+     *
+     * @void
+     */
+    @action createOrJoinOrg() {
+        const currency = this.currentUser.currency;
+        const country = this.currentUser.country;
+
+        this.modalsManager.show('modals/create-or-join-org', {
+            title: 'Create or join a organization',
+            acceptButtonText: 'Confirm',
+            acceptButtonIcon: 'check',
+            acceptButtonIconPrefix: 'fas',
+            action: 'join',
+            next: null,
+            name: null,
+            decription: null,
+            phone: null,
+            currency,
+            country,
+            timezone: null,
+            changeAction: (action) => {
+                this.modalsManager.setOption('action', action);
+            },
+            confirm: (modal) => {
+                modal.startLoading();
+
+                const { action, next, name, description, phone, currency, country, timezone } = modal.getOptions();
+
+                if (action === 'join') {
+                    return this.fetch.post('auth/join-organization', { next }).then(() => {
+                        this.fetch.flushRequestCache('auth/organizations');
+                        this.notifications.success('You have joined a new organization!');
+                        setTimeout(() => {
+                            window.location.reload();
+                        }, 900);
+                    });
+                }
+
+                return this.fetch
+                    .post('auth/create-organization', {
+                        name,
+                        description,
+                        phone,
+                        currency,
+                        country,
+                        timezone,
+                    })
+                    .then(() => {
+                        this.fetch.flushRequestCache('auth/organizations');
+                        this.notifications.success('You have created a new organization!');
+                        later(
+                            this,
+                            () => {
+                                window.location.reload();
+                            },
+                            900
+                        );
+                    });
+            },
+        });
+    }
+
+    /**
+     * Confirm prompt for user to switch organization
+     *
+     * @void
+     */
+    @action switchOrganization(organization) {
+        if (isArray(organization)) {
+            organization = first(organization);
+        }
+
+        this.modalsManager.confirm({
+            title: `Are you sure you want to switch organization to ${organization.name}?`,
+            body: `By confirming your account will remain logged in, but your primary organization will be switched.`,
+            acceptButtonText: `Yes, I want to switch organization`,
+            acceptButtonScheme: 'primary',
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return this.fetch
+                    .post('auth/switch-organization', { next: organization.uuid })
+                    .then(() => {
+                        this.fetch.flushRequestCache('auth/organizations');
+                        this.notifications.success('You have switched organizations');
+                        setTimeout(() => {
+                            window.location.reload();
+                        }, 900);
+                    })
+                    .catch((error) => {
+                        this.notifications.serverError(error);
+                    });
+            },
+        });
+    }
+
+    @action viewChangelog() {
+        this.modalsManager.show('modals/changelog', {
+            title: 'Changelog',
+            acceptButtonText: 'OK',
+            hideDeclineButton: true,
+        });
+    }
+}
--- a/console/app/controllers/console/account.js
+++ b/console/app/controllers/console/account.js
@@ -0,0 +1,11 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ConsoleAccountController extends Controller {
+    /**
+     * Inject the `universe` service.
+     *
+     * @memberof ConsoleAdminController
+     */
+    @service universe;
+}
--- a/console/app/controllers/console/account/index.js
+++ b/console/app/controllers/console/account/index.js
@@ -0,0 +1,92 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { alias } from '@ember/object/computed';
+
+export default class ConsoleAccountIndexController extends Controller {
+    /**
+     * Inject the `currentUser` service.
+     *
+     * @memberof ConsoleAccountIndexController
+     */
+    @service currentUser;
+
+    /**
+     * Inject the `fetch` service.
+     *
+     * @memberof ConsoleAccountIndexController
+     */
+    @service fetch;
+    /**
+     * Inject the `notifications` service.
+     *
+     * @memberof ConsoleAccountIndexController
+     */
+    @service notifications;
+
+    /**
+     * The loading state of request.
+     *
+     * @memberof ConsoleAccountIndexController
+     */
+    @tracked isLoading = false;
+
+    /**
+     * Alias to the currentUser service user record.
+     *
+     * @memberof ConsoleAccountIndexController
+     */
+    @alias('currentUser.user') user;
+
+    /**
+     * Handle upload of new photo
+     *
+     * @param {UploadFile} file
+     * @memberof ConsoleAccountIndexController
+     */
+    @action uploadNewPhoto(file) {
+        return this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `uploads/${this.user.company_uuid}/users/${this.user.slug}`,
+                key_uuid: this.user.id,
+                key_type: `user`,
+                type: `user_avatar`,
+            },
+            (uploadedFile) => {
+                this.user.setProperties({
+                    avatar_uuid: uploadedFile.id,
+                    avatar_url: uploadedFile.url,
+                });
+
+                return this.user.save();
+            }
+        );
+    }
+
+    /**
+     * Save the Profile settings.
+     *
+     * @return {Promise}
+     * @memberof ConsoleAccountIndexController
+     */
+    @action saveProfile() {
+        const user = this.user;
+
+        this.isLoading = true;
+
+        return user
+            .save()
+            .then((user) => {
+                this.notifications.success('Profile changes saved.');
+                this.currentUser.set('user', user);
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}
--- a/console/app/controllers/console/admin.js
+++ b/console/app/controllers/console/admin.js
@@ -0,0 +1,11 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ConsoleAdminController extends Controller {
+    /**
+     * Inject the `universe` service.
+     *
+     * @memberof ConsoleAdminController
+     */
+    @service universe;
+}
--- a/console/app/controllers/console/admin/branding.js
+++ b/console/app/controllers/console/admin/branding.js
@@ -0,0 +1,158 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+
+export default class ConsoleAdminBrandingController extends Controller {
+    /**
+     * Inject the `fetch` service.
+     *
+     * @memberof ConsoleAdminBrandingController
+     */
+    @service fetch;
+
+    /**
+     * Inject the `notifications` service.
+     *
+     * @memberof ConsoleAdminBrandingController
+     */
+    @service notifications;
+
+    /**
+     * Inject the `theme` service.
+     *
+     * @memberof ConsoleAdminBrandingController
+     */
+    @service theme;
+
+    /**
+     * Status of loading process.
+     *
+     * @memberof ConsoleAdminBrandingController
+     */
+    @tracked isLoading = false;
+
+    /**
+     * Theme options.
+     *
+     * @memberof ConsoleAdminBrandingController
+     */
+    @tracked themeOptions = ['light', 'dark'];
+
+    /**
+     * Set the default theme
+     *
+     * @param {String} theme
+     * @memberof ConsoleAdminBrandingController
+     */
+    @action setTheme(theme) {
+        this.model.default_theme = theme;
+        this.theme.setTheme(theme);
+    }
+
+    /**
+     * Unsets the value of a given key or array of keys on the model.
+     *
+     * @action
+     * @param {string | string[]} key - The key or keys to unset on the model.
+     * @param {*} [newValue=null] - The new value to set for the given key or keys. Defaults to null.
+     * @memberof ConsoleAdminBrandingController
+     */
+    @action unset(key, newValue = null) {
+        if (isArray(key)) {
+            return key.forEach((k) => this.unset(k, undefined));
+        }
+
+        this.model.set(key, newValue);
+    }
+
+    /**
+     * Unsets the icon properties on the model.
+     *
+     * @action
+     * @returns {void} - No return value.
+     * @memberof ConsoleAdminBrandingController
+     */
+    @action unsetIcon() {
+        this.unset(['icon_uuid', 'icon_url']);
+        this.model.set('icon_url', '/images/icon.png');
+    }
+
+    /**
+     * Unsets the logo properties on the model.
+     *
+     * @action
+     * @returns {void} - No return value.
+     * @memberof ConsoleAdminBrandingController
+     */
+    @action unsetLogo() {
+        this.unset(['logo_uuid', 'logo_url']);
+        this.model.set('logo_url', '/images/fleetbase-logo-svg.svg');
+    }
+
+    /**
+     * Save branding settings.
+     *
+     * @return {Promise}
+     * @memberof ConsoleAdminBrandingController
+     */
+    @action save() {
+        this.isLoading = true;
+
+        return this.model
+            .save()
+            .then(() => {
+                this.notifications.success('Branding settings saved.');
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    /**
+     * Handle upload of new console icon
+     *
+     * @param {UploadFile} file
+     * @memberof ConsoleAccountIndexController
+     */
+    @action uploadIcon(file) {
+        this.isLoading = true;
+
+        return this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `uploads/system`,
+                type: `system`,
+            },
+            (uploadedFile) => {
+                this.model.icon_uuid = uploadedFile.id;
+                this.model.icon_url = uploadedFile.url;
+                this.isLoading = false;
+            }
+        );
+    }
+
+    /**
+     * Handle upload of new console logo
+     *
+     * @param {UploadFile} file
+     * @memberof ConsoleAccountIndexController
+     */
+    @action uploadLogo(file) {
+        this.isLoading = true;
+
+        return this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `uploads/system`,
+                type: `system`,
+            },
+            (uploadedFile) => {
+                this.model.logo_uuid = uploadedFile.id;
+                this.model.logo_url = uploadedFile.url;
+                this.isLoading = false;
+            }
+        );
+    }
+}
--- a/console/app/controllers/console/admin/config/cache.js
+++ b/console/app/controllers/console/admin/config/cache.js
@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class ConsoleAdminConfigCacheController extends Controller {}
--- a/console/app/controllers/console/admin/config/database.js
+++ b/console/app/controllers/console/admin/config/database.js
@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class ConsoleAdminConfigDatabaseController extends Controller {}
--- a/console/app/controllers/console/admin/config/filesystem.js
+++ b/console/app/controllers/console/admin/config/filesystem.js
@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class ConsoleAdminConfigFilesystemController extends Controller {}
--- a/console/app/controllers/console/admin/config/mail.js
+++ b/console/app/controllers/console/admin/config/mail.js
@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class ConsoleAdminConfigMailController extends Controller {}
--- a/console/app/controllers/console/admin/config/notification-channels.js
+++ b/console/app/controllers/console/admin/config/notification-channels.js
@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class ConsoleAdminConfigNotificationChannelsController extends Controller {}
--- a/console/app/controllers/console/admin/config/queue.js
+++ b/console/app/controllers/console/admin/config/queue.js
@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class ConsoleAdminConfigQueueController extends Controller {}
--- a/console/app/controllers/console/admin/config/services.js
+++ b/console/app/controllers/console/admin/config/services.js
@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class ConsoleAdminConfigServicesController extends Controller {}
--- a/console/app/controllers/console/admin/notifications.js
+++ b/console/app/controllers/console/admin/notifications.js
@@ -0,0 +1,136 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import createNotificationKey from '../../../utils/create-notification-key';
+
+export default class ConsoleAdminNotificationsController extends Controller {
+    /**
+     * Inject the notifications service.
+     *
+     * @memberof ConsoleAdminNotificationsController
+     */
+    @service notifications;
+
+    /**
+     * Inject the fetch service.
+     *
+     * @memberof ConsoleAdminNotificationsController
+     */
+    @service fetch;
+
+    /**
+     * The notification settings value JSON.
+     *
+     * @memberof ConsoleAdminNotificationsController
+     * @var {Object}
+     */
+    @tracked notificationSettings = {};
+
+    /**
+     * Notification transport methods enabled.
+     *
+     * @memberof ConsoleAdminNotificationsController
+     * @var {Array}
+     */
+    @tracked notificationTransportMethods = ['email', 'sms'];
+
+    /**
+     * Tracked property for the loading state
+     *
+     * @memberof ConsoleAdminNotificationsController
+     * @var {Boolean}
+     */
+    @tracked isLoading = false;
+
+    /**
+     * Creates an instance of ConsoleAdminNotificationsController.
+     * @memberof ConsoleAdminNotificationsController
+     */
+    constructor() {
+        super(...arguments);
+        this.getSettings();
+    }
+
+    /**
+     * Selectes notifiables for settings.
+     *
+     * @param {Object} notification
+     * @param {Array} notifiables
+     * @memberof ConsoleAdminNotificationsController
+     */
+    @action onSelectNotifiable(notification, notifiables) {
+        const notificationKey = createNotificationKey(notification.definition, notification.name);
+        const _notificationSettings = { ...this.notificationSettings };
+
+        if (!_notificationSettings[notificationKey]) {
+            _notificationSettings[notificationKey] = {};
+        }
+
+        _notificationSettings[notificationKey].notifiables = notifiables;
+        _notificationSettings[notificationKey].definition = notification.definition;
+        _notificationSettings[notificationKey].via = notifiables.map((notifiable) => {
+            return {
+                identifier: notifiable.value,
+                methods: this.notificationTransportMethods,
+            };
+        });
+
+        this.mutateNotificationSettings(_notificationSettings);
+    }
+
+    /**
+     * Mutates the notification settings property.
+     *
+     * @param {Object} [_notificationSettings={}]
+     * @memberof ConsoleAdminNotificationsController
+     */
+    mutateNotificationSettings(_notificationSettings = {}) {
+        this.notificationSettings = {
+            ...this.notificationSettings,
+            ..._notificationSettings,
+        };
+    }
+
+    /**
+     * Save notification settings to the server.
+     *
+     * @action
+     * @method saveSettings
+     * @returns {Promise}
+     * @memberof ConsoleAdminNotificationsController
+     */
+    @action saveSettings() {
+        const { notificationSettings } = this;
+
+        this.isLoading = true;
+
+        return this.fetch
+            .post('notifications/save-settings', { notificationSettings })
+            .then(() => {
+                this.notifications.success('Notification settings successfully saved.');
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    /**
+     * Fetches and updates notification settings asynchronously.
+     *
+     * @returns {Promise<void>} A promise for successful retrieval and update, or an error on failure.
+     */
+    getSettings() {
+        return this.fetch
+            .get('notifications/get-settings')
+            .then(({ notificationSettings }) => {
+                this.notificationSettings = notificationSettings;
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            });
+    }
+}
--- a/console/app/controllers/console/home.js
+++ b/console/app/controllers/console/home.js
@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class ConsoleHomeController extends Controller {}
--- a/console/app/controllers/console/notifications.js
+++ b/console/app/controllers/console/notifications.js
@@ -0,0 +1,188 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+/**
+ * Controller for managing notifications.
+ */
+export default class NotificationsController extends Controller {
+    /**
+     * Inject the `socket` service
+     *
+     * @memberof NotificationsController
+     */
+    @service socket;
+
+    /**
+     * Inject the `store` service
+     *
+     * @memberof NotificationsController
+     */
+    @service store;
+
+    /**
+     * Inject the `fetch` service
+     *
+     * @memberof NotificationsController
+     */
+    @service fetch;
+
+    /**
+     * Inject the `notifications` service
+     *
+     * @memberof NotificationsController
+     */
+    @service notifications;
+
+    /**
+     * Inject the `universe` service
+     *
+     * @memberof NotificationsController
+     */
+    @service universe;
+
+    /**
+     * Inject the `router` service
+     *
+     * @memberof NotificationsController
+     */
+    @service router;
+
+    /**
+     * Queryable parameters for this controller's model
+     *
+     * @var {Array}
+     */
+    queryParams = ['page', 'limit', 'sort', 'query', 'created_at'];
+
+    /**
+     * The current page of data being viewed
+     *
+     * @var {Integer}
+     */
+    @tracked page = 1;
+
+    /**
+     * The maximum number of items to show per page
+     *
+     * @var {Integer}
+     */
+    @tracked limit = 20;
+
+    /**
+     * The param to sort the data on, the param with prepended `-` is descending
+     *
+     * @var {String}
+     */
+    @tracked sort = '-created_at';
+
+    /**
+     * The selected notifications.
+     *
+     * @tracked
+     * @var {Array}
+     * @memberof NotificationsController
+     */
+    @tracked selected = [];
+
+    /**
+     * Creates an instance of NotificationsController.
+     * @memberof NotificationsController
+     */
+    constructor() {
+        super(...arguments);
+
+        // listen for received notifications
+        this.universe.on('notification.received', () => {
+            this.router.refresh();
+        });
+    }
+
+    /**
+     * Action to select or deselect a notification.
+     *
+     * @param {NotificationModel} notification - The notification to select or deselect.
+     * @memberof NotificationsController
+     */
+    @action selectNotification(notification) {
+        if (this.selected.includes(notification)) {
+            this.selected.removeObject(notification);
+        } else {
+            this.selected.pushObject(notification);
+        }
+    }
+
+    /**
+     * Action to delete selected notifications.
+     *
+     * @memberof NotificationsController
+     */
+    @action delete() {
+        return this.fetch
+            .delete('notifications/bulk-delete', {
+                notifications: this.selected.map(({ id }) => id),
+            })
+            .then(() => {
+                this.notifications.success(`${this.selected.length} notifications deleted`);
+                this.universe.trigger('notifications.deleted', [...this.selected]);
+                this.selected.clear();
+
+                return this.router.refresh();
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            });
+    }
+
+    /**
+     * Action to mark selected notifications as read.
+     *
+     * @memberof NotificationsController
+     */
+    @action read() {
+        const unreadSelectedNotifications = this.selected.filter((notification) => notification.unread);
+
+        return this.fetch
+            .put('notifications/mark-as-read', {
+                notifications: unreadSelectedNotifications.map(({ id }) => id),
+            })
+            .then(() => {
+                this.notifications.success(`${unreadSelectedNotifications.length} notifications marked as read`);
+                this.universe.trigger('notifications.read', [...unreadSelectedNotifications]);
+                this.selected.clear();
+
+                return this.router.refresh();
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            });
+    }
+
+    /**
+     * Action to select all notifications.
+     *
+     * @memberof NotificationsController
+     */
+    @action selectAll() {
+        if (this.selected.length === this.model.length) {
+            this.selected.clear();
+        } else {
+            this.selected = this.model.toArray();
+        }
+    }
+
+    /**
+     * Action to mark a notification as read.
+     *
+     * @param {NotificationModel} notification
+     * @return {Promise}
+     * @memberof NotificationsController
+     */
+    @action markNotificationAsRead(notification) {
+        return notification.markAsRead().then(() => {
+            this.notifications.info('Notification marked as read.');
+            this.universe.trigger('notifications.read', [notification]);
+        });
+    }
+}
--- a/console/app/controllers/console/settings.js
+++ b/console/app/controllers/console/settings.js
@@ -0,0 +1,11 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ConsoleSettingsController extends Controller {
+    /**
+     * INject the `universe` service
+     *
+     * @memberof ConsoleSettingsController
+     */
+    @service universe;
+}
--- a/console/app/controllers/console/settings/index.js
+++ b/console/app/controllers/console/settings/index.js
@@ -0,0 +1,94 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class ConsoleSettingsIndexController extends Controller {
+    /**
+     * Inject the `currentUser` service
+     *
+     * @memberof ConsoleSettingsIndexController
+     */
+    @service currentUser;
+
+    /**
+     * Inject the `notifications` service
+     *
+     * @memberof ConsoleSettingsIndexController
+     */
+    @service notifications;
+
+    /**
+     * Inject the `fetch` service
+     *
+     * @memberof ConsoleSettingsIndexController
+     */
+    @service fetch;
+
+    /**
+     * The request loading state.
+     *
+     * @memberof ConsoleSettingsIndexController
+     */
+    @tracked isLoading = false;
+
+    /**
+     * the upload queue.
+     *
+     * @memberof ConsoleSettingsIndexController
+     */
+    @tracked uploadQueue = [];
+
+    /**
+     * Uploaded files.
+     *
+     * @memberof ConsoleSettingsIndexController
+     */
+    @tracked uploadedFiles = [];
+
+    /**
+     * Save the organization settings.
+     *
+     * @memberof ConsoleSettingsIndexController
+     */
+    @action saveSettings(event) {
+        event.preventDefault();
+        this.isLoading = true;
+
+        this.model
+            .save()
+            .then(() => {
+                this.notifications.success('Organization changes successfully saved.');
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    /**
+     * Upload file to company.
+     *
+     * @param {String} type
+     * @param {File} file
+     * @return {Promise}
+     * @memberof ConsoleSettingsIndexController
+     */
+    @action uploadFile(type, file) {
+        return this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `uploads/companies/${this.currentUser.companyId}/${type}`,
+                key_uuid: this.currentUser.companyId,
+                key_type: `company`,
+                type,
+            },
+            (uploadedFile) => {
+                this.model.setProperties({
+                    [`${type}_uuid`]: uploadedFile.id,
+                    [`${type}_url`]: uploadedFile.url,
+                    [type]: uploadedFile,
+                });
+            }
+        );
+    }
+}
--- a/console/app/controllers/install.js
+++ b/console/app/controllers/install.js
@@ -0,0 +1,101 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency-decorators';
+
+export default class InstallController extends Controller {
+    @service fetch;
+    @service notifications;
+    @tracked error;
+    @tracked steps = [
+        { task: 'createdb', name: 'Create Database', status: 'pending' },
+        { task: 'migrate', name: 'Run Migrations', status: 'pending' },
+        { task: 'seed', name: 'Seed Database', status: 'pending' },
+    ];
+
+    @action updateTask(task, properties = {}) {
+        const steps = [...this.steps];
+        const index = steps.findIndex((step) => step.task === task);
+
+        if (index > -1) {
+            steps[index] = { ...steps[index], ...properties };
+        }
+
+        this.steps = [...steps];
+    }
+
+    @action startInstall() {
+        this.install.perform();
+    }
+
+    @action reset(options = {}) {
+        const install = options.install === true;
+
+        this.steps.forEach((step) => {
+            this.updateTask(step.task, { status: 'pending' });
+        });
+
+        if (install) {
+            this.install.perform();
+        }
+    }
+
+    @action onInstallCompleted() {
+        const isCompleted = this.steps.every(({ status }) => status === 'completed');
+
+        if (isCompleted) {
+            this.notifications.success('Install completed successfully!');
+            return this.transitionToRoute('onboard');
+        }
+    }
+
+    @task({ enqueue: true, maxConcurrency: 1 }) *install() {
+        try {
+            yield this.createdb.perform();
+            yield this.migrate.perform();
+            yield this.seed.perform();
+        } catch (error) {
+            this.error = error;
+            return this.reset();
+        }
+
+        this.onInstallCompleted();
+    }
+
+    @task *createdb() {
+        this.updateTask('createdb', { status: 'in_progress' });
+
+        try {
+            yield this.fetch.post('installer/createdb');
+            this.updateTask('createdb', { status: 'completed' });
+        } catch (error) {
+            this.updateTask('createdb', { status: 'failed' });
+            throw error;
+        }
+    }
+
+    @task *migrate() {
+        this.updateTask('migrate', { status: 'in_progress' });
+
+        try {
+            yield this.fetch.post('installer/migrate');
+            this.updateTask('migrate', { status: 'completed' });
+        } catch (error) {
+            this.updateTask('migrate', { status: 'failed' });
+            throw error;
+        }
+    }
+
+    @task *seed() {
+        this.updateTask('seed', { status: 'in_progress' });
+
+        try {
+            yield this.fetch.post('installer/seed');
+            this.updateTask('seed', { status: 'completed' });
+        } catch (error) {
+            this.updateTask('seed', { status: 'failed' });
+            throw error;
+        }
+    }
+}
--- a/console/app/controllers/invite/for-user.js
+++ b/console/app/controllers/invite/for-user.js
@@ -0,0 +1,57 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class InviteForUserController extends Controller {
+    @service fetch;
+    @service session;
+    @service notifications;
+    @service modalsManager;
+    @tracked code;
+    @tracked isLoading;
+
+    @action acceptInvite() {
+        const { code } = this;
+
+        this.isLoading = true;
+
+        this.fetch
+            .post('users/accept-company-invite', { code })
+            .then((response) => {
+                this.session.manuallyAuthenticate(response.token);
+                this.notifications.success('Invitation accepted, welcome to Fleetbase!');
+
+                this.isLoading = false;
+
+                return this.transitionToRoute('console').then(() => {
+                    if (response.needs_password && response.needs_password === true) {
+                        this.setPassword();
+                    }
+                });
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+                this.isLoading = false;
+            });
+    }
+
+    @action setPassword() {
+        this.modalsManager.show('modals/set-password', {
+            title: 'Set a new password',
+            closeButton: false,
+            backdropClose: false,
+            hideDeclineButton: true,
+            declineButtonDisabled: true,
+            password: null,
+            password_confirmation: null,
+            confirm: (modal) => {
+                modal.startLoading();
+
+                const input = modal.getOptions(['password', 'password_confirmation']);
+
+                return this.fetch.post('users/set-password', input);
+            },
+        });
+    }
+}
--- a/console/app/controllers/onboard/index.js
+++ b/console/app/controllers/onboard/index.js
@@ -0,0 +1,140 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action, getProperties } from '@ember/object';
+import OnboardValidations from '../../validations/onboard';
+import lookupValidator from 'ember-changeset-validations';
+import Changeset from 'ember-changeset';
+
+export default class OnboardIndexController extends Controller {
+    /**
+     * Inject the `fetch` service
+     *
+     * @memberof OnboardIndexController
+     */
+    @service fetch;
+
+    /**
+     * Inject the `session` service
+     *
+     * @memberof OnboardIndexController
+     */
+    @service session;
+
+    /**
+     * Inject the `notifications` service
+     *
+     * @memberof OnboardIndexController
+     */
+    @service notifications;
+
+    /**
+     * The name input field.
+     *
+     * @memberof OnboardIndexController
+     */
+    @tracked name;
+
+    /**
+     * The email input field.
+     *
+     * @memberof OnboardIndexController
+     */
+    @tracked email;
+
+    /**
+     * The phone input field.
+     *
+     * @memberof OnboardIndexController
+     */
+    @tracked phone;
+
+    /**
+     * The organization_name input field.
+     *
+     * @memberof OnboardIndexController
+     */
+    @tracked organization_name;
+
+    /**
+     * The password input field.
+     *
+     * @memberof OnboardIndexController
+     */
+    @tracked password;
+
+    /**
+     * The name password confirmation field.
+     *
+     * @memberof OnboardIndexController
+     */
+    @tracked password_confirmation;
+
+    /**
+     * The property for error message.
+     *
+     * @memberof OnboardIndexController
+     */
+    @tracked error;
+
+    /**
+     * The loading state of the onboard request.
+     *
+     * @memberof OnboardIndexController
+     */
+    @tracked isLoading = false;
+
+    /**
+     * The ready state for the form.
+     *
+     * @memberof OnboardIndexController
+     */
+    @tracked readyToSubmit = false;
+
+    /**
+     * Start the onboard process.
+     *
+     * @return {Promise}
+     * @memberof OnboardIndexController
+     */
+    @action async startOnboard(event) {
+        event.preventDefault();
+
+        // eslint-disable-next-line ember/no-get
+        const input = getProperties(this, 'name', 'email', 'phone', 'organization_name', 'password', 'password_confirmation');
+        const changeset = new Changeset(input, lookupValidator(OnboardValidations), OnboardValidations);
+
+        await changeset.validate();
+
+        if (changeset.get('isInvalid')) {
+            const errorMessage = changeset.errors.firstObject.validation.firstObject;
+
+            this.notifications.error(errorMessage);
+            return;
+        }
+
+        this.isLoading = true;
+
+        return this.fetch
+            .post('onboard/create-account', input)
+            .then((response) => {
+                if (response.status === 'success') {
+                    this.session.isOnboarding().manuallyAuthenticate(response.token);
+
+                    if (response.skipVerification === true) {
+                        return this.transitionToRoute('console').then(() => {
+                            this.notifications.success('Welcome to Fleetbase!');
+                        });
+                    }
+
+                    return this.transitionToRoute('onboard.verify-email', { queryParams: { hello: response.session } });
+                }
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}
--- a/console/app/controllers/onboard/verify-email.js
+++ b/console/app/controllers/onboard/verify-email.js
@@ -0,0 +1,194 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { later } from '@ember/runloop';
+import { not } from '@ember/object/computed';
+
+export default class OnboardVerifyEmailController extends Controller {
+    /**
+     * Inject the `fetch` service
+     *
+     * @memberof OnboardIndexController
+     */
+    @service fetch;
+
+    /**
+     * Inject the `notifications` service
+     *
+     * @memberof OnboardIndexController
+     */
+    @service notifications;
+
+    /**
+     * Inject the `modalsManager` service
+     *
+     * @memberof OnboardIndexController
+     */
+    @service modalsManager;
+
+    /**
+     * Inject the `currentUser` service
+     *
+     * @memberof OnboardIndexController
+     */
+    @service currentUser;
+
+    /**
+     * The session paramerer.
+     *
+     * @memberof OnboardVerifyEmailController
+     */
+    @tracked hello;
+
+    /**
+     * The loading state of the verification request.
+     *
+     * @memberof OnboardVerifyEmailController
+     */
+    @tracked isLoading = false;
+
+    /**
+     * Validation state tracker.
+     *
+     * @memberof OnboardVerifyEmailController
+     */
+    @tracked isReadyToSubmit = false;
+
+    /**
+     * The request timeout to trigger alternative verification options.
+     *
+     * @memberof OnboardVerifyEmailController
+     */
+    @tracked waitTimeout = 800 * 60 * 2;
+
+    /**
+     * Determines if Fleetbase is still awaiting verification after a certain time.
+     *
+     * @memberof OnboardVerifyEmailController
+     */
+    @tracked stillWaiting = false;
+
+    /**
+     * the input code.
+     *
+     * @memberof OnboardVerifyEmailController
+     */
+    @tracked code;
+
+    /**
+     * The query param for the session token.
+     *
+     * @memberof OnboardVerifyEmailController
+     */
+    @tracked queryParams = ['hello'];
+
+    /**
+     * The boolean opposite of `isReadyToSubmit`
+     *
+     * @memberof OnboardVerifyEmailController
+     */
+    @not('isReadyToSubmit') isNotReadyToSubmit;
+
+    /**
+     * Creates an instance of OnboardVerifyEmailController.
+     * @memberof OnboardVerifyEmailController
+     */
+    constructor() {
+        super(...arguments);
+
+        later(
+            this,
+            () => {
+                this.stillWaiting = true;
+            },
+            this.waitTimeout
+        );
+    }
+
+    /**
+     * Validates the input
+     *
+     * @param {InputEvent} { target: { value } }
+     * @memberof OnboardVerifyEmailController
+     */
+    @action validateInput({ target: { value } }) {
+        if (value.length > 5) {
+            this.isReadyToSubmit = true;
+        } else {
+            this.isReadyToSubmit = false;
+        }
+    }
+
+    /**
+     * Submits to verify code.
+     *
+     * @return {Promise}
+     * @memberof OnboardVerifyEmailController
+     */
+    @action verifyCode() {
+        const session = this.hello;
+        const code = this.code;
+
+        this.isLoading = true;
+
+        return this.fetch
+            .post('onboard/verify-email', { session, code })
+            .then((response) => {
+                if (response.status === 'success') {
+                    this.notifications.success('Email successfully verified!');
+                    this.notifications.info('Welcome to Fleetbase!');
+
+                    return this.transitionToRoute('console');
+                }
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    /**
+     * Action to resend verification code by SMS.
+     *
+     * @memberof OnboardVerifyEmailController
+     */
+    @action resendBySms() {
+        this.modalsManager.show('modals/verify-by-sms', {
+            title: 'Verify Account by Phone',
+            acceptButtonText: 'Send',
+            phone: this.currentUser.phone,
+            confirm: (modal) => {
+                modal.startLoading();
+                const phone = modal.getOption('phone');
+
+                return this.fetch.post('onboard/send-verification-sms', { phone }).then(() => {
+                    this.notifications.success('Verification code SMS sent!');
+                });
+            },
+        });
+    }
+
+    /**
+     * Action to resend verification code by email.
+     *
+     * @memberof OnboardVerifyEmailController
+     */
+    @action resendEmail() {
+        this.modalsManager.show('modals/resend-verification-email', {
+            title: 'Resend Verification Code',
+            acceptButtonText: 'Send',
+            email: this.currentUser.email,
+            confirm: (modal) => {
+                modal.startLoading();
+                const email = modal.getOption('email');
+
+                return this.fetch.post('onboard/send-verification-email', { email }).then(() => {
+                    this.notifications.success('Verification code email sent!');
+                });
+            },
+        });
+    }
+}
--- a/console/app/formats.js
+++ b/console/app/formats.js
@@ -0,0 +1,27 @@
+export default {
+    time: {
+        hhmmss: {
+            hour: 'numeric',
+            minute: 'numeric',
+            second: 'numeric',
+        },
+    },
+    date: {
+        hhmmss: {
+            hour: 'numeric',
+            minute: 'numeric',
+            second: 'numeric',
+        },
+    },
+    number: {
+        compact: { notation: 'compact' },
+        EUR: {
+            style: 'currency',
+            currency: 'EUR',
+        },
+        USD: {
+            style: 'currency',
+            currency: 'USD',
+        },
+    },
+};
--- a/console/app/helpers/.gitkeep
+++ b/console/app/helpers/.gitkeep
--- a/console/app/helpers/get-notification-key.js
+++ b/console/app/helpers/get-notification-key.js
@@ -0,0 +1,6 @@
+import { helper } from '@ember/component/helper';
+import createNotificationKey from '../utils/create-notification-key';
+
+export default helper(function getNotificationKey([definition, name]) {
+    return createNotificationKey(definition, name);
+});
--- a/console/app/helpers/json-pretty-print.js
+++ b/console/app/helpers/json-pretty-print.js
@@ -0,0 +1,5 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function jsonPrettyPrint([json]) {
+    return JSON.stringify(json, null, '  ');
+});
--- a/console/app/index.html
+++ b/console/app/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+    <meta name="msapplication-TileColor" content="#da532c" />
+    <meta name="theme-color" content="#ffffff" />
+    <title>Fleetbase Console</title>
+
+    {{content-for "head"}}
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
+    <link rel="manifest" href="/favicon/site.webmanifest" />
+    <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#5bbad5" />
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/@fleetbase/console.css">
+
+    {{content-for "head-footer"}}
+  </head>
+  <body>
+    {{content-for "body"}}
+
+    <script src="{{rootURL}}assets/vendor.js"></script>
+    <script src="{{rootURL}}assets/@fleetbase/console.js"></script>
+
+    {{content-for "body-footer"}}
+  </body>
+</html>
--- a/console/app/initializers/initialize-random-uuid-polyfill.js
+++ b/console/app/initializers/initialize-random-uuid-polyfill.js
@@ -0,0 +1,121 @@
+class ERR_INVALID_ARG_TYPE extends TypeError {
+    constructor(name, type, value) {
+        super(`${name} variable is not of type ${type} (value: '${value}')`);
+    }
+
+    code = 'ERR_INVALID_ARG_TYPE';
+}
+
+function validateBoolean(value, name) {
+    if (typeof value !== 'boolean') throw new ERR_INVALID_ARG_TYPE(name, 'boolean', value);
+}
+
+function validateObject(value, name) {
+    if (value === null || Array.isArray(value) || typeof value !== 'object') {
+        throw new ERR_INVALID_ARG_TYPE(name, 'Object', value);
+    }
+}
+
+const randomFillSync = window.crypto.getRandomValues.bind(window.crypto);
+
+// Implements an RFC 4122 version 4 random UUID.
+// To improve performance, random data is generated in batches
+// large enough to cover kBatchSize UUID's at a time. The uuidData
+// and uuid buffers are reused. Each call to randomUUID() consumes
+// 16 bytes from the buffer.
+
+const kHexDigits = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 97, 98, 99, 100, 101, 102];
+const kBatchSize = 128;
+let uuidData;
+let uuidNotBuffered;
+let uuid;
+let uuidBatch = 0;
+
+function getBufferedUUID() {
+    if (uuidData === undefined) {
+        uuidData = new Uint8Array(16 * kBatchSize);
+    }
+
+    if (uuidBatch === 0) randomFillSync(uuidData);
+    uuidBatch = (uuidBatch + 1) % kBatchSize;
+    return uuidData.slice(uuidBatch * 16, uuidBatch * 16 + 16);
+}
+
+function randomUUID(options) {
+    if (options !== undefined) validateObject(options, 'options');
+    const { disableEntropyCache = false } = { ...options };
+
+    validateBoolean(disableEntropyCache, 'options.disableEntropyCache');
+
+    if (uuid === undefined) {
+        uuid = new Uint8Array(36);
+        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'.charCodeAt(0);
+        uuid[14] = 52; // '4', identifies the UUID version
+    }
+
+    let uuidBuf;
+    if (!disableEntropyCache) {
+        uuidBuf = getBufferedUUID();
+    } else {
+        uuidBuf = uuidNotBuffered;
+        if (uuidBuf === undefined) uuidBuf = uuidNotBuffered = new Uint8Array(16);
+        randomFillSync(uuidBuf);
+    }
+
+    // Variant byte: 10xxxxxx (variant 1)
+    uuidBuf[8] = (uuidBuf[8] & 0x3f) | 0x80;
+
+    // This function is structured the way it is for performance.
+    // The uuid buffer stores the serialization of the random
+    // bytes from uuidData.
+    // xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
+    let n = 0;
+    uuid[0] = kHexDigits[uuidBuf[n] >> 4];
+    uuid[1] = kHexDigits[uuidBuf[n++] & 0xf];
+    uuid[2] = kHexDigits[uuidBuf[n] >> 4];
+    uuid[3] = kHexDigits[uuidBuf[n++] & 0xf];
+    uuid[4] = kHexDigits[uuidBuf[n] >> 4];
+    uuid[5] = kHexDigits[uuidBuf[n++] & 0xf];
+    uuid[6] = kHexDigits[uuidBuf[n] >> 4];
+    uuid[7] = kHexDigits[uuidBuf[n++] & 0xf];
+    // -
+    uuid[9] = kHexDigits[uuidBuf[n] >> 4];
+    uuid[10] = kHexDigits[uuidBuf[n++] & 0xf];
+    uuid[11] = kHexDigits[uuidBuf[n] >> 4];
+    uuid[12] = kHexDigits[uuidBuf[n++] & 0xf];
+    // -
+    // 4, uuid[14] is set already...
+    uuid[15] = kHexDigits[uuidBuf[n++] & 0xf];
+    uuid[16] = kHexDigits[uuidBuf[n] >> 4];
+    uuid[17] = kHexDigits[uuidBuf[n++] & 0xf];
+    // -
+    uuid[19] = kHexDigits[uuidBuf[n] >> 4];
+    uuid[20] = kHexDigits[uuidBuf[n++] & 0xf];
+    uuid[21] = kHexDigits[uuidBuf[n] >> 4];
+    uuid[22] = kHexDigits[uuidBuf[n++] & 0xf];
+    // -
+    uuid[24] = kHexDigits[uuidBuf[n] >> 4];
+    uuid[25] = kHexDigits[uuidBuf[n++] & 0xf];
+    uuid[26] = kHexDigits[uuidBuf[n] >> 4];
+    uuid[27] = kHexDigits[uuidBuf[n++] & 0xf];
+    uuid[28] = kHexDigits[uuidBuf[n] >> 4];
+    uuid[29] = kHexDigits[uuidBuf[n++] & 0xf];
+    uuid[30] = kHexDigits[uuidBuf[n] >> 4];
+    uuid[31] = kHexDigits[uuidBuf[n++] & 0xf];
+    uuid[32] = kHexDigits[uuidBuf[n] >> 4];
+    uuid[33] = kHexDigits[uuidBuf[n++] & 0xf];
+    uuid[34] = kHexDigits[uuidBuf[n] >> 4];
+    uuid[35] = kHexDigits[uuidBuf[n] & 0xf];
+
+    return String.fromCharCode.apply(null, uuid);
+}
+
+export function initialize() {
+    if (typeof window.crypto.randomUUID === 'undefined') {
+        window.crypto.randomUUID = randomUUID;
+    }
+}
+
+export default {
+    initialize,
+};
--- a/console/app/initializers/load-socketcluster-client.js
+++ b/console/app/initializers/load-socketcluster-client.js
@@ -0,0 +1,9 @@
+export function initialize() {
+    const socketClusterClientScript = document.createElement('script');
+    socketClusterClientScript.src = '/assets/socketcluster-client.min.js';
+    document.body.appendChild(socketClusterClientScript);
+}
+
+export default {
+    initialize,
+};
--- a/console/app/instance-initializers/load-extensions.js
+++ b/console/app/instance-initializers/load-extensions.js
@@ -0,0 +1,19 @@
+import loadExtensions from '@fleetbase/ember-core/utils/load-extensions';
+
+export function initialize(owner) {
+    const universe = owner.lookup('service:universe');
+
+    loadExtensions().then((extensions) => {
+        extensions.forEach((extension) => {
+            universe.loadEngine(extension.name).then((engineInstance) => {
+                if (engineInstance.base && engineInstance.base.setupExtension) {
+                    engineInstance.base.setupExtension(owner, engineInstance, universe);
+                }
+            });
+        });
+    });
+}
+
+export default {
+    initialize,
+};
--- a/console/app/models/.gitkeep
+++ b/console/app/models/.gitkeep
--- a/console/app/models/brand.js
+++ b/console/app/models/brand.js
@@ -0,0 +1,13 @@
+import Model, { attr } from '@ember-data/model';
+
+export default class BrandModel extends Model {
+    /** @ids */
+    @attr('string') uuid;
+    @attr('string') logo_uuid;
+    @attr('string') icon_uuid;
+
+    /** @attributes */
+    @attr('string') default_theme;
+    @attr('string') logo_url;
+    @attr('string') icon_url;
+}
--- a/console/app/models/category.js
+++ b/console/app/models/category.js
@@ -0,0 +1,66 @@
+import Model, { attr, belongsTo, hasMany } from '@ember-data/model';
+import { tracked } from '@glimmer/tracking';
+import { computed, get } from '@ember/object';
+import { format, formatDistanceToNow } from 'date-fns';
+import config from 'ember-get-config';
+
+export default class CategoryModel extends Model {
+    /** @ids */
+    @attr('string') uuid;
+    @attr('string') company_uuid;
+    @attr('string') parent_uuid;
+    @attr('string') owner_uuid;
+    @attr('string') icon_file_uuid;
+
+    /** @relationships */
+    @belongsTo('file') icon_file;
+    @belongsTo('category', { inverse: 'subcategories', async: false }) parent;
+    @hasMany('category', { inverse: 'parent' }) subcategories;
+    @tracked parent_category;
+
+    /** @attributes */
+    @attr('string') owner_type;
+    @attr('string') name;
+    @attr('string') description;
+    @attr('string') icon;
+    @attr('string') icon_color;
+    @attr('string', { defaultValue: get(config, 'defaultValues.categoryImage') }) icon_url;
+    @attr('string') for;
+    @attr('string') slug;
+    @attr('string') order;
+    @attr('raw') translations;
+
+    /** @dates */
+    @attr('date') deleted_at;
+    @attr('date') created_at;
+    @attr('date') updated_at;
+
+    /** @computed */
+    @computed('public_id') get customerId() {
+        return this.public_id.replace('contact_', 'customer_');
+    }
+
+    @computed('updated_at') get updatedAgo() {
+        return formatDistanceToNow(this.updated_at);
+    }
+
+    @computed('updated_at') get updatedAt() {
+        return format(this.updated_at, 'PPP p');
+    }
+
+    @computed('updated_at') get updatedAtShort() {
+        return format(this.updated_at, 'PP');
+    }
+
+    @computed('created_at') get createdAgo() {
+        return formatDistanceToNow(this.created_at);
+    }
+
+    @computed('created_at') get createdAt() {
+        return format(this.created_at, 'PPP p');
+    }
+
+    @computed('created_at') get createdAtShort() {
+        return format(this.created_at, 'PP');
+    }
+}
--- a/console/app/models/company.js
+++ b/console/app/models/company.js
@@ -0,0 +1,72 @@
+import Model, { attr, belongsTo } from '@ember-data/model';
+import { computed } from '@ember/object';
+import { format, formatDistanceToNow } from 'date-fns';
+import autoSerialize from '../utils/auto-serialize';
+
+export default class Company extends Model {
+    /** @ids */
+    @attr('string') uuid;
+    @attr('string') public_id;
+    @attr('string') owner_uuid;
+    @attr('string') logo_uuid;
+    @attr('string') backdrop_uuid;
+    @attr('string') place_uuid;
+
+    /** @relationships */
+    @belongsTo('file') logo;
+    @belongsTo('file') backdrop;
+
+    /** @attributes */
+    @attr('string') name;
+    @attr('string') website_url;
+    @attr('string') logo_url;
+    @attr('string') backdrop_url;
+    @attr('string') description;
+    @attr('raw') options;
+    @attr('string') type;
+    @attr('string') currency;
+    @attr('string') country;
+    @attr('string') timezone;
+    @attr('string') phone;
+    @attr('string') status;
+    @attr('string') slug;
+
+    /** @dates */
+    @attr('date') deleted_at;
+    @attr('date') created_at;
+    @attr('date') updated_at;
+
+    /** @computed */
+    @computed('phone_country_code', 'country') get phoneCountryCode() {
+        return this.phone_country_code || this.country;
+    }
+
+    @computed('updated_at') get updatedAgo() {
+        return formatDistanceToNow(this.updated_at);
+    }
+
+    @computed('updated_at') get updatedAt() {
+        return format(this.updated_at, 'PPP p');
+    }
+
+    @computed('updated_at') get updatedAtShort() {
+        return format(this.updated_at, 'PP');
+    }
+
+    @computed('created_at') get createdAgo() {
+        return formatDistanceToNow(this.created_at);
+    }
+
+    @computed('created_at') get createdAt() {
+        return format(this.created_at, 'PPP p');
+    }
+
+    @computed('created_at') get createdAtShort() {
+        return format(this.created_at, 'PP');
+    }
+
+    /** @methods */
+    toJSON() {
+        return autoSerialize(this);
+    }
+}
--- a/console/app/models/extension.js
+++ b/console/app/models/extension.js
@@ -0,0 +1,132 @@
+import Model, { attr } from '@ember-data/model';
+import { computed } from '@ember/object';
+import { notEmpty } from '@ember/object/computed';
+import { getOwner } from '@ember/application';
+import { format, formatDistanceToNow } from 'date-fns';
+
+export default class ExtensionModel extends Model {
+    /** @ids */
+    @attr('string') uuid;
+    @attr('string') author_uuid;
+    @attr('string') category_uuid;
+    @attr('string') type_uuid;
+    @attr('string') icon_uuid;
+    @attr('string') extension_id;
+
+    /** @relationships */
+
+    /** @attributes */
+    @attr('string') name;
+    @attr('string') display_name;
+    @attr('string') description;
+    @attr('string') icon_url;
+    @attr('string') namespace;
+    @attr('string') key;
+    @attr('string') internal_route;
+    @attr('string') fa_icon;
+    @attr('string') version;
+    @attr('string') website_url;
+    @attr('string') privacy_policy_url;
+    @attr('string') tos_url;
+    @attr('string') contact_email;
+    @attr('string') domains;
+    @attr('string') type_name;
+    @attr('string') category_name;
+    @attr('string') author_name;
+    @attr('number') install_count;
+    @attr('string') secret;
+    @attr('string') client_token;
+    @attr('string') status;
+    @attr('string') slug;
+
+    /** @boolean */
+    @attr('boolean') core_service;
+    @attr('boolean') is_installed;
+    @attr('boolean') installed;
+
+    /** @json */
+    @attr('raw') tags;
+    @attr('raw') meta;
+    @attr('raw') config;
+
+    /** @dates */
+    @attr('date') deleted_at;
+    @attr('date') created_at;
+    @attr('date') updated_at;
+
+    /** @methods */
+    toJSON() {
+        const json = {};
+
+        this.eachAttribute((key) => {
+            json[key] = this[key];
+        });
+
+        return json;
+    }
+
+    install() {
+        const owner = getOwner(this);
+        const fetch = owner.lookup(`service:fetch`);
+
+        return new Promise((resolve, reject) => {
+            fetch
+                .post('installer/install', {
+                    extension: this.id,
+                })
+                .then((response) => {
+                    this.is_installed = true;
+                    resolve(response);
+                })
+                .catch((error) => {
+                    reject(error);
+                });
+        });
+    }
+
+    uninstall() {
+        const owner = getOwner(this);
+        const fetch = owner.lookup(`service:fetch`);
+
+        return new Promise((resolve, reject) => {
+            fetch
+                .post('installer/uninstall', {
+                    extension: this.id,
+                })
+                .then((response) => {
+                    this.is_installed = false;
+                    resolve(response);
+                })
+                .catch((error) => {
+                    reject(error);
+                });
+        });
+    }
+
+    /** @computed */
+    @notEmpty('icon_uuid') hasIcon;
+
+    @computed('updated_at') get updatedAgo() {
+        return formatDistanceToNow(this.updated_at);
+    }
+
+    @computed('updated_at') get updatedAt() {
+        return format(this.updated_at, 'PPP p');
+    }
+
+    @computed('updated_at') get updatedAtShort() {
+        return format(this.updated_at, 'PP');
+    }
+
+    @computed('created_at') get createdAgo() {
+        return formatDistanceToNow(this.created_at);
+    }
+
+    @computed('created_at') get createdAt() {
+        return format(this.created_at, 'PPP p');
+    }
+
+    @computed('created_at') get createdAtShort() {
+        return format(this.created_at, 'PP');
+    }
+}
--- a/console/app/models/file.js
+++ b/console/app/models/file.js
@@ -0,0 +1,76 @@
+import Model, { attr } from '@ember-data/model';
+import { computed } from '@ember/object';
+import { not } from '@ember/object/computed';
+import { getOwner } from '@ember/application';
+import { format, formatDistanceToNow } from 'date-fns';
+import ENV from '@fleetbase/console/config/environment';
+import isVideoFile from '@fleetbase/ember-core/utils/is-video-file';
+import isImageFile from '@fleetbase/ember-core/utils/is-image-file';
+
+export default class FileModel extends Model {
+    /** @ids */
+    @attr('string') uuid;
+    @attr('string') uploader_uuid;
+    @attr('string') company_uuid;
+    @attr('string') subject_uuid;
+
+    /** @attributes */
+    @attr('string') caption;
+    @attr('string') url;
+    @attr('string') path;
+    @attr('string') bucket;
+    @attr('string') folder;
+    @attr('string') etag;
+    @attr('string') original_filename;
+    @attr('string') type;
+    @attr('string') content_type;
+    @attr('string') subject_type;
+    @attr('number') file_size;
+    @attr('string') slug;
+    @attr('string') permalink;
+
+    /** @dates */
+    @attr('date') deleted_at;
+    @attr('date') created_at;
+    @attr('date') updated_at;
+
+    /** @computed */
+    @computed('updated_at') get updatedAgo() {
+        return formatDistanceToNow(this.updated_at);
+    }
+
+    @computed('updated_at') get updatedAt() {
+        return format(this.updated_at, 'PPP');
+    }
+
+    @computed('created_at') get createdAgo() {
+        return formatDistanceToNow(this.created_at);
+    }
+
+    @computed('created_at') get createdAt() {
+        return format(this.created_at, 'PPP p');
+    }
+
+    @computed('content_type') get isVideo() {
+        return isVideoFile(this.content_type);
+    }
+
+    @computed('content_type') get isImage() {
+        return isImageFile(this.content_type);
+    }
+
+    @not('isVideo') isNotVideo;
+    @not('isImage') isNotImage;
+
+    /** @methods */
+    downloadFromApi() {
+        window.open(ENV.api.host + '/' + ENV.api.namespace + '/files/download?file=' + this.id, '_self');
+    }
+
+    download() {
+        const owner = getOwner(this);
+        const fetch = owner.lookup(`service:store`);
+
+        return fetch.download('files/download', { file: this.id });
+    }
+}
--- a/console/app/models/group.js
+++ b/console/app/models/group.js
@@ -0,0 +1,39 @@
+import Model, { attr, hasMany } from '@ember-data/model';
+import { computed } from '@ember/object';
+import { format, formatDistanceToNow } from 'date-fns';
+
+export default class GroupModel extends Model {
+    /** @attributes */
+    @attr('string') name;
+    @attr('string') description;
+
+    /** @dates */
+    @attr('date') created_at;
+    @attr('date') updated_at;
+
+    /** @relationships */
+    @hasMany('policy') policies;
+    @hasMany('permission') permissions;
+    @hasMany('user', { async: false }) users;
+
+    /** @computed */
+    @computed('users.@each.name') get membersList() {
+        return this.users.map((user) => user.name);
+    }
+
+    @computed('updated_at') get updatedAgo() {
+        return formatDistanceToNow(this.updated_at);
+    }
+
+    @computed('updated_at') get updatedAt() {
+        return format(this.updated_at, 'PPP p');
+    }
+
+    @computed('created_at') get createdAgo() {
+        return formatDistanceToNow(this.created_at);
+    }
+
+    @computed('created_at') get createdAt() {
+        return format(this.created_at, 'PPP p');
+    }
+}
--- a/console/app/models/notification.js
+++ b/console/app/models/notification.js
@@ -0,0 +1,53 @@
+import Model, { attr } from '@ember-data/model';
+import { computed } from '@ember/object';
+
+import { format, formatDistanceToNow } from 'date-fns';
+
+export default class NotificationModel extends Model {
+    @attr('string') notifiable_id;
+    @attr('string') notifiable_type;
+
+    /** @attributes */
+    @attr('string') type;
+    @attr('raw') data;
+    @attr('raw') meta;
+
+    /** @dates */
+    @attr('date') read_at;
+    @attr('date') created_at;
+
+    /** @computed */
+    @computed('created_at') get createdAgo() {
+        return formatDistanceToNow(this.created_at);
+    }
+
+    @computed('created_at') get createdAt() {
+        return format(this.created_at, 'PPP p');
+    }
+
+    @computed('read_at') get readAt() {
+        return format(this.read_at, 'PPP p');
+    }
+
+    @computed('read_at') get isRead() {
+        return this.read_at instanceof Date;
+    }
+
+    @computed('read_at') get read() {
+        return this.read_at instanceof Date;
+    }
+
+    @computed('isRead') get unread() {
+        return !this.get('isRead');
+    }
+
+    /** @actions */
+    markAsRead() {
+        if (this.isRead) {
+            return;
+        }
+
+        this.set('read_at', new Date());
+        return this.save();
+    }
+}
--- a/console/app/models/permission.js
+++ b/console/app/models/permission.js
@@ -0,0 +1,117 @@
+import Model, { attr } from '@ember-data/model';
+import { computed } from '@ember/object';
+import { pluralize } from 'ember-inflector';
+import { format, formatDistanceToNow } from 'date-fns';
+import humanize from '@fleetbase/ember-core/utils/humanize';
+
+export const parserPermissionName = function (permissionName, index = 0) {
+    const parts = permissionName.split(' ');
+
+    if (parts.length >= index + 1) {
+        return parts[index];
+    }
+
+    return null;
+};
+
+export const getPermissionExtension = function (permissionName) {
+    return parserPermissionName(permissionName);
+};
+
+export const getPermissionAction = function (permissionName) {
+    return parserPermissionName(permissionName, 1);
+};
+
+export const getPermissionResource = function (permissionName) {
+    return parserPermissionName(permissionName, 2);
+};
+
+const lowercase = function (string) {
+    let words = string.split(' ');
+    words[0] = words[0].toLowerCase();
+    return words.join(' ');
+};
+
+const titleize = function (string) {
+    return lowercase(humanize(string));
+};
+
+/**
+ * Permission model for handling and authorizing actions.
+ * permission schema: {extension} {action} {resource}
+ * action and resource can be wildcards
+ *
+ * @export
+ * @class PermissionModel
+ * @extends {Model}
+ */
+export default class PermissionModel extends Model {
+    /** @attributes */
+    @attr('string') name;
+    @attr('string') guard_name;
+
+    /** @dates */
+    @attr('date') created_at;
+    @attr('date') updated_at;
+
+    /** @methods */
+    toJSON() {
+        return {
+            name: this.name,
+            guard_name: this.guard_name,
+            created_at: this.created_at,
+            updated_at: this.updated_at,
+        };
+    }
+
+    /** @computed */
+    @computed('name') get serviceName() {
+        return getPermissionExtension(this.name);
+    }
+
+    @computed('name') get extensionName() {
+        return getPermissionExtension(this.name);
+    }
+
+    @computed('name') get actionName() {
+        let action = getPermissionAction(this.name);
+
+        if (action === '*') {
+            return 'do anything';
+        }
+
+        return titleize(action);
+    }
+
+    @computed('name') get resourceName() {
+        return getPermissionResource(this.name);
+    }
+
+    @computed('actionName', 'name', 'resourceName', 'extensionName') get description() {
+        let actionName = this.actionName;
+        let actionPreposition = 'to';
+        let resourceName = pluralize(humanize(this.resourceName));
+        let resourcePreposition = getPermissionAction(this.name) === '*' && resourceName ? 'with' : '';
+        let extensionName = humanize(this.extensionName);
+        let extensionPreposition = 'on';
+        let descriptionParts = ['Permission', actionPreposition, actionName, resourcePreposition, resourceName, extensionPreposition, extensionName];
+
+        return descriptionParts.join(' ');
+    }
+
+    @computed('updated_at') get updatedAgo() {
+        return formatDistanceToNow(this.updated_at);
+    }
+
+    @computed('updated_at') get updatedAt() {
+        return format(this.updated_at, 'PPP');
+    }
+
+    @computed('created_at') get createdAgo() {
+        return formatDistanceToNow(this.created_at);
+    }
+
+    @computed('created_at') get createdAt() {
+        return format(this.created_at, 'PPP p');
+    }
+}
--- a/console/app/models/policy.js
+++ b/console/app/models/policy.js
@@ -0,0 +1,49 @@
+import Model, { attr, hasMany } from '@ember-data/model';
+import { computed } from '@ember/object';
+import { format, formatDistanceToNow } from 'date-fns';
+
+export default class PolicyModel extends Model {
+    /** @ids */
+    @attr('string') company_uuid;
+
+    /** @relationships */
+    @hasMany('permission') permissions;
+
+    /** @attributes */
+    @attr('string') name;
+    @attr('string') type;
+    @attr('string') guard_name;
+    @attr('string') description;
+    @attr('boolean') is_mutable;
+    @attr('boolean') is_deletable;
+
+    /** @dates */
+    @attr('date') created_at;
+    @attr('date') updated_at;
+
+    /** @methods */
+    toJSON() {
+        return this.serialize();
+    }
+
+    /** @computed */
+    @computed('permissions') get permissionsArray() {
+        return this.permissions.toArray();
+    }
+
+    @computed('updated_at') get updatedAgo() {
+        return formatDistanceToNow(this.updated_at);
+    }
+
+    @computed('updated_at') get updatedAt() {
+        return format(this.updated_at, 'PPP p');
+    }
+
+    @computed('created_at') get createdAgo() {
+        return formatDistanceToNow(this.created_at);
+    }
+
+    @computed('created_at') get createdAt() {
+        return format(this.created_at, 'PPP p');
+    }
+}
--- a/console/app/models/role.js
+++ b/console/app/models/role.js
@@ -0,0 +1,55 @@
+import Model, { attr, hasMany } from '@ember-data/model';
+import { computed } from '@ember/object';
+import { format, formatDistanceToNow } from 'date-fns';
+
+export default class RoleModel extends Model {
+    /** @ids */
+    @attr('string') company_uuid;
+
+    /** @relationships */
+    @hasMany('policy') policies;
+    @hasMany('permission') permissions;
+
+    /** @attributes */
+    @attr('string') name;
+    @attr('string') guard_name;
+    @attr('string') description;
+
+    /** @dates */
+    @attr('date') created_at;
+    @attr('date') updated_at;
+
+    /** @methods */
+    toJSON() {
+        return this.serialize();
+    }
+
+    /** @computed */
+    @computed('permissions') get permissionsArray() {
+        return this.permissions.toArray();
+    }
+
+    @computed('updated_at') get updatedAgo() {
+        return formatDistanceToNow(this.updated_at);
+    }
+
+    @computed('updated_at') get updatedAt() {
+        return format(this.updated_at, 'PPP p');
+    }
+
+    @computed('updated_at') get updatedAtShort() {
+        return format(this.updated_at, 'PP');
+    }
+
+    @computed('created_at') get createdAgo() {
+        return formatDistanceToNow(this.created_at);
+    }
+
+    @computed('created_at') get createdAt() {
+        return format(this.created_at, 'PPP p');
+    }
+
+    @computed('created_at') get createdAtShort() {
+        return format(this.created_at, 'PP');
+    }
+}
--- a/console/app/models/setting.js
+++ b/console/app/models/setting.js
@@ -0,0 +1,3 @@
+import Model from '@ember-data/model';
+
+export default class SettingModel extends Model {}
--- a/console/app/models/transaction.js
+++ b/console/app/models/transaction.js
@@ -0,0 +1,3 @@
+import Model from '@ember-data/model';
+
+export default class TransactionModel extends Model {}
--- a/console/app/models/user-device.js
+++ b/console/app/models/user-device.js
@@ -0,0 +1,3 @@
+import Model from '@ember-data/model';
+
+export default class UserDeviceModel extends Model {}
--- a/console/app/models/user.js
+++ b/console/app/models/user.js
@@ -0,0 +1,126 @@
+import Model, { attr } from '@ember-data/model';
+import { computed, get } from '@ember/object';
+import { not } from '@ember/object/computed';
+import { getOwner } from '@ember/application';
+import { format, formatDistanceToNow, isValid } from 'date-fns';
+import config from 'ember-get-config';
+
+export default class UserModel extends Model {
+    /** @ids */
+    @attr('string') public_id;
+    @attr('string') company_uuid;
+    @attr('string') avatar_uuid;
+
+    /** @attributes */
+    @attr('string') name;
+    @attr('string', { defaultValue: get(config, 'defaultValues.userImage') }) avatar_url;
+    @attr('string') email;
+    @attr('string') password;
+    @attr('string') phone;
+    @attr('string') company_name;
+    @attr('string') date_of_birth;
+    @attr('string') timezone;
+    @attr('string') country;
+    @attr('string') ip_address;
+    @attr('string') slug;
+    @attr('string') type;
+    @attr('string') session_status;
+    @attr('string') status;
+    @attr('boolean') is_admin;
+    @attr('raw') types;
+    @attr('raw') meta;
+
+    /** @dates */
+    @attr('date') phone_verified_at;
+    @attr('date') email_verified_at;
+    @attr('date') last_login;
+    @attr('date') deleted_at;
+    @attr('date') created_at;
+    @attr('date') updated_at;
+
+    /** @methods */
+    deactivate() {
+        const owner = getOwner(this);
+        const fetch = owner.lookup(`service:fetch`);
+
+        return fetch.patch(`users/deactivate/${this.id}`).then((response) => {
+            this.session_status = 'inactive';
+
+            return response;
+        });
+    }
+
+    activate() {
+        const owner = getOwner(this);
+        const fetch = owner.lookup(`service:fetch`);
+
+        return fetch.patch(`users/activate/${this.id}`).then((response) => {
+            this.session_status = 'active';
+
+            return response;
+        });
+    }
+
+    removeFromCurrentCompany() {
+        const owner = getOwner(this);
+        const fetch = owner.lookup(`service:fetch`);
+
+        return fetch.delete(`users/remove-from-company/${this.id}`);
+    }
+
+    resendInvite() {
+        const owner = getOwner(this);
+        const fetch = owner.lookup(`service:fetch`);
+
+        return fetch.post(`users/resend-invite`, { user: this.id });
+    }
+
+    /** @computed */
+    @not('isEmailVerified') emailIsNotVerified;
+    @not('isPhoneVerified') phoneIsNotVerified;
+
+    @computed('types') get typesList() {
+        const types = Array.from(this.types);
+        return types.join(', ');
+    }
+
+    @computed('email_verified_at') get isEmailVerified() {
+        return this.email_verified_at && isValid(new Date(this.email_verified_at));
+    }
+
+    @computed('phone_verified_at') get isPhoneVerified() {
+        return this.phone_verified_at && isValid(new Date(this.phone_verified_at));
+    }
+
+    @computed('last_login') get lastLogin() {
+        if (!this.last_login || !isValid(new Date(this.last_login))) {
+            return 'Never';
+        }
+
+        return format(new Date(this.last_login), 'PP');
+    }
+
+    @computed('updated_at') get updatedAgo() {
+        return formatDistanceToNow(this.updated_at);
+    }
+
+    @computed('updated_at') get updatedAt() {
+        return format(this.updated_at, 'PPP p');
+    }
+
+    @computed('updated_at') get updatedAtShort() {
+        return format(this.updated_at, 'PP');
+    }
+
+    @computed('created_at') get createdAgo() {
+        return formatDistanceToNow(this.created_at);
+    }
+
+    @computed('created_at') get createdAt() {
+        return format(this.created_at, 'PPP p');
+    }
+
+    @computed('created_at') get createdAtShort() {
+        return format(this.created_at, 'PP');
+    }
+}
--- a/console/app/resolver.js
+++ b/console/app/resolver.js
@@ -0,0 +1,11 @@
+import Resolver from 'ember-resolver';
+
+export default class extends Resolver {
+    resolveRoute(parsedName) {
+        if (parsedName.fullNameWithoutType === 'main') {
+            return import('./router.generated');
+        }
+
+        return super.resolveRoute(parsedName);
+    }
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Ronald A. Richardson	f56db88ad6	fleetops: fix filters, improve drawer component w/ state, several patches and upgrades	2023-11-16 18:49:17 +08:00
Ron	033cf5cfe0	Merge pull request #155 from fleetbase/dev-v0.2.9 v0.2.9	2023-11-09 17:21:56 +08:00
Ronald A. Richardson	4a4dc76e60	Added scheduler feature, scope/live map drawer feature, and bug fixes and dependency upgrades	2023-11-09 17:04:10 +08:00
Ron	a52af94b00	Merge pull request #154 from fleetbase/dev-v0.2.8 v0.2.8	2023-11-06 20:12:39 +08:00
Ronald A. Richardson	9c4daf7a68	fix dependencies	2023-11-06 19:55:42 +08:00
Ronald A. Richardson	a8904ba112	Full refactor of management section, upgrade of dependencies	2023-11-06 19:39:11 +08:00
Ronald A. Richardson	6880664d9e	update packages to latest commits	2023-10-30 19:57:33 +08:00
Ron	99b30d7f58	Merge pull request #148 from fleetbase/feature-notifications Feature notifications	2023-10-30 19:56:10 +08:00
Ronald A. Richardson	c8539fd2a0	merged with main	2023-10-30 19:41:23 +08:00
Ronald A. Richardson	cb1aec40fd	ready for new release with notification tray and settings	2023-10-30 19:37:37 +08:00
Ronald A. Richardson	b728b366a0	patch notification settings in admin	2023-10-30 19:17:01 +08:00
Ronald A. Richardson	5cfc3f1cc7	add back package.json	2023-10-30 14:58:54 +08:00
Ronald A. Richardson	e7b5282aa3	updated notificaiton setting structure to be more robust	2023-10-30 14:53:19 +08:00
Ronald A. Richardson	7ffb7ac24a	Latest updates, moved save buttons to subheader for easy access to save	2023-10-30 12:40:39 +08:00
Ron	6e4a9edd7d	Merge pull request #146 from fleetbase/add-notification-settings Add notification settings to Admin	2023-10-30 11:55:57 +08:00
Ron	d9d01c8bbc	Merge branch 'feature-notifications' into add-notification-settings	2023-10-30 11:55:12 +08:00
Ronald A. Richardson	c54d75fa0f	hotfix notification read event trigger	2023-10-27 17:50:35 +08:00
Ronald A. Richardson	91904c3836	Patches and improved styling for notification page	2023-10-27 17:35:31 +08:00
Ronald A. Richardson	0e075e3b24	dont check in dependency mgmt files	2023-10-27 15:24:58 +08:00
Ron	c56bea95d0	Merge pull request #140 from fleetbase/dev-v0.2.6 v0.2.6	2023-10-27 10:33:17 +08:00
Ronald A. Richardson	f1cec329bc	add back environment files	2023-10-27 10:15:40 +08:00
Ronald A. Richardson	34dc365dd2	Preparing release with latest dependencies	2023-10-27 10:11:33 +08:00
TemuulenBM	74a782f4ea	WIP: Notification Settings interface on Admin	2023-10-26 17:54:29 +08:00
TemuulenBM	a8b2042d85	Latest updates for notification tray and page	2023-10-26 11:32:54 +08:00
Temuulen Bayanmunkh	cc52a40660	Almost completed the notifications route, `<NotificationTray />` component responds with notifications route changes	2023-10-24 17:58:52 +08:00
Temuulen Bayanmunkh	4fb2dec8c3	Added notification tray component	2023-10-20 18:06:43 +08:00
Ronald A. Richardson	0db3634ab3	checkin environments directory and update `API_SECURE` to be casted to boolean	2023-10-18 16:34:09 +08:00
Ronald A. Richardson	1c0d324ba9	Fix reset of branding settings	2023-10-14 13:48:21 +08:00
Ron	096cc1097a	Merge pull request #139 from fleetbase/dev-v0.2.5 preparing for new release	2023-10-13 18:11:07 +08:00
Ronald A. Richardson	eca881156a	add required lockfile back to console	2023-10-13 17:50:07 +08:00
Ronald A. Richardson	40b499bcb2	preparing for new release	2023-10-13 17:40:02 +08:00
Ron	c6e7dcae8b	Merge pull request #136 from fleetbase/dev-v0.2.4 Migrating to monorepo for extensions	2023-10-10 21:38:38 +08:00
Ronald A. Richardson	4bba957123	remove old files	2023-10-10 21:26:16 +08:00
Ronald A. Richardson	33b6174247	should fix pipeline, using all latest versions for monorepo arch	2023-10-10 21:19:03 +08:00
Ronald A. Richardson	79d80184cd	remove socket as submodule	2023-10-10 20:45:16 +08:00
Ronald A. Richardson	8c1f96ef0e	console is no longer a submodule 🚀	2023-10-10 20:43:18 +08:00
Ronald A. Richardson	c139c00404	Migrating to monorepo for extensions	2023-10-10 20:41:14 +08:00
Ron	92032ca56c	Merge pull request #135 from fleetbase/dev-v0.2.3 preparing release for 0.2.3	2023-10-06 16:42:24 +08:00
Ronald A. Richardson	c265c6fbda	preparing release for 0.2.3	2023-10-06 16:41:24 +08:00
Ron	d8ae53d811	Merge pull request #132 from fleetbase/dev-v0.2.2 preparing for hotfix/critical release patches	2023-10-03 22:49:12 +08:00
Ronald A. Richardson	729e347a78	preparing for hotfix/critical release patches	2023-10-03 23:47:58 +09:00
				`@@ -0,0 +1 @@`
				`export { default } from '@fleetbase/ember-core/adapters/application';`