Merge pull request #380 from fleetbase/dev-v0.6.9

Enhancements and bug fixes for order workflow, labels, notifications,…

.github/workflows/cd.yml

@@ -147,6 +147,7 @@ jobs:
         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
 
@@ -154,6 +155,7 @@ jobs:
         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
 

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>

api/composer.json

@@ -9,10 +9,11 @@
     "license": "AGPL-3.0-or-later",
     "require": {
         "php": "^8.0",
-        "fleetbase/core-api": "^1.5.13",
-        "fleetbase/fleetops-api": "^0.5.10",
-        "fleetbase/registry-bridge": "^0.0.17",
-        "fleetbase/storefront-api": "^0.3.16",
+        "appstract/laravel-opcache": "^4.0",
+        "fleetbase/core-api": "^1.6.3",
+        "fleetbase/fleetops-api": "^0.6.6",
+        "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",
@@ -22,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,10 +38,6 @@
         "phpunit/phpunit": "^10.0"
     },
     "repositories": [
-        {
-            "type": "vcs",
-            "url": "https://github.com/fleetbase/laravel-model-caching"
-        },
         {
             "type": "composer",
             "url": "https://registry.fleetbase.io"

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,6 +34,10 @@ 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')),

api/deploy.sh

@@ -26,6 +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,54 +1,54 @@
 # ---- 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 /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
-    
-    # ---- 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 4200
-    
-    # Use custom nginx.conf
-    COPY console/nginx.conf /etc/nginx/conf.d/default.conf
-    
-    # Start Nginx server
-    CMD ["nginx", "-g", "daemon off;"]
+# 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
+
+# ---- 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 4200
+
+# 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/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,7 +14,7 @@
     <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>
@@ -28,7 +28,7 @@
 <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>

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/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/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;
 
     /**

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

@@ -50,7 +50,7 @@ export default class ConsoleController extends Controller {
      *
      * @var {Array}
      */
-    @tracked hiddenSidebarRoutes = ['console.home', 'console.notifications'];
+    @tracked hiddenSidebarRoutes = ['console.home', 'console.notifications', 'console.virtual'];
 
     /**
      * Menu items to be added to the main header navigation bar.

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

@@ -13,7 +13,7 @@ export default class ConsoleAccountOrganizationsController extends Controller {
     @service fetch;
     @service router;
 
-    @action async leaveOrganization (organization) {
+    @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;
@@ -37,11 +37,11 @@ export default class ConsoleAccountOrganizationsController extends Controller {
             willBeDeleted,
             organization,
             newOwnerId: null,
-            selectNewOwner: newOwnerId => {
+            selectNewOwner: (newOwnerId) => {
                 this.modalsManager.setOption('newOwnerId', newOwnerId);
                 this.modalsManager.setOption('acceptButtonDisabled', false);
             },
-            confirm: async modal => {
+            confirm: async (modal) => {
                 modal.startLoading();
 
                 if (isOwner) {
@@ -78,13 +78,13 @@ export default class ConsoleAccountOrganizationsController extends Controller {
         });
     }
 
-    @action switchOrganization (organization) {
+    @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 => {
+            confirm: async (modal) => {
                 modal.startLoading();
 
                 try {
@@ -106,7 +106,7 @@ export default class ConsoleAccountOrganizationsController extends Controller {
         });
     }
 
-    @action deleteOrganization (organization) {
+    @action deleteOrganization(organization) {
         const isOwner = this.currentUser.id === organization.owner_uuid;
 
         if (this.model.length === 1) {
@@ -125,7 +125,7 @@ export default class ConsoleAccountOrganizationsController extends Controller {
             acceptButtonText: 'Delete Organization',
             acceptButtonScheme: 'danger',
             acceptButtonIcon: 'trash',
-            confirm: async modal => {
+            confirm: async (modal) => {
                 modal.startLoading();
 
                 try {
@@ -138,14 +138,14 @@ export default class ConsoleAccountOrganizationsController extends Controller {
         });
     }
 
-    @action editOrganization (organization) {
+    @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 => {
+            confirm: async (modal) => {
                 modal.startLoading();
 
                 try {
@@ -158,7 +158,7 @@ export default class ConsoleAccountOrganizationsController extends Controller {
         });
     }
 
-    @action createOrganization () {
+    @action createOrganization() {
         const currency = this.currentUser.currency;
         const country = this.currentUser.country;
 
@@ -175,7 +175,7 @@ export default class ConsoleAccountOrganizationsController extends Controller {
                 country,
                 timezone: null,
             },
-            confirm: async modal => {
+            confirm: async (modal) => {
                 modal.startLoading();
 
                 const organization = modal.getOption('organization');

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/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/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/models/company.js

@@ -41,54 +41,54 @@ export default class Company extends Model {
     @attr('date') updated_at;
 
     /** @computed */
-    @computed('phone_country_code', 'country') get phoneCountryCode () {
+    @computed('phone_country_code', 'country') get phoneCountryCode() {
         return this.phone_country_code || this.country;
     }
 
-    @computed('updated_at') get updatedAgo () {
+    @computed('updated_at') get updatedAgo() {
         return formatDistanceToNow(this.updated_at);
     }
 
-    @computed('updated_at') get updatedAt () {
+    @computed('updated_at') get updatedAt() {
         return format(this.updated_at, 'PPP p');
     }
 
-    @computed('updated_at') get updatedAtShort () {
+    @computed('updated_at') get updatedAtShort() {
         return format(this.updated_at, 'PP');
     }
 
-    @computed('created_at') get createdAgo () {
+    @computed('created_at') get createdAgo() {
         return formatDistanceToNow(this.created_at);
     }
 
-    @computed('created_at') get createdAt () {
+    @computed('created_at') get createdAt() {
         return format(this.created_at, 'PPP p');
     }
 
-    @computed('created_at') get createdAtShort () {
+    @computed('created_at') get createdAtShort() {
         return format(this.created_at, 'PP');
     }
 
     /** @methods */
-    toJSON () {
+    toJSON() {
         return autoSerialize(this);
     }
 
-    async transferOwnership (newOwner, params = {}) {
+    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 = {}) {
+    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 = {}) {
+    async loadUsers(params = {}) {
         const owner = getOwner(this);
         const fetch = owner.lookup('service:fetch');
 

console/app/models/user.js

@@ -1,3 +1,4 @@
+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';
@@ -30,7 +31,10 @@ export default class UserModel extends Model {
     @attr('string') locale;
     @attr('boolean') is_online;
     @attr('boolean') is_admin;
+    @attr('boolean') is_subscribed;
+    @attr('boolean') is_trialing;
     @attr('raw') meta;
+    @attr('raw') subscription;
 
     /** @relationships */
     @belongsTo('role') role;
@@ -41,6 +45,7 @@ export default class UserModel extends Model {
     @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;
@@ -74,7 +79,7 @@ export default class UserModel extends Model {
         const fetch = owner.lookup('service:fetch');
 
         return fetch.patch(`users/verify/${this.id}`).then((response) => {
-            this.email_verified_at = response.email_verified_at;
+            set(this, 'email_verified_at', response.email_verified_at);
 
             return response;
         });

console/app/routes/application.js

@@ -4,6 +4,7 @@ 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;
@@ -88,6 +89,17 @@ export default class ApplicationRoute extends Route {
         }
     }
 
+    /**
+     * Remove boot loader if not authenticated.
+     *
+     * @memberof ApplicationRoute
+     */
+    afterModel() {
+        if (!this.session.isAuthenticated) {
+            removeBootLoader();
+        }
+    }
+
     /**
      * Initializes the application's theme settings, applying necessary class names and default theme configurations.
      *

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

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

console/app/routes/console.js

@@ -1,5 +1,7 @@
 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 {
@@ -27,6 +29,27 @@ export default class ConsoleRoute extends Route {
         }
     }
 
+    /**
+     * 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);
+    }
+
     /**
      * Get the branding settings.
      *

console/app/styles/console.css

@@ -38,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/auth/forgot-password.hbs

@@ -1,32 +1,28 @@
 <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>
-        </div>
-        <div class="flex flex-row mt-4">
+        </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" (perform this.sendSecureLink)}}>
             <div>

console/app/templates/auth/login.hbs

@@ -1,7 +1,7 @@
 <div>
-    <div class="mx-auto w-12 h-12">
-        <LogoIcon @size="12" class="mx-auto rounded-sm" />
-    </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>

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,23 +1,20 @@
 {{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}}>
+    <form class="mt-8 space-y-6" {{on "submit" (perform this.verifyCode)}}>
         <InputGroup
             @type="tel"
             @name={{t "auth.verification.verification-input-label"}}
@@ -36,9 +33,9 @@
                 @type="primary"
                 @size="lg"
                 @text="Verify & Continue"
-                @isLoading={{this.isLoading}}
-                @disabled={{this.isNotReadyToSubmit}}
-                @onClick={{this.verifyCode}}
+                @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>

console/app/templates/console.hbs

@@ -16,6 +16,7 @@
 </Layout::Container>
 <ChatContainer />
 <ConsoleWormhole />
+<ImpersonatorTray />
 {{!-- template-lint-disable no-potential-path-strings --}}
 <RegistryYield @registry="@fleetbase/console" as |RegistryComponent|>
     <RegistryComponent @controller={{this}} />

console/app/templates/console/settings/index.hbs

@@ -11,7 +11,7 @@
                         <PhoneInput @value={{@model.phone}} @onInput={{fn (mut @model.phone)}} class="form-input w-full" />
                     </InputGroup>
                     <InputGroup @name={{t "console.settings.index.organization-currency"}}>
-                        <CurrencySelect @value={{@model.currency}} @onSelect={{fn (mut @model.currency)}} @triggerClass="w-full form-select" />
+                        <CurrencySelect @currency={{@model.currency}} @onCurrencyChange={{fn (mut @model.currency)}} @triggerClass="w-full form-select" />
                     </InputGroup>
                     <InputGroup @name={{t "console.settings.index.organization-id"}} @value={{@model.public_id}} @disabled={{true}} />
                     <div class="mt-3 flex items-center justify-end">

console/app/templates/console/virtual.hbs

@@ -1,11 +1,6 @@
 {{page-title @model.title}}
-<Layout::Section::Header @title={{@model.title}} />
 
 <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-">
-            {{component @model.component params=@model.componentParams}}
-        </div>
-    </div>
+    {{component @model.component params=@model.componentParams}}
     <Spacer @height="300px" />
 </Layout::Section::Body>

console/app/templates/onboard/verify-email.hbs

@@ -1,27 +1,42 @@
 {{page-title (t "onboard.verify-email.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 @size="12" class="rounded-md" />
+        </LinkTo>
         <h2 class="mt-6 text-center text-lg font-extrabold text-gray-900 dark:text-white truncate">
             {{t "onboard.verify-email.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 "onboard.verify-email.message-text" htmlSafe=true}}
-        </p>
-    </div>
+    <InfoBlock @type="info" @icon="shield-halved" @iconSize="lg">
+        {{t "onboard.verify-email.message-text" htmlSafe=true}}
+    </InfoBlock>
 
-    <form class="mt-8 space-y-6" {{on "submit" this.verifyCode}}>
-        <InputGroup @type="tel" @name={{t "onboard.verify-email.verification-input-label"}} @value={{this.code}} @helpText={{t "onboard.verify-email.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 "onboard.verify-email.verification-input-label"}}
+            @value={{this.code}}
+            @helpText={{t "onboard.verify-email.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}} />
+            <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="#" {{on "click" this.onDidntReceiveCode}} class="text-sm text-blue-400 hover:text-blue-300">{{t "onboard.verify-email.didnt-receive-a-code"}}</a>
         </div>
 
@@ -33,14 +48,14 @@
                     </div>
                     <div class="flex-1">
                         <div class="flex-1 text-sm text-yellow-100">
-                            <div>{{t "onboard.verify-email.didnt-receive-a-code" htmlSafe=true}}</div>
-                            <div>{{t "onboard.verify-email.not-sent.alternative-choice" htmlSafe=true}}</div>
+                            <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="flex items-center space-x-2">
                     <Button
-                        @text={{t "onboard.verify-email.not-sent.resend-email"}}
+                        @text={{t "auth.verification.not-sent.resend-email"}}
                         @buttonType="button"
                         @type="link"
                         class="text-yellow-100"
@@ -48,7 +63,7 @@
                         @onClick={{this.resendEmail}}
                     />
                     <Button
-                        @text={{t "onboard.verify-email.not-sent.send-by-sms"}}
+                        @text={{t "auth.verification.not-sent.send-by-sms"}}
                         @buttonType="button"
                         @type="link"
                         class="text-yellow-100"

console/app/utils/remove-boot-loader.js

@@ -0,0 +1,6 @@
+export default function removeBootLoader() {
+    const bootLoaderElement = document.getElementById('boot-loader');
+    if (bootLoaderElement && typeof bootLoaderElement.remove === 'function') {
+        bootLoaderElement.remove();
+    }
+}

console/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/console",
-    "version": "0.5.13",
+    "version": "0.6.9",
     "private": true,
     "description": "Modular logistics and supply chain operating system (LSOS)",
     "repository": "https://github.com/fleetbase/fleetbase",
@@ -29,18 +29,18 @@
     },
     "dependencies": {
         "@ember/legacy-built-in-components": "^0.4.2",
-        "@fleetbase/dev-engine": "^0.2.7",
-        "@fleetbase/ember-core": "^0.2.21",
-        "@fleetbase/ember-ui": "^0.2.34",
-        "@fleetbase/fleetops-data": "^0.1.18",
-        "@fleetbase/fleetops-engine": "^0.5.10",
-        "@fleetbase/iam-engine": "^0.1.2",
+        "@fleetbase/dev-engine": "^0.2.9",
+        "@fleetbase/ember-core": "latest",
+        "@fleetbase/ember-ui": "latest",
+        "@fleetbase/fleetops-data": "latest",
+        "@fleetbase/fleetops-engine": "^0.6.6",
+        "@fleetbase/iam-engine": "^0.1.3",
         "@fleetbase/leaflet-routing-machine": "^3.2.16",
-        "@fleetbase/registry-bridge-engine": "^0.0.17",
-        "@fleetbase/storefront-engine": "^0.3.16",
+        "@fleetbase/registry-bridge-engine": "^0.0.18",
+        "@fleetbase/storefront-engine": "^0.3.30",
         "@fortawesome/ember-fontawesome": "^2.0.0",
-        "ember-changeset": "^4.1.2",
-        "ember-changeset-validations": "^4.1.1",
+        "ember-changeset": "4.1.2",
+        "ember-changeset-validations": "4.1.2",
         "ember-composable-helpers": "^5.0.0",
         "ember-concurrency": "^3.1.1",
         "ember-concurrency-decorators": "^2.0.3",
@@ -56,6 +56,7 @@
         "postcss-nth-list": "^1.0.2"
     },
     "devDependencies": {
+        "@embroider/macros": "1.16.12",
         "@babel/core": "^7.25.2",
         "@babel/eslint-parser": "^7.25.1",
         "@babel/plugin-proposal-decorators": "^7.24.7",
@@ -127,7 +128,7 @@
         "stylelint-prettier": "^4.1.0",
         "tailwindcss": "^3.4.10",
         "tracked-built-ins": "^3.3.0",
-        "webpack": "^5.94.0"
+        "webpack": "^5.98.0"
     },
     "engines": {
         "node": ">= 18"
@@ -137,9 +138,9 @@
     },
     "pnpm": {
         "overrides": {
-            "@fleetbase/ember-core": "^0.2.21",
-            "@fleetbase/ember-ui": "^0.2.34",
-            "@fleetbase/fleetops-data": "^0.1.18"
+            "@fleetbase/ember-core": "latest",
+            "@fleetbase/ember-ui": "latest",
+            "@fleetbase/fleetops-data": "latest"
         }
     },
     "prettier": {

console/tests/integration/components/impersonator-tray-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from '@fleetbase/console/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | impersonator-tray', function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('it renders', async function (assert) {
+        // Set any properties with this.set('myProperty', 'value');
+        // Handle any actions with this.set('myAction', function(val) { ... });
+
+        await render(hbs`<ImpersonatorTray />`);
+
+        assert.dom().hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <ImpersonatorTray>
+        template block text
+      </ImpersonatorTray>
+    `);
+
+        assert.dom().hasText('template block text');
+    });
+});

console/tests/unit/utils/remove-boot-loader-test.js

@@ -0,0 +1,10 @@
+import removeBootLoader from '@fleetbase/console/utils/remove-boot-loader';
+import { module, test } from 'qunit';
+
+module('Unit | Utility | remove-boot-loader', function () {
+    // TODO: Replace this with your real tests.
+    test('it works', function (assert) {
+        let result = removeBootLoader();
+        assert.ok(result);
+    });
+});

console/translations/en-us.yaml

@@ -74,6 +74,7 @@ common:
   unauthorized-access-message: Unauthorized Access, you must request permissions to access.
   permissions-required-for-changes: You do not have the required permissions to make changes.
   push-notifications: Push Notifications
+  role: Role
 component:
   file:
     dropdown-label: File actions

docker-compose.yml

@@ -1,6 +1,11 @@
 services:
   cache:
     image: redis:4-alpine
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
 
   database:
     image: mysql:8.0-oracle
@@ -12,6 +17,11 @@ services:
     environment:
       MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
       MYSQL_DATABASE: "fleetbase"
+    healthcheck:
+      test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
 
   socket:
     image: socketcluster/socketcluster:v17.4.0
@@ -28,6 +38,11 @@ services:
       target: events-dev
       args:
         ENVIRONMENT: development
+    healthcheck:
+      test: ["CMD", "php", "artisan", "queue:status"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
     environment:
       DATABASE_URL: "mysql://root@database/fleetbase"
       QUEUE_CONNECTION: redis
@@ -70,9 +85,6 @@ services:
       MAIL_FROM_NAME: Fleetbase
       APP_NAME: Fleetbase
       LOG_CHANNEL: daily
-      MODEL_CACHE_ENABLED: 'true'
-      RESPONSE_CACHE_ENABLED: 'true'
-      RESPONSE_CACHE_DRIVER: redis
       REGISTRY_HOST: https://registry.fleetbase.io
       REGISTRY_PREINSTALLED_EXTENSIONS: 'true'
       OSRM_HOST: https://router.project-osrm.org

docker/Dockerfile

@@ -1,6 +1,6 @@
 # syntax = docker/dockerfile:1.2
 # Base stage
-FROM dunglas/frankenphp:1.2.3-php8.2-bookworm as base
+FROM dunglas/frankenphp:1.5.0-php8.2-bookworm AS base
 
 # Install packages
 RUN apt-get update && apt-get install -y git bind9-utils mycli nodejs npm nano \
@@ -20,11 +20,35 @@ RUN install-php-extensions \
   opcache \
   memcached \
   imagick \
-  geos \
+  # geos \
   sockets \
   pcntl \
   @composer
 
+# Install build dependencies for GEOS
+RUN apt-get update \
+    && apt-get install -y --no-install-recommends \
+       pkg-config \
+       libgeos-dev \
+       libgeos++-dev \
+       autoconf \
+       build-essential \
+       unzip \
+    && rm -rf /var/lib/apt/lists/*
+
+# Download, extract, compile, and enable the php-geos extension
+RUN curl -fsSL -o php-geos.zip \
+      https://github.com/libgeos/php-geos/archive/dfe1ab17b0f155cc315bc13c75689371676e02e1.zip \
+    && unzip php-geos.zip \
+    && rm php-geos.zip \
+    && cd php-geos-* \
+    && ./autogen.sh \
+    && ./configure \
+    && make -j"$(nproc)" install \
+    && docker-php-ext-enable geos \
+    && cd .. \
+    && rm -rf php-geos-*
+
 # Update PHP configurations
 RUN sed -e 's/^expose_php.*/expose_php = Off/' "$PHP_INI_DIR/php.ini-production" > "$PHP_INI_DIR/php.ini" \
   && sed -i -e 's/^upload_max_filesize.*/upload_max_filesize = 600M/' -e 's/^post_max_size.*/post_max_size = 0/' \
@@ -38,10 +62,10 @@ COPY --from=ghcr.io/springload/ssm-parent:1.8 /usr/bin/ssm-parent /sbin/ssm-pare
 
 # Create the pnpm directory and set the PNPM_HOME environment variable
 RUN mkdir -p ~/.pnpm
-ENV PNPM_HOME /root/.pnpm
+ENV PNPM_HOME=/root/.pnpm
 
 # Add the pnpm global bin to the PATH
-ENV PATH /root/.pnpm/bin:$PATH
+ENV PATH=/root/.pnpm/bin:$PATH
 
 # Set some build ENV variables
 ENV LOG_CHANNEL=stdout
@@ -99,7 +123,7 @@ RUN chmod -R 755 /fleetbase/api/storage
 RUN chmod +x /fleetbase/api/deploy.sh
 
 # Scheduler base stage
-FROM base as scheduler-base
+FROM base AS scheduler-base
 
 # Install go-crond
 RUN curl -L https://github.com/webdevops/go-crond/releases/download/23.12.0/go-crond.linux.amd64 > /usr/local/bin/go-crond && chmod +x /usr/local/bin/go-crond
@@ -107,32 +131,31 @@ COPY docker/crontab ./crontab
 RUN chmod 0600 ./crontab
 
 # Scheduler dev stage
-FROM scheduler-base as scheduler-dev
+FROM scheduler-base AS scheduler-dev
 ENTRYPOINT []
 CMD ["go-crond", "--verbose", "root:./crontab"]
 
 # Scheduler stage
-FROM scheduler-base as scheduler
+FROM scheduler-base AS scheduler
 ENTRYPOINT ["/sbin/ssm-parent", "-c", ".ssm-parent.yaml", "run", "--"]
 CMD ["go-crond", "--verbose", "root:./crontab"]
 
 # Events stage
-FROM base as events
+FROM base AS events
 ENTRYPOINT ["/sbin/ssm-parent", "-c", ".ssm-parent.yaml", "run", "--", "docker-php-entrypoint"]
 CMD ["php", "artisan", "queue:work"]
 
 # Events stage
-FROM base as events-dev
+FROM base AS events-dev
 ENTRYPOINT []
 CMD ["php", "artisan", "queue:work"]
 
 # Application dev stage
-FROM base as app-dev
+FROM base AS app-dev
 ENTRYPOINT ["docker-php-entrypoint"]
-# Add --watch flag later
-CMD ["sh", "-c", "php artisan octane:frankenphp --workers=6 --max-requests=250 --port=8000 --host=0.0.0.0 --caddyfile $CADDYFILE_PATH"] 
+CMD ["sh", "-c", "php artisan octane:frankenphp --max-requests=250 --port=8000 --host=0.0.0.0 --watch"] 
 
 # Application stage
-FROM base as app
+FROM base AS app
 ENTRYPOINT ["/sbin/ssm-parent", "-c", ".ssm-parent.yaml", "run", "--", "docker-php-entrypoint"]
-CMD ["sh", "-c", "php artisan octane:frankenphp --workers=6 --max-requests=250 --port=8000 --host=0.0.0.0 --https --http-redirect --caddyfile $CADDYFILE_PATH"]
+CMD ["sh", "-c", "php artisan octane:frankenphp --max-requests=250 --port=8000 --host=0.0.0.0"]