Fullstack docker image

v0.6.8 ~ View Proof of Delivery in FleetOps + API to get POD

.github/workflows/cd.yml

@@ -109,13 +109,13 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 8
+          version: 9.5.0
           run_install: false
 
       - name: Get pnpm Store Directory
@@ -132,11 +132,31 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
 
-      - name: Check for _GITHUB_AUTH_TOKEN and create .npmrc
+      - name: Create and Setup .npmrc
         run: |
           if [[ -n "${{ secrets._GITHUB_AUTH_TOKEN }}" ]]; then
             echo "//npm.pkg.github.com/:_authToken=${{ secrets._GITHUB_AUTH_TOKEN }}" > .npmrc
           fi
+          if [[ -n "${{ secrets.FLEETBASE_REGISTRY_TOKEN }}" ]]; then
+            echo "//registry.fleetbase.io/:_authToken=${{ secrets.FLEETBASE_REGISTRY_TOKEN }}" >> .npmrc
+            echo "@fleetbase:registry=https://registry.fleetbase.io" >> .npmrc
+          fi
+        working-directory: ./console
+
+      - name: Set Env Variables for QA
+        if: startsWith(github.ref, 'refs/heads/deploy/qa')
+        run: |
+          echo "STRIPE_KEY=${{ secrets.STRIPE_TEST_KEY }}" >> ./environments/.env.production
+          echo "LOGROCKET_APP_ID=${{ secrets.LOGROCKET_APP_ID }}" >> ./environments/.env.production
+          echo "EXTENSIONS=@fleetbase/billing-engine,@fleetbase/internals-engine" >> ./environments/.env.production
+        working-directory: ./console
+
+      - name: Set Env Variables for Production
+        if: startsWith(github.ref, 'refs/heads/deploy/production')
+        run: |
+          echo "STRIPE_KEY=${{ secrets.STRIPE_KEY }}" >> ./environments/.env.production
+          echo "LOGROCKET_APP_ID=${{ secrets.LOGROCKET_APP_ID }}" >> ./environments/.env.production
+          echo "EXTENSIONS=@fleetbase/billing-engine,@fleetbase/internals-engine" >> ./environments/.env.production
         working-directory: ./console
 
       - name: Install dependencies

.gitignore

@@ -30,6 +30,7 @@ packages/flespi
 packages/loconav
 packages/internals
 packages/projectargus-engine
+packages/customer-portal
 # wip
 packages/solid
 solid

.gitmodules

@@ -36,3 +36,9 @@
 [submodule "docs"]
 	path = docs
 	url = git@github.com:fleetbase/docs.git
+[submodule "packages/registry-bridge"]
+	path = packages/registry-bridge
+	url = git@github.com:fleetbase/registry-bridge.git
+[submodule "packages/ledger"]
+	path = packages/ledger
+	url = git@github.com:fleetbase/ledger.git

CONTRIBUTING.md

