fixed linter

addon/components/widget/storefront-key-metrics.hbs

@@ -0,0 +1,19 @@
+<div class="storefront-key-metrics" ...attributes>
+    <div class="flex flex-col">
+        <div class="flex flex-row items-center justify-between px-4 py-2 border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-gray-50 rounded-lg shadow-sm">
+            <span class="text-base font-bold text-black dark:text-gray-100">{{t "storefront.component.widget.key-metrics.title"}}</span>
+        </div>
+
+        <div class="mt-4">
+            {{#if this.getDashboardMetrics.isRunning}}
+                <Spinner />
+            {{else}}
+                <div class="grid grid-cols-2 lg:grid-cols-12 gap-4">
+                    {{#each-in this.metrics as |title options|}}
+                        <Dashboard::Count @title={{smart-humanize title}} @options={{options}} />
+                    {{/each-in}}
+                </div>
+            {{/if}}
+        </div>
+    </div>
+</div>

addon/components/widget/storefront-key-metrics.js

@@ -0,0 +1,73 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency-decorators';
+
+export default class WidgetStorefrontKeyMetricsComponent extends Component {
+    /**
+     * Inject the fetch service.
+     *
+     * @memberof WidgetKeyMetricsComponent
+     */
+    @service fetch;
+
+    /**
+     * Property for loading metrics to.
+     *
+     * @memberof WidgetKeyMetricsComponent
+     */
+    @tracked metrics = {};
+
+    /**
+     * Creates an instance of WidgetKeyMetricsComponent.
+     * @memberof WidgetKeyMetricsComponent
+     */
+    constructor() {
+        super(...arguments);
+        this.getDashboardMetrics.perform();
+    }
+
+    /**
+     * Task which fetches key metrics.
+     *
+     * @memberof WidgetKeyMetricsComponent
+     */
+    @task *getDashboardMetrics() {
+        this.metrics = yield this.fetch.get('metrics', {}, { namespace: 'storefront/int/v1' }).then((response) => {
+            return this.createMetricsMapFromResponse(response);
+        });
+    }
+
+    /**
+     * Creates a map of metrics from the response data. This method organizes the metrics data into a more usable format.
+     *
+     * @param {Object} metrics - The metrics object fetched from the server.
+     * @returns {Object} A map of metrics where each key is a metric name and its value is an object of metric options.
+     * @memberof WidgetKeyMetricsComponent
+     */
+    createMetricsMapFromResponse(metrics = {}) {
+        const keys = Object.keys(metrics);
+        const map = {};
+
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            map[key] = this.createMetricOptionsHash(key, metrics[key]);
+        }
+
+        return map;
+    }
+
+    /**
+     * Creates a hash of options for a given metric. Depending on the metric key, it assigns a specific format.
+     *
+     * @param {string} key - The key representing the specific metric.
+     * @param {number} value - The value of the metric.
+     * @returns {Object} An object containing the metric value and its format.
+     * @memberof WidgetKeyMetricsComponent
+     */
+    createMetricOptionsHash(key, value) {
+        const options = { value };
+
+        return options;
+    }
+}

addon/components/widget/storefront-metrics.js

@@ -16,8 +16,8 @@ export default class WidgetStorefrontMetricsComponent extends Component {
     };
 
     @tracked isLoading = true;
-    @tracked start = format(startOfMonth(new Date()), 'P');
-    @tracked end = format(endOfMonth(new Date()), 'P');
+    @tracked start = format(startOfMonth(new Date()), 'yyyy-MM-dd');
+    @tracked end = format(endOfMonth(new Date()), 'yyyy-MM-dd');
 
     @computed('args.title') get title() {
         return this.args.title || 'This Month';

addon/engine.js

@@ -3,6 +3,7 @@ import loadInitializers from 'ember-load-initializers';
 import Resolver from 'ember-resolver';
 import config from './config/environment';
 import services from '@fleetbase/ember-core/exports/services';
+import StorefrontKeyMetricsWidget from './components/widget/storefront-key-metrics';
 
 const { modulePrefix } = config;
 const externalRoutes = ['console', 'extensions'];
@@ -17,6 +18,23 @@ export default class StorefrontEngine extends Engine {
     setupExtension = function (app, engine, universe) {
         // register menu item in header
         universe.registerHeaderMenuItem('Storefront', 'console.storefront', { icon: 'store', priority: 1 });
+
+        // widgets for registry
+        const KeyMetricsWidgetDefinition = {
+            did: 'storefront-metrics',
+            name: 'Storefront Metrics',
+            description: 'Key metrics from Storefront.',
+            icon: 'store',
+            component: StorefrontKeyMetricsWidget,
+            grid_options: { w: 12, h: 7, minW: 8, minH: 7 },
+            options: {
+                title: 'Storefront Metrics',
+            },
+        };
+
+        // register widgets
+        universe.registerDefaultDashboardWidgets([KeyMetricsWidgetDefinition]);
+        universe.registerDashboardWidgets([KeyMetricsWidgetDefinition]);
     };
 }
 

app/components/widget/storefront-key-metrics.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/widget/storefront-key-metrics';