first upload all files

Modules/Admin/Resources/assets/js/Admin.js

@@ -0,0 +1,176 @@
+import NProgress from 'nprogress';
+
+export default class {
+    constructor() {
+        this.selectize();
+        this.dateTimePicker();
+        this.changeAccordionTabState();
+        this.preventChangingCurrentTab();
+        this.buttonLoading();
+        this.confirmationModal();
+        this.tooltip();
+        this.shortcuts();
+        this.nprogress();
+    }
+
+    selectize() {
+        let selects = $('select.selectize').removeClass('form-control custom-select-black');
+
+        let options = _.merge({
+            valueField: 'id',
+            labelField: 'name',
+            searchField: 'name',
+            delimiter: ',',
+            persist: true,
+            selectOnTab: true,
+            hideSelected: false,
+            allowEmptyOption: true,
+            onItemAdd(value) {
+                this.getItem(value)[0].innerHTML = this.getItem(value)[0].innerHTML.replace(/¦––\s/g, '');
+            },
+            onInitialize() {
+                for (let index in this.options) {
+                    let label = this.options[index].name;
+                    let value = this.options[index].id;
+
+                    this.$control.find(`.item[data-value="${value}"]`).html(
+                        label.replace(/¦––\s/g, '') +
+                        '<a href="javascript:void(0)" class="remove" tabindex="-1">×</a>'
+                    );
+                }
+            },
+        }, ...FleetCart.selectize);
+
+        for (let select of selects) {
+            select = $(select);
+
+            let create = true;
+            let plugins = ['remove_button', 'restore_on_backspace'];
+
+            if (select.hasClass('prevent-creation')) {
+                create = false;
+
+                plugins.remove('restore_on_backspace');
+            }
+
+            select.selectize(_.merge(options, { create, plugins }));
+        }
+    }
+
+    dateTimePicker(elements) {
+        elements = elements || $('.datetime-picker');
+
+        elements = elements instanceof jQuery ? elements : $(elements);
+
+        for (let el of elements) {
+            $(el).flatpickr({
+                mode: el.hasAttribute('data-range') ? 'range' : 'single',
+                enableTime: el.hasAttribute('data-time'),
+                noCalender: el.hasAttribute('data-no-calender'),
+                altInput: true,
+            });
+        }
+    }
+
+    changeAccordionTabState() {
+        $('.accordion-box [data-toggle="tab"]').on('click', (e) => {
+            if (! $(e.currentTarget).parent().hasClass('active')) {
+                $('.accordion-tab li.active').removeClass('active');
+            }
+        });
+    }
+
+    preventChangingCurrentTab() {
+        $('[data-toggle="tab"]').on('click', (e) => {
+            let targetElement = $(e.currentTarget);
+
+            if (targetElement.parent().hasClass('active')) {
+                return false;
+            }
+        });
+    }
+
+    removeSubmitButtonOffsetOn(tabs, tabsSelector = null) {
+        tabs = Array.isArray(tabs) ? tabs : [tabs];
+
+        $(tabsSelector || '.accordion-tab li > a').on('click', (e) => {
+            if (tabs.includes(e.currentTarget.getAttribute('href'))) {
+                setTimeout(() => {
+                    $('button[type=submit]').parent().removeClass('col-md-offset-2');
+                }, 150);
+            } else {
+                setTimeout(() => {
+                    $('button[type=submit]').parent().addClass('col-md-offset-2');
+                }, 150);
+            }
+        });
+    }
+
+    buttonLoading() {
+        $(document).on('click', '[data-loading]', (e) => {
+            let button = $(e.currentTarget);
+
+            button.data('loading-text', button.html())
+                .addClass('btn-loading')
+                .button('loading');
+        });
+    }
+
+    stopButtonLoading(button) {
+        button = button instanceof jQuery ? button : $(button);
+
+        button.data('loading-text', button.html())
+            .removeClass('btn-loading')
+            .button('reset');
+    }
+
+    confirmationModal() {
+        let confirmationModal = $('#confirmation-modal');
+
+        $('[data-confirm]').on('click', () => {
+            confirmationModal.modal('show');
+        });
+
+        confirmationModal.find('form').on('submit', () => {
+            confirmationModal.find('button.delete').prop('disabled', true);
+        });
+
+        confirmationModal.on('hidden.bs.modal', () => {
+            confirmationModal.find('button.delete').prop('disabled', false);
+        });
+
+        confirmationModal.on('shown.bs.modal', () => {
+            confirmationModal.find('button.delete').focus();
+        });
+    }
+
+    tooltip() {
+        $('[data-toggle="tooltip"]').tooltip({ trigger : 'hover' })
+            .on('click', (e) => {
+                $(e.currentTarget).tooltip('hide');
+            });
+    }
+
+    shortcuts() {
+        Mousetrap.bind('f1', () => {
+            window.open(`http://envaysoft.com/fleetcart/docs/${FleetCart.version}`, '_blank');
+        });
+
+        Mousetrap.bind('?', () => {
+            $('#keyboard-shortcuts-modal').modal();
+        });
+    }
+
+    nprogress() {
+        let inMobile = /iphone|ipod|android|ie|blackberry|fennec/i.test(window.navigator.userAgent);
+
+        if (inMobile) {
+            return;
+        }
+
+        NProgress.configure({ showSpinner: false });
+
+        $(document).ajaxStart(() => NProgress.start());
+        $(document).ajaxComplete(() => NProgress.done());
+    }
+}

Modules/Admin/Resources/assets/js/DataTable.js

