added delete_at column on the tables and created supplier

addon/components/sales-order-form-panel.hbs

@@ -1 +1,41 @@
-{{yield}}
+<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>

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
+     */
+}

addon/components/sales-order-panel.hbs

@@ -1 +1,52 @@
-{{yield}}
+<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>