From ed32db6e8fca5dc7c0f0ba971606d8b35e1dc1ea Mon Sep 17 00:00:00 2001
From: TemuulenBM <temuulen.developer@gmail.com>
Date: Thu, 16 Nov 2023 18:01:47 +0800
Subject: [PATCH] added delete_at column on the tables and created supplier

---
 addon/components/sales-order-form-panel.hbs   |  42 ++-
 addon/components/sales-order-form-panel.js    | 158 ++++++++++-
 addon/components/sales-order-panel.hbs        |  53 +++-
 addon/components/sales-order-panel.js         | 159 ++++++++++-
 .../components/sales-order-panel/details.hbs  |  42 +++
 addon/components/supplier-form-panel.hbs      |  89 +++++-
 addon/components/supplier-form-panel.js       | 189 ++++++++++++-
 .../supplier-form-panel/create-form.hbs       | 175 ++++++++++++
 .../supplier-form-panel/create-form.js        | 158 +++++++++++
 .../supplier-form-panel/edit-form.hbs         |  98 +++++++
 .../supplier-form-panel/edit-form.js          |  51 ++++
 addon/components/supplier-panel.hbs           |  73 ++++-
 addon/components/supplier-panel.js            | 160 ++++++++++-
 addon/components/supplier-panel/details.hbs   |  77 +++++
 addon/components/supplier-panel/details.js    |  12 +
 addon/controllers/sales-orders/index.js       |  28 +-
 .../controllers/sales-orders/index/details.js |  54 +++-
 addon/controllers/sales-orders/index/edit.js  | 110 +++++++-
 addon/controllers/sales-orders/index/new.js   |  87 +++++-
 addon/controllers/suppliers/index.js          | 267 +++++++++++++++---
 addon/controllers/suppliers/index/details.js  |   2 +-
 addon/controllers/suppliers/index/edit.js     |  24 +-
 addon/controllers/suppliers/index/new.js      |  24 +-
 addon/models/sales-order.js                   |  62 +++-
 addon/models/supplier.js                      |   4 +-
 addon/routes.js                               |  24 +-
 addon/routes/sales-orders/index.js            |   2 +-
 addon/routes/sales-orders/index/details.js    |  14 +-
 addon/routes/sales-orders/index/edit.js       |   8 +-
 addon/serializers/sales-order.js              |  11 +-
 addon/serializers/supplier.js                 |  14 +-
 addon/services/context-panel.js               |  30 ++
 .../templates/sales-orders/index/details.hbs  |   3 +-
 addon/templates/sales-orders/index/edit.hbs   |   3 +-
 addon/templates/sales-orders/index/new.hbs    |   3 +-
 addon/utils/get-supplier-status-options.js    |   3 +
 addon/utils/get-supplier-type-options.js      |  41 +++
 .../supplier-form-panel/create-form.js        |   1 +
 .../supplier-form-panel/edit-form.js          |   1 +
 app/components/supplier-panel/details.js      |   1 +
 app/utils/get-supplier-status-options.js      |   1 +
 app/utils/get-supplier-type-options.js        |   1 +
 .../2023_11_15_023331_create_audits_table.php |   7 +-
 ...2023_11_15_023340_create_batches_table.php |   3 +-
 ...23_11_15_023348_create_inventory_table.php |   3 +-
 ...15_023356_create_purchase_orders_table.php |   2 +
 ...11_15_023404_create_sales_orders_table.php |   2 +
 ...023411_create_stock_transactions_table.php |   3 +-
 ...5_034937_create_stock_adjustment_table.php |   3 +-
 server/src/Models/SalesOrder.php              |  16 +-
 server/src/routes.php                         |   9 +-
 .../supplier-form-panel/create-form-test.js   |  26 ++
 .../supplier-form-panel/edit-form-test.js     |  26 ++
 .../components/supplier-panel/details-test.js |  26 ++
 .../utils/get-supplier-status-options-test.js |  10 +
 .../utils/get-supplier-type-options-test.js   |  10 +
 56 files changed, 2362 insertions(+), 143 deletions(-)
 create mode 100644 addon/components/supplier-form-panel/create-form.hbs
 create mode 100644 addon/components/supplier-form-panel/create-form.js
 create mode 100644 addon/components/supplier-form-panel/edit-form.hbs
 create mode 100644 addon/components/supplier-form-panel/edit-form.js
 create mode 100644 addon/components/supplier-panel/details.js
 create mode 100644 addon/utils/get-supplier-status-options.js
 create mode 100644 addon/utils/get-supplier-type-options.js
 create mode 100644 app/components/supplier-form-panel/create-form.js
 create mode 100644 app/components/supplier-form-panel/edit-form.js
 create mode 100644 app/components/supplier-panel/details.js
 create mode 100644 app/utils/get-supplier-status-options.js
 create mode 100644 app/utils/get-supplier-type-options.js
 create mode 100644 tests/integration/components/supplier-form-panel/create-form-test.js
 create mode 100644 tests/integration/components/supplier-form-panel/edit-form-test.js
 create mode 100644 tests/integration/components/supplier-panel/details-test.js
 create mode 100644 tests/unit/utils/get-supplier-status-options-test.js
 create mode 100644 tests/unit/utils/get-supplier-type-options-test.js