@@ -0,0 +1,281 @@
+// Initialize state holders.
+FleetCart.dataTable = { routes: {}, selected: {} };
+
+export default class {
+    constructor(selector, options, callback) {
+        this.selector = selector;
+        this.element = $(selector);
+
+        if (FleetCart.dataTable.selected[selector] === undefined) {
+            FleetCart.dataTable.selected[selector] = [];
+        }
+
+        this.initiateDataTable(options, callback);
+
+        this.addErrorHandler();
+        this.registerTableProcessingPlugin();
+    }
+
+    initiateDataTable(options, callback) {
+        let sortColumn = this.element.find("th[data-sort]");
+
+        this.element.dataTable(
+            _.merge(
+                {
+                    serverSide: true,
+                    processing: true,
+                    ajax: this.route("index", { table: true }),
+                    stateSave: true,
+                    sort: true,
+                    info: true,
+                    filter: true,
+                    lengthChange: true,
+                    paginate: true,
+                    autoWidth: false,
+                    pageLength: 20,
+                    lengthMenu: [10, 20, 50, 100, 200],
+                    language: {
+                        processing: '<i class="fa fa-refresh fa-spin"></i>',
+                    },
+                    order: [
+                        sortColumn.index() !== -1 ? sortColumn.index() : 1,
+                        sortColumn.data("sort") || "desc",
+                    ],
+                    initComplete: () => {
+                        if (this.hasRoute("destroy")) {
+                            let deleteButton = this.addTableActions();
+
+                            deleteButton.on("click", () => this.deleteRows());
+
+                            this.selectAllRowsEventListener();
+                        }
+
+                        if (this.hasRoute("show") || this.hasRoute("edit")) {
+                            this.onRowClick(this.redirectToRowPage);
+                        }
+
+                        if (callback !== undefined) {
+                            callback.call(this);
+                        }
+                    },
+                    rowCallback: (row, data) => {
+                        if (this.hasRoute("show") || this.hasRoute("edit")) {
+                            this.makeRowClickable(row, data.id);
+                        }
+                    },
+                    drawCallback: () => {
+                        this.element.find(".select-all").prop("checked", false);
+
+                        setTimeout(() => {
+                            this.selectRowEventListener();
+                            this.checkSelectedCheckboxes(
+                                this.constructor.getSelectedIds(this.selector)
+                            );
+                        });
+                    },
+                    stateSaveParams(settings, data) {
+                        delete data.start;
+                        delete data.search;
+                    },
+                },
+                options
+            )
+        );
+    }
+
+    addTableActions() {
+        let button = `
+            <button type="button" class="btn btn-default btn-delete">
+                ${trans("admin::admin.buttons.delete")}
+            </button>
+        `;
+
+        return $(button).appendTo(
+            this.element
+                .closest(".dataTables_wrapper")
+                .find(".dataTables_length")
+        );
+    }
+
+    deleteRows() {
+        let checked = this.element.find(".select-row:checked");
+
+        if (checked.length === 0) {
+            return;
+        }
+
+        let confirmationModal = $("#confirmation-modal");
+        let deleted = [];
+
+        confirmationModal
+            .modal("show")
+            .find("form")
+            .on("submit", (e) => {
+                e.preventDefault();
+
+                confirmationModal.modal("hide");
+
+                let table = this.element.DataTable();
+
+                table.processing(true);
+
+                let ids = this.constructor.getRowIds(checked);
+
+                // Don't make ajax request if an id was previously deleted.
+                if (
+                    deleted.length !== 0 &&
+                    _.difference(deleted, ids).length === 0
+                ) {
+                    return;
+                }
+
+                $.ajax({
+                    type: "DELETE",
+                    url: this.route("destroy", { ids: ids.join() }),
+                    success: () => {
+                        deleted = _.flatten(deleted.concat(ids));
+
+                        this.constructor.setSelectedIds(this.selector, []);
+
+                        this.constructor.reload(this.element);
+                    },
+                    error: (xhr) => {
+                        error(xhr.responseJSON.message);
+
+                        deleted = _.flatten(deleted.concat(ids));
+
+                        this.constructor.setSelectedIds(this.selector, []);
+
+                        this.constructor.reload(this.element);
+                    },
+                });
+            });
+    }
+
+    makeRowClickable(row, id) {
+        let key = this.hasRoute("show") ? "show" : "edit";
+        let url = this.route(key, { id });
+
+        $(row).addClass("clickable-row").data("href", url);
+
+        setTimeout(() => {
+            $(".clickable-row td:not(:first-child)").css("cursor", "pointer");
+        });
+    }
+
+    onRowClick(handler) {
+        let row = "tbody tr.clickable-row td";
+
+        if (this.element.find(".select-all").length !== 0) {
+            row += ":not(:first-child)";
+        }
+
+        this.element.on("click", row, handler);
+    }
+
+    redirectToRowPage(e) {
+        window.open(
+            $(e.currentTarget).parent().data("href"),
+            e.ctrlKey ? "_blank" : "_self"
+        );
+    }
+
+    selectAllRowsEventListener() {
+        this.element.find(".select-all").on("change", (e) => {
+            this.element
+                .find(".select-row")
+                .prop("checked", e.currentTarget.checked);
+        });
+    }
+
+    selectRowEventListener() {
+        this.element.find(".select-row").on("change", (e) => {
+            if (e.currentTarget.checked) {
+                this.appendToSelected(e.currentTarget.value);
+            } else {
+                this.removeFromSelected(e.currentTarget.value);
+            }
+        });
+    }
+
+    appendToSelected(id) {
+        id = parseInt(id);
+
+        if (!FleetCart.dataTable.selected[this.selector].includes(id)) {
+            FleetCart.dataTable.selected[this.selector].push(id);
+        }
+    }
+
+    removeFromSelected(id) {
+        id = parseInt(id);
+
+        FleetCart.dataTable.selected[this.selector].remove(id);
+    }
+
+    checkSelectedCheckboxes(selectedIds) {
+        let rows = this.element.find(".select-row");
+
+        let checkableRows = rows.toArray().filter((row) => {
+            return selectedIds.includes(parseInt(row.value));
+        });
+
+        $(checkableRows).prop("checked", true);
+    }
+
+    route(name, params) {
+        let router = FleetCart.dataTable.routes[this.selector][name];
+
+        if (typeof router === "string") {
+            router = { name: router, params };
+        }
+
+        router.params = _.merge(params, router.params);
+
+        return window.route(router.name, router.params);
+    }
+
+    hasRoute(name) {
+        return FleetCart.dataTable.routes[this.selector][name] !== undefined;
+    }
+
+    static setRoutes(selector, routes) {
+        FleetCart.dataTable.routes[selector] = routes;
+    }
+
+    static setSelectedIds(selector, selected) {
+        FleetCart.dataTable.selected[selector] = selected;
+    }
+
+    static getSelectedIds(selector) {
+        return FleetCart.dataTable.selected[selector];
+    }
+
+    static reload(selector, callback, resetPaging = false) {
+        $(selector).DataTable().ajax.reload(callback, resetPaging);
+    }
+
+    static getRowIds(rows) {
+        return rows.toArray().reduce((ids, row) => {
+            return ids.concat(row.value);
+        }, []);
+    }
+
+    static removeLengthFields() {
+        $(".dataTables_length select").remove();
+    }
+
+    addErrorHandler() {
+        $.fn.dataTable.ext.errMode = (settings, helpPage, message) => {
+            this.element.html(message);
+        };
+    }
+
+    // https://datatables.net/plug-ins/api/processing()
+    registerTableProcessingPlugin() {
+        $.fn.dataTable.Api.register("processing()", function (show) {
+            return this.iterator("table", function (ctx) {
+                ctx.oApi._fnProcessingDisplay(ctx, show);
+            });
+        });
+    }
+}

Modules/Admin/Resources/assets/js/Form.js

@@ -0,0 +1,20 @@
+export default class {
+    appendHiddenInput(form, name, value) {
+        $('<input>').attr({
+            type: 'hidden',
+            name: name ,
+            value: value,
+        }).appendTo(form);
+    }
+
+    appendHiddenInputs(form, name, values) {
+        for (let value of values) {
+            this.appendHiddenInput(form, name + '[]', value);
+        }
+    }
+
+    removeErrors() {
+        $('.has-error > .help-block').remove();
+        $('.has-error').removeClass('has-error');
+    }
+}

Modules/Admin/Resources/assets/js/app.js

@@ -0,0 +1,215 @@
+$.FleetCart = {};
+
+/* ----------------------------------
+   - FleetCart Options -
+   ---------------------------------- */
+$.FleetCart.options = {
+    animationSpeed: 300,
+    // Sidebar push menu toggle button selector
+    sidebarToggleSelector: '[data-toggle=\'offcanvas\']',
+    // Activate sidebar push menu
+    sidebarPushMenu: true,
+    // BoxRefresh Plugin
+    enableBoxRefresh: true,
+    // Bootstrap.js tooltip
+    enableBSToppltip: true,
+    BSTooltipSelector: '[data-toggle=\'tooltip\']',
+    // Control Sidebar Tree views
+    enableControlTreeView: true,
+    // The standard screen sizes that bootstrap uses.
+    screenSizes: {
+        xs: 480,
+        sm: 768,
+        md: 992,
+        lg: 1200,
+    },
+};
+
+/* ----------------------------------
+   - Implementation -
+   ---------------------------------- */
+$(function () {
+    // Easy access to options
+    var o = $.FleetCart.options;
+
+    // Set up the object
+    _init();
+
+    // Activate layout
+    $.FleetCart.layout.activate();
+
+    // Enable sidebar tree view controls
+    if (o.enableControlTreeView) {
+        $.FleetCart.tree('.sidebar');
+    }
+
+    // Activate sidebar push menu
+    if (o.sidebarPushMenu) {
+        $.FleetCart.pushMenu.activate(o.sidebarToggleSelector);
+    }
+
+    // Activate Bootstrap tooltip
+    if (o.enableBSToppltip) {
+        $('body').tooltip({
+            selector: o.BSTooltipSelector,
+            container: 'body',
+        });
+    }
+});
+
+/* ----------------------------------
+   - Initialize the FleetCart Object -
+   ---------------------------------- */
+function _init() {
+
+    // Layout
+    $.FleetCart.layout = {
+        activate: function () {
+            var _this = this;
+            _this.fix();
+
+            $(window, '.wrapper').resize(function () {
+                _this.fix();
+            });
+        },
+        fix: function () {
+            var window_height = $(window).height();
+
+            $('.wrapper').css('min-height', window_height + 'px');
+        }
+    };
+
+    // PushMenu
+    $.FleetCart.pushMenu = {
+        activate: function (toggleBtn) {
+            var screenSizes = $.FleetCart.options.screenSizes;
+
+            $(document).on('click', toggleBtn, function (e) {
+                e.preventDefault();
+
+                if ($(window).outerWidth() > (screenSizes.md - 1)) {
+                    if ($('body').hasClass('sidebar-collapse')) {
+                        $('body').removeClass('sidebar-collapse').trigger('expanded.pushMenu');
+
+                        return;
+                    }
+
+                    $('body').addClass('sidebar-collapse').trigger('collapsed.pushMenu');
+
+                    return;
+                }
+
+                if ($('body').hasClass('sidebar-open')) {
+                    $('body').removeClass('sidebar-open').removeClass('sidebar-collapse').trigger('collapsed.pushMenu');
+
+                    return;
+                }
+
+                $('body').addClass('sidebar-open').trigger('expanded.pushMenu');
+            });
+
+            $(window).on('resize', function () {
+                if ($(window).outerWidth() > (screenSizes.md - 1)) {
+                    return;
+                } else {
+                    $('body').removeClass('sidebar-collapse');
+                }
+            });
+
+            $('.content-wrapper').click(function () {
+                if ($(window).width() <= (screenSizes.md - 1) && $('body').hasClass('sidebar-open')) {
+                    $('body').removeClass('sidebar-open');
+                }
+            });
+        }
+    };
+
+    // Tree
+    $.FleetCart.tree = function (menu) {
+        var animationSpeed = $.FleetCart.options.animationSpeed;
+
+        $(document).off('click', menu + ' li a')
+            .on('click', menu + ' li a', function (e) {
+                var self = $(this);
+                var checkElement = self.next();
+                var activeElement = self.closest('.sidebar-menu').find('.active');
+
+                if (checkElement.is('.treeview-menu')) {
+                    self.closest('.sidebar-menu').find('.selected').removeClass('selected');
+
+                    e.preventDefault();
+                }
+
+                if (self.parent().is('.active')) {
+                    activeElement.toggleClass('closed');
+                } else {
+                    activeElement.addClass('closed');
+                }
+
+                if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible')) && (!$('body').hasClass('sidebar-collapse'))) {
+                    self.parent().removeClass('selected');
+
+                    checkElement.slideUp(animationSpeed);
+                }
+
+                else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
+                    var ul = self.parents('ul').first().find('ul:visible').slideUp(animationSpeed);
+
+                    self.parent().addClass('selected');
+                    checkElement.slideDown(animationSpeed);
+                }
+            });
+    };
+}
+
+/* ----------------------------------
+   - Box Refresh Button -
+   ---------------------------------- */
+(function ($) {
+    $.fn.boxRefresh = function (options) {
+        var settings = $.extend({
+            trigger: '.refresh-btn',
+            source: '',
+            onLoadStart: function (box) {
+                return box;
+            },
+            onLoadDone: function (box) {
+                return box;
+            },
+        }, options);
+
+        var overlay = $('<div class="overlay"><div class="fa fa-refresh fa-spin"></div></div>');
+
+        return this.each(function () {
+            if (settings.source === '') {
+                if (window.console) {
+                    window.console.log('Please specify a source first - boxRefresh()');
+                }
+
+                return;
+            }
+
+            var box = $(this);
+            var rBtn = box.find(settings.trigger).first();
+
+            rBtn.on('click', function (e) {
+                e.preventDefault();
+                start(box);
+
+                box.find('.box-body').load(settings.source, function () {
+                    done(box);
+                });
+            });
+        });
+
+        function start(box) {
+            box.append(overlay);
+            settings.onLoadStart.call(box);
+        }
+
+        function done(box) {
+            box.find(overlay).remove();
+            settings.onLoadDone.call(box);
+        }
+    };
+})(jQuery);