@@ -13,15 +13,15 @@ We use github to host code, to track issues and feature requests, as well as acc
 ## We Use [Github Flow](https://guides.github.com/introduction/flow/index.html), So All Code Changes Happen Through Pull Requests
 Pull requests are the best way to propose changes to the codebase (we use [Github Flow](https://guides.github.com/introduction/flow/index.html)). We actively welcome your pull requests:
 
-1. Fork the repo and create your branch from `master`.
+1. Fork the repo and create your branch from `main`.
 2. If you've added code that should be tested, add tests.
 3. If you've changed APIs, update the documentation.
 4. Ensure the test suite passes.
 5. Make sure your code lints.
 6. Issue that pull request!
 
-## Any contributions you make will be under the MIT Software License
-In short, when you submit code changes, your submissions are understood to be under the same [MIT License](http://choosealicense.com/licenses/mit/) that covers the project. Feel free to contact the maintainers if that's a concern.
+## Any contributions you make will be under the AGPL v3 Software License
+In short, when you submit code changes, your submissions are understood to be under the same [AGPL v3](https://choosealicense.com/licenses/agpl-3.0/) that covers the project. Feel free to contact the maintainers if that's a concern.
 
 ## Report bugs using Github's [issues](https://github.com/fleetbase/fleetbase/issues)
 We use GitHub issues to track public bugs. Report a bug by [opening a new issue](https://github.com/fleetbase/fleetbase/issues), it's that easy!
@@ -41,7 +41,7 @@ We use GitHub issues to track public bugs. Report a bug by [opening a new issue]
 People *love* thorough bug reports. I'm not even kidding.
 
 ## License
-By contributing, you agree that your contributions will be licensed under its MIT License.
+By contributing, you agree that your contributions will be licensed under its AGPL v3 Software License.
 
 ## References
 This document was adapted from the open-source contribution guidelines for [Facebook's Draft](https://github.com/facebook/draft-js/blob/a9316a723f9e918afde44dea68b5f9f39b7d9b00/CONTRIBUTING.md)

Caddyfile

@@ -1,12 +1,14 @@
 {
-	frankenphp
+	frankenphp {
+		num_threads 24
+	}
 	order php_server before file_server
 }
 
 http://:8000 {
 	root * /fleetbase/api/public
-	encode zstd gzip
+	encode zstd br gzip
 	php_server {
 		resolve_root_symlink
 	}
-}
+}

Caddyfile.console

@@ -0,0 +1,19 @@
+{
+	frankenphp
+	order php_server before file_server
+}
+
+http://:8000 {
+	root * /fleetbase/api/public
+	encode zstd gzip
+	php_server {
+		resolve_root_symlink
+	}
+}
+
+http://:4200 {
+	root * /fleetbase/console/dist
+	try_files {path} /
+	encode zstd gzip
+	file_server
+}

README.md

@@ -13,7 +13,7 @@
       ·
       <a href="https://fleetbase.apichecker.com" target="_api_status" rel="nofollow">API Status</a>
       ·
-      <a href="https://meetings.hubspot.com/shiv-thakker" rel="nofollow">Book a Demo</a>
+      <a href="https://tally.so/r/3NBpAW" rel="nofollow">Book a Demo</a>
       ·
       <a href="https://discord.gg/V7RVWRQ2Wm" target="discord" rel="nofollow">Discord</a>
     </p>
@@ -42,6 +42,7 @@ sh deploy.sh
 
   - [Features](#-features)
   - [Install](#-install)
+  - [Extensions](#-extensions)
   - [Apps](#-apps)
   - [Roadmap](#-roadmap)
   - [Bugs and Feature Requests](#-bugs-and--feature-requests)
@@ -90,7 +91,7 @@ Fleetbase API: http://localhost:8000
 
 **CORS:** If you’re installing directly on a server you may need to add your IP address or domain to the `api/config/cors.php` file in the `allowed_hosts` array.  
   
-**Routing:** Fleetbase ships with its own OSRM server hosted at `[bundle.routing.fleetbase.io](https://bundle.routing.fleetbase.io)` but you’re able to use your own or any other OSRM compatible server. You can modify this in the `console/environments` directory by modifying the env file of the environment you’re deploying and setting the `OSRM_HOST` to the OSRM server for Fleetbase to use.  
+**Routing:** Fleetbase ships with a default OSRM server hosted by `[router.project-osrm.org](https://router.project-osrm.org)` but you’re able to use your own or any other OSRM compatible server. You can modify this in the `console/environments` directory by modifying the .env file of the environment you’re deploying and setting the `OSRM_HOST` to the OSRM server for Fleetbase to use.  
   
 **Services:** There are a few environment variables which need to be set for Fleetbase to function with full features. If you’re deploying with docker then it’s easiest to just create a `docker-compose.override.yml` and supply the environment variables in this file.
 
@@ -100,7 +101,7 @@ services:
   application:  
     environment:  
       MAIL_MAILER: (ses, smtp, mailgun, postmark, sendgrid)
-      OSRM_HOST: https://bundle.routing.fleetbase.io
+      OSRM_HOST: https://router.project-osrm.org
       IPINFO_API_KEY:
       GOOGLE_MAPS_API_KEY:  
       GOOGLE_MAPS_LOCALE: us
@@ -112,6 +113,26 @@ services:
 
 You can learn more about full installation, and configuration in the [official documentation](https://docs.fleetbase.io/getting-started/install).
 
+# 🧩 Extensions 
+
+Extensions are modular components that enhance the functionality of your Fleetbase instance. They allow you to add new features, customize existing behavior, or integrate with external systems.
+
+You can find extensions available from the official [Fleetbase Console](https://console.fleetbase.io), here you will also be able get your registry token to install extensions to a self-hosted Fleetbase instance. 
+
+Additionally you're able to develop and publish your own extensions as well which you can read more about developing extensions via the [extension building guide](https://docs.fleetbase.io/developers/building-an-extension).
+
+## ⌨️ Fleetbase CLI 
+
+The Fleetbase CLI is a powerful tool designed to simplify the management of extensions for your Fleetbase instance. With the CLI, you can effortlessly handle authentication, install and uninstall extensions, and scaffold new extensions if you are developing your own.
+
+Get started with the CLI with npm:
+
+```bash
+npm i -g @fleetbase/cli
+```
+
+Once installed, you can access a variety of commands to manage your Fleetbase extensions.
+
 # 📱 Apps
 
 Fleetbase offers a few open sourced apps which are built on Fleetbase which can be cloned and customized. Every app is built so that the Fleetbase instance can be switched out whether on-premise install or cloud hosted.
@@ -122,13 +143,11 @@ Fleetbase offers a few open sourced apps which are built on Fleetbase which can
 </ul>
 
 ## 🛣️ Roadmap
-1.  **Extensions Registry and Marketplace** ~ Allows users to publish and sell installable extensions on Fleetbase instances.
-2.  **Inventory and Warehouse Management** ~ Pallet will be Fleetbase’s first official extension for WMS & Inventory.
-3.  **Customer Facing Views** ~ Extensions will be able to create public/customer facing views tracking and management from outside of the console UI.
-4.  **Binary Builds** ~ Run Fleetbase from a single binary.
-5.  **Fleetbase CLI** ~ Official CLI for publishing and managing extensions, as well as scaffolding extensions.
-6.  **Fleetbase for Desktop** ~ Desktop builds for OSX and Windows.
-7. **Custom Maps and Routing Engines** ~ Feature to enable easy integrations with custom maps and routing engines like Google Maps or Mapbox etc…
+1.  **Inventory and Warehouse Management** ~ Pallet will be Fleetbase’s first official extension for WMS & Inventory.
+2.  **Accounting and Invoicing** ~ Ledger will be Fleetbase’s first official extension accounting and invoicing.
+3.  **Binary Builds** ~ Run Fleetbase from a single binary.
+4.  **Fleetbase for Desktop** ~ Desktop builds for OSX and Windows.
+5. **Custom Maps and Routing Engines** ~ Feature to enable easy integrations with custom maps and routing engines like Google Maps or Mapbox etc…
 
 ## 🪲 Bugs and 💡 Feature Requests
 

api/composer.json

@@ -9,9 +9,11 @@
     "license": "AGPL-3.0-or-later",
     "require": {
         "php": "^8.0",
-        "fleetbase/core-api": "^1.4.27",
-        "fleetbase/fleetops-api": "^0.5.3",
-        "fleetbase/storefront-api": "^0.3.12",
+        "appstract/laravel-opcache": "^4.0",
+        "fleetbase/core-api": "^1.6.2",
+        "fleetbase/fleetops-api": "^0.6.5",
+        "fleetbase/registry-bridge": "^0.0.18",
+        "fleetbase/storefront-api": "^0.3.30",
         "guzzlehttp/guzzle": "^7.0.1",
         "laravel/framework": "^10.0",
         "laravel/octane": "^2.3",
@@ -21,7 +23,10 @@
         "phpoffice/phpspreadsheet": "^1.28",
         "predis/predis": "^2.1",
         "psr/http-factory-implementation": "*",
-        "s-ichikawa/laravel-sendgrid-driver": "^4.0"
+        "resend/resend-php": "^0.14.0",
+        "s-ichikawa/laravel-sendgrid-driver": "^4.0",
+        "symfony/mailgun-mailer": "^7.1",
+        "symfony/postmark-mailer": "^7.1"
     },
     "require-dev": {
         "spatie/laravel-ignition": "^2.0",
@@ -34,8 +39,8 @@
     },
     "repositories": [
         {
-            "type": "vcs",
-            "url": "https://github.com/fleetbase/laravel-model-caching"
+            "type": "composer",
+            "url": "https://registry.fleetbase.io"
         }
     ],
     "autoload": {

api/config/mail.php

@@ -64,6 +64,8 @@ return [
             'transport' => 'sendgrid',
         ],
 
+        'resend' => [],
+
         'sendmail' => [
             'transport' => 'sendmail',
             'path' => env('MAIL_SENDMAIL_PATH', '/usr/sbin/sendmail -t -i'),

api/config/opcache.php

@@ -0,0 +1,30 @@
+<?php
+
+return [
+    'url' => env('OPCACHE_URL', config('app.url')),
+    'prefix' => 'opcache-api',
+    'verify' => true,
+    'headers' => [],
+    'directories' => [
+        base_path('app'),
+        base_path('bootstrap'),
+        base_path('public'),
+        base_path('resources'),
+        base_path('routes'),
+        base_path('storage'),
+        base_path('vendor'),
+    ],
+    'exclude' => [
+        'test',
+        'Test',
+        'tests',
+        'Tests',
+        'stub',
+        'Stub',
+        'stubs',
+        'Stubs',
+        'dumper',
+        'Dumper',
+        'Autoload',
+    ],
+];

api/config/services.php

@@ -34,4 +34,13 @@ return [
         'api_key' => env('SENDGRID_API_KEY'),
     ],
 
+    'resend' => [
+        'key' => env('RESEND_KEY'),
+    ],
+
+    'stripe' => [
+        'key' => env('STRIPE_KEY', env('STRIPE_API_KEY')),
+        'secret' => env('STRIPE_SECRET', env('STRIPE_API_SECRET')),
+        'webhook_secret' => env('STRIPE_WEBHOOK_SECRET'),
+    ],
 ];

api/deploy.sh

@@ -15,6 +15,9 @@ php artisan sandbox:migrate --force
 # Seed database
 php artisan fleetbase:seed
 
+# Create permissions, policies, and roles
+php artisan fleetbase:create-permissions
+
 # Restart queue
 php artisan queue:restart
 
@@ -23,3 +26,14 @@ php artisan schedule-monitor:sync
 
 # Clear cache
 php artisan cache:clear
+php artisan route:clear
+
+# Optimize
+php artisan config:cache
+php artisan route:cache
+
+# Initialize registry
+php artisan registry:init
+
+# Restart octane
+# php artisan octane:reload

console/Dockerfile.server-build

@@ -1,8 +1,8 @@
 # ---- Build Stage ----
-FROM node:18.15.0-alpine AS builder
+FROM node:18.15.0-alpine as builder
 
-# Set the working directory in the container to /app
-WORKDIR /app
+# Set the working directory in the container to /console
+WORKDIR /console
 
 # Create the pnpm directory and set the PNPM_HOME environment variable
 RUN mkdir -p ~/.pnpm
@@ -14,7 +14,7 @@ ARG ENVIRONMENT=production
 # 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 pnpm-lock.yaml (or package.json) into the directory /console in the container
 COPY console/package.json console/pnpm-lock.yaml ./
 
 # Copy over .npmrc if applicable
@@ -32,7 +32,7 @@ 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 the console directory contents into the container at /console
 COPY console .
 
 # Build the application
@@ -42,7 +42,7 @@ RUN pnpm build --environment $ENVIRONMENT
 FROM nginx:alpine
 
 # Copy the built app to our served directory
-COPY --from=builder /app/dist /usr/share/nginx/html
+COPY --from=builder /console/dist /usr/share/nginx/html
 
 # Expose the port nginx is bound to
 EXPOSE 4200

console/Dockerfile.static-build

@@ -0,0 +1,57 @@
+# ---- Build Stage ----
+FROM node:18.15.0-alpine
+
+# Set the working directory in the container to /console
+WORKDIR /console
+
+# Create the pnpm directory and set the PNPM_HOME environment variable
+RUN mkdir -p ~/.pnpm
+ENV PNPM_HOME /root/.pnpm
+
+# Set environment
+ARG ENVIRONMENT=production
+
+# Add the pnpm global bin to the PATH
+ENV PATH /root/.pnpm/bin:$PATH
+
+# Copy pnpm-lock.yaml (or package.json) into the directory /console 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 /console
+COPY console .
+
+# Build the application
+RUN pnpm build --environment $ENVIRONMENT
+
+# # Make sure the build output is available in /console/dist
+# RUN ls -la /console/dist
+
+# # ---- Serve Stage ----
+# FROM nginx:alpine
+
+# # Copy the built app to our served directory
+# COPY --from=builder /console/dist /usr/share/nginx/html
+
+# # Expose the port nginx is bound to
+# EXPOSE 4201
+
+# # Use custom nginx.conf
+# COPY console/nginx.conf /etc/nginx/conf.d/default.conf
+
+# # Start Nginx server
+# CMD ["nginx", "-g", "daemon off;"]

console/app/components/configure/filesystem.hbs

@@ -33,7 +33,7 @@
         </InputGroup>
     {{/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">
+        <div class="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>

console/app/components/configure/filesystem.js

@@ -106,10 +106,8 @@ export default class ConfigureFilesystemComponent extends Component {
                     type: 'gcs_credentials',
                 },
                 (uploadedFile) => {
-                    console.log('uploadedFile', uploadedFile);
                     this.gcsCredentialsFileId = uploadedFile.id;
                     this.gcsCredentialsFile = uploadedFile;
-                    console.log('this.gcsCredentialsFile', this.gcsCredentialsFile);
                 }
             );
         } catch (error) {

console/app/components/configure/mail.hbs

@@ -3,25 +3,54 @@
         <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}} />
+        <InputGroup @name="SMTP Host" @value={{this.smtpHost}} disabled={{this.loadConfigValues.isRunning}} />
+        <InputGroup @name="SMTP Port" @type="number" @value={{this.smtpPort}} disabled={{this.loadConfigValues.isRunning}} />
+        <InputGroup>
+            <Toggle @isToggled={{eq this.smtpEncryption "tls"}} @onToggle={{this.enableSmtpEncryption}} @label="SMTP Encryption" @helpText="Enabled TLS Encryption" />
+        </InputGroup>
+        <InputGroup @name="SMTP Username" @value={{this.smtpUsername}} disabled={{this.loadConfigValues.isRunning}} />
+        <InputGroup @name="SMTP Password" @value={{this.smtpPassword}} disabled={{this.loadConfigValues.isRunning}} />
+        <InputGroup @name="SMTP Timeout" @value={{this.smtpTimeout}} disabled={{this.loadConfigValues.isRunning}} />
+        <InputGroup @name="SMTP Auth Mode" @value={{this.smtpAuth_mode}} disabled={{this.loadConfigValues.isRunning}} />
     {{/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}} />
+    {{#if (eq this.mailer "mailgun")}}
+        <InputGroup @name="Mailgun Domain" @value={{this.mailgunDomain}} disabled={{this.loadConfigValues.isRunning}} />
+        <InputGroup @name="Mailgun Endpoint" @value={{this.mailgunEndpoint}} disabled={{this.loadConfigValues.isRunning}} />
+        <InputGroup @name="Mailgun Secret" @value={{this.mailgunSecret}} disabled={{this.loadConfigValues.isRunning}} />
+    {{/if}}
+    {{#if (eq this.mailer "postmark")}}
+        <InputGroup @name="Postmark Token" @value={{this.postmarkToken}} disabled={{this.loadConfigValues.isRunning}} />
+    {{/if}}
+    {{#if (eq this.mailer "sendgrid")}}
+        <InputGroup @name="Sendgrid API Key" @value={{this.sendgridApi_key}} disabled={{this.loadConfigValues.isRunning}} />
+    {{/if}}
+    {{#if (eq this.mailer "resend")}}
+        <InputGroup @name="Resend API Key" @value={{this.resendKey}} disabled={{this.loadConfigValues.isRunning}} />
+    {{/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
+            class="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.testResponse.message}}</span>
         </div>
     {{/if}}
-    <Button @wrapperClass="mt-3" @icon="plug" @text="Test Config" @onClick={{this.test}} @isLoading={{this.isLoading}} />
+    <Button @wrapperClass="mt-3" @icon="plug" @text="Test Config" @onClick={{perform this.test}} @isLoading={{this.test.isRunning}} />
 </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}} />
+    <Button @type="primary" @size="sm" @icon="save" @text="Save Changes" @onClick={{perform this.save}} @disabled={{this.save.isRunning}} @isLoading={{this.save.isRunning}} />
 </EmberWormhole>

console/app/components/configure/mail.js

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
 
 export default class ConfigureMailComponent extends Component {
     @service fetch;
@@ -14,11 +15,17 @@ export default class ConfigureMailComponent extends Component {
     @tracked fromName = null;
     @tracked smtpHost = 'smtp.mailgun.org';
     @tracked smtpPort = 587;
-    @tracked smtpEncryption = 'tls';
+    @tracked smtpEncryption = null;
     @tracked smtpUsername = null;
     @tracked smtpPassword = null;
     @tracked smtpTimeout = null;
     @tracked smtpAuth_mode = null;
+    @tracked mailgunDomain = null;
+    @tracked mailgunEndpoint = 'api.mailgun.net';
+    @tracked mailgunSecret = null;
+    @tracked postmarkToken = null;
+    @tracked sendgridApi_key = null;
+    @tracked resendKey = null;
 
     /**
      * Creates an instance of ConfigureFilesystemComponent.
@@ -26,7 +33,7 @@ export default class ConfigureMailComponent extends Component {
      */
     constructor() {
         super(...arguments);
-        this.loadConfigValues();
+        this.loadConfigValues.perform();
     }
 
     @action setConfigValues(config) {
@@ -37,6 +44,10 @@ export default class ConfigureMailComponent extends Component {
         }
     }
 
+    @action enableSmtpEncryption(enabled) {
+        this.smtpEncryption = enabled ? 'tls' : null;
+    }
+
     @action setMailer(mailer) {
         this.mailer = mailer;
     }
@@ -53,56 +64,77 @@ export default class ConfigureMailComponent extends Component {
         };
     }
 
-    @action loadConfigValues() {
-        this.isLoading = true;
-
-        this.fetch
-            .get('settings/mail-config')
-            .then((response) => {
-                this.setConfigValues(response);
-            })
-            .finally(() => {
-                this.isLoading = false;
-            });
+    @action serializeMailgunConfig() {
+        return {
+            domain: this.mailgunDomain,
+            secret: this.mailgunSecret,
+            endpoint: this.mailgunEndpoint,
+        };
     }
 
-    @action test() {
-        this.isLoading = true;
+    @action serializePostmarkConfig() {
+        return {
+            token: this.postmarkToken,
+        };
+    }
 
-        this.fetch
-            .post('settings/test-mail-config', {
+    @action serializeSendgridConfig() {
+        return {
+            api_key: this.sendgridApi_key,
+        };
+    }
+
+    @action serializeResendConfig() {
+        return {
+            key: this.resendKey,
+        };
+    }
+
+    @task *loadConfigValues() {
+        try {
+            const config = yield this.fetch.get('settings/mail-config');
+            this.setConfigValues(config);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @task *test() {
+        try {
+            this.testResponse = yield 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;
+                mailgun: this.serializeMailgunConfig(),
+                postmark: this.serializePostmarkConfig(),
+                sendgrid: this.serializeSendgridConfig(),
+                resend: this.serializeResendConfig(),
             });
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
     }
 
-    @action save() {
-        this.isLoading = true;
-
-        this.fetch
-            .post('settings/mail-config', {
+    @task *save() {
+        try {
+            yield 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;
+                mailgun: this.serializeMailgunConfig(),
+                postmark: this.serializePostmarkConfig(),
+                sendgrid: this.serializeSendgridConfig(),
+                resend: this.serializeResendConfig(),
             });
+            this.notifications.success('Mail configuration saved.');
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
     }
 }

console/app/components/configure/notification-channels.hbs

@@ -16,7 +16,7 @@
         {{/if}}
     </InputGroup>
     <InputGroup @wrapperClass="mb-0i">
-        <Checkbox @label="APN Production" @value={{this.apn.production}} @onToggle={{fn (mut this.apn.production)}} @disabled={{this.isLoading}} />
+        <Checkbox @label="APN Production" @value={{this.apn.production}} @onToggle={{this.toggleApnProduction}} />
     </InputGroup>
 </ContentPanel>
 
@@ -35,7 +35,7 @@
 
 <ContentPanel @title="Test Push Notification" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
     {{#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">
+        <div class="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>

console/app/components/configure/notification-channels.js

@@ -32,6 +32,13 @@ export default class ConfigureNotificationChannelsComponent extends Component {
         this.loadConfigValues();
     }
 
+    @action toggleApnProduction(checked) {
+        this.apn = {
+            ...this.apn,
+            production: checked,
+        };
+    }
+
     @action removeApnFile() {
         const apnConfig = this.apn;
         apnConfig.private_key_file = null;

console/app/components/configure/queue.hbs

@@ -12,7 +12,7 @@
         <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">
+        <div class="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>

console/app/components/configure/services.hbs

@@ -14,32 +14,34 @@
     <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">
+        <div class="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}} />
+        <Button @wrapperClass="ml-2" @icon="plug" @text="Test Twilio Config" @onClick={{perform this.testTwilio}} @isLoading={{this.testTwilio.isRunning}} @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">
+        <div class="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}} />
+    <Button @wrapperClass="mt-3" @icon="plug" @text="Test Sentry Config" @onClick={{perform this.testSentry}} @isLoading={{this.testSentry.isRunning}} @disabled={{not this.sentryDsn}} />
 </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>
 
+<Spacer @height="200px" />
+
 <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}} />
+    <Button @type="primary" @size="sm" @icon="save" @text="Save Changes" @onClick={{perform this.save}} @disabled={{or this.save.isRunning this.loadConfigValues.isRunning}} @isLoading={{or this.save.isRunning this.loadConfigValues.isRunning}} />
 </EmberWormhole>

console/app/components/configure/services.js

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
 
 export default class ConfigureServicesComponent extends Component {
     @service fetch;
@@ -37,7 +38,7 @@ export default class ConfigureServicesComponent extends Component {
      */
     constructor() {
         super(...arguments);
-        this.loadConfigValues();
+        this.loadConfigValues.perform();
     }
 
     @action setConfigValues(config) {
@@ -48,24 +49,19 @@ export default class ConfigureServicesComponent extends Component {
         }
     }
 
-    @action loadConfigValues() {
-        this.isLoading = true;
-
-        this.fetch
-            .get('settings/services-config')
-            .then((response) => {
-                this.setConfigValues(response);
-            })
-            .finally(() => {
-                this.isLoading = false;
-            });
+    @task *loadConfigValues() {
+        try {
+            const config = yield this.fetch.get('settings/services-config');
+            this.setConfigValues(config);
+            return config;
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
     }
 
-    @action save() {
-        this.isLoading = true;
-
-        this.fetch
-            .post('settings/services-config', {
+    @task *save() {
+        try {
+            yield this.fetch.post('settings/services-config', {
                 aws: {
                     key: this.awsKey,
                     secret: this.awsSecret,
@@ -86,45 +82,36 @@ export default class ConfigureServicesComponent extends Component {
                 sentry: {
                     dsn: this.sentryDsn,
                 },
-            })
-            .then(() => {
-                this.notifications.success('Services configuration saved.');
-            })
-            .finally(() => {
-                this.isLoading = false;
             });
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
     }
 
-    @action testTwilio() {
-        this.isLoading = true;
-
-        this.fetch
-            .post('settings/test-twilio-config', {
+    @task *testTwilio() {
+        try {
+            const twilioTestResponse = yield 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;
             });
+            this.twilioTestResponse = twilioTestResponse;
+            return twilioTestResponse;
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
     }
 
-    @action testSentry() {
-        this.isLoading = true;
-
-        this.fetch
-            .post('settings/test-sentry-config', {
+    @task *testSentry() {
+        try {
+            const sentryTestResponse = yield this.fetch.post('settings/test-sentry-config', {
                 dsn: this.sentryDsn,
-            })
-            .then((response) => {
-                this.sentryTestResponse = response;
-            })
-            .finally(() => {
-                this.isLoading = false;
             });
+            this.sentryTestResponse = sentryTestResponse;
+            return sentryTestResponse;
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
     }
 }

console/app/components/configure/socket.hbs

@@ -37,7 +37,7 @@
         </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">
+        <div class="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>

console/app/components/dashboard.hbs

@@ -1,99 +0,0 @@
-<div class="fleetbase-dashboard-grid flex items-center justify-between mb-4 mt-6 px-14">
-    <div class="left-section">
-        <h1 class="text-lg font-bold">{{this.dashboard.currentDashboard.name}}</h1>
-    </div>
-    <div class="fleetbase-dashboard-actions right-section ml-4 flex items-center">
-        <div class="fleetbase-model-select fleetbase-power-select ember-model-select h-10">
-
-            <DropdownButton
-                class="h-10"
-                @text={{if this.dashboard.currentDashboard.name this.dashboard.currentDashboard.name (t "component.dashboard.select-dashboard")}}
-                @textClass="text-sm mr-2"
-                @buttonClass="flex-row-reverse w-44 justify-between"
-                @icon="caret-down"
-                @iconClass="mr-0i"
-                @size="sm"
-                @iconPrefix="fas"
-                @triggerClass="hidden md:flex"
-                as |dd|
-            >
-                <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
-                    <div class="p-1">
-                        {{#each this.dashboard.dashboards as |dashboard|}}
-                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.selectDashboard dashboard)}}>
-                                <div class="flex-1 flex flex-row items-center">
-                                    <div class="w-6">
-                                        <FaIcon @icon="desktop" />
-                                    </div>
-                                    <span>{{dashboard.name}}</span>
-                                </div>
-                                <div>
-                                    {{#if (eq this.dashboard.currentDashboard.id dashboard.id)}}
-                                        <FaIcon @icon="check" class="text-green-500" />
-                                    {{/if}}
-                                </div>
-                            </a>
-                        {{/each}}
-                    </div>
-                </div>
-            </DropdownButton>
-        </div>
-
-        <div class="ml-2 relative h-10">
-            <DropdownButton class="h-10" @icon="ellipsis-h" @size="sm" @iconPrefix="fas" @triggerClass="hidden md:flex" as |dd|>
-                <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
-                    <div class="p-1">
-                        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.createDashboard)}}>
-                            <div class="w-6">
-                                <FaIcon @icon="add" />
-                            </div>
-                            <span>{{t "component.dashboard.create-new-dashboard"}}</span>
-                        </a>
-
-                        {{#unless (eq this.dashboard.currentDashboard.user_uuid "system")}}
-                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.onChangeEdit true)}}>
-                                <div class="w-6">
-                                    <FaIcon @icon="edit" />
-                                </div>
-                                <span>{{t "component.dashboard.edit-layout"}}</span>
-                            </a>
-                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.onAddingWidget true)}}>
-                                <div class="w-6">
-                                    <FaIcon @icon="add" />
-                                </div>
-                                <span>{{t "component.dashboard.add-widgets"}}</span>
-                            </a>
-
-                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.deleteDashboard this.dashboard.currentDashboard)}}>
-                                <div class="w-6">
-                                    <FaIcon @icon="trash" />
-                                </div>
-                                <span>{{t "component.dashboard.delete-dashboard"}}</span>
-                            </a>
-                        {{/unless}}
-
-                    </div>
-                </div>
-            </DropdownButton>
-        </div>
-        {{#if this.dashboard.isEditingDashboard}}
-            <div class="ml-2 h-10">
-                <Button @type="magic" @icon="save" @helpText={{t "component.dashboard.save-dashboard"}} @onClick={{fn this.onChangeEdit false}} class="h-10" />
-            </div>
-        {{/if}}
-    </div>
-</div>
-
-<div class="px-10">
-    <Dashboard::Create @isEdit={{this.dashboard.isEditingDashboard}} @isAddingWidget={{this.dashboard.isAddingWidget}} @dashboard={{this.dashboard.currentDashboard}} />
-    {{#if this.dashboard.isAddingWidget}}
-        <EmberWormhole @to="console-home-wormhole">
-            <Dashboard::WidgetPanel
-                @isOpen={{this.dashboard.isAddingWidget}}
-                @onLoad={{this.setWidgetSelectorPanelContext}}
-                @dashboard={{this.dashboard.currentDashboard}}
-                @onClose={{fn this.onAddingWidget false}}
-            />
-        </EmberWormhole>
-    {{/if}}
-</div>

console/app/components/dashboard.js

@@ -1,140 +0,0 @@
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
-
-/**
- * DashboardComponent for managing dashboards in an Ember application.
- * This component handles actions such as selecting, creating, deleting dashboards,
- * and managing widget selectors and dashboard editing states.
- *
- * @extends Component
- */
-export default class DashboardComponent extends Component {
-    /**
-     * Ember Data store service.
-     * @type {Service}
-     */
-    @service store;
-
-    /**
-     * Internationalization service for managing translations.
-     * @type {Service}
-     */
-    @service intl;
-
-    /**
-     * Notifications service for displaying alerts or confirmations.
-     * @type {Service}
-     */
-    @service notifications;
-
-    /**
-     * Modals manager service for handling modal dialogs.
-     * @type {Service}
-     */
-    @service modalsManager;
-
-    /**
-     * Fetch service for handling HTTP requests.
-     * @type {Service}
-     */
-    @service fetch;
-
-    /**
-     * Dashboard service for business logic related to dashboards.
-     * @type {Service}
-     */
-    @service dashboard;
-
-    /**
-     * Creates an instance of DashboardComponent.
-     * @memberof DashboardComponent
-     */
-    constructor() {
-        super(...arguments);
-        this.dashboard.loadDashboards.perform();
-    }
-
-    /**
-     * Action to select a dashboard.
-     * @param {Object} dashboard - The dashboard to be selected.
-     */
-    @action selectDashboard(dashboard) {
-        this.dashboard.selectDashboard.perform(dashboard);
-    }
-
-    /**
-     * Sets the context for the widget selector panel.
-     * @param {Object} widgetSelectorContext - The context object for the widget selector.
-     */
-    @action setWidgetSelectorPanelContext(widgetSelectorContext) {
-        this.widgetSelectorContext = widgetSelectorContext;
-    }
-
-    /**
-     * Creates a new dashboard.
-     * @param {Object} dashboard - The dashboard to be created.
-     * @param {Object} [options={}] - Optional parameters for dashboard creation.
-     */
-    @action createDashboard(dashboard, options = {}) {
-        this.modalsManager.show('modals/create-dashboard', {
-            title: this.intl.t('component.dashboard.create-a-new-dashboard'),
-            acceptButtonText: this.intl.t('component.dashboard.confirm-create-dashboard'),
-            confirm: async (modal, done) => {
-                modal.startLoading();
-
-                // Get the name from the modal options
-                const { name } = modal.getOptions();
-
-                await this.dashboard.createDashboard.perform(name);
-                done();
-            },
-            ...options,
-        });
-    }
-
-    /**
-     * Deletes a dashboard.
-     * @param {Object} dashboard - The dashboard to be deleted.
-     * @param {Object} [options={}] - Optional parameters for dashboard deletion.
-     */
-    @action deleteDashboard(dashboard, options = {}) {
-        if (this.dashboard.dashboards?.length === 1) {
-            return this.notifications.error(this.intl.t('component.dashboard.you-cannot-delete-this-dashboard'));
-        }
-
-        this.modalsManager.confirm({
-            title: this.intl.t('component.dashboard.are-you-sure-you-want-delete-dashboard', { dashboardName: dashboard.name }),
-            confirm: async (modal, done) => {
-                modal.startLoading();
-                await this.dashboard.deleteDashboard.perform(dashboard);
-                done();
-            },
-            ...options,
-        });
-    }
-
-    /**
-     * Action to handle the addition of a widget.
-     * @param {boolean} [state=true] - The state to set for adding a widget.
-     */
-    @action onAddingWidget(state = true) {
-        this.dashboard.onAddingWidget(state);
-    }
-
-    /**
-     * Sets the current dashboard.
-     * @param {Object} dashboard - The dashboard to be set as current.
-     */
-    @action setCurrentDashboard(dashboard) {
-        this.dashboard.setCurrentDashboard.perform(dashboard);
-    }
-
-    /**
-     * Changes the editing state of the dashboard.
-     * @param {boolean} [state=true] - The state to set for editing the dashboard.
-     */
-    @action onChangeEdit(state = true) {
-        this.dashboard.onChangeEdit(state);
-    }
-}

console/app/components/dashboard/count.js

@@ -27,9 +27,10 @@ export default class DashboardCountComponent extends Component {
      * @param {Object} { options }
      * @memberof WidgetKeyMetricsCountComponent
      */
-    constructor(owner, { options, title }) {
+    constructor(owner, { options, title, value = null }) {
         super(...arguments);
         this.title = title;
+        this.value = value;
         this.createRenderValueFromOptions(options);
     }
 
@@ -40,6 +41,10 @@ export default class DashboardCountComponent extends Component {
      * @memberof WidgetKeyMetricsCountComponent
      */
     createRenderValueFromOptions(options = {}) {
+        if (value !== null) {
+            return;
+        }
+
         let { format, currency, dateFormat, value } = options;
 
         switch (format) {

console/app/components/dashboard/create.hbs

@@ -1,14 +0,0 @@
-<div class="fleetbase-dashboard-grid" ...attributes>
-    <GridStack @options={{this.gridOptions}} @onChange={{this.onChangeGrid}}>
-        {{#each @dashboard.widgets as |widget|}}
-            <GridStackItem id={{widget.id}} @options={{spread-widget-options (hash id=widget.id options=widget.grid_options)}} class="relative">
-                {{component widget.component options=widget.options}}
-                {{#if @isEdit}}
-                    <div class="absolute top-2 right-2">
-                        <Button @type="default" @icon="trash" @helpText={{"Remove widget from the dashboard"}} @onClick={{fn this.removeWidget widget}} />
-                    </div>
-                {{/if}}
-            </GridStackItem>
-        {{/each}}
-    </GridStack>
-</div>

console/app/components/dashboard/create.js

@@ -1,99 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action, computed } from '@ember/object';
-import { inject as service } from '@ember/service';
-
-/**
- * Component responsible for creating and managing the dashboard layout.
- * Provides functionalities such as toggling widget float, changing grid layout, and removing widgets.
- *
- * @extends Component
- */
-export default class DashboardCreateComponent extends Component {
-    /**
-     * Notifications service for displaying alerts or errors.
-     * @type {Service}
-     */
-    @service notifications;
-
-    /**
-     * Tracked array to keep track of widgets that have been updated.
-     * @type {Array}
-     */
-    @tracked updatedWidgets = [];
-
-    /**
-     * Action to toggle the floating state of widgets on the grid.
-     */
-    @action toggleFloat() {
-        this.shouldFloat = !this.shouldFloat;
-    }
-
-    /**
-     * Handles changes to the grid layout, such as repositioning or resizing widgets.
-     * Iterates over each widget event detail and updates the corresponding widget's properties if necessary.
-     *
-     * @param {Event} event - Event containing details about the grid change.
-     * @action
-     */
-    @action onChangeGrid(event) {
-        const { dashboard } = this.args;
-
-        event.detail.forEach((currentWidgetEvent) => {
-            const alreadyUpdated = this.updatedWidgets.find((item) => item.id === currentWidgetEvent.id);
-            if (alreadyUpdated || !this.dashboard) {
-                return;
-            }
-
-            const changedWidget = dashboard.widgets.find((widget) => widget.id === currentWidgetEvent.id);
-            if (!changedWidget) {
-                return;
-            }
-
-            const { x, y, w, h } = currentWidgetEvent;
-            const response = changedWidget.updateProperties({
-                grid_options: { x, y, w, h },
-            });
-            if (response) {
-                this.updatedWidgets.push(changedWidget);
-            }
-        });
-    }
-
-    /**
-     * Removes a specified widget from the dashboard.
-     * Performs a removal operation on the dashboard and handles any errors that occur during the process.
-     *
-     * @param {Object} widget - The widget object to be removed.
-     * @action
-     */
-    @action removeWidget(widget) {
-        const { dashboard } = this.args;
-
-        if (dashboard) {
-            dashboard.removeWidget(widget.id).catch((error) => {
-                this.notifications.serverError(error);
-            });
-        }
-    }
-
-    /**
-     * Computed property that returns grid options based on the current edit state.
-     * Configures grid behavior such as floating, animation, and drag and resize capabilities.
-     *
-     * @computed
-     * @returns {Object} An object containing grid configuration options.
-     */
-    @computed('args.isEdit') get gridOptions() {
-        return {
-            float: true,
-            animate: true,
-            acceptWidgets: true,
-            alwaysShowResizeHandle: this.args.isEdit,
-            disableDrag: !this.args.isEdit,
-            disableResize: !this.args.isEdit,
-            resizable: { handles: 'all' },
-            cellHeight: 30,
-        };
-    }
-}

console/app/components/github-card.hbs

@@ -1,6 +1,6 @@
 <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}}
+        {{#if this.getRepositoryData.isRunning}}
             <div class="p-4">
                 <Spinner />
             </div>

console/app/components/github-card.js

@@ -10,9 +10,12 @@ import fetch from 'fetch';
 
 export default class GithubCardComponent extends Component {
     @storageFor('local-cache') localCache;
-    @tracked data;
-    @tracked tags;
-    @tracked isLoading = false;
+    @tracked data = {
+        owner: {
+            avatar_url: 'https://avatars.githubusercontent.com/u/38091894?v=4',
+        },
+    };
+    @tracked tags = [];
 
     @computed('tags.length') get latestRelease() {
         if (isArray(this.tags) && this.tags.length) {

console/app/components/impersonator-tray.hbs

@@ -0,0 +1,36 @@
+{{#if this.isImpersonator}}
+    <EmberWormhole @to="view-header-actions">
+        <div class="next-user-button locale-selector-tray" ...attributes>
+            <BasicDropdown
+                class={{@wrapperClass}}
+                @onOpen={{@onOpen}}
+                @onClose={{@onClose}}
+                @calculatePosition={{this.calculatePosition}}
+                @verticalPosition={{@verticalPosition}}
+                @horizontalPosition={{@horizontalPosition}}
+                @renderInPlace={{or @renderInPlace (not (media "isMobile"))}}
+                as |dd|
+            >
+                <dd.Trigger class="{{@triggerClass}} local-selector-tray-trigger {{if (media 'isMobile') 'is-mobile'}}">
+                    <div class="next-org-button-trigger flex-shrink-0 {{if dd.isOpen 'is-open'}}">
+                        <FaIcon @icon="user-secret" @size="sm" />
+                    </div>
+                </dd.Trigger>
+                <dd.Content class="{{@contentClass}} locale-selector-tray-content {{if (media 'isMobile') 'is-mobile'}}">
+                    <div class="next-dd-menu {{@dropdownMenuClass}} {{if dd.isOpen 'is-open'}}">
+                        <div class="px-1">
+                            <a href="javascript:;" class="next-dd-item" {{on "click" this.restoreSession}}>
+                                <div class="flex flex-row items-centerw-full">
+                                    <div class="w-6">
+                                        <FaIcon @icon="person-walking-arrow-loop-left" @size="sm" />
+                                    </div>
+                                    <div>End Impersonation</div>
+                                </div>
+                            </a>
+                        </div>
+                    </div>
+                </dd.Content>
+            </BasicDropdown>
+        </div>
+    </EmberWormhole>
+{{/if}}

console/app/components/impersonator-tray.js

@@ -0,0 +1,39 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { later } from '@ember/runloop';
+
+export default class ImpersonatorTrayComponent extends Component {
+    @service session;
+    @service notifications;
+    @service router;
+    @service fetch;
+
+    get isImpersonator() {
+        return typeof this.session.data?.authenticated?.impersonator === 'string';
+    }
+
+    /**
+     * Restore session
+     *
+     * @memberof ConsoleAdminOrganizationsIndexUsersController
+     */
+    @action async restoreSession() {
+        try {
+            const { token } = await this.fetch.delete('auth/impersonate');
+            await this.router.transitionTo('console');
+            this.session.manuallyAuthenticate(token);
+            this.notifications.info(`Ending impersonation session.`);
+            later(
+                this,
+                () => {
+                    window.location.reload();
+                },
+                600
+            );
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+}

console/app/components/modals/edit-organization.hbs

@@ -0,0 +1,12 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container pt-0i text-gray-900 dark:text-white">
+        <InputGroup @name="Organization name" @value={{@options.organization.name}} />
+        <InputGroup @name="Organization description" @value={{@options.organization.description}} />
+        <InputGroup @name="Organization phone number">
+            <PhoneInput @value={{@options.organization.phone}} @onInput={{fn (mut @options.organization.phone)}} class="form-input w-full" />
+        </InputGroup>
+        <InputGroup @name="Organization currency">
+            <CurrencySelect @value={{@options.organization.currency}} @onSelect={{fn (mut @options.organization.currency)}} @triggerClass="w-full form-select" />
+        </InputGroup>
+    </div>
+</Modal::Default>

console/app/components/modals/edit-organization.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class ModalsEditOrganizationComponent extends Component {}

console/app/components/modals/leave-organization.hbs

@@ -0,0 +1,43 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container pt-0i text-gray-900 dark:text-white">
+        {{#if @options.isOwner}}
+            {{#if @options.hasOtherMembers}}
+                <p>
+                    <div class="text-base mb-2">
+                        As the owner of
+                        <strong>{{@options.organization.name}}</strong>, leaving the organization requires you to nominate a new owner.
+                    </div>
+                    <div>Please select a member from the dropdown below to transfer ownership before you can proceed.</div>
+                </p>
+                <InputGroup @name="Select a New Owner" @wrapperClass="mt-2 mb-0i">
+                    <Select
+                        @options={{@options.organization.users}}
+                        @value={{@options.newOwnerId}}
+                        @onSelect={{@options.selectNewOwner}}
+                        @optionLabel="name"
+                        @optionValue="id"
+                        @placeholder="Select a member"
+                    />
+                </InputGroup>
+            {{else if @options.willBeDeleted}}
+                <p>
+                    <div class="text-base mb-2">
+                        You are the sole owner of
+                        <strong>{{@options.organization.name}}</strong>.
+                    </div>
+                    <div>By leaving, the organization will be permanently deleted along with all its data.</div>
+                    <div>Are you sure you want to proceed?</div>
+                </p>
+                <p class="mt-3"><em>This action cannot be undone.</em></p>
+            {{/if}}
+        {{else}}
+            <p>
+                <div class="text-base mb-2">
+                    Are you sure you want to leave the organization
+                    <strong>{{@options.organization.name}}</strong>?
+                </div>
+                <div>You will no longer have access to its resources and settings.</div>
+            </p>
+        {{/if}}
+    </div>
+</Modal::Default>

console/app/components/modals/leave-organization.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class ModalsLeaveOrganizationComponent extends Component {}

console/app/controllers/auth/forgot-password.js

@@ -1,28 +1,11 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
 
 export default class AuthForgotPasswordController extends Controller {
-    /**
-     * Inject the `fetch` service
-     *
-     * @memberof AuthForgotPasswordController
-     */
     @service fetch;
-
-    /**
-     * Inject the `notifications` service
-     *
-     * @memberof AuthForgotPasswordController
-     */
     @service notifications;
-
-    /**
-     * Inject the `intl` service
-     *
-     * @memberof AuthForgotPasswordController
-     */
     @service intl;
 
     /**
@@ -32,13 +15,6 @@ export default class AuthForgotPasswordController extends Controller {
      */
     @tracked email;
 
-    /**
-     * The loading state
-     *
-     * @memberof AuthForgotPasswordController
-     */
-    @tracked isLoading;
-
     /**
      * Indicator if request has been sent.
      *
@@ -46,30 +22,27 @@ export default class AuthForgotPasswordController extends Controller {
      */
     @tracked isSent = false;
 
+    /**
+     * Query parameters.
+     *
+     * @memberof AuthForgotPasswordController
+     */
+    queryParams = ['email'];
+
     /**
      * Sends a secure magic reset link to the user provided email.
      *
      * @memberof AuthForgotPasswordController
      */
-    @action sendSecureLink(event) {
-        // firefox patch
+    @task *sendSecureLink(event) {
         event.preventDefault();
 
-        const { email } = this;
-
-        this.isLoading = true;
-
-        this.fetch
-            .post('auth/get-magic-reset-link', { email })
-            .then(() => {
-                this.notifications.success(this.intl.t('auth.forgot-password.success-message'));
-                this.isSent = true;
-            })
-            .catch((error) => {
-                this.notifications.serverError(error);
-            })
-            .finally(() => {
-                this.isLoading = false;
-            });
+        try {
+            yield this.fetch.post('auth/get-magic-reset-link', { email: this.email });
+            this.notifications.success(this.intl.t('auth.forgot-password.success-message'));
+            this.isSent = true;
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
     }
 }

console/app/controllers/auth/login.js

@@ -5,53 +5,12 @@ 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;
-
-    /**
-     * Inject the `router` service
-     *
-     * @var {Service}
-     */
     @service router;
-
-    /**
-     * Inject the `intl` service
-     *
-     * @var {Service}
-     */
     @service intl;
-
-    /**
-     * Inject the `fetch` service
-     *
-     * @var {Service}
-     */
     @service fetch;
 
     /**
@@ -110,8 +69,20 @@ export default class AuthLoginController extends Controller {
      */
     @tracked failedAttempts = 0;
 
+    /**
+     * Authentication token.
+     *
+     * @memberof AuthLoginController
+     */
     @tracked token;
 
+    /**
+     * Action to login user.
+     *
+     * @param {Event} event
+     * @return {void}
+     * @memberof AuthLoginController
+     */
     @action async login(event) {
         // firefox patch
         event.preventDefault();
@@ -166,6 +137,11 @@ export default class AuthLoginController extends Controller {
                 return this.sendUserForEmailVerification(identity);
             }
 
+            // Handle password reset required
+            if (error.toString().includes('reset required')) {
+                return this.sendUserForPasswordReset(identity);
+            }
+
             return this.failure(error);
         }
 
@@ -210,6 +186,20 @@ export default class AuthLoginController extends Controller {
         });
     }
 
+    /**
+     * Sends user to forgot password flow.
+     *
+     * @param {String} email
+     * @return {Promise<Transition>}
+     * @memberof AuthLoginController
+     */
+    @action sendUserForPasswordReset(email) {
+        this.notifications.warning(this.intl.t('auth.login.password-reset-required'));
+        return this.router.transitionTo('auth.forgot-password', { queryParams: { email } }).then(() => {
+            this.reset('error');
+        });
+    }
+
     /**
      * Sets correct route to send user to after login.
      *

console/app/controllers/auth/reset-password.js

@@ -4,32 +4,9 @@ import { tracked } from '@glimmer/tracking';
 import { task } from 'ember-concurrency';
 
 export default class AuthResetPasswordController extends Controller {
-    /**
-     * Inject the `fetch` service
-     *
-     * @memberof AuthResetPasswordController
-     */
     @service fetch;
-
-    /**
-     * Inject the `notifications` service
-     *
-     * @memberof AuthResetPasswordController
-     */
     @service notifications;
-
-    /**
-     * Inject the `router` service
-     *
-     * @memberof AuthResetPasswordController
-     */
     @service router;
-
-    /**
-     * Inject the `intl` service
-     *
-     * @memberof AuthResetPasswordController
-     */
     @service intl;
 
     /**
@@ -53,6 +30,13 @@ export default class AuthResetPasswordController extends Controller {
      */
     @tracked password_confirmation;
 
+    /**
+     * Query parameters.
+     *
+     * @memberof AuthResetPasswordController
+     */
+    queryParams = ['code'];
+
     /**
      * The reset password task.
      *

console/app/controllers/auth/verification.js

@@ -3,118 +3,27 @@ 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';
+import { task } from 'ember-concurrency';
 
 export default class AuthVerificationController 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;
-
-    /**
-     * Inject the `router` service
-     *
-     * @memberof OnboardIndexController
-     */
     @service router;
-
-    /**
-     * Inject the `session` service
-     *
-     * @memberof OnboardIndexController
-     */
     @service session;
+    @service intl;
 
-    /**
-     * The session paramerer.
-     *
-     * @memberof OnboardVerifyEmailController
-     */
+    /** props */
     @tracked hello;
-
-    /**
-     * The token paramerer.
-     *
-     * @memberof OnboardVerifyEmailController
-     */
     @tracked token;
-
-    /**
-     * 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 = 1000 * 60 * 1.25;
-
-    /**
-     * Determines if Fleetbase is still awaiting verification after a certain time.
-     *
-     * @memberof OnboardVerifyEmailController
-     */
-    @tracked stillWaiting = false;
-
-    /**
-     * the input code.
-     *
-     * @memberof OnboardVerifyEmailController
-     */
     @tracked code;
+    @tracked email;
+    @tracked isReadyToSubmit = false;
+    @tracked waitTimeout = 1000 * 60 * 1.25;
+    @tracked stillWaiting = false;
+    @tracked queryParams = ['hello', 'token', 'code'];
 
-    /**
-     * The query param for the session token.
-     *
-     * @memberof OnboardVerifyEmailController
-     */
-    @tracked queryParams = ['hello', 'token'];
-
-    /**
-     * The boolean opposite of `isReadyToSubmit`
-     *
-     * @memberof OnboardVerifyEmailController
-     */
-    @not('isReadyToSubmit') isNotReadyToSubmit;
-
-    /**
-     * Creates an instance of OnboardVerifyEmailController.
-     * @memberof OnboardVerifyEmailController
-     */
     constructor() {
         super(...arguments);
 
@@ -127,21 +36,10 @@ export default class AuthVerificationController extends Controller {
         );
     }
 
-    /**
-     * Allow user to manually trigger no code received prompt.
-     *
-     * @memberof AuthVerificationController
-     */
     @action onDidntReceiveCode() {
         this.stillWaiting = true;
     }
 
-    /**
-     * Validates the input
-     *
-     * @param {InputEvent} { target: { value } }
-     * @memberof OnboardVerifyEmailController
-     */
     @action validateInput({ target: { value } }) {
         if (value.length > 5) {
             this.isReadyToSubmit = true;
@@ -150,12 +48,6 @@ export default class AuthVerificationController extends Controller {
         }
     }
 
-    /**
-     * Validates input on the first render
-     *
-     * @param {HTMLElement} el
-     * @memberof AuthVerificationController
-     */
     @action validateInitInput(el) {
         const value = el.value;
         if (value.length > 5) {
@@ -165,89 +57,70 @@ export default class AuthVerificationController extends Controller {
         }
     }
 
-    /**
-     * Submits to verify code.
-     *
-     * @return {Promise}
-     * @memberof OnboardVerifyEmailController
-     */
-    @action verifyCode() {
-        const { token, code, email } = this;
+    @task *verifyCode() {
+        try {
+            const { status, token } = yield this.fetch.post('auth/verify-email', { token: this.token, code: this.code, email: this.email, authenticate: true });
+            if (status === 'ok') {
+                this.notifications.success('Email successfully verified!');
 
-        this.isLoading = true;
+                if (token) {
+                    this.notifications.info(`Welcome to ${this.intl.t('app.name')}`);
+                    this.session.manuallyAuthenticate(token);
 
-        return this.fetch
-            .post('auth/verify-email', { token, code, email, authenticate: true })
-            .then(({ status, token }) => {
-                if (status === 'ok') {
-                    this.notifications.success('Email successfully verified!');
-
-                    if (token) {
-                        this.notifications.info('Welcome to Fleetbase!');
-                        this.session.manuallyAuthenticate(token);
-
-                        return this.router.transitionTo('console');
-                    }
-
-                    return this.router.transitionTo('auth.login');
+                    return this.router.transitionTo('console');
                 }
-            })
-            .catch((error) => {
-                this.notifications.serverError(error);
-            })
-            .finally(() => {
-                this.isLoading = false;
-            });
+
+                return this.router.transitionTo('auth.login');
+            }
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
     }
 
-    /**
-     * 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) => {
+            confirm: async (modal) => {
                 modal.startLoading();
                 const phone = modal.getOption('phone');
+                if (!phone) {
+                    this.notifications.error('No phone number provided.');
+                }
 
-                return this.fetch
-                    .post('onboard/send-verification-sms', { phone, session: this.hello })
-                    .then(() => {
-                        this.notifications.success('Verification code SMS sent!');
-                    })
-                    .catch((error) => {
-                        this.notifications.serverError(error);
-                    });
+                try {
+                    await this.fetch.post('onboard/send-verification-sms', { phone, session: this.hello });
+                    this.notifications.success('Verification code SMS sent!');
+                    modal.done();
+                } catch (error) {
+                    this.notifications.serverError(error);
+                    modal.stopLoading();
+                }
             },
         });
     }
 
-    /**
-     * 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) => {
+            confirm: async (modal) => {
                 modal.startLoading();
                 const email = modal.getOption('email');
+                if (!email) {
+                    this.notifications.error('No email number provided.');
+                }
 
-                return this.fetch
-                    .post('onboard/send-verification-email', { email, session: this.hello })
-                    .then(() => {
-                        this.notifications.success('Verification code email sent!');
-                    })
-                    .catch((error) => {
-                        this.notifications.serverError(error);
-                    });
+                try {
+                    await this.fetch.post('onboard/send-verification-email', { email, session: this.hello });
+                    this.notifications.success('Verification code email sent!');
+                    modal.done();
+                } catch (error) {
+                    this.notifications.serverError(error);
+                    modal.stopLoading();
+                }
             },
         });
     }

console/app/controllers/console.js

@@ -1,69 +1,21 @@
 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 { action } from '@ember/object';
 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 `intl` service.
-     *
-     * @var {Service}
-     */
     @service intl;
-
-    /**
-     * Inject the `universe` service.
-     *
-     * @var {Service}
-     */
     @service universe;
+    @service abilities;
 
     /**
      * Authenticated user organizations.
@@ -98,23 +50,28 @@ export default class ConsoleController extends Controller {
      *
      * @var {Array}
      */
-    @tracked hiddenSidebarRoutes = ['console.home', 'console.extensions', 'console.notifications'];
+    @tracked hiddenSidebarRoutes = ['console.home', 'console.notifications', 'console.virtual'];
 
     /**
-     * Installed extensions.
+     * Menu items to be added to the main header navigation bar.
      *
-     * @var {Array}
+     * @memberof ConsoleController
      */
-    @computed() get extensions() {
-        return getOwner(this).application.extensions;
-    }
+    @tracked menuItems = [];
 
     /**
-     * Get the currently authenticated user
+     * Menu items to be added to the user dropdown menu located in the header.
      *
-     * @var {Model}
+     * @memberof ConsoleController
      */
-    @alias('currentUser.user') user;
+    @tracked userMenuItems = [];
+
+    /**
+     * Menu items to be added to the organization dropdown menu located in the header.
+     *
+     * @memberof ConsoleController
+     */
+    @tracked organizationMenuItems = [];
 
     /**
      * Creates an instance of ConsoleController.
@@ -198,13 +155,13 @@ export default class ConsoleController extends Controller {
      *
      * @void
      */
-    @action invalidateSession(noop, event) {
+    @action async invalidateSession(noop, event) {
         event.preventDefault();
-        this.session.invalidateWithLoader();
+        await this.session.invalidateWithLoader();
     }
 
     /**
-     * Action to invalidate and log user out
+     * Action to create or join an organization.
      *
      * @void
      */
@@ -228,53 +185,51 @@ export default class ConsoleController extends Controller {
             changeAction: (action) => {
                 this.modalsManager.setOption('action', action);
             },
-            confirm: (modal) => {
+            confirm: async (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(this.intl.t('console.create-or-join-organization.join-success-notification'));
-                            later(
-                                this,
-                                () => {
-                                    window.location.reload();
-                                },
-                                900
-                            );
-                        })
-                        .catch((error) => {
-                            this.notifications.serverError(error);
-                        });
-                }
-
-                return this.fetch
-                    .post('auth/create-organization', {
-                        name,
-                        description,
-                        phone,
-                        currency,
-                        country,
-                        timezone,
-                    })
-                    .then(() => {
+                    try {
+                        await this.fetch.post('auth/join-organization', { next });
                         this.fetch.flushRequestCache('auth/organizations');
-                        this.notifications.success(this.intl.t('console.create-or-join-organization.create-success-notification'));
-                        later(
+                        this.notifications.success(this.intl.t('console.create-or-join-organization.join-success-notification'));
+                        return later(
                             this,
                             () => {
                                 window.location.reload();
                             },
                             900
                         );
-                    })
-                    .catch((error) => {
-                        this.notifications.serverError(error);
+                    } catch (error) {
+                        modal.stopLoading();
+                        return this.notifications.serverError(error);
+                    }
+                }
+
+                try {
+                    await this.fetch.post('auth/create-organization', {
+                        name,
+                        description,
+                        phone,
+                        currency,
+                        country,
+                        timezone,
                     });
+                    this.fetch.flushRequestCache('auth/organizations');
+                    this.notifications.success(this.intl.t('console.create-or-join-organization.create-success-notification'));
+                    return later(
+                        this,
+                        () => {
+                            window.location.reload();
+                        },
+                        900
+                    );
+                } catch (error) {
+                    modal.stopLoading();
+                    return this.notifications.serverError(error);
+                }
             },
         });
     }
@@ -294,25 +249,24 @@ export default class ConsoleController extends Controller {
             body: this.intl.t('console.switch-organization.modal-body'),
             acceptButtonText: this.intl.t('console.switch-organization.modal-accept-button-text'),
             acceptButtonScheme: 'primary',
-            confirm: (modal) => {
+            confirm: async (modal) => {
                 modal.startLoading();
 
-                return this.fetch
-                    .post('auth/switch-organization', { next: organization.uuid })
-                    .then(() => {
-                        this.fetch.flushRequestCache('auth/organizations');
-                        this.notifications.success(this.intl.t('console.switch-organization.success-notification'));
-                        later(
-                            this,
-                            () => {
-                                window.location.reload();
-                            },
-                            900
-                        );
-                    })
-                    .catch((error) => {
-                        this.notifications.serverError(error);
-                    });
+                try {
+                    await this.fetch.post('auth/switch-organization', { next: organization.uuid });
+                    this.fetch.flushRequestCache('auth/organizations');
+                    this.notifications.success(this.intl.t('console.switch-organization.success-notification'));
+                    return later(
+                        this,
+                        () => {
+                            window.location.reload();
+                        },
+                        900
+                    );
+                } catch (error) {
+                    modal.stopLoading();
+                    return this.notifications.serverError(error);
+                }
             },
         });
     }

console/app/controllers/console/account/auth.js

@@ -12,32 +12,9 @@ import getTwoFaMethods from '@fleetbase/console/utils/get-two-fa-methods';
  * @extends Controller
  */
 export default class ConsoleAccountAuthController extends Controller {
-    /**
-     * Service for handling data fetching.
-     *
-     * @type {fetch}
-     */
     @service fetch;
-
-    /**
-     * Service for displaying notifications.
-     *
-     * @type {notifications}
-     */
     @service notifications;
-
-    /**
-     * Service for managing application routing.
-     *
-     * @type {router}
-     */
     @service router;
-
-    /**
-     * Service for managing modals.
-     *
-     * @type {router}
-     */
     @service modalsManager;
 
     /**
@@ -187,14 +164,12 @@ export default class ConsoleAccountAuthController extends Controller {
      * @param {Object} twoFaSettings - User-specific two-factor authentication settings.
      */
     @task *saveUserTwoFaSettings(twoFaSettings = {}) {
-        yield this.fetch
-            .post('users/two-fa', { twoFaSettings })
-            .then(() => {
-                this.notifications.success('2FA Settings saved successfully.');
-            })
-            .catch((error) => {
-                this.notifications.serverError(error);
-            });
+        try {
+            yield this.fetch.post('users/two-fa', { twoFaSettings });
+            this.notifications.success('2FA Settings saved successfully.');
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
     }
 
     /**
@@ -203,13 +178,17 @@ export default class ConsoleAccountAuthController extends Controller {
      * @method loadUserTwoFaSettings
      */
     @task *loadUserTwoFaSettings() {
-        const twoFaSettings = yield this.fetch.get('users/two-fa');
+        try {
+            const twoFaSettings = yield this.fetch.get('users/two-fa');
+            if (twoFaSettings) {
+                this.isUserTwoFaEnabled = twoFaSettings.enabled;
+                this.twoFaSettings = twoFaSettings;
+            }
 
-        if (twoFaSettings) {
-            this.isUserTwoFaEnabled = twoFaSettings.enabled;
-            this.twoFaSettings = twoFaSettings;
+            return twoFaSettings;
+        } catch (error) {
+            this.notifications.serverError(error);
         }
-        return twoFaSettings;
     }
 
     /**
@@ -218,12 +197,16 @@ export default class ConsoleAccountAuthController extends Controller {
      * @method loadSystemTwoFaConfig
      */
     @task *loadSystemTwoFaConfig() {
-        const twoFaConfig = yield this.fetch.get('two-fa/config');
+        try {
+            const twoFaConfig = yield this.fetch.get('two-fa/config');
+            if (twoFaConfig) {
+                this.isSystemTwoFaEnabled = twoFaConfig.enabled;
+                this.twoFaConfig = twoFaConfig;
+            }
 
-        if (twoFaConfig) {
-            this.isSystemTwoFaEnabled = twoFaConfig.enabled;
-            this.twoFaConfig = twoFaConfig;
+            return twoFaConfig;
+        } catch (error) {
+            this.notifications.serverError(error);
         }
-        return twoFaConfig;
     }
 }

console/app/controllers/console/account/organizations.js

@@ -0,0 +1,203 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { later } from '@ember/runloop';
+import { htmlSafe } from '@ember/template';
+
+export default class ConsoleAccountOrganizationsController extends Controller {
+    @service currentUser;
+    @service modalsManager;
+    @service crud;
+    @service notifications;
+    @service intl;
+    @service fetch;
+    @service router;
+
+    @action async leaveOrganization(organization) {
+        const isOwner = this.currentUser.id === organization.owner_uuid;
+        const hasOtherMembers = organization.users_count > 1;
+        const willBeDeleted = isOwner && organization.users_count === 1;
+
+        if (this.model.length === 1) {
+            return this.notifications.warning('Unable to leave your only organization.');
+        }
+
+        if (hasOtherMembers) {
+            organization.loadUsers({ exclude: [this.currentUser.id] });
+        }
+
+        this.modalsManager.show('modals/leave-organization', {
+            title: isOwner ? (willBeDeleted ? 'Delete Organization' : 'Transfer Ownership and Leave') : 'Leave Organization',
+            acceptButtonText: isOwner ? (willBeDeleted ? 'Delete Organization' : 'Transfer Ownership and Leave') : 'Leave Organization',
+            acceptButtonScheme: 'danger',
+            acceptButtonIcon: isOwner ? (willBeDeleted ? 'trash' : 'person-walking-arrow-right') : 'person-walking-arrow-right',
+            acceptButtonDisabled: isOwner && hasOtherMembers,
+            isOwner,
+            hasOtherMembers,
+            willBeDeleted,
+            organization,
+            newOwnerId: null,
+            selectNewOwner: (newOwnerId) => {
+                this.modalsManager.setOption('newOwnerId', newOwnerId);
+                this.modalsManager.setOption('acceptButtonDisabled', false);
+            },
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                if (isOwner) {
+                    if (hasOtherMembers) {
+                        const newOwnerId = this.modalsManager.getOption('newOwnerId');
+                        try {
+                            await organization.transferOwnership(newOwnerId, { leave: true });
+                        } catch (error) {
+                            this.notifications.serverError(error);
+                        }
+
+                        return this.router.refresh();
+                    }
+
+                    if (willBeDeleted) {
+                        try {
+                            await organization.destroyRecord();
+                        } catch (error) {
+                            this.notifications.serverError(error);
+                        }
+
+                        return this.router.refresh();
+                    }
+                }
+
+                try {
+                    await organization.leave();
+                } catch (error) {
+                    this.notifications.serverError(error);
+                }
+
+                return this.router.refresh();
+            },
+        });
+    }
+
+    @action switchOrganization(organization) {
+        this.modalsManager.confirm({
+            title: this.intl.t('console.switch-organization.modal-title', { organizationName: organization.name }),
+            body: this.intl.t('console.switch-organization.modal-body'),
+            acceptButtonText: this.intl.t('console.switch-organization.modal-accept-button-text'),
+            acceptButtonScheme: 'primary',
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await this.fetch.post('auth/switch-organization', { next: organization.uuid });
+                    this.fetch.flushRequestCache('auth/organizations');
+                    this.notifications.success(this.intl.t('console.switch-organization.success-notification'));
+                    return later(
+                        this,
+                        () => {
+                            window.location.reload();
+                        },
+                        900
+                    );
+                } catch (error) {
+                    modal.stopLoading();
+                    return this.notifications.serverError(error);
+                }
+            },
+        });
+    }
+
+    @action deleteOrganization(organization) {
+        const isOwner = this.currentUser.id === organization.owner_uuid;
+
+        if (this.model.length === 1) {
+            return this.notifications.warning('Unable to delete your only organization.');
+        }
+
+        if (!isOwner) {
+            return this.notifications.warning('You do not have rights to delete this organization.');
+        }
+
+        this.crud.delete(organization, {
+            title: `Are you sure you want to delete the organization ${organization.name}?`,
+            body: htmlSafe(
+                `This action will permanently remove all data, including orders, members, and settings associated with the organization. <br /><br /><strong>This action cannot be undone.</strong>`
+            ),
+            acceptButtonText: 'Delete Organization',
+            acceptButtonScheme: 'danger',
+            acceptButtonIcon: 'trash',
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await organization.destroyRecord();
+                    return this.router.refresh();
+                } catch (error) {
+                    this.notifications.serverError(error);
+                }
+            },
+        });
+    }
+
+    @action editOrganization(organization) {
+        this.modalsManager.show('modals/edit-organization', {
+            title: 'Edit Organization',
+            acceptButtonText: 'Save Changes',
+            acceptButtonIcon: 'save',
+            isOwner: this.currentUser.id === organization.owner_uuid,
+            organization,
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await organization.save();
+                    return this.router.refresh();
+                } catch (error) {
+                    this.notifications.serverError(error);
+                }
+            },
+        });
+    }
+
+    @action createOrganization() {
+        const currency = this.currentUser.currency;
+        const country = this.currentUser.country;
+
+        this.modalsManager.show('modals/edit-organization', {
+            title: 'Create Organization',
+            acceptButtonText: this.intl.t('common.confirm'),
+            acceptButtonIcon: 'check',
+            acceptButtonIconPrefix: 'fas',
+            organization: {
+                name: null,
+                decription: null,
+                phone: null,
+                currency,
+                country,
+                timezone: null,
+            },
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                const organization = modal.getOption('organization');
+                const { name, description, phone, currency, country, timezone } = organization;
+
+                try {
+                    await this.fetch.post('auth/create-organization', {
+                        name,
+                        description,
+                        phone,
+                        currency,
+                        country,
+                        timezone,
+                    });
+                    this.fetch.flushRequestCache('auth/organizations');
+                    this.notifications.success(this.intl.t('console.create-or-join-organization.create-success-notification'));
+                    return this.router.refresh();
+                } catch (error) {
+                    modal.stopLoading();
+                    return this.notifications.serverError(error);
+                }
+            },
+        });
+    }
+}

console/app/controllers/console/account/virtual.js

@@ -0,0 +1,7 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+
+export default class ConsoleAccountVirtualController extends Controller {
+    @tracked view;
+    queryParams = ['view'];
+}

console/app/controllers/console/admin/organizations/index.js

@@ -10,41 +10,10 @@ import { action } from '@ember/object';
  * @extends Controller
  */
 export default class ConsoleAdminOrganizationsController extends Controller {
-    /**
-     * The Ember Data service for interacting with the store.
-     *
-     * @property {Service} store
-     * @type {Object}
-     */
     @service store;
-
-    /**
-     * Inject the `intl` service
-     *
-     * @var {Service}
-     */
     @service intl;
-
-    /**
-     * The Ember Router service for handling transitions between routes.
-     *
-     * @property {Service} router
-     * @type {Object}
-     */
     @service router;
-
-    /**
-     * Inject the `filters` service
-     *
-     * @var {Service}
-     */
     @service filters;
-
-    /**
-     * Inject the `crud` service
-     *
-     * @var {Service}
-     */
     @service crud;
 
     /**

console/app/controllers/console/admin/organizations/index/users.js

@@ -2,28 +2,16 @@ import Controller from '@ember/controller';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { later } from '@ember/runloop';
 
 export default class ConsoleAdminOrganizationsIndexUsersController extends Controller {
-    /**
-     * Inject the `filters` service
-     *
-     * @var {Service}
-     */
     @service filters;
-
-    /**
-     * Inject the `intl` service
-     *
-     * @var {Service}
-     */
     @service intl;
-
-    /**
-     * Inject the `router` service
-     *
-     * @var {Service}
-     */
     @service router;
+    @service fetch;
+    @service notifications;
+    @service modalsManager;
+    @service session;
 
     /**
      * The current page of data being viewed
@@ -84,6 +72,10 @@ export default class ConsoleAdminOrganizationsIndexUsersController extends Contr
             label: this.intl.t('common.name'),
             valuePath: 'name',
         },
+        {
+            label: this.intl.t('common.role'),
+            valuePath: 'roleName',
+        },
         {
             label: this.intl.t('common.phone-number'),
             valuePath: 'phone',
@@ -97,8 +89,71 @@ export default class ConsoleAdminOrganizationsIndexUsersController extends Contr
             valuePath: 'status',
             cellComponent: 'table/cell/status',
         },
+        {
+            label: '',
+            cellComponent: 'table/cell/dropdown',
+            ddButtonText: false,
+            ddButtonIcon: 'ellipsis-h',
+            ddButtonIconPrefix: 'fas',
+            ddMenuLabel: 'User Actions',
+            cellClassNames: 'overflow-visible',
+            wrapperClass: 'flex items-center justify-end mx-2',
+            width: '9%',
+            actions: [
+                {
+                    label: 'Impersonate',
+                    icon: 'user-secret',
+                    fn: this.impersonateUser,
+                },
+                {
+                    label: 'Change Password',
+                    icon: 'lock-open',
+                    fn: this.changeUserPassword,
+                },
+            ],
+            sortable: false,
+            filterable: false,
+            resizable: false,
+            searchable: false,
+        },
     ];
 
+    /**
+     * Impersonate the selected user.
+     *
+     * @param {UserModel} user
+     * @memberof ConsoleAdminOrganizationsIndexUsersController
+     */
+    @action async impersonateUser(user) {
+        try {
+            const { token } = await this.fetch.post('auth/impersonate', { user: user.id });
+            await this.router.transitionTo('console');
+            this.session.manuallyAuthenticate(token);
+            this.notifications.info(`Now impersonating ${user.email}...`);
+            later(
+                this,
+                () => {
+                    window.location.reload();
+                },
+                600
+            );
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    /**
+     * Change password for a user
+     *
+     * @void
+     */
+    @action changeUserPassword(user) {
+        this.modalsManager.show('modals/change-user-password', {
+            keepOpen: true,
+            user,
+        });
+    }
+
     /**
      * Update search query param and reset page to 1
      *

console/app/controllers/console/admin/virtual.js

@@ -0,0 +1,7 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+
+export default class ConsoleAdminVirtualController extends Controller {
+    @tracked view;
+    queryParams = ['view'];
+}

console/app/controllers/console/home.js

@@ -1,3 +1,26 @@
 import Controller from '@ember/controller';
 
-export default class ConsoleHomeController extends Controller {}
+export default class ConsoleHomeController extends Controller {
+    rows = [
+        {
+            name: 'Jason',
+            age: 24,
+            vehicle: 'Honda',
+        },
+    ];
+
+    columns = [
+        {
+            label: 'Name',
+            valuePath: 'name',
+        },
+        {
+            label: 'Age',
+            valuePath: 'age',
+        },
+        {
+            label: 'Vehicle',
+            valuePath: 'vehicle',
+        },
+    ];
+}

console/app/controllers/console/settings/virtual.js

@@ -0,0 +1,7 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+
+export default class ConsoleSettingsVirtualController extends Controller {
+    @tracked view;
+    queryParams = ['view'];
+}

console/app/controllers/console/virtual.js

@@ -0,0 +1,7 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+
+export default class ConsoleVirtualController extends Controller {
+    @tracked view;
+    queryParams = ['view'];
+}

console/app/controllers/onboard/verify-email.js

@@ -1,39 +1,40 @@
 import AuthVerificationController from '../auth/verification';
+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';
+import { task } from 'ember-concurrency';
 
 export default class OnboardVerifyEmailController extends AuthVerificationController {
-    /**
-     * Submits to verify code.
-     *
-     * @return {Promise}
-     * @memberof OnboardVerifyEmailController
-     */
-    @action verifyCode() {
-        const { hello, code } = this;
+    @service fetch;
+    @service notifications;
+    @service session;
+    @service currentUser;
+    @service router;
 
-        this.isLoading = true;
+    /** props */
+    @tracked hello;
+    @tracked code;
+    @tracked queryParams = ['hello', 'code'];
 
-        return this.fetch
-            .post('onboard/verify-email', { session: hello, code })
-            .then(({ status, token }) => {
-                if (status === 'ok') {
-                    this.notifications.success('Email successfully verified!');
+    @task *verifyCode() {
+        try {
+            const { status, token } = yield this.fetch.post('onboard/verify-email', { session: this.hello, code: this.code });
+            if (status === 'ok') {
+                this.notifications.success('Email successfully verified!');
 
-                    if (token) {
-                        this.notifications.info('Welcome to Fleetbase!');
-                        this.session.manuallyAuthenticate(token);
+                if (token) {
+                    this.notifications.info('Welcome to Fleetbase!');
+                    this.session.manuallyAuthenticate(token);
 
-                        return this.router.transitionTo('console');
-                    }
-
-                    return this.router.transitionTo('auth.login');
+                    return this.router.transitionTo('console');
                 }
-            })
-            .catch((error) => {
-                this.notifications.serverError(error);
-            })
-            .finally(() => {
-                this.isLoading = false;
-            });
+
+                return this.router.transitionTo('auth.login');
+            }
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
     }
 }

console/app/helpers/spread-widget-options.js

@@ -1,7 +0,0 @@
-import { helper } from '@ember/component/helper';
-
-export default helper(function spreadWidgetOptions([params]) {
-    const { id, options } = params;
-    const gridOptions = { id, ...options };
-    return gridOptions;
-});

console/app/index.html

@@ -22,7 +22,12 @@
   </head>
   <body>
     {{content-for "body"}}
-
+    <div id="boot-loader" class="overloader">
+      <div class="loader-container">
+        <span class="fleetbase-loader" width="16" height="16"></span>
+        <div class="loading-message">Starting up...</div>
+      </div>
+    </div>
     <script src="{{rootURL}}assets/vendor.js"></script>
     <script src="{{rootURL}}assets/@fleetbase/console.js"></script>
 

console/app/instance-initializers/load-extensions.js

@@ -1,17 +1,9 @@
-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 function initialize(application) {
+    const universe = application.lookup('service:universe');
+    if (universe) {
+        universe.createRegistries(['@fleetbase/console', 'auth:login']);
+        universe.bootEngines(application);
+    }
 }
 
 export default {

console/app/instance-initializers/load-leaflet.js

@@ -0,0 +1,18 @@
+export function initialize(application) {
+    const leafletService = application.lookup('service:leaflet');
+    if (leafletService) {
+        leafletService.load({
+            onReady: function (L) {
+                // This will prevent the awkward scroll bug produced by Chrome browsers
+                // https://github.com/Leaflet/Leaflet/issues/4125#issuecomment-356289643
+                L.Control.include({
+                    _refocusOnMap: L.Util.falseFn,
+                });
+            },
+        });
+    }
+}
+
+export default {
+    initialize,
+};

console/app/instance-initializers/register-app-version.js

@@ -1,21 +0,0 @@
-import config from 'ember-get-config';
-
-export function initialize(owner) {
-    const universe = owner.lookup('service:universe');
-
-    if (universe) {
-        universe.registerOrganizationMenuItem(`v${config.version}`, {
-            index: 4,
-            route: null,
-            icon: 'code-branch',
-            iconSize: 'xs',
-            iconClass: 'mr-1.5',
-            wrapperClass: 'app-version-in-nav',
-            overwriteWrapperClass: true,
-        });
-    }
-}
-
-export default {
-    initialize,
-};

console/app/models/company.js

@@ -1,5 +1,6 @@
 import Model, { attr, belongsTo } from '@ember-data/model';
 import { computed } from '@ember/object';
+import { getOwner } from '@ember/application';
 import { format, formatDistanceToNow } from 'date-fns';
 import autoSerialize from '../utils/auto-serialize';
 
@@ -34,6 +35,7 @@ export default class Company extends Model {
     @attr('string') slug;
 
     /** @dates */
+    @attr('date') joined_at;
     @attr('date') deleted_at;
     @attr('date') created_at;
     @attr('date') updated_at;
@@ -71,4 +73,32 @@ export default class Company extends Model {
     toJSON() {
         return autoSerialize(this);
     }
+
+    async transferOwnership(newOwner, params = {}) {
+        const owner = getOwner(this);
+        const fetch = owner.lookup('service:fetch');
+
+        return fetch.post('companies/transfer-ownership', { company: this.id, newOwner, ...params });
+    }
+
+    async leave(user = null, params = {}) {
+        const owner = getOwner(this);
+        const fetch = owner.lookup('service:fetch');
+
+        return fetch.post('companies/leave', { company: this.id, user, ...params });
+    }
+
+    async loadUsers(params = {}) {
+        const owner = getOwner(this);
+        const fetch = owner.lookup('service:fetch');
+
+        try {
+            const users = await fetch.get(`companies/${this.id}/users`, { ...params }, { normalizeToEmberData: true, normalizeModelType: 'user' });
+            this.set('users', users);
+            return users;
+        } catch (error) {
+            this.set('users', []);
+            return [];
+        }
+    }
 }

console/app/models/dashboard.js

@@ -83,4 +83,14 @@ export default class DashboardModel extends Model {
             });
         }
     }
+
+    getRegistry() {
+        const owner = getOwner(this);
+        const universe = owner.lookup('service:universe');
+        if (universe) {
+            return universe.getDashboardRegistry(this.id);
+        }
+
+        return undefined;
+    }
 }

console/app/models/permission.js

@@ -1,5 +1,6 @@
 import Model, { attr } from '@ember-data/model';
 import { computed } from '@ember/object';
+import { capitalize } from '@ember/string';
 import { pluralize } from 'ember-inflector';
 import { format, formatDistanceToNow } from 'date-fns';
 import humanize from '@fleetbase/ember-core/utils/humanize';
@@ -26,14 +27,27 @@ 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 = '') {
+    if (typeof string !== 'string') {
+        return '';
+    }
+    return humanize(string)
+        .split(' ')
+        .map((w) => capitalize(w))
+        .join(' ');
 };
 
-const titleize = function (string) {
-    return lowercase(humanize(string));
+const smartTitleize = function (string = '') {
+    if (typeof string !== 'string') {
+        return '';
+    }
+
+    let titleized = titleize(string);
+    if (titleized === 'Iam') {
+        titleized = titleized.toUpperCase();
+    }
+
+    return titleized;
 };
 
 /**
@@ -49,6 +63,7 @@ export default class PermissionModel extends Model {
     /** @attributes */
     @attr('string') name;
     @attr('string') guard_name;
+    @attr('string') service;
 
     /** @dates */
     @attr('date') created_at;
@@ -59,6 +74,7 @@ export default class PermissionModel extends Model {
         return {
             name: this.name,
             guard_name: this.guard_name,
+            service: this.service,
             created_at: this.created_at,
             updated_at: this.updated_at,
         };
@@ -80,6 +96,10 @@ export default class PermissionModel extends Model {
             return 'do anything';
         }
 
+        if (action === 'see') {
+            return 'Visibly See';
+        }
+
         return titleize(action);
     }
 
@@ -90,9 +110,9 @@ export default class PermissionModel extends Model {
     @computed('actionName', 'name', 'resourceName', 'extensionName') get description() {
         let actionName = this.actionName;
         let actionPreposition = 'to';
-        let resourceName = pluralize(humanize(this.resourceName));
+        let resourceName = pluralize(smartTitleize(this.resourceName));
         let resourcePreposition = getPermissionAction(this.name) === '*' && resourceName ? 'with' : '';
-        let extensionName = humanize(this.extensionName);
+        let extensionName = smartTitleize(this.extensionName);
         let extensionPreposition = 'on';
         let descriptionParts = ['Permission', actionPreposition, actionName, resourcePreposition, resourceName, extensionPreposition, extensionName];
 

console/app/models/policy.js

@@ -12,6 +12,7 @@ export default class PolicyModel extends Model {
     /** @attributes */
     @attr('string') name;
     @attr('string') type;
+    @attr('string') service;
     @attr('string') guard_name;
     @attr('string') description;
     @attr('boolean') is_mutable;

console/app/models/role.js

@@ -14,6 +14,10 @@ export default class RoleModel extends Model {
     @attr('string') name;
     @attr('string') guard_name;
     @attr('string') description;
+    @attr('string') service;
+    @attr('string') type;
+    @attr('boolean') is_mutable;
+    @attr('boolean') is_deletable;
 
     /** @dates */
     @attr('date') created_at;

console/app/models/user.js

@@ -1,4 +1,5 @@
-import Model, { attr } from '@ember-data/model';
+import { set } from '@ember/object';
+import Model, { attr, belongsTo, hasMany } from '@ember-data/model';
 import { computed, get } from '@ember/object';
 import { not } from '@ember/object/computed';
 import { getOwner } from '@ember/application';
@@ -23,18 +24,28 @@ export default class UserModel extends Model {
     @attr('string') country;
     @attr('string') ip_address;
     @attr('string') slug;
+    @attr('string') role_name;
     @attr('string') type;
     @attr('string') session_status;
     @attr('string') status;
+    @attr('string') locale;
     @attr('boolean') is_online;
     @attr('boolean') is_admin;
-    @attr('raw') types;
+    @attr('boolean') is_subscribed;
+    @attr('boolean') is_trialing;
     @attr('raw') meta;
+    @attr('raw') subscription;
+
+    /** @relationships */
+    @belongsTo('role') role;
+    @hasMany('policy') policies;
+    @hasMany('permission') permissions;
 
     /** @dates */
     @attr('date') last_seen_at;
     @attr('date') phone_verified_at;
     @attr('date') email_verified_at;
+    @attr('date') trial_ends_at;
     @attr('date') last_login;
     @attr('date') deleted_at;
     @attr('date') created_at;
@@ -43,7 +54,7 @@ export default class UserModel extends Model {
     /** @methods */
     deactivate() {
         const owner = getOwner(this);
-        const fetch = owner.lookup(`service:fetch`);
+        const fetch = owner.lookup('service:fetch');
 
         return fetch.patch(`users/deactivate/${this.id}`).then((response) => {
             this.session_status = 'inactive';
@@ -54,7 +65,7 @@ export default class UserModel extends Model {
 
     activate() {
         const owner = getOwner(this);
-        const fetch = owner.lookup(`service:fetch`);
+        const fetch = owner.lookup('service:fetch');
 
         return fetch.patch(`users/activate/${this.id}`).then((response) => {
             this.session_status = 'active';
@@ -63,29 +74,85 @@ export default class UserModel extends Model {
         });
     }
 
+    verify() {
+        const owner = getOwner(this);
+        const fetch = owner.lookup('service:fetch');
+
+        return fetch.patch(`users/verify/${this.id}`).then((response) => {
+            set(this, 'email_verified_at', response.email_verified_at);
+
+            return response;
+        });
+    }
+
     removeFromCurrentCompany() {
         const owner = getOwner(this);
-        const fetch = owner.lookup(`service:fetch`);
+        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`);
+        const fetch = owner.lookup('service:fetch');
 
         return fetch.post(`users/resend-invite`, { user: this.id });
     }
 
+    getPermissions() {
+        const permissions = [];
+
+        // get direct applied permissions
+        if (this.get('permissions')) {
+            permissions.pushObjects(this.get('permissions').toArray());
+        }
+
+        // get role permissions and role policies permissions
+        if (this.get('role')) {
+            if (this.get('role.permissions')) {
+                permissions.pushObjects(this.get('role.permissions').toArray());
+            }
+
+            if (this.get('role.policies')) {
+                for (let i = 0; i < this.get('role.policies').length; i++) {
+                    const policy = this.get('role.policies').objectAt(i);
+                    if (policy.get('permissions')) {
+                        permissions.pushObjects(policy.get('permissions').toArray());
+                    }
+                }
+            }
+        }
+
+        // get direct applied policy permissions
+        if (this.get('policies')) {
+            for (let i = 0; i < this.get('policies').length; i++) {
+                const policy = this.get('policies').objectAt(i);
+                if (policy.get('permissions')) {
+                    permissions.pushObjects(policy.get('permissions').toArray());
+                }
+            }
+        }
+
+        return permissions;
+    }
+
     /** @computed */
     @not('isEmailVerified') emailIsNotVerified;
     @not('isPhoneVerified') phoneIsNotVerified;
 
     /** @computed */
+    get allPermissions() {
+        return this.getPermissions();
+    }
+
     @computed('meta.two_factor_enabled') get isTwoFactorEnabled() {
         return this.meta && this.meta.two_factor_enabled;
     }
 
+    @computed('is_admin') get isAdmin() {
+        return this.is_admin === true;
+    }
+
     @computed('types') get typesList() {
         const types = Array.from(this.types);
         return types.join(', ');

console/app/router.js

@@ -7,15 +7,18 @@ export default class Router extends EmberRouter {
 }
 
 Router.map(function () {
+    this.route('virtual', { path: '/:slug' });
+    this.route('install');
+    this.route('onboard', function () {
+        this.route('verify-email');
+    });
     this.route('auth', function () {
         this.route('login', { path: '/' });
         this.route('forgot-password');
         this.route('reset-password', { path: '/reset-password/:id' });
         this.route('two-fa');
         this.route('verification');
-    });
-    this.route('onboard', function () {
-        this.route('verify-email');
+        this.route('portal-login', { path: '/portal' });
     });
     this.route('invite', { path: 'join' }, function () {
         this.route('for-driver', { path: '/fleet/:public_id' });
@@ -23,24 +26,23 @@ Router.map(function () {
     });
     this.route('console', { path: '/' }, function () {
         this.route('home', { path: '/' });
-        this.route('extensions');
         this.route('notifications');
         this.route('account', function () {
-            this.route('virtual', { path: '/:slug/:view' });
+            this.route('virtual', { path: '/:slug' });
             this.route('auth');
         });
         this.route('settings', function () {
-            this.route('virtual', { path: '/:slug/:view' });
+            this.route('virtual', { path: '/:slug' });
             this.route('two-fa');
         });
-        this.route('virtual', { path: '/:slug/:view' });
+        this.route('virtual', { path: '/:slug' });
         this.route('admin', function () {
             this.route('config', function () {
                 this.route('database');
                 this.route('cache');
                 this.route('filesystem');
                 this.route('mail');
-                this.route('notification-channels');
+                this.route('notification-channels', { path: '/push-notifications' });
                 this.route('queue');
                 this.route('services');
                 this.route('socket');
@@ -48,12 +50,16 @@ Router.map(function () {
             this.route('branding');
             this.route('notifications');
             this.route('two-fa-settings');
-            this.route('virtual', { path: '/:slug/:view' });
+            this.route('virtual', { path: '/:slug' });
             this.route('organizations', function () {
-                this.route('index', { path: '/' });
-                this.route('users', { path: '/:company_id' });
+                this.route('index', { path: '/' }, function () {
+                    this.route('users', { path: '/:public_id/users' });
+                });
+            });
+            this.route('schedule-monitor', function () {
+                this.route('logs', { path: '/:id/logs' });
             });
         });
     });
-    this.route('install');
+    this.route('catch', { path: '/*' });
 });

console/app/routes/application.js

@@ -1,8 +1,10 @@
 import Route from '@ember/routing/route';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 import isElectron from '@fleetbase/ember-core/utils/is-electron';
 import pathToRoute from '@fleetbase/ember-core/utils/path-to-route';
+import removeBootLoader from '../utils/remove-boot-loader';
 
 export default class ApplicationRoute extends Route {
     @service session;
@@ -11,9 +13,41 @@ export default class ApplicationRoute extends Route {
     @service urlSearchParams;
     @service modalsManager;
     @service intl;
+    @service currentUser;
     @service router;
+    @service universe;
     @tracked defaultTheme;
 
+    /**
+     * Handle the transition into the application.
+     *
+     * @memberof ApplicationRoute
+     */
+    @action willTransition(transition) {
+        this.universe.callHooks('application:will-transition', this.session, this.router, transition);
+    }
+
+    /**
+     * On application route activation
+     *
+     * @memberof ApplicationRoute
+     * @void
+     */
+    @action activate() {
+        this.initializeTheme();
+        this.initializeLocale();
+    }
+
+    /**
+     * The application loading event.
+     * Here will just run extension hooks.
+     *
+     * @memberof ApplicationRoute
+     */
+    @action loading(transition) {
+        this.universe.callHooks('application:loading', this.session, this.router, transition);
+    }
+
     /**
      * Check the installation status of Fleetbase and transition user accordingly.
      *
@@ -43,24 +77,38 @@ export default class ApplicationRoute extends Route {
      * @return {Transition}
      * @memberof ApplicationRoute
      */
-    async beforeModel() {
+    async beforeModel(transition) {
         await this.session.setup();
+        await this.universe.booting();
+
+        this.universe.callHooks('application:before-model', this.session, this.router, transition);
 
-        const { isAuthenticated } = this.session;
         const shift = this.urlSearchParams.get('shift');
-
-        if (isAuthenticated && shift) {
+        if (this.session.isAuthenticated && shift) {
             return this.router.transitionTo(pathToRoute(shift));
         }
     }
 
     /**
-     * On application route activation
+     * Remove boot loader if not authenticated.
      *
      * @memberof ApplicationRoute
-     * @void
      */
-    activate() {
+    afterModel() {
+        if (!this.session.isAuthenticated) {
+            removeBootLoader();
+        }
+    }
+
+    /**
+     * Initializes the application's theme settings, applying necessary class names and default theme configurations.
+     *
+     * This method prepares the theme by setting up an array of class names that should be applied to the
+     * application's body element. If the application is running inside an Electron environment, it adds the
+     * `'is-electron'` class to the array. It then calls the `initialize` method of the `theme` service,
+     * passing in the `bodyClassNames` array and the `defaultTheme` configuration.
+     */
+    initializeTheme() {
         const bodyClassNames = [];
 
         if (isElectron()) {
@@ -68,7 +116,18 @@ export default class ApplicationRoute extends Route {
         }
 
         this.theme.initialize({ bodyClassNames, theme: this.defaultTheme });
-        this.intl.setLocale(['en-us']);
+    }
+
+    /**
+     * Initializes the application's locale settings based on the current user's preferences.
+     *
+     * This method retrieves the user's preferred locale using the `getOption` method from the `currentUser` service.
+     * If no locale is set by the user, it defaults to `'en-us'`. It then sets the application's locale by calling
+     * the `setLocale` method of the `intl` service with the retrieved locale.
+     */
+    initializeLocale() {
+        const locale = this.currentUser.getOption('locale', 'en-us');
+        this.intl.setLocale([locale]);
     }
 
     /**

console/app/routes/auth/forgot-password.js

@@ -1,10 +1,9 @@
 import Route from '@ember/routing/route';
-import { inject as service } from '@ember/service';
 
 export default class AuthForgotPasswordRoute extends Route {
-    @service store;
-
-    model() {
-        return this.store.findRecord('brand', 1);
-    }
+    queryParams = {
+        email: {
+            refreshModel: false,
+        },
+    };
 }

console/app/routes/auth/login.js

@@ -3,6 +3,7 @@ import { inject as service } from '@ember/service';
 
 export default class AuthLoginRoute extends Route {
     @service session;
+    @service universe;
 
     /**
      * If user is authentication redirect to console.
@@ -10,7 +11,8 @@ export default class AuthLoginRoute extends Route {
      * @memberof AuthLoginRoute
      * @void
      */
-    beforeModel() {
+    beforeModel(transition) {
         this.session.prohibitAuthentication('console');
+        return this.universe.virtualRouteRedirect(transition, 'auth:login', 'virtual', { restoreQueryParams: true });
     }
 }

console/app/routes/catch.js

@@ -0,0 +1,10 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class CatchRoute extends Route {
+    @service router;
+
+    beforeModel() {
+        return this.router.transitionTo('auth.login');
+    }
+}

console/app/routes/console.js

@@ -1,43 +1,16 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import removeBootLoader from '../utils/remove-boot-loader';
 import '@fleetbase/leaflet-routing-machine';
 
 export default class ConsoleRoute extends Route {
-    /**
-     * Inject the `store` service
-     *
-     * @var {Service}
-     */
     @service store;
-
-    /**
-     * Inject the `fetch` service
-     *
-     * @var {Service}
-     */
-    @service fetch;
-
-    /**
-     * Inject the `session` service
-     *
-     * @var {Service}
-     */
     @service session;
-
-    /**
-     * Inject the `intl` service
-     *
-     * @var {Service}
-     */
-    @service intl;
-
-    /**
-     * Inject the `currentUser` service
-     *
-     * @var {Service}
-     */
+    @service universe;
+    @service router;
     @service currentUser;
+    @service intl;
 
     /**
      * Require authentication to access all `console` routes.
@@ -46,10 +19,35 @@ export default class ConsoleRoute extends Route {
      * @return {Promise}
      * @memberof ConsoleRoute
      */
-    @action async beforeModel(transition) {
-        this.session.requireAuthentication(transition, 'auth.login');
+    async beforeModel(transition) {
+        await this.session.requireAuthentication(transition, 'auth.login');
 
-        return this.session.promiseCurrentUser(transition);
+        this.universe.callHooks('console:before-model', this.session, this.router, transition);
+
+        if (this.session.isAuthenticated) {
+            return this.session.promiseCurrentUser(transition);
+        }
+    }
+
+    /**
+     * Register after model hook.
+     *
+     * @param {DS.Model} model
+     * @param {Transition} transition
+     * @memberof ConsoleRoute
+     */
+    async afterModel(model, transition) {
+        this.universe.callHooks('console:after-model', this.session, this.router, model, transition);
+        removeBootLoader();
+    }
+
+    /**
+     * Route did complete transition.
+     *
+     * @memberof ConsoleRoute
+     */
+    @action didTransition() {
+        this.universe.callHooks('console:did-transition', this.session, this.router);
     }
 
     /**
@@ -61,54 +59,4 @@ export default class ConsoleRoute extends Route {
     model() {
         return this.store.findRecord('brand', 1);
     }
-
-    /**
-     * We will use this hook to preload engines
-     *
-     * @void
-     */
-    @action afterModel() {
-        this.fetchSessionInfo();
-    }
-
-    /**
-     * We will use this hook to setup controller and more
-     *
-     * @void
-     */
-    @action setupController(controller, model) {
-        super.setupController(controller, model);
-
-        // Get and set user locale
-        this.fetch.get('users/locale').then(({ locale }) => {
-            this.intl.setLocale(locale);
-        });
-
-        // Get user organizations
-        this.fetch.get('auth/organizations').then((organizations) => {
-            this.currentUser.setOption('organizations', organizations);
-            controller.organizations = organizations;
-        });
-    }
-
-    /**
-     * Use this hook to fetch user related queries
-     *
-     * @void
-     */
-    @action fetchSessionInfo() {
-        this.fetch.shouldResetCache();
-        this.fetch
-            .cachedGet(
-                'lookup/whois',
-                {},
-                {
-                    expirationInterval: 60,
-                    expirationIntervalUnit: 'minutes',
-                }
-            )
-            .then((whois) => {
-                this.currentUser.setOption('whois', whois);
-            });
-    }
 }

console/app/routes/console/account/organizations.js

@@ -0,0 +1,10 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class ConsoleAccountOrganizationsRoute extends Route {
+    @service currentUser;
+
+    model() {
+        return this.currentUser.loadOrganizations();
+    }
+}

console/app/routes/console/account/virtual.js

@@ -4,7 +4,14 @@ import { inject as service } from '@ember/service';
 export default class ConsoleAccountVirtualRoute extends Route {
     @service universe;
 
-    model({ slug, view }) {
-        return this.universe.lookupMenuItemFromRegistry('account', slug, view);
+    queryParams = {
+        view: {
+            refreshModel: true,
+        },
+    };
+
+    model({ slug }, transition) {
+        const view = this.universe.getViewFromTransition(transition);
+        return this.universe.lookupMenuItemFromRegistry('console:account', slug, view);
     }
 }

console/app/routes/console/admin.js

@@ -7,8 +7,7 @@ export default class ConsoleAdminRoute extends Route {
     @service router;
 
     beforeModel() {
-        // USER MUST BE ADMIN
-        if (!this.currentUser.user.is_admin) {
+        if (!this.currentUser.isAdmin) {
             return this.router.transitionTo('console').then(() => {
                 this.notifications.error('You do not have authorization to access admin!');
             });

console/app/routes/console/admin/virtual.js

@@ -4,7 +4,14 @@ import { inject as service } from '@ember/service';
 export default class ConsoleAdminVirtualRoute extends Route {
     @service universe;
 
-    model({ slug, view }) {
-        return this.universe.lookupMenuItemFromRegistry('admin', slug, view);
+    queryParams = {
+        view: {
+            refreshModel: true,
+        },
+    };
+
+    model({ slug }, transition) {
+        const view = this.universe.getViewFromTransition(transition);
+        return this.universe.lookupMenuItemFromRegistry('console:admin', slug, view);
     }
 }

console/app/routes/console/extensions.js

@@ -1,3 +0,0 @@
-import Route from '@ember/routing/route';
-
-export default class ConsoleExtensionsRoute extends Route {}

console/app/routes/console/settings/virtual.js

@@ -4,7 +4,14 @@ import { inject as service } from '@ember/service';
 export default class ConsoleSettingsVirtualRoute extends Route {
     @service universe;
 
-    model({ slug, view }) {
-        return this.universe.lookupMenuItemFromRegistry('settings', slug, view);
+    queryParams = {
+        view: {
+            refreshModel: true,
+        },
+    };
+
+    model({ slug }, transition) {
+        const view = this.universe.getViewFromTransition(transition);
+        return this.universe.lookupMenuItemFromRegistry('console:settings', slug, view);
     }
 }

console/app/routes/console/virtual.js

@@ -4,7 +4,14 @@ import { inject as service } from '@ember/service';
 export default class ConsoleVirtualRoute extends Route {
     @service universe;
 
-    model({ slug, view }) {
+    queryParams = {
+        view: {
+            refreshModel: true,
+        },
+    };
+
+    model({ slug }, transition) {
+        const view = this.universe.getViewFromTransition(transition);
         return this.universe.lookupMenuItemFromRegistry('console', slug, view);
     }
 }

console/app/routes/virtual.js

@@ -0,0 +1,17 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class VirtualRoute extends Route {
+    @service universe;
+
+    queryParams = {
+        view: {
+            refreshModel: true,
+        },
+    };
+
+    model({ slug }, transition) {
+        const view = this.universe.getViewFromTransition(transition);
+        return this.universe.lookupMenuItemFromRegistry('auth:login', slug, view);
+    }
+}

console/app/serializers/user.js

@@ -1,6 +1,20 @@
 import ApplicationSerializer from '@fleetbase/ember-core/serializers/application';
+import { EmbeddedRecordsMixin } from '@ember-data/serializer/rest';
+
+export default class UserSerializer extends ApplicationSerializer.extend(EmbeddedRecordsMixin) {
+    /**
+     * Embedded relationship attributes
+     *
+     * @var {Object}
+     */
+    get attrs() {
+        return {
+            role: { serialize: 'ids', deserialize: 'records' },
+            policies: { serialize: 'ids', deserialize: 'records' },
+            permissions: { serialize: 'ids', deserialize: 'records' },
+        };
+    }
 
-export default class UserSerializer extends ApplicationSerializer {
     /**
      * Customize serializer so that the password is never sent to the server via Ember Data
      *
@@ -13,6 +27,14 @@ export default class UserSerializer extends ApplicationSerializer {
 
         // delete the password always
         delete json.password;
+        // delete verification attributes
+        delete json.email_verified_at;
+        delete json.phone_verified_at;
+
+        // delete server managed dates
+        delete json.deleted_at;
+        delete json.created_at;
+        delete json.updated_at;
 
         return json;
     }

console/app/services/dashboard.js

@@ -1,255 +0,0 @@
-import Service from '@ember/service';
-import { inject as service } from '@ember/service';
-import { tracked } from '@glimmer/tracking';
-import { task } from 'ember-concurrency-decorators';
-import { action } from '@ember/object';
-import { isArray } from '@ember/array';
-
-/**
- * Service for managing dashboards, including loading, creating, and deleting dashboards, as well as managing the current dashboard and widget states.
- * Utilizes Ember services such as `store`, `fetch`, `notifications`, and `universe` for data management and user interaction.
- *
- * @extends Service
- */
-export default class DashboardService extends Service {
-    /**
-     * Ember Data store service for managing model data.
-     * @type {Service}
-     */
-    @service store;
-
-    /**
-     * Fetch service for making network requests.
-     * @type {Service}
-     */
-    @service fetch;
-
-    /**
-     * Notifications service for displaying user notifications.
-     * @type {Service}
-     */
-    @service notifications;
-
-    /**
-     * Universe service for accessing global application state or utility methods.
-     * @type {Service}
-     */
-    @service universe;
-
-    /**
-     * Internationalization service.
-     * @type {Service}
-     */
-    @service intl;
-
-    /**
-     * Tracked array of available dashboards.
-     * @type {Array}
-     */
-    @tracked dashboards = [];
-
-    /**
-     * Tracked property representing the currently selected dashboard.
-     * @type {Object}
-     */
-    @tracked currentDashboard;
-
-    /**
-     * Tracked boolean indicating if the dashboard is in editing mode.
-     * @type {boolean}
-     */
-    @tracked isEditingDashboard = false;
-
-    /**
-     * Tracked boolean indicating if a widget is being added.
-     * @type {boolean}
-     */
-    @tracked isAddingWidget = false;
-
-    /**
-     * Task for loading dashboards from the store. It sets the current dashboard and checks if adding widget is necessary.
-     */
-    @task *loadDashboards() {
-        const dashboards = yield this.store.findAll('dashboard');
-
-        if (isArray(dashboards)) {
-            this.dashboards = dashboards.toArray();
-
-            // insert default dashboard if it's not loaded
-            const defaultDashboard = this._createDefaultDashboard();
-            if (this._isDefaultDashboardNotLoaded()) {
-                this.dashboards.unshiftObject(defaultDashboard);
-            }
-
-            // Set the current dashboard
-            this.currentDashboard = this._getNextDashboard();
-            if (this.currentDashboard && this.currentDashboard.widgets.length === 0) {
-                this.onAddingWidget(true);
-            }
-        }
-    }
-
-    /**
-     * Task for selecting a dashboard. Handles dashboard switching and updates the current dashboard.
-     * @param {Object} dashboard - The dashboard object to select.
-     */
-    @task *selectDashboard(dashboard) {
-        if (dashboard.user_uuid === 'system') {
-            this.currentDashboard = dashboard;
-            yield this.fetch.post('dashboards/reset-default');
-            return;
-        }
-
-        const currentDashboard = yield this.fetch.post('dashboards/switch', { dashboard_uuid: dashboard.id }, { normalizeToEmberData: true }).catch((error) => {
-            this.notifications.serverError(error);
-        });
-
-        if (currentDashboard) {
-            this.currentDashboard = currentDashboard;
-        }
-    }
-
-    /**
-     * Task for creating a new dashboard. It handles dashboard creation, success notification, and dashboard selection.
-     * @param {string} name - Name of the new dashboard.
-     */
-    @task *createDashboard(name) {
-        const dashboardRecord = this.store.createRecord('dashboard', { name, is_default: true });
-        const dashboard = yield dashboardRecord.save().catch((error) => {
-            this.notifications.serverError(error);
-        });
-
-        if (dashboard) {
-            this.notifications.success(this.intl.t('services.dashboard-service.create-dashboard-success-notification', { dashboardName: dashboard.name }));
-            this.selectDashboard.perform(dashboard);
-            this.dashboards.pushObject(dashboard);
-        }
-    }
-
-    /**
-     * Task for deleting a dashboard. Handles dashboard deletion and success notification.
-     * @param {Object} dashboard - The dashboard object to delete.
-     * @param {Object} [options={}] - Optional configuration options.
-     */
-    @task *deleteDashboard(dashboard, options = {}) {
-        yield dashboard.destroyRecord().catch((error) => {
-            this.notification.serverError(error);
-
-            if (typeof options.onError === 'function') {
-                options.onError(error, dashboard);
-            }
-        });
-
-        this.notifications.success(this.intl.t('services.dashboard-service.delete-dashboard-success-notification', { dashboardName: dashboard.name }));
-        yield this.loadDashboards.perform();
-        yield this.selectDashboard.perform(this._getNextDashboard());
-
-        if (typeof options.callback === 'function') {
-            options.callback(this.currentDashboard);
-        }
-    }
-
-    /**
-     * Task for setting the current dashboard.
-     * @param {Object} dashboard - The dashboard object to set as current.
-     */
-    @task *setCurrentDashboard(dashboard) {
-        const currentDashboard = yield this.fetch.post('dashboards/switch', { dashboard_uuid: dashboard.id }, { normalizeToEmberData: true }).catch((error) => {
-            this.notifications.serverError(error);
-        });
-
-        if (currentDashboard) {
-            this.currentDashboard = currentDashboard;
-        }
-    }
-
-    /**
-     * Action to toggle dashboard editing state.
-     * @param {boolean} [state=true] - State to set for editing.
-     */
-    @action onChangeEdit(state = true) {
-        this.isEditingDashboard = state;
-    }
-
-    /**
-     * Action to toggle the state of adding a widget.
-     * @param {boolean} [state=true] - State to set for adding a widget.
-     */
-    @action onAddingWidget(state = true) {
-        this.isAddingWidget = state;
-    }
-
-    /**
-     * Creates a default dashboard with predefined widgets.
-     * @private
-     * @returns {Object} The default dashboard object.
-     */
-    _createDefaultDashboard() {
-        let defaultDashboard;
-
-        // check store for default dashboard
-        const loadedDashboars = this.store.peekAll('dashboard');
-
-        // check for default dashboard loaded in store
-        defaultDashboard = loadedDashboars.find((dashboard) => dashboard.id === 'system');
-        if (defaultDashboard) {
-            return defaultDashboard;
-        }
-
-        // create new default dashboard
-        defaultDashboard = this.store.createRecord('dashboard', {
-            id: 'system',
-            uuid: 'system',
-            name: 'Default Dashboard',
-            is_default: false,
-            user_uuid: 'system',
-            widgets: this._createDefaultDashboardWidgets(),
-        });
-
-        return defaultDashboard;
-    }
-
-    /**
-     * Creates default widgets for the default dashboard.
-     * @private
-     * @returns {Array} An array of default dashboard widgets.
-     */
-    _createDefaultDashboardWidgets() {
-        const widgets = this.universe.getDefaultDashboardWidgets().map((defaultWidget) => {
-            return this.store.createRecord('dashboard-widget', defaultWidget);
-        });
-
-        return widgets;
-    }
-
-    /**
-     * Checks if default dashboard is already loaded.
-     * @private
-     * @return {Boolean}
-     * @memberof DashboardService
-     */
-    _isDefaultDashboardLoaded() {
-        const defaultDashboard = this._createDefaultDashboard();
-        return this.dashboards.some((dashboard) => dashboard.id === defaultDashboard.id);
-    }
-
-    /**
-     * Checks if default dashboard is not already loaded.
-     * @private
-     * @return {Boolean}
-     * @memberof DashboardService
-     */
-    _isDefaultDashboardNotLoaded() {
-        return !this._isDefaultDashboardLoaded();
-    }
-
-    /**
-     * Gets the current dasbhoard or next available dashboard.
-     *
-     * @return {DashboardModel}
-     * @memberof DashboardService
-     */
-    _getNextDashboard() {
-        return this.dashboards.find((dashboard) => dashboard.is_default) || this.dashboards[0];
-    }
-}

console/app/styles/console.css

@@ -13,16 +13,6 @@ body[data-theme='dark'] .two-fa-enforcement-alert button#two-fa-setup-button.btn
     cursor: default;
 }
 
-.app-version-in-nav {
-    display: flex;
-    align-items: center;
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
-    font-size: 0.8rem;
-    line-height: 1rem;
-    padding-left: 1rem;
-    padding-top: 0.2rem;
-}
-
 .fleetbase-pagination-meta-info-wrapper.within-layout-section-header {
     display: flex;
     flex-direction: row;
@@ -48,3 +38,32 @@ body[data-theme='dark'] .two-fa-enforcement-alert button#two-fa-setup-button.btn
 body.console-admin-organizations-index-index .next-table-wrapper > table {
     table-layout: auto;
 }
+
+#boot-loader {
+    position: absolute;
+    z-index: 9999999999;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+#boot-loader > .loader-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+#boot-loader > .loader-container > .loading-message {
+    margin-left: 0.5rem;
+    font-weight: 600;
+    font-size: 0.875rem;
+}
+
+body[data-theme='dark'] #boot-loader > .loader-container > .loading-message {
+    color: #fff;
+}

console/app/templates/application.hbs

@@ -1,4 +1,5 @@
 {{page-title (t "app.name")}}
 <ModalsContainer />
 <NotificationContainer @position="top" @zindex="99999" />
+<div id="application-root-wormhole"></div>
 {{outlet}}

console/app/templates/auth/forgot-password.hbs

@@ -1,42 +1,56 @@
 <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow rounded-lg">
     <div class="mb-4">
-        <Image src={{@model.logo_url}} @fallbackSrc="/images/fleetbase-logo-svg.svg" alt={{t "app.name"}} width="160" height="56" class="w-40 h-14 mx-auto" />
+        <LinkTo @route="console" class="flex items-center justify-center">
+            <LogoIcon @size="12" class="rounded-md" />
+        </LinkTo>
         <h2 class="text-center text-lg font-extrabold text-gray-900 dark:text-white truncate">
             {{if this.isSent (t "auth.forgot-password.is-sent.title") (t "auth.forgot-password.not-sent.title")}}
         </h2>
     </div>
 
     {{#if this.isSent}}
-        <div class="flex px-3 py-2 mb-4 rounded-md shadow-sm bg-green-200">
-            <div>
-                <FaIcon @icon="check-circle" @size="lg" class="text-green-900 mr-4" />
-            </div>
-            <p class="flex-1 text-sm text-green-900 dark:text-green-900">
+        <InfoBlock @type="success" @icon="info-circle" @iconSize="lg" @iconClass="mt-1" class="my-6">
+            <p>
                 {{t "auth.forgot-password.is-sent.message" htmlSafe=true}}
             </p>
+        </InfoBlock>
+        <div class="flex flex-row">
+            <Button @icon="check" @type="primary" @text={{t "common.continue"}} @onClick={{transition-to "auth.login"}} />
         </div>
     {{else}}
-        <div class="flex px-3 py-2 mb-6 rounded-md shadow-sm bg-blue-200">
-            <div>
-                <FaIcon @icon="info-circle" @size="lg" class="text-blue-900 mr-4" />
-            </div>
-            <p class="flex-1 text-sm text-blue-900 dark:text-blue-900">
+        <InfoBlock @icon="info-circle" @iconSize="lg" @iconClass="mt-1" class="my-6">
+            <p>
                 {{t "auth.forgot-password.not-sent.message" htmlSafe=true appName=(t "app.name")}}
             </p>
-        </div>
+        </InfoBlock>
 
-        <form class="space-y-6" {{on "submit" this.sendSecureLink}}>
+        <form class="space-y-6" {{on "submit" (perform this.sendSecureLink)}}>
             <div>
                 <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-50">
                     {{t "auth.forgot-password.form.email-label"}}
                 </label>
                 <div class="mt-2">
-                    <Input @value={{this.email}} @type="email" id="email" name="email" required class="form-input form-input-lg w-full" placeholder={{t "auth.forgot-password.form.email-label"}} />
+                    <Input
+                        @value={{this.email}}
+                        @type="email"
+                        id="email"
+                        name="email"
+                        required
+                        class="form-input form-input-lg w-full"
+                        placeholder={{t "auth.forgot-password.form.email-label"}}
+                    />
                 </div>
             </div>
 
             <div class="flex flex-row space-x-2">
-                <Button @icon="magic" @type="primary" @buttonType="submit" @text={{t "auth.forgot-password.form.submit-button"}} @onClick={{this.sendSecureLink}} @isLoading={{this.isLoading}} />
+                <Button
+                    @icon="magic"
+                    @type="primary"
+                    @buttonType="submit"
+                    @text={{t "auth.forgot-password.form.submit-button"}}
+                    @onClick={{perform this.sendSecureLink}}
+                    @isLoading={{this.sendSecureLink.isRunning}}
+                />
                 <Button @buttonType="button" @text={{t "auth.forgot-password.form.nevermind-button"}} @onClick={{fn (transition-to "auth.login")}} @disabled={{this.isLoading}} />
             </div>
         </form>

console/app/templates/auth/login.hbs

@@ -1,23 +1,31 @@
 <div>
-    <div class="mx-auto w-12 h-12">
-        <LogoIcon @url={{@brand.icon_url}} @size="12" class="mx-auto" />
-    </div>
+    <LinkTo @route="console" class="flex items-center justify-center">
+        <LogoIcon @brand={{@brand}} @size="12" class="rounded-md" />
+    </LinkTo>
     <h2 class="mt-6 mb-3 text-3xl font-extrabold leading-9 text-center text-gray-900 dark:text-gray-100">
         {{t "auth.login.title"}}
     </h2>
 </div>
 
 {{#if (gte this.failedAttempts 3)}}
-    <div class="px-3 py-2 my-6 rounded-md shadow-sm bg-yellow-200">
-        <div class="flex mb-5">
-            <div>
-                <FaIcon @icon="exclamation-triangle" @size="lg" class="text-yellow-900 mr-4" />
+    <div class="flex flex-col flex-grow-0 flex-shrink-0 text-sm bg-yellow-800 border border-yellow-600 px-2 py-2 rounded-md text-yellow-100 my-4 transition-all">
+        <div class="flex flex-row items-start mb-2">
+            <div class="w-8 flex-grow-0 flex-shrink-0">
+                <FaIcon @icon="triangle-exclamation" @size="xl" class="pt-1" />
+            </div>
+            <div class="flex-1">
+                <p class="flex-1 text-sm text-yellow-100">
+                    {{t "auth.login.failed-attempt.message" htmlSafe=true}}
+                </p>
             </div>
-            <p class="flex-1 text-sm text-yellow-900 dark:yellow-red-900">
-                {{t "auth.login.failed-attempt.message" htmlSafe=true}}
-            </p>
         </div>
-        <Button @text={{t "auth.login.failed-attempt.button-text"}} @type="warning" @onClick={{this.forgotPassword}} />
+        <Button
+            @text={{t "auth.login.failed-attempt.button-text"}}
+            @type="link"
+            class="text-yellow-100"
+            @wrapperClass="px-4 py-2 bg-gray-900 bg-opacity-25 hover:opacity-50"
+            @onClick={{this.forgotPassword}}
+        />
     </div>
 {{/if}}
 
@@ -65,18 +73,34 @@
                 href="javascript:;"
                 {{on "click" this.forgotPassword}}
                 disabled={{this.isLoading}}
-                class="font-medium transition duration-150 ease-in-out text-sky-600 hover:text-sky-500 focus:outline-none focus:underline"
+                class="font-medium transition duration-150 ease-in-out text-sky-500 hover:text-sky-400 focus:outline-none focus:underline"
             >
                 {{t "auth.login.form.forgot-password-label"}}
             </a>
         </div>
     </div>
 
-    <div class="mt-6">
-        <Button @buttonType="submit" @type="primary" @text={{t "auth.login.form.sign-in-button"}} @icon="lock" @wrapperClass="btn-block" @isLoading={{this.isLoading}} @onClick={{this.login}} />
-    </div>
-
-    <div class="mt-3">
-        <Button @text={{t "auth.login.form.create-account-button"}} @wrapperClass="btn-block" @disabled={{this.isLoading}} @onClick={{fn (transition-to "onboard")}} />
+    <div class="mt-6 space-y-4">
+        <Button
+            @buttonType="submit"
+            @type="primary"
+            @text={{t "auth.login.form.sign-in-button"}}
+            @icon="lock"
+            @wrapperClass="btn-block"
+            @isLoading={{this.isLoading}}
+            @onClick={{this.login}}
+        />
+        <Button @text={{t "auth.login.form.create-account-button"}} @icon="briefcase" @wrapperClass="btn-block" @disabled={{this.isLoading}} @onClick={{fn (transition-to "onboard")}} />
+        <RegistryYield @type="menu" @registry="auth:login" as |menuItem|>
+            <Button
+                @text={{menuItem.title}}
+                @icon={{menuItem.icon}}
+                @type={{menuItem.type}}
+                @wrapperClass={{menuItem.wrapperClass}}
+                @disabled={{this.isLoading}}
+                @onClick={{menuItem.onClick}}
+                @permission={{menuItem.permission}}
+            />
+        </RegistryYield>
     </div>
 </form>

console/app/templates/auth/reset-password.hbs

@@ -1,6 +1,8 @@
 <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow rounded-lg">
     <div class="mb-4">
-        <Image src={{this.brand.logo_url}} @fallbackSrc="/images/fleetbase-logo-svg.svg" alt={{t "app.name"}} width="160" height="56" class="w-40 h-14 mx-auto" />
+        <LinkTo @route="console" class="flex items-center justify-center">
+            <LogoIcon @brand={{@brand}} @size="12" class="rounded-md" />
+        </LinkTo>
         <h2 class="text-center text-lg font-extrabold text-gray-900 dark:text-white truncate">
             {{t "auth.reset-password.title"}}
         </h2>

console/app/templates/auth/two-fa.hbs

@@ -1,5 +1,7 @@
 <div class="mb-8 text-center">
-    <Image src={{@model.logo_url}} @fallbackSrc="/images/fleetbase-logo-svg.svg" alt={{t "app.name"}} width="160" height="56" class="w-40 h-14 mx-auto" />
+    <LinkTo @route="console" class="flex items-center justify-center">
+        <LogoIcon @brand={{@brand}} @size="12" class="rounded-md" />
+    </LinkTo>
     <h2 class="text-lg font-extrabold text-gray-900 dark:text-white truncate">
         {{if this.isSent "Verification Code"}}
     </h2>
@@ -20,7 +22,7 @@
         <OtpInput @onInputCompleted={{this.handleOtpInput}} @size={{6}} class="w-full" />
     </div>
 
-    <div id="otp-countdown-container" class="otp-countdown-container flex {{if this.isCodeExpired "flex-col" "flex-row"}} items-center justify-center min-h-12">
+    <div id="otp-countdown-container" class="otp-countdown-container flex {{if this.isCodeExpired 'flex-col' 'flex-row'}} items-center justify-center min-h-12">
         {{#if this.countdownReady}}
             <Countdown @expiry={{this.twoFactorSessionExpiresAfter}} @countdownClass="text-lg" @onCountdownEnd={{this.handleCodeExpired}} />
         {{/if}}

console/app/templates/auth/verification.hbs

@@ -1,46 +1,75 @@
 {{page-title (t "auth.verification.header-title")}}
 
 <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow rounded-lg w-full">
-    <div class="mb-8">
-        <img class="mx-auto h-12 w-auto " src="/images/fleetbase-logo-svg.svg" alt={{t "app.name"}}>
+    <div class="mb-6">
+        <LinkTo @route="console" class="flex items-center justify-center">
+            <LogoIcon @brand={{@brand}} @size="12" class="rounded-md" />
+        </LinkTo>
         <h2 class="mt-6 text-center text-lg font-extrabold text-gray-900 dark:text-white truncate">
             {{t "auth.verification.title"}}
         </h2>
     </div>
 
-    <div class="flex px-3 py-2 mb-6 rounded-md shadow-sm bg-blue-200">
-        <div>
-            <FaIcon @icon="shield-check" @size="lg" class="text-blue-900 mr-4" />
-        </div>
-        <p class="flex-1 text-sm text-blue-900 dark:text-blue-900">
-             {{t "auth.verification.message-text" htmlSafe=true}}
-        </p>
-    </div>
+    <InfoBlock @type="info" @icon="shield-halved" @iconSize="lg">
+        {{t "auth.verification.message-text" htmlSafe=true}}
+    </InfoBlock>
 
-    <form class="mt-8 space-y-6" {{on "submit" this.verifyCode}}>
-        <InputGroup @type="tel" @name={{t "auth.verification.verification-input-label"}} @value={{this.code}} @helpText={{t "auth.verification.verification-code-text"}} @inputClass="input-lg" {{on "input" this.validateInput}} {{did-insert this.validateInitInput}} />
+    <form class="mt-8 space-y-6" {{on "submit" (perform this.verifyCode)}}>
+        <InputGroup
+            @type="tel"
+            @name={{t "auth.verification.verification-input-label"}}
+            @value={{this.code}}
+            @helpText={{t "auth.verification.verification-code-text"}}
+            @inputClass="input-lg"
+            {{on "input" this.validateInput}}
+            {{did-insert this.validateInitInput}}
+        />
 
         <div class="flex flex-row items-center space-x-4">
-            <Button @icon="check" @iconPrefix="fas" @buttonType="submit" @type="primary" @size="lg" @text="Verify & Continue" @isLoading={{this.isLoading}} @disabled={{this.isNotReadyToSubmit}} @onClick={{this.verifyCode}} />
-            <a href="#" {{on "click" this.onDidntReceiveCode}} class="text-sm text-blue-400 hover:text-blue-300">{{t "auth.verification.didnt-receive-a-code"}}</a>
+            <Button
+                @icon="check"
+                @iconPrefix="fas"
+                @buttonType="submit"
+                @type="primary"
+                @size="lg"
+                @text="Verify & Continue"
+                @isLoading={{this.verifyCode.isRunning}}
+                @disabled={{not this.isReadyToSubmit}}
+                @onClick={{perform this.verifyCode}}
+            />
+            <a href="javascript:;" {{on "click" this.onDidntReceiveCode}} class="text-sm text-blue-400 hover:text-blue-300">{{t "auth.verification.didnt-receive-a-code"}}</a>
         </div>
 
         {{#if this.stillWaiting}}
-            <div class="bg-yellow-50 rounded shadow-sm border-l-4 border-yellow-400 px-4 py-2">
-                <div class="flex">
-                    <div class="flex-shrink-0">
-                        <FaIcon @icon="exclamation-triangle" @size="lg" class="text-yellow-400" />
+            <div class="flex flex-col flex-grow-0 flex-shrink-0 text-sm bg-yellow-800 border border-yellow-600 px-2 py-2 rounded-md text-yellow-100 my-4 transition-all">
+                <div class="flex flex-row items-start mb-2">
+                    <div class="w-8 flex-grow-0 flex-shrink-0">
+                        <FaIcon @icon="triangle-exclamation" @size="xl" class="pt-1" />
                     </div>
-                    <div class="ml-3 flex items-center">
-                        <span class="text-lg font-extrabold text-yellow-800">{{t "auth.verification.didnt-receive-a-code"}}</span>
+                    <div class="flex-1">
+                        <div class="flex-1 text-sm text-yellow-100">
+                            <div>{{t "auth.verification.didnt-receive-a-code" htmlSafe=true}}</div>
+                            <div>{{t "auth.verification.not-sent.alternative-choice" htmlSafe=true}}</div>
+                        </div>
                     </div>
                 </div>
-                <div class="py-1">
-                    <p class="text-yellow-700 text-sm">{{t "auth.verification.not-sent.alternative-choice"}}</p>
-                    <div class="flex items-center mt-3">
-                        <Button @buttonType="button" @type="warning" @wrapperClass="mr-2" @onClick={{this.resendEmail}} class="btn-warning-alert">{{t "auth.verification.not-sent.resend-email"}}</Button>
-                        <Button @buttonType="button" @type="warning" @onClick={{this.resendBySms}} class="btn-warning-alert">{{t "auth.verification.not-sent.send-by-sms"}}</Button>
-                    </div>
+                <div class="flex items-center space-x-2">
+                    <Button
+                        @text={{t "auth.verification.not-sent.resend-email"}}
+                        @buttonType="button"
+                        @type="link"
+                        class="text-yellow-100"
+                        @wrapperClass="px-4 py-2 bg-gray-900 bg-opacity-25 hover:opacity-50"
+                        @onClick={{this.resendEmail}}
+                    />
+                    <Button
+                        @text={{t "auth.verification.not-sent.send-by-sms"}}
+                        @buttonType="button"
+                        @type="link"
+                        class="text-yellow-100"
+                        @wrapperClass="px-4 py-2 bg-gray-900 bg-opacity-25 hover:opacity-50"
+                        @onClick={{this.resendBySms}}
+                    />
                 </div>
             </div>
         {{/if}}

console/app/templates/catch.hbs

@@ -0,0 +1,2 @@
+{{page-title "Catch"}}
+{{outlet}}

console/app/templates/console.hbs

@@ -1,6 +1,6 @@
 {{page-title (t "app.name")}}
 <Layout::Container>
-    <Layout::Header @brand={{@model}} @user={{this.user}} @organizations={{this.organizations}} @menuItems={{this.universe.headerMenuItems}} @extensions={{this.extensions}} @onAction={{this.onAction}} @showSidebarToggle={{true}} @sidebarToggleEnabled={{this.sidebarToggleEnabled}} @onSidebarToggle={{this.onSidebarToggle}} />
+    <Layout::Header @brand={{@model}} @menuItems={{this.menuItems}} @organizationMenuItems={{this.organizationMenuItems}} @userMenuItems={{this.userMenuItems}} @onAction={{this.onAction}} @showSidebarToggle={{true}} @sidebarToggleEnabled={{this.sidebarToggleEnabled}} @onSidebarToggle={{this.onSidebarToggle}} />
     <Layout::Main>
         <Layout::Sidebar @onSetup={{this.setSidebarContext}}>
             <div class="next-sidebar-content-inner">
@@ -12,7 +12,12 @@
             {{outlet}}
         </Layout::Section>
     </Layout::Main>
-    <Layout::MobileNavbar @brand={{@model}} @user={{this.user}} @organizations={{this.organizations}} @menuItems={{this.universe.headerMenuItems}} @extensions={{this.extensions}} @onAction={{this.onAction}} />
+    <Layout::MobileNavbar @brand={{@model}} @user={{this.user}} @organizations={{this.organizations}} @menuItems={{this.menuItems}} @extensions={{this.extensions}} @onAction={{this.onAction}} />
 </Layout::Container>
 <ChatContainer />
 <ConsoleWormhole />
+<ImpersonatorTray />
+{{!-- template-lint-disable no-potential-path-strings --}}
+<RegistryYield @registry="@fleetbase/console" as |RegistryComponent|>
+    <RegistryComponent @controller={{this}} />
+</RegistryYield>

console/app/templates/console/account.hbs

@@ -3,6 +3,7 @@
     <Layout::Sidebar::Panel @open={{true}} @title={{t "common.account"}}>
         <Layout::Sidebar::Item @route="console.account.index" @icon="user">Profile</Layout::Sidebar::Item>
         <Layout::Sidebar::Item @route="console.account.auth" @icon="key">Auth</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.account.organizations" @icon="building">Organizations</Layout::Sidebar::Item>
         {{#each this.universe.accountMenuItems as |menuItem|}}
             <Layout::Sidebar::Item @onClick={{fn this.universe.transitionMenuItem "console.account.virtual" menuItem}} @item={{menuItem}} @icon={{menuItem.icon}}>{{menuItem.title}}</Layout::Sidebar::Item>
         {{/each}}

console/app/templates/console/account/auth.hbs

@@ -2,7 +2,7 @@
 <Layout::Section::Header @title="Account Auth" />
 
 <Layout::Section::Body class="overflow-y-scroll h-full">
-    <div class="container mx-auto h-screen" {{increase-height-by 500}}>
+    <div class="container mx-auto h-screen">
         <div class="max-w-3xl my-10 mx-auto space-y-6">
             <ContentPanel @title="Change Password" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                 <form id="change-password-form" aria-label="change-password" {{on "submit" (perform this.changePassword)}}>
@@ -31,4 +31,5 @@
             {{/if}}
         </div>
     </div>
+    <Spacer @height="500px" />
 </Layout::Section::Body>

console/app/templates/console/account/organizations.hbs

@@ -0,0 +1,37 @@
+{{page-title "Organizations"}}
+<Layout::Section::Header @title="Organizations" />
+
+<Layout::Section::Body class="overflow-y-scroll h-full">
+    <div class="container mx-auto h-screen">
+        <div class="max-w-3xl my-10 mx-auto space-y-4">
+            <div class="flex flex-row justify-end">
+                <Button @type="primary" @icon="plus" @text="Create Organization" @onClick={{this.createOrganization}} />
+            </div>
+            <ContentPanel @title="Your Organizations" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <div class="space-y-2">
+                    {{#each @model as |organization|}}
+                        <div class="grid grid-cols-3 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 rounded-lg px-3 py-2 items-center">
+                            <div>
+                                <div class="font-semibold">{{organization.name}}</div>
+                                <div>Member Since: {{format-date organization.joined_at}}</div>
+                            </div>
+                            <div class="col-span-2 flex flex-row items-center justify-end space-x-2">
+                                {{#let (eq organization.owner_uuid this.currentUser.id) as |isOwner|}}
+                                    <Button @type="danger" @size="xs" @icon="person-walking-arrow-right" @text="Leave" @onClick={{fn this.leaveOrganization organization}} />
+                                    {{#unless (eq this.currentUser.companyId organization.id)}}
+                                        <Button @size="xs" @icon="shuffle" @text="Switch" @onClick={{fn this.switchOrganization organization}} />
+                                    {{/unless}}
+                                    {{#if isOwner}}
+                                        <Button @size="xs" @icon="pencil" @text="Edit" @onClick={{fn this.editOrganization organization}} />
+                                        <Button @type="danger" @size="xs" @icon="trash" @text="Delete" @onClick={{fn this.deleteOrganization organization}} />
+                                    {{/if}}
+                                {{/let}}
+                            </div>
+                        </div>
+                    {{/each}}
+                </div>
+            </ContentPanel>
+        </div>
+    </div>
+    <Spacer @height="300px" />
+</Layout::Section::Body>

console/app/templates/console/account/virtual.hbs

@@ -2,9 +2,10 @@
 <Layout::Section::Header @title={{@model.title}} />
 
 <Layout::Section::Body class="overflow-y-scroll h-full">
-    <div class="container mx-auto h-screen" {{increase-height-by 300}}>
+    <div class="container mx-auto h-screen">
         <div class="max-w-3xl my-10 mx-auto space-y-">
             {{component @model.component params=@model.componentParams}}
         </div>
     </div>
+    <Spacer @height="300px" />
 </Layout::Section::Body>

console/app/templates/console/admin.hbs

@@ -31,8 +31,10 @@
         <Layout::Sidebar::Item @route="console.admin.config.filesystem" @icon="hard-drive">{{t "common.filesystem"}}</Layout::Sidebar::Item>
         <Layout::Sidebar::Item @route="console.admin.config.queue" @icon="layer-group">{{t "common.queue"}}</Layout::Sidebar::Item>
         <Layout::Sidebar::Item @route="console.admin.config.socket" @icon="plug">{{t "common.socket"}}</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.admin.config.notification-channels" @icon="tower-broadcast">{{t "common.notification-channels"}}</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.admin.config.notification-channels" @icon="tower-broadcast">{{t "common.push-notifications"}}</Layout::Sidebar::Item>
     </Layout::Sidebar::Panel>
 </EmberWormhole>
 
-{{outlet}}
+<Layout::Section::Container>
+    {{outlet}}
+</Layout::Section::Container>

console/app/templates/console/admin/config/database.hbs

@@ -2,9 +2,10 @@
 <Layout::Section::Header @title={{t "console.admin.config.database.title"}} />
 
 <Layout::Section::Body class="overflow-y-scroll h-full">
-    <div class="container mx-auto h-screen" {{increase-height-by 800}}>
+    <div class="container mx-auto h-screen">
         <div class="max-w-3xl my-10 mx-auto space-y-6">
             <Configure::Database />
         </div>
     </div>
+    <Spacer @height="300px" />
 </Layout::Section::Body>

console/app/templates/console/admin/config/filesystem.hbs

@@ -2,9 +2,10 @@
 <Layout::Section::Header @title={{t "console.admin.config.filesystem.title"}} />
 
 <Layout::Section::Body class="overflow-y-scroll h-full">
-    <div class="container mx-auto h-screen" {{increase-height-by 800}}>
+    <div class="container mx-auto h-screen">
         <div class="max-w-3xl my-10 mx-auto space-y-6">
             <Configure::Filesystem />
         </div>
     </div>
+    <Spacer @height="300px" />
 </Layout::Section::Body>

console/app/templates/console/admin/config/mail.hbs

@@ -2,9 +2,10 @@
 <Layout::Section::Header @title={{t "console.admin.config.mail.title"}} />
 
 <Layout::Section::Body class="overflow-y-scroll h-full">
-    <div class="container mx-auto h-screen" {{increase-height-by 800}}>
+    <div class="container mx-auto h-screen">
         <div class="max-w-3xl my-10 mx-auto space-y-6">
             <Configure::Mail />
         </div>
     </div>
+    <Spacer @height="300px" />
 </Layout::Section::Body>

console/app/templates/console/admin/config/notification-channels.hbs

@@ -2,9 +2,10 @@
 <Layout::Section::Header @title={{t "console.admin.config.notification-channels.title"}} />
 
 <Layout::Section::Body class="overflow-y-scroll h-full">
-    <div class="container mx-auto h-screen" {{increase-height-by 800}}>
+    <div class="container mx-auto h-screen">
         <div class="max-w-3xl my-10 mx-auto space-y-6">
             <Configure::NotificationChannels />
         </div>
     </div>
+    <Spacer @height="300px" />
 </Layout::Section::Body>

console/app/templates/console/admin/config/queue.hbs

@@ -2,9 +2,10 @@
 <Layout::Section::Header @title={{t "console.admin.config.queue.title"}} />
 
 <Layout::Section::Body class="overflow-y-scroll h-full">
-    <div class="container mx-auto h-screen" {{increase-height-by 800}}>
+    <div class="container mx-auto h-screen">
         <div class="max-w-3xl my-10 mx-auto space-y-6">
             <Configure::Queue />
         </div>
     </div>
+    <Spacer @height="300px" />
 </Layout::Section::Body>

console/app/templates/console/admin/config/services.hbs

@@ -2,9 +2,10 @@
 <Layout::Section::Header @title={{t "console.admin.config.services.title"}} />
 
 <Layout::Section::Body class="overflow-y-scroll h-full">
-    <div class="container mx-auto h-screen" {{increase-height-by 900}}>
+    <div class="container mx-auto h-screen">
         <div class="max-w-3xl my-10 mx-auto space-y-6">
             <Configure::Services />
         </div>
     </div>
+    <Spacer @height="300px" />
 </Layout::Section::Body>