@fleetbase/fleetops-engine 0.6.50 → 0.6.52

package/README.md

@@ -1,122 +1,238 @@
 <p align="center">
-    <img src="https://flb-assets.s3.ap-southeast-1.amazonaws.com/static/fleetbase-logo-svg.svg" width="380" height="100" />
+    <img src="https://flb-assets.s3.ap-southeast-1.amazonaws.com/static/fleetbase-logo-svg.svg" alt="Fleetbase" width="380" height="100">
 </p>
+
+<p align="center">
+    Open-source fleet, dispatch, transport management, and real-time logistics operations for Fleetbase.
+</p>
+
 <p align="center">
-    Open-source Fleet & Transport Management Extension for Fleetbase
+    <a href="https://github.com/fleetbase/fleetops">
+        <img src="https://img.shields.io/badge/repo-fleetbase%2Ffleetops-111827?style=flat-square" alt="Repository">
+    </a>
+    <a href="https://github.com/fleetbase/fleetops/blob/master/LICENSE.md">
+        <img src="https://img.shields.io/badge/license-AGPL--3.0--or--later-blue?style=flat-square" alt="License: AGPL-3.0-or-later">
+    </a>
+    <a href="https://www.npmjs.com/package/@fleetbase/fleetops-engine">
+        <img src="https://img.shields.io/badge/npm-%40fleetbase%2Ffleetops--engine-CB3837?style=flat-square" alt="NPM package">
+    </a>
+    <a href="https://packagist.org/packages/fleetbase/fleetops-api">
+        <img src="https://img.shields.io/badge/packagist-fleetbase%2Ffleetops--api-F28D1A?style=flat-square" alt="Packagist package">
+    </a>
+    <a href="https://www.fleetbase.io/docs/fleet-ops">
+        <img src="https://img.shields.io/badge/docs-fleet--ops-0EA5E9?style=flat-square" alt="Fleet-Ops documentation">
+    </a>
+    <img src="https://img.shields.io/badge/node-%3E%3D18-339933?style=flat-square" alt="Node >= 18">
+    <img src="https://img.shields.io/badge/php-%5E8.0-777BB4?style=flat-square" alt="PHP ^8.0">
 </p>
 
----
+<p align="center">
+    <img src="https://www.fleetbase.io/images/screenshots/fleet-ops/fleet-ops-multi-waypoint-order.webp" alt="Fleet-Ops multi-waypoint order with live map, route, driver assignment, and order details" width="900">
+</p>
 
-## Overview
+## What is Fleet-Ops?
 