Modules/Admin/Resources/assets/js/dashboard.js

@@ -0,0 +1,64 @@
+import Chart from 'chart.js';
+
+$(function () {
+    $.ajax({
+        type: 'GET',
+        url: route('admin.sales_analytics.index'),
+        success(response) {
+            let data = { labels: response.labels, sales: [], formatted: [], totalOrders: [] };
+
+            for (let item of response.data) {
+                data.sales.push(item.total.amount);
+                data.formatted.push(item.total.formatted);
+                data.totalOrders.push(item.total_orders);
+            }
+
+            initSalesAnalyticsChart(data);
+        },
+    });
+});
+
+function initSalesAnalyticsChart(data) {
+    new Chart($('.sales-analytics .chart'), {
+        type: 'bar',
+        data: {
+            labels: data.labels,
+            datasets: [{
+                data: data.sales,
+                backgroundColor: [
+                    'rgba(255, 99, 132, 0.5)',
+                    'rgba(54, 162, 235, 0.5)',
+                    'rgba(255, 206, 86, 0.5)',
+                    'rgba(75, 192, 192, 0.5)',
+                    'rgba(153, 102, 255, 0.5)',
+                    'rgba(255, 159, 64, 0.5)',
+                ],
+            }],
+        },
+        barThickness: 1,
+        options: {
+            maintainAspectRatio: false,
+            legend: {
+                display: false,
+            },
+            tooltips: {
+                displayColors: false,
+                callbacks: {
+                    label(item) {
+                        let orders = `${trans('admin::dashboard.sales_analytics.orders')}: ${data.totalOrders[item.index]}`;
+                        let sales = `${trans('admin::dashboard.sales_analytics.sales')}: ${data.formatted[item.index]}`;
+
+                        return [orders, sales];
+                    },
+                },
+            },
+            scales: {
+                yAxes: [{
+                    ticks: {
+                        beginAtZero: true,
+                    },
+                }],
+            },
+        },
+    });
+}

Modules/Admin/Resources/assets/js/functions.js

@@ -0,0 +1,77 @@
+import { ohSnap } from './ohsnap';
+
+export function trans(langKey, replace = {}) {
+    let line = window.FleetCart.langs[langKey];
+
+    for (let key in replace) {
+        line = line.replace(`:${key}`, replace[key]);
+    }
+
+    return line;
+}
+
+export function keypressAction(actions) {
+    $(document).keypressAction({ actions });
+}
+
+export function notify(type, message, { duration = 5000, context = document }) {
+    let types = {
+        'info': 'blue',
+        'success': 'green',
+        'warning': 'yellow',
+        'error': 'red',
+    };
+
+    ohSnap(message, {
+        'container-id': 'notification-toast',
+        context,
+        color: types[type],
+        duration,
+    });
+}
+
+export function info(message, duration) {
+    notify('info', message, { duration });
+}
+
+export function success(message, duration) {
+    notify('success', message, { duration });
+}
+
+export function warning(message, duration) {
+    notify('warning', message, { duration });
+}
+
+export function error(message, duration) {
+    notify('error', message, { duration });
+}
+
+/**
+ * @see https://stackoverflow.com/a/3955096
+ */
+if (! Array.prototype.remove) {
+    Array.prototype.remove = function () {
+        let what, a = arguments, L = a.length, ax;
+
+        while (L && this.length) {
+            what = a[--L];
+
+            while ((ax = this.indexOf(what)) !== -1) {
+                this.splice(ax, 1);
+            }
+        }
+
+        return this;
+    };
+}
+
+/**
+ * @see https://stackoverflow.com/a/4673436
+ */
+if (! String.prototype.format) {
+    String.prototype.format = function () {
+        return this.replace(/%(\d+)%/g, (match, number) => {
+            return typeof arguments[number] !== 'undefined' ? arguments[number] : match;
+        });
+    };
+}

Modules/Admin/Resources/assets/js/jquery.keypressAction.js

@@ -0,0 +1,38 @@
+(function ($, window, document, undefined) {
+    let pluginName = 'keypressAction', defaults = {};
+
+    // The actual plugin constructor
+    function keypressAction(element, options) {
+        this.element = element;
+        this.settings = $.extend({}, defaults, options);
+        this._defaults = defaults;
+        this._name = pluginName;
+        this.init();
+    }
+
+    $.extend(keypressAction.prototype, {
+        bindKeyToRoute(key, route) {
+            Mousetrap.bind([key], (e) => {
+                window.location = route;
+
+                return false;
+            });
+        },
+        init() {
+            $.each(this.settings.actions, (index, object) => {
+                this.bindKeyToRoute(object.key, object.route);
+            });
+        },
+    });
+
+    $.fn[pluginName] = function (options) {
+        this.each(function () {
+            if (! $.data(this, `plugin_${pluginName}`)) {
+                $.data(this, `plugin_${pluginName}`, new keypressAction(this, options));
+            }
+        });
+
+        // chain jQuery functions
+        return this;
+    };
+})(jQuery, window, document);

Modules/Admin/Resources/assets/js/main.js

@@ -0,0 +1,43 @@
+window._ = require('lodash');
+window.Sortable = require('sortablejs');
+window.$ = window.jQuery = require('jquery');
+
+require('bootstrap');
+require('selectize');
+require('flatpickr');
+require('jquery-slimscroll');
+require('mousetrap');
+require('datatables.net');
+require('datatables.net-bs');
+
+require('./app');
+require('./wysiwyg');
+require('./jquery.keypressAction');
+
+import Admin from './Admin';
+import Form from './Form';
+import DataTable from './DataTable';
+import { trans, keypressAction, notify, info, success, warning, error } from './functions';
+
+window.admin = new Admin();
+window.form = new Form();
+window.DataTable = DataTable;
+
+window.trans = trans;
+window.keypressAction = keypressAction;
+window.notify = notify;
+window.info = info;
+window.success = success;
+window.warning = warning;
+window.error = error;
+
+$.ajaxSetup({
+    headers: {
+        'Authorization': FleetCart.apiToken,
+        'X-CSRF-TOKEN': FleetCart.csrfToken,
+    },
+});
+
+$(document).on('preInit.dt', () => {
+    $('.dataTables_length select').addClass('custom-select-black');
+});

Modules/Admin/Resources/assets/js/ohsnap.js

