WIP: Implement frontend

assets/app.js

@@ -1,3 +1,4 @@
+import './bootstrap.js';
 /*
  * Welcome to your app's main JavaScript file!
  *

assets/bootstrap.js

@@ -0,0 +1,10 @@
+import { startStimulusApp } from '@symfony/stimulus-bridge';
+
+// Registers Stimulus controllers from controllers.json and in the controllers/ directory
+export const app = startStimulusApp(require.context(
+    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
+    true,
+    /\.[jt]sx?$/
+));
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);

assets/controllers.json

@@ -0,0 +1,4 @@
+{
+    "controllers": [],
+    "entrypoints": []
+}

assets/controllers/ajax_modal_controller.js

@@ -0,0 +1,88 @@
+import { Controller } from '@hotwired/stimulus'
+import { useFetch } from '../mixins/use_fetch'
+
+export default class extends Controller {
+
+    static targets = [ 'title', 'content', 'spinner', 'backbutton' ]
+    static values = { loading: Boolean }
+
+    connect() {
+        useFetch(this)
+    }
+
+    show({ title, url }) {
+        this.titleTarget.innerHTML = title
+        this.element.classList.remove('hidden')
+        this.loadContent(url)
+    }
+
+    hide() {
+        this.element.classList.add('hidden')
+    }
+
+    loadContent(url) {
+        this.loadingValue = true
+        fetch(url, this.getInitObject())
+            .then(this.checkStatus)
+            .then(this.parseJSON)
+            .then(response => {
+                this.handleResponse(response)
+            })
+            .catch(error => {
+                this.handleResponse(this.createErrorResponse(error))
+            })
+            .finally(() => {
+                this.loadingValue = false
+            })
+    }
+
+    submitForm(event) {
+        event.preventDefault()
+        this.loadingValue = true
+        const form = event.target
+        const formData = new FormData(form)
+        if (this.hasBackbuttonTarget && event.submitter === this.backbuttonTarget) {
+            formData.append(this.backbuttonTarget.name, this.backbuttonTarget.value)
+        }
+        fetch(form.action, this.getInitObject('post', formData))
+            .then(this.checkStatus)
+            .then(this.parseJSON)
+            .then(response => {
+                this.handleResponse(response)
+            })
+            .catch(error => {
+                this.handleResponse(this.createErrorResponse(error))
+            })
+            .finally(() => {
+                this.loadingValue = false
+            })
+    }
+
+    handleResponse(modalResponse) {
+        if (modalResponse.redirect) {
+            window.location = modalResponse.redirect
+            return
+        }
+
+        if (true === modalResponse.close) {
+            this.element.classList.add('hidden')
+            return
+        }
+
+        this.contentTarget.innerHTML = modalResponse.content
+    }
+
+    createErrorResponse(error) {
+        return {
+            close: false,
+            redirect: null,
+            content: error.message,
+        }
+    }
+
+    loadingValueChanged() {
+        this.spinnerTarget.classList.toggle('hidden', false === this.loadingValue)
+        this.contentTarget.classList.toggle('hidden', true === this.loadingValue)
+    }
+
+}

assets/controllers/autocomplete_controller.js

@@ -0,0 +1,78 @@
+import { Controller } from '@hotwired/stimulus'
+import { useFetch } from '../mixins/use_fetch'
+import Autocomplete from '@trevoreyre/autocomplete-js'
+
+export default class extends Controller {
+
+    static targets = [ 'input', 'field', 'resetButton', 'searchIcon' ]
+
+    static values = { url: String, choices: Array, selected: Boolean }
+
+    initialize() {
+        useFetch(this)
+    }
+
+    connect() {
+        const searchHandler = input => {
+            return new Promise(resolve => {
+                // Check input minimum length
+                if (input.length < 2) {
+                    return resolve([])
+                }
+
+                // Search choices if provided
+                if (this.choicesValue.length > 0) {
+                    return resolve(this.choicesValue.filter(choice => {
+                        return -1 !== choice.text.toLowerCase().search(input.toLowerCase())
+                    }))
+                }
+
+                // Use API otherwise
+                let data = { search: input }
+                fetch(this.urlValue, { method: 'POST', body: JSON.stringify(data), credentials: 'include' })
+                    .then(this.checkStatus)
+                    .then(this.parseJSON)
+                    .then(data => {
+                        resolve(data)
+                    })
+            })
+        }
+
+        const submitHandler = result => {
+            this.fieldTarget.value = result.value
+            this.selectedValue = true
+            this.element.dispatchEvent(new CustomEvent('select', {
+                detail: { result }
+            }))
+        }
+
+        new Autocomplete(this.element, {
+            search: searchHandler,
+            getResultValue: result => result.text,
+            onSubmit: submitHandler,
+            debounceTime: 250,
+        })
+
+        if (this.fieldTarget.value) {
+            this.selectedValue = true
+        }
+
+        this.element.addEventListener('keypress', e => {
+            if (e.key === 'Enter') {
+                e.preventDefault()
+            }
+        })
+    }
+
+    reset() {
+        this.inputTarget.value = null
+        this.fieldTarget.value = null
+        this.selectedValue = false
+        this.element.dispatchEvent(new CustomEvent('reset'))
+    }
+
+    selectedValueChanged() {
+        this.resetButtonTarget.classList.toggle('hidden', false === this.selectedValue)
+        this.searchIconTarget.classList.toggle('hidden', this.selectedValue)
+    }
+}

assets/controllers/confirmation_modal_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+    static targets = [ 'form', 'title', 'content' ]
+
+    show({ action, title, content }) {
+        this.formTarget.action = action
+        this.titleTarget.innerText = title
+        this.contentTarget.innerHTML = content
+        this.element.classList.remove('hidden')
+    }
+
+    hide() {
+        this.element.classList.add('hidden')
+    }
+
+}

assets/controllers/datepicker_controller.js

@@ -0,0 +1,57 @@
+import { Controller } from '@hotwired/stimulus'
+import flatpickr from 'flatpickr';
+import { German } from 'flatpickr/dist/l10n/de';
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+
+    static targets = [ 'field' ]
+    static values = { format: String, minDate: String, maxDate: String, disableWeekends: Boolean }
+
+    initialize() {
+        flatpickr.localize(German);
+        flatpickr.setDefaults({
+            dateFormat: 'd.m.Y',
+            allowInput: true
+        });
+    }
+
+    connect() {
+        const dateFormat = this.formatValue || 'd.m.Y'
+        const minDate = this.minDateValue
+        const maxDate = this.maxDateValue
+        const options = {
+            dateFormat: 'Y-m-d',
+            altInput: true,
+            altFormat: dateFormat,
+            minDate,
+            maxDate,
+            allowInput: true,
+            onClose(dates, currentdatestring, instance) {
+                instance.setDate(instance.altInput.value, true, instance.config.altFormat)
+                this.element.dispatchEvent(new CustomEvent('datepicker:closed'))
+            },
+            onChange(dates, currentdatestring, instance) {
+                this.element.dispatchEvent(new CustomEvent('datepicker:picked', {
+                    detail: {
+                        date: instance.altInput.value
+                    }
+                }))
+            },
+        }
+
+        if (true === this.disableWeekendsValue) {
+            options['disable'] =  [
+                function(date) {
+                    return (date.getDay() === 0 || date.getDay() === 6);
+                }
+            ]
+        }
+
+        this.picker = flatpickr(this.fieldTarget, options)
+    }
+
+    disconnect() {
+        this.picker.destroy()
+    }
+}

assets/controllers/form_collection_controller.js

@@ -0,0 +1,41 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+
+    static targets = [ 'fields', 'field', 'addButton' ]
+    static values = {
+        prototype: String,
+        maxItems: Number,
+        itemsCount: Number,
+    }
+
+    connect () {
+        this.index = this.itemsCountValue = this.fieldTargets.length
+    }
+
+    addItem() {
+        let prototype = JSON.parse(this.prototypeValue)
+        const newField = prototype.replace(/__name__/g, this.index)
+        this.fieldsTarget.insertAdjacentHTML('beforeend', newField)
+        this.index++
+        this.itemsCountValue++
+    }
+
+    removeItem(event) {
+        this.fieldTargets.forEach(element => {
+            if (element.contains(event.target)) {
+                element.remove()
+                this.itemsCountValue--
+            }
+        })
+    }
+
+    itemsCountValueChanged() {
+        if (false === this.hasAddButtonTarget || 0 === this.maxItemsValue) {
+            return
+        }
+        const maxItemsReached = this.itemsCountValue >= this.maxItemsValue
+        this.addButtonTarget.classList.toggle('hidden', maxItemsReached)
+    }
+
+}

assets/controllers/mobilenav_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+    static outlets = [ 'mobilenav' ]
+    static classes = [ 'closed' ]
+
+    trigger({ params: { mode } }) {
+        this.mobilenavOutlet.toggle(mode)
+    }
+
+    toggle(mode) {
+        // Add animation classes only now to avoid fouc
+        this.element.classList.add('transition-transform', 'duration-300')
+        this.element.classList.toggle(this.closedClass, 'close' === mode)
+    }
+}

assets/controllers/modal_button_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+    static outlets =  [ 'confirmation-modal', 'ajax-modal' ]
+
+    confirmation({ params: { title, action, content } }) {
+        this.confirmationModalOutlet.show({
+            title: title,
+            action: action,
+            content: content,
+        })
+    }
+
+    ajax({ params: { title, url } }) {
+        this.ajaxModalOutlet.show({
+            title: title,
+            url: url,
+        })
+    }
+}

assets/controllers/tabs_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+
+    static classes = [ 'buttonActive' ]
+
+    static targets = [ 'button', 'tab' ]
+
+    static values = { activeTab: Number }
+
+    select({ params: { tab } }) {
+        let selectedTab = tab
+        this.activeTabValue = selectedTab
+        this.element.dispatchEvent(new CustomEvent('select', {
+            detail: {
+                tab: selectedTab
+            }
+        }))
+    }
+
+    activeTabValueChanged(activeTab) {
+        this.tabTargets.forEach((element, index) => {
+            element.classList.toggle('hidden', activeTab !== index)
+        })
+
+        this.buttonTargets.forEach((element, index) => {
+            if (this.hasButtonActiveClass) {
+                element.classList.toggle(this.buttonActiveClass, activeTab === index)
+            }
+        })
+    }
+}

assets/controllers/toast_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from '@hotwired/stimulus'
+import Toastify from 'toastify-js'
+
+export default class extends Controller {
+
+    static values = { text: String, class: String }
+
+    connect() {
+        Toastify({
+            duration: 5000,
+            text: this.textValue,
+            gravity: 'top',
+            position: 'right',
+            className: this.classValue,
+            close: true,
+        }).showToast()
+    }
+}

assets/controllers/upload_controller.js

@@ -0,0 +1,152 @@
+import { Controller } from '@hotwired/stimulus'
+import Dropzone from 'dropzone'
+Dropzone.autoDiscover = false
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+
+    static targets = [
+        'dropzone',
+        'queue',
+        'previewTemplate',
+        'fieldsTemplate',
+        'fields',
+        'error',
+        'errorMessage',
+        'upload',
+    ]
+
+    static values = {
+        endpoint: String,
+        maxFiles: Number,
+        maxFilesize: Number,
+        acceptedFiles: String,
+        chunking: Boolean,
+        language: Object,
+        params: Object,
+        uploads: Array,
+        error: String,
+        formName: String,
+    }
+
+    initialize() {
+        this.fieldsTemplate = this.fieldsTemplateTarget.innerHTML
+    }
+
+    connect () {
+        const dropzone = new Dropzone(this.dropzoneTarget, {
+            url: this.endpointValue,
+            withCredentials: true,
+            maxFiles: this.maxFilesValue,
+            maxFilesize: this.maxFilesizeValue,
+            acceptedFiles: this.acceptedFilesValue,
+            chunking: this.chunkingValue,
+            chunkSize: 10000000,
+            parallelUploads: 3,
+            retryChunks: true,
+            previewsContainer: this.queueTarget,
+            previewTemplate: this.previewTemplateTarget.innerHTML,
+            createImageThumbnails: true,
+            dictFileTooBig: this.languageValue.fileTooBig,
+            dictInvalidFileType: this.languageValue.invalidFileType,
+            dictMaxFilesExceeded: this.languageValue.maxFilesExceeded,
+        })
+
+        dropzone.on('addedfile', file => {
+            if (this.maxFilesValue > this.uploadsValue.length) {
+                this._removeFile(file.id)
+                return
+            }
+            this.errorValue = ''
+            const uploads = this.uploadsValue;
+            uploads.pop()
+            this.uploadsValue = uploads
+        })
+
+        dropzone.on('removedfile', file => {
+            this._removeFile(file.upload.uuid)
+        })
+
+        dropzone.on('maxfilesexceeded', file => {
+            this.errorValue = dropzone.options.dictMaxFilesExceeded
+            dropzone.removeFile(file);
+        })
+
+        dropzone.on('error', (file, errorMessage) => {
+            this.errorValue = errorMessage;
+            dropzone.removeFile(file)
+        })
+
+        dropzone.on('dragenter', () => {
+            this.errorValue = ''
+        })
+
+        dropzone.on('success', file => {
+            const response = JSON.parse(file.xhr.response)
+            const uploads = this.uploadsValue
+            uploads.push({
+                filename: response.filename,
+                originalFilename: response.originalFilename,
+                uploaderType: response.uploaderType,
+                size: response.size,
+                mimeType: response.mimeType,
+                fileId: file.upload.uuid
+            })
+            this.uploadsValue = uploads
+            window.dispatchEvent(new CustomEvent('dropzone', {
+                detail: 'success'
+            }))
+        })
+
+        dropzone.on('sending', () => {
+            window.dispatchEvent(new CustomEvent('dropzone', {
+                detail: 'uploading'
+            }))
+        })
+    }
+
+    errorValueChanged () {
+        if ('' === this.errorValue) {
+            this.errorTarget.classList.add('hidden')
+        } else {
+            this.errorMessageTarget.innerText = this.errorValue
+            this.errorTarget.classList.remove('hidden')
+        }
+    }
+
+    uploadsValueChanged (uploads) {
+        this.fieldsTarget.innerHTML = ''
+        uploads.forEach((upload, index) => {
+            const field = this.fieldsTemplate
+                .replace(/__formName__/g, this.formNameValue)
+                .replace(/__index__/g, index)
+                .replace(/__fileId__/g, upload.fileId)
+                .replace(/__originalFilename__/g, upload.originalFilename)
+                .replace(/__filename__/g, upload.filename)
+                .replace(/__mimeType__/g, upload.mimeType)
+                .replace(/__size__/g, upload.size)
+            this.fieldsTarget.insertAdjacentHTML('beforeend', field)
+        })
+    }
+
+    removeFile ({ params }) {
+        const fileId = params.fileid
+        this._removeFile(fileId)
+    }
+
+    _removeFile(fileId) {
+        this.uploadsValue = this.uploadsValue.filter(upload => {
+            return upload.fileId !== fileId
+        })
+    }
+
+    removeUpload (event) {
+        event.preventDefault()
+        this.uploadTargets.forEach(element => {
+            if (element.contains(event.target)) {
+                element.remove()
+            }
+        })
+    }
+
+}

assets/images/icons.svg

@@ -0,0 +1,181 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <symbol id="icon-login" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
+    </symbol>
+    <symbol id="icon-logout" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
+    </symbol>
+    <symbol id="icon-support" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M16.712 4.33a9.027 9.027 0 011.652 1.306c.51.51.944 1.064 1.306 1.652M16.712 4.33l-3.448 4.138m3.448-4.138a9.014 9.014 0 00-9.424 0M19.67 7.288l-4.138 3.448m4.138-3.448a9.014 9.014 0 010 9.424m-4.138-5.976a3.736 3.736 0 00-.88-1.388 3.737 3.737 0 00-1.388-.88m2.268 2.268a3.765 3.765 0 010 2.528m-2.268-4.796a3.765 3.765 0 00-2.528 0m4.796 4.796c-.181.506-.475.982-.88 1.388a3.736 3.736 0 01-1.388.88m2.268-2.268l4.138 3.448m0 0a9.027 9.027 0 01-1.306 1.652c-.51.51-1.064.944-1.652 1.306m0 0l-3.448-4.138m3.448 4.138a9.014 9.014 0 01-9.424 0m5.976-4.138a3.765 3.765 0 01-2.528 0m0 0a3.736 3.736 0 01-1.388-.88 3.737 3.737 0 01-.88-1.388m2.268 2.268L7.288 19.67m0 0a9.024 9.024 0 01-1.652-1.306 9.027 9.027 0 01-1.306-1.652m0 0l4.138-3.448M4.33 16.712a9.014 9.014 0 010-9.424m4.138 5.976a3.765 3.765 0 010-2.528m0 0c.181-.506.475-.982.88-1.388a3.736 3.736 0 011.388-.88m-2.268 2.268L4.33 7.288m6.406 1.18L7.288 4.33m0 0a9.024 9.024 0 00-1.652 1.306A9.025 9.025 0 004.33 7.288" />
+    </symbol>
+    <symbol id="icon-alert" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+    </symbol>
+    <symbol id="icon-close" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+    </symbol>
+    <symbol id="icon-back" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
+    </symbol>
+    <symbol id="icon-menu" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+    </symbol>
+    <symbol id="icon-edit" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
+    </symbol>
+    <symbol id="icon-plus" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+    </symbol>
+    <symbol id="icon-search" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+    </symbol>
+    <symbol id="icon-user" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
+    </symbol>
+    <symbol id="icon-users" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
+    </symbol>
+    <symbol id="icon-user-add" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z" />
+    </symbol>
+    <symbol id="icon-lab" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
+    </symbol>
+    <symbol id="icon-delete" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+    </symbol>
+    <symbol id="icon-check" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+    </symbol>
+    <symbol id="icon-upload" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
+        <path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
+    </symbol>
+    <symbol id="icon-download" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
+    </symbol>
+    <symbol id="icon-sort" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
+    </symbol>
+    <symbol id="icon-computer" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25"/>
+    </symbol>
+    <symbol id="icon-arrow-left" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15m0 0l6.75 6.75M4.5 12l6.75-6.75" />
+    </symbol>
+    <symbol id="icon-arrow-right" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
+    </symbol>
+    <symbol id="icon-document" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+    </symbol>
+    <symbol id="icon-filter" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z" />
+    </symbol>
+    <symbol id="icon-refresh" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+    </symbol>
+    <symbol id="icon-settings" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+    </symbol>
+    <symbol id="icon-at" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25" />
+    </symbol>
+    <symbol id="icon-mail" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
+    </symbol>
+    <symbol id="icon-phone" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
+    </symbol>
+    <symbol id="icon-calendar" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
+    </symbol>
+    <symbol id="icon-photo" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
+    </symbol>
+    <symbol id="icon-print" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+        <path d="M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0110.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0l.229 2.523a1.125 1.125 0 01-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0021 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 00-1.913-.247M6.34 18H5.25A2.25 2.25 0 013 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 011.913-.247m10.5 0a48.536 48.536 0 00-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5zm-3 0h.008v.008H15V10.5z" stroke-linecap="round" stroke-linejoin="round"/>
+    </symbol>
+    <symbol id="icon-uturn-up" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 9l6-6m0 0l6 6m-6-6v12a6 6 0 01-12 0v-3"/>
+    </symbol>
+    <symbol id="icon-archive" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+        <path d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" stroke-linecap="round" stroke-linejoin="round"/>
+    </symbol>
+    <symbol id="icon-todo" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0118 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3l1.5 1.5 3-3.75"/>
+    </symbol>
+    <symbol id="icon-mask" fill="currentColor" stroke="none" viewBox="0 0 576 512">
+        <!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+        <path d="M288 64C39.52 64 0 182.1 0 273.5C0 379.5 78.8 448 176 448c27.33 0 51.21-6.516 66.11-36.79l19.93-40.5C268.3 358.6 278.1 352.4 288 352.1c9.9 .3711 19.7 6.501 25.97 18.63l19.93 40.5C348.8 441.5 372.7 448 400 448c97.2 0 176-68.51 176-174.5C576 182.1 536.5 64 288 64zM400 400c-18.12 0-19.56-2.924-23.04-9.986l-20.35-41.33c-13.87-26.86-38.85-43.53-66.82-44.57L288 304L286.2 304.1c-27.96 1.049-52.94 17.71-67.24 45.41l-19.93 40.49C195.6 397.1 194.1 400 176 400c-75.36 0-128-52.04-128-126.5C48 229.3 48 112 288 112s240 117.3 240 161.5C528 347.1 475.4 400 400 400zM160 192C124.7 192 96 220.7 96 256s28.65 64 64 64c35.35 0 64-28.65 64-64S195.3 192 160 192zM416 192c-35.35 0-64 28.65-64 64s28.65 64 64 64c35.35 0 64-28.65 64-64S451.3 192 416 192z"/>
+    </symbol>
+    <symbol id="icon-excel" fill="currentColor" stroke="none" viewBox="0 0 384 512">
+        <!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+        <path d="M365.3 93.38l-74.63-74.64C278.6 6.742 262.3 0 245.4 0H64C28.65 0 0 28.65 0 64l.0065 384c0 35.34 28.65 64 64 64H320c35.2 0 64-28.8 64-64V138.6C384 121.7 377.3 105.4 365.3 93.38zM336 448c0 8.836-7.164 16-16 16H64.02c-8.838 0-16-7.164-16-16L48 64.13c0-8.836 7.164-16 16-16h160L224 128c0 17.67 14.33 32 32 32h79.1V448zM229.1 233.3L192 280.9L154.9 233.3C146.8 222.8 131.8 220.9 121.3 229.1C110.8 237.2 108.9 252.3 117.1 262.8L161.6 320l-44.53 57.25c-8.156 10.47-6.25 25.56 4.188 33.69C125.7 414.3 130.8 416 135.1 416c7.156 0 14.25-3.188 18.97-9.25L192 359.1l37.06 47.65C233.8 412.8 240.9 416 248 416c5.125 0 10.31-1.656 14.72-5.062c10.44-8.125 12.34-23.22 4.188-33.69L222.4 320l44.53-57.25c8.156-10.47 6.25-25.56-4.188-33.69C252.2 220.9 237.2 222.8 229.1 233.3z"/>
+    </symbol>
+    <symbol id="icon-pdf" fill="currentColor" stroke="none" viewBox="0 0 384 512">
+        <!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+        <path d="M365.3 93.38l-74.63-74.64C278.6 6.742 262.3 0 245.4 0H64C28.65 0 0 28.65 0 64l.0065 384c0 35.34 28.65 64 64 64H320c35.2 0 64-28.8 64-64V138.6C384 121.7 377.3 105.4 365.3 93.38zM336 448c0 8.836-7.164 16-16 16H64.02c-8.838 0-16-7.164-16-16L48 64.13c0-8.836 7.164-16 16-16h160L224 128c0 17.67 14.33 32 32 32h79.1V448zM202 286.1c.877-2.688 1.74-5.398 2.582-8.145c1.434-5.762 7.488-31.54 7.488-52.47C212.1 207 197.1 192 178.6 192C160.1 192 145.1 207 145.1 225.5c0 .2969 .1641 28.81 13.85 62.3c-7.035 19.36-15.57 38.8-25.41 57.93c-21.49 10.11-39.24 22.23-52.8 36.07c-6.234 6.438-9.367 14.74-9.367 24.72c0 18.45 15.01 33.46 33.46 33.46c10.8 0 20.98-5.227 27.22-13.98c7.322-10.28 18.38-26.9 30.47-48.95c15.8-6.352 33.88-11.72 53.88-16c13.55 9.578 28.9 17.29 45.71 22.95c4.527 1.551 9.402 2.348 14.43 2.348c20.26 0 36.13-16.19 36.13-36.86c0-20.33-16.54-36.87-36.87-36.87h-3.705c-2.727 .125-20.51 1.141-45.37 5.367C216.9 308.9 208.6 298.3 202 286.1zM110.2 410.4c-3.273 4.688-12.03 2.777-12.03-5.312c0-1.754 .6289-3.43 1.729-4.555c9.02-9.219 19.94-17.05 31.85-23.72C122.3 393.1 114.3 404.7 110.2 410.4zM178.6 218.8c3.693 0 6.703 3.008 6.703 6.703c0 15.21-4.109 34.84-5.746 42.1C172.1 245 171.9 227.2 171.9 225.5C171.9 221.8 174.9 218.8 178.6 218.8zM162.3 348.3c6.611-13.48 13.22-28.46 19.38-44.7c6.389 10.92 14.56 21.86 24.96 31.97C192.6 338.8 177.4 342.9 162.3 348.3zM272.4 339.5h3.352c5.539 0 10.05 4.5 10.05 10.79c0 5.129-4.176 9.32-9.32 9.32c-2.029 0-4.059-.3164-5.852-.9414c-12.33-4.137-23.11-9.32-32.54-15.19C258.3 340.3 272.1 339.5 272.4 339.5z"/>
+    </symbol>
+    <symbol id="icon-file" fill="currentColor" stroke="none" viewBox="0 0 384 512">
+        <!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+        <path d="M365.3 93.38l-74.63-74.64C278.6 6.743 262.3 0 245.4 0L64-.0001c-35.35 0-64 28.65-64 64l.0065 384c0 35.35 28.65 64 64 64H320c35.2 0 64-28.8 64-64V138.6C384 121.7 377.3 105.4 365.3 93.38zM320 464H64.02c-8.836 0-15.1-7.163-16-15.1L48 64.13c-.0004-8.837 7.163-16 16-16h160L224 128c0 17.67 14.33 32 32 32h79.1v288C336 456.8 328.8 464 320 464z"/>
+    </symbol>
+    <symbol id="icon-sigma" fill="currentColor" stroke="none" viewBox="0 0 384 512">
+        <!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+        <path d="M335.1 136l.0005-56H83.59l165 158.7C253.3 243.2 255.1 249.5 255.1 256s-2.656 12.78-7.375 17.31L83.59 432h252.4l-.0005-56c0-13.25 10.75-24 24-24C373.2 352 384 362.8 384 376v80c0 13.25-10.75 24-24 24H23.99c-9.782 0-18.59-5.938-22.25-15.03s-1.438-19.47 5.625-26.28L197.4 256L7.364 73.31C.3015 66.5-1.917 56.13 1.739 47.03S14.21 32 23.99 32h336C373.2 32 384 42.75 384 56v80C384 149.3 373.2 160 359.1 160C346.7 160 335.1 149.3 335.1 136z"/>
+    </symbol>
+    <symbol id="icon-percent" fill="currentColor" stroke="none" viewBox="0 0 384 512">
+        <!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+        <path d="M376.1 71.03c-9.375-9.375-24.56-9.375-33.94 0l-336 336c-9.375 9.375-9.375 24.56 0 33.94C11.72 445.7 17.84 448 24 448s12.28-2.344 16.97-7.031l336-336C386.3 95.59 386.3 80.41 376.1 71.03zM64 176c26.51 0 48-21.49 48-48S90.51 80 64 80C37.49 80 16 101.5 16 128S37.49 176 64 176zM320 336c-26.51 0-48 21.49-48 48s21.49 48 48 48c26.51 0 48-21.49 48-48S346.5 336 320 336z"/>
+    </symbol>
+    <symbol id="icon-info" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
+    </symbol>
+    <symbol id="icon-cancel" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </symbol>
+    <symbol id="icon-bell" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
+    </symbol>
+    <symbol id="icon-folder" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+        <path d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" stroke-linecap="round" stroke-linejoin="round"/>
+    </symbol>
+    <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+    <symbol id="icon-spinner" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
+        <g fill="none" fill-rule="evenodd" stroke-width="2">
+            <circle cx="22" cy="22" r="1">
+                <animate attributeName="r"
+                         begin="0s" dur="1.8s"
+                         values="1; 20"
+                         calcMode="spline"
+                         keyTimes="0; 1"
+                         keySplines="0.165, 0.84, 0.44, 1"
+                         repeatCount="indefinite" />
+                <animate attributeName="stroke-opacity"
+                         begin="0s" dur="1.8s"
+                         values="1; 0"
+                         calcMode="spline"
+                         keyTimes="0; 1"
+                         keySplines="0.3, 0.61, 0.355, 1"
+                         repeatCount="indefinite" />
+            </circle>
+            <circle cx="22" cy="22" r="1">
+                <animate attributeName="r"
+                         begin="-0.9s" dur="1.8s"
+                         values="1; 20"
+                         calcMode="spline"
+                         keyTimes="0; 1"
+                         keySplines="0.165, 0.84, 0.44, 1"
+                         repeatCount="indefinite" />
+                <animate attributeName="stroke-opacity"
+                         begin="-0.9s" dur="1.8s"
+                         values="1; 0"
+                         calcMode="spline"
+                         keyTimes="0; 1"
+                         keySplines="0.3, 0.61, 0.355, 1"
+                         repeatCount="indefinite" />
+            </circle>
+        </g>
+    </symbol>
+</svg>

assets/images/logo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 243 74" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g><g><path d="M161.8,41.6c2.2,0 3.8,1.6 3.8,3.8c0,2 -1.3,3.3 -2.8,3.7l3.3,5.8l-1.8,0l-3.1,-5.6l-3.7,0l0,5.6l-1.6,0l0,-13.3l5.9,0Zm-4.2,6.3l4.2,0c1.2,0 2.2,-1 2.2,-2.5c0,-1.6 -1.1,-2.5 -2.6,-2.5l-3.8,0l0,5Z" style="fill:#0084d4;fill-rule:nonzero;"/><path d="M181.9,41.6l0,1.4l-7.5,0l0,4.8l6.5,0l0,1.4l-6.5,0l0,4.4l7.7,0l0,1.3l-9.3,0l0,-13.3l9.1,0Z" style="fill:#0084d4;fill-rule:nonzero;"/><rect x="189.1" y="41.6" width="1.6" height="13.3" style="fill:#0084d4;fill-rule:nonzero;"/><path d="M197.7,54.1l0.4,-1.3c0.5,0.2 2.3,0.9 4.1,0.9c2.2,0 3.3,-0.9 3.3,-2.2c0,-1.7 -1.7,-2.1 -3.4,-2.6c-2.1,-0.6 -4.3,-1.3 -4.3,-3.9c0,-2.4 1.8,-3.6 4.5,-3.6c1.6,0 3.3,0.5 4.2,0.9l-0.4,1.3c0,0 -2,-0.8 -3.7,-0.8c-1.8,0 -3,0.9 -3,2.2c0,1.6 1.8,2.1 3.4,2.6c2.1,0.6 4.3,1.3 4.3,3.9c0,2.5 -2,3.6 -4.7,3.6c-2.1,0 -3.9,-0.6 -4.7,-1Z" style="fill:#0084d4;fill-rule:nonzero;"/><path d="M223,41.6l0,1.4l-7.5,0l0,4.8l6.5,0l0,1.4l-6.5,0l0,4.4l7.7,0l0,1.3l-9.3,0l0,-13.3l9.1,0Z" style="fill:#0084d4;fill-rule:nonzero;"/><path d="M231.8,41.6l4.2,6.3l2.9,4.5l-0.1,-4.5l0,-6.3l1.6,0l0,13.3l-1.7,0l-4.2,-6.5l-2.8,-4.4l0.1,4.5l0,6.4l-1.6,0l0,-13.3l1.6,0Z" style="fill:#0084d4;fill-rule:nonzero;"/><path d="M165.1,60.1l0,1.4l-7.5,0l0,4.8l6.5,0l0,1.4l-6.5,0l0,4.4l7.7,0l0,1.4l-9.3,0l0,-13.4l9.1,0Z" style="fill:#0084d4;fill-rule:nonzero;"/><path d="M171.2,60.1l4,11.3l4,-11.3l1.7,0l-4.8,13.3l-1.8,0l-4.8,-13.3l1.7,0Z" style="fill:#0084d4;fill-rule:nonzero;"/><path d="M195.1,60.1l0,1.4l-7.5,0l0,4.8l6.5,0l0,1.4l-6.5,0l0,4.4l7.7,0l0,1.4l-9.3,0l0,-13.4l9.1,0Z" style="fill:#0084d4;fill-rule:nonzero;"/><path d="M202.6,60.1l4.2,6.3l2.9,4.5l-0.1,-4.5l0,-6.3l1.6,0l0,13.3l-1.7,0l-4.2,-6.5l-2.8,-4.4l0.1,4.5l0,6.4l-1.6,0l0,-13.3l1.6,0Z" style="fill:#0084d4;fill-rule:nonzero;"/><path d="M226.9,60.1l0,1.4l-4.5,0l0,11.9l-1.6,0l0,-12l-4.5,0l0,-1.4l10.6,0l0,0.1Z" style="fill:#0084d4;fill-rule:nonzero;"/><path d="M231,72.5l0.4,-1.3c0.5,0.2 2.3,0.9 4.1,0.9c2.2,0 3.3,-0.9 3.3,-2.2c0,-1.7 -1.7,-2.1 -3.4,-2.6c-2.1,-0.6 -4.3,-1.3 -4.3,-3.9c0,-2.4 1.8,-3.6 4.5,-3.6c1.6,0 3.3,0.5 4.2,0.9l-0.4,1.3c0,0 -2,-0.8 -3.7,-0.8c-1.8,0 -3,0.9 -3,2.2c0,1.6 1.8,2.1 3.4,2.6c2.1,0.6 4.3,1.3 4.3,3.9c0,2.5 -2,3.6 -4.7,3.6c-2,0 -3.9,-0.6 -4.7,-1Z" style="fill:#0084d4;fill-rule:nonzero;"/><path d="M178.7,0.9l0,5.3l-16.2,0l0,8.3l13.8,0l0,5.4l-13.8,0l0,7.6l16.5,0l0,5.3l-22.9,0l0,-31.9l22.6,0Z" style="fill:#0084d4;fill-rule:nonzero;"/><path d="M203.6,7.9c0,2.7 -1.6,5.7 -5.2,7.9l5.5,6.4c0,0 1.1,-2 1.1,-4.6l4.8,0c-0.1,4.9 -2.4,8.7 -2.4,8.7l5.9,6.8l-7.1,0l-2.4,-2.8c-2.2,1.9 -5.1,3 -8.4,3c-6,0 -11.4,-3.5 -11.4,-10.1c0,-4.3 2.8,-7 5.7,-9c-1.6,-2.1 -2.8,-3.5 -2.8,-6.3c0,-5.5 4.6,-7.6 8.2,-7.6c3.6,0 8.5,2.1 8.5,7.6Zm-13.7,15.2c0,3 2.2,4.9 5.7,4.9c1.8,0 3.4,-0.5 4.7,-1.6l-7,-8.1c-2,1.1 -3.4,2.6 -3.4,4.8Zm2.9,-14.9c0,1.6 1,2.5 2.1,3.7c1.8,-0.8 3.1,-2.2 3.1,-3.8c0,-1.9 -1.3,-2.6 -2.6,-2.6c-1.7,0 -2.6,1.1 -2.6,2.7Z" style="fill:#0084d4;fill-rule:nonzero;"/><path d="M233,0.9c5.4,0 9.8,4.5 9.8,10.2c0,6.1 -4.4,10.4 -9.7,10.4l-7.7,0l0,11.4l-6.4,0l0,-32l14,0Zm-7.6,15.2l6.4,0c3,0 4.7,-2.2 4.7,-5c0,-3.5 -2.7,-4.8 -5.2,-4.8l-5.9,0l0,9.8Z" style="fill:#0084d4;fill-rule:nonzero;"/><path d="M107,0.3c-36.4,5.5 -81.6,19.1 -81.6,38.2c0,17.7 41.8,13.2 41.8,13.2c0,0 -67,22.3 -67,-7c0,-33.2 84.5,-44.4 106.8,-44.4Z" style="fill:#0084d4;fill-rule:nonzero;"/><path d="M17,73.5c36.4,-5.4 81.6,-19.1 81.6,-38.2c0,-17.7 -41.8,-13.2 -41.8,-13.2c0,0 67,-22.3 67,7c0,33.3 -84.5,44.4 -106.8,44.4Z" style="fill:#f8c62f;fill-rule:nonzero;"/><g><path d="M60.7,34.3l-12.8,4l12.2,0.8l-0.4,-2.4l1,-2.4Z" style="fill:#0084d4;fill-rule:nonzero;"/><path d="M75.9,35.2l-9.2,2.9l-3.5,9.7l-1.7,-11.3l4,-10.7l1.7,7.9l8.7,1.5Z" style="fill:#f8c62f;fill-rule:nonzero;"/></g></g></g></svg>

assets/mixins/use_fetch.js

@@ -0,0 +1,29 @@
+export const useFetch = controller => {
+    Object.assign(controller, {
+        checkStatus(response) {
+            if (response.status >= 200 && response.status < 300) {
+                return response
+            } else {
+                const error = new Error(response.statusText)
+                error.response = response
+                throw error
+            }
+        },
+        parseJSON(response) {
+            return response.json()
+        },
+        parseHTML(response) {
+            return response.text()
+        },
+        getInitObject(method = 'get', body = null) {
+            return {
+                method,
+                body,
+                credentials: 'include',
+                headers: {
+                    'X-Requested-With': 'XMLHttpRequest'
+                }
+            }
+        }
+    })
+}

assets/styles/_components.css

@@ -1,7 +1,5 @@
-.btn {
-    @apply inline-flex justify-center rounded-lg text-sm font-semibold py-2.5 px-4 bg-primary text-white hover:bg-primary/80 w-full;
-}
-
-.btn--secondary {
-    @apply bg-secondary text-gray-800 hover:bg-secondary/80;
-}
+@import "components/autocomplete.css";
+@import "components/button.css";
+@import "components/datepicker.css";
+@import "components/menu.css";
+@import "components/toast.css";

assets/styles/components/autocomplete.css

@@ -0,0 +1,33 @@
+.autocomplete {
+    @apply relative w-full;
+}
+
+.autocomplete[data-loading="true"]:after {
+    @apply block absolute top-0 right-0;
+    @apply absolute w-4 h-4 rounded-full right-0 mr-4;
+    content: "";
+    border: 3px solid rgba(0, 0, 0, 0.12);
+    border-right: 3px solid rgba(0, 0, 0, 0.48);
+    top: 50%;
+    transform: translateY(-50%);
+    animation: rotate 1s infinite linear;
+}
+
+.autocomplete-icon {
+    @apply absolute top-1/2 right-0 transform -translate-y-1/2 mr-4;
+}
+.autocomplete[data-loading="true"] .autocomplete-icon {
+    @apply hidden;
+}
+
+.autocomplete-result-list {
+    @apply bg-white shadow-md;
+}
+
+.autocomplete-result {
+    @apply p-2;
+}
+.autocomplete-result:hover,
+.autocomplete-result[aria-selected="true"] {
+    @apply bg-gray-200;
+}

assets/styles/components/button.css

@@ -0,0 +1,7 @@
+.btn {
+    @apply inline-flex justify-center rounded-lg text-sm uppercase font-semibold py-2.5 px-4 bg-primary text-white hover:bg-primary/80 w-full;
+}
+
+.btn--secondary {
+    @apply bg-secondary text-gray-800 hover:bg-secondary/80;
+}

assets/styles/components/datepicker.css

@@ -0,0 +1,13 @@
+@import "flatpickr/dist/flatpickr.css";
+
+.flatpickr-day.selected,
+.flatpickr-day.selected:hover,
+.flatpickr-day.selected:focus {
+    background-color: theme('colors.secondary');
+    border-color: theme('colors.secondary');
+}
+
+.flatpickr-monthDropdown-months,
+.flatpickr-current-month .flatpickr-monthDropdown-months {
+    @apply form-select pt-0 pb-0 focus:outline-none focus:shadow-none;
+}

assets/styles/components/menu.css

@@ -0,0 +1,28 @@
+.menu {
+    @apply flex items-center space-x-4 h-8;
+}
+
+.menu--mobile {
+    @apply flex-col space-x-0 h-auto divide-y divide-gray-200;
+}
+
+.menu--mobile li {
+    @apply py-4 w-full;
+}
+
+.menu a {
+    @apply uppercase hover:text-slate-700 text-slate-900 text-sm lg:text-base;
+}
+
+.menu--mobile a {
+    @apply text-lg;
+}
+
+.menu .current > a,
+.menu .active > a {
+    @apply text-slate-900 font-bold;
+}
+
+.menu .icon-link {
+    @apply flex items-center space-x-2;
+}

assets/styles/components/toast.css

@@ -0,0 +1,20 @@
+@import "toastify-js/src/toastify.css";
+
+.toastify {
+    @apply shadow-lg rounded;
+}
+
+.toastify--success {
+    @apply text-gray-100;
+    background: theme('colors.emerald.600');
+}
+
+.toastify--warning {
+    @apply text-gray-100;
+    background: theme('colors.red.600');
+}
+
+.toastify--info {
+    @apply text-gray-100;
+    background: theme('colors.blue.600');
+}