-This monorepo contains both the frontend and backend components of the FleetOps extension for Fleetbase. The frontend is built using Ember.js and the backend is implemented in PHP.
+Fleet-Ops is the core logistics and fleet management extension for the [Fleetbase](https://www.fleetbase.io) platform. It gives operations teams a dispatch console for managing orders, drivers, vehicles, fleets, service areas, live maps, route execution, analytics, maintenance, and connected telematics.
 
-### Requirements
+Fleet-Ops ships as two packages:
 
-* PHP 8.0 or above
-* Ember.js v4.8 or above
-* Ember CLI v4.8 or above
-* Node.js v18 or above
+| Package | Purpose |
+| --- | --- |
+| `@fleetbase/fleetops-engine` | Ember Engine/Add-on that powers the Fleet-Ops console UI. |
+| `fleetbase/fleetops-api` | Laravel/PHP package that provides the Fleet-Ops API, models, jobs, events, and integrations. |
 
-## Structure
+Fleet-Ops is included with Fleetbase Cloud and self-hosted Fleetbase installations. For product concepts, workflows, and setup guides, start with the [Fleet-Ops documentation](https://www.fleetbase.io/docs/fleet-ops).
 
-```
-├── addon
-├── app
-├── assets
-├── translations
-├── config
-├── node_modules
-├── server
-│ ├── config
-│ ├── data
-│ ├── migrations
-│ ├── resources
-│ ├── src
-│ ├── tests
-│ └── vendor
-├── tests
-├── testem.js
-├── index.js
-├── package.json
-├── phpstan.neon.dist
-├── phpunit.xml.dist
-├── pnpm-lock.yaml
-├── ember-cli-build.js
-├── composer.json
-├── CONTRIBUTING.md
-├── LICENSE.md
-├── README.md
+## Features
+
+### Operations
+
+- Create, import, schedule, dispatch, start, cancel, and complete delivery orders.
+- Manage multi-waypoint routes, payloads, entities, labels, order metadata, notes, comments, files, and proofs.
+- Track live order progress with ETAs, route overlays, driver pings, activity timelines, and configurable status flows.
+- Configure custom order types, activity flows, entity fields, proof requirements, and service-rate rules.
+- Run orchestration workflows for order allocation, driver assignment, vehicle capacity, and route sequencing.
+- Plan work with the scheduler, fleet schedule, service quotes, routes, manifests, and manifest stops.
+
+### Live Map
+
+- View live drivers, vehicles, active orders, routes, places, service areas, zones, and geofences.
+- Filter and inspect operational layers with Fleet-Ops map controls and drawer panels.
+- Support Leaflet-based and Google-based map experiences through Fleetbase map settings.
+- Capture positions, replay movement, track vehicles and drivers, and surface geofence events.
+
+### Fleet Management
+
+- Manage drivers, vehicles, fleets, places, contacts, customers, vendors, and integrated vendors.
+- Assign drivers and vehicles to fleets, vendors, and orders.
+- Track driver schedules, availability, positions, active shifts, and hours-of-service status.
+- Track vehicle status, devices, positions, equipment, schedules, work orders, and maintenance history.
+- Manage issues, fuel reports, imports, exports, bulk actions, and custom resource fields.
+
+### Maintenance
+
+- Define preventive maintenance schedules and calendar feeds.
+- Manage work orders, maintenance records, line items, equipment, parts, and warranties.
+- Send work orders, trigger schedule runs, pause and resume schedules, and review maintenance history.
+
+### Connectivity
+
+- Connect telematics providers, devices, sensors, events, and tracking data.
+- Discover and link telematics devices, test provider credentials, and receive telematics webhooks.
+- Use Fleet-Ops tracking providers for calculated, OSRM, and Google Routes-backed route intelligence.
+
+### Analytics and Dashboards
+
+- Use Fleet-Ops KPI widgets for earnings, average order value, distance, active orders, online drivers, and open issues.
+- Review analytics for operations pulse, live fleet, revenue trends, order status volume, on-time delivery, top drivers, fuel efficiency, issues, maintenance, and geofence violations.
+- Create and view reports from the Fleet-Ops analytics workspace.
+
+### Settings and Extensions
+
+- Configure Navigator app onboarding, routing, tracking, map providers, notifications, scheduling, payments, orchestrator settings, custom fields, and avatars.
+- Expose Fleet-Ops order tracking on the Fleetbase login surface.
+- Integrate Fleet-Ops entities into other Fleetbase extensions through registered components and virtual detail tabs.
+
+## Architecture
+
+Fleet-Ops follows the Fleetbase extension architecture: an Ember Engine for the console interface and a Laravel package for API and backend capabilities.
+
+```text
+fleetops/
++-- addon/              # Ember Engine source: routes, controllers, components, services, templates
++-- app/                # Ember app re-exports and integration points
++-- assets/             # Frontend assets bundled with the engine
++-- translations/       # Fleet-Ops locale files
++-- server/
+|   +-- config/         # Fleet-Ops API configuration
+|   +-- migrations/     # Database migrations
+|   +-- resources/      # Backend views and resources
+|   +-- seeders/        # Seed data
+|   +-- src/            # Controllers, models, jobs, events, support services, providers
+|   +-- tests/          # Backend test suite
++-- tests/              # Ember test suite
++-- package.json        # Frontend package metadata and scripts
++-- composer.json       # Backend package metadata and scripts
 ```
 
-## Installation
+Core frontend dependencies include Ember Octane, Ember Engines, Fleetbase Ember Core, Fleetbase UI, Fleet-Ops Data, Leaflet, Leaflet Draw, Turf, JointJS, and Stripe Connect. Core backend capabilities are provided by Laravel, Fleetbase Core API, Fleet-Ops models/controllers, orchestration engines, tracking providers, analytics, notifications, jobs, and telematics integrations.
 
-### Backend
+## Getting Started
 
-Install the PHP packages using Composer:
+Fleet-Ops comes pre-installed with Fleetbase Cloud and standard self-hosted Fleetbase installations. If you are setting up the Fleetbase platform itself, use the Fleetbase documentation:
+
+- [Fleet-Ops documentation](https://www.fleetbase.io/docs/fleet-ops)
+- [Fleetbase documentation](https://www.fleetbase.io/docs)
+- [Fleetbase console](https://console.fleetbase.io)
+
+When developing Fleet-Ops from source, install both frontend and backend dependencies:
 
 ```bash
-composer require fleetbase/core-api
-composer require fleetbase/fleetops-api
+pnpm install
+composer install
 ```
-### Frontend
 
-Install the Ember.js Engine/Addon:
+### Link Fleet-Ops into Fleetbase
+
+When working from the Fleetbase monorepo, use the Fleetbase package linker to connect this local package to the running Console and API applications. From the Fleetbase repository root:
 
 ```bash
-pnpm install @fleetbase/fleetops-engine
+flb-package-linker enable fleetops
+flb-package-linker install fleetops
 ```
 
-## Usage
+This links the local Fleet-Ops Ember engine and Laravel package so Console and API use your source checkout instead of the published packages. See the [Fleetbase development setup guide](https://www.fleetbase.io/docs/platform/quickstart/development-setup) for the full package-linking workflow, Docker setup, Octane reload notes, and frontend hot-reload options.
+
+### Link Fleet-Ops Data
 
-### Backend
+Fleet-Ops also depends on the shared `@fleetbase/fleetops-data` package. That package contains Fleet-Ops Ember Data models, adapters, and serializers, and can be reused by other Fleetbase modules that need to read or write Fleet-Ops resources without duplicating data-layer definitions.
+
+If you are changing shared Fleet-Ops data models or consuming them from another extension, link `fleetops-data` through the root Console workspace:
 
-🧹 Keep a modern codebase with **PHP CS Fixer**:
 ```bash
-composer lint
+flb-package-linker enable-shared fleetops-data
+flb-package-linker install
 ```
 
-⚗️ Run static analysis using **PHPStan**:
+For broader Fleet-Ops frontend work, you may also link the common shared Ember packages used by Fleetbase:
+
 ```bash
-composer test:types
+flb-package-linker enable fleetops --shared ember-core ember-ui fleetops-data
+flb-package-linker install fleetops
 ```
 
-✅ Run unit tests using **PEST**
+## Development
+
+Start the Ember Engine in development mode:
+
 ```bash
-composer test:unit
+pnpm start
 ```
 
-🚀 Run the entire test suite:
+Build the production frontend bundle:
+
 ```bash
-composer test
+pnpm build
 ```
 
-### Frontend
+Run frontend linting:
 
-🧹 Keep a modern codebase with **ESLint**:
 ```bash
 pnpm lint
 ```
 
-✅ Run unit tests using **Ember/QUnit**
+Run backend linting:
+
+```bash
+composer test:lint
+```
+
+## Testing
+
+Run the Ember/QUnit test suite:
+
 ```bash
-pnpm test
 pnpm test:ember
-pnpm test:ember-compatibility
 ```
 
-🚀 Start the Ember Addon/Engine
+Run the full frontend check suite:
+
 ```bash
-pnpm start
+pnpm test
 ```
 
-🔨 Build the Ember Addon/Engine
+Run the backend test suite:
+
 ```bash
-pnpm build
+composer test
 ```
 
+Run backend checks individually:
+
+```bash
+composer test:lint
+composer test:types
+composer test:unit
+```
+
+## Documentation
+
+- [Fleet-Ops docs](https://www.fleetbase.io/docs/fleet-ops)
+- [Fleet-Ops quickstart](https://www.fleetbase.io/docs/fleet-ops/getting-started/quickstart)
+- [Fleet-Ops core concepts](https://www.fleetbase.io/docs/fleet-ops/getting-started/core-concepts)
+- [Navigator app setup](https://www.fleetbase.io/docs/fleet-ops/getting-started/navigator-app-setup)
+- [Fleetbase docs](https://www.fleetbase.io/docs)
+
 ## Contributing
-See the Contributing Guide for details on how to contribute to this project.
+
+Contributions are welcome. Please read [CONTRIBUTING.md](CONTRIBUTING.md) before opening a pull request.
+
+Useful project files:
+
+- [package.json](package.json) for frontend scripts and package metadata.
+- [composer.json](composer.json) for backend scripts and package metadata.
+- [extension.json](extension.json) for Fleetbase extension metadata.
 
 ## License
-This project is licensed under the MIT License.
+
+Fleet-Ops is open-source software licensed under the [GNU Affero General Public License v3.0 or later](LICENSE.md).

package/addon/components/cell/telematic-provider.hbs

@@ -0,0 +1,16 @@
+<div ...attributes>
+    <button
+        type="button"
+        disabled={{and @column.permission (cannot @column.permission)}}
+        {{on "click" this.onClick}}
+        class="flex min-w-0 max-w-md items-start gap-2 py-1 text-left"
+    >
+        <div class="pt-0.5">
+            <Image src={{this.icon}} class="mr-3 h-8 w-8 flex-shrink-0 rounded-md" />
+        </div>
+        <div class="min-w-0 text-left">
+            <div class="truncate text-sm font-semibold text-gray-900 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-300">{{n-a this.name}}</div>
+            <div class="mt-0.5 line-clamp-2 whitespace-normal text-left text-xs leading-4 text-gray-500 dark:text-gray-400">{{n-a this.description}}</div>
+        </div>
+    </button>
+</div>

package/addon/components/cell/telematic-provider.js

@@ -0,0 +1,36 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class CellTelematicProviderComponent extends Component {
+    get descriptor() {
+        return this.args.row?.provider_descriptor ?? {};
+    }
+
+    get name() {
+        return this.args.row?.name ?? this.descriptor.label ?? this.args.row?.provider;
+    }
+
+    get description() {
+        return this.descriptor.description ?? this.args.row?.provider;
+    }
+
+    get icon() {
+        return this.descriptor.icon;
+    }
+
+    @action onClick(event) {
+        const { row, column, onClick } = this.args;
+
+        if (typeof onClick === 'function') {
+            onClick(row, event);
+        }
+
+        if (typeof column?.action === 'function') {
+            column.action(row, event);
+        }
+
+        if (typeof column?.onClick === 'function') {
+            column.onClick(row, event);
+        }
+    }
+}

package/addon/components/cell/telematic-status.hbs

@@ -0,0 +1 @@
+<Badge @status={{this.badgeStatus}} @hideStatusDot={{true}}>{{this.label}}</Badge>

package/addon/components/cell/telematic-status.js

@@ -0,0 +1,39 @@
+import Component from '@glimmer/component';
+
+export default class CellTelematicStatusComponent extends Component {
+    get status() {
+        return this.args.row?.status;
+    }
+
+    get badgeStatus() {
+        switch (this.status) {
+            case 'active':
+            case 'connected':
+                return 'success';
+            case 'synchronizing':
+                return 'info';
+            case 'error':
+            case 'degraded':
+            case 'disconnected':
+                return 'warning';
+            default:
+                return this.status ?? 'default';
+        }
+    }
+
+    get label() {
+        switch (this.status) {
+            case 'active':
+            case 'connected':
+                return 'Connected';
+            case 'synchronizing':
+                return 'Syncing';
+            case 'initialized':
+                return 'Not tested';
+            case 'error':
+                return 'Needs attention';
+            default:
+                return this.status ?? 'Unknown';
+        }
+    }
+}

package/addon/components/contact/panel-header.hbs

@@ -13,55 +13,18 @@
             </div>
         </div>
         <div class="next-view-header-right">
-            <div class="flex flex-row flex-1 justify-end space-x-2">
+            <Layout::Resource::Panel::HeaderActions
+                @resource={{@resource}}
+                @saveTask={{@saveTask}}
+                @saveOptions={{@saveOptions}}
+                @saveDisabled={{@saveDisabled}}
+                @pojoResource={{@pojoResource}}
+                @authSchema={{@authSchema}}
+                @actionButtons={{@actionButtons}}
+                @onPressCancel={{@onPressCancel}}
+            >
                 {{yield}}
-                {{#if @saveTask}}
-                    <Button
-                        @type="primary"
-                        @icon={{if @resource.isNew "check" "save"}}
-                        @text={{if @resource.isNew (concat "Create " this.modelName) "Save Changes"}}
-                        @onClick={{perform @saveTask @resource}}
-                        @disabled={{cannot-write @resource schema=@authSchema}}
-                        @isLoading={{@saveTask.isRunning}}
-                    />
-                {{/if}}
-                {{#each @actionButtons as |actionButton|}}
-                    <Button
-                        @type={{actionButton.type}}
-                        @text={{actionButton.text}}
-                        @onClick={{if actionButton.perform (perform actionButton.perform) (or actionButton.onClick actionButton.fn)}}
-                        @size={{actionButton.size}}
-                        @buttonType={{actionButton.buttonType}}
-                        @disabled={{actionButton.disabled}}
-                        @exampleText={{actionButton.exampleText}}
-                        @helpText={{actionButton.helpText}}
-                        @icon={{actionButton.icon}}
-                        @iconClass={{actionButton.iconClass}}
-                        @iconFlip={{actionButton.iconFlip}}
-                        @iconPrefix={{actionButton.iconPrefix}}
-                        @iconRotation={{actionButton.iconRotation}}
-                        @iconSize={{actionButton.iconSize}}
-                        @isLoading={{actionButton.isLoading}}
-                        @outline={{actionButton.outline}}
-                        @permission={{actionButton.permission}}
-                        @wrapperClass={{actionButton.wrapperClass}}
-                        @textClass={{actionButton.textClass}}
-                        @tooltipPlacement={{actionButton.tooltipPlacement}}
-                        @visible={{actionButton.visible}}
-                    />
-                {{/each}}
-                {{#if @onPressCancel}}
-                    <button
-                        type="button"
-                        class="next-content-overlay-panel-cancel-button {{@cancelButtonClass}}"
-                        {{set-height @cancelButtonHeight}}
-                        {{set-width @cancelButtonWidth}}
-                        {{on "click" @onPressCancel}}
-                    >
-                        <FaIcon @icon={{or @cancelIcon "times"}} @size={{@iconSize}} @prefix={{or @iconPrefix "fas"}} class={{@iconClass}} />
-                    </button>
-                {{/if}}
-            </div>
+            </Layout::Resource::Panel::HeaderActions>
         </div>
     </div>
 </div>

package/addon/components/customer/details.hbs

@@ -47,6 +47,5 @@
             </div>
         </div>
     </ContentPanel>
-
     <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
-</div>
+</div>

package/addon/components/customer/form.hbs

@@ -1,53 +1,4 @@
 <div class="form-wrapper" ...attributes>
-    <ContentPanel @title={{t "customer.fields.user-account"}} @open={{true}} @actionButtons={{this.userAccountActionButtons}} @wrapperClass="bordered-top">
-        <div class="space-y-2">
-            <InputGroup @name={{t "customer.fields.user-account"}} @helpText={{t "customer.fields.user-account-help-text"}}>
-                <ModelSelect
-                    @modelName="user"
-                    @selectedModel={{@resource.user}}
-                    @placeholder={{t "customer.fields.select-user"}}
-                    @query={{hash doesnt_have_contact=true is_customer=true}}
-                    @triggerClass="form-select form-input"
-                    @infiniteScroll={{false}}
-                    @renderInPlace={{true}}
-                    @onChange={{fn (mut @resource.user)}}
-                    @permission="fleet-ops update-user-for customer"
-                    as |model|
-                >
-                    <div class="flex flex-row">
-                        <div class="mr-2 w-6">
-                            <Image src={{model.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{this.user.name}} class="w-6 h-6 rounded-md" />
-                        </div>
-                        <div class="flex flex-col">
-                            <div class="font-semibold">{{model.name}}</div>
-                            <div class="text-xs flex flex-row items-center leading-4">
-                                <FaIcon @icon="envelope" @size="sm" class="mr-1 opacity-75" />
-                                <span>{{n-a model.email}}</span>
-                            </div>
-                            <div class="text-xs flex flex-row items-center leading-4">
-                                <FaIcon @icon="phone" @size="sm" class="mr-1 opacity-75" />
-                                <span>{{n-a model.phone}}</span>
-                            </div>
-                        </div>
-                    </div>
-                </ModelSelect>
-            </InputGroup>
-            {{#if @resource.user}}
-                <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 no-input-group-padding">
-                    <InputGroup @name={{t "common.name"}} @wrapperClass="col-span-2 mb-0i">
-                        <Input @value={{@resource.user.name}} @type="text" class="w-full form-input" placeholder={{t "common.name"}} disabled={{true}} />
-                    </InputGroup>
-                    <InputGroup @name={{t "common.email"}} @wrapperClass="mb-0i">
-                        <Input @value={{@resource.user.email}} @type="text" class="w-full form-input" placeholder={{t "common.email"}} disabled={{true}} />
-                    </InputGroup>
-                    <InputGroup @name={{t "common.phone"}} @wrapperClass="mb-0i">
-                        <PhoneInput @value={{@resource.user.phone}} @onInput={{fn (mut @resource.phone)}} class="form-input w-full" disabled={{true}} />
-                    </InputGroup>
-                </div>
-            {{/if}}
-        </div>
-    </ContentPanel>
-
     <ContentPanel @title={{t "customer.fields.customer-details"}} @open={{true}} @wrapperClass="bordered-top">
         <div class="flex flex-row space-x-3 mb-3">
             <div class="flex items-center justify-start rounded-full">
@@ -125,20 +76,81 @@
                     as |model|
                 >
                     <div class="flex items-center flex-row justify-between">
-                        <div class="truncate flex-1">{{n-a model.address}}</div>
+                        <div class="truncate flex-1">{{place-address-html model}}</div>
                         <Badge @hideStatusDot={{true}} @status="info">{{model.public_id}}</Badge>
                     </div>
                 </ModelSelect>
             </InputGroup>
+            {{#if this.showWelcomeEmailOption}}
+                <div class="col-span-2 mt-3">
+                    <Checkbox
+                        @value={{this.sendWelcomeEmail}}
+                        @label={{t "customer.fields.send-welcome-email"}}
+                        @helpText={{t "customer.fields.send-welcome-email-help-text"}}
+                        @onToggle={{this.toggleWelcomeEmail}}
+                        @alignItems="center"
+                        @labelClass="mb-0i"
+                    />
+                </div>
+            {{/if}}
             <RegistryYield @registry="fleet-ops:component:customer:form:details" as |RegistryComponent|>
                 <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
             </RegistryYield>
         </div>
     </ContentPanel>
 
+    <ContentPanel @title={{t "customer.fields.user-account"}} @open={{true}} @actionButtons={{this.userAccountActionButtons}} @wrapperClass="bordered-top">
+        <div class="space-y-2">
+            <InputGroup @name={{t "customer.fields.user-account"}} @helpText={{t "customer.fields.user-account-help-text"}}>
+                <ModelSelect
+                    @modelName="user"
+                    @selectedModel={{@resource.user}}
+                    @placeholder={{t "customer.fields.select-user"}}
+                    @query={{hash doesnt_have_contact=true is_customer=true}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut @resource.user)}}
+                    @permission="fleet-ops update-user-for customer"
+                    as |model|
+                >
+                    <div class="flex flex-row">
+                        <div class="mr-2 w-6">
+                            <Image src={{model.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{this.user.name}} class="w-6 h-6 rounded-md" />
+                        </div>
+                        <div class="flex flex-col">
+                            <div class="font-semibold">{{model.name}}</div>
+                            <div class="text-xs flex flex-row items-center leading-4">
+                                <FaIcon @icon="envelope" @size="sm" class="mr-1 opacity-75" />
+                                <span>{{n-a model.email}}</span>
+                            </div>
+                            <div class="text-xs flex flex-row items-center leading-4">
+                                <FaIcon @icon="phone" @size="sm" class="mr-1 opacity-75" />
+                                <span>{{n-a model.phone}}</span>
+                            </div>
+                        </div>
+                    </div>
+                </ModelSelect>
+            </InputGroup>
+            {{#if @resource.user}}
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 no-input-group-padding">
+                    <InputGroup @name={{t "common.name"}} @wrapperClass="col-span-2 mb-0i">
+                        <Input @value={{@resource.user.name}} @type="text" class="w-full form-input" placeholder={{t "common.name"}} disabled={{true}} />
+                    </InputGroup>
+                    <InputGroup @name={{t "common.email"}} @wrapperClass="mb-0i">
+                        <Input @value={{@resource.user.email}} @type="text" class="w-full form-input" placeholder={{t "common.email"}} disabled={{true}} />
+                    </InputGroup>
+                    <InputGroup @name={{t "common.phone"}} @wrapperClass="mb-0i">
+                        <PhoneInput @value={{@resource.user.phone}} @onInput={{fn (mut @resource.phone)}} class="form-input w-full" disabled={{true}} />
+                    </InputGroup>
+                </div>
+            {{/if}}
+        </div>
+    </ContentPanel>
+
     <CustomField::Yield @subject={{@resource}} @wrapperClass="bordered-top" />
 
     <RegistryYield @registry="fleet-ops:component:customer:form" as |RegistryComponent|>
         <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
     </RegistryYield>
-</div>
+</div>