@@ -0,0 +1,85 @@
+/**
+ * == OhSnap!.js ==
+ * A simple jQuery/Zepto notification library designed to be used in mobile apps
+ *
+ * author: Justin Domingue
+ * date: september 18, 2015
+ * version: 1.0.0
+ * copyright - nice copyright over here
+ */
+
+/* Shows a toast on the page
+ * Params:
+ *  text: text to show
+ *  options: object that can override the following options
+ *    color: alert will have class 'ohsnap-alert-color'. Default null
+ *    icon: class of the icon to show before the alert. Default null
+ *    duration: duration of the notification in ms. Default 5000ms
+ *    container-id: id of the alert container. Default 'ohsnap'
+ *    fade-duration: duration of the fade in/out of the alerts. Default 'fast'
+*/
+export function ohSnap(text, options) {
+    let defaultOptions = {
+        'color'       : null,     // color is  CSS class `ohsnap-alert-color`
+        'icon'        : null,     // class of the icon to show before the alert text
+        'duration'    : 5000,   // duration of the notification in ms
+        'container-id': 'ohsnap', // id of the alert container
+        'context': document,
+        'fade-duration': 'fast',  // duration of the fade in/out of the alerts. fast, slow or integer in ms
+    };
+
+    options = (typeof options === 'object') ? $.extend(defaultOptions, options) : defaultOptions;
+
+    let container = $('#' + options['container-id'], options.context),
+        icon_markup = '',
+        color_markup = '';
+
+    if (options.icon) {
+        icon_markup = '<span class=\'' + options.icon + '\'></span> ';
+    }
+
+    if (options.color) {
+        color_markup = 'ohsnap-alert-' + options.color;
+    }
+
+    // Generate the HTML
+    let html = $('<div class="ohsnap-alert ' + color_markup + '">' + icon_markup + text + '</div>').fadeIn(options['fade-duration']);
+
+    // Append the label to the container
+    container.append(html);
+
+    // Remove the notification on click
+    html.on('click', function () {
+        ohSnapX($(this));
+    });
+
+    // After 'duration' seconds, the animation fades out
+    setTimeout(function () {
+        ohSnapX(html);
+    }, options.duration);
+}
+
+/* Removes a toast from the page
+ * params:
+ *    Called without arguments, the function removes all alerts
+ *    element: a jQuery object to remove
+ *    options:
+ *      duration: duration of the alert fade out - 'fast', 'slow' or time in ms. Default 'fast'
+ */
+export function ohSnapX(element, options) {
+    let defaultOptions = {
+        'duration': 'fast',
+    };
+
+    options = (typeof options === 'object') ? $.extend(defaultOptions, options) : defaultOptions;
+
+    if (typeof element !== 'undefined') {
+        element.fadeOut(options.duration, function () {
+            $(this).remove();
+        });
+    } else {
+        $('.ohsnap-alert').fadeOut(options.duration, function () {
+            $(this).remove();
+        });
+    }
+}

Modules/Admin/Resources/assets/js/wysiwyg.js

@@ -0,0 +1,38 @@
+import tinyMCE from 'tinymce';
+
+tinyMCE.baseURL = `${FleetCart.baseUrl}/modules/admin/js/wysiwyg`;
+
+tinyMCE.init({
+    selector: '.wysiwyg',
+    theme: 'silver',
+    mobile: { theme: 'mobile' },
+    height: 350,
+    menubar: false,
+    branding: false,
+    image_advtab: true,
+    automatic_uploads: true,
+    media_alt_source: false,
+    media_poster: false,
+    relative_urls: false,
+    directionality: FleetCart.rtl ? 'rtl' : 'ltr',
+    cache_suffix: `?v=${FleetCart.version}`,
+    plugins: 'lists, link, table, image, media, paste, autosave, autolink, wordcount, code, fullscreen',
+    toolbar: 'styleselect bold italic underline | bullist numlist | alignleft aligncenter alignright | outdent indent | image media link table | code fullscreen',
+
+    images_upload_handler(blobInfo, success, failure) {
+        let formData = new FormData();
+        formData.append('file', blobInfo.blob(), blobInfo.filename());
+
+        $.ajax({
+            method: 'POST',
+            url: route('admin.media.store'),
+            data: formData,
+            processData: false,
+            contentType: false,
+        }).then((file) => {
+            success(file.path);
+        }).catch((xhr) => {
+            failure(xhr.responseJSON.message);
+        });
+    },
+});

Modules/Admin/Resources/assets/sass/accordion.scss

@@ -0,0 +1,257 @@
+.accordion-content {
+    background: #ffffff;
+    padding: 20px 0px;
+    border-radius: 3px;
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
+}
+
+.accordion-box {
+    > .panel-group {
+        border-radius: 3px;
+        overflow: hidden;
+    }
+
+    .panel {
+        box-shadow: none;
+        border-bottom: none;
+        border-radius: 0;
+        border-color: #e9e9e9;
+
+        + .panel {
+            margin: 0;
+        }
+    }
+
+    > .panel-group > .panel:last-child {
+        border-bottom: 1px solid #e9e9e9;
+    }
+
+    .panel-group {
+        margin: 0;
+    }
+}
+
+#sliders-accordion > .panel {
+    border-radius: 3px;
+}
+
+.accordion-box .panel-heading {
+    padding: 0;
+    background: #f6f6f7;
+
+    [data-toggle="collapse"] {
+        &.collapsed {
+            background: #ffffff;
+            transition: all 200ms ease-in-out;
+
+            &:hover {
+                background: #f4f4f4;
+            }
+        }
+
+        &:after {
+            position: absolute;
+            font-family: FontAwesome;
+            content: "\f107";
+            right: 10px;
+            top: 12px;
+            font-size: 20px;
+            line-height: 25px;
+            color: #000000;
+            transform: rotateX(180deg);
+            transition: all 200ms ease-in-out;
+        }
+    }
+}
+
+.accordion-box-content .panel-heading [data-toggle="collapse"]:after {
+    position: absolute;
+    font-family: FontAwesome;
+    content: "\f107";
+    right: 10px;
+    top: 12px;
+    font-size: 20px;
+    line-height: 25px;
+    color: #000000;
+    transform: rotateX(180deg);
+    transition: all 200ms ease-in-out;
+    top: 15px;
+}
+
+.accordion-box .panel-heading [data-toggle="collapse"].collapsed:after,
+.accordion-box-content .panel-heading [data-toggle="collapse"].collapsed:after {
+    color: #737881;
+    transform: rotateX(0deg);
+}
+
+.accordion-box .panel-heading [data-toggle="collapse"].collapsed:hover:after {
+    color: #000000;
+}
+
+.accordion-box-content {
+    .panel-heading [data-toggle="collapse"].collapsed:hover:after {
+        color: #000000;
+    }
+
+    .panel-group .panel + .panel {
+        margin-top: 0;
+        border-top: none;
+    }
+}
+
+.accordion-box {
+    .panel-title a {
+        position: relative;
+        padding: 12px 15px;
+        display: block;
+        text-decoration: none;
+        outline: none;
+
+        &.has-error.collapsed {
+            border-left: 3px solid #ff3366;
+        }
+    }
+    .panel-body a {
+        color: #333333;
+        display: block;
+        padding: 14px 15px;
+        transition: 200ms ease-in-out;
+
+        &:hover {
+            background: #e9e9e9;
+        }
+
+        &.active {
+            background: #ffffff;
+            border-top: 1px solid #d2d6de;
+            border-bottom: 1px solid #d2d6de;
+            border-left: 3px solid #6f8dfd;
+            margin-right: -1px;
+        }
+    }
+
+    .panel-title a {
+        &:active,
+        &:hover,
+        &:focus {
+            color: #333333;
+        }
+    }
+
+    .panel-body {
+        padding: 10px 0 10px 8px;
+        background: #eeeeee;
+    }
+}
+
+.accordion-box-content {
+    .tab-content > .form-group:last-child {
+        margin-bottom: 0;
+        clear: both;
+    }
+
+    .box-footer {
+        padding-left: 0;
+    }
+
+    .tab-content-title {
+        margin-top: 0;
+        margin-bottom: 20px;
+        padding-bottom: 8px;
+        border-bottom: 1px solid #d2d6de;
+    }
+
+    .box-content {
+        margin-top: 10px;
+
+        h4.section-title {
+            font-weight: 500;
+            margin-bottom: 10px;
+        }
+    }
+}
+
+.accordion-tab {
+    border-bottom: none;
+
+    > li {
+        float: none;
+        z-index: 0;
+
+        > a {
+            position: relative;
+            color: #333333;
+            border-radius: 3px 0 0 3px;
+            margin-right: -1px;
+            padding: 14px 15px;
+            outline: none;
+            transition: 100ms ease-in-out;
+
+            &:hover {
+                border-color: #e9e9e9;
+            }
+        }
+
+        &.has-error > a {
+            border-left: 3px solid #ff3366;
+        }
+
+        &.active > a {
+            border-left: 3px solid #0068e1;
+            border-right: 0;
+            border-right-color: transparent;
+            border-bottom-color: #e9e9e9;
+
+            &:hover,
+            &:focus {
+                border-left: 3px solid #0068e1;
+                border-bottom-color: #e9e9e9;
+                border-right: 0;
+            }
+        }
+    }
+
+    &.nav-tabs > li.active > a {
+        border-top-color: #e9e9e9;
+    }
+}
+
+.nav-tabs > li.active > a:hover,
+.accordion-tab.nav-tabs > li.active > a:focus {
+    border-top-color: #e9e9e9;
+}
+
+.content-accordion {
+    &.panel-group {
+        margin-bottom: 15px;
+    }
+    .panel {
+        border-radius: 3px;
+        border: none;
+        border: 1px solid #e9e9e9;
+    }
+    .panel-heading {
+        background: #f6f6f7;
+        padding: 0;
+        border-radius: 0;
+    }
+    .panel-title a {
+        display: block;
+        padding: 15px;
+
+        &:active,
+        &:hover,
+        &:focus {
+            color: #333333;
+        }
+    }
+    .panel-default > .panel-heading + .panel-collapse > .panel-body {
+        border-top-color: #e9e9e9;
+    }
+}
+
+@media screen and (max-width: 991px) {
+    .accordion-box {
+        margin-bottom: 30px;
+    }
+}

Modules/Admin/Resources/assets/sass/alert.scss

