From 44a20355c08390687503582fdfcc067ccea2c4c7 Mon Sep 17 00:00:00 2001
From: omair saleh <uldvstar@gmail.com>
Date: Mon, 26 Oct 2020 11:48:02 +0800
Subject: [PATCH] front-end example for listing users and creating users

---
 .../forms/RegistrationFormComponent.vue       | 307 ++++++++++++++++++
 .../user/elements/UserComponent.vue           | 105 ++++++
 .../accounts/list_users_example.blade.php     |  15 +
 3 files changed, 427 insertions(+)
 create mode 100644 resources/assets/vue/components/authentication/forms/RegistrationFormComponent.vue
 create mode 100644 resources/assets/vue/components/user/elements/UserComponent.vue
 create mode 100644 resources/views/pages/accounts/list_users_example.blade.php

diff --git a/resources/assets/vue/components/authentication/forms/RegistrationFormComponent.vue b/resources/assets/vue/components/authentication/forms/RegistrationFormComponent.vue
new file mode 100644
index 00000000..f38b2824
--- /dev/null
+++ b/resources/assets/vue/components/authentication/forms/RegistrationFormComponent.vue
@@ -0,0 +1,307 @@
+<template>
+    <div class="row">
+        <div class="col p-r-0">
+            <div class="scrollable">
+                <div class="row no-margin">
+                    <div class="col">
+                        <div class="row animated fadeInDownBig">
+                            <div class="col">
+                                <div class="row" v-show="step === 1">
+                                    <div class="col">
+                                        <div class="row m-b-30">
+                                            <div class="col">
+                                                <div class="row">
+                                                    <div class="col p-l-50">
+                                                        <p class="bold fs-12 text-success">To start, how may we address you?</p>
+                                                    </div>
+                                                </div>
+                                                <div class="row">
+                                                    <div class="col">
+                                                        <div class="row animated fadeInUpBig">
+                                                            <div class="col bg-white b-b b-t b-grey animated" :class="[{'shake': $v.parameters.name.$error}]" :style="[$v.parameters.name.$error ? {'border-bottom': 'solid 2px red !important'} : {}]">
+                                                                <div class="row align-items-center">
+                                                                    <div class="col pl-md-0 pr-md-0 bg-white">
+                                                                        <div class="input-group transparent b-grey">
+                                                                            <span class="input-group-addon no-border">
+                                                                                <i class="fa fa-id-badge fa-fw p-l-15 p-t-20" style="padding-right: 18px;"></i>
+                                                                            </span>
+                                                                            <input v-model="parameters.name" placeholder="Full Name (as per IC)" class="form-control no-border bg-white p-t-35 p-b-35 p-l-0 p-r-0">
+                                                                            <validation-error-component :validator="$v.parameters.name" class="absolute fs-12" style=" top: 10px; right: 15px; z-index: 99;"></validation-error-component>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="row m-b-30 animated fadeInUpBig">
+                                            <div class="col">
+                                                <div class="row">
+                                                    <div class="col  p-l-50">
+                                                        <p class="bold fs-12 text-success">Select an account type from one of the options below</p>
+                                                    </div>
+                                                </div>
+                                                <div class="row text-center fs-10">
+                                                    <div class="col p-l-50">
+                                                        <div class="row">
+                                                            <div class="col-auto p-r-0">
+                                                                <div class="b-a b-grey bg-white p-t-20 p-b-20 p-l-45 p-r-45 pointer" :class="{ 'b-primary': parameters.type === 2, 'text-primary': parameters.type === 2, 'b-grey': parameters.type !== 2 }" @click="parameters.type = 2">
+                                                                    <div class="m-b-15">
+                                                                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                                                             width="45" height="45"
+                                                                             viewBox="0 0 172 172"
+                                                                             style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M163.9375,5.375h-94.0625v43h-17.46875l-34.9375,13.4375v108.84375h61.8125v-4.03125h84.65625z" fill="#ffffff"></path><path d="M163.9375,170.65625c-2.28438,0 -4.03125,-1.74687 -4.03125,-4.03125v-157.21875h-86v157.21875c0,2.28438 -1.74688,4.03125 -4.03125,4.03125c-2.28437,0 -4.03125,-1.74687 -4.03125,-4.03125v-161.25c0,-2.28438 1.74688,-4.03125 4.03125,-4.03125h94.0625c2.28438,0 4.03125,1.74687 4.03125,4.03125v161.25c0,2.28438 -1.74687,4.03125 -4.03125,4.03125z" fill="#444b54"></path><path d="M120.9375,170.65625h-8.0625c-2.28437,0 -4.03125,-1.74687 -4.03125,-4.03125v-24.1875c0,-2.28438 1.74688,-4.03125 4.03125,-4.03125h8.0625c2.28437,0 4.03125,1.74687 4.03125,4.03125v24.1875c0,2.28438 -1.74688,4.03125 -4.03125,4.03125zM48.375,170.65625h-8.0625c-2.28437,0 -4.03125,-1.74687 -4.03125,-4.03125v-24.1875c0,-2.28438 1.74688,-4.03125 4.03125,-4.03125h8.0625c2.28438,0 4.03125,1.74687 4.03125,4.03125v24.1875c0,2.28438 -1.74687,4.03125 -4.03125,4.03125zM17.46875,170.65625c-2.28437,0 -4.03125,-1.74687 -4.03125,-4.03125v-104.8125c0,-1.6125 1.075,-3.225 2.55312,-3.7625l34.9375,-13.4375c2.01563,-0.80625 4.43437,0.26875 5.24062,2.28438c0.80625,2.01563 -0.26875,4.43437 -2.28438,5.24062l-32.38437,12.49688v101.99063c0,2.28438 -1.74687,4.03125 -4.03125,4.03125z" fill="#444b54"></path><path d="M139.75,65.84375c-0.26875,0 -0.5375,0 -0.80625,-0.13438c-0.26875,0 -0.5375,-0.13437 -0.80625,-0.26875c-0.26875,-0.13438 -0.40312,-0.26875 -0.67187,-0.40313c-0.26875,-0.13437 -0.40312,-0.26875 -0.67187,-0.5375c-0.80625,-0.80625 -1.20938,-1.74687 -1.20938,-2.82187c0,-0.26875 0,-0.5375 0.13438,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40312 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40312 0.5375,-0.67187c0.26875,-0.26875 0.40313,-0.40312 0.67188,-0.5375c0.26875,-0.13437 0.40313,-0.26875 0.67188,-0.40312c0.26875,-0.13437 0.5375,-0.13437 0.80625,-0.26875c1.34375,-0.26875 2.6875,0.13438 3.62813,1.075c0.13437,0.13438 0.40312,0.40312 0.5375,0.67188c0.13438,0.26875 0.26875,0.40312 0.40312,0.67188c0.13438,0.26875 0.13438,0.5375 0.26875,0.80625c0,0.26875 0.13438,0.5375 0.13438,0.80625c0,1.075 -0.40313,2.15 -1.20938,2.82187c-0.13437,0.13438 -0.40312,0.40313 -0.5375,0.5375c-0.26875,0.13437 -0.40312,0.26875 -0.67187,0.40312c-0.26875,0.13438 -0.5375,0.13438 -0.80625,0.26875c-0.5375,0.26875 -0.80625,0.26875 -1.075,0.26875zM112.875,61.8125c0,-2.28438 1.74688,-4.03125 4.03125,-4.03125v0c2.28437,0 4.03125,1.74687 4.03125,4.03125v0c0,2.28437 -1.74688,4.03125 -4.03125,4.03125v0c-2.28437,0 -4.03125,-1.74688 -4.03125,-4.03125zM94.0625,65.84375c-1.075,0 -2.15,-0.40313 -2.82187,-1.20937c-0.80625,-0.67188 -1.20938,-1.74688 -1.20938,-2.82188c0,-0.26875 0,-0.5375 0.13437,-0.80625c0,-0.26875 0.13437,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40312 0.40312,-0.67187c0.13437,-0.26875 0.26875,-0.40312 0.5375,-0.67187c0.94062,-0.94063 2.28437,-1.34375 3.62812,-1.075c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13437 0.5375,0.26875 0.67188,0.40312c0.26875,0.13437 0.40312,0.26875 0.5375,0.5375c0.13438,0.13437 0.40313,0.40312 0.5375,0.67188c0.13437,0.26875 0.26875,0.40312 0.40313,0.67188c0.13437,0.26875 0.13437,0.5375 0.26875,0.80625c0,0.26875 0.13437,0.5375 0.13437,0.80625c0,1.075 -0.40312,2.15 -1.20937,2.82187c-0.13438,0.13438 -0.40313,0.40313 -0.5375,0.5375c-0.26875,0.13437 -0.40313,0.26875 -0.67187,0.40312c-0.26875,0.13438 -0.5375,0.13438 -0.80625,0.26875c-0.5375,-0.13438 -0.80625,-0.13438 -1.075,-0.13438zM139.75,45.6875c-0.26875,0 -0.5375,0 -0.80625,-0.13437c-0.26875,0 -0.5375,-0.13438 -0.80625,-0.26875c-0.26875,-0.13438 -0.40312,-0.26875 -0.67187,-0.40312c-0.26875,-0.13438 -0.40312,-0.26875 -0.67187,-0.5375c-0.13438,-0.13437 -0.40312,-0.40312 -0.5375,-0.67187c-0.13437,-0.26875 -0.26875,-0.40312 -0.40312,-0.67187c-0.13437,-0.26875 -0.13437,-0.5375 -0.26875,-0.80625c0,-0.26875 -0.13437,-0.5375 -0.13437,-0.80625c0,-0.26875 0,-0.5375 0.13437,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13438,-0.26875 0.26875,-0.40313 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40313 0.5375,-0.67187c0.26875,-0.26875 0.40312,-0.40313 0.67188,-0.5375c0.26875,-0.13438 0.40312,-0.26875 0.67188,-0.40313c0.26875,-0.13438 0.5375,-0.13438 0.80625,-0.26875c1.34375,-0.26875 2.6875,0.13437 3.62813,1.075c0.80625,0.80625 1.20938,1.74688 1.20938,2.82188c0,0.26875 0,0.5375 -0.13438,0.80625c0,0.26875 -0.13437,0.5375 -0.26875,0.80625c-0.13437,0.26875 -0.26875,0.5375 -0.40312,0.67187c-0.13437,0.26875 -0.26875,0.40312 -0.5375,0.67188c-0.13438,0.13438 -0.40313,0.40312 -0.5375,0.5375c-0.26875,0.13437 -0.40312,0.26875 -0.67187,0.40312c-0.26875,0.13437 -0.5375,0.13437 -0.80625,0.26875c-0.13438,0.40313 -0.40313,0.40313 -0.67188,0.40313zM112.875,41.65625c0,-2.28437 1.74688,-4.03125 4.03125,-4.03125v0c2.28437,0 4.03125,1.74688 4.03125,4.03125v0c0,2.28438 -1.74688,4.03125 -4.03125,4.03125v0c-2.28437,0 -4.03125,-1.74687 -4.03125,-4.03125zM94.0625,45.6875c-1.075,0 -2.15,-0.40312 -2.82187,-1.20938c-0.80625,-0.67187 -1.20938,-1.74687 -1.20938,-2.82187c0,-1.075 0.40313,-2.15 1.20938,-2.82187c0.94062,-0.94063 2.28437,-1.34375 3.62812,-1.075c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13438 0.5375,0.26875 0.67188,0.40313c0.26875,0.13437 0.40313,0.26875 0.5375,0.5375c0.80625,0.80625 1.20938,1.74688 1.20938,2.82188c0,1.075 -0.40312,2.15 -1.20938,2.82187c-0.13437,0.13437 -0.40312,0.40312 -0.5375,0.5375c-0.26875,0.13438 -0.40312,0.26875 -0.67187,0.40312c-0.26875,0.13438 -0.5375,0.13438 -0.80625,0.26875c-0.26875,-0.13437 -0.5375,-0.13437 -0.80625,-0.13437zM139.75,86c-0.26875,0 -0.5375,0 -0.80625,-0.13438c-0.26875,0 -0.5375,-0.13437 -0.80625,-0.26875c-0.26875,-0.13438 -0.40312,-0.26875 -0.67187,-0.40313c-0.26875,-0.13437 -0.40312,-0.26875 -0.67187,-0.5375c-0.13438,-0.13438 -0.40312,-0.40313 -0.5375,-0.5375c-0.13437,-0.26875 -0.26875,-0.40313 -0.40312,-0.67187c-0.13437,-0.26875 -0.13437,-0.5375 -0.26875,-0.80625c0,-0.26875 -0.13437,-0.5375 -0.13437,-0.80625c0,-0.26875 0,-0.5375 0.13437,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13438,-0.26875 0.26875,-0.40313 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40313 0.5375,-0.67187c0.26875,-0.26875 0.40312,-0.40313 0.67188,-0.5375c0.26875,-0.13438 0.40312,-0.26875 0.67188,-0.40313c0.26875,-0.13438 0.5375,-0.13438 0.80625,-0.26875c0.5375,-0.13438 1.075,-0.13438 1.6125,0c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13438 0.5375,0.26875 0.67188,0.40313c0.26875,0.13437 0.40312,0.26875 0.5375,0.5375c0.13438,0.13438 0.40312,0.40312 0.5375,0.67188c0.13437,0.26875 0.26875,0.40312 0.40312,0.67188c0.13437,0.26875 0.13437,0.5375 0.26875,0.80625c0,0.26875 0.13437,0.5375 0.13437,0.80625c0,1.075 -0.40312,2.15 -1.20937,2.82188c-0.80625,0.94062 -1.88125,1.34375 -2.95625,1.34375zM112.875,81.96875c0,-2.28437 1.74688,-4.03125 4.03125,-4.03125v0c2.28437,0 4.03125,1.74688 4.03125,4.03125v0c0,2.28437 -1.74688,4.03125 -4.03125,4.03125v0c-2.28437,0 -4.03125,-1.74688 -4.03125,-4.03125zM94.0625,86c-1.075,0 -2.15,-0.40313 -2.82187,-1.20937c-0.13437,-0.13438 -0.40313,-0.40313 -0.5375,-0.5375c-0.13437,-0.26875 -0.26875,-0.40312 -0.40313,-0.67187c-0.13437,-0.26875 -0.13437,-0.5375 -0.26875,-0.80625c0,-0.26875 -0.13437,-0.5375 -0.13437,-0.80625c0,-1.075 0.40312,-2.15 1.20938,-2.82188c0.94062,-0.94062 2.28437,-1.34375 3.62812,-1.075c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13438 0.5375,0.26875 0.67188,0.40313c0.26875,0.13437 0.40313,0.26875 0.5375,0.5375c0.80625,0.80625 1.20938,1.74688 1.20938,2.82188c0,0.26875 0,0.5375 -0.13437,0.80625c0,0.26875 -0.13437,0.5375 -0.26875,0.80625c-0.13437,0.26875 -0.26875,0.5375 -0.40313,0.67188c-0.13437,0.26875 -0.26875,0.40313 -0.5375,0.5375c-0.13437,0.13438 -0.40312,0.40313 -0.5375,0.5375c-0.26875,0.13437 -0.40312,0.26875 -0.67187,0.40312c-0.26875,0.13438 -0.5375,0.13438 -0.80625,0.26875c0,-0.13437 -0.26875,-0.13437 -0.5375,-0.13437z" fill="#71c2ff"></path><g fill="#71c2ff"><path d="M139.75,106.15625c-1.075,0 -2.15,-0.40313 -2.82188,-1.20938c-0.13437,-0.13437 -0.40312,-0.40312 -0.5375,-0.5375c-0.13438,-0.26875 -0.26875,-0.40312 -0.40312,-0.67187c-0.13438,-0.26875 -0.13438,-0.5375 -0.26875,-0.80625c0,-0.26875 -0.13438,-0.5375 -0.13438,-0.80625c0,-0.26875 0,-0.5375 0.13438,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40313 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40313 0.5375,-0.67187c1.47813,-1.47812 4.16563,-1.47812 5.64375,0c0.13438,0.13437 0.40312,0.40312 0.5375,0.67188c0.13437,0.26875 0.26875,0.40312 0.40312,0.67188c0.13437,0.26875 0.13437,0.5375 0.26875,0.80625c0,0.26875 0.13437,0.5375 0.13437,0.80625c0,0.26875 0,0.5375 -0.13437,0.80625c0,0.26875 -0.13438,0.5375 -0.26875,0.80625c-0.13438,0.26875 -0.26875,0.5375 -0.40312,0.67188c-0.13438,0.26875 -0.26875,0.40313 -0.5375,0.5375c-0.67187,0.80625 -1.74688,1.20938 -2.82188,1.20938zM112.875,102.125c0,-2.28437 1.74688,-4.03125 4.03125,-4.03125v0c2.28437,0 4.03125,1.74688 4.03125,4.03125v0c0,2.28437 -1.74688,4.03125 -4.03125,4.03125v0c-2.28437,0 -4.03125,-1.74688 -4.03125,-4.03125zM94.0625,106.15625c-1.075,0 -2.15,-0.40313 -2.82187,-1.20938c-0.80625,-0.67187 -1.20938,-1.74687 -1.20938,-2.82187c0,-1.075 0.40313,-2.15 1.20938,-2.82187c0.94062,-0.94063 2.28437,-1.34375 3.62812,-1.075c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13437 0.5375,0.26875 0.67188,0.40312c0.26875,0.13437 0.40313,0.26875 0.5375,0.5375c0.80625,0.80625 1.20938,1.74688 1.20938,2.82187c0,1.075 -0.40312,2.15 -1.20938,2.82187c-0.13437,0.13438 -0.40312,0.40313 -0.5375,0.5375c-0.26875,0.13437 -0.40312,0.26875 -0.67187,0.40313c-0.26875,0.13437 -0.5375,0.13437 -0.80625,0.26875c-0.26875,-0.13438 -0.5375,-0.13438 -0.80625,-0.13438z"></path></g><g fill="#71c2ff"><path d="M139.75,126.3125c-1.075,0 -2.15,-0.40313 -2.82188,-1.20938c-0.13437,-0.13437 -0.40312,-0.40312 -0.5375,-0.5375c-0.13438,-0.26875 -0.26875,-0.40312 -0.40312,-0.67187c-0.13438,-0.26875 -0.13438,-0.5375 -0.26875,-0.80625c0,-0.26875 -0.13438,-0.5375 -0.13438,-0.80625c0,-0.26875 0,-0.5375 0.13438,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40313 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40313 0.5375,-0.67187c1.47813,-1.47812 4.16563,-1.47812 5.64375,0c0.80625,0.80625 1.20938,1.74687 1.20938,2.82187c0,0.26875 0,0.5375 -0.13438,0.80625c0,0.26875 -0.13437,0.5375 -0.26875,0.80625c-0.13437,0.26875 -0.26875,0.5375 -0.40312,0.67188c-0.13437,0.26875 -0.26875,0.40313 -0.5375,0.5375c-0.5375,0.94062 -1.6125,1.34375 -2.6875,1.34375zM112.875,122.28125c0,-2.28437 1.74688,-4.03125 4.03125,-4.03125v0c2.28437,0 4.03125,1.74688 4.03125,4.03125v0c0,2.28437 -1.74688,4.03125 -4.03125,4.03125v0c-2.28437,0 -4.03125,-1.74688 -4.03125,-4.03125zM94.0625,126.3125c-1.075,0 -2.15,-0.40313 -2.82187,-1.20938c-0.80625,-0.67187 -1.20938,-1.74687 -1.20938,-2.82187c0,-0.26875 0,-0.5375 0.13437,-0.80625c0,-0.26875 0.13437,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40313 0.40312,-0.67187c0.13437,-0.26875 0.26875,-0.40313 0.5375,-0.67187c0.94062,-0.94063 2.28437,-1.34375 3.62812,-1.075c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13437 0.5375,0.26875 0.67188,0.40312c0.26875,0.13437 0.40312,0.26875 0.5375,0.5375c0.13438,0.13437 0.40313,0.40313 0.5375,0.67188c0.13437,0.26875 0.26875,0.40313 0.40313,0.67188c0.13437,0.26875 0.13437,0.5375 0.26875,0.80625c0,0.26875 0.13437,0.5375 0.13437,0.80625c0,1.075 -0.40312,2.15 -1.20937,2.82187c-0.94063,0.67188 -2.01562,1.075 -3.09063,1.075z"></path></g><g fill="#71c2ff"><path d="M139.75,146.46875c-1.075,0 -2.15,-0.40312 -2.82188,-1.20937c-0.13437,-0.13438 -0.40312,-0.40313 -0.5375,-0.5375c-0.13438,-0.26875 -0.26875,-0.40312 -0.40312,-0.67187c-0.13438,-0.26875 -0.13438,-0.5375 -0.26875,-0.80625c0,-0.26875 -0.13438,-0.5375 -0.13438,-0.80625c0,-0.26875 0,-0.5375 0.13438,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40312 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40312 0.5375,-0.5375c0.26875,-0.13438 0.40313,-0.40312 0.67188,-0.5375c0.26875,-0.13438 0.40313,-0.26875 0.67188,-0.40312c0.26875,-0.13438 0.5375,-0.13438 0.80625,-0.26875c1.34375,-0.26875 2.6875,0.13438 3.62813,1.075c0.13437,0.13438 0.40312,0.40313 0.5375,0.5375c0.13438,0.26875 0.26875,0.40312 0.40312,0.67188c0.13438,0.26875 0.13438,0.5375 0.26875,0.80625c0,0.26875 0.13438,0.5375 0.13438,0.80625c0,0.26875 0,0.5375 -0.13438,0.80625c0,0.26875 -0.13437,0.5375 -0.26875,0.80625c-0.13437,0.26875 -0.26875,0.5375 -0.40312,0.67188c-0.13437,0.26875 -0.26875,0.40312 -0.5375,0.5375c-0.80625,0.94063 -1.88125,1.34375 -2.95625,1.34375zM94.0625,146.46875c-1.075,0 -2.15,-0.40312 -2.82187,-1.20937c-0.80625,-0.80625 -1.20938,-1.74688 -1.20938,-2.82188c0,-1.075 0.40313,-2.15 1.20938,-2.82188c0.94062,-0.94062 2.28437,-1.34375 3.62812,-1.075c0.26875,0 0.5375,0.13438 0.80625,0.26875c0.26875,0.13437 0.5375,0.26875 0.67188,0.40312c0.26875,0.13438 0.40313,0.26875 0.5375,0.5375c0.80625,0.80625 1.20938,1.74687 1.20938,2.82187c0,1.075 -0.40312,2.15 -1.20938,2.82188c-0.13437,0.13437 -0.40312,0.40312 -0.5375,0.5375c-0.26875,0.13438 -0.40312,0.26875 -0.67187,0.40312c-0.26875,0.13438 -0.5375,0.13438 -0.80625,0.26875c-0.26875,-0.13438 -0.5375,-0.13438 -0.80625,-0.13438z"></path></g><g fill="#71c2ff"><path d="M44.34375,86c-1.075,0 -2.15,-0.40313 -2.82187,-1.20937c-0.80625,-0.67187 -1.20938,-1.74688 -1.20938,-2.82188c0,-0.26875 0,-0.5375 0.13437,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40313 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40313 0.5375,-0.67187c0.94062,-0.94063 2.28438,-1.34375 3.62813,-1.075c0.26875,0 0.5375,0.13438 0.80625,0.26875c0.26875,0.13438 0.5375,0.26875 0.67188,0.40313c0.26875,0.13438 0.40312,0.26875 0.67188,0.5375c0.13438,0.13438 0.40312,0.40313 0.5375,0.67188c0.13437,0.26875 0.26875,0.40313 0.40312,0.67188c0.13437,0.26875 0.13437,0.5375 0.26875,0.80625c0,0.26875 0.13437,0.5375 0.13437,0.80625c0,1.075 -0.40312,2.15 -1.20937,2.82187c-0.13438,0.13438 -0.40312,0.40313 -0.67187,0.5375c-0.26875,0.13437 -0.40312,0.26875 -0.67187,0.40312c-0.26875,0.13438 -0.5375,0.13438 -0.80625,0.26875c-0.5375,-0.13437 -0.80625,-0.13437 -1.075,-0.13437z"></path></g><g fill="#71c2ff"><path d="M44.34375,106.15625c-1.075,0 -2.15,-0.40313 -2.82187,-1.20938c-0.80625,-0.67187 -1.20938,-1.74687 -1.20938,-2.82187c0,-0.26875 0,-0.5375 0.13437,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40313 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40313 0.5375,-0.67187c0.94062,-0.94063 2.28438,-1.34375 3.62813,-1.075c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13437 0.5375,0.26875 0.67188,0.40312c0.26875,0.13437 0.40312,0.26875 0.67188,0.5375c0.13438,0.13437 0.40312,0.40313 0.5375,0.67188c0.13437,0.26875 0.26875,0.40313 0.40312,0.67188c0.13437,0.26875 0.13437,0.5375 0.26875,0.80625c0,0.26875 0.13437,0.5375 0.13437,0.80625c0,0.26875 0,0.5375 -0.13437,0.80625c0,0.26875 -0.13438,0.5375 -0.26875,0.80625c-0.13437,0.26875 -0.26875,0.5375 -0.40312,0.67188c-0.13438,0.26875 -0.26875,0.40312 -0.5375,0.5375c-0.13437,0.13438 -0.40312,0.40313 -0.67187,0.5375c-0.26875,0.13437 -0.40312,0.26875 -0.67187,0.40313c-0.26875,0.13437 -0.5375,0.13437 -0.80625,0.26875c-0.40313,-0.13438 -0.67187,-0.13438 -0.94063,-0.13438z"></path></g><g fill="#71c2ff"><path d="M44.34375,126.3125c-1.075,0 -2.15,-0.40313 -2.82187,-1.20938c-0.13438,-0.13437 -0.40313,-0.40312 -0.5375,-0.5375c-0.13437,-0.26875 -0.26875,-0.40312 -0.40313,-0.67187c-0.13437,-0.26875 -0.13437,-0.5375 -0.26875,-0.80625c0,-0.26875 -0.13437,-0.5375 -0.13437,-0.80625c0,-0.26875 0,-0.5375 0.13437,-0.80625c0,-0.26875 0.13437,-0.5375 0.26875,-0.80625c0.13438,-0.26875 0.26875,-0.40313 0.40313,-0.67187c0.13437,-0.26875 0.26875,-0.40313 0.5375,-0.67187c0.94062,-0.94063 2.28437,-1.34375 3.62812,-1.075c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13437 0.5375,0.26875 0.67188,0.40312c0.26875,0.13437 0.40312,0.26875 0.67188,0.5375c0.13437,0.13437 0.40312,0.40313 0.5375,0.67188c0.13438,0.26875 0.26875,0.40313 0.40313,0.67188c0.13437,0.26875 0.13437,0.5375 0.26875,0.80625c0,0.26875 0.13438,0.5375 0.13438,0.80625c0,0.26875 0,0.5375 -0.13438,0.80625c0,0.26875 -0.13437,0.5375 -0.26875,0.80625c-0.13438,0.26875 -0.26875,0.5375 -0.40313,0.67188c-0.13437,0.26875 -0.26875,0.40312 -0.5375,0.5375c-0.13438,0.13438 -0.40312,0.40313 -0.67187,0.5375c-0.26875,0.13437 -0.40312,0.26875 -0.67187,0.40313c-0.26875,0.13437 -0.5375,0.13437 -0.80625,0.26875c-0.26875,-0.13438 -0.5375,-0.13438 -0.80625,-0.13438z"></path></g></g></g></svg>
+                                                                    </div>
+                                                                    <p class="no-margin bold">Company</p>
+                                                                </div>
+                                                            </div>
+                                                            <div class="col-auto">
+                                                                <div class="b-a b-grey bg-white p-t-20 p-b-20 p-l-45 p-r-45 pointer" :class="{ 'b-primary': parameters.type === 1, 'text-primary': parameters.type === 1, 'b-grey': parameters.type !== 1 }"  @click="parameters.type = 1">
+                                                                    <div class="m-b-15">
+                                                                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                                                             width="45" height="45"
+                                                                             viewBox="0 0 172 172"
+                                                                             style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g id="Layer_1"><path d="M116.90625,80.22188c0,17.06563 -13.84063,30.90625 -30.90625,30.90625c-17.06562,0 -30.90625,-13.84062 -30.90625,-30.90625v-36.81875l61.8125,7.39063z" fill="#ffffff"></path><path d="M135.85313,155.3375c-9.94375,-17.33437 -28.4875,-29.025 -49.85313,-29.025v0c-21.36562,0 -39.90938,11.69063 -49.85312,29.025l0.13437,4.56875h99.4375z" fill="#dfe8f4"></path><path d="M36.14688,159.36875c-0.67187,0 -1.34375,-0.13438 -2.01562,-0.5375c-1.88125,-1.075 -2.55313,-3.49375 -1.47813,-5.50937c10.88438,-19.08125 31.30938,-31.04063 53.34688,-31.04063c22.0375,0 42.4625,11.95937 53.34688,31.04063c1.075,1.88125 0.40312,4.43437 -1.47813,5.50937c-1.88125,1.075 -4.43437,0.40312 -5.50937,-1.47812c-9.54063,-16.6625 -27.27813,-27.00938 -46.35938,-27.00938c-19.08125,0 -36.81875,10.34688 -46.35937,27.00938c-0.67187,1.20937 -2.01562,2.01563 -3.49375,2.01563zM104.275,39.10313l-0.5375,-0.80625c-3.89688,-5.50937 -10.34687,-8.86875 -17.06562,-8.86875h-11.42187c-17.06563,0 -30.90625,13.84063 -30.90625,30.90625v0c0,2.28437 1.74687,4.03125 4.03125,4.03125h6.9875c0.13437,0 0.13437,0 0.26875,0c15.45313,0 31.175,0 42.4625,-10.07812v0.13437c0.5375,-0.5375 1.075,-0.94063 1.47812,-1.47812c1.47812,-1.6125 4.03125,-1.88125 5.64375,-0.40313c1.74687,1.47813 1.88125,4.16563 0.26875,5.9125c-0.67187,0.67188 -1.20938,1.20938 -1.88125,1.88125c-1.74687,1.74687 -1.075,4.70312 1.20938,5.64375v0c1.34375,0.5375 2.82187,0.80625 4.3,0.94062c2.01563,0.26875 3.62813,1.88125 3.62813,4.03125v9.1375c0,14.24375 -10.75,26.47187 -24.99375,27.4125c-15.45313,1.075 -28.4875,-11.2875 -28.62188,-26.74062c0,-2.15 -1.6125,-4.03125 -3.7625,-4.16563c-2.28438,-0.13438 -4.3,1.74688 -4.3,4.03125c0,19.21563 15.72187,34.9375 34.9375,34.9375c18.67813,0 33.99688,-14.64688 34.9375,-33.19062c0,-0.13438 0,-0.26875 0,-0.40313v-18.8125v-4.03125v-1.34375c0,-9.675 -7.25625,-17.60312 -16.6625,-18.67813z" fill="#444b54"></path></g></g></svg>
+                                                                    </div>
+                                                                    <p class="no-margin bold">Personal</p>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="row m-b-30" v-show="parameters.type === 2">
+                                            <div class="col">
+                                                <div class="row">
+                                                    <div class="col p-l-50">
+                                                        <p class="bold fs-12 text-success">What is your organization name?</p>
+                                                    </div>
+                                                </div>
+                                                <div class="row">
+                                                    <div class="col">
+                                                        <div class="row animated fadeInUpBig">
+                                                            <div class="col bg-white b-b b-t b-grey animated" :class="[{'shake': $v.parameters.company_name.$error}]" :style="[$v.parameters.company_name.$error ? {'border-bottom': 'solid 2px red !important'} : {}]">
+                                                                <div class="row align-items-center">
+                                                                    <div class="col pl-md-0 pr-md-0 bg-white">
+                                                                        <div class="input-group transparent b-grey">
+                                                                            <span class="input-group-addon no-border">
+                                                                                <i class="fa fa-id-badge fa-fw p-l-15 p-t-20" style="padding-right: 18px;"></i>
+                                                                            </span>
+                                                                            <input v-model="parameters.company_name" placeholder="Your Company Name" class="form-control no-border bg-white p-t-35 p-b-35 p-l-0 p-r-0">
+                                                                            <validation-error-component :validator="$v.parameters.company_name" class="absolute fs-12" style=" top: 10px; right: 15px; z-index: 99;"></validation-error-component>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="row m-b-30 align-items-center">
+                                            <div class="col-auto p-l-0 animated fadeInLeftBig slow">
+                                                <div class="b-t b-b b-r b-primary bg-transparent all-caps text-primary p-t-15 p-b-15 p-l-50 p-r-50 bold font-lato pointer" style="letter-spacing: 8px;" @click="nextStep()">Next <i class="fa fa-chevron-right fs-13"></i></div>
+                                            </div>
+                                            <div class="col animated fadeInRightBig slow">
+                                                <small class="font-lato muted fs-10 pointer" @click="$store.dispatch('toggleSection', {name: 'registrationForm', status: false})" style=" letter-spacing: 2px; ">I already have an account</small>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="row animated fadeInUpBig" v-show="step === 2">
+                                    <div class="col">
+                                        <div class="row">
+                                            <div class="col p-l-50">
+                                                <p class="bold fs-12 text-success">To help us server you better, please provide us with your contact information</p>
+                                            </div>
+                                        </div>
+                                        <div class="row">
+                                            <div class="col">
+                                                <div class="row">
+                                                    <div class="col bg-white b-b b-t b-grey animated" :class="[{'shake': $v.parameters.phone.$error}]" :style="[$v.parameters.phone.$error ? {'border-bottom': 'solid 2px red !important'} : {}]">
+                                                        <div class="row align-items-center">
+                                                            <div class="col pl-md-0 pr-md-0 bg-white">
+                                                                <div class="input-group transparent b-grey">
+                                                                    <span class="input-group-addon no-border">
+                                                                        <i class="fa fa-mobile fs-16 fa-fw p-l-15 p-t-20" style="padding-right: 18px;"></i>
+                                                                    </span>
+                                                                    <input v-model="parameters.phone" placeholder="Phone Number" class="form-control no-border bg-white p-t-35 p-b-35 p-l-0 p-r-0">
+                                                                    <validation-error-component :validator="$v.parameters.phone" class="absolute fs-12" style=" top: 10px; right: 15px; z-index: 99;"></validation-error-component>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="row">
+                                                    <div class="col bg-white b-b b-t b-grey animated" :class="[{'shake': $v.parameters.wechat_id.$error}]" :style="[$v.parameters.wechat_id.$error ? {'border-bottom': 'solid 2px red !important'} : {}]">
+                                                        <div class="row align-items-center">
+                                                            <div class="col pl-md-0 pr-md-0 bg-white">
+                                                                <div class="input-group transparent b-grey">
+                                                                <span class="input-group-addon no-border">
+                                                                    <i class="fa fa-weixin fa-fw p-l-15 p-t-20" style="padding-right: 22px;margin-left: -4px;"></i>
+                                                                </span>
+                                                                    <input v-model="parameters.wechat_id" placeholder="wechat_id ID" class="form-control no-border bg-white p-t-35 p-b-35 p-l-0 p-r-0">
+                                                                    <validation-error-component :validator="$v.parameters.wechat_id" class="absolute fs-12" style=" top: 10px; right: 15px; z-index: 99;"></validation-error-component>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="row m-t-30">
+                                            <div class="col p-l-50">
+                                                <p class="bold fs-12 text-success">Finally, Help us secure your account</p>
+                                            </div>
+                                        </div>
+                                        <div class="row">
+                                            <div class="col">
+                                                <div class="row">
+                                                    <div class="col bg-white b-b b-t b-grey animated" :class="[{'shake': $v.parameters.password.$error}]" :style="[$v.parameters.password.$error ? {'border-bottom': 'solid 2px red !important'} : {}]">
+                                                        <div class="row align-items-center">
+                                                            <div class="col pl-md-0 pr-md-0 bg-white">
+                                                                <div class="input-group transparent b-grey">
+                                                                    <span class="input-group-addon no-border">
+                                                                        <i class="fa fa-lock fs-16 fa-fw p-l-15 p-t-20" style="padding-right: 18px;"></i>
+                                                                    </span>
+                                                                    <input type="password" v-model="parameters.password" placeholder="Password" class="form-control no-border bg-white p-t-35 p-b-35 p-l-0 p-r-0">
+                                                                    <validation-error-component :validator="$v.parameters.password" class="absolute fs-12" style=" top: 10px; right: 15px; z-index: 99;"></validation-error-component>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="row">
+                                                    <div class="col bg-white b-b b-t b-grey animated" :class="[{'shake': $v.parameters.confirm_password.$error}]" :style="[$v.parameters.confirm_password.$error ? {'border-bottom': 'solid 2px red !important'} : {}]">
+                                                        <div class="row align-items-center">
+                                                            <div class="col pl-md-0 pr-md-0 bg-white">
+                                                                <div class="input-group transparent b-grey">
+                                                                    <span class="input-group-addon no-border">
+                                                                        <i class="fa fa-lock fa-fw p-l-15 p-t-20" style="padding-right: 22px;margin-left: -4px;"></i>
+                                                                    </span>
+                                                                    <input type="password" v-model="parameters.confirm_password" placeholder="Confirm password" class="form-control no-border bg-white p-t-35 p-b-35 p-l-0 p-r-0">
+                                                                    <validation-error-component :validator="$v.parameters.confirm_password" class="absolute fs-12" style=" top: 10px; right: 15px; z-index: 99;"></validation-error-component>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="row m-t-30 align-items-center">
+                                            <div class="col-auto p-l-0 animated fadeInLeftBig slow">
+                                                <a>
+                                                    <div class="b-t b-b b-r b-success bg-success all-caps text-white p-t-15 p-b-15 p-l-50 p-r-50 bold font-lato pointer pointer" @click="submit(route('api.account.authentication.registration'), 'post', section, false, false)" style="letter-spacing: 8px;"><i class="fa fa-check fs-13"></i> Complete</div>
+                                                </a>
+                                            </div>
+                                            <div class="col animated fadeInRightBig slow">
+                                                <small class="font-lato muted fs-10 pointer" @click="step = 1" style=" letter-spacing: 2px; ">Go Back</small>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</template>
+<script>
+    import { required, email, sameAs, requiredIf, numeric } from "vuelidate/lib/validators";
+    import request from '../../../mixins/requestMixin'
+
+    export default {
+        props: {
+            section:{
+                type: String,
+                required: true
+            },
+            email: {
+                type: String,
+                required: true
+            }
+        },
+        computed: {
+            rules () {
+                return this.step === 1 ? {
+                    name: {required},
+                    type: {required},
+                    company_name: { required: requiredIf(() => {
+                            return this.parameters.type === 2;
+                        })
+                    },
+                    phone: {},
+                    wechat_id: {},
+                    password: {},
+                    confirm_password: {}
+
+                }
+                : {
+                    name: {required},
+                    type: {required},
+                    company_name: {
+                        required: this.type === 2
+                    },
+                    phone: { required, numeric },
+                    wechat_id: {},
+                    password: { required },
+                    confirm_password: { sameAsPassword: sameAs('password') }
+                }
+            }
+        },
+        data() {
+            return {
+                step: 1,
+                parameters: {
+                    email: this.email,
+                    name: '',
+                    type: 2,
+                    company_name: '',
+                    phone: '',
+                    wechat_id: '',
+                    password: '',
+                    confirm_password: ''
+                }
+            };
+        },
+        validations() {
+            return {
+                parameters: this.rules
+            }
+        },
+        watch: {
+            'email': function() {
+                this.parameters.email = this.email;
+            }
+        },
+        methods:{
+            nextStep(){
+                if(this.validate()){
+                    this.$v.$reset();
+                    this.step += 1;
+                }
+            },
+            successHandler(response){
+                localStorage.setItem('user-token', response.payload.access_token);
+                this.$store.dispatch('userAuthentication', {access_token: response.payload.access_token});
+
+                this.error = '';
+                this.$store.dispatch('toggleSection', {name: 'loginSuccess', status: true})
+                setTimeout(function(){
+                    window.location.href = response.payload.redirect_url;
+                }, 2000);
+            },
+            errorHandler(error){
+
+            }
+        },
+        mixins: [request]
+    }
+
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/user/elements/UserComponent.vue b/resources/assets/vue/components/user/elements/UserComponent.vue
new file mode 100644
index 00000000..5cdd0861
--- /dev/null
+++ b/resources/assets/vue/components/user/elements/UserComponent.vue
@@ -0,0 +1,105 @@
+<template>
+    <div class="row m-b-10">
+        <div class="col">
+            <div class="row no-margin">
+                <div class="col bg-master-lightest">
+                    <div class="row align-items-center justify-content-center fs-11">
+                        <div class="col-auto p-r-10 p-l-10 p-t-15 p-b-15 bg-master-lighter">
+                            <svg v-if="user.role_id === 0" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                 width="25" height="25"
+                                 viewBox="0 0 172 172"
+                                 style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g id="original-icon" fill="#000000"><path d="M83.26211,19.35c-10.40566,0 -19.76153,5.69414 -26.54746,11.22871c-6.78594,5.54297 -11.11113,11.10274 -11.11113,11.10274l-1.94004,2.48594l3.03184,0.89023c0,0 1.17578,0.32754 2.58672,1.77207c1.40254,1.43613 2.90586,3.88848 2.90586,8.53281c0,6.02168 0.92383,10.88438 1.38574,12.94199c-1.20098,1.0918 -1.97363,2.63711 -1.97363,4.36719c0,1.39414 0.41992,2.58672 0.76426,3.7541c0.16797,0.58789 0.33594,1.13379 0.44512,1.54531c0.10918,0.41152 0.13437,0.81465 0.13437,0.50391c0,2.92266 2.45234,5.20703 5.34141,5.30781c0.39473,8.33125 4.40918,15.68828 10.51484,20.53418v8.02051c-3.09902,0.94062 -10.54004,3.34258 -18.11543,6.92031c-4.94668,2.33477 -9.91855,5.14824 -13.79024,8.48242c-3.87168,3.33418 -6.79434,7.32344 -6.79434,12.00976v12.9h111.8v-12.9c0,-4.68633 -2.92266,-8.67559 -6.79434,-12.00976c-3.87168,-3.33418 -8.84355,-6.14766 -13.79024,-8.48242c-7.57539,-3.57773 -15.01641,-5.97969 -18.11543,-6.92031v-8.01211c6.10566,-4.8459 10.12012,-12.20293 10.51484,-20.54258c2.88906,-0.10078 5.34141,-2.38516 5.34141,-5.30781c0,0.31074 0.0252,-0.09238 0.13438,-0.50391c0.10918,-0.41152 0.27715,-0.95742 0.44512,-1.54531c0.34434,-1.16738 0.76426,-2.35996 0.76426,-3.7541c0,-1.76367 -0.79785,-3.31738 -2.02402,-4.41758c0.39473,-2.26758 2.02402,-11.97617 2.02402,-18.8041c0,-7.72656 -2.88906,-13.26113 -6.78594,-16.69609c-3.50215,-3.07383 -7.61738,-4.3084 -11.2623,-4.56875c-0.58789,-0.93223 -1.6293,-2.39355 -3.7877,-4.08164c-3.09902,-2.41035 -8.0709,-4.75352 -15.30195,-4.75352zM83.26211,23.65c6.31562,0 10.23769,1.95684 12.64805,3.84649c2.41875,1.88965 3.2166,3.55254 3.2166,3.55254l0.58789,1.20098h1.33535c2.86387,0 6.71875,1.0918 9.71699,3.7373c3.00664,2.64551 5.33301,6.77754 5.33301,13.4627c0,5.99649 -1.42773,14.74766 -1.84766,17.2c-0.0084,0 -0.0168,0 -0.03359,0c-0.18476,0 -0.15117,0.04199 -0.26875,0.05879v-6.50879c0,-7.35703 -3.00664,-12.30371 -6.03008,-15.23476c-3.02344,-2.93106 -6.18965,-4.00606 -6.18965,-4.00606l-1.22617,-0.41152l-0.94062,0.89863c0,0 -1.35215,1.32695 -4.61914,2.82187c-3.26699,1.49492 -8.32285,3.03184 -15.39434,3.03184c-3.87168,0 -8.96953,1.36895 -13.39551,4.45957c-4.40918,3.08223 -8.0793,8.12129 -8.09609,14.95762c-0.11758,-0.0168 -0.09238,-0.06719 -0.27715,-0.06719c-0.05039,0 -0.10078,0.0168 -0.15117,0.0168c-0.43672,-2.07441 -1.14219,-6.12246 -1.14219,-11.3043c0,-5.62695 -2.01562,-9.36426 -4.12363,-11.53105c-0.89863,-0.92383 -1.1002,-0.76426 -1.88125,-1.22617c1.48652,-1.74688 4.24961,-4.8459 8.95273,-8.68398c6.39121,-5.21543 15.02481,-10.27129 23.82637,-10.27129zM101.05,45.48594c0.5207,0.20156 1.88125,0.62988 3.88008,2.56152c2.35156,2.28438 4.71992,5.9293 4.71992,12.15254v13.55508l3.2334,-1.89805c0.5543,-0.31914 1.0666,-0.60469 1.42774,-0.78945c0.04199,-0.0252 0.05879,-0.0252 0.10078,-0.05039c0.98262,0.10078 1.68809,0.78945 1.68809,1.64609v0.0084c0,0.15957 -0.26035,1.41934 -0.58789,2.54473c-0.16797,0.5543 -0.33594,1.11699 -0.47871,1.6293c-0.13438,0.5123 -0.27715,0.87344 -0.27715,1.6293c0,0.57109 -0.47031,1.075 -1.20937,1.075h-3.89688v2.93945c0,11.65703 -8.40684,21.29004 -19.47598,23.26367l-0.61309,0.10078l-0.46191,0.42832c-0.83984,0.76426 -1.89805,1.21777 -3.09902,1.21777c-1.20098,0 -2.25918,-0.45351 -3.09902,-1.21777l-0.46191,-0.42832l-0.61309,-0.10078c-11.06914,-1.97363 -19.47598,-11.60664 -19.47598,-23.26367v-2.93945h-3.89687c-0.73906,0 -1.20938,-0.50391 -1.20938,-1.075c0,-0.75586 -0.14277,-1.11699 -0.28555,-1.6293c-0.14278,-0.51231 -0.31074,-1.075 -0.47871,-1.6293c-0.32754,-1.12539 -0.57949,-2.38516 -0.57949,-2.54473c0,-0.86504 0.70547,-1.55371 1.68809,-1.65449c0.04199,0.0252 0.05879,0.0252 0.10078,0.05039c0.36113,0.18476 0.87344,0.47031 1.42774,0.78945l3.2334,1.89805v-6.9959c0,-5.3582 2.6707,-8.96113 6.26524,-11.47226c3.59453,-2.51113 8.16328,-3.68691 10.93476,-3.68691c7.70137,0 13.39551,-1.68809 17.1832,-3.41816c2.81347,-1.28496 3.55254,-2.07441 4.3168,-2.6959zM74.175,70.95c-1.78047,0 -3.225,1.44453 -3.225,3.225c0,1.78047 1.44453,3.225 3.225,3.225c1.78047,0 3.225,-1.44453 3.225,-3.225c0,-1.78047 -1.44453,-3.225 -3.225,-3.225zM97.825,70.95c-1.78047,0 -3.225,1.44453 -3.225,3.225c0,1.78047 1.44453,3.225 3.225,3.225c1.78047,0 3.225,-1.44453 3.225,-3.225c0,-1.78047 -1.44453,-3.225 -3.225,-3.225zM73.1,107.12207c2.29277,1.20098 4.77031,2.1248 7.39902,2.65391c1.52012,1.20938 3.40137,2.02402 5.50098,2.02402c2.09121,0 3.96406,-0.81465 5.47578,-2.01562c2.63711,-0.5207 5.12305,-1.44453 7.42422,-2.65391v12.59766c-0.26035,0.5207 -3.66172,7.12188 -12.9,7.12188c-9.23828,0 -12.63965,-6.60117 -12.9,-7.12188zM68.8,116.86426v4.03965l0.22676,0.46191c0,0 5.07266,9.78418 16.97324,9.78418c11.90059,0 16.97324,-9.78418 16.97324,-9.78418l0.22676,-0.46191v-4.03965c3.45176,1.0834 9.77578,3.2166 16.28457,6.29043c4.72832,2.23399 9.43145,4.92988 12.81601,7.84414c3.38457,2.91426 5.29941,5.9125 5.29941,8.75117v8.6h-103.2v-8.6c0,-2.83867 1.91484,-5.83691 5.29941,-8.75117c3.38457,-2.91426 8.0877,-5.61016 12.81601,-7.84414c6.50879,-3.07383 12.83281,-5.20703 16.28457,-6.29043zM43,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM51.6,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM68.8,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM77.4,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM86,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM94.6,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM103.2,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM111.8,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM120.4,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM129,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15z"></path></g></g></svg>
+                            <svg v-if="user.role_id === 1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                 width="25" height="25"
+                                 viewBox="0 0 172 172"
+                                 style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none" stroke="none"></path><g id="original-icon" fill="#000000" stroke="none" opacity="0" visibility="hidden"><path d="M83.26211,19.35c-10.40566,0 -19.76153,5.69414 -26.54746,11.22871c-6.78594,5.54297 -11.11113,11.10274 -11.11113,11.10274l-1.94004,2.48594l3.03184,0.89023c0,0 1.17578,0.32754 2.58672,1.77207c1.40254,1.43613 2.90586,3.88848 2.90586,8.53281c0,6.02168 0.92383,10.88438 1.38574,12.94199c-1.20098,1.0918 -1.97363,2.63711 -1.97363,4.36719c0,1.39414 0.41992,2.58672 0.76426,3.7541c0.16797,0.58789 0.33594,1.13379 0.44512,1.54531c0.10918,0.41152 0.13437,0.81465 0.13437,0.50391c0,2.92266 2.45234,5.20703 5.34141,5.30781c0.39473,8.33125 4.40918,15.68828 10.51484,20.53418v8.02051c-3.09902,0.94062 -10.54004,3.34258 -18.11543,6.92031c-4.94668,2.33477 -9.91855,5.14824 -13.79024,8.48242c-3.87168,3.33418 -6.79434,7.32344 -6.79434,12.00976v12.9h111.8v-12.9c0,-4.68633 -2.92266,-8.67559 -6.79434,-12.00976c-3.87168,-3.33418 -8.84355,-6.14766 -13.79024,-8.48242c-7.57539,-3.57773 -15.01641,-5.97969 -18.11543,-6.92031v-8.01211c6.10566,-4.8459 10.12012,-12.20293 10.51484,-20.54258c2.88906,-0.10078 5.34141,-2.38516 5.34141,-5.30781c0,0.31074 0.0252,-0.09238 0.13438,-0.50391c0.10918,-0.41152 0.27715,-0.95742 0.44512,-1.54531c0.34434,-1.16738 0.76426,-2.35996 0.76426,-3.7541c0,-1.76367 -0.79785,-3.31738 -2.02402,-4.41758c0.39473,-2.26758 2.02402,-11.97617 2.02402,-18.8041c0,-7.72656 -2.88906,-13.26113 -6.78594,-16.69609c-3.50215,-3.07383 -7.61738,-4.3084 -11.2623,-4.56875c-0.58789,-0.93223 -1.6293,-2.39355 -3.7877,-4.08164c-3.09902,-2.41035 -8.0709,-4.75352 -15.30195,-4.75352zM83.26211,23.65c6.31562,0 10.23769,1.95684 12.64805,3.84649c2.41875,1.88965 3.2166,3.55254 3.2166,3.55254l0.58789,1.20098h1.33535c2.86387,0 6.71875,1.0918 9.71699,3.7373c3.00664,2.64551 5.33301,6.77754 5.33301,13.4627c0,5.99649 -1.42773,14.74766 -1.84766,17.2c-0.0084,0 -0.0168,0 -0.03359,0c-0.18476,0 -0.15117,0.04199 -0.26875,0.05879v-6.50879c0,-7.35703 -3.00664,-12.30371 -6.03008,-15.23476c-3.02344,-2.93106 -6.18965,-4.00606 -6.18965,-4.00606l-1.22617,-0.41152l-0.94062,0.89863c0,0 -1.35215,1.32695 -4.61914,2.82187c-3.26699,1.49492 -8.32285,3.03184 -15.39434,3.03184c-3.87168,0 -8.96953,1.36895 -13.39551,4.45957c-4.40918,3.08223 -8.0793,8.12129 -8.09609,14.95762c-0.11758,-0.0168 -0.09238,-0.06719 -0.27715,-0.06719c-0.05039,0 -0.10078,0.0168 -0.15117,0.0168c-0.43672,-2.07441 -1.14219,-6.12246 -1.14219,-11.3043c0,-5.62695 -2.01562,-9.36426 -4.12363,-11.53105c-0.89863,-0.92383 -1.1002,-0.76426 -1.88125,-1.22617c1.48652,-1.74688 4.24961,-4.8459 8.95273,-8.68398c6.39121,-5.21543 15.02481,-10.27129 23.82637,-10.27129zM101.05,45.48594c0.5207,0.20156 1.88125,0.62988 3.88008,2.56152c2.35156,2.28438 4.71992,5.9293 4.71992,12.15254v13.55508l3.2334,-1.89805c0.5543,-0.31914 1.0666,-0.60469 1.42774,-0.78945c0.04199,-0.0252 0.05879,-0.0252 0.10078,-0.05039c0.98262,0.10078 1.68809,0.78945 1.68809,1.64609v0.0084c0,0.15957 -0.26035,1.41934 -0.58789,2.54473c-0.16797,0.5543 -0.33594,1.11699 -0.47871,1.6293c-0.13438,0.5123 -0.27715,0.87344 -0.27715,1.6293c0,0.57109 -0.47031,1.075 -1.20937,1.075h-3.89688v2.93945c0,11.65703 -8.40684,21.29004 -19.47598,23.26367l-0.61309,0.10078l-0.46191,0.42832c-0.83984,0.76426 -1.89805,1.21777 -3.09902,1.21777c-1.20098,0 -2.25918,-0.45351 -3.09902,-1.21777l-0.46191,-0.42832l-0.61309,-0.10078c-11.06914,-1.97363 -19.47598,-11.60664 -19.47598,-23.26367v-2.93945h-3.89687c-0.73906,0 -1.20938,-0.50391 -1.20938,-1.075c0,-0.75586 -0.14277,-1.11699 -0.28555,-1.6293c-0.14278,-0.51231 -0.31074,-1.075 -0.47871,-1.6293c-0.32754,-1.12539 -0.57949,-2.38516 -0.57949,-2.54473c0,-0.86504 0.70547,-1.55371 1.68809,-1.65449c0.04199,0.0252 0.05879,0.0252 0.10078,0.05039c0.36113,0.18476 0.87344,0.47031 1.42774,0.78945l3.2334,1.89805v-6.9959c0,-5.3582 2.6707,-8.96113 6.26524,-11.47226c3.59453,-2.51113 8.16328,-3.68691 10.93476,-3.68691c7.70137,0 13.39551,-1.68809 17.1832,-3.41816c2.81347,-1.28496 3.55254,-2.07441 4.3168,-2.6959zM74.175,70.95c-1.78047,0 -3.225,1.44453 -3.225,3.225c0,1.78047 1.44453,3.225 3.225,3.225c1.78047,0 3.225,-1.44453 3.225,-3.225c0,-1.78047 -1.44453,-3.225 -3.225,-3.225zM97.825,70.95c-1.78047,0 -3.225,1.44453 -3.225,3.225c0,1.78047 1.44453,3.225 3.225,3.225c1.78047,0 3.225,-1.44453 3.225,-3.225c0,-1.78047 -1.44453,-3.225 -3.225,-3.225zM73.1,107.12207c2.29277,1.20098 4.77031,2.1248 7.39902,2.65391c1.52012,1.20938 3.40137,2.02402 5.50098,2.02402c2.09121,0 3.96406,-0.81465 5.47578,-2.01562c2.63711,-0.5207 5.12305,-1.44453 7.42422,-2.65391v12.59766c-0.26035,0.5207 -3.66172,7.12188 -12.9,7.12188c-9.23828,0 -12.63965,-6.60117 -12.9,-7.12188zM68.8,116.86426v4.03965l0.22676,0.46191c0,0 5.07266,9.78418 16.97324,9.78418c11.90059,0 16.97324,-9.78418 16.97324,-9.78418l0.22676,-0.46191v-4.03965c3.45176,1.0834 9.77578,3.2166 16.28457,6.29043c4.72832,2.23399 9.43145,4.92988 12.81601,7.84414c3.38457,2.91426 5.29941,5.9125 5.29941,8.75117v8.6h-103.2v-8.6c0,-2.83867 1.91484,-5.83691 5.29941,-8.75117c3.38457,-2.91426 8.0877,-5.61016 12.81601,-7.84414c6.50879,-3.07383 12.83281,-5.20703 16.28457,-6.29043zM43,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM51.6,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM68.8,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM77.4,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM86,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM94.6,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM103.2,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM111.8,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM120.4,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM129,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15z"></path></g><g id="subtracted-icon" fill="#000000" stroke="none"><path d="M98.56406,24.10352c2.1584,1.68809 3.1998,3.14941 3.7877,4.08164c3.64492,0.26035 7.76016,1.49492 11.2623,4.56875c3.89688,3.43496 6.78594,8.96953 6.78594,16.69609c0,6.82793 -1.6293,16.53652 -2.02402,18.8041c1.22617,1.1002 2.02402,2.65391 2.02402,4.41758c0,1.39414 -0.41992,2.58672 -0.76426,3.7541c-0.16797,0.58789 -0.33594,1.13379 -0.44512,1.54531c-0.10918,0.41152 -0.13438,0.81465 -0.13438,0.50391c0,2.92266 -2.45234,5.20703 -5.34141,5.30781c-0.39473,8.33965 -4.40918,15.69668 -10.51484,20.54258v8.01211c0.00055,0.00017 0.0011,0.00033 0.00165,0.0005c0.00801,1.55675 0.04506,3.07687 0.10946,4.56118c-0.03736,-0.01176 -0.0744,-0.0234 -0.11111,-0.03493v4.03965l-0.22676,0.46191c0,0 -5.07266,9.78418 -16.97324,9.78418c-11.90059,0 -16.97324,-9.78418 -16.97324,-9.78418l-0.22676,-0.46191v-4.03965c-3.45176,1.0834 -9.77578,3.2166 -16.28457,6.29043c-4.72832,2.23399 -9.43144,4.92988 -12.81601,7.84414c-3.38457,2.91426 -5.29941,5.9125 -5.29941,8.75117v8.6h75.81824c0.68254,1.50998 1.39861,2.9421 2.14059,4.3h-82.25883v-12.9c0,-4.68633 2.92266,-8.67559 6.79434,-12.00976c3.87168,-3.33418 8.84356,-6.14766 13.79024,-8.48242c7.57539,-3.57773 15.01641,-5.97969 18.11543,-6.92031v-8.02051c-6.10566,-4.8459 -10.12012,-12.20293 -10.51484,-20.53418c-2.88906,-0.10078 -5.34141,-2.38516 -5.34141,-5.30781c0,0.31074 -0.0252,-0.09238 -0.13437,-0.50391c-0.10918,-0.41152 -0.27715,-0.95742 -0.44512,-1.54531c-0.34434,-1.16738 -0.76426,-2.35996 -0.76426,-3.7541c0,-1.73008 0.77266,-3.27539 1.97363,-4.36719c-0.46191,-2.05762 -1.38574,-6.92031 -1.38574,-12.94199c0,-4.64434 -1.50332,-7.09668 -2.90586,-8.53281c-1.41094,-1.44453 -2.58672,-1.77207 -2.58672,-1.77207l-3.03184,-0.89023l1.94004,-2.48594c0,0 4.32519,-5.55977 11.11113,-11.10274c6.78594,-5.53457 16.1418,-11.22871 26.54746,-11.22871c7.23105,0 12.20293,2.34316 15.30195,4.75352zM59.43574,33.92129c-4.70312,3.83809 -7.46621,6.93711 -8.95273,8.68398c0.78105,0.46191 0.98262,0.30234 1.88125,1.22617c2.10801,2.1668 4.12363,5.9041 4.12363,11.53105c0,5.18184 0.70547,9.22988 1.14219,11.3043c0.05039,0 0.10078,-0.0168 0.15117,-0.0168c0.18477,0 0.15957,0.05039 0.27715,0.06719c0.0168,-6.83633 3.68691,-11.87539 8.09609,-14.95762c4.42598,-3.09062 9.52383,-4.45957 13.39551,-4.45957c7.07149,0 12.12734,-1.53691 15.39434,-3.03184c3.26699,-1.49492 4.61914,-2.82187 4.61914,-2.82187l0.94062,-0.89863l1.22617,0.41152c0,0 3.16621,1.075 6.18965,4.00606c3.02344,2.93105 6.03008,7.87773 6.03008,15.23476v6.50879c0.11758,-0.0168 0.08399,-0.05879 0.26875,-0.05879c0.0168,0 0.0252,0 0.03359,0c0.41992,-2.45234 1.84766,-11.20351 1.84766,-17.2c0,-6.68516 -2.32637,-10.81719 -5.33301,-13.4627c-2.99824,-2.64551 -6.85312,-3.7373 -9.71699,-3.7373h-1.33535l-0.58789,-1.20098c0,0 -0.79785,-1.66289 -3.2166,-3.55254c-2.41035,-1.88965 -6.33242,-3.84649 -12.64805,-3.84649c-8.80156,0 -17.43516,5.05586 -23.82637,10.27129zM96.7332,48.18184c-3.7877,1.73008 -9.48184,3.41816 -17.1832,3.41816c-2.77148,0 -7.34023,1.17578 -10.93476,3.68691c-3.59453,2.51113 -6.26524,6.11406 -6.26524,11.47226v6.9959l-3.2334,-1.89805c-0.5543,-0.31914 -1.0666,-0.60469 -1.42774,-0.78945c-0.04199,-0.0252 -0.05879,-0.0252 -0.10078,-0.05039c-0.98262,0.10078 -1.68809,0.78945 -1.68809,1.65449c0,0.15957 0.25195,1.41934 0.57949,2.54473c0.16797,0.5543 0.33594,1.11699 0.47871,1.6293c0.14277,0.5123 0.28555,0.87344 0.28555,1.6293c0,0.57109 0.47031,1.075 1.20938,1.075h3.89687v2.93945c0,11.65703 8.40684,21.29004 19.47598,23.26367l0.61309,0.10078l0.46191,0.42832c0.83984,0.76426 1.89805,1.21777 3.09902,1.21777c1.20098,0 2.25918,-0.45351 3.09902,-1.21777l0.46191,-0.42832l0.61309,-0.10078c11.06914,-1.97363 19.47598,-11.60664 19.47598,-23.26367v-2.93945h3.89688c0.73906,0 1.20937,-0.50391 1.20937,-1.075c0,-0.75586 0.14277,-1.11699 0.27715,-1.6293c0.14278,-0.51231 0.31074,-1.075 0.47871,-1.6293c0.32754,-1.12539 0.58789,-2.38516 0.58789,-2.54473v-0.0084c0,-0.85664 -0.70547,-1.54531 -1.68809,-1.64609c-0.04199,0.0252 -0.05879,0.0252 -0.10078,0.05039c-0.36113,0.18476 -0.87344,0.47031 -1.42774,0.78945l-3.2334,1.89805v-13.55508c0,-6.22324 -2.36836,-9.86816 -4.71992,-12.15254c-1.99883,-1.93164 -3.35937,-2.35996 -3.88008,-2.56152c-0.76426,0.62149 -1.50332,1.41094 -4.3168,2.6959zM77.4,74.175c0,1.78047 -1.44453,3.225 -3.225,3.225c-1.78047,0 -3.225,-1.44453 -3.225,-3.225c0,-1.78047 1.44453,-3.225 3.225,-3.225c1.78047,0 3.225,1.44453 3.225,3.225zM101.05,74.175c0,1.78047 -1.44453,3.225 -3.225,3.225c-1.78047,0 -3.225,-1.44453 -3.225,-3.225c0,-1.78047 1.44453,-3.225 3.225,-3.225c1.78047,0 3.225,1.44453 3.225,3.225zM73.1,119.72813c0.26035,0.5207 3.66172,7.12188 12.9,7.12188c9.23828,0 12.63965,-6.60117 12.9,-7.12188v-12.59766c-2.30117,1.20938 -4.78711,2.1332 -7.42422,2.65391c-1.51172,1.20098 -3.38457,2.01563 -5.47578,2.01563c-2.09961,0 -3.98086,-0.81465 -5.50098,-2.02402c-2.62871,-0.5291 -5.10625,-1.45293 -7.39902,-2.65391zM45.15,141.9c0,1.18418 -0.96582,2.15 -2.15,2.15c-1.18418,0 -2.15,-0.96582 -2.15,-2.15c0,-1.18418 0.96582,-2.15 2.15,-2.15c1.18418,0 2.15,0.96582 2.15,2.15zM53.75,141.9c0,1.18418 -0.96582,2.15 -2.15,2.15c-1.18418,0 -2.15,-0.96582 -2.15,-2.15c0,-1.18418 0.96582,-2.15 2.15,-2.15c1.18418,0 2.15,0.96582 2.15,2.15zM62.35,141.9c0,1.18418 -0.96582,2.15 -2.15,2.15c-1.18418,0 -2.15,-0.96582 -2.15,-2.15c0,-1.18418 0.96582,-2.15 2.15,-2.15c1.18418,0 2.15,0.96582 2.15,2.15zM70.95,141.9c0,1.18418 -0.96582,2.15 -2.15,2.15c-1.18418,0 -2.15,-0.96582 -2.15,-2.15c0,-1.18418 0.96582,-2.15 2.15,-2.15c1.18418,0 2.15,0.96582 2.15,2.15zM79.55,141.9c0,1.18418 -0.96582,2.15 -2.15,2.15c-1.18418,0 -2.15,-0.96582 -2.15,-2.15c0,-1.18418 0.96582,-2.15 2.15,-2.15c1.18418,0 2.15,0.96582 2.15,2.15zM88.15,141.9c0,1.18418 -0.96582,2.15 -2.15,2.15c-1.18418,0 -2.15,-0.96582 -2.15,-2.15c0,-1.18418 0.96582,-2.15 2.15,-2.15c1.18418,0 2.15,0.96582 2.15,2.15zM96.75,141.9c0,1.18418 -0.96582,2.15 -2.15,2.15c-1.18418,0 -2.15,-0.96582 -2.15,-2.15c0,-1.18418 0.96582,-2.15 2.15,-2.15c1.18418,0 2.15,0.96582 2.15,2.15zM105.35,141.9c0,1.18418 -0.96582,2.15 -2.15,2.15c-1.18418,0 -2.15,-0.96582 -2.15,-2.15c0,-1.18418 0.96582,-2.15 2.15,-2.15c1.18418,0 2.15,0.96582 2.15,2.15z"></path></g><g fill="#000000" stroke="none"><g id="Layer_1"><path d="M169.85,109.54465c-16.45395,0 -29.02715,-6.063 -29.154,-6.12535c-0.59555,-0.29025 -1.29645,-0.29455 -1.8963,0c-0.12255,0.06235 -12.63985,6.12535 -29.1497,6.12535c-1.1868,0 -2.15,0.9632 -2.15,2.15c0,49.6435 30.3107,59.79795 31.60285,60.20645c0.2107,0.0645 0.42785,0.0989 0.64715,0.0989c0.2193,0 0.43645,-0.0344 0.64715,-0.0989c1.29215,-0.4085 31.60285,-10.56295 31.60285,-60.20645c0,-1.18895 -0.9632,-2.15 -2.15,-2.15zM139.75,167.56455c-4.3,-1.67915 -27.16955,-12.54955 -27.93065,-53.75215c13.98575,-0.4128 24.7465,-4.68915 27.93065,-6.09525c3.18415,1.40825 13.9449,5.68245 27.93065,6.09525c-0.7611,41.2026 -23.63065,52.073 -27.93065,53.75215zM156.9371,122.6145l0.0215,-0.25155c0.10105,-1.1825 1.1352,-2.06615 2.32845,-1.9565c1.1825,0.1032 2.0597,1.14595 1.9565,2.32845l-0.01505,0.1849c-0.0817,1.1309 -1.02555,1.99735 -2.14355,1.99735c-0.0516,0 -0.1032,-0.00215 -0.1548,-0.0043c-1.18465,-0.08385 -2.0769,-1.1137 -1.99305,-2.29835zM155.53745,131.12635c0.2752,-1.1524 1.45985,-1.97155 2.61225,-1.6985c1.15455,0.27305 1.89415,1.32225 1.62325,2.4768c-0.00215,0.0043 -0.03225,0.1333 -0.0344,0.1376c-0.2408,0.989 -1.1395,1.6856 -2.11775,1.6856c-0.16125,0 -0.3225,-0.01935 -0.4859,-0.05805c-1.15025,-0.27735 -1.87265,-1.3889 -1.59745,-2.54345zM149.2358,149.78405c-0.98685,-0.6579 -1.25345,-1.99305 -0.59555,-2.98205l0.12685,-0.1892c0.66435,-0.9847 1.99735,-1.24485 2.9842,-0.5848c0.9847,0.66435 1.247,1.9995 0.5848,2.9842l-0.11825,0.17415c-0.41495,0.62135 -1.0965,0.95675 -1.79095,0.95675c-0.41065,0.00215 -0.82345,-0.11395 -1.1911,-0.35905zM152.77685,139.2813l0.09245,-0.215c0.47515,-1.0879 1.74365,-1.58455 2.83155,-1.10725c1.0879,0.47515 1.58455,1.74365 1.10725,2.83155l-0.0817,0.1849c-0.3483,0.81485 -1.14165,1.3029 -1.97585,1.3029c-0.28165,0 -0.56975,-0.0559 -0.8471,-0.1763c-1.0879,-0.46655 -1.5953,-1.7286 -1.1266,-2.8208zM143.2029,156.4512c-0.84065,-0.84065 -0.84065,-2.19945 0,-3.0401c0.8299,-0.84925 2.2618,-0.9331 3.1089,-0.10105c0.84925,0.83205 0.93095,2.12205 0.10105,2.96915l-0.16985,0.172c-0.41925,0.41925 -0.96965,0.62995 -1.52005,0.62995c-0.5504,0 -1.09865,-0.2107 -1.52005,-0.62995z"></path></g><g id="Layer_1" opacity="0"><path d="M169.85,105.24465c-15.28435,0 -27.1545,-5.63515 -27.27275,-5.69105c-0.87075,-0.4257 -1.85115,-0.6536 -2.8294,-0.6536c-0.98255,0 -1.9651,0.2279 -2.8466,0.6622c-0.10535,0.0516 -11.91315,5.68245 -27.25125,5.68245c-3.5561,0 -6.45,2.8939 -6.45,6.45c0,52.75455 33.1917,63.8593 34.6064,64.3065c0.63855,0.19995 1.28785,0.29885 1.9436,0.29885c0.65575,0 1.30505,-0.0989 1.93285,-0.2967c1.42545,-0.44935 34.61715,-11.5541 34.61715,-64.30865c0,-3.55825 -2.8939,-6.45 -6.45,-6.45z"></path></g></g><path d="M107.5,172v-68.8h64.5v68.8z" id="overlay-drag" fill="#ff0000" stroke="none" opacity="0"></path></g></svg>
+                            <svg v-if="user.role_id === 2" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                 width="25" height="25"
+                                 viewBox="0 0 172 172"
+                                 style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none" stroke="none"></path><g id="original-icon" fill="#000000" stroke="none" opacity="0" visibility="hidden"><path d="M83.26211,19.35c-10.40566,0 -19.76153,5.69414 -26.54746,11.22871c-6.78594,5.54297 -11.11113,11.10274 -11.11113,11.10274l-1.94004,2.48594l3.03184,0.89023c0,0 1.17578,0.32754 2.58672,1.77207c1.40254,1.43613 2.90586,3.88848 2.90586,8.53281c0,6.02168 0.92383,10.88438 1.38574,12.94199c-1.20098,1.0918 -1.97363,2.63711 -1.97363,4.36719c0,1.39414 0.41992,2.58672 0.76426,3.7541c0.16797,0.58789 0.33594,1.13379 0.44512,1.54531c0.10918,0.41152 0.13437,0.81465 0.13437,0.50391c0,2.92266 2.45234,5.20703 5.34141,5.30781c0.39473,8.33125 4.40918,15.68828 10.51484,20.53418v8.02051c-3.09902,0.94062 -10.54004,3.34258 -18.11543,6.92031c-4.94668,2.33477 -9.91855,5.14824 -13.79024,8.48242c-3.87168,3.33418 -6.79434,7.32344 -6.79434,12.00976v12.9h111.8v-12.9c0,-4.68633 -2.92266,-8.67559 -6.79434,-12.00976c-3.87168,-3.33418 -8.84355,-6.14766 -13.79024,-8.48242c-7.57539,-3.57773 -15.01641,-5.97969 -18.11543,-6.92031v-8.01211c6.10566,-4.8459 10.12012,-12.20293 10.51484,-20.54258c2.88906,-0.10078 5.34141,-2.38516 5.34141,-5.30781c0,0.31074 0.0252,-0.09238 0.13438,-0.50391c0.10918,-0.41152 0.27715,-0.95742 0.44512,-1.54531c0.34434,-1.16738 0.76426,-2.35996 0.76426,-3.7541c0,-1.76367 -0.79785,-3.31738 -2.02402,-4.41758c0.39473,-2.26758 2.02402,-11.97617 2.02402,-18.8041c0,-7.72656 -2.88906,-13.26113 -6.78594,-16.69609c-3.50215,-3.07383 -7.61738,-4.3084 -11.2623,-4.56875c-0.58789,-0.93223 -1.6293,-2.39355 -3.7877,-4.08164c-3.09902,-2.41035 -8.0709,-4.75352 -15.30195,-4.75352zM83.26211,23.65c6.31562,0 10.23769,1.95684 12.64805,3.84649c2.41875,1.88965 3.2166,3.55254 3.2166,3.55254l0.58789,1.20098h1.33535c2.86387,0 6.71875,1.0918 9.71699,3.7373c3.00664,2.64551 5.33301,6.77754 5.33301,13.4627c0,5.99649 -1.42773,14.74766 -1.84766,17.2c-0.0084,0 -0.0168,0 -0.03359,0c-0.18476,0 -0.15117,0.04199 -0.26875,0.05879v-6.50879c0,-7.35703 -3.00664,-12.30371 -6.03008,-15.23476c-3.02344,-2.93106 -6.18965,-4.00606 -6.18965,-4.00606l-1.22617,-0.41152l-0.94062,0.89863c0,0 -1.35215,1.32695 -4.61914,2.82187c-3.26699,1.49492 -8.32285,3.03184 -15.39434,3.03184c-3.87168,0 -8.96953,1.36895 -13.39551,4.45957c-4.40918,3.08223 -8.0793,8.12129 -8.09609,14.95762c-0.11758,-0.0168 -0.09238,-0.06719 -0.27715,-0.06719c-0.05039,0 -0.10078,0.0168 -0.15117,0.0168c-0.43672,-2.07441 -1.14219,-6.12246 -1.14219,-11.3043c0,-5.62695 -2.01562,-9.36426 -4.12363,-11.53105c-0.89863,-0.92383 -1.1002,-0.76426 -1.88125,-1.22617c1.48652,-1.74688 4.24961,-4.8459 8.95273,-8.68398c6.39121,-5.21543 15.02481,-10.27129 23.82637,-10.27129zM101.05,45.48594c0.5207,0.20156 1.88125,0.62988 3.88008,2.56152c2.35156,2.28438 4.71992,5.9293 4.71992,12.15254v13.55508l3.2334,-1.89805c0.5543,-0.31914 1.0666,-0.60469 1.42774,-0.78945c0.04199,-0.0252 0.05879,-0.0252 0.10078,-0.05039c0.98262,0.10078 1.68809,0.78945 1.68809,1.64609v0.0084c0,0.15957 -0.26035,1.41934 -0.58789,2.54473c-0.16797,0.5543 -0.33594,1.11699 -0.47871,1.6293c-0.13438,0.5123 -0.27715,0.87344 -0.27715,1.6293c0,0.57109 -0.47031,1.075 -1.20937,1.075h-3.89688v2.93945c0,11.65703 -8.40684,21.29004 -19.47598,23.26367l-0.61309,0.10078l-0.46191,0.42832c-0.83984,0.76426 -1.89805,1.21777 -3.09902,1.21777c-1.20098,0 -2.25918,-0.45351 -3.09902,-1.21777l-0.46191,-0.42832l-0.61309,-0.10078c-11.06914,-1.97363 -19.47598,-11.60664 -19.47598,-23.26367v-2.93945h-3.89687c-0.73906,0 -1.20938,-0.50391 -1.20938,-1.075c0,-0.75586 -0.14277,-1.11699 -0.28555,-1.6293c-0.14278,-0.51231 -0.31074,-1.075 -0.47871,-1.6293c-0.32754,-1.12539 -0.57949,-2.38516 -0.57949,-2.54473c0,-0.86504 0.70547,-1.55371 1.68809,-1.65449c0.04199,0.0252 0.05879,0.0252 0.10078,0.05039c0.36113,0.18476 0.87344,0.47031 1.42774,0.78945l3.2334,1.89805v-6.9959c0,-5.3582 2.6707,-8.96113 6.26524,-11.47226c3.59453,-2.51113 8.16328,-3.68691 10.93476,-3.68691c7.70137,0 13.39551,-1.68809 17.1832,-3.41816c2.81347,-1.28496 3.55254,-2.07441 4.3168,-2.6959zM74.175,70.95c-1.78047,0 -3.225,1.44453 -3.225,3.225c0,1.78047 1.44453,3.225 3.225,3.225c1.78047,0 3.225,-1.44453 3.225,-3.225c0,-1.78047 -1.44453,-3.225 -3.225,-3.225zM97.825,70.95c-1.78047,0 -3.225,1.44453 -3.225,3.225c0,1.78047 1.44453,3.225 3.225,3.225c1.78047,0 3.225,-1.44453 3.225,-3.225c0,-1.78047 -1.44453,-3.225 -3.225,-3.225zM73.1,107.12207c2.29277,1.20098 4.77031,2.1248 7.39902,2.65391c1.52012,1.20938 3.40137,2.02402 5.50098,2.02402c2.09121,0 3.96406,-0.81465 5.47578,-2.01562c2.63711,-0.5207 5.12305,-1.44453 7.42422,-2.65391v12.59766c-0.26035,0.5207 -3.66172,7.12188 -12.9,7.12188c-9.23828,0 -12.63965,-6.60117 -12.9,-7.12188zM68.8,116.86426v4.03965l0.22676,0.46191c0,0 5.07266,9.78418 16.97324,9.78418c11.90059,0 16.97324,-9.78418 16.97324,-9.78418l0.22676,-0.46191v-4.03965c3.45176,1.0834 9.77578,3.2166 16.28457,6.29043c4.72832,2.23399 9.43145,4.92988 12.81601,7.84414c3.38457,2.91426 5.29941,5.9125 5.29941,8.75117v8.6h-103.2v-8.6c0,-2.83867 1.91484,-5.83691 5.29941,-8.75117c3.38457,-2.91426 8.0877,-5.61016 12.81601,-7.84414c6.50879,-3.07383 12.83281,-5.20703 16.28457,-6.29043zM43,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM51.6,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM68.8,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM77.4,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM86,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM94.6,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM103.2,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM111.8,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM120.4,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM129,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15z"></path></g><g id="subtracted-icon" fill="#000000" stroke="none"><path d="M98.56406,24.10352c2.1584,1.68809 3.1998,3.14941 3.7877,4.08164c3.64492,0.26035 7.76016,1.49492 11.2623,4.56875c3.89688,3.43496 6.78594,8.96953 6.78594,16.69609c0,6.82793 -1.6293,16.53652 -2.02402,18.8041c1.22617,1.1002 2.02402,2.65391 2.02402,4.41758c0,1.39414 -0.41992,2.58672 -0.76426,3.7541c-0.16797,0.58789 -0.33594,1.13379 -0.44512,1.54531c-0.10918,0.41152 -0.13438,0.81465 -0.13438,0.50391c0,2.92266 -2.45234,5.20703 -5.34141,5.30781c-0.39473,8.33965 -4.40918,15.69668 -10.51484,20.54258v8.01211c3.09902,0.94062 10.54004,3.34258 18.11543,6.92031c0.0331,0.01562 0.0662,0.03127 0.0993,0.04693c0.59073,2.13484 1.43056,4.17892 2.49614,6.0942c-1.44586,-0.78895 -2.93482,-1.53958 -4.42629,-2.24425c-6.50879,-3.07383 -12.83281,-5.20703 -16.28457,-6.29043v4.03965l-0.22676,0.46191c0,0 -5.07266,9.78418 -16.97324,9.78418c-11.90059,0 -16.97324,-9.78418 -16.97324,-9.78418l-0.22676,-0.46191v-4.03965c-3.45176,1.0834 -9.77578,3.2166 -16.28457,6.29043c-4.72832,2.23399 -9.43144,4.92988 -12.81601,7.84414c-3.38457,2.91426 -5.29941,5.9125 -5.29941,8.75117v8.6l98.9,0v4.3h-103.2v-12.9c0,-4.68633 2.92266,-8.67559 6.79434,-12.00976c3.87168,-3.33418 8.84356,-6.14766 13.79024,-8.48242c7.57539,-3.57773 15.01641,-5.97969 18.11543,-6.92031v-8.02051c-6.10566,-4.8459 -10.12012,-12.20293 -10.51484,-20.53418c-2.88906,-0.10078 -5.34141,-2.38516 -5.34141,-5.30781c0,0.31074 -0.0252,-0.09238 -0.13437,-0.50391c-0.10918,-0.41152 -0.27715,-0.95742 -0.44512,-1.54531c-0.34434,-1.16738 -0.76426,-2.35996 -0.76426,-3.7541c0,-1.73008 0.77266,-3.27539 1.97363,-4.36719c-0.46191,-2.05762 -1.38574,-6.92031 -1.38574,-12.94199c0,-4.64434 -1.50332,-7.09668 -2.90586,-8.53281c-1.41094,-1.44453 -2.58672,-1.77207 -2.58672,-1.77207l-3.03184,-0.89023l1.94004,-2.48594c0,0 4.32519,-5.55977 11.11113,-11.10274c6.78594,-5.53457 16.1418,-11.22871 26.54746,-11.22871c7.23105,0 12.20293,2.34316 15.30195,4.75352zM59.43574,33.92129c-4.70312,3.83809 -7.46621,6.93711 -8.95273,8.68398c0.78105,0.46191 0.98262,0.30234 1.88125,1.22617c2.10801,2.1668 4.12363,5.9041 4.12363,11.53105c0,5.18184 0.70547,9.22988 1.14219,11.3043c0.05039,0 0.10078,-0.0168 0.15117,-0.0168c0.18477,0 0.15957,0.05039 0.27715,0.06719c0.0168,-6.83633 3.68691,-11.87539 8.09609,-14.95762c4.42598,-3.09062 9.52383,-4.45957 13.39551,-4.45957c7.07149,0 12.12734,-1.53691 15.39434,-3.03184c3.26699,-1.49492 4.61914,-2.82187 4.61914,-2.82187l0.94062,-0.89863l1.22617,0.41152c0,0 3.16621,1.075 6.18965,4.00606c3.02344,2.93105 6.03008,7.87773 6.03008,15.23476v6.50879c0.11758,-0.0168 0.08399,-0.05879 0.26875,-0.05879c0.0168,0 0.0252,0 0.03359,0c0.41992,-2.45234 1.84766,-11.20351 1.84766,-17.2c0,-6.68516 -2.32637,-10.81719 -5.33301,-13.4627c-2.99824,-2.64551 -6.85312,-3.7373 -9.71699,-3.7373h-1.33535l-0.58789,-1.20098c0,0 -0.79785,-1.66289 -3.2166,-3.55254c-2.41035,-1.88965 -6.33242,-3.84649 -12.64805,-3.84649c-8.80156,0 -17.43516,5.05586 -23.82637,10.27129zM96.7332,48.18184c-3.7877,1.73008 -9.48184,3.41816 -17.1832,3.41816c-2.77148,0 -7.34023,1.17578 -10.93476,3.68691c-3.59453,2.51113 -6.26524,6.11406 -6.26524,11.47226v6.9959l-3.2334,-1.89805c-0.5543,-0.31914 -1.0666,-0.60469 -1.42774,-0.78945c-0.04199,-0.0252 -0.05879,-0.0252 -0.10078,-0.05039c-0.98262,0.10078 -1.68809,0.78945 -1.68809,1.65449c0,0.15957 0.25195,1.41934 0.57949,2.54473c0.16797,0.5543 0.33594,1.11699 0.47871,1.6293c0.14277,0.5123 0.28555,0.87344 0.28555,1.6293c0,0.57109 0.47031,1.075 1.20938,1.075h3.89687v2.93945c0,11.65703 8.40684,21.29004 19.47598,23.26367l0.61309,0.10078l0.46191,0.42832c0.83984,0.76426 1.89805,1.21777 3.09902,1.21777c1.20098,0 2.25918,-0.45351 3.09902,-1.21777l0.46191,-0.42832l0.61309,-0.10078c11.06914,-1.97363 19.47598,-11.60664 19.47598,-23.26367v-2.93945h3.89688c0.73906,0 1.20937,-0.50391 1.20937,-1.075c0,-0.75586 0.14277,-1.11699 0.27715,-1.6293c0.14278,-0.51231 0.31074,-1.075 0.47871,-1.6293c0.32754,-1.12539 0.58789,-2.38516 0.58789,-2.54473v-0.0084c0,-0.85664 -0.70547,-1.54531 -1.68809,-1.64609c-0.04199,0.0252 -0.05879,0.0252 -0.10078,0.05039c-0.36113,0.18476 -0.87344,0.47031 -1.42774,0.78945l-3.2334,1.89805v-13.55508c0,-6.22324 -2.36836,-9.86816 -4.71992,-12.15254c-1.99883,-1.93164 -3.35937,-2.35996 -3.88008,-2.56152c-0.76426,0.62149 -1.50332,1.41094 -4.3168,2.6959zM77.4,74.175c0,1.78047 -1.44453,3.225 -3.225,3.225c-1.78047,0 -3.225,-1.44453 -3.225,-3.225c0,-1.78047 1.44453,-3.225 3.225,-3.225c1.78047,0 3.225,1.44453 3.225,3.225zM101.05,74.175c0,1.78047 -1.44453,3.225 -3.225,3.225c-1.78047,0 -3.225,-1.44453 -3.225,-3.225c0,-1.78047 1.44453,-3.225 3.225,-3.225c1.78047,0 3.225,1.44453 3.225,3.225zM73.1,119.72813c0.26035,0.5207 3.66172,7.12188 12.9,7.12188c9.23828,0 12.63965,-6.60117 12.9,-7.12188v-12.59766c-2.30117,1.20938 -4.78711,2.1332 -7.42422,2.65391c-1.51172,1.20098 -3.38457,2.01563 -5.47578,2.01563c-2.09961,0 -3.98086,-0.81465 -5.50098,-2.02402c-2.62871,-0.5291 -5.10625,-1.45293 -7.39902,-2.65391zM45.15,141.9c0,1.18418 -0.96582,2.15 -2.15,2.15c-1.18418,0 -2.15,-0.96582 -2.15,-2.15c0,-1.18418 0.96582,-2.15 2.15,-2.15c1.18418,0 2.15,0.96582 2.15,2.15zM53.75,141.9c0,1.18418 -0.96582,2.15 -2.15,2.15c-1.18418,0 -2.15,-0.96582 -2.15,-2.15c0,-1.18418 0.96582,-2.15 2.15,-2.15c1.18418,0 2.15,0.96582 2.15,2.15zM62.35,141.9c0,1.18418 -0.96582,2.15 -2.15,2.15c-1.18418,0 -2.15,-0.96582 -2.15,-2.15c0,-1.18418 0.96582,-2.15 2.15,-2.15c1.18418,0 2.15,0.96582 2.15,2.15zM70.95,141.9c0,1.18418 -0.96582,2.15 -2.15,2.15c-1.18418,0 -2.15,-0.96582 -2.15,-2.15c0,-1.18418 0.96582,-2.15 2.15,-2.15c1.18418,0 2.15,0.96582 2.15,2.15zM79.55,141.9c0,1.18418 -0.96582,2.15 -2.15,2.15c-1.18418,0 -2.15,-0.96582 -2.15,-2.15c0,-1.18418 0.96582,-2.15 2.15,-2.15c1.18418,0 2.15,0.96582 2.15,2.15zM88.15,141.9c0,1.18418 -0.96582,2.15 -2.15,2.15c-1.18418,0 -2.15,-0.96582 -2.15,-2.15c0,-1.18418 0.96582,-2.15 2.15,-2.15c1.18418,0 2.15,0.96582 2.15,2.15zM96.75,141.9c0,1.18418 -0.96582,2.15 -2.15,2.15c-1.18418,0 -2.15,-0.96582 -2.15,-2.15c0,-1.18418 0.96582,-2.15 2.15,-2.15c1.18418,0 2.15,0.96582 2.15,2.15zM105.35,141.9c0,1.18418 -0.96582,2.15 -2.15,2.15c-1.18418,0 -2.15,-0.96582 -2.15,-2.15c0,-1.18418 0.96582,-2.15 2.15,-2.15c1.18418,0 2.15,0.96582 2.15,2.15zM113.95,141.9c0,1.18418 -0.96582,2.15 -2.15,2.15c-1.18418,0 -2.15,-0.96582 -2.15,-2.15c0,-1.18418 0.96582,-2.15 2.15,-2.15c1.18418,0 2.15,0.96582 2.15,2.15zM122.55,141.9c0,1.18418 -0.96582,2.15 -2.15,2.15c-1.18418,0 -2.15,-0.96582 -2.15,-2.15c0,-1.18418 0.96582,-2.15 2.15,-2.15c1.18418,0 2.15,0.96582 2.15,2.15zM131.15,141.9c0,1.18418 -0.96582,2.15 -2.15,2.15c-1.18418,0 -2.15,-0.96582 -2.15,-2.15c0,-1.18418 0.96582,-2.15 2.15,-2.15c1.18418,0 2.15,0.96582 2.15,2.15z"></path></g><g fill="#000000" stroke="none"><g id="Layer_1"><path d="M148.35,88.15c-13.03975,0 -23.65,10.61025 -23.65,23.65c0,8.9182 5.0181,17.03445 12.9,21.05925v31.43085l7.7099,7.7099h6.0802l7.7099,-7.7099v-6.0802l-3.4099,-3.4099l3.4099,-3.4099v-6.0802l-3.4099,-3.4099l3.4099,-3.4099v-5.63085c7.8819,-4.0248 12.9,-12.1389 12.9,-21.05925c0,-13.03975 -10.61025,-23.65 -23.65,-23.65zM156.09,129.5289l-1.29,0.5633v6.6177l-5.1901,5.1901l5.1901,5.1901v2.5198l-5.1901,5.1901l5.1901,5.1901v2.5198l-5.1901,5.1901h-2.5198l-5.1901,-5.1901v-32.4177l-1.29,-0.5633c-7.052,-3.0831 -11.61,-10.04265 -11.61,-17.7289c0,-10.6683 8.67955,-19.35 19.35,-19.35c10.67045,0 19.35,8.6817 19.35,19.35c0,7.68625 -4.558,14.6458 -11.61,17.7289zM150.5,113.95c0,1.1868 -0.9632,2.15 -2.15,2.15c-1.1868,0 -2.15,-0.9632 -2.15,-2.15c0,-1.1868 0.9632,-2.15 2.15,-2.15c1.1868,0 2.15,0.9632 2.15,2.15zM159.1,111.8c0,1.1868 -0.96105,2.15 -2.15,2.15c-1.18895,0 -2.15,-0.9632 -2.15,-2.15c0,-3.5561 -2.8939,-6.45 -6.45,-6.45c-3.5561,0 -6.45,2.8939 -6.45,6.45c0,1.1868 -0.96105,2.15 -2.15,2.15c-1.18895,0 -2.15,-0.9632 -2.15,-2.15c0,-5.92755 4.82245,-10.75 10.75,-10.75c5.92755,0 10.75,4.82245 10.75,10.75z"></path></g><g id="Layer_1" opacity="0"><path d="M148.35,83.85c-15.4112,0 -27.95,12.5388 -27.95,27.95c0,9.6449 4.8805,18.44055 12.9,23.54895v28.94115c0,1.1395 0.45365,2.23385 1.2599,3.0401l7.7099,7.7099c0.80625,0.80625 1.9006,1.2599 3.0401,1.2599h6.0802c1.1395,0 2.23385,-0.45365 3.0401,-1.2599l7.7099,-7.7099c0.80625,-0.80625 1.2599,-1.9006 1.2599,-3.0401v-6.0802c0,-1.1395 -0.45365,-2.23385 -1.2599,-3.0401l-0.3698,-0.3698l0.3698,-0.3698c0.80625,-0.80625 1.2599,-1.9006 1.2599,-3.0401v-6.0802c0,-1.1395 -0.45365,-2.23385 -1.2599,-3.0401l-0.3698,-0.3698l0.3698,-0.3698c0.80625,-0.80625 1.2599,-1.9006 1.2599,-3.0401v-3.14115c8.0195,-5.10625 12.9,-13.90405 12.9,-23.54895c0,-15.4112 -12.5388,-27.95 -27.95,-27.95z"></path></g></g><path d="M124.7,172v-83.85h47.3v83.85z" id="overlay-drag" fill="#ff0000" stroke="none" opacity="0"></path></g></svg>
+                        </div>
+                        <div class="col">
+                            <div class="row">
+                                <div class="col bold"><span class="text-capitalize">{{this.user.full_name}}</span></div>
+                            </div>
+                            <div class="row">
+                                <div class="col muted">{{this.user.email}}</div>
+                            </div>
+                        </div>
+                        <div class="col-auto text-right">
+                            <div class="row no-margin">
+                                <div class="col-auto no-padding">
+                                    <div class="p-t-5 p-b-5 p-r-10 p-l-10 muted h-100 pointer animated slow" ref="button" @click="actions = !actions" :class="[{'bg-white': actions}, {'flipInX': actions}, {' bg-master-lighter': !actions}]"><i class="fa fa-ellipsis-h lh-16 fs-10"></i></div>
+                                </div>
+                                <div class="absolute animated flipInX fast" v-closable="{ exclude: ['button'], handler: 'onClose'}" :class="[{'hide': !actions}]" style="width: 130px; top: 100%; right: 15px; z-index: 1;">
+                                    <div class="row text-left no-margin bg-white" style=" border-radius: 10px 0 10px 10px; ">
+                                        <div class="col p-r-10 p-l-10">
+                                            <div class="row no-margin">
+                                                <div class="col no-padding b-b b-grey p-t-5 p-b-5 pointer hover-primary">
+                                                    <div class="row align-items-center justify-content-center">
+                                                        <div class="col">
+                                                            <small class="fs-8 all-caps">View Profile</small>
+                                                        </div>
+                                                        <div class="col-auto p-l-0">
+                                                            <i class="fa fa-long-arrow-right"></i>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="row no-margin">
+                                                <div class="col no-padding b-b b-grey p-t-5 p-b-5 pointer">
+                                                    <div class="row align-items-center justify-content-center">
+                                                        <div class="col">
+                                                            <small class="fs-8 all-caps">Reset Password</small>
+                                                        </div>
+                                                        <div class="col-auto p-l-0">
+                                                            <i class="fa fa-unlock-alt"></i>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="row no-margin align-items-center justify-content-center">
+                                                <div class="col no-padding p-t-5 p-b-5 pointer">
+                                                    <div class="row align-items-center justify-content-center">
+                                                        <div class="col">
+                                                            <small class="fs-8 all-caps">Block User</small>
+                                                        </div>
+                                                        <div class="col-auto p-l-0">
+                                                            <i class="fa fa-ban"></i>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        props: ['data'],
+        data() {
+            return {
+                user: this.data,
+                actions: false
+            }
+        },
+        watch: {
+          'data': function() {
+              this.user = this.data;
+          }
+        },
+        methods: {
+            onClose() {
+                this.actions = false;
+            }
+        }
+    }
+</script>
diff --git a/resources/views/pages/accounts/list_users_example.blade.php b/resources/views/pages/accounts/list_users_example.blade.php
new file mode 100644
index 00000000..b1f4b518
--- /dev/null
+++ b/resources/views/pages/accounts/list_users_example.blade.php
@@ -0,0 +1,15 @@
+@extends('layouts.base_portal')
+@section('inner_content')
+    <registration-form-component ref="registration" :email="user@example.com" section="RegistrationSection"></registration-form-component>
+    <list-component :options="{active: true}" section="listUsersSection" endpoint="{{ route('api.account.user.list') }}">
+        <div class="row" slot="header">
+            <div class="col">
+                <div class="all-caps font-lato m-b-0 text-info bold fs-12">Active users</div>
+                <p class="fs-9 all-caps light font-lato muted m-b-0">List of the system currently active users</p>
+            </div>
+        </div>
+        <template slot="list" slot-scope="{data}">
+            <user-component :data="data"></user-component>
+        </template>
+    </list-component>
+@endSection
\ No newline at end of file