diff --git a/addon/components/sales-order-form-panel.hbs b/addon/components/sales-order-form-panel.hbs
index fb5c4b15..8b6ada56 100644
--- a/addon/components/sales-order-form-panel.hbs
+++ b/addon/components/sales-order-form-panel.hbs
@@ -1 +1,41 @@
-{{yield}}
\ No newline at end of file
+<Overlay
+    @onLoad={{this.setOverlayContext}}
+    @position="right"
+    @noBackdrop={{true}}
+    @fullHeight={{true}}
+    @isResizeble={{or this.isResizable @isResizable}}
+    @width={{or this.width @width "600px"}}
+>
+    <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
+        <div class="flex flex-row items-center justify-between w-full mb-4">
+            <div class="flex flex-1 space-x-2">
+                {{#if this.salesOrder.id}}
+                    <Button @type="default" @icon="box" @helpText="View sales order details" @onClick={{this.onViewDetails}} />
+                {{/if}}
+            </div>
+            <div class="flex flex-1 justify-end">
+                <div class="mr-2">
+                    <Button @icon={{if this.salesOrder.id "save" "check"}} @type="primary" @text={{if this.salesOrder.id "Save Sales Order" "Create Sales Order"}} @onClick={{this.save}} />
+                </div>
+                <Button @type="default" @icon="times" @helpText={{if this.salesOrder.id "Cancel edit Sales Order" "Cancel new Sales Order"}} @onClick={{this.onPressCancel}} />
+            </div>
+        </div>
+        <div class="flex flex-row justify-between w-full">
+            <div class="flex justify-end w-1/4">
+                <Badge @status={{this.salesOrder.status}} @type="info" @hideStatusDot={{true}} />
+            </div>
+        </div>
+    </Overlay::Header>
+
+    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 pt-4" @increaseInnerBodyHeightBy={{700}}>
+        <div class="flex-1 space-y-4">
+            <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
+                    <InputGroup @name="Status" @helpText="Select the status of the fleet.">
+                        <Select @options={{this.statusOptions}} @value={{this.salesOrder.status}} @onSelect={{fn (mut this.salesOrder.status)}} @placeholder="Select status" class="w-full" />
+                    </InputGroup>
+                </div>
+            </ContentPanel>
+        </div>
+    </Overlay::Body>
+</Overlay>
\ No newline at end of file
diff --git a/addon/components/sales-order-form-panel.js b/addon/components/sales-order-form-panel.js
index 80222c2b..9e14ef59 100644
--- a/addon/components/sales-order-form-panel.js
+++ b/addon/components/sales-order-form-panel.js
@@ -1,3 +1,159 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import contextComponentCallback from '../utils/context-component-callback';
+import applyContextComponentArguments from '../utils/apply-context-component-arguments';
 
-export default class SalesOrderFormPanelComponent extends Component {}
+export default class SalesOrderFormPanelComponent extends Component {
+    /**
+     * @service store
+     */
+    @service store;
+
+    /**
+     * @service fetch
+     */
+    @service fetch;
+
+    /**
+     * @service currentUser
+     */
+    @service currentUser;
+
+    /**
+     * @service notifications
+     */
+    @service notifications;
+
+    /**
+     * @service hostRouter
+     */
+    @service hostRouter;
+
+    /**
+     * @service loader
+     */
+    @service loader;
+
+    /**
+     * @service contextPanel
+     */
+    @service contextPanel;
+
+    /**
+     * Overlay context.
+     * @type {any}
+     */
+    @tracked context;
+
+    /**
+     * Indicates whether the component is in a loading state.
+     * @type {boolean}
+     */
+    @tracked isLoading = false;
+
+    /**
+     * All possible salesOrder types.
+     *
+     * @var {String}
+     */
+    @tracked salesOrderTypeOptions = ['salesOrder', 'customer'];
+
+    /**
+     * All possible salesOrder status options.
+     *
+     * @var {String}
+     */
+    @tracked salesOrderStatusOptions = ['pending', 'active', 'do-not-sales-order', 'prospective', 'archived'];
+
+    /**
+     * Constructs the component and applies initial state.
+     */
+    constructor() {
+        super(...arguments);
+        this.salesOrder = this.args.salesOrder;
+        applyContextComponentArguments(this);
+    }
+
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
+    }
+
+    /**
+     * Saves the salesOrder changes.
+     *
+     * @action
+     * @returns {Promise<any>}
+     */
+    @action save() {
+        const { salesOrder } = this;
+
+        this.loader.showLoader('.next-content-overlay-panel-container', { loadingMessage: 'Saving salesOrder...', preserveTargetPosition: true });
+        this.isLoading = true;
+
+        contextComponentCallback(this, 'onBeforeSave', salesOrder);
+
+        try {
+            return salesOrder
+                .save()
+                .then((salesOrder) => {
+                    this.notifications.success(`salesOrder (${salesOrder.name}) saved successfully.`);
+                    contextComponentCallback(this, 'onAfterSave', salesOrder);
+                })
+                .catch((error) => {
+                    this.notifications.serverError(error);
+                })
+                .finally(() => {
+                    this.loader.removeLoader('.next-content-overlay-panel-container ');
+                    this.isLoading = false;
+                });
+        } catch (error) {
+            this.loader.removeLoader('.next-content-overlay-panel-container ');
+            this.isLoading = false;
+        }
+    }
+
+    /**
+     * Uploads a new photo for the driver.
+     *
+     * @param {File} file
+     * @memberof DriverFormPanelComponent
+     */
+
+    /**
+     * View the details of the salesOrder.
+     *
+     * @action
+     */
+    @action onViewDetails() {
+        const isActionOverrided = contextComponentCallback(this, 'onViewDetails', this.salesOrder);
+
+        if (!isActionOverrided) {
+            this.contextPanel.focus(this.salesOrder, 'viewing');
+        }
+    }
+
+    /**
+     * Handles cancel button press.
+     *
+     * @action
+     * @returns {any}
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel', this.salesOrder);
+    }
+
+    /**
+     * Uploads a file to the server for the salesOrder.
+     *
+     * @param {File} file
+     */
+}
diff --git a/addon/components/sales-order-panel.hbs b/addon/components/sales-order-panel.hbs
index fb5c4b15..43e7b343 100644
--- a/addon/components/sales-order-panel.hbs
+++ b/addon/components/sales-order-panel.hbs
@@ -1 +1,52 @@
-{{yield}}
\ No newline at end of file
+<Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
+    <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
+        <div class="flex flex-row items-center justify-between w-full mb-4">
+            <div class="flex flex-1 space-x-2">
+                <Button @type="default" @icon="pen" @helpText="Edit salesOrder" @onClick={{this.onEdit}} />
+            </div>
+            <div class="flex flex-1 justify-end">
+                <Button @type="default" @icon="times" @helpText={{if this.salesOrder.id "Cancel edit salesOrder" "Cancel new salesOrder"}} @onClick={{this.onPressCancel}} />
+            </div>
+        </div>
+        <div class="flex flex-row justify-between w-full">
+            <div class="flex flex-col flex-1 w-3/4">
+                <div class="flex flex-row">
+                    <div class="w-14 flex items-center justify-start">
+                        <Image src={{this.salesOrder.photo_url}} @fallbackSrc={{config "defaultValues.salesOrderImage"}} alt={{this.salesOrder.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                        <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                            <InputInfo @text={{this.salesOrder.public_id}} />
+                        </Attach::Tooltip>
+                    </div>
+                    <div class="flex flex-col">
+                        <h1 class="text-gray-900 dark:text-white text-2xl">{{this.salesOrder.name}}</h1>
+                        <div class="-mt-1">
+                            <div class="flex flex-row items-center">
+                                <span class="text-sm dark:text-blue-400 text-blue-600">{{smart-humanize this.salesOrder.type}}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-end w-1/4">
+                <Badge @status={{this.salesOrder.public_id}} @type="info" @hideStatusDot={{true}} />
+            </div>
+        </div>
+    </Overlay::Header>
+    <Overlay::Body class="no-padding" @increaseInnerBodyHeightBy={{1000}}>
+        <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">
+            <div class="ui-tabs mt-4">
+                <nav>
+                    {{#each this.tabs as |tab|}}
+                        <a href="javascript:;" class="ui-tab {{if (eq this.tab.slug tab.slug) 'active'}}" {{on "click" (fn this.onTabChanged tab.slug)}}>
+                            <FaIcon @icon={{tab.icon}} class="mr-1" />
+                            <span>{{tab.title}}</span>
+                        </a>
+                    {{/each}}
+                </nav>
+            </div>
+        </div>
+        <div class="tab-content tab-{{this.tab.slug}}">
+            {{component this.tab.component salesOrder=this.salesOrder tabOptions=this.tab options=this.tab.componentParams}}
+        </div>
+    </Overlay::Body>
+</Overlay>
\ No newline at end of file
diff --git a/addon/components/sales-order-panel.js b/addon/components/sales-order-panel.js
index 1ad8d72d..5cf17f1d 100644
--- a/addon/components/sales-order-panel.js
+++ b/addon/components/sales-order-panel.js
@@ -1,3 +1,160 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { isArray } from '@ember/array';
+import SalesOrderPanelDetailComponent from './salesOrder-panel/details';
+import contextComponentCallback from '../utils/context-component-callback';
+import applyContextComponentArguments from '../utils/apply-context-component-arguments';
 
-export default class SalesOrderPanelComponent extends Component {}
+export default class SalesOrderPanelComponent extends Component {
+    /**
+     * Service for fetching data.
+     *
+     * @type {Service}
+     */
+    @service fetch;
+
+    /**
+     * Service for managing modals.
+     *
+     * @type {Service}
+     */
+    @service modalsManager;
+
+    /**
+     * Universe service for managing global data and settings.
+     *
+     * @type {Service}
+     */
+    @service universe;
+
+    /**
+     * Ember data store service.
+     *
+     * @type {Service}
+     */
+    @service store;
+
+    /**
+     * Service for managing routing within the host app.
+     *
+     * @type {Service}
+     */
+    @service hostRouter;
+
+    /**
+     * Service for managing the context panel.
+     *
+     * @type {Service}
+     */
+    @service contextPanel;
+
+    /**
+     * The current active tab.
+     *
+     * @type {Object}
+     * @tracked
+     */
+    @tracked tab;
+
+    /**
+     * The salesOrder being displayed or edited.
+     *
+     * @type {salesOrderModel}
+     * @tracked
+     */
+    @tracked salesOrder;
+
+    /**
+     * Returns the array of tabs available for the panel.
+     *
+     * @type {Array}
+     */
+    get tabs() {
+        const registeredTabs = this.universe.getMenuItemsFromRegistry('component:salesOrder-panel');
+        const defaultTabs = [this.universe._createMenuItem('Details', null, { icon: 'circle-info', component: SalesOrderPanelDetailComponent })];
+
+        if (isArray(registeredTabs)) {
+            return [...defaultTabs, ...registeredTabs];
+        }
+
+        return defaultTabs;
+    }
+
+    /**
+     * Initializes the salesOrder panel component.
+     */
+    constructor() {
+        super(...arguments);
+        this.salesOrder = this.args.salesOrder;
+        this.tab = this.getTabUsingSlug(this.args.tab);
+        applyContextComponentArguments(this);
+    }
+
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
+    }
+
+    /**
+     * Handles changing the active tab.
+     *
+     * @method
+     * @param {String} tab - The new tab to switch to.
+     * @action
+     */
+    @action onTabChanged(tab) {
+        this.tab = this.getTabUsingSlug(tab);
+        contextComponentCallback(this, 'onTabChanged', tab);
+    }
+
+    /**
+     * Handles edit action for the salesOrder.
+     *
+     * @method
+     * @action
+     */
+    @action onEdit() {
+        const isActionOverrided = contextComponentCallback(this, 'onEdit', this.salesOrder);
+
+        if (!isActionOverrided) {
+            this.contextPanel.focus(this.salesOrder, 'editing', {
+                onAfterSave: () => {
+                    this.contextPanel.clear();
+                },
+            });
+        }
+    }
+
+    /**
+     * Handles the cancel action.
+     *
+     * @method
+     * @action
+     * @returns {Boolean} Indicates whether the cancel action was overridden.
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel', this.salesOrder);
+    }
+
+    /**
+     * Finds and returns a tab based on its slug.
+     *
+     * @param {String} tabSlug - The slug of the tab.
+     * @returns {Object|null} The found tab or null.
+     */
+    getTabUsingSlug(tabSlug) {
+        if (tabSlug) {
+            return this.tabs.find(({ slug }) => slug === tabSlug);
+        }
+
+        return this.tabs[0];
+    }
+}
diff --git a/addon/components/sales-order-panel/details.hbs b/addon/components/sales-order-panel/details.hbs
index e69de29b..d0301670 100644
--- a/addon/components/sales-order-panel/details.hbs
+++ b/addon/components/sales-order-panel/details.hbs
@@ -0,0 +1,42 @@
+<div class="p-4">
+    <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
+        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-4 text-xs dark:text-gray-100">
+
+            <div class="field-info-container">
+                <div class="field-name">Customer UUID</div>
+                <div class="field-value">{{n-a @salesOrder.customer_uuid}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Status</div>
+                <div class="field-value">{{n-a @salesOrder.status}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Order Created</div>
+                <div class="field-value">{{@salesOrder.createdAtShort}}</div>
+            </div>
+            
+            <div class="field-info-container">
+                <div class="field-name">Order Delivered</div>
+                <div class="field-value">{{@salesOrder.deliveredAtShort}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Created At</div>
+                <div class="field-value">{{@salesOrder.createdAtShort}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Updated At</div>
+                <div class="field-value">{{@salesOrder.updatedAtShort}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Deleted At</div>
+                <div class="field-value">{{@salesOrder.deletedAtShort}}</div>
+            </div>
+
+        </div>
+    </ContentPanel>
+</div>
diff --git a/addon/components/supplier-form-panel.hbs b/addon/components/supplier-form-panel.hbs
index fb5c4b15..ca47faab 100644
--- a/addon/components/supplier-form-panel.hbs
+++ b/addon/components/supplier-form-panel.hbs
@@ -1 +1,88 @@
-{{yield}}
\ No newline at end of file
+<Overlay
+    @onLoad={{this.setOverlayContext}}
+    @position="right"
+    @noBackdrop={{true}}
+    @fullHeight={{true}}
+    @isResizeble={{or this.isResizable @isResizable}}
+    @width={{or this.width @width "600px"}}
+>
+    <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i">
+        <div class="flex flex-row items-center justify-between w-full mb-4">
+            <div class="flex flex-1 space-x-2">
+                {{#if this.supplier.id}}
+                    <Button @type="default" @icon="warehouse" @helpText="View supplier details" @onClick={{this.onViewDetails}} />
+                {{/if}}
+            </div>
+            <div class="flex flex-1 justify-end">
+                <div class="mr-2">
+                    <Button @icon={{if this.supplier.id "save" "check"}} @type="primary" @text={{if this.supplier.id "Save Supplier" "Create Supplier"}} @onClick={{this.save}} />
+                </div>
+                <Button @type="default" @icon="times" @helpText={{if this.supplier.id "Cancel edit supplier" "Cancel new supplier"}} @onClick={{this.onPressCancel}} />
+            </div>
+        </div>
+        <div class="flex flex-row justify-between w-full">
+            <div class="flex flex-col flex-1 w-3/4">
+                <div class="flex flex-row">
+                    <div class="w-14">
+                        <div class="upload-avatar-overlay w-12 h-12 flex items-center justify-start rounded-lg">
+                            <img src={{this.supplier.logo_url}} alt={{this.supplier.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                            <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                                <InputInfo @text="Upload new photo" />
+                            </Attach::Tooltip>
+                            <div class="upload-avatar-button-wrapper rounded-lg">
+                                <UploadButton
+                                    @name="photos"
+                                    @accept="image/*"
+                                    @onFileAdded={{this.onUploadNewPhoto}}
+                                    @icon="upload"
+                                    @hideButtonText={{true}}
+                                    @labelClass="upload-avatar-label-overlay"
+                                    class="w-12 btn-reset"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex flex-col">
+                        <h1 class="text-gray-900 dark:text-white text-2xl">
+                            {{#if this.supplier.id}}
+                                {{this.supplier.name}}
+                            {{else}}
+                                {{#if this.supplier.name}}
+                                    {{this.supplier.name}}
+                                {{else}}
+                                    <span>New Supplier</span>
+                                {{/if}}
+                            {{/if}}
+                        </h1>
+                        <div class="-mt-1">
+                            <div class="flex flex-row items-center">
+                                <span class="text-sm dark:text-blue-400 text-blue-600">{{n-a (smart-humanize this.supplier.type)}}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-end w-1/4">
+                <Badge @status={{this.supplier.status}} @type="info" @hideStatusDot={{true}} />
+            </div>
+        </div>
+    </Overlay::Header>
+
+    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
+        {{#if this.isEditing}}
+            <SupplierFormPanel::EditForm
+                @supplier={{this.supplier}}
+                @supplierTypes={{this.supplierTypeOptions}}
+                @supplierStatusOptions={{this.supplierStatusOptions}}
+                @onSupplierChanged={{this.onSupplierChanged}}
+            />
+        {{else}}
+            <SupplierFormPanel::CreateForm
+                @supplier={{this.supplier}}
+                @supplierTypes={{this.supplierTypeOptions}}
+                @supplierStatusOptions={{this.supplierStatusOptions}}
+                @onSupplierChanged={{this.onSupplierChanged}}
+            />
+        {{/if}}
+    </Overlay::Body>
+</Overlay>
\ No newline at end of file
diff --git a/addon/components/supplier-form-panel.js b/addon/components/supplier-form-panel.js
index cc999a97..ade5000a 100644
--- a/addon/components/supplier-form-panel.js
+++ b/addon/components/supplier-form-panel.js
@@ -1,3 +1,190 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import contextComponentCallback from '../utils/context-component-callback';
+import applyContextComponentArguments from '../utils/apply-context-component-arguments';
+import getSupplierTypeOptions from '../utils/get-supplier-type-options';
+import getSupplierStatusOptions from '../utils/get-supplier-status-options';
 
-export default class SupplierFormPanelComponent extends Component {}
+export default class SupplierFormPanelComponent extends Component {
+    /**
+     * @service store
+     */
+    @service store;
+
+    /**
+     * @service fetch
+     */
+    @service fetch;
+
+    /**
+     * @service currentUser
+     */
+    @service currentUser;
+
+    /**
+     * @service notifications
+     */
+    @service notifications;
+
+    /**
+     * @service hostRouter
+     */
+    @service hostRouter;
+
+    /**
+     * @service loader
+     */
+    @service loader;
+
+    /**
+     * @service contextPanel
+     */
+    @service contextPanel;
+
+    /**
+     * Overlay context.
+     * @type {any}
+     */
+    @tracked context;
+
+    /**
+     * Indicates whether the component is in a loading state.
+     * @type {boolean}
+     */
+    @tracked isLoading = false;
+
+    /**
+     * The users supplier instance.
+     * @type {SupplierModel|IntegratedSupplierModel}
+     */
+    @tracked supplier;
+
+    /**
+     * Specific types of suppliers which can be set as the type.
+     *
+     * @memberof SupplierFormPanelComponent
+     */
+    @tracked supplierTypeOptions = getSupplierTypeOptions();
+
+    /**
+     * Applicable status options for supplier.
+     *
+     * @memberof SupplierFormPanelComponent
+     */
+    @tracked supplierStatusOptions = getSupplierStatusOptions();
+
+    /**
+     * Constructs the component and applies initial state.
+     */
+    constructor() {
+        super(...arguments);
+        this.supplier = this.args.supplier;
+        this.isEditing = typeof this.supplier.id === 'string';
+        applyContextComponentArguments(this);
+    }
+
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
+    }
+
+    /**
+     * Saves the supplier changes.
+     *
+     * @action
+     * @returns {Promise<any>}
+     */
+    @action save() {
+        const { supplier } = this;
+
+        this.loader.showLoader('.next-content-overlay-panel-container', { loadingMessage: 'Saving supplier...', preserveTargetPosition: true });
+        this.isLoading = true;
+
+        contextComponentCallback(this, 'onBeforeSave', supplier);
+
+        try {
+            return supplier
+                .save()
+                .then((supplier) => {
+                    this.notifications.success(`Supplier (${supplier.displayName}) saved successfully.`);
+                    contextComponentCallback(this, 'onAfterSave', supplier);
+                })
+                .catch((error) => {
+                    this.notifications.serverError(error);
+                })
+                .finally(() => {
+                    this.loader.removeLoader('.next-content-overlay-panel-container ');
+                    this.isLoading = false;
+                });
+        } catch (error) {
+            this.loader.removeLoader('.next-content-overlay-panel-container ');
+            this.isLoading = false;
+        }
+    }
+
+    /**
+     * Uploads a new logo for the supplier.
+     *
+     * @param {File} file
+     * @memberof DriverFormPanelComponent
+     */
+    @action onUploadNewPhoto(file) {
+        this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `uploads/${this.currentUser.companyId}/suppliers/${this.supplier.id}`,
+                subject_uuid: this.supplier.id,
+                subject_type: 'supplier',
+                type: 'supplier_logo',
+            },
+            (uploadedFile) => {
+                this.supplier.setProperties({
+                    logo_uuid: uploadedFile.id,
+                    logo_url: uploadedFile.url,
+                    logo: uploadedFile,
+                });
+            }
+        );
+    }
+
+    /**
+     * Handle when supplier changed.
+     *
+     * @param {SupplierModel} supplier
+     * @memberof SupplierFormPanelComponent
+     */
+    @action onSupplierChanged(supplier) {
+        this.supplier = supplier;
+    }
+
+    /**
+     * View the details of the supplier.
+     *
+     * @action
+     */
+    @action onViewDetails() {
+        const isActionOverrided = contextComponentCallback(this, 'onViewDetails', this.supplier);
+
+        if (!isActionOverrided) {
+            this.contextPanel.focus(this.supplier, 'viewing');
+        }
+    }
+
+    /**
+     * Handles cancel button press.
+     *
+     * @action
+     * @returns {any}
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel', this.supplier);
+    }
+}
diff --git a/addon/components/supplier-form-panel/create-form.hbs b/addon/components/supplier-form-panel/create-form.hbs
new file mode 100644
index 00000000..bf7f7f43
--- /dev/null
+++ b/addon/components/supplier-form-panel/create-form.hbs
@@ -0,0 +1,175 @@
+<div class="space-y-4">
+    <ContentPanel @title="Setup" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+        <InputGroup @name="Select supplier type">
+            <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                <PowerSelect
+                    @options={{this.supplierTypes}}
+                    @selected={{this.selectedSupplierType}}
+                    @onChange={{this.onSelectSupplierType}}
+                    @placeholder="Select supplier type"
+                    @triggerClass="form-select form-input"
+                    as |supplierType|
+                >
+                    {{supplierType.label}}
+                </PowerSelect>
+            </div>
+        </InputGroup>
+        {{#if (eq this.selectedSupplierType.value "integrated-supplier")}}
+            <InputGroup @name="Choose integrated supplier provider">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{this.supportedIntegratedSuppliers}}
+                        @selected={{this.selectedIntegratedSupplier}}
+                        @onChange={{this.onSelectIntegratedSupplier}}
+                        @placeholder="Select integrated supplier provider"
+                        @triggerClass="form-select form-input"
+                        as |integratedSupplier|
+                    >
+                        <div class="flex flex-row items-center">
+                            <Image src={{integratedSupplier.logo}} alt={{integratedSupplier.code}} class="w-4 h-4" width="16" height="16" />
+                            <h3 class="text-sm ml-4 dark:text-white">{{integratedSupplier.name}}</h3>
+                        </div>
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+        {{/if}}
+    </ContentPanel>
+    {{#if this.selectedSupplierType.value}}
+        {{#if (eq this.selectedSupplierType.value "integrated-supplier")}}
+            {{#if this.selectedIntegratedSupplier}}
+                <ContentPanel @title="Provider" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                    <div class="flex flex-row items-center">
+                        <img src={{this.selectedIntegratedSupplier.logo}} alt={{this.selectedIntegratedSupplier.code}} class="w-12 h-12" width="48" height="48" />
+                        <h3 class="text-base text-black dark:text-white ml-4">{{this.selectedIntegratedSupplier.name}}</h3>
+                    </div>
+                </ContentPanel>
+                <ContentPanel @title="Credentials" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                    {{#each this.selectedIntegratedSupplier.credential_params as |param|}}
+                        <InputGroup
+                            @name={{smart-humanize param.key}}
+                            @value={{mut (get this.integratedSupplier.credentials param.key)}}
+                            @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this supplier."}}
+                        />
+                    {{/each}}
+                </ContentPanel>
+                <ContentPanel @title="Options" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                    {{#each this.selectedIntegratedSupplier.option_params as |param|}}
+                        {{#if param.options}}
+                            <InputGroup @name={{smart-humanize param.key}}>
+                                <Select
+                                    @value={{mut (get this.integratedSupplier.options param.key)}}
+                                    @options={{param.options}}
+                                    @optionValue={{param.optionValue}}
+                                    @optionLabel={{param.optionLabel}}
+                                    @humanize={{true}}
+                                    @placeholder={{concat "Select " (smart-humanize param.key)}}
+                                    @onSelect={{fn (mut (get this.integratedSupplier.options param.key))}}
+                                />
+                            </InputGroup>
+                        {{else}}
+                            <InputGroup
+                                @name={{smart-humanize param.key}}
+                                @value={{mut (get this.integratedSupplier.options param.key)}}
+                                @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this supplier."}}
+                            />
+                        {{/if}}
+                    {{/each}}
+                    <InputGroup>
+                        <Checkbox @value={{this.integratedSupplier.sandbox}} @label="Sandbox" @onToggle={{fn (mut this.integratedSupplier.sandbox)}} @alignItems="center" @labelClass="mb-0i" />
+                    </InputGroup>
+                </ContentPanel>
+                <ContentPanel @title="Advanced Options" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                    <div>
+                        <a href="javascript:;" class="text-blue-600 underline text-sm" {{on "click" this.toggleAdvancedOptions}}>{{if
+                                this.showAdvancedOptions
+                                "Hide Advanced Options"
+                                "Show Advanced Options"
+                            }}</a>
+                    </div>
+                    {{#if this.showAdvancedOptions}}
+                        <div class="mt-4">
+                            <InputGroup @name="Custom Host" @value={{this.integratedSupplier.host}} @helpText="Optionally provide a custom host that should be used for this integration." />
+                            <InputGroup
+                                @name="Custom Namespace"
+                                @value={{this.integratedSupplier.namespace}}
+                                @helpText="Optionally provide a custom namespace or api version that should be used for the integration."
+                            />
+                            <InputGroup
+                                @name="Webhook URL"
+                                @value={{this.integratedSupplier.webhook_url}}
+                                @helpText="Integrated suppliers will typically require this so that Fleetbase can receive activity updates on the order. Do not change unless you know what you are doing! Changing this may break your order updates!"
+                            />
+                        </div>
+                    {{/if}}
+                </ContentPanel>
+            {{else}}
+                <div class="flex items-center justify-center border-2 border-dashed h-32 w-full rounded-md dark:border-gray-700 border-gray-200">
+                    <h3 class="text-gray-800 dark:text-gray-400 italic text-sm">Select an integrated supplier provider.</h3>
+                </div>
+            {{/if}}
+        {{else}}
+            <ContentPanel @title="Supplier Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <InputGroup @name="Name" @value={{this.supplier.name}} @helpText="The supplier's name, typically the name of a business." />
+                <InputGroup @name="Email" @type="email" @value={{this.supplier.email}} @helpText="The supplier's email, this can be used to trigger emails to the supplier." />
+                <InputGroup @name="Phone" @type="tel" @value={{this.supplier.phone}} @helpText="The supplier's phone #, this can be used to trigger SMS or messages to the supplier." />
+                <InputGroup @name="Website" @value={{this.supplier.website_url}} @helpText="The supplier's website, optionally add the suppliers website for reference." />
+                <InputGroup @name="Type">
+                    <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                        <PowerSelect
+                            @options={{@supplierTypes}}
+                            @selected={{this.supplier.type}}
+                            @onChange={{fn (mut this.supplier.type)}}
+                            @placeholder="Select supplier type"
+                            @triggerClass="form-select form-input"
+                            as |type|
+                        >
+                            {{smart-humanize type}}
+                        </PowerSelect>
+                    </div>
+                </InputGroup>
+                <InputGroup @name="Status">
+                    <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                        <PowerSelect
+                            @options={{@supplierStatusOptions}}
+                            @selected={{this.supplier.status}}
+                            @onChange={{fn (mut this.supplier.status)}}
+                            @placeholder="Select supplier status"
+                            @triggerClass="form-select form-input"
+                            as |status|
+                        >
+                            {{smart-humanize status}}
+                        </PowerSelect>
+                    </div>
+                </InputGroup>
+                <InputGroup @wrapperClass="col-span-2">
+                    <div class="flex items-center justify-between">
+                        <label>
+                            Address
+                        </label>
+                        <div class="mb-1.5 flex flex-row">
+                            <Button @type="default" @size="xs" @icon="edit" @text={{if this.supplier.has_place "Edit" "New Address"}} @onClick={{this.editAddress}} />
+                        </div>
+                    </div>
+                    <ModelSelect
+                        @modelName="warehouse"
+                        @selectedModel={{this.supplier.warehouse}}
+                        @placeholder="Select Address"
+                        @triggerClass="form-select form-input"
+                        @infiniteScroll={{false}}
+                        @renderInPlace={{true}}
+                        @onChange={{this.selectSupplierAddress}}
+                        as |model|
+                    >
+                        <div class="flex items-center flex-row justify-between">
+                            <div class="truncate flex-1">{{n-a model.address}}</div>
+                            <Badge @hideStatusDot={{true}} @status="info">{{model.public_id}}</Badge>
+                        </div>
+                    </ModelSelect>
+                </InputGroup>
+                <InputGroup @name="Country">
+                    <CountrySelect class="w-full form-input form-select form-datalist" @value={{this.supplier.country}} @onChange={{fn (mut this.supplier.country)}} placeholder="Country" />
+                </InputGroup>
+            </ContentPanel>
+        {{/if}}
+    {{/if}}
+</div>
\ No newline at end of file
diff --git a/addon/components/supplier-form-panel/create-form.js b/addon/components/supplier-form-panel/create-form.js
new file mode 100644
index 00000000..357e1cce
--- /dev/null
+++ b/addon/components/supplier-form-panel/create-form.js
@@ -0,0 +1,158 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+import apiUrl from '@fleetbase/ember-core/utils/api-url';
+import contextComponentCallback from '../../utils/context-component-callback';
+
+export default class SupplierFormPanelCreateFormComponent extends Component {
+    /**
+     * @service store
+     */
+    @service store;
+
+    /**
+     * @service fetch
+     */
+    @service fetch;
+
+    /**
+     * @service contextPanel
+     */
+    @service contextPanel;
+    /**
+     * State of whether editing credentials is enabled.
+     * @type {Boolean}
+     */
+    @tracked isEditingCredentials = false;
+
+    /**
+     * State of whether to show advanced options for integrated supplier.
+     * @type {Boolean}
+     */
+    @tracked showAdvancedOptions = false;
+
+    /**
+     * The selectable types of suppliers.
+     * @type {Array}
+     */
+    @tracked supplierTypes = [
+        { label: 'Choose a integrated supplier', value: 'integrated-supplier' },
+        { label: 'Create a custom supplier', value: 'supplier' },
+    ];
+
+    /**
+     * The selected type of supplier being created or edited.
+     * @type {String}
+     */
+    @tracked selectedSupplierType = this.supplierTypes[1];
+
+    /**
+     * The supported integrated suppliers.
+     * @type {Array}
+     */
+    @tracked supportedIntegratedSuppliers = [];
+
+    /**
+     * The selected integrated supplier provider.
+     * @type {Object}
+     */
+    @tracked selectedIntegratedSupplier;
+
+    constructor() {
+        super(...arguments);
+        this.supplier = this.args.supplier;
+        this.fetchSupportedIntegratedSuppliers();
+    }
+
+    @action toggleCredentialsReset() {
+        if (this.isEditingCredentials) {
+            this.isEditingCredentials = false;
+        } else {
+            this.isEditingCredentials = true;
+        }
+    }
+
+    @action toggleAdvancedOptions() {
+        if (this.showAdvancedOptions) {
+            this.showAdvancedOptions = false;
+        } else {
+            this.showAdvancedOptions = true;
+        }
+    }
+
+    @action onSelectSupplierType(selectedSupplierType) {
+        this.selectedSupplierType = selectedSupplierType;
+    }
+
+    @action onSelectIntegratedSupplier(integratedSupplier) {
+        this.selectedIntegratedSupplier = integratedSupplier;
+        const { credential_params, option_params } = integratedSupplier;
+
+        // create credentials object
+        const credentials = {};
+        if (isArray(integratedSupplier.credential_params)) {
+            for (let i = 0; i < integratedSupplier.credential_params.length; i++) {
+                const param = integratedSupplier.credential_params.objectAt(i);
+                credentials[param] = null;
+            }
+        }
+
+        // create options object
+        const options = {};
+        if (isArray(integratedSupplier.option_params)) {
+            for (let i = 0; i < integratedSupplier.option_params.length; i++) {
+                const param = integratedSupplier.option_params.objectAt(i);
+                options[param.key] = null;
+            }
+        }
+
+        const supplier = this.store.createRecord('integrated-supplier', {
+            provider: integratedSupplier.code,
+            webhook_url: apiUrl(`listeners/${integratedSupplier.code}`),
+            credentials: {},
+            options: {},
+            credential_params,
+            option_params,
+        });
+
+        this.supplier = supplier;
+
+        // trigger callback
+        contextComponentCallback(this, 'onSupplierChanged', supplier);
+    }
+
+    @action selectSupplierAddress(warehouse) {
+        this.supplier.warehouse = warehouse;
+        this.supplier.warehouse_uuid = warehouse.id;
+    }
+
+    @action async editAddress() {
+        let warehouse;
+
+        if (this.supplier.has_warehouse) {
+            warehouse = await this.supplier.warehouse;
+        } else {
+            warehouse = this.store.createRecord('warehouse');
+        }
+
+        return this.contextPanel.focus(warehouse, 'editing', {
+            onAfterSave: (warehouse) => {
+                this.supplier.warehouse = warehouse;
+                this.contextPanel.clear();
+            },
+        });
+    }
+
+    /**
+     * Fetches the supported integrated suppliers.
+     *
+     * @returns {Promise}
+     */
+    fetchSupportedIntegratedSuppliers() {
+        return this.fetch.get('integrated-suppliers/supported').then((supportedIntegratedSuppliers) => {
+            this.supportedIntegratedSuppliers = supportedIntegratedSuppliers;
+        });
+    }
+}
diff --git a/addon/components/supplier-form-panel/edit-form.hbs b/addon/components/supplier-form-panel/edit-form.hbs
new file mode 100644
index 00000000..593101a7
--- /dev/null
+++ b/addon/components/supplier-form-panel/edit-form.hbs
@@ -0,0 +1,98 @@
+<div class="space-y-4">
+    {{#if this.isIntegratedSupplier}}
+        <ContentPanel @title="Provider" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+            <div class="flex flex-row items-center">
+                <img src={{this.supplier.provider_settings.logo}} alt={{this.supplier.provider_settings.code}} class="w-12 h-12" width="48" height="48" />
+                <h3 class="text-base text-black dark:text-white ml-4">{{this.supplier.provider_settings.name}}</h3>
+            </div>
+        </ContentPanel>
+        <ContentPanel @title="Credentials" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+            {{#if this.isEditingCredentials}}
+                {{#each this.supplier.provider_settings.credential_params as |param|}}
+                    <InputGroup @name={{smart-humanize param.key}} @value={{mut (get this.supplier.credentials param.key)}} @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this supplier."}} />
+                {{/each}}
+                <div class="mt-4">
+                    <a href="javascript:;" class="text-red-600 underline text-sm" {{on "click" this.toggleCredentialsReset}}>Cancel credentials reset</a>
+                </div>
+            {{else}}
+                <div class="rounded-md border shadow-sm border-gray-200 text-black bg-white dark:border-gray-700 dark:bg-gray-900 dark:text-white text-xs px-3 py-2 mb-4 mt-2">
+                    <p class="mb-2">Sensitive credentials can only be reset, to update credentials you must re-enter the credentials.</p>
+                    <a href="javascript:;" class="text-red-600 underline text-sm" {{on "click" this.toggleCredentialsReset}}>Click here to reset credentials</a>
+                </div>
+                <div>
+                    {{#each this.supplier.provider_settings.credential_params as |param|}}
+                        <InputGroup @name={{smart-humanize param.key}} @value="*********" @disabled="true" @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this supplier."}} />
+                    {{/each}}
+                </div>
+            {{/if}}
+        </ContentPanel>
+        <ContentPanel @title="Options" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+            {{#each this.supplier.provider_settings.option_params as |param|}}
+                {{#if param.options}}
+                    <InputGroup @name={{smart-humanize param.key}}>
+                        <Select @value={{mut (get this.supplier.options param.key)}} @options={{param.options}} @optionValue={{param.optionValue}} @optionLabel={{param.optionLabel}} @humanize={{true}} @placeholder={{concat "Select " (smart-humanize param.key)}} @onSelect={{fn (mut (get this.supplier.options param.key))}} />
+                    </InputGroup>
+                {{else}}
+                    <InputGroup @name={{smart-humanize param.key}} @value={{mut (get this.supplier.options param.key)}} @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this supplier."}} />
+                {{/if}}
+            {{/each}}
+            <InputGroup>
+                <Checkbox @value={{this.supplier.sandbox}} @label="Sandbox" @onToggle={{fn (mut this.supplier.sandbox)}} @alignItems="center" @labelClass="mb-0i" />
+            </InputGroup>
+        </ContentPanel>
+        <ContentPanel @title="Advanced Options" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+            <div>
+                <a href="javascript:;" class="text-blue-600 underline text-sm" {{on "click" this.toggleAdvancedOptions}}>{{if
+                        this.showAdvancedOptions
+                        "Hide Advanced Options"
+                        "Show Advanced Options"
+                    }}</a>
+            </div>
+            {{#if this.showAdvancedOptions}}
+                <div class="mt-4">
+                    <InputGroup @name="Custom Host" @value={{this.supplier.host}} @helpText="Optionally provide a custom host that should be used for this integration." />
+                    <InputGroup @name="Custom Namespace" @value={{this.supplier.namespace}} @helpText="Optionally provide a custom namespace or api version that should be used for the integration." />
+                    <InputGroup @name="Webhook URL" @value={{this.supplier.webhook_url}} @helpText="Integrated suppliers will typically require this so that Fleetbase can receive activity updates on the order. Do not change unless you know what you are doing! Changing this may break your order updates!" />
+                </div>
+            {{/if}}
+        </ContentPanel>
+    {{else}}
+        <InputGroup @name="Name" @value={{this.supplier.name}} @helpText="The supplier's name, typically the name of a business." />
+        <InputGroup @name="Email" @type="email" @value={{this.supplier.email}} @helpText="The supplier's email, this can be used to trigger emails to the supplier." />
+        <InputGroup @name="Phone" @type="tel" @value={{this.supplier.phone}} @helpText="The supplier's phone #, this can be used to trigger SMS or messages to the supplier." />
+        <InputGroup @name="Website" @value={{this.supplier.website_url}} @helpText="The supplier's website, optionally add the suppliers website for reference." />
+        <InputGroup @name="Type">
+            <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                <PowerSelect @options={{@supplierTypes}} @selected={{this.supplier.type}} @onChange={{fn (mut this.supplier.type)}} @placeholder="Select supplier type" @triggerClass="form-select form-input" as |type|>
+                    {{smart-humanize type}}
+                </PowerSelect>
+            </div>
+        </InputGroup>
+        <InputGroup @name="Status">
+            <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                <PowerSelect @options={{@supplierStatusOptions}} @selected={{this.supplier.status}} @onChange={{fn (mut this.supplier.status)}} @placeholder="Select supplier status" @triggerClass="form-select form-input" as |status|>
+                    {{smart-humanize status}}
+                </PowerSelect>
+            </div>
+        </InputGroup>
+        <InputGroup @wrapperClass="col-span-2">
+            <div class="flex items-center justify-between">
+                <label>
+                    Address
+                </label>
+                <div class="mb-1.5 flex flex-row">
+                    <Button @type="default" @size="xs" @icon="edit" @text={{if this.supplier.has_warehouse "Edit" "New Address"}} @onClick={{this.editAddress}} />
+                </div>
+            </div>
+            <ModelSelect @modelName="warehouse" @selectedModel={{this.supplier.warehouse}} @placeholder="Select Address" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.selectSupplierAddress}} as |model|>
+                <div class="flex items-center flex-row justify-between">
+                    <div class="truncate flex-1">{{n-a model.address}}</div>
+                    <Badge @hideStatusDot={{true}} @status="info">{{model.public_id}}</Badge>
+                </div>
+            </ModelSelect>
+        </InputGroup>
+        <InputGroup @name="Country">
+            <CountrySelect class="w-full form-input form-select form-datalist" @value={{this.supplier.country}} @onChange={{fn (mut this.supplier.country)}} placeholder="Country" />
+        </InputGroup>
+    {{/if}}
+</div>
\ No newline at end of file
diff --git a/addon/components/supplier-form-panel/edit-form.js b/addon/components/supplier-form-panel/edit-form.js
new file mode 100644
index 00000000..98308920
--- /dev/null
+++ b/addon/components/supplier-form-panel/edit-form.js
@@ -0,0 +1,51 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object'
+
+export default class SupplierFormPanelEditFormComponent extends Component {
+    @service store;
+    @service contextPanel;
+    @tracked isIntegratedSupplier;
+    @tracked isEditingCredentials = false;
+    @tracked showAdvancedOptions = false;
+
+    constructor() {
+        super(...arguments);
+        this.supplier = this.args.supplier;
+        this.isIntegratedSupplier = this.supplier && this.supplier.type === 'integrated-supplier';
+    }
+
+    @action toggleCredentialsReset() {
+        if (this.isEditingCredentials) {
+            this.isEditingCredentials = false;
+        } else {
+            this.isEditingCredentials = true;
+        }
+    }
+
+    @action toggleAdvancedOptions() {
+        if (this.showAdvancedOptions) {
+            this.showAdvancedOptions = false;
+        } else {
+            this.showAdvancedOptions = true;
+        }
+    }
+
+    @action selectSupplierAddress(warehouse) {
+        this.supplier.warehouse = warehouse;
+        this.supplier.warehouse_uuid = warehouse.id;
+    }
+
+    @action async editAddress() {
+        let warehouse;
+
+        if (this.supplier.has_warehouse) {
+            warehouse = await this.supplier.warehouse;
+        } else {
+            warehouse = this.store.createRecord('warehouse');
+        }
+
+        return this.contextPanel.focus(warehouse);
+    }
+}
diff --git a/addon/components/supplier-panel.hbs b/addon/components/supplier-panel.hbs
index fb5c4b15..e9047e88 100644
--- a/addon/components/supplier-panel.hbs
+++ b/addon/components/supplier-panel.hbs
@@ -1 +1,72 @@
-{{yield}}
\ No newline at end of file
+<Overlay
+    @onLoad={{this.setOverlayContext}}
+    @position="right"
+    @noBackdrop={{true}}
+    @fullHeight={{true}}
+    @isResizable={{or this.isResizable @isResizable}}
+    @width={{or this.width @width "600px"}}
+>
+    <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i">
+        <div class="flex flex-row items-center justify-between w-full mb-4">
+            <div class="flex flex-1 space-x-2">
+                <Button @type="default" @icon="pen" @helpText="Edit supplier" @onClick={{this.onEdit}} />
+            </div>
+            <div class="flex flex-1 justify-end">
+                <Button @type="default" @icon="times" @helpText="Close supplier details" @onClick={{this.onPressCancel}} />
+            </div>
+        </div>
+        <div class="flex flex-row justify-between w-full">
+            <div class="flex flex-1 flex-row">
+                <div class="w-14">
+                    <div class="w-12 h-12 flex items-center justify-start rounded-lg">
+                        <Image
+                            src={{this.supplier.logo_url}}
+                            @fallbackSrc={{config "defaultValues.supplierImage"}}
+                            alt={{this.supplier.name}}
+                            height="48"
+                            width="48"
+                            class="h-12 w-12 rounded-lg shadow-sm"
+                        />
+                        <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                            <InputInfo @text={{this.supplier.name}} />
+                        </Attach::Tooltip>
+                    </div>
+                </div>
+                <div class="flex flex-col">
+                    <h1 class="text-gray-900 dark:text-white text-2xl">
+                        {{#if this.supplier.id}}
+                            {{this.supplier.name}}
+                        {{else}}
+                            <span>New Supplier</span>
+                        {{/if}}
+                    </h1>
+                    <div class="-mt-1">
+                        <div class="flex flex-row items-center">
+                            <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{n-a (smart-humanize this.supplier.type)}}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-end">
+                <Badge @status={{this.supplier.status}} />
+            </div>
+        </div>
+    </Overlay::Header>
+    <Overlay::Body class="no-padding" @increaseInnerBodyHeightBy={{1000}}>
+        <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">
+            <div class="ui-tabs mt-4">
+                <nav>
+                    {{#each this.tabs as |tab|}}
+                        <a href="javascript:;" class="ui-tab {{if (eq this.tab.slug tab.slug) 'active'}}" {{on "click" (fn this.onTabChanged tab.slug)}}>
+                            <FaIcon @icon={{tab.icon}} class="mr-1" />
+                            <span>{{tab.title}}</span>
+                        </a>
+                    {{/each}}
+                </nav>
+            </div>
+        </div>
+        <div class="tab-content tab-{{this.tab.slug}}">
+            {{component this.tab.component supplier=this.supplier tabOptions=this.tab params=this.tab.componentParams}}
+        </div>
+    </Overlay::Body>
+</Overlay>
\ No newline at end of file
diff --git a/addon/components/supplier-panel.js b/addon/components/supplier-panel.js
index b62b72b8..3dab5047 100644
--- a/addon/components/supplier-panel.js
+++ b/addon/components/supplier-panel.js
@@ -1,3 +1,161 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { isArray } from '@ember/array';
+import SupplierPanelDetailComponent from './supplier-panel/details';
+import contextComponentCallback from '../utils/context-component-callback';
+import applyContextComponentArguments from '../utils/apply-context-component-arguments';
 
-export default class SupplierPanelComponent extends Component {}
+export default class SupplierPanelComponent extends Component {
+    /**
+     * Service for fetching data.
+     *
+     * @type {Service}
+     */
+    @service fetch;
+
+    /**
+     * Service for managing modals.
+     *
+     * @type {Service}
+     */
+    @service modalsManager;
+
+    /**
+     * Universe service for managing global data and settings.
+     *
+     * @type {Service}
+     */
+    @service universe;
+
+    /**
+     * Ember data store service.
+     *
+     * @type {Service}
+     */
+    @service store;
+
+    /**
+     * Service for managing routing within the host app.
+     *
+     * @type {Service}
+     */
+    @service hostRouter;
+
+    /**
+     * Service for managing the context panel.
+     *
+     * @type {Service}
+     */
+    @service contextPanel;
+
+    /**
+     * The current active tab.
+     *
+     * @type {Object}
+     * @tracked
+     */
+    @tracked tab;
+
+    /**
+     * The supplier being displayed or edited.
+     *
+     * @type {SupplierModel}
+     * @tracked
+     */
+    @tracked supplier;
+
+    /**
+     * Returns the array of tabs available for the panel.
+     *
+     * @type {Array}
+     */
+    get tabs() {
+        const registeredTabs = this.universe.getMenuItemsFromRegistry('component:supplier-panel');
+        // this.universe._createMenuItem('Tracking', null, { icon: 'satellite-dish', component: SupplierPanelTrackingComponent }),
+        const defaultTabs = [this.universe._createMenuItem('Details', null, { icon: 'circle-info', component: SupplierPanelDetailComponent })];
+
+        if (isArray(registeredTabs)) {
+            return [...defaultTabs, ...registeredTabs];
+        }
+
+        return defaultTabs;
+    }
+
+    /**
+     * Initializes the supplier panel component.
+     */
+    constructor() {
+        super(...arguments);
+        this.supplier = this.args.supplier;
+        this.tab = this.getTabUsingSlug(this.args.tab);
+        applyContextComponentArguments(this);
+    }
+
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
+    }
+
+    /**
+     * Handles changing the active tab.
+     *
+     * @method
+     * @param {String} tab - The new tab to switch to.
+     * @action
+     */
+    @action onTabChanged(tab) {
+        this.tab = this.getTabUsingSlug(tab);
+        contextComponentCallback(this, 'onTabChanged', tab);
+    }
+
+    /**
+     * Handles edit action for the supplier.
+     *
+     * @method
+     * @action
+     */
+    @action onEdit() {
+        const isActionOverrided = contextComponentCallback(this, 'onEdit', this.supplier);
+
+        if (!isActionOverrided) {
+            this.contextPanel.focus(this.supplier, 'editing', {
+                onAfterSave: () => {
+                    this.contextPanel.clear();
+                },
+            });
+        }
+    }
+
+    /**
+     * Handles the cancel action.
+     *
+     * @method
+     * @action
+     * @returns {Boolean} Indicates whether the cancel action was overridden.
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel', this.supplier);
+    }
+
+    /**
+     * Finds and returns a tab based on its slug.
+     *
+     * @param {String} tabSlug - The slug of the tab.
+     * @returns {Object|null} The found tab or null.
+     */
+    getTabUsingSlug(tabSlug) {
+        if (tabSlug) {
+            return this.tabs.find(({ slug }) => slug === tabSlug);
+        }
+
+        return this.tabs[0];
+    }
+}
diff --git a/addon/components/supplier-panel/details.hbs b/addon/components/supplier-panel/details.hbs
index e69de29b..600d6f02 100644
--- a/addon/components/supplier-panel/details.hbs
+++ b/addon/components/supplier-panel/details.hbs
@@ -0,0 +1,77 @@
+<div class="p-4">
+    <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
+        {{#if this.isIntegratedSupplier}}
+            <div class="integrated-supplier-button border-0 mb-4">
+                <div>
+                    <img src={{this.supplier.provider_settings.logo}} alt={{this.supplier.provider_settings.code}} class="w-20 h-20" width="80" height="80" />
+                </div>
+                <div>
+                    <h3 class="text-sm font-semibold dark:text-white">{{this.supplier.provider_settings.name}}</h3>
+                </div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs dark:text-gray-100">
+                <div class="field-info-container">
+                    <div class="field-name">Sandbox</div>
+                    <div class="field-value">{{if this.supplier.sandbox "Yes" "No"}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Host</div>
+                    <div class="field-value">{{n-a this.supplier.host}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Namespace</div>
+                    <div class="field-value">{{n-a this.supplier.namespace}}</div>
+                </div>
+                {{#if (is-object this.supplier.options)}}
+                    {{#each-in this.supplier.options as |key value|}}
+                        <div class="field-info-container">
+                            <div class="field-name">{{smart-humanize key}}</div>
+                            <div class="field-value">{{n-a value}}</div>
+                        </div>
+                    {{/each-in}}
+                {{/if}}
+            </div>
+        {{else}}
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
+                <div class="field-info-container">
+                    <div class="field-name">Name</div>
+                    <div class="field-value">{{n-a this.supplier.name}}</div>
+                </div>
+
+                <div class="field-info-container">
+                    <div class="field-name">Email</div>
+                    <div class="field-value">{{n-a this.supplier.email}}</div>
+                </div>
+
+                <div class="field-info-container">
+                    <div class="field-name">Phone</div>
+                    <div class="field-value">{{n-a this.supplier.phone}}</div>
+                </div>
+
+                <div class="field-info-container">
+                    <div class="field-name">Website URL</div>
+                    <div class="field-value">{{n-a this.supplier.website_url}}</div>
+                </div>
+
+                <div class="field-info-container">
+                    <div class="field-name">Country</div>
+                    <div class="field-value">
+                        <CountryName @country={{this.supplier.country}} @showFlag={{true}} />
+                    </div>
+                </div>
+
+                <div class="field-info-container">
+                    <div class="field-name">Status</div>
+                    <div class="field-value">
+                        <Badge @status={{this.supplier.status}} />
+                    </div>
+                </div>
+
+                <div class="field-info-container col-span-2">
+                    <div class="field-name">Address</div>
+                    <div class="field-value">{{n-a this.supplier.address}}</div>
+                </div>
+            </div>
+        {{/if}}
+    </ContentPanel>
+</div>
\ No newline at end of file
diff --git a/addon/components/supplier-panel/details.js b/addon/components/supplier-panel/details.js
new file mode 100644
index 00000000..06183e39
--- /dev/null
+++ b/addon/components/supplier-panel/details.js
@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class SupplierPanelDetailsComponent extends Component {
+    @tracked isIntegratedVendor = false;
+    @tracked supplier;
+    constructor() {
+        super(...arguments);
+        this.supplier = this.args.supplier;
+        this.isIntegratedVendor = this.supplier && this.supplier.type === 'integrated-supplier';
+    }
+}
diff --git a/addon/controllers/sales-orders/index.js b/addon/controllers/sales-orders/index.js
index 73f39826..b7b342d5 100644
--- a/addon/controllers/sales-orders/index.js
+++ b/addon/controllers/sales-orders/index.js
@@ -123,16 +123,6 @@ export default class SalesOrdersIndexController extends Controller {
             filterable: true,
             filterComponent: 'filter/string',
         },
-        {
-            label: 'SKU',
-            valuePath: 'sku',
-            cellComponent: 'click-to-copy',
-            width: '120px',
-            resizable: true,
-            sortable: true,
-            filterable: true,
-            filterComponent: 'filter/string',
-        },
         {
             label: 'Created At',
             valuePath: 'createdAt',
@@ -221,9 +211,8 @@ export default class SalesOrdersIndexController extends Controller {
      * @param {Object} options
      * @void
      */
-    @action viewSalesOrder(salesOrder, options) {
-        // do code
-        console.log('viewSalesOrder()', salesOrder, options);
+    @action viewSalesOrder(salesOrder) {
+        return this.transitionToRoute('salesOrders.index.details',salesOrder);
     }
 
     /**
@@ -232,10 +221,8 @@ export default class SalesOrdersIndexController extends Controller {
      * @param {Object} options
      * @void
      */
-    @action createSalesOrder(options = {}) {
-        const salesOrder = this.store.createRecord('pallet-salesOrder');
-
-        return this.editSalesOrder(salesOrder, options);
+    @action createSalesOrder() {
+        return this.transitionToRoute('salesOrders.index.new');
     }
 
     /**
@@ -245,9 +232,8 @@ export default class SalesOrdersIndexController extends Controller {
      * @param {Object} options
      * @void
      */
-    @action async editSalesOrder(salesOrder, options = {}) {
-        // do code
-        console.log('editSalesOrder()', salesOrder, options);
+    @action async editSalesOrder(salesOrder) {
+        return this.transitionToRoute('salesOrders.index.edit',salesOrder);
     }
 
     /**
@@ -277,7 +263,7 @@ export default class SalesOrdersIndexController extends Controller {
 
         this.crud.bulkDelete(selected, {
             modelNamePath: `name`,
-            acceptButtonText: 'Delete SalesOrders',
+            acceptButtonText: 'Delete sales Orders',
             onSuccess: () => {
                 return this.hostRouter.refresh();
             },
diff --git a/addon/controllers/sales-orders/index/details.js b/addon/controllers/sales-orders/index/details.js
index f43c851f..704553b9 100644
--- a/addon/controllers/sales-orders/index/details.js
+++ b/addon/controllers/sales-orders/index/details.js
@@ -1,3 +1,55 @@
 import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
-export default class SalesOrdersIndexDetailsController extends Controller {}
+export default class SalesOrdersIndexDetailsController extends Controller {
+    /**
+     * The currently active view tab ('details' by default).
+     *
+     * @type {String}
+     * @tracked
+     */
+    @tracked view = 'details';
+
+    /**
+     * An array of query parameters to be serialized in the URL.
+     *
+     * @type {String[]}
+     * @tracked
+     */
+    @tracked queryParams = ['view'];
+
+    /**
+     * Transitions back to the "salesOrders.index" route.
+     *
+     * @method
+     * @action
+     * @returns {Transition} The transition object representing the route change.
+     */
+    @action transitionBack() {
+        return this.transitionToRoute('salesOrders.index');
+    }
+
+    /**
+     * Transitions to the edit view for a specific salesOrder.
+     *
+     * @method
+     * @param {salesOrderModel} salesOrder - The salesOrder to be edited.
+     * @action
+     * @returns {Transition} The transition object representing the route change.
+     */
+    @action onEdit(salesOrder) {
+        return this.transitionToRoute('salesOrders.index.edit', salesOrder);
+    }
+
+    /**
+     * Updates the active view tab.
+     *
+     * @method
+     * @param {String} tab - The name of the tab to activate.
+     * @action
+     */
+    @action onTabChanged(tab) {
+        this.view = tab;
+    }
+}
diff --git a/addon/controllers/sales-orders/index/edit.js b/addon/controllers/sales-orders/index/edit.js
index b9afa2c5..309d381a 100644
--- a/addon/controllers/sales-orders/index/edit.js
+++ b/addon/controllers/sales-orders/index/edit.js
@@ -1,3 +1,111 @@
 import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
-export default class SalesOrdersIndexEditController extends Controller {}
+export default class SalesOrdersIndexEditController extends Controller {
+    /**
+     * Inject the `hostRouter` service
+     *
+     * @memberof SalesOrdersIndexEditController
+     */
+    @service hostRouter;
+
+    /**
+     * Inject the `hostRouter` service
+     *
+     * @memberof SalesOrdersIndexEditController
+     */
+    @service modalsManager;
+
+    /**
+     * The overlay component context.
+     *
+     * @memberof SalesOrdersIndexEditController
+     */
+    @tracked overlay;
+
+    /**
+     * When exiting the overlay.
+     *
+     * @return {Transition}
+     * @memberof salesOrdersIndexEditController
+     */
+    @action transitionBack(salesOrder) {
+        // check if salesOrder record has been edited and prompt for confirmation
+        if (salesOrder.hasDirtyAttributes) {
+            return this.confirmContinueWithUnsavedChanges(salesOrder, {
+                confirm: () => {
+                    salesOrder.rollbackAttributes();
+                    return this.transitionToRoute('salesOrders.index');
+                },
+            });
+        }
+
+        return this.transitionToRoute('salesOrders.index');
+    }
+
+    /**
+     * Set the overlay component context object.
+     *
+     * @param {OverlayContext} overlay
+     * @memberof SalesOrdersIndexEditController
+     */
+    @action setOverlayContext(overlay) {
+        this.overlay = overlay;
+    }
+
+    /**
+     * When salesOrder details button is clicked in overlay.
+     *
+     * @param {SalesOrderModel} salesOrder
+     * @return {Promise}
+     * @memberof SalesOrdersIndexEditController
+     */
+    @action onViewDetails(salesOrder) {
+        // check if salesOrder record has been edited and prompt for confirmation
+        if (salesOrder.hasDirtyAttributes) {
+            return this.confirmContinueWithUnsavedChanges(salesOrder);
+        }
+
+        return this.transitionToRoute('salesOrders.index.details', salesOrder);
+    }
+
+    /**
+     * Trigger a route refresh and focus the new salesOrder created.
+     *
+     * @param {SalesOrderModel} salesOrder
+     * @return {Promise}
+     * @memberof SalesOrdersIndexEditController
+     */
+    @action onAfterSave(salesOrder) {
+        if (this.overlay) {
+            this.overlay.close();
+        }
+
+        this.hostRouter.refresh();
+        return this.transitionToRoute('salesOrders.index.details', salesOrder);
+    }
+
+    /**
+     * Prompts the user to confirm if they wish to continue with unsaved changes.
+     *
+     * @method
+     * @param {SalesOrderModel} salesOrder - The salesOrder object with unsaved changes.
+     * @param {Object} [options={}] - Additional options for configuring the modal.
+     * @returns {Promise} A promise that resolves when the user confirms, and transitions to a new route.
+     * @memberof SalesOrdersIndexEditController
+     */
+    confirmContinueWithUnsavedChanges(salesOrder, options = {}) {
+        return this.modalsManager.confirm({
+            title: 'Continue Without Saving?',
+            body: 'Unsaved changes to this salesOrder will be lost. Click continue to proceed.',
+            acceptButtonText: 'Continue without saving',
+            confirm: () => {
+                salesOrder.rollbackAttributes();
+                return this.transitionToRoute('salesOrders.index.details', salesOrder);
+            },
+            ...options,
+        });
+    }
+}
diff --git a/addon/controllers/sales-orders/index/new.js b/addon/controllers/sales-orders/index/new.js
index 8c1e5690..c89c71cc 100644
--- a/addon/controllers/sales-orders/index/new.js
+++ b/addon/controllers/sales-orders/index/new.js
@@ -1,3 +1,88 @@
 import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 
-export default class SalesOrdersIndexNewController extends Controller {}
+export default class SalesOrdersIndexNewController extends Controller {
+    /**
+     * Inject the `store` service
+     *
+     * @memberof SalesOrdersIndexNewController
+     */
+    @service store;
+
+    /**
+     * Inject the `hostRouter` service
+     *
+     * @memberof SalesOrdersIndexNewController
+     */
+    @service hostRouter;
+
+    /**
+     * Inject the `hostRouter` service
+     *
+     * @memberof SalesOrdersIndexNewController
+     */
+    @service modalsManager;
+
+    /**
+     * The overlay component context.
+     *
+     * @memberof SalesOrdersIndexNewController
+     */
+    @tracked overlay;
+
+    /**
+     * The salesOrder being created.
+     *
+     * @var {EntityModel}
+     */
+    @tracked salesOrder = this.store.createRecord('pallet-salesOrder', { type: 'pallet-salesOrder' });
+
+    /**
+     * Set the overlay component context object.
+     *
+     * @param {OverlayContext} overlay
+     * @memberof SalesOrdersIndexNewController
+     */
+    @action setOverlayContext(overlay) {
+        this.overlay = overlay;
+    }
+
+    /**
+     * When exiting the overlay.
+     *
+     * @return {Transition}
+     * @memberof SalesOrdersIndexNewController
+     */
+    @action transitionBack() {
+        return this.transitionToRoute('salesOrders.index');
+    }
+
+    /**
+     * Trigger a route refresh and focus the new salesOrder created.
+     *
+     * @param {salesOrderModel} salesOrder
+     * @return {Promise}
+     * @memberof SalesOrdersIndexNewController
+     */
+    @action onAfterSave(salesOrder) {
+        if (this.overlay) {
+            this.overlay.close();
+        }
+
+        this.hostRouter.refresh();
+        return this.transitionToRoute('salesOrders.index.details', salesOrder).then(() => {
+            this.resetForm();
+        });
+    }
+
+    /**
+     * Resets the form with a new salesOrder record
+     *
+     * @memberof SalesOrdersIndexNewController
+     */
+    resetForm() {
+        this.salesOrder = this.store.createRecord('sales-order');
+    }
+}
diff --git a/addon/controllers/suppliers/index.js b/addon/controllers/suppliers/index.js
index c081b5ff..c714a60b 100644
--- a/addon/controllers/suppliers/index.js
+++ b/addon/controllers/suppliers/index.js
@@ -5,8 +5,15 @@ import { action } from '@ember/object';
 import { isBlank } from '@ember/utils';
 import { timeout } from 'ember-concurrency';
 import { task } from 'ember-concurrency-decorators';
-
+import getSupplierStatusOptions from '../../utils/get-supplier-status-options';
 export default class SuppliersIndexController extends Controller {
+    /**
+     * Inject the `warehouses.index` controller
+     *
+     * @var {Controller}
+     */
+    @controller('warehouses.index') warehouses;
+
     /**
      * Inject the `notifications` service
      *
@@ -22,18 +29,18 @@ export default class SuppliersIndexController extends Controller {
     @service modalsManager;
 
     /**
-     * Inject the `store` service
+     * Inject the `crud` service
      *
      * @var {Service}
      */
-    @service store;
+    @service crud;
 
     /**
-     * Inject the `fetch` service
+     * Inject the `store` service
      *
      * @var {Service}
      */
-    @service fetch;
+    @service store;
 
     /**
      * Inject the `filters` service
@@ -50,18 +57,18 @@ export default class SuppliersIndexController extends Controller {
     @service hostRouter;
 
     /**
-     * Inject the `crud` service
+     * Inject the `fetch` service
      *
      * @var {Service}
      */
-    @service crud;
+    @service fetch;
 
     /**
      * Queryable parameters for this controller's model
      *
      * @var {Array}
      */
-    queryParams = ['page', 'limit', 'sort', 'query', 'status', 'sku', 'created_at', 'updated_at'];
+    queryParams = ['page', 'limit', 'sort', 'query', 'public_id', 'internal_id', 'created_by', 'updated_by', 'status', 'name', 'email', 'phone', 'type', 'country', 'address', 'website_url'];
 
     /**
      * The current page of data being viewed
@@ -85,21 +92,77 @@ export default class SuppliersIndexController extends Controller {
     @tracked sort = '-created_at';
 
     /**
-     * The filterable param `sku`
+     * The filterable param `public_id`
      *
      * @var {String}
      */
-    @tracked sku;
+    @tracked public_id;
 
     /**
-     * The filterable param `status`
+     * The filterable param `internal_id`
      *
      * @var {String}
      */
+    @tracked internal_id;
+
+    /**
+     * The filterable param `status`
+     *
+     * @var {Array}
+     */
     @tracked status;
 
     /**
-     * All columns applicable for orders
+     * The filterable param `type`
+     *
+     * @var {Array|String}
+     */
+    @tracked type;
+
+    /**
+     * The filterable param `name`
+     *
+     * @var {String}
+     */
+    @tracked name;
+
+    /**
+     * The filterable param `website_url`
+     *
+     * @var {String}
+     */
+    @tracked website_url;
+
+    /**
+     * The filterable param `phone`
+     *
+     * @var {String}
+     */
+    @tracked phone;
+
+    /**
+     * The filterable param `email`
+     *
+     * @var {String}
+     */
+    @tracked email;
+
+    /**
+     * The filterable param `country`
+     *
+     * @var {String}
+     */
+    @tracked country;
+
+    /**
+     * Rows for the table
+     *
+     * @var {Array}
+     */
+    @tracked rows = [];
+
+    /**
+     * All columns for the table
      *
      * @var {Array}
      */
@@ -107,8 +170,10 @@ export default class SuppliersIndexController extends Controller {
         {
             label: 'Name',
             valuePath: 'name',
-            width: '200px',
-            cellComponent: 'table/cell/anchor',
+            width: '180px',
+            cellComponent: 'table/cell/media-name',
+            mediaPath: 'logo_url',
+            action: this.viewSupplier,
             resizable: true,
             sortable: true,
             filterable: true,
@@ -117,28 +182,97 @@ export default class SuppliersIndexController extends Controller {
         {
             label: 'ID',
             valuePath: 'public_id',
-            width: '120px',
             cellComponent: 'click-to-copy',
+            width: '110px',
             resizable: true,
             sortable: true,
             filterable: true,
             filterComponent: 'filter/string',
         },
         {
-            label: 'SKU',
-            valuePath: 'sku',
+            label: 'Internal ID',
+            valuePath: 'internal_id',
             cellComponent: 'click-to-copy',
-            width: '120px',
+            width: '100px',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/string',
+        },
+        {
+            label: 'Email',
+            valuePath: 'email',
+            cellComponent: 'click-to-copy',
+            width: '80px',
             resizable: true,
             sortable: true,
+            hidden: true,
             filterable: true,
             filterComponent: 'filter/string',
         },
+        {
+            label: 'Website URL',
+            valuePath: 'website_url',
+            cellComponent: 'click-to-copy',
+            width: '80px',
+            resizable: true,
+            sortable: true,
+            hidden: true,
+            filterable: true,
+            filterComponent: 'filter/string',
+        },
+        {
+            label: 'Phone',
+            valuePath: 'phone',
+            cellComponent: 'click-to-copy',
+            width: '80px',
+            resizable: true,
+            sortable: true,
+            hidden: true,
+            filterable: true,
+            filterComponent: 'filter/string',
+        },
+        {
+            label: 'Address',
+            valuePath: 'address',
+            cellComponent: 'table/cell/anchor',
+            action: this.viewSupplierPlace,
+            width: '150px',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterParam: 'address',
+            filterComponent: 'filter/string',
+        },
+        {
+            label: 'Type',
+            valuePath: 'type',
+            cellComponent: 'table/cell/anchor',
+            action: this.viewSupplierPlace,
+            width: '150px',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterParam: 'type',
+            filterComponent: 'filter/string',
+        },
+        {
+            label: 'Country',
+            valuePath: 'country',
+            cellComponent: 'table/cell/base',
+            cellClassNames: 'uppercase',
+            width: '120px',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/country',
+            filterParam: 'country',
+        },
         {
             label: 'Created At',
             valuePath: 'createdAt',
             sortParam: 'created_at',
-            width: '10%',
+            width: '150px',
             resizable: true,
             sortable: true,
             filterable: true,
@@ -148,13 +282,24 @@ export default class SuppliersIndexController extends Controller {
             label: 'Updated At',
             valuePath: 'updatedAt',
             sortParam: 'updated_at',
-            width: '10%',
+            width: '130px',
             resizable: true,
             sortable: true,
             hidden: true,
             filterable: true,
             filterComponent: 'filter/date',
         },
+        {
+            label: 'Status',
+            valuePath: 'status',
+            cellComponent: 'table/cell/status',
+            width: '130px',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/multi-option',
+            filterOptions: getSupplierStatusOptions(),
+        },
         {
             label: '',
             cellComponent: 'table/cell/dropdown',
@@ -164,16 +309,23 @@ export default class SuppliersIndexController extends Controller {
             ddMenuLabel: 'Supplier Actions',
             cellClassNames: 'overflow-visible',
             wrapperClass: 'flex items-center justify-end mx-2',
-            width: '10%',
+            width: '7%',
             actions: [
                 {
-                    label: 'View Supplier',
+                    label: 'View Supplier Details',
                     fn: this.viewSupplier,
                 },
                 {
                     label: 'Edit Supplier',
                     fn: this.editSupplier,
                 },
+                {
+                    separator: true,
+                },
+                {
+                    label: 'Delete Supplier',
+                    fn: this.deleteSupplier,
+                },
             ],
             sortable: false,
             filterable: false,
@@ -211,44 +363,37 @@ export default class SuppliersIndexController extends Controller {
      *
      * @void
      */
-    @action exportProcuts() {
+    @action exportSuppliers() {
         this.crud.export('supplier');
     }
 
     /**
-     * View a `supplier` details in overlay
+     * View a `supplier` details in modal
      *
      * @param {SupplierModel} supplier
-     * @param {Object} options
      * @void
      */
-    @action viewSupplier(supplier, options) {
-        // do code
-        console.log('viewSupplier()', supplier, options);
+    @action viewSupplier(supplier) {
+        return this.transitionToRoute('suppliers.index.details', supplier);
     }
 
     /**
      * Create a new `supplier` in modal
      *
-     * @param {Object} options
      * @void
      */
-    @action createSupplier(options = {}) {
-        const supplier = this.store.createRecord('pallet-supplier');
-
-        return this.editSupplier(supplier, options);
+    @action async createSupplier() {
+        return this.transitionToRoute('suppliers.index.new');
     }
 
     /**
      * Edit a `supplier` details
      *
      * @param {SupplierModel} supplier
-     * @param {Object} options
      * @void
      */
-    @action async editSupplier(supplier, options = {}) {
-        // do code
-        console.log('editSupplier()', supplier, options);
+    @action editSupplier(supplier) {
+        return this.transitionToRoute('suppliers.index.edit', supplier);
     }
 
     /**
@@ -260,7 +405,8 @@ export default class SuppliersIndexController extends Controller {
      */
     @action deleteSupplier(supplier, options = {}) {
         this.crud.delete(supplier, {
-            onConfirm: () => {
+            acceptButtonIcon: 'trash',
+            onSuccess: () => {
                 return this.hostRouter.refresh();
             },
             ...options,
@@ -284,4 +430,49 @@ export default class SuppliersIndexController extends Controller {
             },
         });
     }
+
+    /**
+     * View information about the suppliers warehouse
+     *
+     * @param {SupplierModel} supplier
+     * @void
+     */
+    @action async viewSupplierPlace(supplier) {
+        const warehouse = await this.store.findRecord('warehouse', supplier.warehouse_uuid);
+
+        if (warehouse) {
+            this.contextPanel.focus(warehouse);
+        }
+    }
+
+    /**
+     * Edit a supplier's current warehouse
+     *
+     * @param {SupplierModel} supplier
+     * @void
+     */
+    @action async editSupplierPlace(supplier) {
+        const warehouse = await this.store.findRecord('warehouse', supplier.warehouse_uuid);
+
+        if (warehouse) {
+            this.contextPanel.focus(warehouse, 'editing');
+        }
+    }
+
+    /**
+     * Create a new warehouse for a supplier.
+     *
+     * @param {SupplierModel} supplier
+     * @void
+     */
+    @action async createSupplierPlace(supplier) {
+        const warehouse = this.store.createRecord('warehouse');
+
+        this.contextPanel.focus(warehouse, 'editing', {
+            onAfterSave: (warehouse) => {
+                supplier.set('warehouse_uuid', warehouse.id);
+                supplier.save();
+            },
+        });
+    }
 }
diff --git a/addon/controllers/suppliers/index/details.js b/addon/controllers/suppliers/index/details.js
index 4ecb42bf..c9f72878 100644
--- a/addon/controllers/suppliers/index/details.js
+++ b/addon/controllers/suppliers/index/details.js
@@ -20,7 +20,7 @@ export default class SuppliersIndexDetailsController extends Controller {
     @tracked queryParams = ['view'];
 
     /**
-     * Transitions back to the "suppliers.index" route.
+     * Transitions back to the "supplier.index" route.
      *
      * @method
      * @action
diff --git a/addon/controllers/suppliers/index/edit.js b/addon/controllers/suppliers/index/edit.js
index 0571c7dd..5ca4a494 100644
--- a/addon/controllers/suppliers/index/edit.js
+++ b/addon/controllers/suppliers/index/edit.js
@@ -1,26 +1,26 @@
 import Controller from '@ember/controller';
-import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 export default class SuppliersIndexEditController extends Controller {
     /**
      * Inject the `hostRouter` service
      *
-     * @memberof SuppliersIndexEditController
+     * @memberof ManagementSuppliersIndexEditController
      */
     @service hostRouter;
 
     /**
      * Inject the `hostRouter` service
      *
-     * @memberof SuppliersIndexEditController
+     * @memberof ManagementSuppliersIndexEditController
      */
     @service modalsManager;
 
     /**
      * The overlay component context.
      *
-     * @memberof SuppliersIndexEditController
+     * @memberof ManagementSuppliersIndexEditController
      */
     @tracked overlay;
 
@@ -28,7 +28,7 @@ export default class SuppliersIndexEditController extends Controller {
      * When exiting the overlay.
      *
      * @return {Transition}
-     * @memberof suppliersIndexEditController
+     * @memberof ManagementSuppliersIndexEditController
      */
     @action transitionBack(supplier) {
         // check if supplier record has been edited and prompt for confirmation
@@ -36,19 +36,19 @@ export default class SuppliersIndexEditController extends Controller {
             return this.confirmContinueWithUnsavedChanges(supplier, {
                 confirm: () => {
                     supplier.rollbackAttributes();
-                    return this.transitionToRoute('suppliers.index');
+                    return this.transitionToRoute('supplier.index');
                 },
             });
         }
 
-        return this.transitionToRoute('suppliers.index');
+        return this.transitionToRoute('supplier.index');
     }
 
     /**
      * Set the overlay component context object.
      *
      * @param {OverlayContext} overlay
-     * @memberof SuppliersIndexEditController
+     * @memberof ManagementSuppliersIndexEditController
      */
     @action setOverlayContext(overlay) {
         this.overlay = overlay;
@@ -59,7 +59,7 @@ export default class SuppliersIndexEditController extends Controller {
      *
      * @param {SupplierModel} supplier
      * @return {Promise}
-     * @memberof SuppliersIndexEditController
+     * @memberof ManagementSuppliersIndexEditController
      */
     @action onViewDetails(supplier) {
         // check if supplier record has been edited and prompt for confirmation
@@ -75,7 +75,7 @@ export default class SuppliersIndexEditController extends Controller {
      *
      * @param {SupplierModel} supplier
      * @return {Promise}
-     * @memberof SuppliersIndexEditController
+     * @memberof ManagementSuppliersIndexEditController
      */
     @action onAfterSave(supplier) {
         if (this.overlay) {
@@ -93,7 +93,7 @@ export default class SuppliersIndexEditController extends Controller {
      * @param {SupplierModel} supplier - The supplier object with unsaved changes.
      * @param {Object} [options={}] - Additional options for configuring the modal.
      * @returns {Promise} A promise that resolves when the user confirms, and transitions to a new route.
-     * @memberof SuppliersIndexEditController
+     * @memberof ManagementSuppliersIndexEditController
      */
     confirmContinueWithUnsavedChanges(supplier, options = {}) {
         return this.modalsManager.confirm({
@@ -102,7 +102,7 @@ export default class SuppliersIndexEditController extends Controller {
             acceptButtonText: 'Continue without saving',
             confirm: () => {
                 supplier.rollbackAttributes();
-                return this.transitionToRoute('suppliers.index.details', supplier);
+                return this.transitionToRoute('supplier.index.details', supplier);
             },
             ...options,
         });
diff --git a/addon/controllers/suppliers/index/new.js b/addon/controllers/suppliers/index/new.js
index e9cba09c..6f6090cc 100644
--- a/addon/controllers/suppliers/index/new.js
+++ b/addon/controllers/suppliers/index/new.js
@@ -7,43 +7,43 @@ export default class SuppliersIndexNewController extends Controller {
     /**
      * Inject the `store` service
      *
-     * @memberof SuppliersIndexNewController
+     * @memberof ManagementSupplierIndexNewController
      */
     @service store;
 
     /**
      * Inject the `hostRouter` service
      *
-     * @memberof SuppliersIndexNewController
+     * @memberof ManagementSupplierIndexNewController
      */
     @service hostRouter;
 
     /**
      * Inject the `hostRouter` service
      *
-     * @memberof SuppliersIndexNewController
+     * @memberof ManagementSupplierIndexNewController
      */
     @service modalsManager;
 
     /**
      * The overlay component context.
      *
-     * @memberof SuppliersIndexNewController
+     * @memberof ManagementSupplierIndexNewController
      */
     @tracked overlay;
 
     /**
      * The supplier being created.
      *
-     * @var {EntityModel}
+     * @var {SupplierModel}
      */
-    @tracked supplier = this.store.createRecord('pallet-supplier', { type: 'pallet-supplier' });
+    @tracked supplier = this.store.createRecord('supplier', { status: 'active' });
 
     /**
      * Set the overlay component context object.
      *
      * @param {OverlayContext} overlay
-     * @memberof SuppliersIndexNewController
+     * @memberof ManagementSuppliersIndexNewController
      */
     @action setOverlayContext(overlay) {
         this.overlay = overlay;
@@ -53,7 +53,7 @@ export default class SuppliersIndexNewController extends Controller {
      * When exiting the overlay.
      *
      * @return {Transition}
-     * @memberof SuppliersIndexNewController
+     * @memberof ManagementSupplierIndexNewController
      */
     @action transitionBack() {
         return this.transitionToRoute('suppliers.index');
@@ -62,9 +62,9 @@ export default class SuppliersIndexNewController extends Controller {
     /**
      * Trigger a route refresh and focus the new supplier created.
      *
-     * @param {supplierModel} supplier
+     * @param {SupplierModel} supplier
      * @return {Promise}
-     * @memberof SuppliersIndexNewController
+     * @memberof ManagementSuppliersIndexNewController
      */
     @action onAfterSave(supplier) {
         if (this.overlay) {
@@ -80,9 +80,9 @@ export default class SuppliersIndexNewController extends Controller {
     /**
      * Resets the form with a new supplier record
      *
-     * @memberof SuppliersIndexNewController
+     * @memberof ManagementSupplierIndexNewController
      */
     resetForm() {
-        this.supplier = this.store.createRecord('pallet-supplier', { type: 'pallet-supplier', status: 'active' });
+        this.supplier = this.store.createRecord('supplier', { status: 'active' });
     }
 }
diff --git a/addon/models/sales-order.js b/addon/models/sales-order.js
index bb10f7c9..feff73f4 100644
--- a/addon/models/sales-order.js
+++ b/addon/models/sales-order.js
@@ -1,3 +1,61 @@
-import Model from '@ember-data/model';
+import Model, { attr } from '@ember-data/model';
+import { computed } from '@ember/object';
+import { format as formatDate, isValid as isValidDate, formatDistanceToNow } from 'date-fns';
 
-export default class SalesOrderModel extends Model {}
+export default class SalesOrderModel extends Model {
+    /** @ids */
+    @attr('string') uuid;
+
+    /** @attributes */
+    @attr('string') customer_uuid;
+    @attr('string') status;
+
+    /** @dates */
+    @attr('date') order_created_at;
+    @attr('date') delivered_at;
+    @attr('date') created_at;
+    @attr('date') updated_at;
+    @attr('date') deleted_at;
+
+    @computed('created_at') get createdAgo() {
+        if (!isValidDate(this.created_at)) {
+            return null;
+        }
+        return formatDistanceToNow(this.created_at);
+    }
+
+    @computed('created_at') get createdAt() {
+        if (!isValidDate(this.created_at)) {
+            return null;
+        }
+        return formatDate(this.created_at, 'PPP p');
+    }
+
+    @computed('created_at') get createdAtShort() {
+        if (!isValidDate(this.created_at)) {
+            return null;
+        }
+        return formatDate(this.created_at, 'PP');
+    }
+
+    @computed('order_created_at') get orderCreatedAgo() {
+        if (!isValidDate(this.order_created_at)) {
+            return null;
+        }
+        return formatDistanceToNow(this.order_created_at);
+    }
+
+    @computed('order_created_at') get orderCreatedAt() {
+        if (!isValidDate(this.order_created_at)) {
+            return null;
+        }
+        return formatDate(this.order_created_at, 'PPP p');
+    }
+
+    @computed('order_created_at') get orderCreatedAtShort() {
+        if (!isValidDate(this.order_created_at)) {
+            return null;
+        }
+        return formatDate(this.order_created_at, 'PP');
+    }
+}
diff --git a/addon/models/supplier.js b/addon/models/supplier.js
index 535d2e63..edeafdad 100644
--- a/addon/models/supplier.js
+++ b/addon/models/supplier.js
@@ -1,3 +1,3 @@
-import Model from '@ember-data/model';
+import VendorModel from '@fleetbase/fleetops-data/models/vendor';
 
-export default class SupplierModel extends Model {}
+export default class SupplierModel extends VendorModel {}
diff --git a/addon/routes.js b/addon/routes.js
index 59ce2aee..f08b49a7 100644
--- a/addon/routes.js
+++ b/addon/routes.js
@@ -17,9 +17,27 @@ export default buildRoutes(function () {
             this.route('edit', { path: '/edit/:public_id' });
         });
     });
-    this.route('suppliers', function () {});
-    this.route('sales-orders', function () {});
-    this.route('purchase-orders', function () {});
+    this.route('suppliers', function () {
+        this.route('index', { path: '/' }, function () {
+            this.route('new');
+            this.route('details', { path: '/:public_id' });
+            this.route('edit', { path: '/edit/:public_id' });
+        });
+    });
+    this.route('sales-orders', function () {
+        this.route('index', { path: '/' }, function () {
+            this.route('new');
+            this.route('details', { path: '/:public_id' });
+            this.route('edit', { path: '/edit/:public_id' });
+        });
+    });
+    this.route('purchase-orders', function () {
+        this.route('index', { path: '/' }, function () {
+            this.route('new');
+            this.route('details', { path: '/:public_id' });
+            this.route('edit', { path: '/edit/:public_id' });
+        });
+    });
     this.route('batch', function () {});
     this.route('audits', function () {});
     this.route('reports', function () {});
diff --git a/addon/routes/sales-orders/index.js b/addon/routes/sales-orders/index.js
index 692d23e8..f0e4bc8b 100644
--- a/addon/routes/sales-orders/index.js
+++ b/addon/routes/sales-orders/index.js
@@ -13,6 +13,6 @@ export default class SalesOrdersIndexRoute extends Route {
     };
 
     model(params) {
-        return this.store.query('pallet-product', params);
+        return this.store.query('sales-order', params);
     }
 }
diff --git a/addon/routes/sales-orders/index/details.js b/addon/routes/sales-orders/index/details.js
index f7a1a6f7..7d7c0027 100644
--- a/addon/routes/sales-orders/index/details.js
+++ b/addon/routes/sales-orders/index/details.js
@@ -1,3 +1,15 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
-export default class SalesOrdersIndexDetailsRoute extends Route {}
+
+export default class SalesOrdersIndexDetailsRoute extends Route {
+    @service store;
+
+    queryParams = {
+        view: { refreshModel: false },
+    };
+
+    model({ public_id }) {
+        return this.store.findRecord('sales-order', public_id);
+    }
+}
diff --git a/addon/routes/sales-orders/index/edit.js b/addon/routes/sales-orders/index/edit.js
index 5459d4c8..7a4faf64 100644
--- a/addon/routes/sales-orders/index/edit.js
+++ b/addon/routes/sales-orders/index/edit.js
@@ -1,3 +1,9 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+export default class SalesOrdersIndexEditRoute extends Route {
+    @service store;
 
-export default class SalesOrdersIndexEditRoute extends Route {}
+    model({ public_id }) {
+        return this.store.findRecord('sales-order', public_id);
+    }
+}
diff --git a/addon/serializers/sales-order.js b/addon/serializers/sales-order.js
index ed6544d0..3ed3ca52 100644
--- a/addon/serializers/sales-order.js
+++ b/addon/serializers/sales-order.js
@@ -1,13 +1,4 @@
 import ApplicationSerializer from '@fleetbase/ember-core/serializers/application';
 import { EmbeddedRecordsMixin } from '@ember-data/serializer/rest';
 
-export default class SalesOrderSerializer extends ApplicationSerializer.extend(EmbeddedRecordsMixin) {
-    /**
-     * Embedded relationship attributes
-     *
-     * @var {Object}
-     */
-    get attrs() {
-        return {};
-    }
-}
+export default class SalesOrderSerializer extends ApplicationSerializer.extend(EmbeddedRecordsMixin) {}
diff --git a/addon/serializers/supplier.js b/addon/serializers/supplier.js
index 099bbf02..9b436a6f 100644
--- a/addon/serializers/supplier.js
+++ b/addon/serializers/supplier.js
@@ -1,12 +1,4 @@
-import JSONAPISerializer from '@ember-data/serializer/json-api';
+import ApplicationSerializer from '@fleetbase/ember-core/serializers/application';
+import { EmbeddedRecordsMixin } from '@ember-data/serializer/rest';
 
-export default class SupplierSerializer extends JSONAPISerializer {
-    /**
-     * Embedded relationship attributes
-     *
-     * @var {Object}
-     */
-    get attrs() {
-        return {};
-    }
-}
+export default class SupplierSerializer extends ApplicationSerializer.extend(EmbeddedRecordsMixin) {}
diff --git a/addon/services/context-panel.js b/addon/services/context-panel.js
index 1827e716..1c13bcf5 100644
--- a/addon/services/context-panel.js
+++ b/addon/services/context-panel.js
@@ -27,6 +27,36 @@ export default class ContextPanelService extends Service {
                 componentArguments: [{ isResizable: true }, { width: '600px' }],
             },
         },
+        warehouse: {
+            viewing: {
+                component: 'warehouse-panel',
+                componentArguments: [{ isResizable: true }, { width: '600px' }],
+            },
+            editing: {
+                component: 'warehouse-form-panel',
+                componentArguments: [{ isResizable: true }, { width: '600px' }],
+            },
+        },
+        supplier: {
+            viewing: {
+                component: 'supplier-panel',
+                componentArguments: [{ isResizable: true }, { width: '600px' }],
+            },
+            editing: {
+                component: 'supplier-form-panel',
+                componentArguments: [{ isResizable: true }, { width: '600px' }],
+            },
+        },
+        salesOrder: {
+            viewing: {
+                component: 'sales-order-panel',
+                componentArguments: [{ isResizable: true }, { width: '600px' }],
+            },
+            editing: {
+                component: 'sales-order-form-panel',
+                componentArguments: [{ isResizable: true }, { width: '600px' }],
+            },
+        },
     };
 
     /**
diff --git a/addon/templates/sales-orders/index/details.hbs b/addon/templates/sales-orders/index/details.hbs
index ddb4007d..82b3f7f6 100644
--- a/addon/templates/sales-orders/index/details.hbs
+++ b/addon/templates/sales-orders/index/details.hbs
@@ -1,2 +1 @@
-{{page-title "Details"}}
-{{outlet}}
\ No newline at end of file
+<SalesOrderPanel @salesOrder={{@model}} @tab={{this.view}} @onTabChanged={{this.onTabChanged}} @onPressCancel={{this.transitionBack}} @onEdit={{this.onEdit}} />
\ No newline at end of file
diff --git a/addon/templates/sales-orders/index/edit.hbs b/addon/templates/sales-orders/index/edit.hbs
index 84932ba4..8b443ddc 100644
--- a/addon/templates/sales-orders/index/edit.hbs
+++ b/addon/templates/sales-orders/index/edit.hbs
@@ -1,2 +1 @@
-{{page-title "Edit"}}
-{{outlet}}
\ No newline at end of file
+<SalesOrderFormPanel @salesOrder={{@model}} @onPressCancel={{this.transitionBack}} @onAfterSave={{this.onAfterSave}} @onViewDetails={{this.onViewDetails}} @onLoad={{this.setOverlayContext}} />
\ No newline at end of file
diff --git a/addon/templates/sales-orders/index/new.hbs b/addon/templates/sales-orders/index/new.hbs
index 7cc63261..c6466584 100644
--- a/addon/templates/sales-orders/index/new.hbs
+++ b/addon/templates/sales-orders/index/new.hbs
@@ -1,2 +1 @@
-{{page-title "New"}}
-{{outlet}}
\ No newline at end of file
+<SalesOrderFormPanel @salesOrder={{this.salesOrder}} @onPressCancel={{this.transitionBack}} @onAfterSave={{this.onAfterSave}} @onLoad={{this.setOverlayContext}} />
diff --git a/addon/utils/get-supplier-status-options.js b/addon/utils/get-supplier-status-options.js
new file mode 100644
index 00000000..1503b841
--- /dev/null
+++ b/addon/utils/get-supplier-status-options.js
@@ -0,0 +1,3 @@
+export default function getSupplierStatusOptions() {
+    return ['pending', 'active', 'do-not-contact', 'prospective', 'archived'];
+}
diff --git a/addon/utils/get-supplier-type-options.js b/addon/utils/get-supplier-type-options.js
new file mode 100644
index 00000000..bf6fbfe0
--- /dev/null
+++ b/addon/utils/get-supplier-type-options.js
@@ -0,0 +1,41 @@
+export default function getSupplierTypeOptions() {
+    return [
+        'carrier-trucking-company',
+        'carrier-shipping-line',
+        'carrier-air-cargo',
+        'carrier-rail',
+        'freight-forwarder',
+        'warehouse-provider',
+        'broker',
+        'maintenance-repair-facility',
+        'fuel-station',
+        'tire-service-provider',
+        'equipment-rental',
+        'customs-broker',
+        'third-party-logistics-provider',
+        'technology-provider',
+        'consultant',
+        'insurance-provider',
+        'last-mile-delivery-service',
+        'packing-crating-service',
+        'intermodal-operator',
+        'drayage-service-provider',
+        'cold-chain-provider',
+        'hazardous-material-specialist',
+        'parcel-courier',
+        'bulk-material-handler',
+        'towing-service',
+        'cargo-inspector',
+        'pallet-provider',
+        'label-packaging-material-supplier',
+        'driver-leasing-service',
+        'vehicle-manufacturer',
+        'vehicle-dealership',
+        'parts-supplier',
+        'logistics-association',
+        'regulatory-body',
+        'training-certification-provider',
+        'general-vendor',
+        'ecommerce',
+    ];
+}
diff --git a/app/components/supplier-form-panel/create-form.js b/app/components/supplier-form-panel/create-form.js
new file mode 100644
index 00000000..7d765f04
--- /dev/null
+++ b/app/components/supplier-form-panel/create-form.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/pallet-engine/components/supplier-form-panel/create-form';
diff --git a/app/components/supplier-form-panel/edit-form.js b/app/components/supplier-form-panel/edit-form.js
new file mode 100644
index 00000000..cb424b23
--- /dev/null
+++ b/app/components/supplier-form-panel/edit-form.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/pallet-engine/components/supplier-form-panel/edit-form';
diff --git a/app/components/supplier-panel/details.js b/app/components/supplier-panel/details.js
new file mode 100644
index 00000000..d6e3c58d
--- /dev/null
+++ b/app/components/supplier-panel/details.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/pallet-engine/components/supplier-panel/details';
diff --git a/app/utils/get-supplier-status-options.js b/app/utils/get-supplier-status-options.js
new file mode 100644
index 00000000..1df9ef1d
--- /dev/null
+++ b/app/utils/get-supplier-status-options.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/pallet-engine/utils/get-supplier-status-options';
diff --git a/app/utils/get-supplier-type-options.js b/app/utils/get-supplier-type-options.js
new file mode 100644
index 00000000..081f12aa
--- /dev/null
+++ b/app/utils/get-supplier-type-options.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/pallet-engine/utils/get-supplier-type-options';
diff --git a/server/migrations/2023_11_15_023331_create_audits_table.php b/server/migrations/2023_11_15_023331_create_audits_table.php
index dd5d1bd6..4ef1dedc 100644
--- a/server/migrations/2023_11_15_023331_create_audits_table.php
+++ b/server/migrations/2023_11_15_023331_create_audits_table.php
@@ -15,15 +15,16 @@ public function up()
     {
         Schema::create('pallet_audits', function (Blueprint $table) {
             $table->increments('id');
-            $table->uuid('uuid', 191)->nullable()->index();
-            $table->foreignUuid('user_uuid', 191)->nullable()->index()->references('uuid')->on('users');
+            $table->uuid('uuid')->nullable()->unique();
+            $table->foreignUuid('user_uuid')->nullable()->index()->references('uuid')->on('users');
             $table->string('action')->nullabe();
             $table->string('auditable_type')->nullabe();
-            $table->uuid('auditable_uuid', 191)->nullabe()->index();
+            $table->uuid('auditable_uuid')->nullabe()->index();
             $table->json('old_values')->nullable();
             $table->json('new_values')->nullable();
             $table->timestamp('created_at')->nullable()->index();
             $table->timestamp('updated_at')->nullable();
+            $table->softDeletes();
         });
     }
 
diff --git a/server/migrations/2023_11_15_023340_create_batches_table.php b/server/migrations/2023_11_15_023340_create_batches_table.php
index 9dcbc74f..8186bd11 100644
--- a/server/migrations/2023_11_15_023340_create_batches_table.php
+++ b/server/migrations/2023_11_15_023340_create_batches_table.php
@@ -15,7 +15,7 @@ public function up()
     {
         Schema::create('pallet_batches', function (Blueprint $table) {
             $table->increments('id');
-            $table->uuid('uuid', 191)->nullable()->index();
+            $table->uuid('uuid')->nullable()->unique();
             $table->string('batch_number')->nullabe();
             $table->foreignUuid('product_uuid')->nullable()->index()->references('uuid')->on('entities');
             $table->timestamp('manufacture_date_at')->nullable();
@@ -23,6 +23,7 @@ public function up()
             $table->integer('quantity')->nullable();
             $table->timestamp('created_at')->nullable()->index();
             $table->timestamp('updated_at')->nullable();
+            $table->softDeletes();
         });
     }
 
diff --git a/server/migrations/2023_11_15_023348_create_inventory_table.php b/server/migrations/2023_11_15_023348_create_inventory_table.php
index 71e8f5ea..ae2a555a 100644
--- a/server/migrations/2023_11_15_023348_create_inventory_table.php
+++ b/server/migrations/2023_11_15_023348_create_inventory_table.php
@@ -15,13 +15,14 @@ public function up()
     {
         Schema::create('pallet_inventories', function (Blueprint $table) {
             $table->increments('id');
-            $table->uuid('uuid', 191)->nullable()->index();
+            $table->uuid('uuid')->nullable()->unique();
             $table->foreignUuid('product_uuid')->nullable()->index()->references('uuid')->on('entities');
             $table->foreignUuid('warehouse_uuid')->nullable()->index()->references('uuid')->on('places');
             $table->integer('quantity')->nullable();
             $table->integer('min_quantity')->nullable();
             $table->timestamp('created_at')->nullable()->index();
             $table->timestamp('updated_at')->nullable();
+            $table->softDeletes();
         });
     }
 
diff --git a/server/migrations/2023_11_15_023356_create_purchase_orders_table.php b/server/migrations/2023_11_15_023356_create_purchase_orders_table.php
index 6d73dd61..b3c22671 100644
--- a/server/migrations/2023_11_15_023356_create_purchase_orders_table.php
+++ b/server/migrations/2023_11_15_023356_create_purchase_orders_table.php
@@ -15,12 +15,14 @@ public function up()
     {
         Schema::create('pallet_purchase_orders', function (Blueprint $table) {
             $table->increments('id');
+            $table->uuid('uuid')->nullable()->unique();
             $table->foreignUuid('supplier_uuid')->nullable()->index()->references('uuid')->on('vendors');
             $table->string('status')->nullable();
             $table->timestamp('order_created_at')->nullable();
             $table->timestamp('expected_delivery_at')->nullable();
             $table->timestamp('created_at')->nullable()->index();
             $table->timestamp('updated_at')->nullable();
+            $table->softDeletes();
         });
     }
 
diff --git a/server/migrations/2023_11_15_023404_create_sales_orders_table.php b/server/migrations/2023_11_15_023404_create_sales_orders_table.php
index aac5cbbf..f8af68c8 100644
--- a/server/migrations/2023_11_15_023404_create_sales_orders_table.php
+++ b/server/migrations/2023_11_15_023404_create_sales_orders_table.php
@@ -15,12 +15,14 @@ public function up()
     {
         Schema::create('pallet_sales_orders', function (Blueprint $table) {
             $table->increments('id');
+            $table->uuid('uuid')->nullable()->unique();
             $table->foreignUuid('customer_uuid')->nullable()->index()->references('uuid')->on('contacts');
             $table->string('status')->nullable();
             $table->date('order_created_at')->nullable();
             $table->date('delivered_at')->nullable();
             $table->timestamp('created_at')->nullable()->index();
             $table->timestamp('updated_at')->nullable();
+            $table->softDeletes();
         });
     }
 
diff --git a/server/migrations/2023_11_15_023411_create_stock_transactions_table.php b/server/migrations/2023_11_15_023411_create_stock_transactions_table.php
index 7f33609a..833a7321 100644
--- a/server/migrations/2023_11_15_023411_create_stock_transactions_table.php
+++ b/server/migrations/2023_11_15_023411_create_stock_transactions_table.php
@@ -15,7 +15,7 @@ public function up()
     {
         Schema::create('pallet_stock_transactions', function (Blueprint $table) {
             $table->increments('id');
-            $table->uuid('uuid', 191)->nullable()->index();
+            $table->uuid('uuid')->nullable()->unique();
             $table->foreignUuid('product_uuid')->nullable()->index()->references('uuid')->on('entities');
             $table->foreignUuid('destination_uuid')->nullable()->index()->references('uuid')->on('places');
             $table->uuid('source_uuid')->nullable()->index();
@@ -25,6 +25,7 @@ public function up()
             $table->timestamp('transaction_created_at')->nullabe();
             $table->timestamp('created_at')->nullable()->index();
             $table->timestamp('updated_at')->nullable();
+            $table->softDeletes();
         });
     }
 
diff --git a/server/migrations/2023_11_15_034937_create_stock_adjustment_table.php b/server/migrations/2023_11_15_034937_create_stock_adjustment_table.php
index aabfcd60..dacf8687 100644
--- a/server/migrations/2023_11_15_034937_create_stock_adjustment_table.php
+++ b/server/migrations/2023_11_15_034937_create_stock_adjustment_table.php
@@ -15,12 +15,13 @@ public function up()
     {
         Schema::create('pallet_stock_adjustment', function (Blueprint $table) {
             $table->increments('id');
-            $table->uuid('uuid')->nullable()->index();
+            $table->uuid('uuid')->nullable()->unique();
             $table->foreignUuid('product_uuid')->nullable()->index()->references('uuid')->on('entities');
             $table->integer('quantity')->nullabe();
             $table->string('reason')->nullabe();
             $table->timestamp('created_at')->nullable()->index();
             $table->timestamp('updated_at')->nullable();
+            $table->softDeletes();
         });
     }
 
diff --git a/server/src/Models/SalesOrder.php b/server/src/Models/SalesOrder.php
index da579047..8aa27464 100644
--- a/server/src/Models/SalesOrder.php
+++ b/server/src/Models/SalesOrder.php
@@ -15,7 +15,7 @@ class SalesOrder extends Model
      *
      * @var string
      */
-    protected $table = 'pallet_sales_order';
+    protected $table = 'pallet_sales_orders';
 
     /**
      * The singularName overwrite.
@@ -24,6 +24,20 @@ class SalesOrder extends Model
      */
     protected $singularName = 'sales-order';
 
+    /**
+     * Overwrite both entity resource name with `payloadKey`
+     *
+     * @var string
+     */
+    protected $payloadKey = 'sales_order';
+
+    /**
+     * The type of public Id to generate
+     *
+     * @var string
+     */
+    public $publicIdType = 'sales_order';
+
     /**
      * These attributes that can be queried
      *
diff --git a/server/src/routes.php b/server/src/routes.php
index 969d3139..8eb246f0 100644
--- a/server/src/routes.php
+++ b/server/src/routes.php
@@ -33,10 +33,13 @@ function ($router) {
                         $router->fleetbaseRoutes('products', function ($router, $controller) {
                             $router->delete('bulk-delete', $controller('bulkDelete'));
                         });
-                        $router->fleetbaseRoutes('purchase-orders');
-                        $router->fleetbaseRoutes('sales-orders');
+                        $router->fleetbaseRoutes('sales-orders', function($router, $controller){
+                            $router->delete('bulk-delete', $controller('bulkDelete'));
+                        });
                         $router->fleetbaseRoutes('stock-adjustments');
-                        $router->fleetbaseRoutes('suppliers');
+                        $router->fleetbaseRoutes('suppliers', function($router, $controller){
+                            $router->delete('bulk-delete', $controller('bulkDelete'));
+                        });
                         $router->fleetbaseRoutes('warehouses', function ($router, $controller){
                             $router->delete('bulk-delete', $controller('bulkDelete'));
                         });
diff --git a/tests/integration/components/supplier-form-panel/create-form-test.js b/tests/integration/components/supplier-form-panel/create-form-test.js
new file mode 100644
index 00000000..20d87af2
--- /dev/null
+++ b/tests/integration/components/supplier-form-panel/create-form-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | supplier-form-panel/create-form', 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`<SupplierFormPanel::CreateForm />`);
+
+        assert.dom(this.element).hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <SupplierFormPanel::CreateForm>
+        template block text
+      </SupplierFormPanel::CreateForm>
+    `);
+
+        assert.dom(this.element).hasText('template block text');
+    });
+});
diff --git a/tests/integration/components/supplier-form-panel/edit-form-test.js b/tests/integration/components/supplier-form-panel/edit-form-test.js
new file mode 100644
index 00000000..8e4f8e1b
--- /dev/null
+++ b/tests/integration/components/supplier-form-panel/edit-form-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | supplier-form-panel/edit-form', 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`<SupplierFormPanel::EditForm />`);
+
+        assert.dom(this.element).hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <SupplierFormPanel::EditForm>
+        template block text
+      </SupplierFormPanel::EditForm>
+    `);
+
+        assert.dom(this.element).hasText('template block text');
+    });
+});
diff --git a/tests/integration/components/supplier-panel/details-test.js b/tests/integration/components/supplier-panel/details-test.js
new file mode 100644
index 00000000..69a47497
--- /dev/null
+++ b/tests/integration/components/supplier-panel/details-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | supplier-panel/details', 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`<SupplierPanel::Details />`);
+
+        assert.dom(this.element).hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <SupplierPanel::Details>
+        template block text
+      </SupplierPanel::Details>
+    `);
+
+        assert.dom(this.element).hasText('template block text');
+    });
+});
diff --git a/tests/unit/utils/get-supplier-status-options-test.js b/tests/unit/utils/get-supplier-status-options-test.js
new file mode 100644
index 00000000..e126ed02
--- /dev/null
+++ b/tests/unit/utils/get-supplier-status-options-test.js
@@ -0,0 +1,10 @@
+import getSupplierStatusOptions from 'dummy/utils/get-supplier-status-options';
+import { module, test } from 'qunit';
+
+module('Unit | Utility | get-supplier-status-options', function () {
+    // TODO: Replace this with your real tests.
+    test('it works', function (assert) {
+        let result = getSupplierStatusOptions();
+        assert.ok(result);
+    });
+});
diff --git a/tests/unit/utils/get-supplier-type-options-test.js b/tests/unit/utils/get-supplier-type-options-test.js
new file mode 100644
index 00000000..9a893f3d
--- /dev/null
+++ b/tests/unit/utils/get-supplier-type-options-test.js
@@ -0,0 +1,10 @@
+import getSupplierTypeOptions from 'dummy/utils/get-supplier-type-options';
+import { module, test } from 'qunit';
+
+module('Unit | Utility | get-supplier-type-options', function () {
+    // TODO: Replace this with your real tests.
+    test('it works', function (assert) {
+        let result = getSupplierTypeOptions();
+        assert.ok(result);
+    });
+});