@@ -0,0 +1,68 @@
+.alert {
+	border: none;
+	color: #555555;
+	font-size: 15px;
+	padding: 12px 15px;
+	border-radius: 3px;
+
+	.close {
+		top: 4px;
+		right: 0;
+		outline: 0;
+		opacity: 0.5;
+		color: #626060;
+		text-shadow: none;
+		font-weight: normal;
+		transition: 200ms ease-in-out;
+
+		&:hover {
+			opacity: 0.9;
+		}
+	}
+
+	.alert-text {
+		display: block;
+		margin: 6px 20px 0 45px;
+	}
+}
+
+.alert-icon {
+	float: left;
+	width: 30px;
+	height: 30px;
+	display: table;
+	border-radius: 50%;
+	text-align: center;
+
+	> i {
+		font-size: 18px;
+		display: table-cell;
+		vertical-align: middle;
+	}
+}
+
+.alert-success {
+	background: #deedee;
+	border-left: 3px solid #37bc9b;
+
+	.alert-icon {
+		background: #c5e6e2;
+
+		> i {
+			color: #37bc9b;
+		}
+	}
+}
+
+.alert-danger {
+	background: #f2e8ee;
+	border-left: 3px solid #ff3366;
+
+	.alert-icon {
+		background: #f4ced5;
+
+		> i {
+			color: #ff3366;
+		}
+	}
+}

Modules/Admin/Resources/assets/sass/classes.scss

@@ -0,0 +1,619 @@
+/* buttons */
+
+.btn {
+    font-size: 15px;
+    border: none;
+    border-radius: 3px;
+    padding: 10px 20px;
+    transition: 200ms ease-in-out;
+}
+
+.btn-default {
+    background: #f1f1f1;
+    outline: 0;
+    border-color: #dddddd;
+    &.focus,
+    &:focus,
+    &.active {
+        background: #f1f1f1;
+        outline: 0;
+        border-color: #dddddd;
+    }
+
+    &:active {
+        background: #f1f1f1;
+        outline: 0;
+        border-color: #dddddd;
+
+        &:hover {
+            background: #f1f1f1;
+            outline: 0;
+            border-color: #dddddd;
+        }
+    }
+
+    &.active:hover,
+    &:active:focus,
+    &.active:focus,
+    &:active.focus,
+    &.active.focus {
+        background: #f1f1f1;
+        outline: 0;
+        border-color: #dddddd;
+    }
+
+    &.disabled {
+        &:hover,
+        &.focus,
+        &:focus {
+            background: #f1f1f1;
+            outline: 0;
+            border-color: #dddddd;
+        }
+    }
+
+    &[disabled] {
+        &:focus,
+        &:hover,
+        &.focus,
+        &.active,
+        &:active {
+            background: #f1f1f1;
+            outline: 0;
+            border-color: #dddddd;
+        }
+    }
+}
+
+fieldset[disabled] .btn-default {
+    &:focus,
+    &.focus,
+    &:hover {
+        background: #f1f1f1;
+        outline: 0;
+        border-color: #dddddd;
+    }
+}
+
+.open > .dropdown-toggle.btn-default {
+    background: #f1f1f1;
+    outline: 0;
+    border-color: #dddddd;
+
+    &:focus,
+    &.focus,
+    &:hover {
+        background: #f1f1f1;
+        outline: 0;
+        border-color: #dddddd;
+    }
+}
+
+.btn-default:hover {
+    border-color: #dddddd;
+    background: #e7e7e7;
+}
+
+.btn-primary {
+    background: #0068e1;
+    outline: 0;
+
+    &.focus,
+    &:focus,
+    &:active,
+    &.active,
+    &:active:hover,
+    &.active:hover,
+    &:active:focus,
+    &.active:focus,
+    &:active.focus,
+    &.active.focus {
+        background: #0068e1;
+        outline: 0;
+    }
+
+    &.disabled {
+        &:hover,
+        &.focus,
+        &:focus {
+            background: #0068e1;
+            outline: 0;
+        }
+    }
+
+    &[disabled] {
+        &:focus,
+        &:hover,
+        &.focus,
+        &.active,
+        &:active {
+            background: #0068e1;
+            outline: 0;
+        }
+    }
+}
+
+fieldset[disabled] .btn-primary {
+    &:focus,
+    &.focus,
+    &:hover {
+        background: #0068e1;
+        outline: 0;
+    }
+}
+
+.open > .dropdown-toggle.btn-primary {
+    background: #0068e1;
+    outline: 0;
+
+    &:focus,
+    &.focus,
+    &:hover {
+        background: #0068e1;
+        outline: 0;
+    }
+}
+
+.btn-primary:hover {
+    background: #0059bd;
+}
+
+.btn-danger {
+    background: #fc4b4b;
+
+    &.focus,
+    &:focus,
+    &.active {
+        background: #fc4b4b;
+    }
+
+    &:active {
+        background: #fc4b4b;
+
+        &:hover {
+            background: #fc4b4b;
+        }
+    }
+
+    &.active:hover,
+    &:active:focus,
+    &.active:focus,
+    &:active.focus,
+    &.active.focus {
+        background: #fc4b4b;
+    }
+
+    &.disabled {
+        &:hover,
+        &.focus,
+        &:focus {
+            background: #fc4b4b;
+        }
+    }
+
+    &[disabled] {
+        &:focus,
+        &:hover,
+        &.focus,
+        &.active,
+        &:active {
+            background: #fc4b4b;
+        }
+    }
+}
+
+fieldset[disabled] .btn-danger {
+    &:focus,
+    &.focus,
+    &:hover {
+        background: #fc4b4b;
+    }
+}
+
+.open > .dropdown-toggle.btn-danger {
+    background: #fc4b4b;
+    &:focus,
+    &.focus,
+    &:hover {
+        background: #fc4b4b;
+    }
+}
+
+.btn-danger:hover {
+    background: #ff7070;
+}
+
+.btn-info {
+    background: #4bcffc;
+
+    &.focus,
+    &:focus,
+    &.active {
+        background: #4bcffc;
+    }
+
+    &:active {
+        background: #4bcffc;
+
+        &:hover {
+            background: #4bcffc;
+        }
+    }
+
+    &.active:hover,
+    &:active:focus,
+    &.active:focus,
+    &:active.focus,
+    &.active.focus {
+        background: #4bcffc;
+    }
+
+    &.disabled {
+        &:hover,
+        &.focus,
+        &:focus {
+            background: #4bcffc;
+        }
+    }
+
+    &[disabled] {
+        &:focus,
+        &:hover,
+        &.focus,
+        &.active,
+        &:active {
+            background: #4bcffc;
+        }
+    }
+}
+
+fieldset[disabled] .btn-info {
+    &:focus,
+    &.focus,
+    &:hover {
+        background: #4bcffc;
+    }
+}
+
+.open > .dropdown-toggle.btn-info {
+    background: #4bcffc;
+
+    &:focus,
+    &.focus,
+    &:hover {
+        background: #4bcffc;
+    }
+}
+
+.btn-info:hover {
+    background: #6fcffd;
+}
+
+.btn {
+    &:focus,
+    &:hover:focus,
+    &:active:focus {
+        outline: 0;
+        box-shadow: none;
+    }
+}
+
+.btn-loading {
+    position: relative;
+    color: transparent !important;
+
+    &:after {
+        position: absolute;
+        content: "";
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        margin: auto;
+        height: 16px;
+        width: 16px;
+        border: 2px solid #ffffff;
+        border-radius: 100%;
+        border-right-color: transparent;
+        border-top-color: transparent;
+        animation: spinAround 600ms infinite linear;
+    }
+
+    &.btn-default:after {
+        border: 2px solid #0068e1;
+        border-right-color: transparent;
+        border-top-color: transparent;
+    }
+}
+
+@keyframes spinAround {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(359deg);
+    }
+}
+
+/* bg color */
+
+.bg-black {
+    background: #494f5a;
+}
+
+.bg-red {
+    background: #fc4b4b;
+}
+
+.bg-green {
+    background: #37bc9b;
+}
+
+.bg-blue {
+    background: #0068e1;
+}
+
+/* text */
+
+.text-black {
+    color: #494f5a;
+}
+
+.text-red {
+    color: #fc4b4b;
+
+    &:hover,
+    &:focus {
+        color: #fc4b4b;
+    }
+}
+
+.text-green {
+    color: #37bc9b;
+}
+
+.text-blue {
+    color: #0068e1;
+}
+
+/* label */
+
+.label {
+    font-weight: normal;
+    padding: 5px 10px;
+}
+
+.label-default {
+    background: #d2d6de;
+}
+
+.label-primary {
+    background: #0068e1;
+}
+
+.label-success {
+    background: #37bc9b;
+}
+
+.label-danger {
+    background: #fc4b4b;
+}
+
+
+/* form error */
+
+.has-error {
+    .help-block,
+    .control-label,
+    .radio,
+    .checkbox,
+    .radio-inline,
+    .checkbox-inline,
+    &.radio label,
+    &.checkbox label,
+    &.radio-inline label,
+    &.checkbox-inline label {
+        color: #ff3366;
+    }
+
+    .form-control {
+        border-color: #ff3366;
+        box-shadow: none;
+
+        &:focus {
+            border-color: #ff3366;
+            box-shadow: none;
+        }
+    }
+
+    .input-group-addon {
+        color: #ff3366;
+        background-color: #f2dede;
+        border-color: #ff3366;
+    }
+
+    .form-control-feedback {
+        color: #ff3366;
+    }
+}
+
+.help-block {
+    margin-bottom: 0;
+}
+
+.checkbox {
+    label {
+        font-size: 15px;
+        color: #333333;
+        margin-bottom: 0 !important;
+    }
+
+    [type="checkbox"] {
+        &:checked,
+        &:not(:checked) {
+            position: absolute;
+            display: none;
+        }
+
+        &:checked + label,
+        &:not(:checked) + label {
+            font-family: "Roboto", sans-serif;
+            position: relative;
+            padding-left: 28px;
+            cursor: pointer;
+            display: inline-block;
+            text-align: left;
+        }
+
+        &:checked + label:before,
+        &:not(:checked) + label:before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: 1px;
+            width: 17px;
+            height: 17px;
+            border-radius: 3px;
+            background: #e9e9e9;
+            transition: 200ms ease-in-out;
+        }
+
+        &:checked + label:after,
+        &:not(:checked) + label:after {
+            content: "\f00c";
+            font-family: FontAwesome;
+            font-size: 13px;
+            position: absolute;
+            top: 1px;
+            left: 2px;
+            color: #ffffff;
+            -webkit-text-stroke: 1px #0068e1;
+            transition: 200ms ease-in-out;
+        }
+
+        &:checked + label:before {
+            background: #0068e1;
+        }
+
+        &:not(:checked) + label:after {
+            opacity: 0;
+            transform: scale(0);
+        }
+
+        &:checked + label:after {
+            -webkit-text-stroke: 1px #0068e1;
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+}
+
+/* radio button */
+
+.radio {
+    text-align: left;
+
+    label {
+        color: #333333;
+    }
+
+    [type="radio"] {
+        &:checked,
+        &:not(:checked) {
+            position: absolute;
+            left: -9999px;
+        }
+
+        &:checked + label,
+        &:not(:checked) + label {
+            font-family: "Roboto", sans-serif;
+            position: relative;
+            padding-left: 28px;
+            cursor: pointer;
+            line-height: 22px;
+            display: inline-block;
+        }
+
+        &:checked + label:before,
+        &:not(:checked) + label:before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: 1px;
+            width: 19px;
+            height: 19px;
+            border: 1px solid #d2d6de;
+            border-radius: 100%;
+            background: #ffffff;
+        }
+
+        &:checked + label:after {
+            content: "";
+            width: 13px;
+            height: 13px;
+            background: #0068e1;
+            position: absolute;
+            top: 4px;
+            left: 3px;
+            border-radius: 100%;
+            transition: 200ms ease-in-out;
+        }
+
+        &:not(:checked) + label:after {
+            content: "";
+            width: 14px;
+            height: 14px;
+            background: #0068e1;
+            position: absolute;
+            top: 3px;
+            left: 3px;
+            border-radius: 100%;
+            transition: 200ms ease-in-out;
+            opacity: 0;
+            transform: scale(0);
+        }
+
+        &:checked + label:after {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+
+    + .radio {
+        margin-top: 0;
+    }
+}
+
+.checkbox + .checkbox {
+    margin-top: 0;
+}
+
+/* select option */
+
+.custom-select-white {
+    appearance: none;
+    background: #f9f9f9 url('../images/arrow-white.png') no-repeat right 8px center;
+    background-size: 10px;
+    line-height: normal !important;
+    height: 40px;
+    padding: 0 30px 0 10px;
+    border-radius: 3px;
+    border-color: #d9d9d9;
+}
+
+.custom-select-black {
+    appearance: none;
+    background: #ffffff url('../images/arrow-black.png') no-repeat right 8px center;
+    background-size: 10px;
+    line-height: normal !important;
+    height: 40px;
+    padding: 0 30px 0 10px;
+    border-radius: 3px;
+    border-color: #d9d9d9;
+}
+
+.custom-select-white:focus,
+.custom-select-black:focus {
+    outline: 0;
+}

Modules/Admin/Resources/assets/sass/dashboard.scss

@@ -0,0 +1,152 @@
+.grid {
+	.single-grid {
+		position: relative;
+		overflow: hidden;
+		height: 130px;
+		padding: 0 15px;
+		background: #ffffff;
+		border-radius: 3px;
+        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
+
+        h4 {
+            margin: 22px 0;
+        }
+
+        span {
+            font-size: 26px;
+            margin-top: 3px;
+        }
+
+        i {
+            font-size: 36px;
+            position: absolute;
+            left: 15px;
+            bottom: 22px;
+            margin: 0;
+        }
+
+        &.total-orders {
+            i {
+                color: rgba(0, 104, 225, 0.7);
+            }
+        }
+
+        &.total-sales {
+            i {
+                color: rgba(112, 124, 210, 0.7);
+            }
+        }
+
+        &.total-customers {
+            i {
+                color: rgba(255, 51, 102, 0.7);
+            }
+        }
+
+        &.total-products {
+            i {
+                color: rgba(55, 188, 155, 0.7);
+            }
+        }
+	}
+}
+
+.dashboard-panel {
+    margin-top: 30px;
+    padding: 0 15px;
+    background: #ffffff;
+    overflow: hidden;
+    border-radius: 3px;
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
+
+    .table-responsive {
+        margin-bottom: 10px;
+    }
+}
+
+.grid-header {
+    overflow: auto;
+
+	h4 {
+		margin: 15px 0;
+        float: left;
+
+		i {
+			margin-right: 8px;
+		}
+	}
+}
+
+.sales-analytics {
+	background: #ffffff;
+	margin-top: 30px;
+    padding: 0 15px 15px;
+	border-radius: 3px;
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
+
+    .chart {
+        height: 282px !important;
+    }
+}
+
+.anchor-table {
+	.table {
+		> tbody {
+			> tr {
+				> td {
+                    padding: 0;
+
+                    a {
+                        display: block;
+                        padding: 12px 8px;
+                        color: #626060;
+                        text-decoration: none;
+                    }
+
+                    &.empty {
+                        text-align: center;
+                        padding: 10px 0;
+                    }
+                }
+
+                &:hover {
+                    a {
+                        color: #0059bd;
+                    }
+                }
+			}
+        }
+    }
+}
+
+.search-terms {
+    tbody > tr > td {
+        color: #626060;
+        padding: 12px 8px;
+
+        &.empty {
+            text-align: center;
+            padding: 10px 0;
+        }
+    }
+}
+
+@media screen and (max-width: 1199px) {
+    .single-grid {
+        &.total-customers {
+            margin-top: 15px;
+        }
+
+        &.total-products {
+            margin-top: 15px;
+        }
+    }
+}
+
+@media screen and (max-width: 767px) {
+	.single-grid {
+        &.total-orders {
+            margin-top: 15px;
+        }
+    }
+}

Modules/Admin/Resources/assets/sass/datatables.scss

@@ -0,0 +1,220 @@
+.index-table {
+    .label {
+        padding: 6px 10px;
+    }
+
+    > .loading-spinner {
+        display: table;
+        margin: 0 auto;
+        margin-bottom: 10px;
+    }
+}
+
+.dataTable.table {
+    border-bottom: 1px solid #e9e9e9;
+
+    > {
+        thead > tr > th,
+        tfoot > tr > th {
+            font-family: 'Open Sans', sans-serif;
+            color: #4a4a4a;
+            padding: 10px 15px;
+            border-color: #e9e9e9;
+
+            &:after {
+                padding: 5px;
+            }
+        }
+
+        tbody > tr {
+            transition: 200ms ease-in-out;
+
+            &:first-child > td {
+                border: none;
+            }
+
+            &:nth-of-type(2n+1) {
+                background: #ffffff;
+
+                &:hover {
+                    background: #f9f9f9;
+                }
+            }
+
+            > td {
+                padding: 15px;
+                vertical-align: middle;
+                outline: 0;
+            }
+        }
+    }
+
+    .checkbox {
+        margin-bottom: 0;
+    }
+
+    .thumbnail-holder {
+        position: relative;
+        border: 1px solid #d9d9d9;
+        background: #ffffff;
+        height: 50px;
+        width: 50px;
+        border-radius: 3px;
+        overflow: hidden !important;
+
+        > {
+            i {
+                position: absolute;
+                font-size: 24px;
+                color: #d9d9d9;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
+
+            img {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                max-height: 100%;
+                max-width: 100%;
+                transform: translate(-50%, -50%);
+            }
+        }
+    }
+}
+
+table.dataTable {
+    margin: 5px 0 !important;
+
+    thead {
+        .sorting,
+        .sorting_asc,
+        .sorting_desc,
+        .sorting_asc_disabled,
+        .sorting_desc_disabled {
+            &:after {
+                bottom: 3px;
+                opacity: 0.5;
+            }
+        }
+    }
+}
+
+div.dataTables_length {
+    display: flex;
+
+    > label {
+        margin-bottom: 0;
+    }
+
+    select.input-sm {
+        margin: 0 15px 0 5px;
+    }
+}
+
+div.dataTables_wrapper {
+    margin-top: 5px;
+
+    &.dataTables_filter input {
+        margin-left: 10px;
+    }
+
+    div.dataTables_processing {
+        position: absolute;
+        top: 0;
+        left: 0;
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        border: 0;
+        text-align: center;
+        background: rgba(255, 255, 255, 0.7);
+        z-index: 999;
+
+        .fa-spin {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            color: #000;
+            font-size: 30px;
+        }
+    }
+
+    .dataTables_paginate {
+        margin-top: 8px !important;
+
+        ul.pagination {
+            margin: 0;
+        }
+    }
+}
+
+.btn-delete {
+    margin-left: 10px;
+}
+
+.dataTables_empty {
+    color: #626060;
+}
+
+.dataTable.translations-table {
+    margin: 5px -15px !important;
+    padding: 0 15px;
+
+    > tbody > tr > td {
+        min-width: 150px;
+    }
+}
+
+@media screen and (max-width: 991px) {
+    #products-table {
+        .dataTable.table {
+            > tbody > tr > td:nth-child(3) {
+                min-width: 200px;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 767px) {
+    div.table-responsive {
+        > div.dataTables_wrapper > div.row > div[class^="col-"] {
+            &:first-child {
+                padding-right: 0;
+            }
+
+            &:last-child {
+                padding-left: 0;
+            }
+        }
+    }
+
+    div.dataTables_wrapper {
+        > .row > .col-sm-6 {
+            width: 100%;
+        }
+
+        div.dataTables_filter {
+            text-align: left;
+            margin-top: 15px;
+        }
+    }
+}
+
+@media screen and (max-width: 340px) {
+    div.dataTables_length {
+        display: block;
+
+        .btn-delete {
+            display: table;
+            margin: 15px 0 0 0;
+        }
+    }
+
+    div.dataTables_wrapper {
+        div.dataTables_length {
+            text-align: left;
+        }
+    }
+}

Modules/Admin/Resources/assets/sass/flatpickr.scss

@@ -0,0 +1,43 @@
+@import '~flatpickr/dist/flatpickr';
+
+.flatpickr-calendar {
+	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
+}
+
+.rtl {
+	.flatpickr-calendar {
+		&:before,
+		&:after {
+			right: 22px;
+			left: auto;
+		}
+	}
+}
+
+.flatpickr-month {
+	height: 50px;
+}
+
+.flatpickr-prev-month,
+.flatpickr-next-month {
+	top: 10px;
+}
+
+.rtl {
+	.flatpickr-prev-month,
+	.flatpickr-next-month {
+		transform: rotateY(180deg);
+	}
+}
+
+span.flatpickr-current-month {
+	.cur-month {
+		font-family: "Open Sans", sans-serif !important;
+	}
+}
+
+.flatpickr-weekdays {
+	span {
+		font-family: "Open Sans", sans-serif;
+	}
+}

Modules/Admin/Resources/assets/sass/main.scss

@@ -0,0 +1,195 @@
+@import '~bootstrap/dist/css/bootstrap';
+@import '~font-awesome/css/font-awesome';
+@import '~nprogress/nprogress';
+@import '~datatables.net-bs/css/dataTables.bootstrap';
+@import '~flatpickr/dist/ie';
+@import './datatables';
+@import './selectize';
+@import './wysiwyg';
+@import './ohsnap';
+@import './flatpickr';
+@import './classes';
+@import './tab';
+@import './alert';
+@import './modal';
+@import './utilities';
+@import './accordion';
+@import './fleetcart';
+@import './panel';
+
+html {
+    direction: ltr;
+}
+
+.btn-actions {
+    margin: 0 15px 15px 0;
+
+    > i {
+        margin-right: 5px;
+   }
+}
+
+.overflow-hidden {
+	overflow: hidden;
+}
+
+#nprogress {
+    .bar {
+        background: #0068e1;
+    }
+
+    .peg {
+        box-shadow: 0 0 10px #0068e1, 0 0 5px #0068e1;
+    }
+
+    .spinner-icon {
+        border-top-color: #0068e1;
+        border-left-color: #0068e1;
+    }
+}
+
+.sortable-ghost {
+	opacity: .2;
+}
+
+.btn-group.open .dropdown-toggle,
+.btn-group .dropdown-toggle:active {
+	-webkit-box-shadow: none;
+    		box-shadow: none;
+}
+
+.dot {
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+.green {
+    background-color: #37bc9b;
+}
+
+.red {
+    background-color: #fc4b4b;
+}
+
+.options {
+    tr td:first-child {
+        width: 34px;
+        min-width: 34px;
+    }
+
+    tr td:last-child {
+        width: 60px;
+    }
+
+    .drag-icon {
+        font-size: 16px;
+        color: #737881;
+        cursor: move;
+        vertical-align: top;
+        margin-top: 12px;
+        white-space: nowrap;
+        display: inline-block;
+
+        i {
+            float: left;
+
+            &:nth-child(2) {
+                margin-left: 1px;
+            }
+        }
+    }
+
+    .choose-file,
+    .delete-row {
+        padding: 10px 15px;
+    }
+}
+
+.pagination {
+    margin-bottom: 10px;
+
+    > li {
+        float: left;
+        margin-left: -1px;
+        padding: 0;
+        border: 1px solid #e9e9e9;
+        transition: 200ms ease-in-out;
+
+        &:hover {
+            cursor: pointer;
+            background: #f1f1f1;
+        }
+
+        &:first-child {
+            margin-left: 0;
+            border-radius: 3px 0 0 3px;
+
+            a {
+                border-radius: 3px 0 0 3px;
+            }
+        }
+
+        &:last-child {
+            border-radius: 0 3px 3px 0;
+
+            a {
+                border-radius: 0 3px 3px 0;
+            }
+        }
+
+        &.disabled {
+            cursor: not-allowed !important;
+
+            &:hover {
+                background: transparent;
+            }
+        }
+
+        > a {
+            padding: 10px 15px;
+            color: #0068e1;
+            border: none;
+            display: block;
+            background: transparent !important;
+            text-decoration: none;
+
+            &:hover {
+                background: transparent;
+            }
+
+            &:hover, &:focus {
+                color: #0068e1;
+            }
+        }
+
+        > span {
+            display: block;
+            padding: 10px 15px;
+            border: none;
+        }
+    }
+
+    > .active {
+        background: #0068e1;
+        cursor: default !important;
+        border-color: #0068e1;
+
+        &:hover {
+            background: #0068e1;
+        }
+
+        > a {
+            background: transparent !important;
+        }
+
+        > span {
+            background: transparent !important;
+        }
+    }
+}
+
+.empty {
+    color: #626060;
+}

Modules/Admin/Resources/assets/sass/modal.scss

@@ -0,0 +1,75 @@
+.modal {
+    background: rgba(0, 0, 0, 0.3);
+
+    &.fade {
+        .modal-dialog {
+            opacity: 0;
+            transform: scale(0.9);
+            transition: 100ms ease-in-out;
+        }
+
+        &.in .modal-dialog {
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
+
+    .modal-header {
+        padding: 15px;
+        border-bottom-color: #e9e9e9;
+
+        > .close {
+            font-size: 18px;
+            outline: 0;
+            margin-top: 2px;
+            -webkit-text-stroke: 1px #ffffff;
+            transition: 200ms ease-in-out;
+        }
+    }
+
+    .modal-content {
+        border: none;
+        border-radius: 3px;
+        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12);
+    }
+
+    .modal-footer {
+        border-radius: 0 0 3px 3px;
+        border-top-color: #e9e9e9;
+
+        .btn + .btn {
+            margin-left: 12px;
+        }
+    }
+}
+
+#confirmation-modal {
+    .modal-header {
+        padding: 15px 15px 15px 25px;
+    }
+
+    .modal-body {
+        padding: 0px 15px 25px 25px;
+    }
+
+    .modal-header,
+    .modal-footer {
+        border: none;
+    }
+
+    .default-message {
+        color: #737881;
+    }
+
+    .modal-footer {
+        background: #f1f3f7;
+    }
+
+    .btn-default {
+        background: #e1e1e1;
+
+        &:hover {
+            background: #e9e9e9;
+        }
+    }
+}

Modules/Admin/Resources/assets/sass/ohsnap.scss

@@ -0,0 +1,41 @@
+#notification-toast {
+    position: fixed;
+    bottom: 0;
+    right: 15px;
+    z-index: 999;
+}
+
+.ohsnap-alert {
+    padding: 10px 15px;
+    margin-bottom: 15px;
+    border-radius: 3px;
+    float: right;
+    clear: right;
+    background-color: white;
+    z-index: 999;
+}
+
+.ohsnap-alert-red {
+    color: #ffffff;
+    background-color: #da4453;
+}
+
+.ohsnap-alert-green {
+    color: #ffffff;
+    background-color: #37bc9b;
+}
+
+.ohsnap-alert-blue {
+    color: #ffffff;
+    background-color: #4a89dc;
+}
+
+.ohsnap-alert-yellow {
+    color: #ffffff;
+    background-color: #f6bb42;
+}
+
+.ohsnap-alert-orange {
+    color:#fff;
+    background-color: #e9573f;
+}

Modules/Admin/Resources/assets/sass/panel.scss

@@ -0,0 +1,104 @@
+.panel-wrap {
+    .panel {
+        margin-bottom: 15px;
+        box-shadow:  none;
+        border: 1px solid #e9e9e9;
+        border-radius: 3px;
+
+        .panel-header {
+            padding: 15px;
+            background: #f6f6f7;
+            border-bottom: 1px solid #e9e9e9;
+
+            .drag-icon {
+                font-size: 16px;
+                display: inline-block;
+                margin: 2px 10px 0 0;
+                color: #737881;
+                cursor: move;
+                white-space: nowrap;
+
+                > i {
+                    float: left;
+
+                     &:last-child {
+                        margin-left: 1px;
+                    }
+                }
+            }
+
+            .btn {
+                padding: 0;
+                background: transparent;
+
+                i {
+                    -webkit-text-stroke: 1px #f6f6f7;
+                }
+            }
+        }
+
+        .panel-body {
+            position: relative;
+            padding: 15px;
+        }
+        
+        .panel-image {
+            position: absolute;
+            left: 15px;
+            top: 25px;
+            display: flex;
+            height: 110px;
+            width: 110px;
+            justify-content: center;
+            align-items: center;
+            border: 1px solid #d2d6de;
+            border-radius: 3px;
+            cursor: pointer;
+
+            > img {
+                max-height: 100%;
+                max-width: 100%;
+            }
+
+            > i {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                font-size: 48px;
+                color: #d9d9d9;
+                transform: translate(-50%, -50%);
+            }
+        }
+
+        .panel-content {
+            margin-left: 130px;
+            padding: 10px 0;
+
+            .checkbox {
+                padding-top: 0;
+            }
+        }
+
+        .form-group {
+            margin-left: 0;
+            margin-right: 0;
+        }
+    }
+}
+
+@media screen and (max-width: 767px) {
+    .panel-wrap {
+        .panel {
+            .panel-image {
+                position: relative;
+                left: auto;
+                top: auto;
+                margin: 15px auto 30px;
+            }
+
+            .panel-content {
+                margin-left: 0;
+            }
+        }
+    }
+}

Modules/Admin/Resources/assets/sass/selectize.scss

@@ -0,0 +1,114 @@
+@import '~selectize/dist/css/selectize';
+
+.selectize-control:not(.multi) {
+    .selectize-input .item,
+    .selectize-dropdown .option {
+        font-size: 14px;
+    }
+
+    .plugin-remove_button [data-value] {
+        padding-right: 0 !important;
+    }
+}
+.selectize-control {
+    &.multi .selectize-input > div {
+        padding: 4px 8px;
+    }
+
+    &.single .selectize-input {
+        cursor: text;
+
+        &:after {
+            content: none;
+        }
+
+        > span {
+            display: flex;
+            padding: 2px 0
+        }
+
+        input {
+            cursor: text;
+            position: absolute;
+            left: -10000px;
+        }
+    }
+
+    &.plugin-remove_button {
+        [data-value] .remove {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-left-color: #e9e9e9;
+        }
+
+        .remove-single {
+            top: 1px;
+            color: #333333;
+            text-decoration: none;
+        }
+    }
+}
+
+.selectize-input {
+    border-radius: 3px;
+    border-color: #d9d9d9;
+    min-height: 40px;
+    vertical-align: bottom;
+    box-shadow: none !important;
+    transition: border-color ease-in-out .15s;
+
+    .dropdown-active {
+        -webkit-border-radius: 0;
+        border-radius: 0;
+    }
+
+    > input {
+        margin-top: 2px !important;
+    }
+
+    input {
+        font-size: 15px;
+        transition: 0ms !important;
+    }
+
+    input::-moz-placeholder {
+        color: #999999;
+        opacity: 1;
+    }
+
+    input:-ms-input-placeholder {
+        color: #999999;
+    }
+
+    input::-webkit-input-placeholder {
+        color: #999999;
+    }
+
+    &.focus {
+        border-color: #6f8dfd;
+        box-shadow: 0 0 2px rgba(30, 140, 190, .8);
+    }
+
+    .item {
+        border-radius: 3px;
+        float: left;
+        white-space: normal;
+        word-break: break-all;
+    }
+}
+
+.selectize-dropdown {
+    [data-selectable] {
+        cursor: pointer;
+    }
+
+    .active {
+        background-color: #f9f9f9;
+    }
+
+    .selectize-dropdown-content .create strong {
+        font-family: "Open Sans", sans-serif;
+        font-weight: 600;
+    }
+}

Modules/Admin/Resources/assets/sass/tab.scss

@@ -0,0 +1,67 @@
+.tab-wrapper > ul {
+    display: block;
+    margin-bottom: 20px;
+
+    > li {
+        margin: 0;
+
+        &.active > a {
+            border: none !important;
+            color: #333333;
+
+            &:focus {
+                border: none !important;
+                color: #333333;
+            }
+
+            &:hover {
+                border: none;
+            }
+
+            &:after {
+                width: 100% !important;
+            }
+        }
+
+        &.has-error {
+            > a:after {
+                width: 100% !important;
+            }
+
+            &:not(.active) > a:after {
+                background: #ff3366;
+            }
+        }
+
+        > a {
+            position: relative;
+            font-size: 14px;
+            color: #777777;
+            border: none;
+            margin: 0;
+
+            &:after {
+                position: absolute;
+                content: "";
+                bottom: -1px;
+                left: 0;
+                right: 0;
+                margin: auto;
+                width: 0;
+                background: #0068e1;
+                height: 1px;
+                transition: 200ms ease-in-out;
+            }
+        }
+
+        > a:hover,
+        &.active > a:hover {
+            background: transparent;
+            color: #333333;
+        }
+
+        > a:hover:after {
+            width: 50%;
+        }
+    }
+}

Modules/Admin/Resources/assets/sass/utilities.scss

@@ -0,0 +1,191 @@
+.p-tb-0 {
+	padding-top: 0;
+	padding-bottom: 0;
+}
+
+.p-tb-5 {
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
+
+.p-tb-10 {
+	padding-top: 10px;
+	padding-bottom: 10px;
+}
+
+.p-tb-15 {
+	padding-top: 15px;
+	padding-bottom: 15px;
+}
+
+.p-t-0 {
+	padding-top: 0;
+}
+
+.p-t-5 {
+	padding-top: 5px;
+}
+
+.p-t-10 {
+	padding-top: 10px;
+}
+
+.p-t-15 {
+	padding-top: 15px;
+}
+
+.p-b-0 {
+	padding-bottom: 0;
+}
+
+.p-b-5 {
+	padding-bottom: 5px;
+}
+
+.p-b-10 {
+	padding-bottom: 10px;
+}
+
+.p-b-15 {
+	padding-bottom: 15px;
+}
+
+.p-l-0 {
+	padding-left: 0;
+}
+
+.p-l-5 {
+	padding-left: 5px;
+}
+
+.p-l-10 {
+	padding-left: 10px;
+}
+
+.p-l-15 {
+	padding-left: 15px;
+}
+
+.p-r-0 {
+	padding-right: 0;
+}
+
+.p-r-5 {
+	padding-right: 5px;
+}
+
+.p-r-10 {
+	padding-right: 10px;
+}
+
+.p-r-15 {
+	padding-right: 15px;
+}
+
+.m-tb-0 {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.m-tb-5 {
+	margin-top: 5px;
+	margin-bottom: 5px;
+}
+
+.m-tb-10 {
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
+
+.m-tb-15 {
+	margin-top: 15px;
+	margin-bottom: 15px;
+}
+
+.m-t-0 {
+	margin-top: 0;
+}
+
+.m-t-5 {
+	margin-top: 5px;
+}
+
+.m-t-10 {
+	margin-top: 10px;
+}
+
+.m-t-15 {
+	margin-top: 15px;
+}
+
+.m-b-0 {
+	margin-bottom: 0;
+}
+
+.m-b-5 {
+	margin-bottom: 5px;
+}
+
+.m-b-10 {
+	margin-bottom: 10px;
+}
+
+.m-b-15 {
+	margin-bottom: 15px;
+}
+
+.m-l-0 {
+	margin-left: 0;
+}
+
+.m-l-5 {
+	margin-left: 5px;
+}
+
+.m-l-10 {
+	margin-left: 10px;
+}
+
+.m-l-15 {
+	margin-left: 15px;
+}
+
+.m-r-0 {
+	margin-right: 0;
+}
+
+.m-r-5 {
+	margin-right: 5px;
+}
+
+.m-r-10 {
+	margin-right: 10px;
+}
+
+.m-r-15 {
+	margin-right: 15px;
+}
+
+.no-border {
+	border: 0 !important;
+}
+
+.no-padding {
+	padding: 0 !important;
+}
+
+.no-margin {
+	margin: 0 !important;
+}
+
+.no-shadow {
+	box-shadow: none !important;
+}
+
+.cursor-auto {
+	cursor: auto !important;
+}
+
+.text-left {
+	text-align: left;
+}

Modules/Admin/Resources/assets/sass/wysiwyg.scss

@@ -0,0 +1,15 @@
+.tox {
+    &.tox-tinymce-aux {
+        .tox-toolbar__overflow {
+            min-width: 55px;
+        }
+    }
+
+    .tox-menu {
+        &.tox-collection.tox-collection--list {
+            .tox-collection__group {
+                min-width: 178px;
+            }
+        }
+    }
+}