From f8edd307bff1c99d9151daa8f4f804e01264105c Mon Sep 17 00:00:00 2001
From: Aabid <mailtoaabid01@gmail.com>
Date: Wed, 26 Jan 2022 02:30:04 +0530
Subject: [PATCH 1/8] added dasboard vue

---
 apps/frontend/admin/package.json              |   7 +-
 .../admin/src/components/AppSideBar.vue       |  85 ++++++--
 .../admin/src/components/HomeBestSellers.vue  |  79 +++++++
 .../admin/src/components/HomeRecentOrders.vue |  55 +++++
 .../admin/src/components/SalesSummary.vue     |  99 +++++++++
 .../admin/src/components/SalesTodayCard.vue   |  24 +++
 .../admin/src/components/TheNavBar.vue        |  39 ++--
 .../admin/src/composables/useNavdrawer.js     |  16 ++
 apps/frontend/admin/src/css/_apply.sass       |   7 +
 apps/frontend/admin/src/css/app.sass          |  18 ++
 apps/frontend/admin/src/css/apply/_alert.sass |  41 ++++
 apps/frontend/admin/src/css/apply/_badge.sass |   6 +
 .../frontend/admin/src/css/apply/_button.sass |  69 ++++++
 apps/frontend/admin/src/css/apply/_card.sass  |   8 +
 apps/frontend/admin/src/css/apply/_code.sass  |  20 ++
 apps/frontend/admin/src/css/apply/_link.sass  |   3 +
 .../admin/src/css/apply/_typography.sass      |  24 +++
 .../frontend/admin/src/css/external/prism.css | 201 ++++++++++++++++++
 .../admin/src/css/index/_report-card.sass     |   9 +
 .../admin/src/layouts/WithSideBar.vue         |  15 +-
 apps/frontend/admin/src/main.js               |   9 +-
 .../frontend/admin/src/plugins/fontAwesome.js |  43 ++++
 apps/frontend/admin/src/views/dashboard.vue   |  17 +-
 apps/frontend/admin/tailwind.config.js        |   9 +
 apps/frontend/store-front/_package.json       |  19 ++
 apps/frontend/store-front/package.json        |  73 ++++++-
 apps/frontend/store-front/vue.config.js       |   9 +
 yarn.lock                                     |  56 ++++-
 28 files changed, 1005 insertions(+), 55 deletions(-)
 create mode 100644 apps/frontend/admin/src/components/HomeBestSellers.vue
 create mode 100644 apps/frontend/admin/src/components/HomeRecentOrders.vue
 create mode 100644 apps/frontend/admin/src/components/SalesSummary.vue
 create mode 100644 apps/frontend/admin/src/components/SalesTodayCard.vue
 create mode 100644 apps/frontend/admin/src/composables/useNavdrawer.js
 create mode 100644 apps/frontend/admin/src/css/_apply.sass
 create mode 100644 apps/frontend/admin/src/css/app.sass
 create mode 100644 apps/frontend/admin/src/css/apply/_alert.sass
 create mode 100644 apps/frontend/admin/src/css/apply/_badge.sass
 create mode 100644 apps/frontend/admin/src/css/apply/_button.sass
 create mode 100644 apps/frontend/admin/src/css/apply/_card.sass
 create mode 100644 apps/frontend/admin/src/css/apply/_code.sass
 create mode 100644 apps/frontend/admin/src/css/apply/_link.sass
 create mode 100644 apps/frontend/admin/src/css/apply/_typography.sass
 create mode 100644 apps/frontend/admin/src/css/external/prism.css
 create mode 100644 apps/frontend/admin/src/css/index/_report-card.sass
 create mode 100644 apps/frontend/admin/src/plugins/fontAwesome.js
 create mode 100644 apps/frontend/store-front/_package.json
 create mode 100644 apps/frontend/store-front/vue.config.js

diff --git a/apps/frontend/admin/package.json b/apps/frontend/admin/package.json
index c51c9dd..deda4e6 100644
--- a/apps/frontend/admin/package.json
+++ b/apps/frontend/admin/package.json
@@ -8,11 +8,16 @@
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/vue-fontawesome": "^3.0.0-5",
     "graphql-config": "*",
     "router": "^2.0.0-beta.1",
     "utils": "*",
     "vue": "^3.2.25",
-    "vue-awesome": "^4.5.0",
+    
+    "vue-chart-3": "^3.0.9",
+    "chart.js":"^3.0.0",
     "vue-router": "4",
     "vuex": "4"
   },
diff --git a/apps/frontend/admin/src/components/AppSideBar.vue b/apps/frontend/admin/src/components/AppSideBar.vue
index cdd8d5f..6202012 100644
--- a/apps/frontend/admin/src/components/AppSideBar.vue
+++ b/apps/frontend/admin/src/components/AppSideBar.vue
@@ -1,17 +1,78 @@
+<script setup>
+import { ref, computed } from 'vue'
+import useNavdrawer from '../composables/useNavdrawer'
+
+const menuItems = {
+  home: {
+    icon: 'home',
+    link: '/',
+  },
+  products: {
+    icon: 'tag',
+    submenu: {
+      'All products': {
+        icon: null,
+      },
+    },
+  },
+  orders: {
+    icon: 'box',
+    submenu: true,
+  },
+  customers: {
+    icon: 'user',
+    submenu: true,
+  },
+}
+
+const { toggleDrawer, isDrawerOpen } = useNavdrawer()
+console.log('isOpen', isDrawerOpen)
+const active = ref('home')
+function clickMenuLink(key) {
+  active.value = key
+}
+</script>
+
 <template>
-  <div class="bg-white dark:bg-gray-800 fixed z-10 w-60 py-3 mt-6">
-    <div class="flex flex-col sm:flex-row sm:justify-around border-r-2 border-grey-300">
-      <div class="w-72 h-screen">
-        <nav class="mt-10 px-6">
-          <a
-            class="hover:text-gray-800 hover:bg-gray-100 flex items-center p-2 my-6 transition-colors dark:hover:text-white dark:hover:bg-gray-600 duration-200 text-gray-600 dark:text-gray-400 rounded-lg"
-            href="#"
-          >
-            <span class="mx-4 text-lg font-normal"> Element </span>
+  <transition name="slide-fade" :duration="1000">
+    <nav
+      class="drawer fixed top-0 bottom-0 w-2/3 bg-gray-100 h-auto z-50 md:top-16 md:my-8 md:z-0 p-5 md:w-60"
+      v-if="isDrawerOpen"
+    >
+      <div class="text-right px-4 text-xl md:hidden w-full">
+        <font-awesome-icon icon="times" @click="toggleDrawer"></font-awesome-icon>
+      </div>
+
+      <div v-for="(item, key) in menuItems" :key="key">
+        <a href="#" class="nav-link" :class="{ 'bg-blue-100 text-green-900': active == key }">
+          <font-awesome-icon :icon="item.icon" />
+          <span class="mx-4 text-lg font-bold" @click="clickMenuLink(key)"> {{ key }} </span>
+        </a>
+
+        <div v-show="active == key">
+          <a v-for="(submenu, key_) in item.submenu" :key="key_" class="nav-link">
+            <font-awesome-icon :icon="submenu.icon" />
+            <span class="pl-8 text-lg font-normal"> {{ key_ }} </span>
             <span class="flex-grow text-right"> </span>
           </a>
-        </nav>
+        </div>
       </div>
-    </div>
-  </div>
+    </nav>
+  </transition>
 </template>
+
+<style>
+/* Enter and leave animations can use different */
+/* durations and timing functions.              */
+.slide-fade-enter-active {
+  transition: all 0.3s ease;
+}
+.slide-fade-leave-active {
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.slide-fade-enter, .slide-fade-leave-to
+/* .slide-fade-leave-active below version 2.1.8 */ {
+  transform: translateX(10px);
+  opacity: 0;
+}
+</style>
diff --git a/apps/frontend/admin/src/components/HomeBestSellers.vue b/apps/frontend/admin/src/components/HomeBestSellers.vue
new file mode 100644
index 0000000..94ecb37
--- /dev/null
+++ b/apps/frontend/admin/src/components/HomeBestSellers.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="card">
+    <div class="card-body">
+      <div class="flex flex-row justify-between items-center">
+        <h1 class="font-extrabold text-lg">best sellers</h1>
+        <a href="#" class="btn-gray text-sm">view all</a>
+      </div>
+
+      <table class="table-auto w-full mt-5 text-right">
+        <thead>
+          <tr>
+            <td class="py-4 font-extrabold text-sm text-left">product</td>
+            <td class="py-4 font-extrabold text-sm">price</td>
+            <td class="py-4 font-extrabold text-sm">sold</td>
+            <td class="py-4 font-extrabold text-sm">profit</td>
+          </tr>
+        </thead>
+
+        <tbody>
+          <!-- item -->
+          <tr class="">
+            <td class="py-4 text-sm text-gray-600 flex flex-row items-center text-left">
+              <div class="w-8 h-8 overflow-hidden mr-3">
+                <img src="img/sneakers.svg" class="object-cover" />
+              </div>
+              Sneakers and Tennis
+            </td>
+            <td class="py-4 text-xs text-gray-600">$ <span class="num-2"></span></td>
+            <td class="py-4 text-xs text-gray-600"><span class="num-3"></span></td>
+            <td class="py-4 text-xs text-gray-600">$ <span class="num-4"></span></td>
+          </tr>
+          <!-- end item -->
+
+          <!-- item -->
+          <tr class="">
+            <td class="py-4 text-sm text-gray-600 flex flex-row items-center">
+              <div class="w-8 h-8 overflow-hidden mr-3">
+                <img src="img/socks.svg" class="object-cover" />
+              </div>
+              Crazy Socks & Graphic Socks for Men
+            </td>
+            <td class="py-4 text-xs text-gray-600">$ <span class="num-2"></span></td>
+            <td class="py-4 text-xs text-gray-600"><span class="num-3"></span></td>
+            <td class="py-4 text-xs text-gray-600">$ <span class="num-4"></span></td>
+          </tr>
+          <!-- end item -->
+
+          <!-- item -->
+          <tr class="">
+            <td class="py-4 text-sm text-gray-600 flex flex-row items-center">
+              <div class="w-8 h-8 overflow-hidden mr-3">
+                <img src="img/soccer.svg" class="object-cover" />
+              </div>
+              Adidas Soccer Ball
+            </td>
+            <td class="py-4 text-xs text-gray-600">$ <span class="num-2"></span></td>
+            <td class="py-4 text-xs text-gray-600"><span class="num-3"></span></td>
+            <td class="py-4 text-xs text-gray-600">$ <span class="num-4"></span></td>
+          </tr>
+          <!-- end item -->
+
+          <!-- item -->
+          <tr class="">
+            <td class="py-4 text-sm text-gray-600 flex flex-row items-center">
+              <div class="w-8 h-8 overflow-hidden mr-3">
+                <img src="img/food.svg" class="object-cover" />
+              </div>
+              Best Chocolate Chip Cookies
+            </td>
+            <td class="py-4 text-xs text-gray-600">$ <span class="num-2"></span></td>
+            <td class="py-4 text-xs text-gray-600"><span class="num-3"></span></td>
+            <td class="py-4 text-xs text-gray-600">$ <span class="num-4"></span></td>
+          </tr>
+          <!-- end item -->
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
diff --git a/apps/frontend/admin/src/components/HomeRecentOrders.vue b/apps/frontend/admin/src/components/HomeRecentOrders.vue
new file mode 100644
index 0000000..40fc83f
--- /dev/null
+++ b/apps/frontend/admin/src/components/HomeRecentOrders.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="card">
+    <div class="card-body">
+      <h2 class="font-bold text-lg mb-10">Recent Orders</h2>
+
+      <!-- start a table -->
+      <table class="table-fixed w-full">
+        <!-- table head -->
+        <thead class="text-left">
+          <tr>
+            <th class="w-1/2 pb-10 text-sm font-extrabold tracking-wide">customer</th>
+            <th class="w-1/4 pb-10 text-sm font-extrabold tracking-wide text-right">Product</th>
+            <th class="w-1/4 pb-10 text-sm font-extrabold tracking-wide text-right">Invoice</th>
+            <th class="w-1/4 pb-10 text-sm font-extrabold tracking-wide text-right">price</th>
+            <th class="w-1/4 pb-10 text-sm font-extrabold tracking-wide text-right">status</th>
+          </tr>
+        </thead>
+        <!-- end table head -->
+
+        <!-- table body -->
+        <tbody class="text-left text-gray-600">
+          <!-- item -->
+          <tr>
+            <!-- name -->
+            <th class="mb-4 text-xs font-extrabold tracking-wider flex flex-row items-center w-full">
+              <div class="w-8 h-8 overflow-hidden rounded-full">
+                <img src="img/user2.jpg" class="object-cover" />
+              </div>
+              <p class="ml-3 name-1">user name</p>
+            </th>
+            <!-- name -->
+
+            <!-- product -->
+            <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">Nike Sport</th>
+            <!-- product -->
+
+            <!-- invoice -->
+            <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">#2384</th>
+            <!-- invoice -->
+
+            <!-- price -->
+            <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">$333</th>
+            <!-- price -->
+
+            <!-- status -->
+            <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">shipped</th>
+            <!-- status -->
+          </tr>
+        </tbody>
+        <!-- end table body -->
+      </table>
+      <!-- end a table -->
+    </div>
+  </div>
+</template>
diff --git a/apps/frontend/admin/src/components/SalesSummary.vue b/apps/frontend/admin/src/components/SalesSummary.vue
new file mode 100644
index 0000000..9b3fc41
--- /dev/null
+++ b/apps/frontend/admin/src/components/SalesSummary.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="w-full card p-2 overflow-hidden flex flex-row flex-wrap">
+    <!-- right -->
+    <div class="border-r border-gray-200 md:w-2/3 w-full">
+      <!-- top -->
+      <div class="p-5 flex flex-row flex-wrap justify-between items-center">
+        <h2 class="font-bold text-lg">Order Summary</h2>
+        <div class="flex flex-row justify-center items-center">
+          <a href="#" class="btn mr-4 text-sm py-2 block">month</a>
+          <a href="#" class="btn-shadow text-sm py-2 block">week</a>
+        </div>
+      </div>
+      <!-- end top -->
+
+      <!-- chart -->
+
+      <line-chart :chart-data="dataset" :options="options"></line-chart>
+      <!-- end chart -->
+    </div>
+    <!-- end right -->
+
+    <!-- left -->
+    <div class="md:w-1/3 w-full">
+      <!-- top -->
+      <div class="p-5 border-b border-gray-200">
+        <h2 class="font-bold text-lg mb-6">Sales History</h2>
+
+        <div class="flex flex-row justify-between mb-3">
+          <div class="">
+            <h4 class="text-gray-600 font-thin">Puma Shoes</h4>
+            <p class="text-gray-400 text-xs font-hairline">30 min ago</p>
+          </div>
+          <div class="text-sm font-medium"><span class="text-green-400">+</span> $250</div>
+        </div>
+
+        <div class="flex flex-row justify-between mb-3">
+          <div class="">
+            <h4 class="text-gray-600 font-thin">Google Pixel 4 xl</h4>
+            <p class="text-gray-400 text-xs font-hairline">1 day ago</p>
+          </div>
+          <div class="text-sm font-medium"><span class="text-red-400">-</span> $10</div>
+        </div>
+
+        <div class="flex flex-row justify-between">
+          <div class="">
+            <h4 class="text-gray-600 font-thin">Nike Air Jordan</h4>
+            <p class="text-gray-400 text-xs font-hairline">2 hour ago</p>
+          </div>
+          <div class="text-sm font-medium"><span class="text-red-400">-</span> $98</div>
+        </div>
+      </div>
+      <!-- end top -->
+
+      <!-- bottom -->
+      <div class="p-5">
+        <h2 class="font-bold text-lg mb-2">Sales History</h2>
+        <strong class="text-teal-400 font-extrabold text-xl">$82,950.96</strong>
+
+        <div class="bg-gray-300 h-2 rounded-full mt-2 relative">
+          <div class="rounded-full bg-teal-400 h-full w-3/4 shadow-md"></div>
+        </div>
+      </div>
+      <!-- end bottom -->
+    </div>
+    <!-- end left -->
+  </div>
+</template>
+
+<script>
+import { LineChart } from 'vue-chart-3'
+
+export default {
+  components: {
+    LineChart,
+  },
+  data: () => ({
+    dataset: {
+      labels: ['jan', 'feb', 'oct', 'm', 's', 'ss', 'ds', 's'],
+      datasets: [
+        {
+          label: 'My First Dataset',
+          data: [65, 59, 80, 81, 56, 55, 40],
+          fill: true,
+          borderColor: 'rgb(75, 192, 192)',
+          tension: 0.1,
+          backgroundColor: 'rgb(153 246 228)',
+        },
+      ],
+    },
+    options: {
+      xaxis: {
+        tooltip: {
+          enabled: false,
+        },
+      },
+    },
+  }),
+}
+</script>
diff --git a/apps/frontend/admin/src/components/SalesTodayCard.vue b/apps/frontend/admin/src/components/SalesTodayCard.vue
new file mode 100644
index 0000000..e4b4fb7
--- /dev/null
+++ b/apps/frontend/admin/src/components/SalesTodayCard.vue
@@ -0,0 +1,24 @@
+<template>
+  <!-- congrats -->
+  <div class="card">
+    <div class="card-body h-full flex flex-col justify-between">
+      <div>
+        <h1 class="text-lg font-bold tracking-wide">Congratulations Moe!</h1>
+        <p class="text-gray-600 mt-2">Best seller of the month</p>
+      </div>
+
+      <div class="flex flex-row mt-10 items-end">
+        <div class="flex-1">
+          <h1 class="font-extrabold text-4xl text-teal-400">$89k</h1>
+          <p class="mt-3 mb-4 text-xs text-gray-500">You have done 57.6% more sales today.</p>
+          <a href="#" class="btn-shadow py-3"> view sales </a>
+        </div>
+
+        <div class="flex-1 ml-10 w-32 h-32 lg:w-auto lg:h-auto overflow-hidden">
+          <img class="object-cover" src="img/congrats.svg" />
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- end congrats -->
+</template>
diff --git a/apps/frontend/admin/src/components/TheNavBar.vue b/apps/frontend/admin/src/components/TheNavBar.vue
index 5048a73..6dd7ee0 100644
--- a/apps/frontend/admin/src/components/TheNavBar.vue
+++ b/apps/frontend/admin/src/components/TheNavBar.vue
@@ -1,23 +1,26 @@
-<script setup></script>
+<script setup>
+import useNavdrawer from '../composables/useNavdrawer'
+import { FontAwesomeIcon as fIcon } from '@fortawesome/vue-fontawesome'
+const { toggleDrawer } = useNavdrawer()
+</script>
 
 <template>
-  <nav
-    class="w-full shadow-sm bg-background border-b-2 border-gray-300 fixed p-3 z-50 flex justify-between px-4 items-center"
+  <!-- start navbar -->
+  <div
+    class="fixed w-screen z-10 md:relative flex flex-row flex-wrap items-center justify-between bg-white p-3 border-b border-gray-300"
   >
-    <p class="text-white uppercase text-lg">Zivero Admin</p>
-
-    <div class="w-1/3">
-      <input
-        id="rounded-email"
-        type="text"
-        class="rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
-        placeholder="search"
-      />
-    </div>
-
-    <div class="text-lg hover:rounded-md hp">
-      <span class="bg-accent rounded-full py-1 px-2">A</span>
-      <span class="mx-2 text-white">Aabid</span>
+    <!-- logo -->
+    <div class="w-56 flex flex-row items-center">
+      <button @click="toggleDrawer()" class="mr-4 text-right text-gray-900 md:hidden">
+        <f-icon icon="bars"></f-icon>
+      </button>
+      <!-- <img src="img/logo.png" class="w-10 flex-none" /> -->
+      <strong class="capitalize ml-1 flex-1">zivero</strong>
     </div>
-  </nav>
+  </div>
 </template>
+
+<style scoped lang="sass">
+.nav-icon-link
+  @apply mr-2 transition duration-500 ease-in-out hover:text-gray-900
+</style>
diff --git a/apps/frontend/admin/src/composables/useNavdrawer.js b/apps/frontend/admin/src/composables/useNavdrawer.js
new file mode 100644
index 0000000..83121d8
--- /dev/null
+++ b/apps/frontend/admin/src/composables/useNavdrawer.js
@@ -0,0 +1,16 @@
+import { ref, computed } from 'vue'
+
+const open = ref(false)
+
+export default () => {
+  const isDrawerOpen = computed(() => {
+    return open.value
+  })
+  function toggleDrawer() {
+    console.log('toggke', open.value)
+    open.value = !open.value
+    console.log('toggke', open.value)
+  }
+
+  return { isDrawerOpen, toggleDrawer, open }
+}
diff --git a/apps/frontend/admin/src/css/_apply.sass b/apps/frontend/admin/src/css/_apply.sass
new file mode 100644
index 0000000..9e549ab
--- /dev/null
+++ b/apps/frontend/admin/src/css/_apply.sass
@@ -0,0 +1,7 @@
+@import "apply/_typography" 
+@import "apply/_card" 
+@import "apply/_button" 
+@import "apply/code" 
+@import "apply/_badge" 
+@import "apply/_alert" 
+@import "apply/_link"
\ No newline at end of file
diff --git a/apps/frontend/admin/src/css/app.sass b/apps/frontend/admin/src/css/app.sass
new file mode 100644
index 0000000..6cda810
--- /dev/null
+++ b/apps/frontend/admin/src/css/app.sass
@@ -0,0 +1,18 @@
+@tailwind base
+@tailwind components
+
+// font imports
+@import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap')
+
+
+// external
+@import  "./external/prism"
+
+// apply
+@import "apply"
+
+// index
+@import "index/report-card" 
+
+
+@tailwind utilities
diff --git a/apps/frontend/admin/src/css/apply/_alert.sass b/apps/frontend/admin/src/css/apply/_alert.sass
new file mode 100644
index 0000000..36a12e9
--- /dev/null
+++ b/apps/frontend/admin/src/css/apply/_alert.sass
@@ -0,0 +1,41 @@
+.alert
+    @apply border rounded bg-white py-4 px-6 text-sm
+    a
+        @apply font-extrabold text-black text-base transition ease-in-out duration-300
+        &:hover
+            @apply opacity-75    
+
+.alert-default
+    @apply bg-teal-100 border-teal-200 text-teal-500
+    a
+        @apply text-teal-700
+
+.alert-light
+    @apply bg-gray-100 border-gray-300 text-gray-600
+    a
+        @apply text-gray-700
+
+.alert-dark
+    @apply bg-gray-700 border-gray-900 text-white
+    a
+        @apply text-gray-500
+
+.alert-success
+    @apply bg-green-200 border-green-300 text-green-500
+    a
+        @apply text-green-700
+
+.alert-error
+    @apply bg-red-200 border-red-300 text-red-500
+    a
+        @apply text-red-700
+
+
+.alert-close
+    @apply flex flex-row-reverse
+    button.alert-btn-close
+        @apply transition ease-in-out duration-300
+        &:hover
+            @apply opacity-75
+    span
+        @apply flex-1 
\ No newline at end of file
diff --git a/apps/frontend/admin/src/css/apply/_badge.sass b/apps/frontend/admin/src/css/apply/_badge.sass
new file mode 100644
index 0000000..26d3cf8
--- /dev/null
+++ b/apps/frontend/admin/src/css/apply/_badge.sass
@@ -0,0 +1,6 @@
+.badge
+    padding: 2px 0
+    @apply px-2 
+
+.badge-primary
+    @apply bg-teal-200 border border-teal-300 text-teal-600 rounded lowercase
\ No newline at end of file
diff --git a/apps/frontend/admin/src/css/apply/_button.sass b/apps/frontend/admin/src/css/apply/_button.sass
new file mode 100644
index 0000000..9a73a18
--- /dev/null
+++ b/apps/frontend/admin/src/css/apply/_button.sass
@@ -0,0 +1,69 @@
+.btn-shadow
+    @apply text-center capitalize bg-teal-400 block py-2 px-5 rounded text-white transition-all ease-in-out duration-300 shadow-md
+    &:hover
+        @apply shadow-lg
+
+.btn
+    @apply text-center capitalize bg-teal-200 block py-2 px-5 rounded text-teal-600 transition-all ease-in-out duration-300
+    &:hover
+        @apply bg-teal-300 text-teal-800
+
+.btn-indigo
+    @apply text-center capitalize bg-indigo-500 text-indigo-100 block py-2 px-5 rounded transition-all ease-in-out duration-300
+    &:hover
+        @apply bg-indigo-600 text-indigo-200
+
+.btn-info
+    @apply text-center capitalize bg-yellow-300 text-yellow-600 block py-2 px-5 rounded transition-all ease-in-out duration-300
+    &:hover
+        @apply bg-yellow-400 text-yellow-600
+
+.btn-danger
+    @apply text-center capitalize bg-red-300 text-red-600 block py-2 px-5 rounded transition-all ease-in-out duration-300
+    &:hover
+        @apply bg-red-400 text-red-600
+
+
+.btn-gray
+    @apply text-center capitalize bg-gray-100 border border-gray-300 block py-2 px-5 rounded text-gray-600 transition-all ease-in-out duration-300
+    &:hover
+        @apply bg-white text-gray-800 border border-gray-300
+
+
+
+.btn-bs-dark
+    @apply text-center capitalize bg-gray-900 text-white block py-2 px-5 rounded transition-all ease-in-out duration-300
+    &:hover
+        @apply opacity-75
+    
+.btn-bs-primary
+    @apply text-center capitalize bg-indigo-600 text-white block py-2 px-5 rounded transition-all ease-in-out duration-300
+    &:hover
+        @apply opacity-75
+
+.btn-bs-secondary
+    @apply text-center capitalize bg-gray-500 text-white block py-2 px-5 rounded transition-all ease-in-out duration-300
+    &:hover
+        @apply opacity-75
+
+.btn-bs-success
+    @apply text-center capitalize bg-green-500 text-white block py-2 px-5 rounded transition-all ease-in-out duration-300
+    &:hover
+        @apply opacity-75
+
+.btn-bs-danger
+    @apply text-center capitalize bg-red-500 text-white block py-2 px-5 rounded transition-all ease-in-out duration-300
+    &:hover
+        @apply opacity-75
+
+.btn-bs-info
+    @apply text-center capitalize bg-yellow-500 text-white block py-2 px-5 rounded transition-all ease-in-out duration-300
+    &:hover
+        @apply opacity-75
+
+
+
+// overflow 
+.menu-overflow
+    &:focus
+        outline: none
\ No newline at end of file
diff --git a/apps/frontend/admin/src/css/apply/_card.sass b/apps/frontend/admin/src/css/apply/_card.sass
new file mode 100644
index 0000000..fe625c8
--- /dev/null
+++ b/apps/frontend/admin/src/css/apply/_card.sass
@@ -0,0 +1,8 @@
+.card
+    @apply rounded bg-white border border-gray-300
+    .card-header
+        @apply border-b p-6
+    .card-body
+        @apply p-6
+    .card-footer
+        @apply border-t p-6
\ No newline at end of file
diff --git a/apps/frontend/admin/src/css/apply/_code.sass b/apps/frontend/admin/src/css/apply/_code.sass
new file mode 100644
index 0000000..3389c4b
--- /dev/null
+++ b/apps/frontend/admin/src/css/apply/_code.sass
@@ -0,0 +1,20 @@
+code[class*="language-"],
+pre[class*="language-"]
+    border-radius: 5px
+    text-transform: lowercase
+
+
+div.code-toolbar  
+    .toolbar
+        opacity: 1 !important 
+        button
+            transition: all 0.2s !important
+            padding: 10px 20px !important
+            border-radius: 4px !important
+            background: transparent !important
+            box-shadow: 0 0 0 !important
+            letter-spacing: 1px !important
+            font-weight: 900 !important
+            &:hover
+                background-color: #fff !important
+    
\ No newline at end of file
diff --git a/apps/frontend/admin/src/css/apply/_link.sass b/apps/frontend/admin/src/css/apply/_link.sass
new file mode 100644
index 0000000..177402d
--- /dev/null
+++ b/apps/frontend/admin/src/css/apply/_link.sass
@@ -0,0 +1,3 @@
+.nav-link
+
+    @apply hover:text-gray-800 active:text-green-800 hover:bg-white flex items-center p-2 my-2 transition-colors dark:hover:text-white dark:hover:bg-gray-600 duration-200 text-gray-600 dark:text-gray-400 rounded-lg
diff --git a/apps/frontend/admin/src/css/apply/_typography.sass b/apps/frontend/admin/src/css/apply/_typography.sass
new file mode 100644
index 0000000..cda942d
--- /dev/null
+++ b/apps/frontend/admin/src/css/apply/_typography.sass
@@ -0,0 +1,24 @@
+body,h1,h2,h3,h4,h5,h6,p,a
+    @apply capitalize
+
+p
+    @apply tracking-wider text-sm text-gray-500
+
+
+.h1
+    @apply text-6xl font-black
+
+.h2
+    @apply text-5xl font-extrabold
+
+.h3
+    @apply text-4xl font-extrabold
+
+.h4
+    @apply text-3xl font-extrabold
+
+.h5
+    @apply text-2xl font-extrabold
+
+.h6
+    @apply text-xl font-extrabold
\ No newline at end of file
diff --git a/apps/frontend/admin/src/css/external/prism.css b/apps/frontend/admin/src/css/external/prism.css
new file mode 100644
index 0000000..b61a827
--- /dev/null
+++ b/apps/frontend/admin/src/css/external/prism.css
@@ -0,0 +1,201 @@
+/* PrismJS 1.19.0
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+http+javadoclike+json+jsonp+json5+markup-templating+php+phpdoc+plsql+python+sass+scss+sql&plugins=unescaped-markup+normalize-whitespace+toolbar+copy-to-clipboard */
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ * @author Rose Pritchard
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #ccc;
+	background: none;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #2d2d2d;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #999;
+}
+
+.token.punctuation {
+	color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+	color: #e2777a;
+}
+
+.token.function-name {
+	color: #6196cc;
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+	color: #f08d49;
+}
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+	color: #f8c555;
+}
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+	color: #cc99cd;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+	color: #7ec699;
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+	color: #67cdcc;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.token.inserted {
+	color: green;
+}
+
+/* Fallback, in case JS does not run, to ensure the code is at least visible */
+[class*='lang-'] script[type='text/plain'],
+[class*='language-'] script[type='text/plain'],
+script[type='text/plain'][class*='lang-'],
+script[type='text/plain'][class*='language-'] {
+	display: block;
+	font: 100% Consolas, Monaco, monospace;
+	white-space: pre;
+	overflow: auto;
+}
+
+div.code-toolbar {
+	position: relative;
+}
+
+div.code-toolbar > .toolbar {
+	position: absolute;
+	top: .3em;
+	right: .2em;
+	transition: opacity 0.3s ease-in-out;
+	opacity: 0;
+}
+
+div.code-toolbar:hover > .toolbar {
+	opacity: 1;
+}
+
+/* Separate line b/c rules are thrown out if selector is invalid.
+   IE11 and old Edge versions don't support :focus-within. */
+div.code-toolbar:focus-within > .toolbar {
+	opacity: 1;
+}
+
+div.code-toolbar > .toolbar .toolbar-item {
+	display: inline-block;
+}
+
+div.code-toolbar > .toolbar a {
+	cursor: pointer;
+}
+
+div.code-toolbar > .toolbar button {
+	background: none;
+	border: 0;
+	color: inherit;
+	font: inherit;
+	line-height: normal;
+	overflow: visible;
+	padding: 0;
+	-webkit-user-select: none; /* for button */
+	-moz-user-select: none;
+	-ms-user-select: none;
+}
+
+div.code-toolbar > .toolbar a,
+div.code-toolbar > .toolbar button,
+div.code-toolbar > .toolbar span {
+	color: #bbb;
+	font-size: .8em;
+	padding: 0 .5em;
+	background: #f5f2f0;
+	background: rgba(224, 224, 224, 0.2);
+	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
+	border-radius: .5em;
+}
+
+div.code-toolbar > .toolbar a:hover,
+div.code-toolbar > .toolbar a:focus,
+div.code-toolbar > .toolbar button:hover,
+div.code-toolbar > .toolbar button:focus,
+div.code-toolbar > .toolbar span:hover,
+div.code-toolbar > .toolbar span:focus {
+	color: inherit;
+	text-decoration: none;
+}
+
diff --git a/apps/frontend/admin/src/css/index/_report-card.sass b/apps/frontend/admin/src/css/index/_report-card.sass
new file mode 100644
index 0000000..de04d7e
--- /dev/null
+++ b/apps/frontend/admin/src/css/index/_report-card.sass
@@ -0,0 +1,9 @@
+.report-card    
+    &:hover
+        .card
+            @apply shadow-lg border-white
+            transform: scale(1.01)
+        .footer
+            @apply p-0 border-0             
+    .footer , .card
+        @apply transition-all ease-in-out duration-300
diff --git a/apps/frontend/admin/src/layouts/WithSideBar.vue b/apps/frontend/admin/src/layouts/WithSideBar.vue
index cd747fc..9cc5990 100644
--- a/apps/frontend/admin/src/layouts/WithSideBar.vue
+++ b/apps/frontend/admin/src/layouts/WithSideBar.vue
@@ -1,18 +1,16 @@
 <template>
   <div class="">
     <nav-bar />
-    <div class="py-8 flex flex-no-wrap">
+    <div class="flex flex-no-wrap h-auto">
       <!-- Sidebar starts -->
-      <!-- Remove class [ hidden ] and replace [ sm:flex ] with [ flex ] -->
-      <side-bar></side-bar>
+
+      <side-bar class=""></side-bar>
       <!-- Sidebar ends -->
       <!-- Remove class [ h-64 ] when adding a card block -->
-      <div class="container mx-auto ml-60 py-10 h-64 md:w-4/5 w-11/12 px-6">
+      <div class="bg-gray-100 md:pl-64 md:py-5 px-2 md:px-6 m-0">
         <!-- Remove class [ border-dashed border-2 border-gray-300 ] to remove dotted border -->
-        <div class="w-full h-full rounded border-dashed border-2 border-gray-300">
-          <!-- Place your content here -->
-          <slot />
-        </div>
+        <div class="w-full h-full"><slot /></div>
+        <!-- Place your content here -->
       </div>
     </div>
   </div>
@@ -21,6 +19,7 @@
 <script>
 import sideBar from '../components/AppSideBar.vue'
 import navBar from '../components/TheNavBar.vue'
+
 export default {
   name: 'SideBarWithIconsAtBottom',
   components: {
diff --git a/apps/frontend/admin/src/main.js b/apps/frontend/admin/src/main.js
index d226080..e377c1d 100644
--- a/apps/frontend/admin/src/main.js
+++ b/apps/frontend/admin/src/main.js
@@ -1,10 +1,17 @@
 import { createApp } from 'vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { Chart, LineController, DoughnutController, ArcElement, Tooltip, registerables } from 'chart.js'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import icons from './plugins/fontAwesome'
 import App from './App.vue'
-import './index.css'
+import './css/app.sass'
 import store from './store'
 import router from './router'
 
+Chart.register(DoughnutController, ArcElement, Tooltip, LineController, ...registerables)
+library.add(...icons)
 const app = createApp(App)
+app.component('font-awesome-icon', FontAwesomeIcon)
 app.use(store)
 app.use(router)
 app.mount('#app')
diff --git a/apps/frontend/admin/src/plugins/fontAwesome.js b/apps/frontend/admin/src/plugins/fontAwesome.js
new file mode 100644
index 0000000..dcd1a50
--- /dev/null
+++ b/apps/frontend/admin/src/plugins/fontAwesome.js
@@ -0,0 +1,43 @@
+import {
+  faUserSecret,
+  faHome,
+  faTag,
+  faBox,
+  faUser,
+  faListUl,
+  faChevronDown,
+  faCommentAlt,
+  faCheckCircle,
+  faCalendar,
+  faEnvelopeOpenText,
+  faUserEdit,
+  faInbox,
+  faIdBadge,
+  faCommentDots,
+  faUserTimes,
+  faBell,
+  faBars,
+  faTimes,
+} from '@fortawesome/free-solid-svg-icons'
+
+export default [
+  faUserSecret,
+  faHome,
+  faTag,
+  faBox,
+  faUser,
+  faListUl,
+  faChevronDown,
+  faCommentAlt,
+  faCheckCircle,
+  faTimes,
+  faCalendar,
+  faEnvelopeOpenText,
+  faUserEdit,
+  faInbox,
+  faIdBadge,
+  faCommentDots,
+  faUserTimes,
+  faBell,
+  faBars,
+]
diff --git a/apps/frontend/admin/src/views/dashboard.vue b/apps/frontend/admin/src/views/dashboard.vue
index 53731d9..2e5f1ad 100644
--- a/apps/frontend/admin/src/views/dashboard.vue
+++ b/apps/frontend/admin/src/views/dashboard.vue
@@ -1,9 +1,24 @@
 <script setup>
 import withSideBarLayout from '../layouts/WithSideBar.vue'
+import summaryChart from '../components/SalesSummary.vue'
+import salesHistory from '../components/SalesTodayCard.vue'
+import recentOrders from '../components/HomeRecentOrders.vue'
+import bestSellers from '../components/HomeBestSellers.vue'
 </script>
 
 <template>
   <with-side-bar-layout>
-    <div>Dashboard</div>
+    <main>
+      <div class="flex-1 w-full pt-16 md:pt-0">
+        <div class="flex w-full flex-wrap justify-center md:justify-between">
+          <sales-history class=""></sales-history>
+          <summary-chart class="w-full mt-1 md:w-2/3"></summary-chart>
+        </div>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mt-5">
+        <best-sellers></best-sellers>
+        <recent-orders></recent-orders>
+      </div>
+    </main>
   </with-side-bar-layout>
 </template>
diff --git a/apps/frontend/admin/tailwind.config.js b/apps/frontend/admin/tailwind.config.js
index bc3c12d..d7a08b6 100644
--- a/apps/frontend/admin/tailwind.config.js
+++ b/apps/frontend/admin/tailwind.config.js
@@ -3,6 +3,15 @@ module.exports = {
   plugins: [],
 
   theme: {
+    // screens: {
+    //   sm: { min: '639px' },
+
+    //   md: { max: '767px' },
+
+    //   lg: { max: '1023px' },
+
+    //   xl: { max: '1279px' },
+    // },
     extend: {
       colors: {
         primary: '#DEB992',
diff --git a/apps/frontend/store-front/_package.json b/apps/frontend/store-front/_package.json
new file mode 100644
index 0000000..9c5f19b
--- /dev/null
+++ b/apps/frontend/store-front/_package.json
@@ -0,0 +1,19 @@
+{
+  "name": "store-front",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.2.25"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^2.0.0",
+    "autoprefixer": "^10.4.2",
+    "postcss": "^8.4.5",
+    "tailwindcss": "^3.0.15",
+    "vite": "^2.7.2"
+  }
+}
diff --git a/apps/frontend/store-front/package.json b/apps/frontend/store-front/package.json
index 1c3b566..5cc6f0a 100644
--- a/apps/frontend/store-front/package.json
+++ b/apps/frontend/store-front/package.json
@@ -1,19 +1,70 @@
 {
-  "name": "admin",
-  "version": "0.0.0",
+  "name": "zivero",
+  "version": "0.1.0",
+  "private": true,
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
+    "serve": "vue-cli-service serve --host 0.0.0.0 ",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "vue": "^3.2.25"
+    "apollo-cache-inmemory": "^1.6.6",
+    "apollo-client": "^2.6.10",
+    "apollo-link": "^1.2.14",
+    "apollo-link-error": "^1.1.13",
+    "apollo-link-http": "^1.5.17",
+    "core-js": "^3.6.5",
+    "graphql": "^15.4.0",
+    "graphql-tag": "^2.11.0",
+    "promise": "^8.1.0",
+    "vue": "^2.6.12",
+    "vue-apollo": "^3.0.5",
+    "vue-router": "^3.4.9",
+    "vuetify": "^2.2.11",
+    "vuex": "^3.5.1"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^2.0.0",
-    "autoprefixer": "^10.4.2",
-    "postcss": "^8.4.5",
-    "tailwindcss": "^3.0.15",
-    "vite": "^2.7.2"
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.8.0",
+    "eslint-plugin-vue": "^6.2.2",
+    "sass": "^1.19.0",
+    "sass-loader": "^8.0.0",
+    "vue-cli-plugin-vuetify": "~2.0.7",
+    "vue-template-compiler": "^2.6.11",
+    "vuetify-loader": "^1.3.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "_id": "zivero@0.1.0",
+  "readme": "ERROR: No README data found!",
+
+  "graphql": {
+    "schema": "./schema.graphql",
+    "client": {
+      "service": {
+        "name": "zivero",
+        "url": "http://localhost:8000/graphql"
+      }
+    }
   }
 }
diff --git a/apps/frontend/store-front/vue.config.js b/apps/frontend/store-front/vue.config.js
new file mode 100644
index 0000000..feb9653
--- /dev/null
+++ b/apps/frontend/store-front/vue.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+
+    devServer: {
+    disableHostCheck: true
+  },
+  "transpileDependencies": [
+    "vuetify"
+  ]
+}
diff --git a/yarn.lock b/yarn.lock
index 9680b52..5253cad 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -945,6 +945,30 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fortawesome/fontawesome-common-types@^0.2.36":
+  version "0.2.36"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
+  integrity sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==
+
+"@fortawesome/fontawesome-svg-core@^1.2.36":
+  version "1.2.36"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz#4f2ea6f778298e0c47c6524ce2e7fd58eb6930e3"
+  integrity sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/free-solid-svg-icons@^5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz#2a68f3fc3ddda12e52645654142b9e4e8fbb6cc5"
+  integrity sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/vue-fontawesome@^3.0.0-5":
+  version "3.0.0-5"
+  resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.0-5.tgz#6251e6917198362fa56510eb256cfb6aa6d30a32"
+  integrity sha512-aNmBT4bOecrFsZTog1l6AJDQHPP3ocXV+WQ3Ogy8WZCqstB/ahfhH4CPu5i4N9Hw0MBKXqE+LX+NbUxcj8cVTw==
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -1569,7 +1593,7 @@
   dependencies:
     "@vue/shared" "3.2.29"
 
-"@vue/runtime-core@3.2.29":
+"@vue/runtime-core@3.2.29", "@vue/runtime-core@latest":
   version "3.2.29"
   resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.29.tgz#fb8577b2fcf52e8d967bd91cdf49ab9fb91f9417"
   integrity sha512-VMvQuLdzoTGmCwIKTKVwKmIL0qcODIqe74JtK1pVr5lnaE0l25hopodmPag3RcnIcIXe+Ye3B2olRCn7fTCgig==
@@ -1577,7 +1601,7 @@
     "@vue/reactivity" "3.2.29"
     "@vue/shared" "3.2.29"
 
-"@vue/runtime-dom@3.2.29":
+"@vue/runtime-dom@3.2.29", "@vue/runtime-dom@latest":
   version "3.2.29"
   resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.29.tgz#35e9a2bf04ef80b86ac2ca0e7b2ceaccf1e18f01"
   integrity sha512-YJgLQLwr+SQyORzTsBQLL5TT/5UiV83tEotqjL7F9aFDIQdFBTCwpkCFvX9jqwHoyi9sJqM9XtTrMcc8z/OjPA==
@@ -2702,6 +2726,11 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+chart.js@^3.0.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.7.0.tgz#7a19c93035341df801d613993c2170a1fcf1d882"
+  integrity sha512-31gVuqqKp3lDIFmzpKIrBeum4OpZsQjSIAqlOpgjosHDJZlULtvwLEZKtEhIAZc7JMPaHlYMys40Qy9Mf+1AAg==
+
 check-types@^8.0.3:
   version "8.0.3"
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"
@@ -3367,6 +3396,11 @@ csso@^4.0.2:
   dependencies:
     css-tree "^1.1.2"
 
+csstype@3.0.10:
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
+  integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==
+
 csstype@^2.6.8:
   version "2.6.19"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa"
@@ -6096,7 +6130,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3:
+lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@latest:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -6442,6 +6476,11 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.15.0.tgz#3f34a473ff18e15c1b5626b62903b5ad6e665fee"
   integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==
 
+nanoid@3.1.31:
+  version "3.1.31"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.31.tgz#f5b58a1ce1b7604da5f0605757840598d8974dc6"
+  integrity sha512-ZivnJm0o9bb13p2Ot5CpgC2rQdzB9Uxm/mFZweqm5eMViqOJe3PV6LU2E30SiLgheesmcPrjquqraoolONSA0A==
+
 nanoid@^3.1.30:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c"
@@ -9466,6 +9505,17 @@ vue-awesome@^4.5.0:
   resolved "https://registry.yarnpkg.com/vue-awesome/-/vue-awesome-4.5.0.tgz#d42179335de20b53fee9bdb090498aeee1074f78"
   integrity sha512-pbtZkRecXLm3fg0eVkwObDRM9YNU1BW5wDsL4mMoSvUXZbTnS+N2E4CahAwKJL5OPbqmhJQgZPekQoJrID7dcQ==
 
+vue-chart-3@^3.0.9:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/vue-chart-3/-/vue-chart-3-3.0.9.tgz#dc3ff3ea849f3c2798ab60a89f282a64c21efc1d"
+  integrity sha512-RyVaOhSem0v4v645zAkdi1mgZjuD3KMQr11KrEZGFupoHzV2qn/sBpEDvplR9i57YnRxZ3KDnKqw/1rx2CkOZA==
+  dependencies:
+    "@vue/runtime-core" latest
+    "@vue/runtime-dom" latest
+    csstype "3.0.10"
+    lodash latest
+    nanoid "3.1.31"
+
 vue-cli-plugin-vuetify@~2.0.7:
   version "2.0.9"
   resolved "https://registry.yarnpkg.com/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.0.9.tgz#982991aec28e79d1f0c2eb8f6e3d62e042087ee8"

From ff8e717c84a11f07efd2d39531527223f6eb5920 Mon Sep 17 00:00:00 2001
From: Aabid <mailtoaabid01@gmail.com>
Date: Tue, 1 Feb 2022 10:50:02 +0530
Subject: [PATCH 2/8] added product create page ande related components"

---
 README.md                                     |   4 +-
 apps/backend/shop/models.py                   | 196 ++++++-------
 apps/backend/shop/schema.py                   |  92 +++---
 apps/frontend/admin/apollo.config.js          |   1 +
 apps/frontend/admin/package.json              |  15 +-
 apps/frontend/admin/src/apolloClient.js       |  89 ++++++
 .../frontend/admin/src/components/AppCard.vue |  64 +++++
 .../admin/src/components/AppSideBar.vue       |  63 +++--
 .../admin/src/components/BaseButton.vue       |   7 +
 .../admin/src/components/BaseCardBody.vue     |  36 +++
 .../admin/src/components/BaseCardFooter.vue   |  36 +++
 .../admin/src/components/BaseCardHeading.vue  |  37 +++
 .../src/components/BaseExpandableItem.vue     |  19 ++
 .../admin/src/components/BaseInput.vue        |  75 +++++
 .../admin/src/components/BaseListItem.vue     |  41 +++
 .../src/components/BaseListItemGroup.vue      |  71 +++++
 .../src/components/BaseMultiselectField.vue   | 103 +++++++
 .../admin/src/components/BaseNavDrawer.vue    | 106 +++++++
 .../admin/src/components/BasePagination.vue   |  79 ++++++
 .../src/components/BaseRichTextInput.vue      |  45 +++
 .../admin/src/components/BaseTagsInput.vue    |  31 ++
 .../admin/src/components/HomeBestSellers.vue  |  93 ++++--
 .../admin/src/components/HomeRecentOrders.vue |  49 +++-
 .../components/ProductCreateFormOptions.vue   | 128 +++++++++
 .../components/ProductCreateFormStatus.vue    |  38 +++
 .../components/ProductCreateFormVariants.vue  | 147 ++++++++++
 .../ProductCreateOptionsDropdownField.vue     |  85 ++++++
 .../components/ProductCreateOrganization.vue  |  34 +++
 .../src/components/ProductOptionForm.vue      |  49 ++++
 .../src/components/ProductsCreateForm.vue     |   0
 .../src/components/ProductsFilterDrawer.vue   |  57 ++++
 .../admin/src/components/ProductsList.vue     |  90 ++++++
 .../src/components/ProductsListTable.vue      |  74 +++++
 .../admin/src/components/SalesSummary.vue     |  63 ++++-
 .../admin/src/components/SalesTodayCard.vue   |  26 +-
 .../admin/src/components/TheNavBar.vue        |   8 +-
 .../admin/src/composables/useFilters.js       |  56 ++++
 .../admin/src/composables/useNavdrawer.js     |   9 +-
 .../admin/src/composables/useProducts.js      |  60 ++++
 apps/frontend/admin/src/css/apply/_link.sass  |   4 +
 .../admin/src/layouts/WithSideBar.vue         |  10 +-
 apps/frontend/admin/src/main.js               |  21 +-
 .../frontend/admin/src/plugins/fontAwesome.js |  10 +
 apps/frontend/admin/src/router/index.js       |  23 ++
 apps/frontend/admin/src/views/Products.vue    |  15 +
 apps/frontend/admin/src/views/ProductsAll.vue |  33 +++
 .../admin/src/views/ProductsCreate.vue        | 126 +++++++++
 .../frontend/admin/src/views/ProductsEdit.vue |  42 +++
 apps/frontend/admin/tailwind.config.js        |  12 +-
 .../src/store/modules/filters/index.js        | 267 +++++++++---------
 package.json                                  |   1 +
 packages/auth/.eslintrc.js                    |   1 -
 packages/auth/index.js                        |  31 --
 packages/auth/package.json                    |  10 -
 packages/config/appolo-preset.js              |  11 +
 packages/config/eslint-preset.js              |  53 ++--
 packages/graphql-client/.eslintrc.js          |   1 +
 packages/graphql-client/.prettierrc.js        |   1 +
 packages/graphql-client/apollo.config.js      |   1 +
 packages/graphql-client/index.js              |   0
 .../mutations/address.js                      |   0
 .../mutations/auth.js                         |   0
 .../mutations/cart.js                         |   0
 .../mutations/filter.js                       |   0
 .../mutations/order.js                        |   0
 .../mutations/wishlist.js                     |   0
 packages/graphql-client/package.json          |  13 +
 .../queries/address.js                        |   0
 .../queries/auth.js                           |   0
 .../queries/cart.js                           |   0
 .../queries/checkout.js                       |   0
 .../queries/filter.js                         |   0
 .../queries/homePage.js                       |   0
 .../queries/order.js                          |   0
 .../queries/productQueries.js                 |   0
 .../queries/queries.js                        |   0
 .../queries/search.js                         |   0
 .../queries/wishlist.js                       |   0
 .../schema.graphql                            |   0
 packages/graphql-config/.eslintrc.js          |   1 -
 packages/graphql-config/index.js              |  87 ------
 packages/graphql-config/package.json          |  18 --
 yarn.lock                                     | 170 ++++++++++-
 83 files changed, 2660 insertions(+), 578 deletions(-)
 create mode 100644 apps/frontend/admin/apollo.config.js
 create mode 100644 apps/frontend/admin/src/apolloClient.js
 create mode 100644 apps/frontend/admin/src/components/AppCard.vue
 create mode 100644 apps/frontend/admin/src/components/BaseButton.vue
 create mode 100644 apps/frontend/admin/src/components/BaseCardBody.vue
 create mode 100644 apps/frontend/admin/src/components/BaseCardFooter.vue
 create mode 100644 apps/frontend/admin/src/components/BaseCardHeading.vue
 create mode 100644 apps/frontend/admin/src/components/BaseExpandableItem.vue
 create mode 100644 apps/frontend/admin/src/components/BaseInput.vue
 create mode 100644 apps/frontend/admin/src/components/BaseListItem.vue
 create mode 100644 apps/frontend/admin/src/components/BaseListItemGroup.vue
 create mode 100644 apps/frontend/admin/src/components/BaseMultiselectField.vue
 create mode 100644 apps/frontend/admin/src/components/BaseNavDrawer.vue
 create mode 100644 apps/frontend/admin/src/components/BasePagination.vue
 create mode 100644 apps/frontend/admin/src/components/BaseRichTextInput.vue
 create mode 100644 apps/frontend/admin/src/components/BaseTagsInput.vue
 create mode 100644 apps/frontend/admin/src/components/ProductCreateFormOptions.vue
 create mode 100644 apps/frontend/admin/src/components/ProductCreateFormStatus.vue
 create mode 100644 apps/frontend/admin/src/components/ProductCreateFormVariants.vue
 create mode 100644 apps/frontend/admin/src/components/ProductCreateOptionsDropdownField.vue
 create mode 100644 apps/frontend/admin/src/components/ProductCreateOrganization.vue
 create mode 100644 apps/frontend/admin/src/components/ProductOptionForm.vue
 create mode 100644 apps/frontend/admin/src/components/ProductsCreateForm.vue
 create mode 100644 apps/frontend/admin/src/components/ProductsFilterDrawer.vue
 create mode 100644 apps/frontend/admin/src/components/ProductsList.vue
 create mode 100644 apps/frontend/admin/src/components/ProductsListTable.vue
 create mode 100644 apps/frontend/admin/src/composables/useFilters.js
 create mode 100644 apps/frontend/admin/src/composables/useProducts.js
 create mode 100644 apps/frontend/admin/src/views/Products.vue
 create mode 100644 apps/frontend/admin/src/views/ProductsAll.vue
 create mode 100644 apps/frontend/admin/src/views/ProductsCreate.vue
 create mode 100644 apps/frontend/admin/src/views/ProductsEdit.vue
 delete mode 100644 packages/auth/.eslintrc.js
 delete mode 100644 packages/auth/index.js
 delete mode 100644 packages/auth/package.json
 create mode 100644 packages/config/appolo-preset.js
 create mode 100644 packages/graphql-client/.eslintrc.js
 create mode 100644 packages/graphql-client/.prettierrc.js
 create mode 100644 packages/graphql-client/apollo.config.js
 create mode 100644 packages/graphql-client/index.js
 rename packages/{graphql-config => graphql-client}/mutations/address.js (100%)
 rename packages/{graphql-config => graphql-client}/mutations/auth.js (100%)
 rename packages/{graphql-config => graphql-client}/mutations/cart.js (100%)
 rename packages/{graphql-config => graphql-client}/mutations/filter.js (100%)
 rename packages/{graphql-config => graphql-client}/mutations/order.js (100%)
 rename packages/{graphql-config => graphql-client}/mutations/wishlist.js (100%)
 create mode 100644 packages/graphql-client/package.json
 rename packages/{graphql-config => graphql-client}/queries/address.js (100%)
 rename packages/{graphql-config => graphql-client}/queries/auth.js (100%)
 rename packages/{graphql-config => graphql-client}/queries/cart.js (100%)
 rename packages/{graphql-config => graphql-client}/queries/checkout.js (100%)
 rename packages/{graphql-config => graphql-client}/queries/filter.js (100%)
 rename packages/{graphql-config => graphql-client}/queries/homePage.js (100%)
 rename packages/{graphql-config => graphql-client}/queries/order.js (100%)
 rename packages/{graphql-config => graphql-client}/queries/productQueries.js (100%)
 rename packages/{graphql-config => graphql-client}/queries/queries.js (100%)
 rename packages/{graphql-config => graphql-client}/queries/search.js (100%)
 rename packages/{graphql-config => graphql-client}/queries/wishlist.js (100%)
 rename packages/{graphql-config => graphql-client}/schema.graphql (100%)
 delete mode 100644 packages/graphql-config/.eslintrc.js
 delete mode 100644 packages/graphql-config/index.js
 delete mode 100644 packages/graphql-config/package.json

diff --git a/README.md b/README.md
index 5a015c1..6fb218a 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Turborepo starter
 
-This is an official Yarn v1 starter turborepo.
+This is an official Mono repo for the Zivero Ecommerce Engine
 
 ## What's inside?
 
@@ -8,7 +8,7 @@ This turborepo uses [Yarn](https://classic.yarnpkg.com/lang/en/) as a package ma
 
 ### Apps and Packages
 
-- `docs`: a [Next.js](https://nextjs.org) app
+- `backend`: a Django app
 - `web`: another [Next.js](https://nextjs.org) app
 - `ui`: a stub React component library shared by both `web` and `docs` applications
 - `config`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
diff --git a/apps/backend/shop/models.py b/apps/backend/shop/models.py
index 6f4275b..a7c457d 100644
--- a/apps/backend/shop/models.py
+++ b/apps/backend/shop/models.py
@@ -1,34 +1,37 @@
-from typing import List
 # from typing_extensions import Required
 import uuid
 from bson.objectid import ObjectId
 
-from django.db import models
+
 from mongoengine import *
 from mongoengine.document import Document
 from mongoengine.fields import ReferenceField, StringField
 
+
 class Brand(Document):
     name = StringField(required=True)
     logo = URLField()
 
+
 class Category(Document):
     name = StringField(max_length=100, required=True, unique=True)
     image = StringField(max_length=200, required=True)
     description = StringField(max_length=500)
     gender_choices = (
-        ('WOMEN', 'female'),
-        ('MEN', 'men'),
-        ('BOYS', 'boys'),
-        ('GIRLS', 'girls'),
-        ('KIDS', 'kids'),
-        ('NEUTRAL','neutral')
-
+        ("WOMEN", "female"),
+        ("MEN", "men"),
+        ("BOYS", "boys"),
+        ("GIRLS", "girls"),
+        ("KIDS", "kids"),
+        ("NEUTRAL", "neutral"),
     )
-    genders = ListField(StringField(choices=gender_choices)) #genders a category can have
-    #will help in updating filters if a category is selected to get the revent gender associated to it 
+    genders = ListField(
+        StringField(choices=gender_choices)
+    )  # genders a category can have
+    # will help in updating filters if a category is selected to get the revent gender associated to it
     brands = ListField(ReferenceField(Brand))
-    #will help in updating filters if a category is selected to get the relevent brands  associated to it 
+    # will help in updating filters if a category is selected to get the relevent brands  associated to it
+
 
 class SubCategory(Document):
     Category = ReferenceField(Category)
@@ -49,24 +52,15 @@ class Variation(EmbeddedDocument):
     price = IntField(required=True)
     discount_percent = IntField(required=False, default=0)
     images = ListField(URLField())
-    meta = {'strict': False}
+    meta = {"strict": False}
 
 
 class Product(Document):
-    
+
     meta = {
-        'collection': 'products',
-        'strict': False,
+        "collection": "products",
+        "strict": False,
     }
-    # meta = {
-    #     "strict":False,
-    #     'collection': 'products',
-    #     'indexes': [
-    #     {'fields': ['$name', "$brand","$category","$description"],
-    #      'default_language': 'english',
-    #      'weights': {'name': 10, 'description': 2}
-    #     }
-    # ]}
 
     name = StringField(max_length=100, required=False)
     brand = ReferenceField(Brand)
@@ -78,17 +72,25 @@ class Product(Document):
     images = ListField(URLField(required=False))
     available = BooleanField()
 
-    gender_choices = (
-        ('WOMEN', 'female'),
-        ('MEN', 'men'),
-        ('BOYS', 'boys'),
-        ('GIRLS', 'girls'),
-        ('KIDS', 'kids'),
-        ('NEUTRAL','neutral')
+    status_choices = (
+        ("archived", "archived"),
+        ("draft", "draft"),
+        ("active", "active"),
+    )
+
+    status = StringField(choices=status_choices, default="active")
 
+    gender_choices = (
+        ("WOMEN", "female"),
+        ("MEN", "men"),
+        ("BOYS", "boys"),
+        ("GIRLS", "girls"),
+        ("KIDS", "kids"),
+        ("NEUTRAL", "neutral"),
     )
-    gender =StringField(choices=gender_choices) 
-    #gender here will help with filtering the product from like category tshir but gender BOY
+    gender = StringField(choices=gender_choices)
+    # gender here will help with filtering the product from like category tshir but gender BOY
+
     @property
     def available_variants(self):
         variants = {}
@@ -107,41 +109,39 @@ def filterby(self, data):  # usually the input from graphene schema i.e FilterIn
         print(data)
 
         if data.categories:
-            filter['category__in'] = data.categories
-        
-        if data.gender :
-            filter['gender']=data.gender 
+            filter["category__in"] = data.categories
+
+        if data.gender:
+            filter["gender"] = data.gender
 
         if data.brands:
-           
-            filter["brand__in"]=data.brands
 
+            filter["brand__in"] = data.brands
 
         if data.variant_filters:
             variants = []
             for filter_ in data.variant_filters:
                 v_filter = {
-                    'name__in': filter_["name"],
-                    'value__in': filter_["values"],
+                    "name__in": filter_["name"],
+                    "value__in": filter_["values"],
                 }
                 variants_ = [v.id for v in Variant.objects(**v_filter)]
                 variants.extend(variants_)
-           
-            key = 'variations__variant__in'
+
+            key = "variations__variant__in"
             filter[key] = variants
 
         if data.tags:
-            filter['tags'] = data.tags
-        
-        if data.sort_by :
+            filter["tags"] = data.tags
+
+        if data.sort_by:
             return Product.objects(**filter).order_by(data.sort_by)
-            
-        return Product.objects(**filter).order_by(data.sort_by)
 
+        return Product.objects(**filter).order_by(data.sort_by)
 
-    def get_variation(self,id):
-        print("id",id)
-        for variation in self.variations :
+    def get_variation(self, id):
+        print("id", id)
+        for variation in self.variations:
             # print("variation",variation._id,id==variation._id)
             if str(variation._id) == str(id):
                 return variation
@@ -149,105 +149,69 @@ def get_variation(self,id):
             raise DoesNotExist("Varaition query doesnt exist")
 
     @classmethod
-    def search_autocomplete(cls,query):
+    def search_autocomplete(cls, query):
         pipeline = [
             {
                 "$search": {
-                    "compound":{
-                        "should":[
-                            {
-                                "autocomplete": {
-                                    "query": query,
-                                    "path": "name"
-                                 }
-                            },
-                            {
-                                "autocomplete": {
-                                    "query": query,
-                                    "path": "brand.name"
-                                 }
-                            },
-                            {
-                                "autocomplete": {
-                                    "query": query,
-                                    "path": "category.name"
-                                 }
-                            }
+                    "compound": {
+                        "should": [
+                            {"autocomplete": {"query": query, "path": "name"}},
+                            {"autocomplete": {"query": query, "path": "brand.name"}},
+                            {"autocomplete": {"query": query, "path": "category.name"}},
                         ]
                     },
-                   
                 }
             },
-
             {"$limit": 5},
-
             {
                 "$project": {
-                    "id":   1,
+                    "id": 1,
                     "name": 1,
                     # "brand.name":1,
                     # "category.name":1,
                     "variations": {
-                        "$first":"$variations",
-                       
+                        "$first": "$variations",
                     },
-                    
-
                 }
             },
         ]
 
-        cursor =cls.objects.aggregate(pipeline)
+        cursor = cls.objects.aggregate(pipeline)
         return cursor
 
     @classmethod
-    def search(cls,query,limit=30,pageNo=1):
-        
-        skip=limit*(pageNo-1)
-        
+    def search(cls, query, limit=30, pageNo=1):
+
+        skip = limit * (pageNo - 1)
+
         pipeline = [
             {
-                "$search": {
-                   'text': {
-                        'query': query,
-                        'path': {
-                            'wildcard': '*'
-                        }
-                    }
-                },
-              
+                "$search": {"text": {"query": query, "path": {"wildcard": "*"}}},
             },
-            
             {
                 "$facet": {
-
-                    "metadata": [ { "$count": "total" }, { "$addFields": { "page": pageNo } } ],
-                    "results":[ 
-                        {"$skip":skip},
-                        {"$limit": limit}, 
+                    "metadata": [{"$count": "total"}, {"$addFields": {"page": pageNo}}],
+                    "results": [
+                        {"$skip": skip},
+                        {"$limit": limit},
                         {
                             "$project": {
-                                
-                                "id":   1,
+                                "id": 1,
                                 "name": 1,
-                                "brand":1,
-                                "category.name":1,
+                                "brand": 1,
+                                "category.name": 1,
                                 "variations": {
-                                    "price":1,
-                                    "discount_percent":1,
-                                    "images":1,
-                                },         
+                                    "price": 1,
+                                    "discount_percent": 1,
+                                    "images": 1,
+                                },
                             }
                         },
-                    ]  
+                    ],
                 }
             },
-
-           
-            
         ]
 
-        cursor =cls.objects.aggregate(pipeline)
-        
-        return cursor
+        cursor = cls.objects.aggregate(pipeline)
 
+        return cursor
diff --git a/apps/backend/shop/schema.py b/apps/backend/shop/schema.py
index d4e657a..8cc8d09 100644
--- a/apps/backend/shop/schema.py
+++ b/apps/backend/shop/schema.py
@@ -1,22 +1,9 @@
-import json
-import os
 import graphene
-import requests
-from core.caching import graphql_cache
-from graphene_django.types import DjangoObjectType, ObjectType
-from graphene_mongo import MongoengineObjectType
+from graphene_django.types import ObjectType
 
-from .models import Brand, Product, Category, Variation, Variant, SubCategory
+from .models import Product, Category
 from filters.schema import FilterInput
 from .types import *
-'''
-class ProductType(DjangoObjectType):
-    class Meta:
-        model = Product
-    '''
-
-
-
 
 
 class Query(ObjectType):
@@ -24,61 +11,88 @@ class Query(ObjectType):
     Products = graphene.Field(
         ProductsType,
         filter=FilterInput(),
-        pageNb=graphene.Int(default_value=1,
-                            required=False)
+        pageNb=graphene.Int(default_value=1, required=False),
     )
-    product = graphene.Field(ProductType,
-                             id=graphene.String())
+    product = graphene.Field(ProductType, id=graphene.String())
     categories = graphene.List(CategoryType)
-   
+
     def resolve_product(self, info, id, **kwargs):
         product = Product.objects(id=id).first()
-        #print(product)
+        # print(product)
         return product
 
-    
     def resolve_Products(self, info, filter={}, pageNb=1, **kwargs):
-        #print("fetching products")
-        #print("pagenb :- ",pageNb)
+        # print("fetching products")
+        # print("pagenb :- ",pageNb)
         limit = 30
-        offset = (pageNb-1)*limit
+        offset = (pageNb - 1) * limit
         if filter:
             products_set = Product().filterby(filter)
-            Products=products_set[offset:(offset+limit)]
-            #print(products_set.count())
+            Products = products_set[offset : (offset + limit)]
+            # print(products_set.count())
         else:
             products_set = Product.objects()
-            Products=products_set[offset:(offset+limit)]
-        
-        response=ProductsType(products=Products,total_products=products_set.count(),page_no=pageNb,total_pages=products_set.count()/limit+1)
+            Products = products_set[offset : (offset + limit)]
+
+        response = ProductsType(
+            products=Products,
+            total_products=products_set.count(),
+            page_no=pageNb,
+            total_pages=products_set.count() / limit + 1,
+        )
         return response
 
     def resolve_categories(self, info, **kwargs):
         categories = Category.objects.all()
-        #print(categories)
+        # print(categories)
         return categories
 
 
+"""
+
+
+class Variant(Document):
+    name = StringField()
+    value = StringField(unique=True)
+
+
+class Variation(EmbeddedDocument):
+    _id = ObjectIdField(required=True, default=lambda: ObjectId())
+    variant = ListField(ReferenceField(Variant))
+    sku = UUIDField(default=lambda: (uuid.uuid4()))
+    quantity = IntField()
+    available = BooleanField(default=True)
+    price = IntField(required=True)
+    discount_percent = IntField(required=False, default=0)
+    images = ListField(URLField())
+    meta = {"strict": False}
+
+"""
+
+
 class VariationInput(graphene.InputObjectType):
-    type = graphene.String()
-    type_name = graphene.String()
-    type_variation = graphene.String()
+
     quantity = graphene.Int()
     available = graphene.Boolean()
     price = graphene.Int()
     discount_percent = graphene.Int()
+    images = graphene.List(graphene.String)
+    sku  = graphene.UUID()
+    variant = graphene.List(graphene.ID)
 
 
 class ProductInput(graphene.InputObjectType):
 
     name = graphene.String()
+    gender = graphene.String()
     brand = graphene.String()
-    Category = graphene.String()
-    Discription = graphene.String()
-    Variations = graphene.List(VariationInput)
+    category = graphene.String()
+    desscription = graphene.String()
+    variations = graphene.List(VariationInput)
     tags = graphene.List(graphene.String)
     images = graphene.List(graphene.String)
     available = graphene.Boolean()
+    status = graphene.String()
 
 
 class createProduct(graphene.Mutation):
@@ -90,9 +104,7 @@ class Arguments:
     def mutate(root, info, pd):
 
         product = Product(**pd)
-        #print(pd)
-
-        
+        # print(pd)
 
         product.save()
 
diff --git a/apps/frontend/admin/apollo.config.js b/apps/frontend/admin/apollo.config.js
new file mode 100644
index 0000000..88a7403
--- /dev/null
+++ b/apps/frontend/admin/apollo.config.js
@@ -0,0 +1 @@
+module.exports = require('config/appolo-preset')
diff --git a/apps/frontend/admin/package.json b/apps/frontend/admin/package.json
index deda4e6..5d19a59 100644
--- a/apps/frontend/admin/package.json
+++ b/apps/frontend/admin/package.json
@@ -8,20 +8,27 @@
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {
+    "@apollo/client": "^3.5.8",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "^3.0.0-5",
-    "graphql-config": "*",
+    "@headlessui/vue": "^1.4.3",
+    "@tinymce/tinymce-vue": "^4",
+    "@vue/apollo-composable": "^4.0.0-alpha.16",
+    "chart.js": "^3.0.0",
+    "graphql": "^16.3.0",
+    "graphql-tag": "^2.12.6",
     "router": "^2.0.0-beta.1",
     "utils": "*",
+    "graphql-client": "*",
+   
     "vue": "^3.2.25",
-    
     "vue-chart-3": "^3.0.9",
-    "chart.js":"^3.0.0",
     "vue-router": "4",
     "vuex": "4"
   },
-  "devDependencies": {
+  "devDependencies": {  
+    "@tailwindcss/forms": "^0.4.0",
     "@vitejs/plugin-vue": "^2.0.0",
     "autoprefixer": "^10.4.2",
     "config": "*",
diff --git a/apps/frontend/admin/src/apolloClient.js b/apps/frontend/admin/src/apolloClient.js
new file mode 100644
index 0000000..7c0951f
--- /dev/null
+++ b/apps/frontend/admin/src/apolloClient.js
@@ -0,0 +1,89 @@
+/* eslint-disable object-curly-newline */
+import { ApolloLink, createHttpLink, ApolloClient, fromPromise, InMemoryCache, concat } from '@apollo/client/core'
+import { onError } from '@apollo/client/link/error'
+
+// import store from './store'
+import router from './router'
+
+const refreshTokenFlow = async () => {
+  console.log('refreshing ')
+}
+
+const authMiddleware = new ApolloLink((operation, forward) => {
+  // add the authorization to the headers
+  //   console.log('auth middleware')
+  //   console.log(store.state.user)
+  //   const token = store.state.user.auth.token
+  //   console.log('JWT', token)
+  //   operation.setContext({
+  //     headers: {
+  //       Authorization: token ? `JWT ${token}` : null,
+  //     },
+  //   })
+
+  console.log('auth middleware')
+
+  return forward(operation)
+})
+
+const errorLink = onError(({ graphQLErrors, operation, forward }) => {
+  console.log('hey eror in request gql')
+  if (graphQLErrors) {
+    console.log('gql-errors', graphQLErrors)
+
+    graphQLErrors.forEach(({ message, extensions }) => {
+      console.log(message, extensions)
+
+      switch (message) {
+        case 'You do not have permission to perform this action':
+        case 'You are not registerd as customer':
+        case 'Signature has expired':
+          console.log('refreshing ')
+
+          return fromPromise(
+            refreshTokenFlow().catch(error => {
+              // Handle token refresh errors e.g clear stored tokens, redirect to login
+              console.log('error while refresdhing', error)
+              router.push('/login')
+            }),
+          )
+            .filter(value => Boolean(value))
+            .flatMap(accessToken => {
+              const oldHeaders = operation.getContext().headers
+
+              // modify the operation context with a new token
+              operation.setContext({
+                headers: {
+                  ...oldHeaders,
+                  Authorization: `JWT ${accessToken}`,
+                },
+              })
+
+              // retry the request, returning the new observable
+              console.log('forwarding')
+
+              return forward(operation)
+            })
+
+        default:
+          return null
+      }
+    })
+  }
+})
+
+const link = createHttpLink({
+  uri: 'http://localhost:8000/graphql/',
+  fetch,
+  credentials: 'include',
+  onError(err) {
+    console.log(err)
+  },
+})
+
+export default new ApolloClient({
+  link: errorLink.concat(concat(authMiddleware, link)),
+  cache: new InMemoryCache({
+    addTypename: true,
+  }),
+})
diff --git a/apps/frontend/admin/src/components/AppCard.vue b/apps/frontend/admin/src/components/AppCard.vue
new file mode 100644
index 0000000..0a6855e
--- /dev/null
+++ b/apps/frontend/admin/src/components/AppCard.vue
@@ -0,0 +1,64 @@
+<template>
+  <Component
+    :is="$props.tag"
+    class="bg-white"
+    :class="[
+      $props.outlined ? 'border-2' : 'border-none',
+      `shadow-${$props.elevation}`,
+
+      $props.tile ? 'rounded-none' : `rounded-${$props.rounded}`,
+    ]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Component>
+</template>
+
+<script>
+import BaseCardHeadingVue from './BaseCardHeading.vue'
+import BaseCardBodyVue from './BaseCardBody.vue'
+
+export { default as VCardFooter } from './BaseCardFooter.vue'
+export { BaseCardBodyVue as VCardBody, BaseCardHeadingVue as VCardHeading }
+
+export const VCard = {
+  name: 'VCard',
+  inheritAttrs: false,
+  props: {
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    outlined: {
+      type: Boolean,
+      default: false,
+    },
+    rounded: {
+      type: String,
+      default: 'md',
+      validator(value) {
+        const shadows = ['rounded-none', 'rounded-sm', 'rounded-md', 'rounded-lg', 'rounded-xl']
+
+        return shadows.includes(`rounded-${value}`)
+      },
+    },
+
+    elevation: {
+      type: String,
+      default: 'none',
+      validator(value) {
+        const shadows = ['shadow-none', 'shadow-sm', 'shadow-md', 'shadow-lg', 'shadow-xl']
+
+        return shadows.includes(`shadow-${value}`)
+      },
+    },
+
+    tile: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+
+export default VCard
+</script>
diff --git a/apps/frontend/admin/src/components/AppSideBar.vue b/apps/frontend/admin/src/components/AppSideBar.vue
index 6202012..224d7f8 100644
--- a/apps/frontend/admin/src/components/AppSideBar.vue
+++ b/apps/frontend/admin/src/components/AppSideBar.vue
@@ -5,21 +5,25 @@ import useNavdrawer from '../composables/useNavdrawer'
 const menuItems = {
   home: {
     icon: 'home',
-    link: '/',
+    to: { name: 'dashboard' },
   },
   products: {
     icon: 'tag',
+    to: { name: 'products-all' },
     submenu: {
       'All products': {
         icon: null,
+        to: { name: 'products-all' },
       },
     },
   },
   orders: {
+    to: { name: 'products' },
     icon: 'box',
     submenu: true,
   },
   customers: {
+    to: { name: 'products' },
     icon: 'user',
     submenu: true,
   },
@@ -34,23 +38,42 @@ function clickMenuLink(key) {
 </script>
 
 <template>
-  <transition name="slide-fade" :duration="1000">
+  <transition
+    name="fade"
+    :duration="1000"
+  >
     <nav
-      class="drawer fixed top-0 bottom-0 w-2/3 bg-gray-100 h-auto z-50 md:top-16 md:my-8 md:z-0 p-5 md:w-60"
       v-if="isDrawerOpen"
+      class="drawer fixed top-0 bottom-0 w-2/3 bg-white h-auto z-50 md:pt-16 md:z-0 p-5 md:w-60 border-r-2 shadow-sm md:shadow-none"
     >
       <div class="text-right px-4 text-xl md:hidden w-full">
-        <font-awesome-icon icon="times" @click="toggleDrawer"></font-awesome-icon>
+        <font-awesome-icon
+          icon="times"
+          @click="toggleDrawer"
+        ></font-awesome-icon>
       </div>
 
-      <div v-for="(item, key) in menuItems" :key="key">
-        <a href="#" class="nav-link" :class="{ 'bg-blue-100 text-green-900': active == key }">
+      <div
+        v-for="(item, key) in menuItems"
+        :key="key"
+      >
+        <router-link
+          :to="item.to"
+          :class="active == key ? 'nav-link-active' : 'nav-link'"
+        >
           <font-awesome-icon :icon="item.icon" />
-          <span class="mx-4 text-lg font-bold" @click="clickMenuLink(key)"> {{ key }} </span>
-        </a>
+          <span
+            class="mx-4 text-lg font-bold"
+            @click="clickMenuLink(key)"
+          > {{ key }} </span>
+        </router-link>
 
         <div v-show="active == key">
-          <a v-for="(submenu, key_) in item.submenu" :key="key_" class="nav-link">
+          <a
+            v-for="(submenu, key_) in item.submenu"
+            :key="key_"
+            class="nav-link"
+          >
             <font-awesome-icon :icon="submenu.icon" />
             <span class="pl-8 text-lg font-normal"> {{ key_ }} </span>
             <span class="flex-grow text-right"> </span>
@@ -62,17 +85,17 @@ function clickMenuLink(key) {
 </template>
 
 <style>
-/* Enter and leave animations can use different */
-/* durations and timing functions.              */
-.slide-fade-enter-active {
-  transition: all 0.3s ease;
+.fade-enter-active,
+.fade-leave-active {
+  transition: transform 0.3s ease-in;
 }
-.slide-fade-leave-active {
-  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
-}
-.slide-fade-enter, .slide-fade-leave-to
-/* .slide-fade-leave-active below version 2.1.8 */ {
-  transform: translateX(10px);
-  opacity: 0;
+
+.fade-enter-from,
+.fade-leave-to {
+  transform: translateX(-100%);
 }
+
+/* .fade-enter-to {
+  transform: translateX(100%);
+} */
 </style>
diff --git a/apps/frontend/admin/src/components/BaseButton.vue b/apps/frontend/admin/src/components/BaseButton.vue
new file mode 100644
index 0000000..e4a0ecf
--- /dev/null
+++ b/apps/frontend/admin/src/components/BaseButton.vue
@@ -0,0 +1,7 @@
+<template>
+  <button
+    class="text-center capitalize bg-teal-200 block py-2 px-5 rounded text-teal-600 transition-all ease-in-out duration-300 hover:bg-teal-300 hover:text-teal-800"
+  >
+    <slot> </slot>
+  </button>
+</template>
diff --git a/apps/frontend/admin/src/components/BaseCardBody.vue b/apps/frontend/admin/src/components/BaseCardBody.vue
new file mode 100644
index 0000000..a4b4c41
--- /dev/null
+++ b/apps/frontend/admin/src/components/BaseCardBody.vue
@@ -0,0 +1,36 @@
+<template>
+  <Component
+    :is="$props.tag"
+    class="p-3 space-y-3 overflow-hidden break-words"
+    :class="[$props.outlinedBottom ? 'border-b' : 'border-b-none', `shadow-${$props.elevation}`]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Component>
+</template>
+
+<script>
+export default {
+  inheritAttrs: false,
+  props: {
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    outlinedBottom: {
+      type: Boolean,
+      default: false,
+    },
+
+    elevation: {
+      type: String,
+      default: 'none',
+      validator(value) {
+        const shadows = ['shadow-none', 'shadow-sm', 'shadow-md', 'shadow-lg', 'shadow-xl']
+
+        return shadows.includes(`shadow-${value}`)
+      },
+    },
+  },
+}
+</script>
diff --git a/apps/frontend/admin/src/components/BaseCardFooter.vue b/apps/frontend/admin/src/components/BaseCardFooter.vue
new file mode 100644
index 0000000..171741a
--- /dev/null
+++ b/apps/frontend/admin/src/components/BaseCardFooter.vue
@@ -0,0 +1,36 @@
+<template>
+  <Component
+    :is="$props.tag"
+    class="p-3 space-y-3 overflow-hidden break-words"
+    :class="[$props.outlinedTop ? 'border-t' : 'border-t-none', `shadow-${$props.elevation}`]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Component>
+</template>
+
+<script>
+export default {
+  inheritAttrs: false,
+  props: {
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    outlinedTop: {
+      type: Boolean,
+      default: true,
+    },
+
+    elevation: {
+      type: String,
+      default: 'none',
+      validator(value) {
+        const shadows = ['shadow-none', 'shadow-sm', 'shadow-md', 'shadow-lg', 'shadow-xl']
+
+        return shadows.includes('shadow-value')
+      },
+    },
+  },
+}
+</script>
diff --git a/apps/frontend/admin/src/components/BaseCardHeading.vue b/apps/frontend/admin/src/components/BaseCardHeading.vue
new file mode 100644
index 0000000..fa7b3d0
--- /dev/null
+++ b/apps/frontend/admin/src/components/BaseCardHeading.vue
@@ -0,0 +1,37 @@
+<template>
+  <Component
+    :is="$props.tag"
+    id="input"
+    class="p-3 font-bold text-black text-lg"
+    :class="[$props.outlinedBottom ? 'border-b' : 'border-b-none', `shadow-${$props.elevation}`]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Component>
+</template>
+
+<script>
+export default {
+  inheritAttrs: false,
+  props: {
+    tag: {
+      type: String,
+      default: 'h1',
+    },
+    outlinedBottom: {
+      type: Boolean,
+      default: true,
+    },
+
+    elevation: {
+      type: String,
+      default: 'none',
+      validator(value) {
+        const shadows = ['shadow-none', 'shadow-sm', 'shadow-md', 'shadow-lg', 'shadow-xl']
+
+        return shadows.includes(`shadow-${value}`)
+      },
+    },
+  },
+}
+</script>
diff --git a/apps/frontend/admin/src/components/BaseExpandableItem.vue b/apps/frontend/admin/src/components/BaseExpandableItem.vue
new file mode 100644
index 0000000..60dd264
--- /dev/null
+++ b/apps/frontend/admin/src/components/BaseExpandableItem.vue
@@ -0,0 +1,19 @@
+<script setup>
+import { defineProps, ref } from 'vue'
+const props = defineProps(['title'])
+const active = ref(false)
+</script>
+<template>
+  <li>
+    <div
+      class="text-lg my-2 flex items-center justify-between w-full px-5 py-2 rounded-md hover:bg-slate-300"
+      @click="active = !active"
+    >
+      <p class="text-lg text-gray-700 font-semibold">{{ $props.title }}</p>
+      <font-awesome-icon icon="chevron-down" />
+    </div>
+    <div v-show="active" class="space-y-2 px-5">
+      <slot />
+    </div>
+  </li>
+</template>
diff --git a/apps/frontend/admin/src/components/BaseInput.vue b/apps/frontend/admin/src/components/BaseInput.vue
new file mode 100644
index 0000000..d3e0a6f
--- /dev/null
+++ b/apps/frontend/admin/src/components/BaseInput.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="space-y-2">
+    <label v-if="$props.label" :for="$attrs.id ?? 'input'">
+      {{ $props.label }}
+    </label>
+    <input
+      v-model="model"
+      class="p-3 bg-white focus:outline-blue-400 w-full"
+      :class="[
+        $props.outlined ? 'border border-gray-400' : 'border-none',
+        `shadow-${$props.elevation}`,
+
+        $props.tile ? 'rounded-none' : `rounded-${$props.rounded}`,
+      ]"
+      v-bind="$attrs"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      default: null,
+    },
+
+    outlined: {
+      type: Boolean,
+      default: true,
+    },
+    rounded: {
+      type: String,
+      default: 'md',
+      validator(value) {
+        const shadows = ['rounded-none', 'rounded-sm', 'rounded-md', 'rounded-lg', 'rounded-xl']
+
+        return shadows.includes(`rounded-${value}`)
+      },
+    },
+
+    elevation: {
+      type: String,
+      default: 'none',
+      validator(value) {
+        const shadows = ['shadow-none', 'shadow-sm', 'shadow-md', 'shadow-lg', 'shadow-xl']
+
+        return shadows.includes(`shadow-${value}`)
+      },
+    },
+
+    tile: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:modelValue'],
+
+  computed: {
+    model: {
+      get() {
+        return this.modelValue
+      },
+      set(value) {
+        this.$emit('update:modelValue', value)
+      },
+    },
+  },
+}
+</script>
diff --git a/apps/frontend/admin/src/components/BaseListItem.vue b/apps/frontend/admin/src/components/BaseListItem.vue
new file mode 100644
index 0000000..bc65b40
--- /dev/null
+++ b/apps/frontend/admin/src/components/BaseListItem.vue
@@ -0,0 +1,41 @@
+<script setup>
+import { inject, computed, ref } from 'vue'
+
+const selectedValue = inject('selected', 'hello')
+const props = defineProps({
+  tag: {
+    type: String,
+    default: 'li',
+  },
+  value: {
+    type: String,
+    default: '',
+  },
+  prependIcon: {
+    type: String,
+    default: 'chevron',
+  },
+})
+
+const selectItem = () => {
+  console.log('emitting')
+  selectedValue.value = props.value
+}
+
+const selected = computed(() => {
+  if (selectedValue.value instanceof Array) {
+    return props.value in selectedValue.value
+  } else {
+    return selectedValue.value == props.value
+  }
+})
+
+const checkbox = ref(true)
+</script>
+
+<template>
+  <li class="flex justify-start items-center">
+    <input type="checkbox" :checked="selected" @input="selectItem" class="mr-5" />
+    <div><slot /></div>
+  </li>
+</template>
diff --git a/apps/frontend/admin/src/components/BaseListItemGroup.vue b/apps/frontend/admin/src/components/BaseListItemGroup.vue
new file mode 100644
index 0000000..40b207e
--- /dev/null
+++ b/apps/frontend/admin/src/components/BaseListItemGroup.vue
@@ -0,0 +1,71 @@
+<template>
+  <Component
+    :is="$props.tag"
+    class="space-y-3 overflow-hidden break-words"
+    :class="[$props.outlinedBottom ? 'border' : 'border-none', `shadow-${$props.elevation}`]"
+    v-bind="$attrs"
+  >
+    <base-expandable-item :title="title"> <slot /> </base-expandable-item>
+  </Component>
+</template>
+
+<script>
+import { computed, provide } from 'vue'
+import BaseExpandableItem from './BaseExpandableItem'
+export { default as BaseListItem } from './BaseListItem.vue'
+export const BaseList = {
+  inheritAttrs: false,
+  components: { BaseExpandableItem },
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    tag: {
+      type: String,
+      default: 'ul',
+    },
+    outlinedBottom: {
+      type: Boolean,
+      default: false,
+    },
+
+    elevation: {
+      type: String,
+      default: 'none',
+      validator(value) {
+        const shadows = ['shadow-none', 'shadow-sm', 'shadow-md', 'shadow-lg', 'shadow-xl']
+
+        return shadows.includes(`shadow-${value}`)
+      },
+    },
+    multiselect: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:modelValue'],
+  setup(props, context) {
+    const selected = computed({
+      get: () => props.modelValue,
+      set: value => {
+        console.log('set computed', value)
+        const newValue = props.multiselect ? [...props.modelValue, value] : value
+        context.emit('update:modelValue', newValue)
+      },
+    })
+
+    provide('selected', selected)
+
+    return {
+      selected,
+    }
+  },
+}
+
+export default BaseList
+</script>
diff --git a/apps/frontend/admin/src/components/BaseMultiselectField.vue b/apps/frontend/admin/src/components/BaseMultiselectField.vue
new file mode 100644
index 0000000..9243d2b
--- /dev/null
+++ b/apps/frontend/admin/src/components/BaseMultiselectField.vue
@@ -0,0 +1,103 @@
+<script setup>
+import { reactive, ref } from 'vue'
+
+const active = ref(false)
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: [],
+  },
+  options: {
+    type: Array,
+    default: [],
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const selectOption = option => {
+  if (props.modelValue.includes(option)) {
+    // modelValue.value = modelValue.value.filter(item => item !== option)
+    let filtered = props.modelValue.filter(item => item !== option)
+    emit('update:modelValue', filtered)
+  } else {
+    emit('update:modelValue', [...props.modelValue, option])
+  }
+}
+</script>
+
+<template>
+  <div class="w-full flex flex-col items-center h-auto h-max-64">
+    <div class="w-full">
+      <div class="flex flex-col items-center relative">
+        <div class="w-full">
+          <div class="my-2 p-1 flex border border-gray-200 bg-white rounded">
+            <div class="flex flex-auto items-center flex-wrap">
+              <div
+                v-for="selectedOption in modelValue"
+                class="flex justify-center items-center m-1 font-medium py-1 px-2 rounded-full text-teal-700 bg-teal-100 border border-teal-300"
+              >
+                <p class="text-xs font-normal leading-none max-w-full flex-initial mr-2">
+                  {{ selectedOption }}
+                </p>
+                <font-awesome-icon icon="times" @click="selectOption(selectedOption)"></font-awesome-icon>
+              </div>
+              <div class="flex-1" @click="active = !active">
+                <p class="text-gray-300 pl-2">Add Values</p>
+              </div>
+              <!-- <div class="flex-1">
+                <input
+                  placeholder=""
+                  class="bg-transparent p-1 px-2 appearance-none outline-none h-full w-full text-gray-800"
+                />
+              </div> -->
+            </div>
+            <div class="text-gray-300 w-8 py-1 pl-2 pr-1 flex items-center border-gray-200 svelte-1l8159u">
+              <button class="cursor-pointer w-6 h-6 text-gray-400 outline-none focus:outline-none">
+                <font-awesome-icon icon="sort" @click="active = !active"> </font-awesome-icon>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div
+          v-if="active"
+          class="shadow top-100 bg-white w-full lef-0 rounded max-h-select overflow-y-auto svelte-5uyqqj"
+        >
+          <div class="flex flex-col w-full">
+            <div
+              v-for="option of options"
+              :key="option"
+              class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100"
+            >
+              <div
+                @click="selectOption(option)"
+                class="flex w-full items-center p-2 pl-2 relative"
+                :class="{
+                  'border-l-8 border-blue-500': modelValue.includes(option),
+                }"
+              >
+                <div class="w-full items-center flex border-3">
+                  <div class="mx-2 leading-6">{{ option }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.top-100 {
+  top: 100%;
+}
+.bottom-100 {
+  bottom: 100%;
+}
+.max-h-select {
+  max-height: 300px;
+}
+</style>
diff --git a/apps/frontend/admin/src/components/BaseNavDrawer.vue b/apps/frontend/admin/src/components/BaseNavDrawer.vue
new file mode 100644
index 0000000..2403029
--- /dev/null
+++ b/apps/frontend/admin/src/components/BaseNavDrawer.vue
@@ -0,0 +1,106 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<template>
+  <TransitionRoot as="template" :show="open">
+    <Dialog as="div" class="fixed inset-0 overflow-hidden" @close="open = false">
+      <div class="absolute inset-0 overflow-hidden">
+        <TransitionChild
+          as="template"
+          enter="ease-in-out duration-500"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in-out duration-500"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <DialogOverlay class="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+        </TransitionChild>
+        <div class="fixed inset-y-0 right-0 pl-10 max-w-full flex">
+          <TransitionChild
+            as="template"
+            enter="transform transition-all ease-in-out duration-500 sm:duration-700"
+            enter-from="translate-x-full right-18"
+            enter-to="translate-x-0 right-0"
+            leave="transform transition ease-in-out duration-500 sm:duration-700"
+            leave-from="translate-x-0"
+            leave-to="translate-x-full"
+          >
+            <div class="relative w-screen max-w-md">
+              <TransitionChild
+                as="template"
+                enter="ease-in-out duration-500"
+                enter-from="opacity-0"
+                enter-to="opacity-100"
+                leave="ease-in-out duration-500"
+                leave-from="opacity-100"
+                leave-to="opacity-0"
+              >
+                <div class="absolute top-0 left-0 -ml-8 pt-4 pr-2 flex sm:-ml-10 sm:pr-4">
+                  <button
+                    type="button"
+                    class="rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
+                    @click="open = false"
+                  >
+                    <span class="sr-only">Close panel</span>
+                    <XIcon class="h-6 w-6" aria-hidden="true" />
+                  </button>
+                </div>
+              </TransitionChild>
+              <div class="h-full flex flex-col py-6 bg-white shadow-xl overflow-y-scroll">
+                <div class="px-4 sm:px-6">
+                  <DialogTitle class="text-lg font-medium text-gray-900"> Panel title </DialogTitle>
+                </div>
+                <div class="mt-6 relative flex-1 px-4 sm:px-6">
+                  <!-- Replace with your content -->
+                  <div class="absolute inset-0 px-4 sm:px-6">
+                    <div class="h-full">
+                      <slot />
+                    </div>
+                  </div>
+                  <!-- /End replace -->
+                </div>
+              </div>
+            </div>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+<script>
+import { ref } from 'vue'
+import { Dialog, DialogOverlay, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
+
+export default {
+  components: {
+    Dialog,
+    DialogOverlay,
+    DialogTitle,
+    TransitionChild,
+    TransitionRoot,
+  },
+  props: {
+    isOpen: {
+      type: Boolean,
+      default: true,
+    },
+    toggle: {
+      type: Function,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+  },
+
+  computed: {
+    open: {
+      get() {
+        return this.isOpen
+      },
+      set() {
+        this.toggle()
+      },
+    },
+  },
+}
+</script>
diff --git a/apps/frontend/admin/src/components/BasePagination.vue b/apps/frontend/admin/src/components/BasePagination.vue
new file mode 100644
index 0000000..8f80f8d
--- /dev/null
+++ b/apps/frontend/admin/src/components/BasePagination.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="p-3 flex flex-wrap justify-center" v-bind="$attrs">
+    <button
+      class="mx-3 px-2 py-1 rounded"
+      v-for="(page, i) in pagesList"
+      :key="i"
+      :disabled="page === currentPage"
+      :class="{ 'bg-blue-600 text-white ': page === currentPage, 'bg-gray-50 text-gray-500': page === '...' }"
+      @click="$emit('goToPage', page)"
+    >
+      {{ page }}
+    </button>
+  </div>
+</template>
+
+<script>
+import VButton from './BaseButton.vue'
+
+export default {
+  components: {
+    VButton,
+  },
+  inheritAttrs: false,
+  props: {
+    totalPages: {
+      type: Number,
+      default: 1,
+    },
+    currentPage: {
+      type: Number,
+      default: 1,
+    },
+  },
+  emits: ['goToPage'],
+  computed: {
+    prevousPages() {
+      const pageNo = this.currentPage
+      const width = 4
+      const pages = []
+      if (pageNo > width) {
+        pages.push(1)
+        pages.push(2)
+        pages.push('...')
+        pages.push(pageNo - 1)
+      } else {
+        for (let i = 1; i < pageNo; i++) {
+          pages.push(i)
+        }
+      }
+
+      return pages
+    },
+    nextPages() {
+      const pageNo = this.currentPage
+      const { totalPages } = this
+      const width = 4
+      const pages = []
+      if (pageNo < totalPages - width) {
+        pages.push(pageNo + 1)
+        pages.push(pageNo + 2)
+        pages.push('...')
+        pages.push(totalPages - 1)
+        pages.push(totalPages)
+      } else {
+        for (let i = pageNo + 1; i <= totalPages; i++) {
+          pages.push(i)
+        }
+      }
+
+      return pages
+    },
+    pagesList() {
+      const pages = [...this.prevousPages, this.currentPage, ...this.nextPages]
+
+      return pages
+    },
+  },
+}
+</script>
diff --git a/apps/frontend/admin/src/components/BaseRichTextInput.vue b/apps/frontend/admin/src/components/BaseRichTextInput.vue
new file mode 100644
index 0000000..a564d29
--- /dev/null
+++ b/apps/frontend/admin/src/components/BaseRichTextInput.vue
@@ -0,0 +1,45 @@
+<template>
+  <editor
+    v-model="model"
+    api-key="amcbn744ff0x5gvrf8z0vvxiasj7ldn8f9cqr07cnwyugt26"
+    :init="{
+      height: 200,
+      width: '100%',
+      menubar: false,
+      plugins: [
+        'advlist autolink lists link image charmap print preview anchor',
+        'searchreplace visualblocks code fullscreen',
+        'insertdatetime media table paste code help wordcount',
+      ],
+      toolbar:
+        'undo redo | formatselect | bold italic backcolor | \
+           alignleft aligncenter alignright alignjustify | \
+           bullist numlist outdent indent | removeformat | help',
+    }"
+    v-bind="$attrs"
+  >
+    <slot />
+  </editor>
+</template>
+
+<script>
+import Editor from '@tinymce/tinymce-vue'
+
+export default {
+  name: 'App',
+  components: {
+    editor: Editor,
+  },
+  props: ['value'],
+  computed: {
+    model: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        this.$emit('input', value)
+      },
+    },
+  },
+}
+</script>
diff --git a/apps/frontend/admin/src/components/BaseTagsInput.vue b/apps/frontend/admin/src/components/BaseTagsInput.vue
new file mode 100644
index 0000000..929ca78
--- /dev/null
+++ b/apps/frontend/admin/src/components/BaseTagsInput.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="flex w-full">
+    <p>{{ currentTag }}</p>
+    <div>{{ tags }}</div>
+    <v-input
+      v-model="currentTag"
+      :outlined="false"
+      @keyup.enter="addTag"
+    />
+  </div>
+</template>
+
+<script>
+import VInput from './BaseInput.vue'
+
+export default {
+  components: {
+    VInput,
+  },
+  data: () => ({
+    currentTag: 'h',
+    tags: [],
+  }),
+  methods: {
+    addTag() {
+      this.tags.push(this.currentTag)
+      this.currentTag = ''
+    },
+  },
+}
+</script>
diff --git a/apps/frontend/admin/src/components/HomeBestSellers.vue b/apps/frontend/admin/src/components/HomeBestSellers.vue
index 94ecb37..e2f9dfb 100644
--- a/apps/frontend/admin/src/components/HomeBestSellers.vue
+++ b/apps/frontend/admin/src/components/HomeBestSellers.vue
@@ -2,17 +2,30 @@
   <div class="card">
     <div class="card-body">
       <div class="flex flex-row justify-between items-center">
-        <h1 class="font-extrabold text-lg">best sellers</h1>
-        <a href="#" class="btn-gray text-sm">view all</a>
+        <h1 class="font-extrabold text-lg">
+          best sellers
+        </h1>
+        <a
+          href="#"
+          class="btn-gray text-sm"
+        >view all</a>
       </div>
 
       <table class="table-auto w-full mt-5 text-right">
         <thead>
           <tr>
-            <td class="py-4 font-extrabold text-sm text-left">product</td>
-            <td class="py-4 font-extrabold text-sm">price</td>
-            <td class="py-4 font-extrabold text-sm">sold</td>
-            <td class="py-4 font-extrabold text-sm">profit</td>
+            <td class="py-4 font-extrabold text-sm text-left">
+              product
+            </td>
+            <td class="py-4 font-extrabold text-sm">
+              price
+            </td>
+            <td class="py-4 font-extrabold text-sm">
+              sold
+            </td>
+            <td class="py-4 font-extrabold text-sm">
+              profit
+            </td>
           </tr>
         </thead>
 
@@ -21,13 +34,22 @@
           <tr class="">
             <td class="py-4 text-sm text-gray-600 flex flex-row items-center text-left">
               <div class="w-8 h-8 overflow-hidden mr-3">
-                <img src="img/sneakers.svg" class="object-cover" />
+                <img
+                  src="img/sneakers.svg"
+                  class="object-cover"
+                />
               </div>
               Sneakers and Tennis
             </td>
-            <td class="py-4 text-xs text-gray-600">$ <span class="num-2"></span></td>
-            <td class="py-4 text-xs text-gray-600"><span class="num-3"></span></td>
-            <td class="py-4 text-xs text-gray-600">$ <span class="num-4"></span></td>
+            <td class="py-4 text-xs text-gray-600">
+              $ <span class="num-2"></span>
+            </td>
+            <td class="py-4 text-xs text-gray-600">
+              <span class="num-3"></span>
+            </td>
+            <td class="py-4 text-xs text-gray-600">
+              $ <span class="num-4"></span>
+            </td>
           </tr>
           <!-- end item -->
 
@@ -35,13 +57,22 @@
           <tr class="">
             <td class="py-4 text-sm text-gray-600 flex flex-row items-center">
               <div class="w-8 h-8 overflow-hidden mr-3">
-                <img src="img/socks.svg" class="object-cover" />
+                <img
+                  src="img/socks.svg"
+                  class="object-cover"
+                />
               </div>
               Crazy Socks & Graphic Socks for Men
             </td>
-            <td class="py-4 text-xs text-gray-600">$ <span class="num-2"></span></td>
-            <td class="py-4 text-xs text-gray-600"><span class="num-3"></span></td>
-            <td class="py-4 text-xs text-gray-600">$ <span class="num-4"></span></td>
+            <td class="py-4 text-xs text-gray-600">
+              $ <span class="num-2"></span>
+            </td>
+            <td class="py-4 text-xs text-gray-600">
+              <span class="num-3"></span>
+            </td>
+            <td class="py-4 text-xs text-gray-600">
+              $ <span class="num-4"></span>
+            </td>
           </tr>
           <!-- end item -->
 
@@ -49,13 +80,22 @@
           <tr class="">
             <td class="py-4 text-sm text-gray-600 flex flex-row items-center">
               <div class="w-8 h-8 overflow-hidden mr-3">
-                <img src="img/soccer.svg" class="object-cover" />
+                <img
+                  src="img/soccer.svg"
+                  class="object-cover"
+                />
               </div>
               Adidas Soccer Ball
             </td>
-            <td class="py-4 text-xs text-gray-600">$ <span class="num-2"></span></td>
-            <td class="py-4 text-xs text-gray-600"><span class="num-3"></span></td>
-            <td class="py-4 text-xs text-gray-600">$ <span class="num-4"></span></td>
+            <td class="py-4 text-xs text-gray-600">
+              $ <span class="num-2"></span>
+            </td>
+            <td class="py-4 text-xs text-gray-600">
+              <span class="num-3"></span>
+            </td>
+            <td class="py-4 text-xs text-gray-600">
+              $ <span class="num-4"></span>
+            </td>
           </tr>
           <!-- end item -->
 
@@ -63,13 +103,22 @@
           <tr class="">
             <td class="py-4 text-sm text-gray-600 flex flex-row items-center">
               <div class="w-8 h-8 overflow-hidden mr-3">
-                <img src="img/food.svg" class="object-cover" />
+                <img
+                  src="img/food.svg"
+                  class="object-cover"
+                />
               </div>
               Best Chocolate Chip Cookies
             </td>
-            <td class="py-4 text-xs text-gray-600">$ <span class="num-2"></span></td>
-            <td class="py-4 text-xs text-gray-600"><span class="num-3"></span></td>
-            <td class="py-4 text-xs text-gray-600">$ <span class="num-4"></span></td>
+            <td class="py-4 text-xs text-gray-600">
+              $ <span class="num-2"></span>
+            </td>
+            <td class="py-4 text-xs text-gray-600">
+              <span class="num-3"></span>
+            </td>
+            <td class="py-4 text-xs text-gray-600">
+              $ <span class="num-4"></span>
+            </td>
           </tr>
           <!-- end item -->
         </tbody>
diff --git a/apps/frontend/admin/src/components/HomeRecentOrders.vue b/apps/frontend/admin/src/components/HomeRecentOrders.vue
index 40fc83f..53bb011 100644
--- a/apps/frontend/admin/src/components/HomeRecentOrders.vue
+++ b/apps/frontend/admin/src/components/HomeRecentOrders.vue
@@ -1,18 +1,30 @@
 <template>
   <div class="card">
     <div class="card-body">
-      <h2 class="font-bold text-lg mb-10">Recent Orders</h2>
+      <h2 class="font-bold text-lg mb-10">
+        Recent Orders
+      </h2>
 
       <!-- start a table -->
       <table class="table-fixed w-full">
         <!-- table head -->
         <thead class="text-left">
           <tr>
-            <th class="w-1/2 pb-10 text-sm font-extrabold tracking-wide">customer</th>
-            <th class="w-1/4 pb-10 text-sm font-extrabold tracking-wide text-right">Product</th>
-            <th class="w-1/4 pb-10 text-sm font-extrabold tracking-wide text-right">Invoice</th>
-            <th class="w-1/4 pb-10 text-sm font-extrabold tracking-wide text-right">price</th>
-            <th class="w-1/4 pb-10 text-sm font-extrabold tracking-wide text-right">status</th>
+            <th class="w-1/2 pb-10 text-sm font-extrabold tracking-wide">
+              customer
+            </th>
+            <th class="w-1/4 pb-10 text-sm font-extrabold tracking-wide text-right">
+              Product
+            </th>
+            <th class="w-1/4 pb-10 text-sm font-extrabold tracking-wide text-right">
+              Invoice
+            </th>
+            <th class="w-1/4 pb-10 text-sm font-extrabold tracking-wide text-right">
+              price
+            </th>
+            <th class="w-1/4 pb-10 text-sm font-extrabold tracking-wide text-right">
+              status
+            </th>
           </tr>
         </thead>
         <!-- end table head -->
@@ -24,26 +36,39 @@
             <!-- name -->
             <th class="mb-4 text-xs font-extrabold tracking-wider flex flex-row items-center w-full">
               <div class="w-8 h-8 overflow-hidden rounded-full">
-                <img src="img/user2.jpg" class="object-cover" />
+                <img
+                  src="img/user2.jpg"
+                  class="object-cover"
+                />
               </div>
-              <p class="ml-3 name-1">user name</p>
+              <p class="ml-3 name-1">
+                user name
+              </p>
             </th>
             <!-- name -->
 
             <!-- product -->
-            <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">Nike Sport</th>
+            <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">
+              Nike Sport
+            </th>
             <!-- product -->
 
             <!-- invoice -->
-            <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">#2384</th>
+            <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">
+              #2384
+            </th>
             <!-- invoice -->
 
             <!-- price -->
-            <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">$333</th>
+            <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">
+              $333
+            </th>
             <!-- price -->
 
             <!-- status -->
-            <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">shipped</th>
+            <th class="w-1/4 mb-4 text-xs font-extrabold tracking-wider text-right">
+              shipped
+            </th>
             <!-- status -->
           </tr>
         </tbody>
diff --git a/apps/frontend/admin/src/components/ProductCreateFormOptions.vue b/apps/frontend/admin/src/components/ProductCreateFormOptions.vue
new file mode 100644
index 0000000..8228e72
--- /dev/null
+++ b/apps/frontend/admin/src/components/ProductCreateFormOptions.vue
@@ -0,0 +1,128 @@
+<script setup>
+import { VCard, VCardBody, VCardHeading, VCardFooter } from './AppCard.vue'
+import VInput from './BaseInput.vue'
+import { reactive, ref, watch, computed } from 'vue'
+
+import ProductOptionForm from './ProductOptionForm.vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: {},
+  },
+  options: {
+    type: Object,
+    default: {},
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+// const options = {
+//   color: ['red', 'green'],
+//   size: ['small', 'medium', 'large'],
+// }
+
+// const selectedOptions = ref({})
+
+const selectedOptions = computed({
+  get: () => props.modelValue,
+  set: value => {
+    console.log('setting selectedOptions', value)
+    emit('update:modelValue', value)
+  },
+})
+
+const editing = ref('') // option thats being currently edited
+
+const cleanOptions = computed(() => {
+  const unusedOptions = {}
+  Object.keys(props.options).forEach(element => {
+    if (!Object.keys(selectedOptions.value).includes(element)) {
+      unusedOptions[element] = props.options[element]
+    }
+  })
+
+  return unusedOptions
+})
+
+const addOptionData = reactive({
+  option: Object.keys(cleanOptions.value)[0],
+  variants: [],
+})
+
+const editOptionData = reactive({
+  option: '',
+  variants: '',
+})
+
+const showEditForm = option => {
+  editing.value = option
+  editOptionData.option = option
+  editOptionData.variants = selectedOptions.value[option]
+}
+
+const addFormShown = ref(true)
+
+const updateOption = () => {
+  selectedOptions.value[editOptionData.option] = editOptionData.variants
+  editing.value = ''
+}
+
+const editableOptions = computed(() => {
+  const optionsCopy = { ...cleanOptions.value }
+  optionsCopy[editing.value] = props.options[editing.value]
+
+  return optionsCopy
+})
+
+const saveOption = () => {
+  console.log('onDone')
+
+  selectedOptions.value[addOptionData.option] = addOptionData.variants
+  addOptionData.option = Object.keys(cleanOptions.value)[0]
+  addOptionData.variants = []
+  addFormShown.value = false
+}
+</script>
+
+<template>
+  <v-card outlined>
+    <v-card-heading>Options</v-card-heading>
+
+    <div class="border-b p-3 py-6" v-for="(values, option) in selectedOptions" :key="option">
+      <!-- selected Options -->
+
+      <div v-if="editing != option">
+        <div class="flex justify-between">
+          <span class="text-black font-bold">{{ option }}</span>
+          <button @click="showEditForm(option)" class="px-3 py-1 rounded font-thin text-black border hover:bg-gray-100">
+            Edit
+          </button>
+        </div>
+        <div class="flex gap-2">
+          <div v-for="value in values" :key="value" class="rounded-full bg-gray-200 px-3 py-1">{{ value }}</div>
+        </div>
+      </div>
+      <div v-else>
+        <product-option-form v-model="editOptionData" :options="editableOptions"></product-option-form>
+        <button
+          class="my-3 px-3 py-1 rounded font-thin text-black border border-gray-500 hover:bg-gray-100"
+          @click="updateOption"
+        >
+          Done
+        </button>
+      </div>
+    </div>
+
+    <v-card-body v-if="addFormShown">
+      <product-option-form v-model="addOptionData" :options="cleanOptions"></product-option-form>
+      <button class="px-3 py-1 rounded font-thin text-black border hover:bg-gray-100" @click="saveOption">Done</button>
+    </v-card-body>
+    <v-card-footer>
+      <button class="font-light text-blue-500" @click="addFormShown = true">
+        <span> <font-awesome-icon icon="plus" class="mr-6"></font-awesome-icon></span> Add Other
+      </button>
+    </v-card-footer>
+  </v-card>
+</template>
diff --git a/apps/frontend/admin/src/components/ProductCreateFormStatus.vue b/apps/frontend/admin/src/components/ProductCreateFormStatus.vue
new file mode 100644
index 0000000..d375366
--- /dev/null
+++ b/apps/frontend/admin/src/components/ProductCreateFormStatus.vue
@@ -0,0 +1,38 @@
+<template>
+  <v-card>
+    <v-card-heading>Product Status</v-card-heading>
+    <v-card-body>
+      <div>
+        <select
+          id="product-status"
+          name="Product Status"
+          class="w-full border-gray-400 rounded"
+        >
+          <option value="active">
+            Active
+          </option>
+          <option value="draft">
+            Draft
+          </option>
+        </select>
+      </div>
+    </v-card-body>
+  </v-card>
+</template>
+
+<script>
+import {
+  VCardFooter, VCard, VCardHeading, VCardBody,
+} from './AppCard.vue'
+import VInput from './BaseInput.vue'
+
+export default {
+  components: {
+    VCardFooter,
+    VCardHeading,
+    VCard,
+    VCardBody,
+    VInput,
+  },
+}
+</script>
diff --git a/apps/frontend/admin/src/components/ProductCreateFormVariants.vue b/apps/frontend/admin/src/components/ProductCreateFormVariants.vue
new file mode 100644
index 0000000..56745bb
--- /dev/null
+++ b/apps/frontend/admin/src/components/ProductCreateFormVariants.vue
@@ -0,0 +1,147 @@
+<template>
+  <v-card>
+    <v-card-heading> Variants </v-card-heading>
+    <!-- {{ variantMap }} -->
+    <!-- {{ variationCombinations }} -->
+    <v-card-body class="'p-0">
+      <div class="overflow-x-auto">
+        <div class="">
+          <table class="min-w-full leading-normal">
+            <thead>
+              <tr>
+                <th
+                  scope="col"
+                  class="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal"
+                >
+                  Variant
+                </th>
+                <th
+                  scope="col"
+                  class="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal"
+                >
+                  Price
+                </th>
+                <th
+                  scope="col"
+                  class="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal"
+                >
+                  SKU
+                </th>
+                <th
+                  scope="col"
+                  class="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal"
+                >
+                  Quantity
+                </th>
+                <th
+                  scope="col"
+                  class="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal"
+                ></th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr v-for="variantCombination in variationCombinations" :key="variantLabel(variantCombination)">
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <!-- <div class="flex-shrink-0">
+                      <a href="#" class="block relative">
+                        <img
+                          alt="profil"
+                          src="/images/person/8.jpg"
+                          class="mx-auto object-cover rounded-full h-10 w-10"
+                        />
+                      </a>
+                    </div> -->
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                        {{ variantLabel(variantCombination) }}
+                        <!-- {{ variantCombination }} -->
+                        <!-- {{ variantCombination.reduce((x, y) => x + ' / ' + y) }} -->
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <v-input placeholder="$ 100"></v-input>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <v-input :value="0"></v-input>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <v-input></v-input>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex border border-gray-400 rounded-md text-gray-600">
+                    <button class="py-2 border-r px-5 border-gray-400 hover:bg-gray-200">Edit</button>
+                    <button class="py-2 px-5 hover:bg-gray-200">Delete</button>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </v-card-body>
+  </v-card>
+</template>
+
+<script>
+import { VCard, VCardBody, VCardHeading } from './AppCard.vue'
+import VInput from './BaseInput.vue'
+
+export default {
+  components: {
+    VCard,
+    VCardBody,
+    VCardHeading,
+    VInput,
+  },
+  props: {
+    variants: {
+      type: Object,
+      default: {},
+    },
+  },
+  computed: {
+    variationCombinations() {
+      const cartesian = (...a) => a.reduce((a, b) => a.flatMap(d => b.map(e => [d, e].flat())))
+      if (Object.keys(this.variants).length === 0) {
+        return []
+      }
+      // const combinations = cartesian(...Object.values(this.variants))
+      // return combinations
+      return cartesian(...this.variantMap)
+    },
+    variantMap() {
+      let map = []
+      Object.keys(this.variants).forEach(key => {
+        let temp = []
+        this.variants[key].forEach(value => {
+          let variant = {}
+          variant[key] = value
+          temp.push(variant)
+        })
+        map.push(temp)
+      })
+
+      return map
+    },
+  },
+  methods: {
+    variantLabel(variantCombination) {
+      if (variantCombination instanceof Array) {
+        console.log(variantCombination)
+        let label = variantCombination.map(variant => {
+          // console.log(variant)
+          return Object.values(variant)[0]
+        })
+        console.log(label)
+        label = label.reduce((x, y) => x + ' / ' + y)
+        return label
+      }
+      return Object.values(variantCombination)[0]
+    },
+  },
+}
+</script>
diff --git a/apps/frontend/admin/src/components/ProductCreateOptionsDropdownField.vue b/apps/frontend/admin/src/components/ProductCreateOptionsDropdownField.vue
new file mode 100644
index 0000000..c118878
--- /dev/null
+++ b/apps/frontend/admin/src/components/ProductCreateOptionsDropdownField.vue
@@ -0,0 +1,85 @@
+<template>
+  <Listbox v-model="selectedItem">
+    <div class="relative mt-1">
+      <ListboxButton
+        class="relative border border-gray-400 focus-visible:border-blue-400 focus:ring-1 focus:ring-blue-600 w-full py-3 pl-3 pr-10 text-left bg-white rounded-md"
+      >
+        <span class="block truncate">{{ selectedItem }}</span>
+        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+          <font-awesome-icon class="w-5 h-5 text-gray-400" icon="sort"></font-awesome-icon>
+        </span>
+      </ListboxButton>
+
+      <transition
+        leave-active-class="transition duration-100 ease-in"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <ListboxOptions
+          class="w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+        >
+          <ListboxOption
+            v-for="option in options"
+            v-slot="{ active, selected }"
+            :key="option"
+            :value="option"
+            as="template"
+          >
+            <li
+              :class="[
+                active ? 'text-amber-900 bg-amber-100' : 'text-gray-900',
+                'cursor-default select-none relative py-2 pl-10 pr-4',
+              ]"
+            >
+              <span :class="[selected ? 'font-medium' : 'font-normal', 'block truncate']">{{ option }}</span>
+              <span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600">
+                <font-awesome-icon icon="check" class="w-5 h-5" aria-hidden="true" />
+              </span>
+            </li>
+          </ListboxOption>
+        </ListboxOptions>
+      </transition>
+    </div>
+  </Listbox>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { Listbox, ListboxLabel, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
+
+// import { CheckIcon, SelectorIcon } from '@heroicons/vue/solid'
+
+export default {
+  components: {
+    Listbox,
+    ListboxLabel,
+    ListboxButton,
+    ListboxOptions,
+    ListboxOption,
+
+    // CheckIcon,
+    // SelectorIcon,
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+    options: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    selectedItem: {
+      get() {
+        return this.modelValue
+      },
+      set(value) {
+        this.$emit('update:modelValue', value)
+      },
+    },
+  },
+}
+</script>
diff --git a/apps/frontend/admin/src/components/ProductCreateOrganization.vue b/apps/frontend/admin/src/components/ProductCreateOrganization.vue
new file mode 100644
index 0000000..a5b44c0
--- /dev/null
+++ b/apps/frontend/admin/src/components/ProductCreateOrganization.vue
@@ -0,0 +1,34 @@
+<template>
+  <v-card>
+    <v-card-heading> Product Organisation </v-card-heading>
+    <v-card-body>
+      <v-input
+        label="Category"
+        placeholder="search categories"
+      ></v-input>
+      <v-input
+        label="Brand"
+        placeholder="search brand"
+      ></v-input>
+      <v-input
+        label="Gender"
+        placeholder="Men"
+      ></v-input>
+      <v-input label="Tags"></v-input>
+    </v-card-body>
+  </v-card>
+</template>
+
+<script>
+import { VCardBody, VCard, VCardHeading } from './AppCard.vue'
+import VInput from './BaseInput.vue'
+
+export default {
+  components: {
+    VCardHeading,
+    VInput,
+    VCardBody,
+    VCard,
+  },
+}
+</script>
diff --git a/apps/frontend/admin/src/components/ProductOptionForm.vue b/apps/frontend/admin/src/components/ProductOptionForm.vue
new file mode 100644
index 0000000..e66a407
--- /dev/null
+++ b/apps/frontend/admin/src/components/ProductOptionForm.vue
@@ -0,0 +1,49 @@
+<script setup>
+import { computed, watch } from 'vue'
+import DropdownField from './ProductCreateOptionsDropdownField.vue'
+import BaseMultiSelectField from './BaseMultiselectField.vue'
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: { option: '', variants: [] },
+  },
+  options: {
+    type: Object,
+    default: {},
+  },
+})
+const emit = defineEmits(['update:modelValue'])
+
+// const selectedOption = computed({
+//   get: () => props.modelValue,
+//   set: value => {
+//     emit('update:modelValue', value)
+//   },
+// })
+
+watch(props.modelValue, (oldVal, newVal) => {
+  console.log('watch', oldVal, newVal)
+
+  if (oldVal.option != newVal.option) {
+    console.log('opdating')
+
+    let value = { ...props.modelValue, variants: [] }
+    emit('update:modelValue', value)
+  }
+})
+</script>
+
+<template>
+  <div class="space-y-5">
+    <p class="text-base mt-2 text-black">Option Name</p>
+    <dropdown-field :options="Object.keys(options)" v-model="modelValue.option"></dropdown-field>
+
+    <div class="space-y-3 z-0">
+      <p class="text-base mt-2 text-black">Option Values</p>
+      <base-multi-select-field
+        :options="options[modelValue.option]"
+        v-model="modelValue.variants"
+      ></base-multi-select-field>
+    </div>
+  </div>
+</template>
diff --git a/apps/frontend/admin/src/components/ProductsCreateForm.vue b/apps/frontend/admin/src/components/ProductsCreateForm.vue
new file mode 100644
index 0000000..e69de29
diff --git a/apps/frontend/admin/src/components/ProductsFilterDrawer.vue b/apps/frontend/admin/src/components/ProductsFilterDrawer.vue
new file mode 100644
index 0000000..32f97ac
--- /dev/null
+++ b/apps/frontend/admin/src/components/ProductsFilterDrawer.vue
@@ -0,0 +1,57 @@
+<script setup>
+import { reactive, ref } from 'vue'
+import useFilters from '../composables/useFilters'
+import BaseNavDrawer from './BaseNavDrawer.vue'
+import BaseExpandableItem from './BaseExpandableItem.vue'
+import { BaseListItem } from './BaseListItemGroup.vue'
+import BaseListItemGroup from './BaseListItemGroup.vue'
+import { pageNo } from '../composables/useProducts'
+let props = defineProps(['isOpen', 'toggleDrawer'])
+
+let { fetchFilters, setInputFilter, filterState } = useFilters()
+let { result, error, loading } = fetchFilters()
+
+const selectedFilters = reactive({})
+
+const saveFilters = () => {
+  // filterState.filterInput = selectedFilters
+  const filters = { ...filterState.filterInput, ...selectedFilters }
+  pageNo.value = 1
+  setInputFilter(filters)
+}
+</script>
+
+<template>
+  <base-nav-drawer :isOpen="$props.isOpen" toggle="$props.toggleDrawer" panel-title="More Filters">
+    <div v-if="!loading">
+      <ul>
+        <base-list-item-group title="gender" v-model="selectedFilters.gender">
+          <base-list-item v-for="gender in result.filters.genders" :key="gender" :value="gender">
+            {{ gender }}
+          </base-list-item>
+        </base-list-item-group>
+        <base-list-item-group title="categories" multiselect v-model="selectedFilters.categories">
+          <base-list-item :value="category.id" v-for="category in result.filters.categories" :key="category.id">{{
+            category.name
+          }}</base-list-item>
+        </base-list-item-group>
+        <base-list-item-group multiselect title="brands" v-model="selectedFilters.brands">
+          <base-list-item :value="brand.id" v-for="brand in result.filters.brands" :key="brand.id">{{
+            brand.name
+          }}</base-list-item>
+        </base-list-item-group>
+
+        <base-expandable-item title="availabilty">
+          <ul>
+            <li>Is Available</li>
+            <li>Is Not Available</li>
+          </ul>
+        </base-expandable-item>
+      </ul>
+    </div>
+    <div class="flex justify-between py-5 px-3">
+      <button class="px-3 py-2 border rounded-md text-gray-400">Clear Filters</button>
+      <button @click="saveFilters" class="px-3 mx-5 py-2 border rounded-md text-white bg-green-800">Done</button>
+    </div>
+  </base-nav-drawer>
+</template>
diff --git a/apps/frontend/admin/src/components/ProductsList.vue b/apps/frontend/admin/src/components/ProductsList.vue
new file mode 100644
index 0000000..cd9aed2
--- /dev/null
+++ b/apps/frontend/admin/src/components/ProductsList.vue
@@ -0,0 +1,90 @@
+<template>
+  <v-card outlined class="p-0">
+    <product-filter-drawer :is-open="open" :toggle="toggleDrawer"></product-filter-drawer>
+    <div>
+      <!-- product status tabs -->
+      <div class="flex px-5 pt-3 border-b-2">
+        <div v-for="category in categories" :key="category">
+          <button
+            class="transition-all duration-100 ease-in-out transform hover:scale-110"
+            :class="[
+              'mr-8 m-0 py-2.5 text-sm leading-5 font-medium text-gray-500  ',
+
+              selected == category
+                ? 'border-b-4 border-green-800 font-bold text-black'
+                : 'border-b-4 border-transparent',
+            ]"
+            @click="selectCategory(category)"
+          >
+            {{ category }}
+          </button>
+        </div>
+      </div>
+
+      <div class="flex py-3 px-5 justify-between flex-nowrap gap-3">
+        <div class="text-lg rounded-md text-gray-400 border-2 py-1 px-2 w-4/5 focus-within:border-blue-400">
+          <font-awesome-icon icon="search" class="text-current mr-1"></font-awesome-icon>
+          <input
+            type="text"
+            placeholder="filter products"
+            class="w-11/12 text-gray-500 border-none focus:ring-transparent focus:border-none"
+          />
+        </div>
+
+        <button class="border-2 py-1 px-3 text-sm" @click="toggleDrawer()">More Filters</button>
+      </div>
+
+      <div v-if="!loading">
+        <products-table :products="products"></products-table>
+      </div>
+    </div>
+    <v-card-footer>
+      <v-pagination @goToPage="loadPage" :totalPages="totalPages" :currentPage="currentPage"></v-pagination>
+    </v-card-footer>
+  </v-card>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+import useProducts from '../composables/useProducts'
+import useNavdrawer from '../composables/useNavdrawer'
+import { VCard, VCardFooter } from './AppCard.vue'
+import ProductFilterDrawer from './ProductsFilterDrawer.vue'
+import VPagination from './BasePagination.vue'
+import ProductsTable from './ProductsListTable.vue'
+
+export default {
+  components: {
+    VCard,
+    ProductFilterDrawer,
+    VCardFooter,
+    ProductsTable,
+    VPagination,
+  },
+
+  setup() {
+    const { open, toggleDrawer } = useNavdrawer(true)
+    const selected = ref('Recent')
+    const categories = ref(['active', 'drafted', 'archived'])
+    const selectCategory = category => {
+      selected.value = category
+    }
+    const { products, totalPages, loading, error, currentPage, loadPage } = useProducts()
+
+    return {
+      categories,
+      selected,
+      selectCategory,
+      open,
+      toggleDrawer,
+      loading,
+      error,
+      products,
+      totalPages,
+      currentPage,
+      loadPage,
+    }
+  },
+}
+</script>
diff --git a/apps/frontend/admin/src/components/ProductsListTable.vue b/apps/frontend/admin/src/components/ProductsListTable.vue
new file mode 100644
index 0000000..00f0d3d
--- /dev/null
+++ b/apps/frontend/admin/src/components/ProductsListTable.vue
@@ -0,0 +1,74 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<template>
+  <div class="flex flex-col">
+    <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+      <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+        <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Product
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Category
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Status
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Inventory
+                </th>
+                <th scope="col" class="relative px-6 py-3">
+                  <span class="sr-only">Edit</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+              <tr v-for="product in products" :key="product.id">
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="flex items-center">
+                    <div class="flex-shrink-0 h-auto object-contain w-10">
+                      <img class="h-10 w-10" :src="product.variations[0].images[0]" alt="" />
+                    </div>
+                    <div class="ml-4">
+                      <div class="text-sm font-medium text-gray-900">
+                        {{ product.brand.name }}
+                      </div>
+                      <div class="text-sm text-gray-500">
+                        {{ product.name }}
+                      </div>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="text-sm text-gray-900">
+                    {{ product.category.name }}
+                  </div>
+                  <div class="text-sm text-gray-500">{{ product.id }}</div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <span
+                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+                  >
+                    Active
+                  </span>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ product.quantity }}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                  <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['products'],
+}
+</script>
diff --git a/apps/frontend/admin/src/components/SalesSummary.vue b/apps/frontend/admin/src/components/SalesSummary.vue
index 9b3fc41..52a7dd2 100644
--- a/apps/frontend/admin/src/components/SalesSummary.vue
+++ b/apps/frontend/admin/src/components/SalesSummary.vue
@@ -4,17 +4,28 @@
     <div class="border-r border-gray-200 md:w-2/3 w-full">
       <!-- top -->
       <div class="p-5 flex flex-row flex-wrap justify-between items-center">
-        <h2 class="font-bold text-lg">Order Summary</h2>
+        <h2 class="font-bold text-lg">
+          Order Summary
+        </h2>
         <div class="flex flex-row justify-center items-center">
-          <a href="#" class="btn mr-4 text-sm py-2 block">month</a>
-          <a href="#" class="btn-shadow text-sm py-2 block">week</a>
+          <a
+            href="#"
+            class="btn mr-4 text-sm py-2 block"
+          >month</a>
+          <a
+            href="#"
+            class="btn-shadow text-sm py-2 block"
+          >week</a>
         </div>
       </div>
       <!-- end top -->
 
       <!-- chart -->
 
-      <line-chart :chart-data="dataset" :options="options"></line-chart>
+      <line-chart
+        :chart-data="dataset"
+        :options="options"
+      ></line-chart>
       <!-- end chart -->
     </div>
     <!-- end right -->
@@ -23,37 +34,59 @@
     <div class="md:w-1/3 w-full">
       <!-- top -->
       <div class="p-5 border-b border-gray-200">
-        <h2 class="font-bold text-lg mb-6">Sales History</h2>
+        <h2 class="font-bold text-lg mb-6">
+          Sales History
+        </h2>
 
         <div class="flex flex-row justify-between mb-3">
           <div class="">
-            <h4 class="text-gray-600 font-thin">Puma Shoes</h4>
-            <p class="text-gray-400 text-xs font-hairline">30 min ago</p>
+            <h4 class="text-gray-600 font-thin">
+              Puma Shoes
+            </h4>
+            <p class="text-gray-400 text-xs font-hairline">
+              30 min ago
+            </p>
+          </div>
+          <div class="text-sm font-medium">
+            <span class="text-green-400">+</span> $250
           </div>
-          <div class="text-sm font-medium"><span class="text-green-400">+</span> $250</div>
         </div>
 
         <div class="flex flex-row justify-between mb-3">
           <div class="">
-            <h4 class="text-gray-600 font-thin">Google Pixel 4 xl</h4>
-            <p class="text-gray-400 text-xs font-hairline">1 day ago</p>
+            <h4 class="text-gray-600 font-thin">
+              Google Pixel 4 xl
+            </h4>
+            <p class="text-gray-400 text-xs font-hairline">
+              1 day ago
+            </p>
+          </div>
+          <div class="text-sm font-medium">
+            <span class="text-red-400">-</span> $10
           </div>
-          <div class="text-sm font-medium"><span class="text-red-400">-</span> $10</div>
         </div>
 
         <div class="flex flex-row justify-between">
           <div class="">
-            <h4 class="text-gray-600 font-thin">Nike Air Jordan</h4>
-            <p class="text-gray-400 text-xs font-hairline">2 hour ago</p>
+            <h4 class="text-gray-600 font-thin">
+              Nike Air Jordan
+            </h4>
+            <p class="text-gray-400 text-xs font-hairline">
+              2 hour ago
+            </p>
+          </div>
+          <div class="text-sm font-medium">
+            <span class="text-red-400">-</span> $98
           </div>
-          <div class="text-sm font-medium"><span class="text-red-400">-</span> $98</div>
         </div>
       </div>
       <!-- end top -->
 
       <!-- bottom -->
       <div class="p-5">
-        <h2 class="font-bold text-lg mb-2">Sales History</h2>
+        <h2 class="font-bold text-lg mb-2">
+          Sales History
+        </h2>
         <strong class="text-teal-400 font-extrabold text-xl">$82,950.96</strong>
 
         <div class="bg-gray-300 h-2 rounded-full mt-2 relative">
diff --git a/apps/frontend/admin/src/components/SalesTodayCard.vue b/apps/frontend/admin/src/components/SalesTodayCard.vue
index e4b4fb7..9fe7d74 100644
--- a/apps/frontend/admin/src/components/SalesTodayCard.vue
+++ b/apps/frontend/admin/src/components/SalesTodayCard.vue
@@ -3,19 +3,33 @@
   <div class="card">
     <div class="card-body h-full flex flex-col justify-between">
       <div>
-        <h1 class="text-lg font-bold tracking-wide">Congratulations Moe!</h1>
-        <p class="text-gray-600 mt-2">Best seller of the month</p>
+        <h1 class="text-lg font-bold tracking-wide">
+          Congratulations Moe!
+        </h1>
+        <p class="text-gray-600 mt-2">
+          Best seller of the month
+        </p>
       </div>
 
       <div class="flex flex-row mt-10 items-end">
         <div class="flex-1">
-          <h1 class="font-extrabold text-4xl text-teal-400">$89k</h1>
-          <p class="mt-3 mb-4 text-xs text-gray-500">You have done 57.6% more sales today.</p>
-          <a href="#" class="btn-shadow py-3"> view sales </a>
+          <h1 class="font-extrabold text-4xl text-teal-400">
+            $89k
+          </h1>
+          <p class="mt-3 mb-4 text-xs text-gray-500">
+            You have done 57.6% more sales today.
+          </p>
+          <a
+            href="#"
+            class="btn-shadow py-3"
+          > view sales </a>
         </div>
 
         <div class="flex-1 ml-10 w-32 h-32 lg:w-auto lg:h-auto overflow-hidden">
-          <img class="object-cover" src="img/congrats.svg" />
+          <img
+            class="object-cover"
+            src="img/congrats.svg"
+          />
         </div>
       </div>
     </div>
diff --git a/apps/frontend/admin/src/components/TheNavBar.vue b/apps/frontend/admin/src/components/TheNavBar.vue
index 6dd7ee0..059710e 100644
--- a/apps/frontend/admin/src/components/TheNavBar.vue
+++ b/apps/frontend/admin/src/components/TheNavBar.vue
@@ -1,6 +1,7 @@
 <script setup>
-import useNavdrawer from '../composables/useNavdrawer'
 import { FontAwesomeIcon as fIcon } from '@fortawesome/vue-fontawesome'
+import useNavdrawer from '../composables/useNavdrawer'
+
 const { toggleDrawer } = useNavdrawer()
 </script>
 
@@ -11,7 +12,10 @@ const { toggleDrawer } = useNavdrawer()
   >
     <!-- logo -->
     <div class="w-56 flex flex-row items-center">
-      <button @click="toggleDrawer()" class="mr-4 text-right text-gray-900 md:hidden">
+      <button
+        class="mr-4 text-right text-gray-900 md:hidden"
+        @click="toggleDrawer()"
+      >
         <f-icon icon="bars"></f-icon>
       </button>
       <!-- <img src="img/logo.png" class="w-10 flex-none" /> -->
diff --git a/apps/frontend/admin/src/composables/useFilters.js b/apps/frontend/admin/src/composables/useFilters.js
new file mode 100644
index 0000000..60a0058
--- /dev/null
+++ b/apps/frontend/admin/src/composables/useFilters.js
@@ -0,0 +1,56 @@
+import { reactive, readonly, ref } from 'vue'
+import { useQuery } from '@vue/apollo-composable'
+import { fetchFilters } from 'graphql-client/queries/filter'
+
+const defaultFilterInput = {
+  categories: null,
+  gender: '',
+  brands: null,
+  sortBy: 'BetterDiscount',
+}
+const filterState = ref({
+  filterInput: {
+    categories: null,
+    gender: '',
+    brands: null,
+    sortBy: 'BetterDiscount',
+  },
+  variantFilterInput: [
+    //    {
+    //        name:"size",
+    //        values:["xl","l"]
+    //    }
+  ],
+
+  // sorting options not mutating this anywhere
+  sortingOptions: [
+    { title: 'Popularity', value: 'Popularity' },
+    { title: 'Whats New', value: 'WhatsNew' },
+    { title: 'Better Discount', value: 'BetterDiscount' },
+    { title: 'Price : Low to High', value: 'PriceLowToHigh' },
+    { title: 'Price : High to Low', value: 'PriceHighToLow' },
+  ],
+
+  // state variables products page
+  isFiltering: false,
+})
+
+const useFilters = () => {
+  const getFilters = () => useQuery(fetchFilters, filterState.filterInput)
+
+  // const setInputFilter = (type, value) => {
+  //   filterState.filterInput[type] = value
+  // }
+
+  const setInputFilter = filter => {
+    filterState.value.filterInput = filter
+  }
+
+  return {
+    fetchFilters: getFilters,
+    filterState: filterState,
+    setInputFilter,
+  }
+}
+
+export default useFilters
diff --git a/apps/frontend/admin/src/composables/useNavdrawer.js b/apps/frontend/admin/src/composables/useNavdrawer.js
index 83121d8..54d776e 100644
--- a/apps/frontend/admin/src/composables/useNavdrawer.js
+++ b/apps/frontend/admin/src/composables/useNavdrawer.js
@@ -1,9 +1,14 @@
 import { ref, computed } from 'vue'
 
-const open = ref(false)
+const globalOpen = ref(false)
 
-export default () => {
+export default isOpen => {
+  const open = isOpen ? ref(isOpen) : globalOpen
   const isDrawerOpen = computed(() => {
+    if (screen.width > 600) {
+      return true
+    }
+
     return open.value
   })
   function toggleDrawer() {
diff --git a/apps/frontend/admin/src/composables/useProducts.js b/apps/frontend/admin/src/composables/useProducts.js
new file mode 100644
index 0000000..449e7cd
--- /dev/null
+++ b/apps/frontend/admin/src/composables/useProducts.js
@@ -0,0 +1,60 @@
+import { ref, watchEffect } from 'vue'
+import { GET_PRODUCTS_QUERY } from 'graphql-client/queries/productQueries'
+import { useQuery, useResult } from '@vue/apollo-composable'
+
+import useFilters from './useFilters'
+
+export const pageNo = ref(1)
+
+export default () => {
+  const { filterState } = useFilters()
+
+  // destructuring removes reactivity
+  // eslint-disable-next-line prefer-destructuring
+  //   const filterInput = filterState.filterInput
+
+  const { loading, error, result, variables, onResult } = useQuery(GET_PRODUCTS_QUERY, () => ({
+    page: pageNo.value,
+    filter: filterState.value.filterInput,
+  }))
+
+  const products = useResult(result, [], data => data.Products.products)
+
+  // const totalPages = ref(1)
+  const pagination = ref(1)
+  const totalPages = useResult(result, pagination, data => {
+    pagination.value = data.Products.totalPages
+
+    return data.Products.totalPages
+  })
+  // implementing total pages this way breaks rectivity of variables
+
+  const loadPage = page => {
+    console.log('loadinf', page)
+    pageNo.value = page
+
+    // variables.value = {
+    //   page: pageNo.value,
+    //   filter: filterInput.value,~
+    // }
+    // variables.value.page = page
+  }
+
+  //   watchEffect(() => {
+  //     console.log('refetching', pageNo.value)
+  //     variables.value = {
+  //       page: pageNo.value,
+  //       filter: filterInput.value,
+  //     }
+  //   })
+
+  return {
+    result,
+    loading,
+    error,
+    products,
+    totalPages,
+    currentPage: pageNo,
+    loadPage,
+  }
+}
diff --git a/apps/frontend/admin/src/css/apply/_link.sass b/apps/frontend/admin/src/css/apply/_link.sass
index 177402d..87121aa 100644
--- a/apps/frontend/admin/src/css/apply/_link.sass
+++ b/apps/frontend/admin/src/css/apply/_link.sass
@@ -1,3 +1,7 @@
 .nav-link
 
     @apply hover:text-gray-800 active:text-green-800 hover:bg-white flex items-center p-2 my-2 transition-colors dark:hover:text-white dark:hover:bg-gray-600 duration-200 text-gray-600 dark:text-gray-400 rounded-lg
+
+.nav-link-active
+
+    @apply bg-teal-100  active:text-green-800 flex items-center p-2 my-2 transition-colors  duration-200 text-green-600 rounded-lg
diff --git a/apps/frontend/admin/src/layouts/WithSideBar.vue b/apps/frontend/admin/src/layouts/WithSideBar.vue
index 9cc5990..871c3ec 100644
--- a/apps/frontend/admin/src/layouts/WithSideBar.vue
+++ b/apps/frontend/admin/src/layouts/WithSideBar.vue
@@ -1,15 +1,17 @@
 <template>
-  <div class="">
+  <div class="w-full h-full">
     <nav-bar />
-    <div class="flex flex-no-wrap h-auto">
+    <div class="flex flex-no-wrap w-full h-full">
       <!-- Sidebar starts -->
 
       <side-bar class=""></side-bar>
       <!-- Sidebar ends -->
       <!-- Remove class [ h-64 ] when adding a card block -->
-      <div class="bg-gray-100 md:pl-64 md:py-5 px-2 md:px-6 m-0">
+      <div class="bg-gray-100 md:pl-64 md:py-5 px-2 md:px-6 m-0 w-full h-full">
         <!-- Remove class [ border-dashed border-2 border-gray-300 ] to remove dotted border -->
-        <div class="w-full h-full"><slot /></div>
+        <div class="w-full h-full">
+          <slot />
+        </div>
         <!-- Place your content here -->
       </div>
     </div>
diff --git a/apps/frontend/admin/src/main.js b/apps/frontend/admin/src/main.js
index e377c1d..e1ea1ed 100644
--- a/apps/frontend/admin/src/main.js
+++ b/apps/frontend/admin/src/main.js
@@ -1,17 +1,34 @@
-import { createApp } from 'vue'
+/* eslint-disable object-curly-newline */
+import { createApp, provide, h } from 'vue'
+import { DefaultApolloClient, ApolloClients } from '@vue/apollo-composable'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { Chart, LineController, DoughnutController, ArcElement, Tooltip, registerables } from 'chart.js'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import apolloClient from './apolloClient'
 import icons from './plugins/fontAwesome'
 import App from './App.vue'
+
 import './css/app.sass'
 import store from './store'
 import router from './router'
 
+console.log(apolloClient)
 Chart.register(DoughnutController, ArcElement, Tooltip, LineController, ...registerables)
 library.add(...icons)
-const app = createApp(App)
+const app = createApp({
+  setup() {
+    provide(ApolloClients, {
+      default: apolloClient,
+    })
+  },
+
+  render: () => h(App),
+})
 app.component('font-awesome-icon', FontAwesomeIcon)
 app.use(store)
 app.use(router)
 app.mount('#app')
+
+export default {
+  apolloClient,
+}
diff --git a/apps/frontend/admin/src/plugins/fontAwesome.js b/apps/frontend/admin/src/plugins/fontAwesome.js
index dcd1a50..d69cde2 100644
--- a/apps/frontend/admin/src/plugins/fontAwesome.js
+++ b/apps/frontend/admin/src/plugins/fontAwesome.js
@@ -18,6 +18,11 @@ import {
   faBell,
   faBars,
   faTimes,
+  faSearch,
+  faArrowLeft,
+  faPlus,
+  faCheck,
+  faSort,
 } from '@fortawesome/free-solid-svg-icons'
 
 export default [
@@ -40,4 +45,9 @@ export default [
   faUserTimes,
   faBell,
   faBars,
+  faSearch,
+  faArrowLeft,
+  faPlus,
+  faCheck,
+  faSort,
 ]
diff --git a/apps/frontend/admin/src/router/index.js b/apps/frontend/admin/src/router/index.js
index 9a73b3d..0c038a7 100644
--- a/apps/frontend/admin/src/router/index.js
+++ b/apps/frontend/admin/src/router/index.js
@@ -7,6 +7,29 @@ const routes = [
     name: 'dashboard',
     component: () => import('../views/dashboard.vue'),
   },
+  {
+    path: '/products',
+    name: 'products',
+    component: () => import('../views/Products.vue'),
+
+    children: [
+      {
+        path: '',
+        name: 'products-all',
+        component: () => import('../views/ProductsAll.vue'),
+      },
+      {
+        path: 'create',
+        name: 'products-create',
+        component: () => import('../views/ProductsCreate.vue'),
+      },
+      {
+        path: ':id',
+        name: 'products-edit',
+        component: () => import('../views/ProductsEdit.vue'),
+      },
+    ],
+  },
 ]
 
 const router = createRouter({
diff --git a/apps/frontend/admin/src/views/Products.vue b/apps/frontend/admin/src/views/Products.vue
new file mode 100644
index 0000000..6d8ff03
--- /dev/null
+++ b/apps/frontend/admin/src/views/Products.vue
@@ -0,0 +1,15 @@
+<template>
+  <with-side-bar>
+    <div class="container h-full p-5">
+      <router-view></router-view>
+    </div>
+  </with-side-bar>
+</template>
+
+<script>
+import WithSideBar from '../layouts/WithSideBar.vue'
+
+export default {
+  components: { WithSideBar },
+}
+</script>
diff --git a/apps/frontend/admin/src/views/ProductsAll.vue b/apps/frontend/admin/src/views/ProductsAll.vue
new file mode 100644
index 0000000..a51ee8a
--- /dev/null
+++ b/apps/frontend/admin/src/views/ProductsAll.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="container min-h-screen h-full p-5">
+    <!-- header -->
+    <div class="flex justify-between my-4 items-center">
+      <span class="text-lg font-bold text-black">Products</span>
+      <div class="flex items-center">
+        <span class="mx-2">Import</span>
+        <span class="ml-2 mr-4">Export</span>
+        <v-button @click="$router.push({ name: 'products-create' })"> Add Product </v-button>
+      </div>
+    </div>
+
+    <products-list></products-list>
+
+    <!-- <div class="flex">
+      <v-button v-for="i in result.totalPages" :key="i">{{ i }}</v-button>
+    </div> -->
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+// import WithSideBar from '../layouts/WithSideBar.vue'
+import VButton from '../components/BaseButton.vue'
+
+// import VCard from '../components/AppCard.vue'
+import ProductsList from '../components/ProductsList.vue'
+
+export default {
+  components: { VButton, ProductsList },
+}
+</script>
diff --git a/apps/frontend/admin/src/views/ProductsCreate.vue b/apps/frontend/admin/src/views/ProductsCreate.vue
new file mode 100644
index 0000000..5e44f5f
--- /dev/null
+++ b/apps/frontend/admin/src/views/ProductsCreate.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="w-full max-w-4xl mx-auto">
+    <div class="flex my-6">
+      <div class="text-xl">
+        <span class="p-3 border">
+          <font-awesome-icon icon="arrow-left"></font-awesome-icon>
+        </span>
+        <span class="px-3 font-bold"> Add A Product</span>
+        {{ productData }}
+        selected options {{ selectedOptions }}
+      </div>
+    </div>
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+      <div class="col-span-2 h-auto pb-20 space-y-5">
+        <v-card outlined>
+          <v-card-body>
+            <v-input v-model="productData.name" :label="'name'" outlined placeholder="name"></v-input>
+            <v-rich-text v-model="productData.description"></v-rich-text>
+          </v-card-body>
+        </v-card>
+
+        <v-card outlined>
+          <v-card-body>
+            <div>
+              <p class="text-black text-lg font-bold my-3">Add Media</p>
+              <p class="mt-5 mb-2">Add Images to show product details</p>
+            </div>
+            <div
+              class="flex justify-center items-center h-28 w-full border-dotted border-2 border-gray-500 hover:border-blue-600 my-5 rounded-lg"
+            >
+              <v-button> Add File </v-button>
+            </div>
+          </v-card-body>
+        </v-card>
+        <v-card outlined class="space-y-3">
+          <v-card-heading>Pricing</v-card-heading>
+          <v-card-body>
+            <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
+              <v-input v-model="productData.price" label="Price" type="number"></v-input>
+              <v-input v-model="productData.discountPercent" label="Discount Percent" type="number"></v-input>
+            </div>
+          </v-card-body>
+          <v-card-footer>
+            <v-input label="Cost Per Item" type="number"></v-input>
+            <p class="text-sm">Customers wont see it</p>
+          </v-card-footer>
+        </v-card>
+        <v-card>
+          <v-card-heading>Inventory</v-card-heading>
+          <v-card-body>
+            <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
+              <v-input label="SKU (Stock Keeping Unit)"></v-input>
+              <v-input label="Barcode (ISBN, UPC, GTIN, etc.)"></v-input>
+            </div>
+          </v-card-body>
+          <v-card-footer>
+            <p class="text-lg font-bold text-black">Quantity</p>
+            <v-input class="w-1/2" type="number" v-model="productData.quantity"></v-input>
+            <p class="text-sm">Customers wont see it</p>
+          </v-card-footer>
+        </v-card>
+        <variant-options v-model="selectedOptions" :options="variantOptions"></variant-options>
+        {{ variationCombinations }}
+        <variantions-field :variants="selectedOptions" v-model="productData.variations"></variantions-field>
+      </div>
+      <!--end col 1-->
+
+      <div class="space-y-3">
+        <product-status-field></product-status-field>
+
+        <product-organization></product-organization>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { VCard, VCardBody, VCardHeading, VCardFooter } from '../components/AppCard.vue'
+import VInput from '../components/BaseInput.vue'
+import VRichText from '../components/BaseRichTextInput.vue'
+import VButton from '../components/BaseButton.vue'
+import VariantOptions from '../components/ProductCreateFormOptions.vue'
+import VariantionsField from '../components/ProductCreateFormVariants.vue'
+import ProductStatusField from '../components/ProductCreateFormStatus.vue'
+import ProductOrganization from '../components/ProductCreateOrganization.vue'
+
+export default {
+  components: {
+    VCard,
+    VInput,
+    VRichText,
+    VButton,
+    VCardBody,
+    VCardHeading,
+    VCardFooter,
+    VariantOptions,
+    ProductStatusField,
+    VariantionsField,
+    ProductOrganization,
+  },
+  data() {
+    return {
+      variantOptions: {
+        color: ['red', 'green'],
+        size: ['small', 'medium', 'large'],
+      },
+
+      selectedOptions: {},
+
+      productData: {
+        name: '',
+        brand: '',
+        category: '',
+        description: '',
+        variations: [],
+        tags: '',
+        images: '',
+        status: '',
+        price: '',
+        discountPercent: '',
+      },
+    }
+  },
+
+  computed: {},
+}
+</script>
diff --git a/apps/frontend/admin/src/views/ProductsEdit.vue b/apps/frontend/admin/src/views/ProductsEdit.vue
new file mode 100644
index 0000000..36524e4
--- /dev/null
+++ b/apps/frontend/admin/src/views/ProductsEdit.vue
@@ -0,0 +1,42 @@
+<template>
+  <div id="demo">
+    <button @click="show = !show">
+      Toggle
+    </button>
+
+    <transition name="fade">
+      <p
+        v-if="show"
+        class="bg-red-500 w-96 h-96"
+      >
+        hello
+      </p>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      show: true,
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+body {
+  margin: 30px;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/apps/frontend/admin/tailwind.config.js b/apps/frontend/admin/tailwind.config.js
index d7a08b6..10bf8b5 100644
--- a/apps/frontend/admin/tailwind.config.js
+++ b/apps/frontend/admin/tailwind.config.js
@@ -1,17 +1,9 @@
 module.exports = {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
-  plugins: [],
+  // eslint-disable-next-line import/no-extraneous-dependencies
+  plugins: [require('@tailwindcss/forms')],
 
   theme: {
-    // screens: {
-    //   sm: { min: '639px' },
-
-    //   md: { max: '767px' },
-
-    //   lg: { max: '1023px' },
-
-    //   xl: { max: '1279px' },
-    // },
     extend: {
       colors: {
         primary: '#DEB992',
diff --git a/apps/frontend/store-front/src/store/modules/filters/index.js b/apps/frontend/store-front/src/store/modules/filters/index.js
index e317846..001d95a 100644
--- a/apps/frontend/store-front/src/store/modules/filters/index.js
+++ b/apps/frontend/store-front/src/store/modules/filters/index.js
@@ -1,148 +1,137 @@
-import { isEqual } from "apollo-utilities"
+import { isEqual } from "apollo-utilities";
 
 const defaultFilterInput = {
-    categories:null,
-    gender:"",
-    brands:null,
-    sortBy:"BetterDiscount"
-    
-}
-
-
-const state=()=>({
-   filterInput:{
-       categories:null,
-       gender:"",
-       brands:null,
-       sortBy:"BetterDiscount"
-       
-   },
-   variantFilterInput:[
+  categories: null,
+  gender: "",
+  brands: null,
+  sortBy: "BetterDiscount",
+};
+
+const state = () => ({
+  filterInput: {
+    categories: null,
+    gender: "",
+    brands: null,
+    sortBy: "BetterDiscount",
+  },
+  variantFilterInput: [
     //    {
     //        name:"size",
     //        values:["xl","l"]
     //    }
-   ],
-
-   //state variables for mobile panel 
-   mobilePanel:{
-
-        isVariantFilterSelected:false,
-        selectedFilterType:"brands",
-        selectedVariantType:"",
-   },
-
-   //ui variables for filter and sort
-   isSortingSheetOpen:false,
-
-   // sorting options not mutating this anywhere
-   sortingOptions: [
-        { title: 'Popularity' ,value:"Popularity" },
-        { title: 'Whats New' ,value:"WhatsNew" },
-        { title: 'Better Discount' ,value:"BetterDiscount" },
-        { title: 'Price : Low to High'  ,value:"PriceLowToHigh"},
-        { title: 'Price : High to Low', value:"PriceHighToLow" },
-   ],
-
-   // state variables products page
-   isFiltering:false
-})
-
-const getters={
-
-   areFiltersChanged(state){
-        return !isEqual(state.filterInput,defaultFilterInput)
-   }
-}
-
-const mutations={
-
-    SetFilterInput(state,{filterType,value}){
-        state.filterInput[filterType]=value;
-    },
-
-    SetVariantFilterInput(state,{filterType,value}){
-
-        if(state.variantFilterInput.length== 0  ){
-            state.variantFilterInput=[{"name":filterType,"values":value}]
-        }
-        for(let filter of state.variantFilterInput){
-           if ( filter.name==filterType){
-               filter.values=value
-           }
-        }
-    },
-
-    setMobilePanelState(state,{key,value}){
-        state.mobilePanel[key]=value
-    },
-    resetFilters(state){
-        state.filterInput = defaultFilterInput
-        state.variantFilterInput= [ ]
-        state.mobilePanel= { isVariantFilterSelected:false, selectedFilterType:"brands", selectedVariantType:"", }
-    },
-
-    toggleSortingSheet(state,value){
-        state.isSortingSheetOpen =value
-    },
-
-    setIsFiltering(state,value){
-        state.isFiltering=value
-    },
-
-    setFilters(state,filter){
-        state.filterInput = filter
+  ],
+
+  //state variables for mobile panel
+  mobilePanel: {
+    isVariantFilterSelected: false,
+    selectedFilterType: "brands",
+    selectedVariantType: "",
+  },
+
+  //ui variables for filter and sort
+  isSortingSheetOpen: false,
+
+  // sorting options not mutating this anywhere
+  sortingOptions: [
+    { title: "Popularity", value: "Popularity" },
+    { title: "Whats New", value: "WhatsNew" },
+    { title: "Better Discount", value: "BetterDiscount" },
+    { title: "Price : Low to High", value: "PriceLowToHigh" },
+    { title: "Price : High to Low", value: "PriceHighToLow" },
+  ],
+
+  // state variables products page
+  isFiltering: false,
+});
+
+const getters = {
+  areFiltersChanged(state) {
+    return !isEqual(state.filterInput, defaultFilterInput);
+  },
+};
+
+const mutations = {
+  SetFilterInput(state, { filterType, value }) {
+    state.filterInput[filterType] = value;
+  },
+
+  SetVariantFilterInput(state, { filterType, value }) {
+    if (state.variantFilterInput.length == 0) {
+      state.variantFilterInput = [{ name: filterType, values: value }];
     }
-}
-
-const actions ={
-
-    async filterProducts({dispatch,state},updateFilters) {
-       
-        let filters={...state.filterInput,variantFilters:state.variantFilterInput}
-        let payload ={filters,pageNb:1}
-        await dispatch("products/getProducts",payload,{root:true})
-        console.log("filter",state.filterInput)
-        
-        if (updateFilters == true) {
-          dispatch("products/updateFilters",state.filterInput,{root:true});
-         
-        }
-      
-      },
-    
-    async selectFilter({dispatch,commit},{filterType,value,doUpdate}){
-         
-        commit("SetFilterInput",{filterType,value})
-        commit("setIsFiltering",true)
-        await dispatch("filterProducts",doUpdate)
-        commit("setIsFiltering",false)
-    }, 
-
-    async selectVariantFilter({dispatch,commit},{filterType,value}){
-
-        commit("SetVariantFilterInput",{filterType,value})
-        dispatch("filterProducts",false)
-    } ,
-
-    async clearFilters({dispatch,commit}){
-        commit("setIsFiltering",true)
-        commit("resetFilters")
-        await dispatch("products/getProducts",{},{root:true})
-        commit("setIsFiltering",false)
-        await dispatch("products/getFilters",{},{root:true})
-        
-    },
-    
-
-
-}
-
+    for (let filter of state.variantFilterInput) {
+      if (filter.name == filterType) {
+        filter.values = value;
+      }
+    }
+  },
+
+  setMobilePanelState(state, { key, value }) {
+    state.mobilePanel[key] = value;
+  },
+  resetFilters(state) {
+    state.filterInput = defaultFilterInput;
+    state.variantFilterInput = [];
+    state.mobilePanel = {
+      isVariantFilterSelected: false,
+      selectedFilterType: "brands",
+      selectedVariantType: "",
+    };
+  },
+
+  toggleSortingSheet(state, value) {
+    state.isSortingSheetOpen = value;
+  },
+
+  setIsFiltering(state, value) {
+    state.isFiltering = value;
+  },
+
+  setFilters(state, filter) {
+    state.filterInput = filter;
+  },
+};
+
+const actions = {
+  async filterProducts({ dispatch, state }, updateFilters) {
+    let filters = {
+      ...state.filterInput,
+      variantFilters: state.variantFilterInput,
+    };
+    let payload = { filters, pageNb: 1 };
+    await dispatch("products/getProducts", payload, { root: true });
+    console.log("filter", state.filterInput);
+
+    if (updateFilters == true) {
+      dispatch("products/updateFilters", state.filterInput, { root: true });
+    }
+  },
+
+  async selectFilter({ dispatch, commit }, { filterType, value, doUpdate }) {
+    commit("SetFilterInput", { filterType, value });
+    commit("setIsFiltering", true);
+    await dispatch("filterProducts", doUpdate);
+    commit("setIsFiltering", false);
+  },
+
+  async selectVariantFilter({ dispatch, commit }, { filterType, value }) {
+    commit("SetVariantFilterInput", { filterType, value });
+    dispatch("filterProducts", false);
+  },
+
+  async clearFilters({ dispatch, commit }) {
+    commit("setIsFiltering", true);
+    commit("resetFilters");
+    await dispatch("products/getProducts", {}, { root: true });
+    commit("setIsFiltering", false);
+    await dispatch("products/getFilters", {}, { root: true });
+  },
+};
 
 export default {
-    namespaced:true,
-    state,
-    getters,
-    mutations,
-    actions
-}
\ No newline at end of file
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions,
+};
diff --git a/package.json b/package.json
index 93e5b29..4a85a52 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "apps/*",
     "packages/*"
   ],
+ 
   "scripts": {
     "build": "turbo run build",
     "dev": "turbo run dev --parallel",
diff --git a/packages/auth/.eslintrc.js b/packages/auth/.eslintrc.js
deleted file mode 100644
index dc369e9..0000000
--- a/packages/auth/.eslintrc.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require("config/eslint-preset");
diff --git a/packages/auth/index.js b/packages/auth/index.js
deleted file mode 100644
index 455f0d2..0000000
--- a/packages/auth/index.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/* eslint-disable */
-
-export const  refreshTokenFlow = async (store) =>{
-    if(!localStorage.getItem('Zivero_refresh_token')){
-        return Error('No refresh token found ,Please Login Again')
-    }
-    console.log("refreshTokenFlow")
-    var timeNow = Math.floor((Date.now())/1000)
-    let isTokenExpired = timeNow < store.state.user.auth.tokenExpireAt
-    if( !store.state.user.authtoken  &&  localStorage.getItem("Zivero_refresh_token")){
-        let token = await store.dispatch("user/refreshToken");
-        return token
-    }
-    if(isTokenExpired ){
-        let token = await store.dispatch("user/refreshToken");
-        return token 
-    }
-}
-
-// export const logOut= () =>{
-//     store.dispatch("user/logOut");
-//     router.push("/login");
-
-// }
-
-// const isLoggedIn = () =>{
-//     if(store.state.user.auth.token){
-//         return true
-//     }
-    
-// }
\ No newline at end of file
diff --git a/packages/auth/package.json b/packages/auth/package.json
deleted file mode 100644
index c30eecf..0000000
--- a/packages/auth/package.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "name": "auth",
-  "version": "0.0.0",
-  "main": "index.js",
-  "license": "MIT",
-  "files": [
-    "index.js"
-  ]
- 
-}
diff --git a/packages/config/appolo-preset.js b/packages/config/appolo-preset.js
new file mode 100644
index 0000000..1d9be9e
--- /dev/null
+++ b/packages/config/appolo-preset.js
@@ -0,0 +1,11 @@
+module.exports = {
+  client: {
+    service: {
+      name: "my-app",
+      // URL to the GraphQL API
+      url: "http://localhost:8000/graphql",
+    },
+    // Files processed by the extension
+    includes: ["src/**/*.vue", "src/**/*.js"],
+  },
+};
diff --git a/packages/config/eslint-preset.js b/packages/config/eslint-preset.js
index 72ef7c8..faf5ecb 100644
--- a/packages/config/eslint-preset.js
+++ b/packages/config/eslint-preset.js
@@ -1,6 +1,4 @@
-
 module.exports = {
- 
   settings: {
     next: {
       rootDir: ["apps/*/", "packages/*/"],
@@ -9,30 +7,35 @@ module.exports = {
   env: {
     node: true,
   },
-  extends: ["prettier",'eslint:recommended', 'plugin:vue/recommended', '@vue/airbnb'],
+  extends: [
+    "eslint:recommended",
+    "plugin:vue/vue3-recommended'",
+    "@vue/airbnb",
+    "prettier",
+  ],
   plugins: ["prettier"],
   parserOptions: {
-    parser: 'babel-eslint',
+    parser: "babel-eslint",
   },
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "vue/script-setup-uses-vars": "error",
     // recommended by Vetur
-    'vue/html-self-closing': 'off',
+    "vue/html-self-closing": "off",
 
     // Disable max-len
-    'max-len': 'off',
+    "max-len": "off",
 
     // we don't want it
-    semi: ['error', 'never'],
+    semi: ["error", "never"],
 
     // add parens ony when required in arrow function
-    'arrow-parens': ['error', 'as-needed'],
+    "arrow-parens": ["error", "as-needed"],
 
     // add new line above comment
-    'lines-around-comment': [
-      'error',
+    "lines-around-comment": [
+      "error",
       {
         beforeBlockComment: true,
         beforeLineComment: true,
@@ -43,25 +46,25 @@ module.exports = {
       },
     ],
 
-    'linebreak-style': 'off',
+    "linebreak-style": "off",
 
     // add new line above comment
-    'newline-before-return': 'error',
+    "newline-before-return": "error",
 
     // add new line below import
-    'import/newline-after-import': ['error', { count: 1 }],
+    "import/newline-after-import": ["error", { count: 1 }],
 
-    'import/extensions': [
-      'error',
-      'ignorePackages',
+    "import/extensions": [
+      "error",
+      "ignorePackages",
       {
-        js: 'never',
-        jsx: 'never',
-        ts: 'never',
-        tsx: 'never',
+        js: "never",
+        jsx: "never",
+        ts: "never",
+        tsx: "never",
       },
     ],
 
-    'global-require': 'off',
+    "global-require": "off",
   },
-}
+};
diff --git a/packages/graphql-client/.eslintrc.js b/packages/graphql-client/.eslintrc.js
new file mode 100644
index 0000000..e0b422e
--- /dev/null
+++ b/packages/graphql-client/.eslintrc.js
@@ -0,0 +1 @@
+module.exports = require('config/eslint-preset')
diff --git a/packages/graphql-client/.prettierrc.js b/packages/graphql-client/.prettierrc.js
new file mode 100644
index 0000000..1260370
--- /dev/null
+++ b/packages/graphql-client/.prettierrc.js
@@ -0,0 +1 @@
+module.exports =require('config/prettier-preset')
\ No newline at end of file
diff --git a/packages/graphql-client/apollo.config.js b/packages/graphql-client/apollo.config.js
new file mode 100644
index 0000000..88a7403
--- /dev/null
+++ b/packages/graphql-client/apollo.config.js
@@ -0,0 +1 @@
+module.exports = require('config/appolo-preset')
diff --git a/packages/graphql-client/index.js b/packages/graphql-client/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/packages/graphql-config/mutations/address.js b/packages/graphql-client/mutations/address.js
similarity index 100%
rename from packages/graphql-config/mutations/address.js
rename to packages/graphql-client/mutations/address.js
diff --git a/packages/graphql-config/mutations/auth.js b/packages/graphql-client/mutations/auth.js
similarity index 100%
rename from packages/graphql-config/mutations/auth.js
rename to packages/graphql-client/mutations/auth.js
diff --git a/packages/graphql-config/mutations/cart.js b/packages/graphql-client/mutations/cart.js
similarity index 100%
rename from packages/graphql-config/mutations/cart.js
rename to packages/graphql-client/mutations/cart.js
diff --git a/packages/graphql-config/mutations/filter.js b/packages/graphql-client/mutations/filter.js
similarity index 100%
rename from packages/graphql-config/mutations/filter.js
rename to packages/graphql-client/mutations/filter.js
diff --git a/packages/graphql-config/mutations/order.js b/packages/graphql-client/mutations/order.js
similarity index 100%
rename from packages/graphql-config/mutations/order.js
rename to packages/graphql-client/mutations/order.js
diff --git a/packages/graphql-config/mutations/wishlist.js b/packages/graphql-client/mutations/wishlist.js
similarity index 100%
rename from packages/graphql-config/mutations/wishlist.js
rename to packages/graphql-client/mutations/wishlist.js
diff --git a/packages/graphql-client/package.json b/packages/graphql-client/package.json
new file mode 100644
index 0000000..0fa1158
--- /dev/null
+++ b/packages/graphql-client/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "graphql-client",
+  "version": "0.0.0",
+  "main": "index.js",
+  
+  "dependencies": {
+    "config":"*",
+    "@apollo/client": "^3.5.8",
+    "utils":"*",
+    "graphql": "^16.3.0",
+    "graphql-tag": "^2.12.6"
+  }
+}
diff --git a/packages/graphql-config/queries/address.js b/packages/graphql-client/queries/address.js
similarity index 100%
rename from packages/graphql-config/queries/address.js
rename to packages/graphql-client/queries/address.js
diff --git a/packages/graphql-config/queries/auth.js b/packages/graphql-client/queries/auth.js
similarity index 100%
rename from packages/graphql-config/queries/auth.js
rename to packages/graphql-client/queries/auth.js
diff --git a/packages/graphql-config/queries/cart.js b/packages/graphql-client/queries/cart.js
similarity index 100%
rename from packages/graphql-config/queries/cart.js
rename to packages/graphql-client/queries/cart.js
diff --git a/packages/graphql-config/queries/checkout.js b/packages/graphql-client/queries/checkout.js
similarity index 100%
rename from packages/graphql-config/queries/checkout.js
rename to packages/graphql-client/queries/checkout.js
diff --git a/packages/graphql-config/queries/filter.js b/packages/graphql-client/queries/filter.js
similarity index 100%
rename from packages/graphql-config/queries/filter.js
rename to packages/graphql-client/queries/filter.js
diff --git a/packages/graphql-config/queries/homePage.js b/packages/graphql-client/queries/homePage.js
similarity index 100%
rename from packages/graphql-config/queries/homePage.js
rename to packages/graphql-client/queries/homePage.js
diff --git a/packages/graphql-config/queries/order.js b/packages/graphql-client/queries/order.js
similarity index 100%
rename from packages/graphql-config/queries/order.js
rename to packages/graphql-client/queries/order.js
diff --git a/packages/graphql-config/queries/productQueries.js b/packages/graphql-client/queries/productQueries.js
similarity index 100%
rename from packages/graphql-config/queries/productQueries.js
rename to packages/graphql-client/queries/productQueries.js
diff --git a/packages/graphql-config/queries/queries.js b/packages/graphql-client/queries/queries.js
similarity index 100%
rename from packages/graphql-config/queries/queries.js
rename to packages/graphql-client/queries/queries.js
diff --git a/packages/graphql-config/queries/search.js b/packages/graphql-client/queries/search.js
similarity index 100%
rename from packages/graphql-config/queries/search.js
rename to packages/graphql-client/queries/search.js
diff --git a/packages/graphql-config/queries/wishlist.js b/packages/graphql-client/queries/wishlist.js
similarity index 100%
rename from packages/graphql-config/queries/wishlist.js
rename to packages/graphql-client/queries/wishlist.js
diff --git a/packages/graphql-config/schema.graphql b/packages/graphql-client/schema.graphql
similarity index 100%
rename from packages/graphql-config/schema.graphql
rename to packages/graphql-client/schema.graphql
diff --git a/packages/graphql-config/.eslintrc.js b/packages/graphql-config/.eslintrc.js
deleted file mode 100644
index dc369e9..0000000
--- a/packages/graphql-config/.eslintrc.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require("config/eslint-preset");
diff --git a/packages/graphql-config/index.js b/packages/graphql-config/index.js
deleted file mode 100644
index 238d8fb..0000000
--- a/packages/graphql-config/index.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import ApolloClient from "apollo-client";
-import { HttpLink } from "apollo-link-http";
-import { InMemoryCache } from "apollo-cache-inmemory";
-import { onError } from "apollo-link-error";
-import { ApolloLink ,concat ,fromPromise} from 'apollo-link';
-
-import {refreshTokenFlow} from "auth"
-
-
-export function createClient(store){
-
-    const authMiddleware = new ApolloLink((operation, forward) => {
-      // add the authorization to the headers
-      console.log("auth middleware")
-      console.log(store.state.user)
-      var token = store.state.user.auth.token
-      console.log("JWT",token)
-      operation.setContext({
-        headers: {
-          Authorization: token ? `JWT ${token}` : null
-        }
-      })
-    
-      return forward(operation)
-    })
-    
-    
-    const errorLink = onError(
-      ({ graphQLErrors,  operation, forward }) => {
-        console.log("hey eror in request gql")
-        if (graphQLErrors) {
-          console.log("gql-errors",graphQLErrors)
-          for (let err of graphQLErrors) {
-            console.log(err.message,err.extensions)
-            switch (err.message) {
-              case "You do not have permission to perform this action" :
-              case "You are not registerd as customer" :
-              case "Signature has expired" :
-                console.log("refreshing ")
-                return fromPromise(
-                refreshTokenFlow(store).catch((error) => {
-                    // Handle token refresh errors e.g clear stored tokens, redirect to login
-                    console.log("error while refresdhing",error)
-                    router.push("/login")
-                    return;
-                  })
-                )
-                  .filter((value) => Boolean(value))
-                  .flatMap((accessToken) => {
-                    const oldHeaders = operation.getContext().headers;
-                    // modify the operation context with a new token
-                    operation.setContext({
-                      headers: {
-                        ...oldHeaders,
-                        Authorization: `JWT ${accessToken}`,
-                      },
-                    });
-    
-                    // retry the request, returning the new observable
-                    console.log("forwarding")
-                    return forward(operation);
-                  });
-            }
-          }
-        }
-      }
-    );
-    
-
-    const link = new HttpLink({
-        uri: 'http://localhost:8000/graphql/',
-        fetch,
-        credentials: 'include',
-        onError(err) {
-            console.log(err)
-      },
-    });
-    
-    
-    return new ApolloClient({
-      link: errorLink.concat(concat(authMiddleware,link)),
-      cache: new InMemoryCache({
-        addTypename: true
-      })
-    });
-  
-}
\ No newline at end of file
diff --git a/packages/graphql-config/package.json b/packages/graphql-config/package.json
deleted file mode 100644
index 7900d6f..0000000
--- a/packages/graphql-config/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "graphql-config",
-  "version": "0.0.0",
-  "main": "index.js",
-  "license": "MIT",
-  "files": [
-    "index.js"
-  ],
-  "dependencies": {
-    "apollo-cache-inmemory": "^1.6.6",
-    "apollo-client": "^2.6.10",
-    "apollo-link": "^1.2.14",
-    "apollo-link-error": "^1.1.13",
-    "apollo-link-http": "^1.5.17",
-    "graphql": "^15.4.0",
-    "graphql-tag": "^2.11.0"
-  }
-}
diff --git a/yarn.lock b/yarn.lock
index 5253cad..76c038a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,24 @@
 # yarn lockfile v1
 
 
+"@apollo/client@^3.5.8":
+  version "3.5.8"
+  resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.5.8.tgz#7215b974c5988b6157530eb69369209210349fe0"
+  integrity sha512-MAm05+I1ullr64VLpZwon/ISnkMuNLf6vDqgo9wiMhHYBGT4yOAbAIseRdjCHZwfSx/7AUuBgaTNOssZPIr6FQ==
+  dependencies:
+    "@graphql-typed-document-node/core" "^3.0.0"
+    "@wry/context" "^0.6.0"
+    "@wry/equality" "^0.5.0"
+    "@wry/trie" "^0.3.0"
+    graphql-tag "^2.12.3"
+    hoist-non-react-statics "^3.3.2"
+    optimism "^0.16.1"
+    prop-types "^15.7.2"
+    symbol-observable "^4.0.0"
+    ts-invariant "^0.9.4"
+    tslib "^2.3.0"
+    zen-observable-ts "^1.2.0"
+
 "@babel/code-frame@7.12.11":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
@@ -969,6 +987,11 @@
   resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.0-5.tgz#6251e6917198362fa56510eb256cfb6aa6d30a32"
   integrity sha512-aNmBT4bOecrFsZTog1l6AJDQHPP3ocXV+WQ3Ogy8WZCqstB/ahfhH4CPu5i4N9Hw0MBKXqE+LX+NbUxcj8cVTw==
 
+"@graphql-typed-document-node/core@^3.0.0":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.1.1.tgz#076d78ce99822258cf813ecc1e7fa460fa74d052"
+  integrity sha512-NQ17ii0rK1b34VZonlmT2QMJFI70m0TRwbknO/ihlbatXyaktDhN/98vBiUU6kNBPljqGqyIrl2T4nY2RpFANg==
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -1001,6 +1024,11 @@
   dependencies:
     "@hapi/hoek" "^8.3.0"
 
+"@headlessui/vue@^1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@headlessui/vue/-/vue-1.4.3.tgz#685898891cde4d8a38a01945d4d84855d5fe7224"
+  integrity sha512-cDAd3aP7jH5bO2WO4eSkyQQg0k6Zw8gobl+zL8LGApqix28EtlxultyKH/mVKnbo8Kiq6IDRzwP1HfKOf1QZbQ==
+
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
@@ -1073,6 +1101,20 @@
   resolved "https://registry.yarnpkg.com/@soda/get-current-script/-/get-current-script-1.0.2.tgz#a53515db25d8038374381b73af20bb4f2e508d87"
   integrity sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==
 
+"@tailwindcss/forms@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.4.0.tgz#a46715e347a32d216a3973eb67473bd29ae3798e"
+  integrity sha512-DeaQBx6EgEeuZPQACvC+mKneJsD8am1uiJugjgQK1+/Vt+Ai0GpFBC2T2fqnUad71WgOxyrZPE6BG1VaI6YqfQ==
+  dependencies:
+    mini-svg-data-uri "^1.2.3"
+
+"@tinymce/tinymce-vue@^4":
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/@tinymce/tinymce-vue/-/tinymce-vue-4.0.5.tgz#d95e69a1053e60bc537792e5ec4dd9c34399f45e"
+  integrity sha512-PutMhPVgR+NPeu20pvTmFBY+3zKwTJqK0JPDb6QuK8u1g6Av4RaiUVS58Rft6mhoxVE99tIofdr69wOH/X0swA==
+  dependencies:
+    tinymce "^5.5.0"
+
 "@types/body-parser@*":
   version "1.19.2"
   resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.2.tgz#aea2059e28b7658639081347ac4fab3de166e6f0"
@@ -1252,6 +1294,15 @@
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-2.1.0.tgz#ddf5e0059f84f2ff649afc25ce5a59211e670542"
   integrity sha512-AZ78WxvFMYd8JmM/GBV6a6SGGTU0GgN/0/4T+FnMMsLzFEzTeAUwuraapy50ifHZsC+G5SvWs86bvaCPTneFlA==
 
+"@vue/apollo-composable@^4.0.0-alpha.16":
+  version "4.0.0-alpha.16"
+  resolved "https://registry.yarnpkg.com/@vue/apollo-composable/-/apollo-composable-4.0.0-alpha.16.tgz#f0974372b07b016271a96425c3f676588e640bf4"
+  integrity sha512-P0Zxip0idW7HAkLAmvtso+UNdTNCm+mwAKvw9Nup4MzESDvfuvhXfOxYPZCKtd4Y8fS1FZ0dBGbOrxeQHYyfwQ==
+  dependencies:
+    throttle-debounce "^3.0.1"
+    ts-essentials "^9.0.0"
+    vue-demi "^0.12.1"
+
 "@vue/babel-helper-vue-jsx-merge-props@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz#31624a7a505fb14da1d58023725a4c5f270e6a81"
@@ -1781,6 +1832,13 @@
     "@types/node" ">=6"
     tslib "^1.9.3"
 
+"@wry/context@^0.6.0":
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/@wry/context/-/context-0.6.1.tgz#c3c29c0ad622adb00f6a53303c4f965ee06ebeb2"
+  integrity sha512-LOmVnY1iTU2D8tv4Xf6MVMZZ+juIJ87Kt/plMijjN20NMAXGmH4u8bS1t0uT74cZ5gwpocYueV58YwyI8y+GKw==
+  dependencies:
+    tslib "^2.3.0"
+
 "@wry/equality@^0.1.2":
   version "0.1.11"
   resolved "https://registry.yarnpkg.com/@wry/equality/-/equality-0.1.11.tgz#35cb156e4a96695aa81a9ecc4d03787bc17f1790"
@@ -1788,6 +1846,20 @@
   dependencies:
     tslib "^1.9.3"
 
+"@wry/equality@^0.5.0":
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/@wry/equality/-/equality-0.5.2.tgz#72c8a7a7d884dff30b612f4f8464eba26c080e73"
+  integrity sha512-oVMxbUXL48EV/C0/M7gLVsoK6qRHPS85x8zECofEZOVvxGmIPLA9o5Z27cc2PoAyZz1S2VoM2A7FLAnpfGlneA==
+  dependencies:
+    tslib "^2.3.0"
+
+"@wry/trie@^0.3.0":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@wry/trie/-/trie-0.3.1.tgz#2279b790f15032f8bcea7fc944d27988e5b3b139"
+  integrity sha512-WwB53ikYudh9pIorgxrkHKrQZcCqNM/Q/bDzZBffEaGUKGuHrRb3zZUT9Sh2qw9yogC7SsdRmQ1ER0pqvd3bfw==
+  dependencies:
+    tslib "^2.3.0"
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -4984,7 +5056,7 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.9.tgz#041b05df45755e587a24942279b9d113146e1c96"
   integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==
 
-graphql-tag@^2.11.0:
+graphql-tag@^2.11.0, graphql-tag@^2.12.3, graphql-tag@^2.12.6:
   version "2.12.6"
   resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.12.6.tgz#d441a569c1d2537ef10ca3d1633b48725329b5f1"
   integrity sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==
@@ -4996,6 +5068,11 @@ graphql@^15.4.0:
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-15.8.0.tgz#33410e96b012fa3bdb1091cc99a94769db212b38"
   integrity sha512-5gghUc24tP9HRznNpV2+FIoq3xKkj5dTQqf4v0CpdPbFVwFkWoxOM+o+2OC9ZSvjEMTjfmG9QT+gcvggTwW1zw==
 
+graphql@^16.3.0:
+  version "16.3.0"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.3.0.tgz#a91e24d10babf9e60c706919bb182b53ccdffc05"
+  integrity sha512-xm+ANmA16BzCT5pLjuXySbQVFwH3oJctUVdy81w1sV0vBU0KgDdBGtxQOUd5zqOBk/JayAFeG8Dlmeq74rjm/A==
+
 gzip-size@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
@@ -5138,6 +5215,13 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hoopy@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@@ -5847,7 +5931,7 @@ js-queue@2.0.2:
   dependencies:
     easy-stack "^1.0.1"
 
-js-tokens@^4.0.0:
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
@@ -6147,6 +6231,13 @@ loglevel@^1.6.8:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.8.0.tgz#e7ec73a57e1e7b419cb6c6ac06bf050b67356114"
   integrity sha512-G6A/nJLRgWOuuwdNuA6koovfEV1YpqqAG4pRUlFaz3jj2QNZ8M4vBqnVA+HBTmU/AMNUtlOsMmSpF6NyOjztbA==
 
+loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
 lower-case@^1.1.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
@@ -6357,6 +6448,11 @@ mini-css-extract-plugin@^0.9.0:
     schema-utils "^1.0.0"
     webpack-sources "^1.1.0"
 
+mini-svg-data-uri@^1.2.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.3.tgz#43177b2e93766ba338931a3e2a84a3dfd3a222b8"
+  integrity sha512-gSfqpMRC8IxghvMcxzzmMnWpXAChSA+vy4cia33RgerMS8Fex95akUyQZPbxJJmeBGiGmK7n/1OpUX8ksRjIdA==
+
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -6828,6 +6924,14 @@ optimism@^0.10.0:
   dependencies:
     "@wry/context" "^0.4.0"
 
+optimism@^0.16.1:
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/optimism/-/optimism-0.16.1.tgz#7c8efc1f3179f18307b887e18c15c5b7133f6e7d"
+  integrity sha512-64i+Uw3otrndfq5kaoGNoY7pvOhSsjFEN4bdEFh80MWVk/dbgJfMv7VFDeCT8LxNAlEVhQmdVEbfE7X2nWNIIg==
+  dependencies:
+    "@wry/context" "^0.6.0"
+    "@wry/trie" "^0.3.0"
+
 optionator@^0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
@@ -7631,6 +7735,15 @@ promise@^8.1.0:
   dependencies:
     asap "~2.0.6"
 
+prop-types@^15.7.2:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 proxy-addr@~2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -7784,6 +7897,11 @@ raw-body@2.4.2:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+react-is@^16.13.1, react-is@^16.7.0:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
 read-pkg@^5.1.1:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
@@ -8845,6 +8963,11 @@ symbol-observable@^1.0.2:
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
 
+symbol-observable@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-4.0.0.tgz#5b425f192279e87f2f9b937ac8540d1984b39205"
+  integrity sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==
+
 table@^5.2.3:
   version "5.4.6"
   resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
@@ -8959,6 +9082,11 @@ throttle-debounce@^2.1.0:
   resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz#fd31865e66502071e411817e241465b3e9c372e2"
   integrity sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==
 
+throttle-debounce@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb"
+  integrity sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==
+
 through2@^2.0.0:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
@@ -8989,6 +9117,11 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tinymce@^5.5.0:
+  version "5.10.2"
+  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-5.10.2.tgz#cf1ff01025909be26c64348509e6de8e70d58e1d"
+  integrity sha512-5QhnZ6c8F28fYucLLc00MM37fZoAZ4g7QCYzwIl38i5TwJR5xGqzOv6YMideyLM4tytCzLCRwJoQen2LI66p5A==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -9061,6 +9194,11 @@ tryer@^1.0.1:
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
+ts-essentials@^9.0.0:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-9.1.2.tgz#46db6944b73b4cd603f3d959ef1123c16ba56f59"
+  integrity sha512-EaSmXsAhEiirrTY1Oaa7TSpei9dzuCuFPmjKRJRPamERYtfaGS8/KpOSbjergLz/Y76/aZlV9i/krgzsuWEBbg==
+
 ts-invariant@^0.4.0:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.4.4.tgz#97a523518688f93aafad01b0e80eb803eb2abd86"
@@ -9068,6 +9206,13 @@ ts-invariant@^0.4.0:
   dependencies:
     tslib "^1.9.3"
 
+ts-invariant@^0.9.4:
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.9.4.tgz#42ac6c791aade267dd9dc65276549df5c5d71cac"
+  integrity sha512-63jtX/ZSwnUNi/WhXjnK8kz4cHHpYS60AnmA6ixz17l7E12a5puCWFlNpkne5Rl0J8TBPVHpGjsj4fxs8ObVLQ==
+  dependencies:
+    tslib "^2.1.0"
+
 ts-pnp@^1.1.6:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
@@ -9088,7 +9233,7 @@ tslib@^1.10.0, tslib@^1.9.0, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.1.0:
+tslib@^2.1.0, tslib@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
@@ -9500,11 +9645,6 @@ vue-apollo@^3.0.5:
     serialize-javascript "^4.0.0"
     throttle-debounce "^2.1.0"
 
-vue-awesome@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/vue-awesome/-/vue-awesome-4.5.0.tgz#d42179335de20b53fee9bdb090498aeee1074f78"
-  integrity sha512-pbtZkRecXLm3fg0eVkwObDRM9YNU1BW5wDsL4mMoSvUXZbTnS+N2E4CahAwKJL5OPbqmhJQgZPekQoJrID7dcQ==
-
 vue-chart-3@^3.0.9:
   version "3.0.9"
   resolved "https://registry.yarnpkg.com/vue-chart-3/-/vue-chart-3-3.0.9.tgz#dc3ff3ea849f3c2798ab60a89f282a64c21efc1d"
@@ -9525,6 +9665,11 @@ vue-cli-plugin-vuetify@~2.0.7:
     semver "^7.1.2"
     shelljs "^0.8.3"
 
+vue-demi@^0.12.1:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.1.tgz#f7e18efbecffd11ab069d1472d7a06e319b4174c"
+  integrity sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==
+
 vue-eslint-parser@^7.0.0:
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz#214b5dea961007fcffb2ee65b8912307628d0daf"
@@ -9996,7 +10141,14 @@ zen-observable-ts@^0.8.21:
     tslib "^1.9.3"
     zen-observable "^0.8.0"
 
-zen-observable@^0.8.0:
+zen-observable-ts@^1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-1.2.3.tgz#c2f5ccebe812faf0cfcde547e6004f65b1a6d769"
+  integrity sha512-hc/TGiPkAWpByykMwDcem3SdUgA4We+0Qb36bItSuJC9xD0XVBZoFHYoadAomDSNf64CG8Ydj0Qb8Od8BUWz5g==
+  dependencies:
+    zen-observable "0.8.15"
+
+zen-observable@0.8.15, zen-observable@^0.8.0:
   version "0.8.15"
   resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
   integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==

From 4f5fe5a9865bdc049f4ee69ca204b949b5c84807 Mon Sep 17 00:00:00 2001
From: Aabid <mailtoaabid01@gmail.com>
Date: Fri, 4 Feb 2022 01:20:17 +0530
Subject: [PATCH 3/8] added product create form validation and image upload
 field"

---
 apps/backend/Orders/schema.py                 | 171 +++++-----
 apps/backend/cart/schema.py                   |   2 +-
 apps/backend/shop/models.py                   |   5 +
 apps/backend/shop/schema.py                   |  19 +-
 apps/frontend/admin/package.json              |  15 +-
 .../admin/src/components/BaseCardBody.vue     |   2 +-
 .../admin/src/components/BaseCardHeading.vue  |   2 +-
 .../src/components/BaseDropdownOption.vue     |  24 ++
 .../src/components/BaseDropdownSelect.vue     |  84 +++++
 .../src/components/BaseExpandableItem.vue     |   1 +
 .../admin/src/components/BaseInput.vue        |  13 +
 .../admin/src/components/BaseListItem.vue     |   9 +-
 .../src/components/BaseListItemGroup.vue      |   1 +
 .../src/components/BaseMultiselectField.vue   |  23 +-
 .../admin/src/components/BasePagination.vue   |   2 +-
 .../src/components/BaseRichTextInput.vue      |  54 ++--
 .../components/ProductCreateFormOptions.vue   |  56 ++--
 .../components/ProductCreateFormStatus.vue    |  35 +-
 .../components/ProductCreateFormVariants.vue  | 140 ++++----
 .../components/ProductCreateOrganization.vue  |  79 ++++-
 .../ProductCreateVariantsTableRow.vue         | 108 +++++++
 .../src/components/ProductImageUpload.vue     |  72 +++++
 .../ProductImageUploadThumbnail.vue           |  25 ++
 .../src/components/ProductOptionForm.vue      |  36 ++-
 .../src/components/ProductsFilterDrawer.vue   |  24 +-
 .../admin/src/components/ProductsList.vue     |   2 +-
 .../admin/src/composables/useFilters.js       |   4 +-
 .../admin/src/composables/useProducts.js      |   1 +
 apps/frontend/admin/src/index.css             |   1 +
 apps/frontend/admin/src/main.js               |   2 +-
 .../admin/src/views/ProductsCreate.vue        | 171 +++++++---
 apps/frontend/admin/tailwind.config.js        |   6 +
 packages/config/appolo-preset.js              |   3 +-
 packages/config/eslint-preset.js              |   9 +-
 packages/config/package.json                  |   8 +-
 packages/graphql-client/mutations/product.js  |  13 +
 packages/graphql-client/queries/filter.js     | 110 ++++---
 packages/utils/helpers.js                     |  17 +
 packages/utils/index.js                       |   4 +-
 yarn.lock                                     | 300 +++++++++---------
 40 files changed, 1155 insertions(+), 498 deletions(-)
 create mode 100644 apps/frontend/admin/src/components/BaseDropdownOption.vue
 create mode 100644 apps/frontend/admin/src/components/BaseDropdownSelect.vue
 create mode 100644 apps/frontend/admin/src/components/ProductCreateVariantsTableRow.vue
 create mode 100644 apps/frontend/admin/src/components/ProductImageUpload.vue
 create mode 100644 apps/frontend/admin/src/components/ProductImageUploadThumbnail.vue
 create mode 100644 packages/graphql-client/mutations/product.js
 create mode 100644 packages/utils/helpers.js

diff --git a/apps/backend/Orders/schema.py b/apps/backend/Orders/schema.py
index b9c8e24..000b3ac 100644
--- a/apps/backend/Orders/schema.py
+++ b/apps/backend/Orders/schema.py
@@ -1,14 +1,13 @@
-
-from shop.schema import ProductType,VariationType
+from shop.types import ProductType, VariationType
 
 import graphene
 from graphene import relay
 
-from graphene_django import DjangoObjectType 
+from graphene_django import DjangoObjectType
 from graphene_django.filter import DjangoFilterConnectionField
 
-from .models import Order,OrderItem
-from Users.models import User,Customer,Address
+from .models import Order, OrderItem
+from Users.models import User, Customer, Address
 from cart.cart import Cart
 from cart.models import PersistentCart
 from graphql_jwt.decorators import login_required
@@ -16,33 +15,29 @@
 
 from django_filters import FilterSet, OrderingFilter
 
-class OrderFilter(FilterSet):
 
+class OrderFilter(FilterSet):
     class Meta:
         model = Order
         fields = {
-            'id':['exact'],
-            'Customer':['exact'],
-            'paid':['exact'],
-            'payment_method':['exact'],
-            'payment_status':['exact'],
-            'created_at':['exact'],
-            'updated_at':['exact'],
-            'extra_charges':['exact'],
+            "id": ["exact"],
+            "Customer": ["exact"],
+            "paid": ["exact"],
+            "payment_method": ["exact"],
+            "payment_status": ["exact"],
+            "created_at": ["exact"],
+            "updated_at": ["exact"],
+            "extra_charges": ["exact"],
         }
 
-    order_by =OrderingFilter(
-        fields=(
-            ('updated_at', 'created_at'),
-        )
-    )
+    order_by = OrderingFilter(fields=(("updated_at", "created_at"),))
 
 
 class OrderNode(DjangoObjectType):
-    class Meta :
-        model=Order
-        interfaces = (relay.Node, )
-   
+    class Meta:
+        model = Order
+        interfaces = (relay.Node,)
+
     totalAmount = graphene.Int()
 
     def resolve_totalAmount(self, info):
@@ -51,7 +46,7 @@ def resolve_totalAmount(self, info):
 
 class OrderItemType(DjangoObjectType):
     class Meta:
-        model=OrderItem
+        model = OrderItem
 
     product = graphene.Field(lambda: ProductType)
     variation = graphene.Field(lambda: VariationType)
@@ -60,120 +55,126 @@ class Meta:
     def resolve_totalAmount(self, info):
         return self.total_amount()
 
-
     def resolve_product(self, info):
-        
+
         return self.product
 
     def resolve_variation(self, info):
-        for v in self.product.variations:        
-            if str(v._id)==self.variation_id:
+        for v in self.product.variations:
+            if str(v._id) == self.variation_id:
                 return v
 
-class Query(graphene.ObjectType):
-    #order= graphene.Field(OrderType)
-    orders=DjangoFilterConnectionField(OrderNode,filterset_class=OrderFilter)
 
-    order_items=graphene.List(OrderItemType,order_id=graphene.String())
+class Query(graphene.ObjectType):
+    # order= graphene.Field(OrderType)
+    orders = DjangoFilterConnectionField(OrderNode, filterset_class=OrderFilter)
 
-    order = relay.node.Field(OrderNode,id=graphene.String(),get_current=graphene.Boolean())
+    order_items = graphene.List(OrderItemType, order_id=graphene.String())
 
+    order = relay.node.Field(
+        OrderNode, id=graphene.String(), get_current=graphene.Boolean()
+    )
 
     @login_required
-    def resolve_order(self,info,id=None,get_current=None):
-        user=info.context.user
-        
-        if get_current :
-            session=info.context.session
-            id = session.get('order_id')
+    def resolve_order(self, info, id=None, get_current=None):
+        user = info.context.user
+
+        if get_current:
+            session = info.context.session
+            id = session.get("order_id")
             if not id:
                 raise Exception("No current / active  Order Found ")
             return Order.objects.get(id=id)
         if user.is_superuser:
             return Order.objects.get(id=id)
-        return Order.objects.get(Customer=user.customer , id=id)
-
+        return Order.objects.get(Customer=user.customer, id=id)
 
-   
     @login_required
-    def resolve_orders(self,info,**kwargs):
-        user=info.context.user
+    def resolve_orders(self, info, **kwargs):
+        user = info.context.user
         if user.is_superuser:
-            orders= OrderFilter(kwargs).qs
-            return orders 
+            orders = OrderFilter(kwargs).qs
+            return orders
         elif user.is_customer:
-            kwargs['Customer']=user.customer
-            orders= OrderFilter(kwargs).qs
+            kwargs["Customer"] = user.customer
+            orders = OrderFilter(kwargs).qs
             return orders
-        else :
+        else:
             raise Exception("YOU ARE NOT LOGGED IN")
-    
+
     @login_required
-    def resolve_order_items(self,info,order_id,**kwargs):
-        user= info.context.user
+    def resolve_order_items(self, info, order_id, **kwargs):
+        user = info.context.user
         if user.is_customer:
-            order_items=OrderItem.objects.filter(order__id=order_id,Customer__user=user)
+            order_items = OrderItem.objects.filter(
+                order__id=order_id, Customer__user=user
+            )
             return order_items
         raise Exception("You are not a customer")
 
 
 class OrderInput(graphene.InputObjectType):
-    #user=graphene.String()
-    address_id=graphene.String()
-    is_primary=graphene.Boolean()
+    # user=graphene.String()
+    address_id = graphene.String()
+    is_primary = graphene.Boolean()
 
 
 class CreateOrderMutation(graphene.Mutation):
-    order=graphene.Field(OrderNode)
-    order_items=graphene.List(OrderItemType)
+    order = graphene.Field(OrderNode)
+    order_items = graphene.List(OrderItemType)
+
     class Arguments:
-        input=OrderInput()
-    
+        input = OrderInput()
+
     @login_required
-    def mutate(root,info,input):
-        #print("input",input)
-        user=info.context.user
+    def mutate(root, info, input):
+        # print("input",input)
+        user = info.context.user
 
         if user.is_customer:
-            cart= PersistentCart.objects.get(user_id=user.id)
+            cart = PersistentCart.objects.get(user_id=user.id)
         else:
             raise Exception("You are not a customer")
 
-        if cart.total_items() <1:
+        if cart.total_items() < 1:
             raise Exception("Cart is Empty")
-        
-        customer=Customer.objects.get(user=user)
-        
-        order=Order(Customer=customer)
+
+        customer = Customer.objects.get(user=user)
+
+        order = Order(Customer=customer)
         order.save()
-        #address=Address.objects.get(pk=input.address_id)
+        # address=Address.objects.get(pk=input.address_id)
         if input.is_primary:
-            address=customer.default_address
+            address = customer.default_address
         else:
-            address=customer.Addresses.get(pk=int(input.address_id))
-        order_items=[]
+            address = customer.Addresses.get(pk=int(input.address_id))
+        order_items = []
 
         for item in cart.products():
 
             if not item.variation.available:
                 raise Exception("Product Not Available")
 
-            
-            price=int(item.price)    
+            price = int(item.price)
             product_id = item.product.id
             variation_id = item.variation._id
-            order_item=OrderItem(
-                    order=order,product_id=str(product_id),Amount=price,
-                    Address=address,Customer=customer,Quantity=item.quantity,
-                    variation_id=str(variation_id),
-                )
+            order_item = OrderItem(
+                order=order,
+                product_id=str(product_id),
+                Amount=price,
+                Address=address,
+                Customer=customer,
+                Quantity=item.quantity,
+                variation_id=str(variation_id),
+            )
 
             order_item.save()
             order_items.append(order_item)
-            session=info.context.session
-            session['order_id']=order.id
-            session.modified=True
-        return CreateOrderMutation(order=order,order_items=order_items)
+            session = info.context.session
+            session["order_id"] = order.id
+            session.modified = True
+        return CreateOrderMutation(order=order, order_items=order_items)
+
 
 class Mutation(graphene.ObjectType):
-    create_order=CreateOrderMutation.Field()
+    create_order = CreateOrderMutation.Field()
diff --git a/apps/backend/cart/schema.py b/apps/backend/cart/schema.py
index 37d1708..5c5373d 100644
--- a/apps/backend/cart/schema.py
+++ b/apps/backend/cart/schema.py
@@ -7,7 +7,7 @@
 from graphene_mongo import MongoengineObjectType
 from graphql_jwt.decorators import login_required
 from shop.models import Category, Product, Variation
-from shop.schema import CategoryType, ProductType, VariationType
+from shop.types import CategoryType, ProductType, VariationType
 from shop.utils import get_variation
 
 from .cart import Cart
diff --git a/apps/backend/shop/models.py b/apps/backend/shop/models.py
index a7c457d..88c99dc 100644
--- a/apps/backend/shop/models.py
+++ b/apps/backend/shop/models.py
@@ -1,4 +1,5 @@
 # from typing_extensions import Required
+from datetime import datetime
 import uuid
 from bson.objectid import ObjectId
 
@@ -62,6 +63,7 @@ class Product(Document):
         "strict": False,
     }
 
+    created_at = DateTimeField(default=datetime.now)
     name = StringField(max_length=100, required=False)
     brand = ReferenceField(Brand)
     category = ReferenceField(Category)
@@ -71,6 +73,9 @@ class Product(Document):
     tags = ListField(StringField(max_length=100))
     images = ListField(URLField(required=False))
     available = BooleanField()
+    quantity = IntField()
+    price = IntField(required=True)
+    discount_percent = IntField(required=False, default=0)
 
     status_choices = (
         ("archived", "archived"),
diff --git a/apps/backend/shop/schema.py b/apps/backend/shop/schema.py
index 8cc8d09..f8243d3 100644
--- a/apps/backend/shop/schema.py
+++ b/apps/backend/shop/schema.py
@@ -1,9 +1,9 @@
 import graphene
 from graphene_django.types import ObjectType
 
-from .models import Product, Category
+from .models import Product, Category, Variant
 from filters.schema import FilterInput
-from .types import *
+from .types import ProductsType, VariantType, ProductType, CategoryType
 
 
 class Query(ObjectType):
@@ -15,6 +15,7 @@ class Query(ObjectType):
     )
     product = graphene.Field(ProductType, id=graphene.String())
     categories = graphene.List(CategoryType)
+    variants = graphene.List(VariantType)
 
     def resolve_product(self, info, id, **kwargs):
         product = Product.objects(id=id).first()
@@ -25,7 +26,7 @@ def resolve_Products(self, info, filter={}, pageNb=1, **kwargs):
         # print("fetching products")
         # print("pagenb :- ",pageNb)
         limit = 30
-        offset = (pageNb - 1) * limit
+        offset = (pageNb - 1) * limitBrandType, VariationType, SubCategoryType
         if filter:
             products_set = Product().filterby(filter)
             Products = products_set[offset : (offset + limit)]
@@ -47,6 +48,9 @@ def resolve_categories(self, info, **kwargs):
         # print(categories)
         return categories
 
+    def resolve_variants(self, info, **kwargs):
+        return Variant.objects.all()
+
 
 """
 
@@ -77,7 +81,7 @@ class VariationInput(graphene.InputObjectType):
     price = graphene.Int()
     discount_percent = graphene.Int()
     images = graphene.List(graphene.String)
-    sku  = graphene.UUID()
+    sku = graphene.UUID()
     variant = graphene.List(graphene.ID)
 
 
@@ -87,12 +91,15 @@ class ProductInput(graphene.InputObjectType):
     gender = graphene.String()
     brand = graphene.String()
     category = graphene.String()
-    desscription = graphene.String()
+    description = graphene.String()
     variations = graphene.List(VariationInput)
     tags = graphene.List(graphene.String)
     images = graphene.List(graphene.String)
-    available = graphene.Boolean()
+    # available = graphene.Boolean()
     status = graphene.String()
+    price = graphene.Int()
+    quantity = graphene.Int()
+    discount_percent = graphene.Int()
 
 
 class createProduct(graphene.Mutation):
diff --git a/apps/frontend/admin/package.json b/apps/frontend/admin/package.json
index 5d19a59..6b8bcc6 100644
--- a/apps/frontend/admin/package.json
+++ b/apps/frontend/admin/package.json
@@ -15,24 +15,31 @@
     "@headlessui/vue": "^1.4.3",
     "@tinymce/tinymce-vue": "^4",
     "@vue/apollo-composable": "^4.0.0-alpha.16",
+    "@vuelidate/core": "^2.0.0-alpha.34",
+    "@vuelidate/validators": "^2.0.0-alpha.26",
     "chart.js": "^3.0.0",
+    "cloudinary-vue": "^1.2.3",
     "graphql": "^16.3.0",
+    "graphql-client": "*",
     "graphql-tag": "^2.12.6",
     "router": "^2.0.0-beta.1",
     "utils": "*",
-    "graphql-client": "*",
-   
     "vue": "^3.2.25",
     "vue-chart-3": "^3.0.9",
     "vue-router": "4",
     "vuex": "4"
   },
-  "devDependencies": {  
+  "devDependencies": {
     "@tailwindcss/forms": "^0.4.0",
     "@vitejs/plugin-vue": "^2.0.0",
+    "@vue/eslint-config-airbnb": "^5.0.2",
     "autoprefixer": "^10.4.2",
     "config": "*",
-    "eslint": "7.32.0",
+    "eslint": "^8.8.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.4.0",
     "postcss": "^8.4.5",
     "tailwindcss": "^3.0.15",
     "vite": "^2.7.2"
diff --git a/apps/frontend/admin/src/components/BaseCardBody.vue b/apps/frontend/admin/src/components/BaseCardBody.vue
index a4b4c41..a7df9eb 100644
--- a/apps/frontend/admin/src/components/BaseCardBody.vue
+++ b/apps/frontend/admin/src/components/BaseCardBody.vue
@@ -1,7 +1,7 @@
 <template>
   <Component
     :is="$props.tag"
-    class="p-3 space-y-3 overflow-hidden break-words"
+    class="p-3 space-y-3 overflow-hidden break-words font-sans"
     :class="[$props.outlinedBottom ? 'border-b' : 'border-b-none', `shadow-${$props.elevation}`]"
     v-bind="$attrs"
   >
diff --git a/apps/frontend/admin/src/components/BaseCardHeading.vue b/apps/frontend/admin/src/components/BaseCardHeading.vue
index fa7b3d0..e7eb6d2 100644
--- a/apps/frontend/admin/src/components/BaseCardHeading.vue
+++ b/apps/frontend/admin/src/components/BaseCardHeading.vue
@@ -2,7 +2,7 @@
   <Component
     :is="$props.tag"
     id="input"
-    class="p-3 font-bold text-black text-lg"
+    class="p-3 font-bold font-sans text-gray-900 text-xl"
     :class="[$props.outlinedBottom ? 'border-b' : 'border-b-none', `shadow-${$props.elevation}`]"
     v-bind="$attrs"
   >
diff --git a/apps/frontend/admin/src/components/BaseDropdownOption.vue b/apps/frontend/admin/src/components/BaseDropdownOption.vue
new file mode 100644
index 0000000..930a3c2
--- /dev/null
+++ b/apps/frontend/admin/src/components/BaseDropdownOption.vue
@@ -0,0 +1,24 @@
+<script setup>
+import { ListboxOption } from '@headlessui/vue'
+import { computed } from 'vue'
+
+defineProps(['value', 'label'])
+</script>
+
+<template>
+  <ListboxOption v-slot="{ active, selected }" :value="{ value, label }" as="template">
+    <li
+      :class="[
+        active ? 'text-amber-900 bg-amber-100' : 'text-gray-900',
+        'cursor-default select-none relative py-2 pl-10 pr-4',
+      ]"
+    >
+      <span :class="[selected ? 'font-medium' : 'font-normal', 'block truncate']">
+        <slot />
+      </span>
+      <span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600">
+        <font-awesome-icon icon="check" class="w-5 h-5" aria-hidden="true" />
+      </span>
+    </li>
+  </ListboxOption>
+</template>
diff --git a/apps/frontend/admin/src/components/BaseDropdownSelect.vue b/apps/frontend/admin/src/components/BaseDropdownSelect.vue
new file mode 100644
index 0000000..63a9bac
--- /dev/null
+++ b/apps/frontend/admin/src/components/BaseDropdownSelect.vue
@@ -0,0 +1,84 @@
+<template>
+  <Listbox v-model="selectedItem">
+    <div class="relative mt-1">
+      <ListboxLabel>{{ label }} :</ListboxLabel>
+      <ListboxButton
+        class="relative border border-gray-400 focus-visible:border-blue-400 focus:ring-1 focus:ring-blue-600 w-full py-3 pl-3 pr-10 text-left bg-white rounded-md"
+        :class="[$props.errors.length > 0 ? 'border-red-500' : 'border-gray-400']"
+      >
+        <span class="block truncate">{{ selectedItem.label }}</span>
+        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+          <font-awesome-icon class="w-5 h-5 text-gray-400" icon="sort"></font-awesome-icon>
+        </span>
+      </ListboxButton>
+      <!--errors-->
+      <div v-for="error of $props.errors" :key="error.$uid" class="mt-1">
+        <div class="text-red-600 italic text-sm">{{ error.$message }}</div>
+      </div>
+      <transition
+        leave-active-class="transition duration-100 ease-in"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <ListboxOptions
+          class="w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+        >
+          <slot />
+        </ListboxOptions>
+      </transition>
+    </div>
+  </Listbox>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { Listbox, ListboxLabel, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
+
+// import { CheckIcon, SelectorIcon } from '@heroicons/vue/solid'
+
+export { default as BaseDropdownOption } from './BaseDropdownOption.vue'
+
+export const BaseDropdownSelect = {
+  components: {
+    Listbox,
+    ListboxLabel,
+    ListboxButton,
+    ListboxOptions,
+    ListboxOption,
+
+    // CheckIcon,
+    // SelectorIcon,
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    errors: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    selectedItem: {
+      get() {
+        return this.modelValue
+      },
+      set(value) {
+        this.$emit('update:modelValue', value)
+      },
+    },
+  },
+}
+
+export default BaseDropdownSelect
+</script>
diff --git a/apps/frontend/admin/src/components/BaseExpandableItem.vue b/apps/frontend/admin/src/components/BaseExpandableItem.vue
index 60dd264..fd36130 100644
--- a/apps/frontend/admin/src/components/BaseExpandableItem.vue
+++ b/apps/frontend/admin/src/components/BaseExpandableItem.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { defineProps, ref } from 'vue'
+
 const props = defineProps(['title'])
 const active = ref(false)
 </script>
diff --git a/apps/frontend/admin/src/components/BaseInput.vue b/apps/frontend/admin/src/components/BaseInput.vue
index d3e0a6f..e78a20e 100644
--- a/apps/frontend/admin/src/components/BaseInput.vue
+++ b/apps/frontend/admin/src/components/BaseInput.vue
@@ -11,9 +11,17 @@
         `shadow-${$props.elevation}`,
 
         $props.tile ? 'rounded-none' : `rounded-${$props.rounded}`,
+
+        $props.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-text',
+
+        $props.errors.length > 0 ? 'border-red-500' : 'border-gray-400',
       ]"
       v-bind="$attrs"
     />
+
+    <div v-for="error of $props.errors" :key="error.$uid" class="mt-1">
+      <div class="text-red-600 italic text-sm">{{ error.$message }}</div>
+    </div>
   </div>
 </template>
 
@@ -25,6 +33,11 @@ export default {
       type: String,
       default: '',
     },
+
+    errors: {
+      type: Array,
+      default: () => [],
+    },
     label: {
       type: String,
       default: null,
diff --git a/apps/frontend/admin/src/components/BaseListItem.vue b/apps/frontend/admin/src/components/BaseListItem.vue
index bc65b40..2e053c0 100644
--- a/apps/frontend/admin/src/components/BaseListItem.vue
+++ b/apps/frontend/admin/src/components/BaseListItem.vue
@@ -25,9 +25,10 @@ const selectItem = () => {
 const selected = computed(() => {
   if (selectedValue.value instanceof Array) {
     return props.value in selectedValue.value
-  } else {
-    return selectedValue.value == props.value
-  }
+  } 
+    
+return selectedValue.value == props.value
+  
 })
 
 const checkbox = ref(true)
@@ -35,7 +36,7 @@ const checkbox = ref(true)
 
 <template>
   <li class="flex justify-start items-center">
-    <input type="checkbox" :checked="selected" @input="selectItem" class="mr-5" />
+    <input type="checkbox" :checked="selected" class="mr-5" @input="selectItem" />
     <div><slot /></div>
   </li>
 </template>
diff --git a/apps/frontend/admin/src/components/BaseListItemGroup.vue b/apps/frontend/admin/src/components/BaseListItemGroup.vue
index 40b207e..4a5ee52 100644
--- a/apps/frontend/admin/src/components/BaseListItemGroup.vue
+++ b/apps/frontend/admin/src/components/BaseListItemGroup.vue
@@ -12,6 +12,7 @@
 <script>
 import { computed, provide } from 'vue'
 import BaseExpandableItem from './BaseExpandableItem'
+
 export { default as BaseListItem } from './BaseListItem.vue'
 export const BaseList = {
   inheritAttrs: false,
diff --git a/apps/frontend/admin/src/components/BaseMultiselectField.vue b/apps/frontend/admin/src/components/BaseMultiselectField.vue
index 9243d2b..445c463 100644
--- a/apps/frontend/admin/src/components/BaseMultiselectField.vue
+++ b/apps/frontend/admin/src/components/BaseMultiselectField.vue
@@ -6,11 +6,15 @@ const active = ref(false)
 const props = defineProps({
   modelValue: {
     type: Array,
-    default: [],
+    default: () => [],
   },
   options: {
     type: Array,
-    default: [],
+    default: () => [],
+  },
+  errors: {
+    type: Array,
+    default: () => [],
   },
 })
 
@@ -19,7 +23,7 @@ const emit = defineEmits(['update:modelValue'])
 const selectOption = option => {
   if (props.modelValue.includes(option)) {
     // modelValue.value = modelValue.value.filter(item => item !== option)
-    let filtered = props.modelValue.filter(item => item !== option)
+    const filtered = props.modelValue.filter(item => item !== option)
     emit('update:modelValue', filtered)
   } else {
     emit('update:modelValue', [...props.modelValue, option])
@@ -32,10 +36,14 @@ const selectOption = option => {
     <div class="w-full">
       <div class="flex flex-col items-center relative">
         <div class="w-full">
-          <div class="my-2 p-1 flex border border-gray-200 bg-white rounded">
+          <div
+            class="my-2 p-1 flex border border-gray-200 bg-white rounded"
+            :class="[$props.errors.length > 0 ? 'border-red-500' : 'border-gray-400']"
+          >
             <div class="flex flex-auto items-center flex-wrap">
               <div
                 v-for="selectedOption in modelValue"
+                :key="selectedOption"
                 class="flex justify-center items-center m-1 font-medium py-1 px-2 rounded-full text-teal-700 bg-teal-100 border border-teal-300"
               >
                 <p class="text-xs font-normal leading-none max-w-full flex-initial mr-2">
@@ -60,7 +68,10 @@ const selectOption = option => {
             </div>
           </div>
         </div>
-
+        <!--errors-->
+        <div v-for="error of $props.errors" :key="error.$uid" class="mt-1">
+          <div class="text-red-600 italic text-sm">{{ error.$message }}</div>
+        </div>
         <div
           v-if="active"
           class="shadow top-100 bg-white w-full lef-0 rounded max-h-select overflow-y-auto svelte-5uyqqj"
@@ -72,11 +83,11 @@ const selectOption = option => {
               class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100"
             >
               <div
-                @click="selectOption(option)"
                 class="flex w-full items-center p-2 pl-2 relative"
                 :class="{
                   'border-l-8 border-blue-500': modelValue.includes(option),
                 }"
+                @click="selectOption(option)"
               >
                 <div class="w-full items-center flex border-3">
                   <div class="mx-2 leading-6">{{ option }}</div>
diff --git a/apps/frontend/admin/src/components/BasePagination.vue b/apps/frontend/admin/src/components/BasePagination.vue
index 8f80f8d..240dbb3 100644
--- a/apps/frontend/admin/src/components/BasePagination.vue
+++ b/apps/frontend/admin/src/components/BasePagination.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="p-3 flex flex-wrap justify-center" v-bind="$attrs">
     <button
-      class="mx-3 px-2 py-1 rounded"
       v-for="(page, i) in pagesList"
       :key="i"
+      class="mx-3 px-2 py-1 rounded"
       :disabled="page === currentPage"
       :class="{ 'bg-blue-600 text-white ': page === currentPage, 'bg-gray-50 text-gray-500': page === '...' }"
       @click="$emit('goToPage', page)"
diff --git a/apps/frontend/admin/src/components/BaseRichTextInput.vue b/apps/frontend/admin/src/components/BaseRichTextInput.vue
index a564d29..337aae4 100644
--- a/apps/frontend/admin/src/components/BaseRichTextInput.vue
+++ b/apps/frontend/admin/src/components/BaseRichTextInput.vue
@@ -1,25 +1,30 @@
 <template>
-  <editor
-    v-model="model"
-    api-key="amcbn744ff0x5gvrf8z0vvxiasj7ldn8f9cqr07cnwyugt26"
-    :init="{
-      height: 200,
-      width: '100%',
-      menubar: false,
-      plugins: [
-        'advlist autolink lists link image charmap print preview anchor',
-        'searchreplace visualblocks code fullscreen',
-        'insertdatetime media table paste code help wordcount',
-      ],
-      toolbar:
-        'undo redo | formatselect | bold italic backcolor | \
+  <div>
+    <editor
+      v-model="model"
+      api-key="amcbn744ff0x5gvrf8z0vvxiasj7ldn8f9cqr07cnwyugt26"
+      :init="{
+        height: 200,
+        width: '100%',
+        menubar: false,
+        plugins: [
+          'advlist autolink lists link image charmap print preview anchor',
+          'searchreplace visualblocks code ',
+          'insertdatetime media table paste code help wordcount',
+        ],
+        toolbar:
+          'undo redo| fullscreen | formatselect | bold italic backcolor | \
            alignleft aligncenter alignright alignjustify | \
            bullist numlist outdent indent | removeformat | help',
-    }"
-    v-bind="$attrs"
-  >
-    <slot />
-  </editor>
+      }"
+      v-bind="$attrs"
+    >
+      <slot />
+    </editor>
+    <div v-for="error of $props.errors" :key="error.$uid" class="mt-1">
+      <div class="text-red-600 italic text-sm">{{ error.$message }}</div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -30,7 +35,16 @@ export default {
   components: {
     editor: Editor,
   },
-  props: ['value'],
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+    errors: {
+      type: Array,
+      default: () => [],
+    },
+  },
   computed: {
     model: {
       get() {
diff --git a/apps/frontend/admin/src/components/ProductCreateFormOptions.vue b/apps/frontend/admin/src/components/ProductCreateFormOptions.vue
index 8228e72..ee7f49b 100644
--- a/apps/frontend/admin/src/components/ProductCreateFormOptions.vue
+++ b/apps/frontend/admin/src/components/ProductCreateFormOptions.vue
@@ -1,10 +1,19 @@
 <script setup>
+import { reactive, ref, watch, computed } from 'vue'
+import { useVuelidate } from '@vuelidate/core'
+import { required, alphaNum } from '@vuelidate/validators'
+
 import { VCard, VCardBody, VCardHeading, VCardFooter } from './AppCard.vue'
 import VInput from './BaseInput.vue'
-import { reactive, ref, watch, computed } from 'vue'
 
 import ProductOptionForm from './ProductOptionForm.vue'
 
+const listNotEmpty = value => {
+  console.log('listNotEmpty', value.length)
+
+  return value.length > 0
+}
+
 const props = defineProps({
   modelValue: {
     type: Object,
@@ -18,13 +27,6 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
-// const options = {
-//   color: ['red', 'green'],
-//   size: ['small', 'medium', 'large'],
-// }
-
-// const selectedOptions = ref({})
-
 const selectedOptions = computed({
   get: () => props.modelValue,
   set: value => {
@@ -48,14 +50,23 @@ const cleanOptions = computed(() => {
 
 const addOptionData = reactive({
   option: Object.keys(cleanOptions.value)[0],
+  // option: null,
   variants: [],
 })
 
 const editOptionData = reactive({
   option: '',
-  variants: '',
+  variants: [],
 })
 
+const rules = {
+  option: { required, alphaNum },
+  variants: { listNotEmpty, required },
+}
+
+const addValidator = useVuelidate(rules, addOptionData)
+// const editValidator = useVuelidate(rules, editOptionData)
+
 const showEditForm = option => {
   editing.value = option
   editOptionData.option = option
@@ -76,13 +87,16 @@ const editableOptions = computed(() => {
   return optionsCopy
 })
 
-const saveOption = () => {
-  console.log('onDone')
-
-  selectedOptions.value[addOptionData.option] = addOptionData.variants
-  addOptionData.option = Object.keys(cleanOptions.value)[0]
-  addOptionData.variants = []
-  addFormShown.value = false
+const saveOption = async () => {
+  const valid = await addValidator.value.$validate()
+  console.log(valid)
+  if (valid) {
+    console.log('onDone')
+    selectedOptions.value[addOptionData.option] = addOptionData.variants
+    addOptionData.option = Object.keys(cleanOptions.value)[0]
+    addOptionData.variants = []
+    addFormShown.value = false
+  }
 }
 </script>
 
@@ -90,13 +104,13 @@ const saveOption = () => {
   <v-card outlined>
     <v-card-heading>Options</v-card-heading>
 
-    <div class="border-b p-3 py-6" v-for="(values, option) in selectedOptions" :key="option">
+    <div v-for="(values, option) in selectedOptions" :key="option" class="border-b p-3 py-6">
       <!-- selected Options -->
 
       <div v-if="editing != option">
         <div class="flex justify-between">
           <span class="text-black font-bold">{{ option }}</span>
-          <button @click="showEditForm(option)" class="px-3 py-1 rounded font-thin text-black border hover:bg-gray-100">
+          <button class="px-3 py-1 rounded font-thin text-black border hover:bg-gray-100" @click="showEditForm(option)">
             Edit
           </button>
         </div>
@@ -116,7 +130,11 @@ const saveOption = () => {
     </div>
 
     <v-card-body v-if="addFormShown">
-      <product-option-form v-model="addOptionData" :options="cleanOptions"></product-option-form>
+      <product-option-form
+        v-model="addOptionData"
+        :options="cleanOptions"
+        :validator="addValidator"
+      ></product-option-form>
       <button class="px-3 py-1 rounded font-thin text-black border hover:bg-gray-100" @click="saveOption">Done</button>
     </v-card-body>
     <v-card-footer>
diff --git a/apps/frontend/admin/src/components/ProductCreateFormStatus.vue b/apps/frontend/admin/src/components/ProductCreateFormStatus.vue
index d375366..e6fa505 100644
--- a/apps/frontend/admin/src/components/ProductCreateFormStatus.vue
+++ b/apps/frontend/admin/src/components/ProductCreateFormStatus.vue
@@ -3,17 +3,9 @@
     <v-card-heading>Product Status</v-card-heading>
     <v-card-body>
       <div>
-        <select
-          id="product-status"
-          name="Product Status"
-          class="w-full border-gray-400 rounded"
-        >
-          <option value="active">
-            Active
-          </option>
-          <option value="draft">
-            Draft
-          </option>
+        <select id="product-status" name="Product Status" v-model="model" class="w-full border-gray-400 rounded">
+          <option value="active">Active</option>
+          <option value="draft">Draft</option>
         </select>
       </div>
     </v-card-body>
@@ -21,9 +13,7 @@
 </template>
 
 <script>
-import {
-  VCardFooter, VCard, VCardHeading, VCardBody,
-} from './AppCard.vue'
+import { VCardFooter, VCard, VCardHeading, VCardBody } from './AppCard.vue'
 import VInput from './BaseInput.vue'
 
 export default {
@@ -34,5 +24,22 @@ export default {
     VCardBody,
     VInput,
   },
+  props: {
+    modelValue: {
+      type: String,
+      default: 'draft',
+    },
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    model: {
+      get() {
+        return this.modelValue
+      },
+      set(value) {
+        this.$emit('update:modelValue', value)
+      },
+    },
+  },
 }
 </script>
diff --git a/apps/frontend/admin/src/components/ProductCreateFormVariants.vue b/apps/frontend/admin/src/components/ProductCreateFormVariants.vue
index 56745bb..8963069 100644
--- a/apps/frontend/admin/src/components/ProductCreateFormVariants.vue
+++ b/apps/frontend/admin/src/components/ProductCreateFormVariants.vue
@@ -1,6 +1,7 @@
 <template>
   <v-card>
     <v-card-heading> Variants </v-card-heading>
+
     <!-- {{ variantMap }} -->
     <!-- {{ variationCombinations }} -->
     <v-card-body class="'p-0">
@@ -41,43 +42,15 @@
             </thead>
 
             <tbody>
-              <tr v-for="variantCombination in variationCombinations" :key="variantLabel(variantCombination)">
-                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                  <div class="flex items-center">
-                    <!-- <div class="flex-shrink-0">
-                      <a href="#" class="block relative">
-                        <img
-                          alt="profil"
-                          src="/images/person/8.jpg"
-                          class="mx-auto object-cover rounded-full h-10 w-10"
-                        />
-                      </a>
-                    </div> -->
-                    <div class="ml-3">
-                      <p class="text-gray-900 whitespace-no-wrap">
-                        {{ variantLabel(variantCombination) }}
-                        <!-- {{ variantCombination }} -->
-                        <!-- {{ variantCombination.reduce((x, y) => x + ' / ' + y) }} -->
-                      </p>
-                    </div>
-                  </div>
-                </td>
-                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                  <v-input placeholder="$ 100"></v-input>
-                </td>
-                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                  <v-input :value="0"></v-input>
-                </td>
-                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                  <v-input></v-input>
-                </td>
-                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                  <div class="flex border border-gray-400 rounded-md text-gray-600">
-                    <button class="py-2 border-r px-5 border-gray-400 hover:bg-gray-200">Edit</button>
-                    <button class="py-2 px-5 hover:bg-gray-200">Delete</button>
-                  </div>
-                </td>
-              </tr>
+              <variants-table-row
+                v-for="variantCombination in variationCombinations"
+                :key="rowKey(variantCombination)"
+                v-model="variations[rowKey(variantCombination)]"
+                :variant-ids="getVariantIds(variantCombination)"
+                :variants="variantCombination"
+                @remove:model-value="removeVariation(rowKey(variantCombination))"
+              >
+              </variants-table-row>
             </tbody>
           </table>
         </div>
@@ -88,37 +61,55 @@
 
 <script>
 import { VCard, VCardBody, VCardHeading } from './AppCard.vue'
-import VInput from './BaseInput.vue'
+import VariantsTableRow from './ProductCreateVariantsTableRow.vue'
 
 export default {
   components: {
     VCard,
     VCardBody,
     VCardHeading,
-    VInput,
+    VariantsTableRow,
   },
   props: {
-    variants: {
+    selectedVariants: {
       type: Object,
-      default: {},
+      required: true,
+    },
+    allVariants: {
+      type: Array,
+      required: true,
     },
+    modelValue: {
+      type: Array,
+      required: true,
+    },
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      variations: {},
+    }
   },
+
   computed: {
+    // returns cartesian products of the diferent types of variants
+    // [[{color:red},{size:xl},[...]],[...]]
     variationCombinations() {
       const cartesian = (...a) => a.reduce((a, b) => a.flatMap(d => b.map(e => [d, e].flat())))
-      if (Object.keys(this.variants).length === 0) {
+      if (Object.keys(this.selectedVariants).length === 0) {
         return []
       }
-      // const combinations = cartesian(...Object.values(this.variants))
-      // return combinations
+
       return cartesian(...this.variantMap)
     },
+
+    // returns the variantsList in the form [[{color:red},{color:green}],[...]]
     variantMap() {
-      let map = []
-      Object.keys(this.variants).forEach(key => {
-        let temp = []
-        this.variants[key].forEach(value => {
-          let variant = {}
+      const map = []
+      Object.keys(this.selectedVariants).forEach(key => {
+        const temp = []
+        this.selectedVariants[key].forEach(value => {
+          const variant = {}
           variant[key] = value
           temp.push(variant)
         })
@@ -128,19 +119,50 @@ export default {
       return map
     },
   },
+  watch: {
+    variations: {
+      deep: true,
+      handler(variations) {
+        this.$emit('update:modelValue', Object.values(variations))
+      },
+    },
+  },
   methods: {
-    variantLabel(variantCombination) {
-      if (variantCombination instanceof Array) {
-        console.log(variantCombination)
-        let label = variantCombination.map(variant => {
-          // console.log(variant)
-          return Object.values(variant)[0]
+    getVariantId(variant) {
+      const key = Object.keys(variant)[0]
+      const val = variant[key]
+      let id = ''
+
+      this.allVariants.forEach(el => {
+        if (el.name === key && el.value === val) {
+          id = el.id
+        }
+      })
+
+      return id
+    },
+
+    getVariantIds(variants) {
+      const ids = []
+
+      if (variants instanceof Array) {
+        variants.forEach(variant => {
+          ids.push(this.getVariantId(variant))
         })
-        console.log(label)
-        label = label.reduce((x, y) => x + ' / ' + y)
-        return label
+      } else {
+        ids.push(this.getVariantId(variants))
       }
-      return Object.values(variantCombination)[0]
+
+      return ids
+    },
+
+    rowKey(variantCombination) {
+      const ids = this.getVariantIds(variantCombination)
+
+      return ids.join()
+    },
+    removeVariation(key) {
+      delete this.variations[key]
     },
   },
 }
diff --git a/apps/frontend/admin/src/components/ProductCreateOrganization.vue b/apps/frontend/admin/src/components/ProductCreateOrganization.vue
index a5b44c0..8421e3e 100644
--- a/apps/frontend/admin/src/components/ProductCreateOrganization.vue
+++ b/apps/frontend/admin/src/components/ProductCreateOrganization.vue
@@ -2,33 +2,82 @@
   <v-card>
     <v-card-heading> Product Organisation </v-card-heading>
     <v-card-body>
-      <v-input
-        label="Category"
-        placeholder="search categories"
-      ></v-input>
-      <v-input
-        label="Brand"
-        placeholder="search brand"
-      ></v-input>
-      <v-input
-        label="Gender"
-        placeholder="Men"
-      ></v-input>
-      <v-input label="Tags"></v-input>
+      <base-dropdown-select v-model="model['gender']" label="Select Gender" :errors="v$.model.gender.$errors">
+        <base-dropdown-option v-for="gender in options.genders" :key="gender" :label="gender" :value="gender">
+          {{ gender }}
+        </base-dropdown-option>
+      </base-dropdown-select>
+
+      <base-dropdown-select v-model="model['category']" label="Select Category" :errors="v$.model.category.$errors">
+        <base-dropdown-option
+          v-for="category in options.categories"
+          :key="category.id"
+          :label="category.name"
+          :value="category.id"
+        >
+          {{ category.name }}
+        </base-dropdown-option>
+      </base-dropdown-select>
+      <base-dropdown-select v-model="model['brand']" label="Select Brand" :errors="v$.model.brand.$errors">
+        <base-dropdown-option v-for="brand in options.brands" :key="brand.id" :label="brand.name" :value="brand.id">
+          {{ brand.name }}
+        </base-dropdown-option>
+      </base-dropdown-select>
     </v-card-body>
   </v-card>
 </template>
 
 <script>
+import { useVuelidate } from '@vuelidate/core'
+import { required, integer, minValue } from '@vuelidate/validators'
 import { VCardBody, VCard, VCardHeading } from './AppCard.vue'
-import VInput from './BaseInput.vue'
+
+import { BaseDropdownOption, BaseDropdownSelect } from './BaseDropdownSelect.vue'
 
 export default {
   components: {
     VCardHeading,
-    VInput,
     VCardBody,
     VCard,
+    BaseDropdownOption,
+    BaseDropdownSelect,
+  },
+  props: {
+    options: {
+      type: Object,
+      required: true,
+    },
+    modelValue: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  emits: ['update:modelValue'],
+
+  setup() {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+  validations() {
+    return {
+      model: {
+        gender: { required },
+        category: { required },
+        brand: { required },
+      },
+    }
+  },
+  computed: {
+    model: {
+      get() {
+        return this.modelValue
+      },
+      set(value) {
+        this.emit('update:modelValue', value)
+      },
+    },
   },
 }
 </script>
diff --git a/apps/frontend/admin/src/components/ProductCreateVariantsTableRow.vue b/apps/frontend/admin/src/components/ProductCreateVariantsTableRow.vue
new file mode 100644
index 0000000..291ea9a
--- /dev/null
+++ b/apps/frontend/admin/src/components/ProductCreateVariantsTableRow.vue
@@ -0,0 +1,108 @@
+<script setup>
+import { reactive, computed, onUnmounted } from 'vue'
+import { useVuelidate } from '@vuelidate/core'
+import { required, integer, minValue } from '@vuelidate/validators'
+import VInput from './BaseInput.vue'
+
+const props = defineProps({
+  variants: {
+    type: Array,
+    required: true,
+  },
+  variantIds: {
+    type: Array,
+    required: true,
+  },
+  modelValue: {
+    type: Object,
+    default: () => {},
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update:modelValue', 'remove:modelValue'])
+
+const variationData = computed({
+  get: () => {
+    if (props.modelValue == null || props.modelValue === undefined) {
+      return {
+        price: null,
+        quantity: null,
+        variant: props.variantIds,
+      }
+    }
+
+    return props.modelValue
+  },
+})
+
+const variantLabel = computed(() => {
+  if (props.variants instanceof Array) {
+    let label = props.variants.map(variant => Object.values(variant)[0])
+    label = label.reduce((x, y) => `${x} / ${y}`)
+
+    return label
+  }
+
+  return Object.values(props.variants)[0]
+})
+
+onUnmounted(() => {
+  emit('remove:modelValue', null)
+})
+
+const setModel = (key, value) => {
+  emit('update:modelValue', { ...variationData.value, [key]: value })
+}
+
+// validators
+const rules = {
+  price: { required, integer, minValue: 100 },
+  quantity: { required, integer, minValue: 1 },
+}
+
+const v$ = useVuelidate(rules, variationData)
+console.log(v$)
+</script>
+
+<template>
+  <tr>
+    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+      <div class="flex items-center">
+        <div class="ml-3">
+          <p class="text-gray-900 whitespace-no-wrap" @click="v$.$validate()">
+            {{ variantLabel }}
+          </p>
+        </div>
+      </div>
+    </td>
+    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm" valign="top">
+      <div>
+        <v-input
+          :value="variationData['price']"
+          placeholder="$ 100"
+          type="number"
+          :errors="v$.price.$errors"
+          @input="setModel('price', $event.target.value)"
+        />
+      </div>
+    </td>
+    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm" valign="top">
+      <v-input :value="0"></v-input>
+    </td>
+    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm" valign="top">
+      <v-input
+        :value="variationData['quantity']"
+        type="number"
+        :errors="v$.quantity.$errors"
+        @input="setModel('quantity', $event.target.value)"
+      ></v-input>
+    </td>
+    <!-- <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+      <div class="flex border border-gray-400 rounded-md text-gray-600">
+        <button class="py-2 border-r px-5 border-gray-400 hover:bg-gray-200">Edit</button>
+        <button class="py-2 px-5 hover:bg-gray-200">Delete</button>
+      </div>
+    </td> -->
+  </tr>
+</template>
diff --git a/apps/frontend/admin/src/components/ProductImageUpload.vue b/apps/frontend/admin/src/components/ProductImageUpload.vue
new file mode 100644
index 0000000..e038887
--- /dev/null
+++ b/apps/frontend/admin/src/components/ProductImageUpload.vue
@@ -0,0 +1,72 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { includeScript } from 'utils'
+import { VCard, VCardBody } from './AppCard.vue'
+import VButton from './BaseButton.vue'
+import ProductImageThumbnail from './ProductImageUploadThumbnail.vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const uploadedImages = ref([])
+
+onMounted(() => {
+  console.log('mounted')
+  includeScript('widget.cloudinary.com/v2.0/global/all.js')
+})
+
+const openUploadModel = () => {
+  window.cloudinary
+    .openUploadWidget(
+      { cloud_name: 'dh3azc5sk', upload_preset: 'e4ftjcge', return_delete_token: true },
+      (error, result) => {
+        if (!error && result && result.event === 'success') {
+          console.log('Done uploading..: ', result.info)
+          const url = result.info.secure_url
+          emit('update:modelValue', [...props.modelValue, url])
+          uploadedImages.value.push(result.info)
+        }
+      },
+    )
+    .open()
+}
+
+const deleteImage = image => {
+  console.log('deleting image', image)
+  const index = uploadedImages.value.findIndex(i => i.public_id === image.public_id)
+  uploadedImages.value.splice(index, 1)
+  emit(
+    'update:modelValue',
+    props.modelValue.filter(i => i !== image.secure_url),
+  )
+}
+</script>
+
+<template>
+  <v-card outlined>
+    <v-card-body>
+      <h3>Media</h3>
+      <div class="flex gap-2">
+        <product-image-thumbnail
+          v-for="image of uploadedImages"
+          :key="image.public_id"
+          :src="image.thumbnail_url"
+          alt="product thumbnail"
+          @remove="deleteImage(image)"
+        ></product-image-thumbnail>
+      </div>
+      <div
+        class="flex py-3 flex-col justify-center items-center w-full border-dotted border-2 border-gray-500 hover:border-blue-600 my-5 rounded-lg"
+      >
+        <v-button @click="openUploadModel"> Add File </v-button>
+        <p class="mt-5 mb-2">Add Images to show product details</p>
+      </div>
+    </v-card-body>
+  </v-card>
+</template>
diff --git a/apps/frontend/admin/src/components/ProductImageUploadThumbnail.vue b/apps/frontend/admin/src/components/ProductImageUploadThumbnail.vue
new file mode 100644
index 0000000..536236c
--- /dev/null
+++ b/apps/frontend/admin/src/components/ProductImageUploadThumbnail.vue
@@ -0,0 +1,25 @@
+<script setup>
+defineProps({
+  src: {
+    type: String,
+    default: null,
+  },
+  alt: {
+    type: String,
+    default: null,
+  },
+})
+
+defineEmits(['remove'])
+</script>
+
+<template>
+  <div class="relative hover:bg-blend-overlay p-3 border border-gray-500 shadow rounded-md">
+    <img :src="src" :alt="alt" />
+    <div class="h-full w-full bg-gray-800 absolute inset-0 opacity-0 hover:opacity-50 p-3">
+      <font-awesome-icon icon="times" class="text-white float-right cursor-pointer" @click="$emit('remove')"
+        >close</font-awesome-icon
+      >
+    </div>
+  </div>
+</template>
diff --git a/apps/frontend/admin/src/components/ProductOptionForm.vue b/apps/frontend/admin/src/components/ProductOptionForm.vue
index e66a407..ce7b5f7 100644
--- a/apps/frontend/admin/src/components/ProductOptionForm.vue
+++ b/apps/frontend/admin/src/components/ProductOptionForm.vue
@@ -1,33 +1,32 @@
 <script setup>
-import { computed, watch } from 'vue'
+import { watch } from 'vue'
+
 import DropdownField from './ProductCreateOptionsDropdownField.vue'
 import BaseMultiSelectField from './BaseMultiselectField.vue'
+
 const props = defineProps({
   modelValue: {
     type: Object,
-    default: { option: '', variants: [] },
+    default: () => ({ option: null, variants: [] }),
   },
   options: {
     type: Object,
     default: {},
   },
+  validator: {
+    type: Object,
+    required: true,
+  },
 })
 const emit = defineEmits(['update:modelValue'])
 
-// const selectedOption = computed({
-//   get: () => props.modelValue,
-//   set: value => {
-//     emit('update:modelValue', value)
-//   },
-// })
-
 watch(props.modelValue, (oldVal, newVal) => {
   console.log('watch', oldVal, newVal)
 
-  if (oldVal.option != newVal.option) {
+  if (oldVal.option !== newVal.option) {
     console.log('opdating')
 
-    let value = { ...props.modelValue, variants: [] }
+    const value = { ...props.modelValue, variants: [] }
     emit('update:modelValue', value)
   }
 })
@@ -36,14 +35,25 @@ watch(props.modelValue, (oldVal, newVal) => {
 <template>
   <div class="space-y-5">
     <p class="text-base mt-2 text-black">Option Name</p>
-    <dropdown-field :options="Object.keys(options)" v-model="modelValue.option"></dropdown-field>
 
+    <dropdown-field v-model="modelValue.option" :options="Object.keys(options)"></dropdown-field>
+    <div v-for="error of validator.option.$errors" :key="error.$uid" class="mt-1">
+      <div class="text-red-600 italic text-sm">{{ error.$message }}</div>
+    </div>
     <div class="space-y-3 z-0">
       <p class="text-base mt-2 text-black">Option Values</p>
       <base-multi-select-field
-        :options="options[modelValue.option]"
         v-model="modelValue.variants"
+        :errors="validator.variants.$errors"
+        :options="options[modelValue.option]"
       ></base-multi-select-field>
     </div>
+
+    <!-- <button
+      class="my-3 px-3 py-1 rounded font-thin text-black border border-gray-500 hover:bg-gray-100"
+      @click="saveOption"
+    >
+      Done
+    </button> -->
   </div>
 </template>
diff --git a/apps/frontend/admin/src/components/ProductsFilterDrawer.vue b/apps/frontend/admin/src/components/ProductsFilterDrawer.vue
index 32f97ac..698866b 100644
--- a/apps/frontend/admin/src/components/ProductsFilterDrawer.vue
+++ b/apps/frontend/admin/src/components/ProductsFilterDrawer.vue
@@ -3,13 +3,13 @@ import { reactive, ref } from 'vue'
 import useFilters from '../composables/useFilters'
 import BaseNavDrawer from './BaseNavDrawer.vue'
 import BaseExpandableItem from './BaseExpandableItem.vue'
-import { BaseListItem } from './BaseListItemGroup.vue'
-import BaseListItemGroup from './BaseListItemGroup.vue'
+import BaseListItemGroup, { BaseListItem } from './BaseListItemGroup.vue'
 import { pageNo } from '../composables/useProducts'
-let props = defineProps(['isOpen', 'toggleDrawer'])
 
-let { fetchFilters, setInputFilter, filterState } = useFilters()
-let { result, error, loading } = fetchFilters()
+const props = defineProps(['isOpen', 'toggleDrawer'])
+
+const { fetchFilters, setInputFilter, filterState } = useFilters()
+const { result, error, loading } = fetchFilters()
 
 const selectedFilters = reactive({})
 
@@ -22,21 +22,21 @@ const saveFilters = () => {
 </script>
 
 <template>
-  <base-nav-drawer :isOpen="$props.isOpen" toggle="$props.toggleDrawer" panel-title="More Filters">
+  <base-nav-drawer :is-open="$props.isOpen" toggle="$props.toggleDrawer" panel-title="More Filters">
     <div v-if="!loading">
       <ul>
-        <base-list-item-group title="gender" v-model="selectedFilters.gender">
+        <base-list-item-group v-model="selectedFilters.gender" title="gender">
           <base-list-item v-for="gender in result.filters.genders" :key="gender" :value="gender">
             {{ gender }}
           </base-list-item>
         </base-list-item-group>
-        <base-list-item-group title="categories" multiselect v-model="selectedFilters.categories">
-          <base-list-item :value="category.id" v-for="category in result.filters.categories" :key="category.id">{{
+        <base-list-item-group v-model="selectedFilters.categories" title="categories" multiselect>
+          <base-list-item v-for="category in result.filters.categories" :key="category.id" :value="category.id">{{
             category.name
           }}</base-list-item>
         </base-list-item-group>
-        <base-list-item-group multiselect title="brands" v-model="selectedFilters.brands">
-          <base-list-item :value="brand.id" v-for="brand in result.filters.brands" :key="brand.id">{{
+        <base-list-item-group v-model="selectedFilters.brands" multiselect title="brands">
+          <base-list-item v-for="brand in result.filters.brands" :key="brand.id" :value="brand.id">{{
             brand.name
           }}</base-list-item>
         </base-list-item-group>
@@ -51,7 +51,7 @@ const saveFilters = () => {
     </div>
     <div class="flex justify-between py-5 px-3">
       <button class="px-3 py-2 border rounded-md text-gray-400">Clear Filters</button>
-      <button @click="saveFilters" class="px-3 mx-5 py-2 border rounded-md text-white bg-green-800">Done</button>
+      <button class="px-3 mx-5 py-2 border rounded-md text-white bg-green-800" @click="saveFilters">Done</button>
     </div>
   </base-nav-drawer>
 </template>
diff --git a/apps/frontend/admin/src/components/ProductsList.vue b/apps/frontend/admin/src/components/ProductsList.vue
index cd9aed2..ad82413 100644
--- a/apps/frontend/admin/src/components/ProductsList.vue
+++ b/apps/frontend/admin/src/components/ProductsList.vue
@@ -39,7 +39,7 @@
       </div>
     </div>
     <v-card-footer>
-      <v-pagination @goToPage="loadPage" :totalPages="totalPages" :currentPage="currentPage"></v-pagination>
+      <v-pagination :total-pages="totalPages" :current-page="currentPage" @goToPage="loadPage"></v-pagination>
     </v-card-footer>
   </v-card>
 </template>
diff --git a/apps/frontend/admin/src/composables/useFilters.js b/apps/frontend/admin/src/composables/useFilters.js
index 60a0058..9e9399d 100644
--- a/apps/frontend/admin/src/composables/useFilters.js
+++ b/apps/frontend/admin/src/composables/useFilters.js
@@ -36,7 +36,7 @@ const filterState = ref({
 })
 
 const useFilters = () => {
-  const getFilters = () => useQuery(fetchFilters, filterState.filterInput)
+  const getFilters = () => useQuery(fetchFilters, filterState.value.filterInput)
 
   // const setInputFilter = (type, value) => {
   //   filterState.filterInput[type] = value
@@ -48,7 +48,7 @@ const useFilters = () => {
 
   return {
     fetchFilters: getFilters,
-    filterState: filterState,
+    filterState,
     setInputFilter,
   }
 }
diff --git a/apps/frontend/admin/src/composables/useProducts.js b/apps/frontend/admin/src/composables/useProducts.js
index 449e7cd..f8b243f 100644
--- a/apps/frontend/admin/src/composables/useProducts.js
+++ b/apps/frontend/admin/src/composables/useProducts.js
@@ -27,6 +27,7 @@ export default () => {
 
     return data.Products.totalPages
   })
+
   // implementing total pages this way breaks rectivity of variables
 
   const loadPage = page => {
diff --git a/apps/frontend/admin/src/index.css b/apps/frontend/admin/src/index.css
index bd6213e..2eb9368 100644
--- a/apps/frontend/admin/src/index.css
+++ b/apps/frontend/admin/src/index.css
@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
\ No newline at end of file
diff --git a/apps/frontend/admin/src/main.js b/apps/frontend/admin/src/main.js
index e1ea1ed..e6c4947 100644
--- a/apps/frontend/admin/src/main.js
+++ b/apps/frontend/admin/src/main.js
@@ -24,7 +24,7 @@ const app = createApp({
 
   render: () => h(App),
 })
-app.component('font-awesome-icon', FontAwesomeIcon)
+app.component('FontAwesomeIcon', FontAwesomeIcon)
 app.use(store)
 app.use(router)
 app.mount('#app')
diff --git a/apps/frontend/admin/src/views/ProductsCreate.vue b/apps/frontend/admin/src/views/ProductsCreate.vue
index 5e44f5f..ec1c998 100644
--- a/apps/frontend/admin/src/views/ProductsCreate.vue
+++ b/apps/frontend/admin/src/views/ProductsCreate.vue
@@ -6,38 +6,43 @@
           <font-awesome-icon icon="arrow-left"></font-awesome-icon>
         </span>
         <span class="px-3 font-bold"> Add A Product</span>
-        {{ productData }}
-        selected options {{ selectedOptions }}
       </div>
     </div>
     <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
       <div class="col-span-2 h-auto pb-20 space-y-5">
         <v-card outlined>
           <v-card-body>
-            <v-input v-model="productData.name" :label="'name'" outlined placeholder="name"></v-input>
-            <v-rich-text v-model="productData.description"></v-rich-text>
+            <v-input
+              v-model="productData.name"
+              :label="'name'"
+              :errors="v$.productData.name.$errors"
+              outlined
+              placeholder="name"
+            ></v-input>
+            <v-rich-text v-model="productData.description" :errors="v$.productData.description.$errors"></v-rich-text>
           </v-card-body>
         </v-card>
 
-        <v-card outlined>
-          <v-card-body>
-            <div>
-              <p class="text-black text-lg font-bold my-3">Add Media</p>
-              <p class="mt-5 mb-2">Add Images to show product details</p>
-            </div>
-            <div
-              class="flex justify-center items-center h-28 w-full border-dotted border-2 border-gray-500 hover:border-blue-600 my-5 rounded-lg"
-            >
-              <v-button> Add File </v-button>
-            </div>
-          </v-card-body>
-        </v-card>
+        <product-image-upload v-model="productData.images"></product-image-upload>
+
         <v-card outlined class="space-y-3">
           <v-card-heading>Pricing</v-card-heading>
           <v-card-body>
             <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
-              <v-input v-model="productData.price" label="Price" type="number"></v-input>
-              <v-input v-model="productData.discountPercent" label="Discount Percent" type="number"></v-input>
+              <v-input
+                min="0"
+                v-model="productData.price"
+                :errors="v$.productData.price.$errors"
+                label="Price"
+                type="number"
+              ></v-input>
+              <v-input
+                min="0"
+                v-model="productData.discountPercent"
+                :errors="v$.productData.discountPercent.$errors"
+                label="Discount Percent"
+                type="number"
+              ></v-input>
             </div>
           </v-card-body>
           <v-card-footer>
@@ -55,25 +60,48 @@
           </v-card-body>
           <v-card-footer>
             <p class="text-lg font-bold text-black">Quantity</p>
-            <v-input class="w-1/2" type="number" v-model="productData.quantity"></v-input>
+            <v-input
+              v-model="productData.quantity"
+              class="w-1/2"
+              type="number"
+              :errors="v$.productData.quantity.$errors"
+            ></v-input>
             <p class="text-sm">Customers wont see it</p>
           </v-card-footer>
         </v-card>
-        <variant-options v-model="selectedOptions" :options="variantOptions"></variant-options>
-        {{ variationCombinations }}
-        <variantions-field :variants="selectedOptions" v-model="productData.variations"></variantions-field>
+
+        <variant-options v-model="selectedOptions" :options="cleanOptions"></variant-options>
+        <variantions-field
+          v-if="Object.keys(selectedOptions).length > 0"
+          ref="variationsField"
+          v-model="productData.variations"
+          :selected-variants="selectedOptions"
+          :all-variants="variantOptions"
+        ></variantions-field>
       </div>
       <!--end col 1-->
 
       <div class="space-y-3">
-        <product-status-field></product-status-field>
+        <product-status-field v-model="productData.status"></product-status-field>
 
-        <product-organization></product-organization>
+        <product-organization
+          ref="productOrganisation"
+          v-model="productOrganizationData"
+          :options="productOrganisationOptions"
+        ></product-organization>
       </div>
     </div>
+
+    <v-button @click="saveProduct"> Save Product </v-button>
   </div>
 </template>
 <script>
+import { computed } from 'vue'
+import { useMutation, useQuery, useResult } from '@vue/apollo-composable'
+import { getProductCreateData } from 'graphql-client/queries/filter'
+import { useVuelidate } from '@vuelidate/core'
+import { required, integer, minValue } from '@vuelidate/validators'
+import { CREATE_PRODUCT } from 'graphql-client/mutations/product'
 import { VCard, VCardBody, VCardHeading, VCardFooter } from '../components/AppCard.vue'
 import VInput from '../components/BaseInput.vue'
 import VRichText from '../components/BaseRichTextInput.vue'
@@ -82,6 +110,7 @@ import VariantOptions from '../components/ProductCreateFormOptions.vue'
 import VariantionsField from '../components/ProductCreateFormVariants.vue'
 import ProductStatusField from '../components/ProductCreateFormStatus.vue'
 import ProductOrganization from '../components/ProductCreateOrganization.vue'
+import ProductImageUpload from '../components/ProductImageUpload.vue'
 
 export default {
   components: {
@@ -96,31 +125,97 @@ export default {
     ProductStatusField,
     VariantionsField,
     ProductOrganization,
+    ProductImageUpload,
   },
-  data() {
+
+  setup() {
+    const { result, loading } = useQuery(getProductCreateData)
+    const variantOptions = useResult(result, {}, data => data.variants)
+    const productOrganisationOptions = useResult(result, {}, data => data.filters)
+    const cleanOptions = computed(() => {
+      if (loading.value) {
+        return {}
+      }
+      const Options = {}
+
+      variantOptions.value.forEach(element => {
+        if (element.name in Options) {
+          Options[element.name].push(element.value)
+        } else {
+          Options[element.name] = [element.value]
+        }
+      })
+
+      return Options
+    })
+
+    const { mutate: createProduct } = useMutation(CREATE_PRODUCT)
+    const v$ = useVuelidate()
+
     return {
-      variantOptions: {
-        color: ['red', 'green'],
-        size: ['small', 'medium', 'large'],
-      },
+      cleanOptions,
+      productOrganisationOptions,
+      variantOptions,
+      createProduct,
+      v$,
+    }
+  },
 
+  data() {
+    return {
       selectedOptions: {},
 
       productData: {
         name: '',
-        brand: '',
-        category: '',
         description: '',
         variations: [],
-        tags: '',
-        images: '',
-        status: '',
-        price: '',
-        discountPercent: '',
+        tags: [],
+        images: [],
+        status: 'draft',
+        price: null,
+        discountPercent: null,
+        quantity: null,
+      },
+      productOrganizationData: {
+        brand: '',
+        category: '',
+        gender: '',
       },
     }
   },
+  validations: () => ({
+    productData: {
+      name: { required },
+      description: { required },
+      price: { required, integer, minValue: 10 },
+      discountPercent: { required, integer },
+      quantity: { required, integer },
+    },
+  }),
+
+  computed: {
+    cleanedProductOrganisationData() {
+      const clean = {}
+      Object.keys(this.productOrganizationData).forEach(key => {
+        clean[key] = this.productOrganizationData[key].value
+      })
 
-  computed: {},
+      return clean
+    },
+  },
+
+  methods: {
+    saveProduct() {
+      console.log('saving')
+      if (
+        this.v$.$validate() &&
+        this.$refs.productOrganization.v$.$validate() &&
+        this.$refs.variantionsField.v$.$validate()
+      ) {
+        const ProductInput = { ...this.productData, ...this.cleanedProductOrganisationData }
+        this.createProduct({ ProductInput })
+      }
+    },
+  },
 }
 </script>
diff --git a/apps/frontend/admin/tailwind.config.js b/apps/frontend/admin/tailwind.config.js
index 10bf8b5..2793a73 100644
--- a/apps/frontend/admin/tailwind.config.js
+++ b/apps/frontend/admin/tailwind.config.js
@@ -5,6 +5,12 @@ module.exports = {
 
   theme: {
     extend: {
+      fontFamily: {
+        sans: ['Poppins', 'Roboto', 'sans-serif'],
+        serif: ['Playfair Display', 'serif'],
+        body: ['Poppins', 'sans-serif'],
+        display: ['Playfair Display', 'serif'],
+      },
       colors: {
         primary: '#DEB992',
         secondary: '#e98074',
diff --git a/packages/config/appolo-preset.js b/packages/config/appolo-preset.js
index 1d9be9e..0e29831 100644
--- a/packages/config/appolo-preset.js
+++ b/packages/config/appolo-preset.js
@@ -3,7 +3,8 @@ module.exports = {
     service: {
       name: "my-app",
       // URL to the GraphQL API
-      url: "http://localhost:8000/graphql",
+      // url: "http://localhost:8000/graphql",
+      schema: "./schema.graphql",
     },
     // Files processed by the extension
     includes: ["src/**/*.vue", "src/**/*.js"],
diff --git a/packages/config/eslint-preset.js b/packages/config/eslint-preset.js
index faf5ecb..461da9e 100644
--- a/packages/config/eslint-preset.js
+++ b/packages/config/eslint-preset.js
@@ -9,14 +9,15 @@ module.exports = {
   },
   extends: [
     "eslint:recommended",
-    "plugin:vue/vue3-recommended'",
+    "plugin:vue/vue3-recommended",
     "@vue/airbnb",
     "prettier",
   ],
   plugins: ["prettier"],
-  parserOptions: {
-    parser: "babel-eslint",
-  },
+  parser: "vue-eslint-parser",
+  // parserOptions: {
+  //   parser: "babel-eslint",
+  // },
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
diff --git a/packages/config/package.json b/packages/config/package.json
index cc32679..811d4a0 100644
--- a/packages/config/package.json
+++ b/packages/config/package.json
@@ -4,13 +4,17 @@
   "main": "index.js",
   "license": "MIT",
   "files": [
-    "eslint-preset.js"
+    "eslint-preset.js",
+    "appolo-preset.js",
+    "prettier-preset.js",
+    "schema.graphql"
   ],
   "dependencies": {
     "@vue/eslint-config-airbnb": "^5.0.2",
+    "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^6.2.2"
+    "eslint-plugin-vue": "^8.4.0"
   }
 }
diff --git a/packages/graphql-client/mutations/product.js b/packages/graphql-client/mutations/product.js
new file mode 100644
index 0000000..bfd7959
--- /dev/null
+++ b/packages/graphql-client/mutations/product.js
@@ -0,0 +1,13 @@
+import gql from 'graphql-tag'
+
+export const CREATE_PRODUCT = gql`
+  mutation CreateProduct($ProductInput: ProductInput!) {
+    createProduct(pd: $ProductInput) {
+      product {
+        id
+      }
+    }
+  }
+`
+
+export const Create = ''
diff --git a/packages/graphql-client/queries/filter.js b/packages/graphql-client/queries/filter.js
index 2cb4421..a543203 100644
--- a/packages/graphql-client/queries/filter.js
+++ b/packages/graphql-client/queries/filter.js
@@ -1,60 +1,88 @@
-import gql from 'graphql-tag';
+import gql from 'graphql-tag'
 
+export const fetchFilters = gql`
+  query {
+    filters {
+      genders
 
-export const fetchFilters =gql`
-query{
-  filters{
-    genders
-    
-    categories{
-      id
-      name
-    }
-    variationFilters{
-      filter
-      values
+      categories {
+        id
+        name
+      }
+      variationFilters {
+        filter
+        values
+      }
+      brands {
+        id
+        name
+      }
+      tags
     }
-   brands{
-     id
-     name
-   }
-   tags
   }
-}
 `
 
 export const fetchPopularCategories = gql`
-query{
-  filters{
-    categories{
-      id
-      name
-    }
-    genders
-    brands{
-      id
-      name
+  query {
+    filters {
+      categories {
+        id
+        name
+      }
+      genders
+      brands {
+        id
+        name
+      }
     }
   }
-}
 `
 
 export const fetchCategories = gql`
-query{
- categories{
-  name
-  image  
-}
-}
+  query {
+    categories {
+      name
+      image
+    }
+  }
 `
 
 export const fetchBrands = gql`
-query{
-  filters{
-    brands{
+  query {
+    filters {
+      brands {
+        id
+        logo
+        name
+      }
+    }
+  }
+`
+
+export const getProductCreateData = gql`
+  query {
+    filters {
+      genders
+
+      categories {
+        id
+        name
+      }
+      variationFilters {
+        filter
+        values
+      }
+      brands {
+        id
+        name
+      }
+      tags
+    }
+
+    variants {
       id
-      logo
       name
+      value
     }
   }
-}`
+`
diff --git a/packages/utils/helpers.js b/packages/utils/helpers.js
new file mode 100644
index 0000000..649a60c
--- /dev/null
+++ b/packages/utils/helpers.js
@@ -0,0 +1,17 @@
+export function includeScript(URL, callback) {
+  let documentTag = document,
+    tag = "script",
+    object = documentTag.createElement(tag),
+    scriptTag = documentTag.getElementsByTagName(tag)[0];
+  object.src = "//" + URL;
+  if (callback) {
+    object.addEventListener(
+      "load",
+      function (e) {
+        callback(null, e);
+      },
+      false
+    );
+  }
+  scriptTag.parentNode.insertBefore(object, scriptTag);
+}
diff --git a/packages/utils/index.js b/packages/utils/index.js
index a563fa0..5ca3e56 100644
--- a/packages/utils/index.js
+++ b/packages/utils/index.js
@@ -1,3 +1,3 @@
 import { navigationGaurd } from "./router";
-
-export { navigationGaurd };
+import { includeScript } from "./helpers";
+export { navigationGaurd, includeScript };
diff --git a/yarn.lock b/yarn.lock
index 76c038a..3ae5fdb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -20,13 +20,6 @@
     tslib "^2.3.0"
     zen-observable-ts "^1.2.0"
 
-"@babel/code-frame@7.12.11":
-  version "7.12.11"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
-  integrity sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==
-  dependencies:
-    "@babel/highlight" "^7.10.4"
-
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
@@ -276,7 +269,7 @@
     "@babel/traverse" "^7.16.7"
     "@babel/types" "^7.16.7"
 
-"@babel/highlight@^7.10.4", "@babel/highlight@^7.16.7":
+"@babel/highlight@^7.16.7":
   version "7.16.10"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.10.tgz#744f2eb81579d6eea753c227b0f570ad785aba88"
   integrity sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==
@@ -948,18 +941,18 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
-"@eslint/eslintrc@^0.4.3":
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
-  integrity sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==
+"@eslint/eslintrc@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.0.5.tgz#33f1b838dbf1f923bfa517e008362b78ddbbf318"
+  integrity sha512-BLxsnmK3KyPunz5wmCCpqy0YelEoxxGmH73Is+Z74oOTMtExcjkr3dDR6quwrjh1YspA8DH9gnX1o069KiS9AQ==
   dependencies:
     ajv "^6.12.4"
-    debug "^4.1.1"
-    espree "^7.3.0"
+    debug "^4.3.2"
+    espree "^9.2.0"
     globals "^13.9.0"
     ignore "^4.0.6"
     import-fresh "^3.2.1"
-    js-yaml "^3.13.1"
+    js-yaml "^4.1.0"
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
@@ -1029,16 +1022,16 @@
   resolved "https://registry.yarnpkg.com/@headlessui/vue/-/vue-1.4.3.tgz#685898891cde4d8a38a01945d4d84855d5fe7224"
   integrity sha512-cDAd3aP7jH5bO2WO4eSkyQQg0k6Zw8gobl+zL8LGApqix28EtlxultyKH/mVKnbo8Kiq6IDRzwP1HfKOf1QZbQ==
 
-"@humanwhocodes/config-array@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
-  integrity sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==
+"@humanwhocodes/config-array@^0.9.2":
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.3.tgz#f2564c744b387775b436418491f15fce6601f63e"
+  integrity sha512-3xSMlXHh03hCcCmFc0rbKp3Ivt2PFEJnQUJDDMTJQ2wkECZWdq4GePs2ctc5H8zV+cHPaq8k2vU8mrQjA6iHdQ==
   dependencies:
-    "@humanwhocodes/object-schema" "^1.2.0"
+    "@humanwhocodes/object-schema" "^1.2.1"
     debug "^4.1.1"
     minimatch "^3.0.4"
 
-"@humanwhocodes/object-schema@^1.2.0":
+"@humanwhocodes/object-schema@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
@@ -1679,6 +1672,20 @@
   resolved "https://registry.yarnpkg.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz#b6b40a7625429d2bd7c2281ddba601ed05dc7f1a"
   integrity sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==
 
+"@vuelidate/core@^2.0.0-alpha.34":
+  version "2.0.0-alpha.34"
+  resolved "https://registry.yarnpkg.com/@vuelidate/core/-/core-2.0.0-alpha.34.tgz#4a2ce2ae18c8ffadb76b296b2c7c0e10a2f48a37"
+  integrity sha512-8SHViBA+bBaXGH8UwcdGG7vEQ8mG8rhtsddJiq9Abz9YvzWxFxd8spAhe9ggfCtyRuvwCCpPbxx63NOGThVZkQ==
+  dependencies:
+    vue-demi "^0.12.0"
+
+"@vuelidate/validators@^2.0.0-alpha.26":
+  version "2.0.0-alpha.26"
+  resolved "https://registry.yarnpkg.com/@vuelidate/validators/-/validators-2.0.0-alpha.26.tgz#dbea8d44b7607ac0b4dced36ea3e4641f1617942"
+  integrity sha512-O53AU/dGMMOEPMC6bqhs9JvJAz03z0lLxIDq1tL8bWZylzRWeuF9a2sERxy82t2MnQ+ag15tUpTFpTbaYBm9tg==
+  dependencies:
+    vue-demi "^0.12.0"
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -1907,6 +1914,11 @@ acorn@^7.0.0, acorn@^7.1.1, acorn@^7.4.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
+acorn@^8.7.0:
+  version "8.7.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.0.tgz#90951fde0f8f09df93549481e5fc141445b791cf"
+  integrity sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==
+
 address@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
@@ -1932,16 +1944,6 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^8.0.1:
-  version "8.9.0"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.9.0.tgz#738019146638824dea25edcf299dcba1b0e7eb18"
-  integrity sha512-qOKJyNj/h+OWx7s5DePL6Zu1KeM9jPZhwBqs+7DzP6bGOvqzVCSf0xueYmVuaC/oQ/VtS2zLMLHdQFbkka+XDQ==
-  dependencies:
-    fast-deep-equal "^3.1.1"
-    json-schema-traverse "^1.0.0"
-    require-from-string "^2.0.2"
-    uri-js "^4.2.2"
-
 alphanum-sort@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
@@ -1952,11 +1954,6 @@ ansi-colors@^3.0.0:
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
   integrity sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==
 
-ansi-colors@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
-  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
-
 ansi-escapes@^4.2.1:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
@@ -2121,6 +2118,11 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
 arr-diff@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
@@ -2238,11 +2240,6 @@ astral-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
   integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
 
-astral-regex@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
-  integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
-
 async-each@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
@@ -2968,6 +2965,18 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
+cloudinary-core@^2.10.3:
+  version "2.12.3"
+  resolved "https://registry.yarnpkg.com/cloudinary-core/-/cloudinary-core-2.12.3.tgz#6482e472944214ff905c4852da0a4afce14dec2b"
+  integrity sha512-Ll4eDzcrIVn4zCttMh3Mdi+KNz07p5EEjBT2PQSRx8Eok1lKPt3uBBenOk/w88RKK3B8SFIWcEe/mN4BHQ0p8A==
+
+cloudinary-vue@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/cloudinary-vue/-/cloudinary-vue-1.2.3.tgz#bed730efb4d2ba7d1e2a866a9b085031d764ed88"
+  integrity sha512-KC3FQkfO2CW2kN6jCBQGX1k+s9hVW3YWF0IUS4Osbo+DK8/OSDXQ6iNy0NX2275wVTW5HXCCcXVq0gqOH5myfg==
+  dependencies:
+    cloudinary-core "^2.10.3"
+
 coa@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
@@ -3509,7 +3518,7 @@ debug@^3.1.1, debug@^3.2.6, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
+debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2:
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
   integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
@@ -3907,13 +3916,6 @@ enhanced-resolve@^4.5.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
-enquirer@^2.3.5:
-  version "2.3.6"
-  resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
-  integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
-  dependencies:
-    ansi-colors "^4.1.1"
-
 entities@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
@@ -4196,6 +4198,16 @@ eslint-plugin-vue@^6.2.2:
     semver "^5.6.0"
     vue-eslint-parser "^7.0.0"
 
+eslint-plugin-vue@^8.4.0:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-8.4.0.tgz#16e59b356386b4428fb7d886b6d8ee5df2bbc09d"
+  integrity sha512-Ga96QRG8GA9AyzKtEDxqYRCMt/VJM4SLkcNmm4FvUiFBE4jpaBr25unRBi9iVmHLYhA9EZ/4I+jD8n1vfWzyAA==
+  dependencies:
+    eslint-utils "^3.0.0"
+    natural-compare "^1.4.0"
+    semver "^7.3.5"
+    vue-eslint-parser "^8.0.1"
+
 eslint-scope@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848"
@@ -4212,6 +4224,14 @@ eslint-scope@^5.0.0, eslint-scope@^5.1.1:
     esrecurse "^4.3.0"
     estraverse "^4.1.1"
 
+eslint-scope@^7.0.0, eslint-scope@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.1.0.tgz#c1f6ea30ac583031f203d65c73e723b01298f153"
+  integrity sha512-aWwkhnS0qAXqNOgKOK0dJ2nvzEbhEvpy8OlJ9kZ0FeZnA6zpjv1/Vei+puGFFX7zkPCkHHXb7IDX3A+7yPrRWg==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
+
 eslint-utils@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
@@ -4219,14 +4239,14 @@ eslint-utils@^1.4.3:
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
-eslint-utils@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
-  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
+eslint-utils@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-3.0.0.tgz#8aebaface7345bb33559db0a1f13a1d2d48c3672"
+  integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==
   dependencies:
-    eslint-visitor-keys "^1.1.0"
+    eslint-visitor-keys "^2.0.0"
 
-eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
+eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
   integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
@@ -4236,51 +4256,10 @@ eslint-visitor-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
 
-eslint@7.32.0:
-  version "7.32.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d"
-  integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==
-  dependencies:
-    "@babel/code-frame" "7.12.11"
-    "@eslint/eslintrc" "^0.4.3"
-    "@humanwhocodes/config-array" "^0.5.0"
-    ajv "^6.10.0"
-    chalk "^4.0.0"
-    cross-spawn "^7.0.2"
-    debug "^4.0.1"
-    doctrine "^3.0.0"
-    enquirer "^2.3.5"
-    escape-string-regexp "^4.0.0"
-    eslint-scope "^5.1.1"
-    eslint-utils "^2.1.0"
-    eslint-visitor-keys "^2.0.0"
-    espree "^7.3.1"
-    esquery "^1.4.0"
-    esutils "^2.0.2"
-    fast-deep-equal "^3.1.3"
-    file-entry-cache "^6.0.1"
-    functional-red-black-tree "^1.0.1"
-    glob-parent "^5.1.2"
-    globals "^13.6.0"
-    ignore "^4.0.6"
-    import-fresh "^3.0.0"
-    imurmurhash "^0.1.4"
-    is-glob "^4.0.0"
-    js-yaml "^3.13.1"
-    json-stable-stringify-without-jsonify "^1.0.1"
-    levn "^0.4.1"
-    lodash.merge "^4.6.2"
-    minimatch "^3.0.4"
-    natural-compare "^1.4.0"
-    optionator "^0.9.1"
-    progress "^2.0.0"
-    regexpp "^3.1.0"
-    semver "^7.2.1"
-    strip-ansi "^6.0.0"
-    strip-json-comments "^3.1.0"
-    table "^6.0.9"
-    text-table "^0.2.0"
-    v8-compile-cache "^2.0.3"
+eslint-visitor-keys@^3.1.0, eslint-visitor-keys@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.2.0.tgz#6fbb166a6798ee5991358bc2daa1ba76cc1254a1"
+  integrity sha512-IOzT0X126zn7ALX0dwFiUQEdsfzrm4+ISsQS8nukaJXwEyYKRSnEIIDULYg1mCtGp7UUXgfGl7BIolXREQK+XQ==
 
 eslint@^6.8.0:
   version "6.8.0"
@@ -4325,6 +4304,47 @@ eslint@^6.8.0:
     text-table "^0.2.0"
     v8-compile-cache "^2.0.3"
 
+eslint@^8.8.0:
+  version "8.8.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.8.0.tgz#9762b49abad0cb4952539ffdb0a046392e571a2d"
+  integrity sha512-H3KXAzQGBH1plhYS3okDix2ZthuYJlQQEGE5k0IKuEqUSiyu4AmxxlJ2MtTYeJ3xB4jDhcYCwGOg2TXYdnDXlQ==
+  dependencies:
+    "@eslint/eslintrc" "^1.0.5"
+    "@humanwhocodes/config-array" "^0.9.2"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    doctrine "^3.0.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.1.0"
+    eslint-utils "^3.0.0"
+    eslint-visitor-keys "^3.2.0"
+    espree "^9.3.0"
+    esquery "^1.4.0"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    functional-red-black-tree "^1.0.1"
+    glob-parent "^6.0.1"
+    globals "^13.6.0"
+    ignore "^5.2.0"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    js-yaml "^4.1.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.0.4"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    regexpp "^3.2.0"
+    strip-ansi "^6.0.1"
+    strip-json-comments "^3.1.0"
+    text-table "^0.2.0"
+    v8-compile-cache "^2.0.3"
+
 espree@^6.1.2, espree@^6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
@@ -4334,14 +4354,14 @@ espree@^6.1.2, espree@^6.2.1:
     acorn-jsx "^5.2.0"
     eslint-visitor-keys "^1.1.0"
 
-espree@^7.3.0, espree@^7.3.1:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.1.tgz#f2df330b752c6f55019f8bd89b7660039c1bbbb6"
-  integrity sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==
+espree@^9.0.0, espree@^9.2.0, espree@^9.3.0:
+  version "9.3.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.3.0.tgz#c1240d79183b72aaee6ccfa5a90bc9111df085a8"
+  integrity sha512-d/5nCsb0JcqsSEeQzFZ8DH1RmxPcglRWh24EFTlUEmCKoehXGdpsx0RkHDubqUI8LSAIKMQp4r9SzQ3n+sm4HQ==
   dependencies:
-    acorn "^7.4.0"
+    acorn "^8.7.0"
     acorn-jsx "^5.3.1"
-    eslint-visitor-keys "^1.3.0"
+    eslint-visitor-keys "^3.1.0"
 
 esprima@^4.0.0:
   version "4.0.1"
@@ -4971,7 +4991,7 @@ glob-parent@^5.0.0, glob-parent@^5.1.2, glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
-glob-parent@^6.0.2:
+glob-parent@^6.0.1, glob-parent@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
   integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
@@ -5417,6 +5437,11 @@ ignore@^4.0.3, ignore@^4.0.6:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
+ignore@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
+  integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
+
 immutable@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
@@ -5944,6 +5969,13 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
+js-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
 jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
@@ -5974,11 +6006,6 @@ json-schema-traverse@^0.4.1:
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
   integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
-json-schema-traverse@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
-  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
-
 json-schema@0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.4.0.tgz#f7de4cf6efab838ebaeb3236474cbba5a1930ab5"
@@ -6204,11 +6231,6 @@ lodash.transform@^4.6.0:
   resolved "https://registry.yarnpkg.com/lodash.transform/-/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0"
   integrity sha1-EjBkIvYzJK7YSD0/ODMrX2cFR6A=
 
-lodash.truncate@^4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
-  integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
-
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -8002,7 +8024,7 @@ regexpp@^2.0.1:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
   integrity sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==
 
-regexpp@^3.1.0:
+regexpp@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
@@ -8093,11 +8115,6 @@ require-directory@^2.1.1:
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
   integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
 
-require-from-string@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
-  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
-
 require-main-filename@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
@@ -8355,7 +8372,7 @@ semver@^6.0.0, semver@^6.1.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^7.1.2, semver@^7.2.1:
+semver@^7.1.2, semver@^7.3.5:
   version "7.3.5"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
   integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
@@ -8534,15 +8551,6 @@ slice-ansi@^2.1.0:
     astral-regex "^1.0.0"
     is-fullwidth-code-point "^2.0.0"
 
-slice-ansi@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
-  integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
-  dependencies:
-    ansi-styles "^4.0.0"
-    astral-regex "^2.0.0"
-    is-fullwidth-code-point "^3.0.0"
-
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@@ -8978,17 +8986,6 @@ table@^5.2.3:
     slice-ansi "^2.1.0"
     string-width "^3.0.0"
 
-table@^6.0.9:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/table/-/table-6.8.0.tgz#87e28f14fa4321c3377ba286f07b79b281a3b3ca"
-  integrity sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==
-  dependencies:
-    ajv "^8.0.1"
-    lodash.truncate "^4.4.2"
-    slice-ansi "^4.0.0"
-    string-width "^4.2.3"
-    strip-ansi "^6.0.1"
-
 tailwindcss@^3.0.15:
   version "3.0.15"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.0.15.tgz#e4db219771eb7678a3bfd97b3f6c8fe20be0a410"
@@ -9665,7 +9662,7 @@ vue-cli-plugin-vuetify@~2.0.7:
     semver "^7.1.2"
     shelljs "^0.8.3"
 
-vue-demi@^0.12.1:
+vue-demi@^0.12.0, vue-demi@^0.12.1:
   version "0.12.1"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.1.tgz#f7e18efbecffd11ab069d1472d7a06e319b4174c"
   integrity sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==
@@ -9683,6 +9680,19 @@ vue-eslint-parser@^7.0.0:
     lodash "^4.17.21"
     semver "^6.3.0"
 
+vue-eslint-parser@^8.0.1:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-8.2.0.tgz#8c3990deb901b0d528d99f4d052a831cd1d0284c"
+  integrity sha512-hvl8OVT8imlKk/lQyhkshqwQQChzHETcBd5abiO4ePw7ib7QUZLfW+2TUrJHKUvFOCFRJrDin5KJO9OHzB5bRQ==
+  dependencies:
+    debug "^4.3.2"
+    eslint-scope "^7.0.0"
+    eslint-visitor-keys "^3.1.0"
+    espree "^9.0.0"
+    esquery "^1.4.0"
+    lodash "^4.17.21"
+    semver "^7.3.5"
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"

From ea6d96033f8c7c55609c3e646ac6cafd3c474cb5 Mon Sep 17 00:00:00 2001
From: Aabid <mailtoaabid01@gmail.com>
Date: Sat, 5 Feb 2022 22:46:57 +0530
Subject: [PATCH 4/8] feat: [admin,backend] added product edit , product create
 and delete pages

---
 apps/backend/Zivero/settings.py               |   7 +-
 apps/backend/core/db.py                       |   1 +
 apps/backend/filters/schema.py                | 179 ++++-------
 apps/backend/shop/models.py                   |  20 +-
 apps/backend/shop/schema.py                   |  89 ++++--
 .../admin/src/components/AppSideBar.vue       |  41 +--
 .../admin/src/components/BaseButton.vue       |  34 +-
 .../admin/src/components/BaseCardHeading.vue  |   4 +-
 .../src/components/BaseLoadingSpinner.vue     |   6 +
 .../src/components/BaseMultiselectField.vue   |   4 +-
 .../components/ProductCreateFormOptions.vue   |   7 +-
 .../components/ProductCreateFormVariants.vue  |  39 +++
 .../ProductCreateVariantsTableRow.vue         |   5 +-
 .../src/components/ProductImageUpload.vue     |  18 ++
 .../admin/src/components/ProductsList.vue     |  33 +-
 .../src/components/ProductsListTable.vue      |  15 +-
 .../admin/src/components/SortDropdownMenu.vue |  89 ++++++
 .../admin/src/composables/useFilters.js       |  25 +-
 .../src/composables/useVariantsValidator.js   |  14 +
 apps/frontend/admin/src/router/index.js       |   4 +-
 apps/frontend/admin/src/views/ProductEdit.vue | 297 ++++++++++++++++++
 .../admin/src/views/ProductsCreate.vue        |  40 ++-
 apps/frontend/admin/tailwind.config.js        |  11 +-
 packages/graphql-client/mutations/product.js  |  41 ++-
 .../graphql-client/queries/productQueries.js  | 186 +++++++----
 25 files changed, 913 insertions(+), 296 deletions(-)
 create mode 100644 apps/backend/core/db.py
 create mode 100644 apps/frontend/admin/src/components/BaseLoadingSpinner.vue
 create mode 100644 apps/frontend/admin/src/components/SortDropdownMenu.vue
 create mode 100644 apps/frontend/admin/src/composables/useVariantsValidator.js
 create mode 100644 apps/frontend/admin/src/views/ProductEdit.vue

diff --git a/apps/backend/Zivero/settings.py b/apps/backend/Zivero/settings.py
index 0b4f218..5519126 100644
--- a/apps/backend/Zivero/settings.py
+++ b/apps/backend/Zivero/settings.py
@@ -6,10 +6,9 @@
 
 # connect('zivero',host='mongodb://localhost:27017')
 # connect('products',host='mongodb://25.19.8.34:27017')
-try:
-    connect('zivero', host='mongodb+srv://test-user:M7AbnQx3MQLZErZ@cluster0.n9vpu.mongodb.net/zivero?retryWrites=true&w=majority')
-except:
-    pass
+
+connect('zivero', host='mongodb+srv://test-user:M7AbnQx3MQLZErZ@cluster0.n9vpu.mongodb.net/zivero?retryWrites=true&w=majority')
+
 
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
diff --git a/apps/backend/core/db.py b/apps/backend/core/db.py
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/apps/backend/core/db.py
@@ -0,0 +1 @@
+
diff --git a/apps/backend/filters/schema.py b/apps/backend/filters/schema.py
index 16da091..d6d309a 100644
--- a/apps/backend/filters/schema.py
+++ b/apps/backend/filters/schema.py
@@ -1,10 +1,11 @@
-#from Users.schema import UpdateAddressMutation
+# from Users.schema import UpdateAddressMutation
 from unicodedata import category
 import graphene
 from graphene_mongo import MongoengineObjectType
 from importlib_metadata import List
 from shop.models import Brand, SubCategory, Category, Product, Variant
-from shop.types import BrandType,CategoryType
+from shop.types import BrandType, CategoryType
+
 
 class sub_filter(graphene.ObjectType):
     filter = graphene.String()
@@ -21,7 +22,7 @@ class FilterType(graphene.ObjectType):
 
 
 def variant_values(variant_filter):  # returns values for a variant filter
-    return [v for v in Variant.objects(name=variant_filter).distinct('value')]
+    return [v for v in Variant.objects(name=variant_filter).distinct("value")]
 
 
 class FiltersQuery(graphene.ObjectType):
@@ -31,24 +32,26 @@ def resolve_filters(self, info, **kwargs):
         # categories = [c.name for c in Category.objects.only('name')]
         categories = Category.objects.all()
         sub_categories = [s.name for s in SubCategory.objects.all()]
-        variant_filters = [v for v in Variant.objects().distinct('name')]
-        #print(variant_filters)
+        variant_filters = [v for v in Variant.objects().distinct("name")]
+        # print(variant_filters)
 
         variation_filters = [
-            {'filter': f, 'values': variant_values(f)} for f in variant_filters]
-        #print(variation_filters)
-
-        product_brands =  Brand.objects.all() 
-        #print(product_brands)
-        tags = [t for t in Product.objects().distinct('tags')]
-        filter = {'categories': categories,
-                  'sub_categories_filters': sub_categories,
-                  'genders': [choice for choice, _ in Category.gender_choices],
-                  # product related like brand
-                  'brands':product_brands,
-                  'variation_filters': variation_filters,
-                  'tags': tags
-                  }
+            {"filter": f, "values": variant_values(f)} for f in variant_filters
+        ]
+        # print(variation_filters)
+
+        product_brands = Brand.objects.all()
+        # print(product_brands)
+        tags = [t for t in Product.objects().distinct("tags")]
+        filter = {
+            "categories": categories,
+            "sub_categories_filters": sub_categories,
+            "genders": [choice for choice, _ in Category.gender_choices],
+            # product related like brand
+            "brands": product_brands,
+            "variation_filters": variation_filters,
+            "tags": tags,
+        }
 
         return filter
 
@@ -61,22 +64,22 @@ class VariantsFilterInput(graphene.InputObjectType):
 class SortOptions(graphene.Enum):
     PriceLowToHigh = "variations__price"
     PriceHighToLow = "-variations__price"
-    WhatsNew = "-date_created"
-    BetterDiscount ="-variations__discount_percent"
-    Popularity ="-popularity"
-
-
+    WhatsNew = "-created_at"
+    BetterDiscount = "-variations__discount_percent"
+    Popularity = "-popularity"
 
 
 class FilterInput(graphene.InputObjectType):
     categories = graphene.List(graphene.String, required=False)
     gender = graphene.String(required=False)
+    status = graphene.String(required=False)
     sub_categories = graphene.List(graphene.String, required=False)
     brands = graphene.List(graphene.String, required=False)
     variant_filters = graphene.List(VariantsFilterInput, required=False)
     tags = graphene.List(graphene.String, required=False)
     sort_by = graphene.Field(SortOptions)
 
+
 ##### custom filter to use in model #######
 
 
@@ -84,123 +87,78 @@ class FilterInput(graphene.InputObjectType):
 # currently updates categories and brands acoording to gender and also brands according to categories
 # also needs to update gender and categories according to brand
 
-def cleaned_filter(filter):
-    cleaned_filter={}
-    for k,v in filter.items(): 
-        if type(v)== list and (None not in v) and len(v)>0:
-            cleaned_filter[k]=v
-        elif type(v)== str and (v != None):
-            cleaned_filter[k]=v
-    return cleaned_filter       
-
- 
 
+def cleaned_filter(filter):
+    cleaned_filter = {}
+    for k, v in filter.items():
+        if type(v) == list and (None not in v) and len(v) > 0:
+            cleaned_filter[k] = v
+        elif type(v) == str and (v != None):
+            cleaned_filter[k] = v
+    return cleaned_filter
 
 
 def update_filter(filter):
-    print("raw",filter)
+    print("raw", filter)
     filter = cleaned_filter(filter)
-    print("cleaned filter",filter)
+    print("cleaned filter", filter)
     if filter.get("gender"):
         in_genders = [filter.get("gender")]
     else:
-        in_genders=None
+        in_genders = None
     in_categories = filter.get("categories")
     in_brands = filter.get("brands")
     categories = None
     product_brands = None
     genders = None
-    print(in_brands,in_categories,in_genders)
+    print(in_brands, in_categories, in_genders)
     # category_names = None
     # if the user has already selected all filters thers no update .. we are skipping updates for variant filters
-    if len(filter) >=3 :
+    if len(filter) >= 3:
 
         return {"categories": categories, "brands": product_brands, "genders": genders}
 
-    if in_genders and in_categories :
+    if in_genders and in_categories:
         # update_brands
-        print("c",in_categories)
-        categories_= Category.objects(id__in =in_categories,gender__in=in_genders)
+        print("c", in_categories)
+        categories_ = Category.objects(id__in=in_categories, gender__in=in_genders)
         print(categories_)
-        product_brands = { brand  for category  in categories_ for brand in  category.brands }
+        product_brands = {
+            brand for category in categories_ for brand in category.brands
+        }
 
-    elif in_genders and in_brands :
+    elif in_genders and in_brands:
         # update_categorie
-        categories = Category.objects(genders__in = in_genders,brands__in=in_brands)
+        categories = Category.objects(genders__in=in_genders, brands__in=in_brands)
         # category_names=[category.name for category in categories_]
-    
-    elif in_categories and in_brands :
-        # update genders 
-        categories_ = Category.objects(id__in=in_categories,brands__in=in_brands)
-        genders = {gender for category in categories_ for gender in category.genders }
 
-    elif in_genders :
+    elif in_categories and in_brands:
+        # update genders
+        categories_ = Category.objects(id__in=in_categories, brands__in=in_brands)
+        genders = {gender for category in categories_ for gender in category.genders}
+
+    elif in_genders:
         # update brands and cats
         categories = Category.objects(genders__in=in_genders)
-        product_brands = { brand  for category  in categories for brand in  category.brands }
-        # category_names=[category.name for category in categories_]    
-    elif in_categories :
+        product_brands = {brand for category in categories for brand in category.brands}
+        # category_names=[category.name for category in categories_]
+    elif in_categories:
         # update genders and brands
         categories_ = Category.objects(id__in=in_categories)
-        genders = {gender for category in categories_ for gender in category.genders }
-        product_brands = { brand  for category  in categories_ for brand in  category.brands }
-        
+        genders = {gender for category in categories_ for gender in category.genders}
+        product_brands = {
+            brand for category in categories_ for brand in category.brands
+        }
 
-    elif in_brands :
+    elif in_brands:
         # update genders and categories
         categories = Category.objects(brands__in=in_brands)
-        genders = {gender for category in categories for gender in category.genders }
+        genders = {gender for category in categories for gender in category.genders}
         # category_names=[category.name for category in categories_]
-        
+
     data = {"categories": categories, "brands": product_brands, "genders": genders}
     print(data)
     return data
-    
-    #print("cleaned Filter", filter)
-
-    # if len(filter) >= 2:
-    #     return {"categories": category_names, "brands": product_brands, "genders": genders}
-    # # if in_genders and in_categories:
-    # #     cats= Category.objects(name__in=in_categories)
-    # #     product_brands=[p for p in Product.objects(
-    # #
-    # #          category__in=cats ).distinct('brand')]
-
-    # if filter.get("genders"):
-    #     #print("genders")
-    #     # update
-    #     categories = [c for c in Category.objects(
-    #         gender__in=filter["genders"])]
-    #     category_names = [c.name for c in categories]
-    #     categories_ = [c.id for c in categories]
-    #     product_brands = [p for p in Product.objects(
-    #         category__in=categories_).distinct('brand')]
-    # elif filter.get("categories"):
-    #     categories_ = [c
-    #                    for c in Category.objects(name__in=filter["categories"])]
-    #     genders = []
-    #     for c in categories_:
-    #         if c.gender not in genders:
-    #             genders.append(c.gender)
-    #     product_brands = [p for p in Product.objects(
-    #         category__in=categories_).distinct('brand')]
-    # elif filter.get("brands"):
-    #     categories = [c for c in Product.objects(
-    #         brand__in=filter["brands"]).distinct("category")]
-    #     category_names = [c.name for c in categories]
-    #     #categories = products.distinct("category")
-    #     genders = []
-    #     for c in categories:
-    #         if c.gender not in genders:
-    #             genders.append(c.gender)
-    #     #print(categories, genders)
-
-    # data = {"categories": category_names,
-    #         "brands": product_brands, "genders": genders}
-    # #print("data")
-    # #print(data)
-    # return data
-    # #variantFilters = Product.objects(category=filter["category"]).distinct("variant")
 
 
 class UpdateFilterMutation(graphene.Mutation):
@@ -210,15 +168,10 @@ class Arguments:
         filter = FilterInput()
 
     def mutate(self, info, filter):
-        #print("filter updates", filter)
+        # print("filter updates", filter)
         filter_updates = update_filter(filter)
-        return UpdateFilterMutation(updated_filters=filter_updates
-                                    )
+        return UpdateFilterMutation(updated_filters=filter_updates)
 
 
 class Mutation(graphene.ObjectType):
     updateFilters = UpdateFilterMutation.Field()
-
-
-if __name__ == '__main__':
-    pass
diff --git a/apps/backend/shop/models.py b/apps/backend/shop/models.py
index 88c99dc..07e99c1 100644
--- a/apps/backend/shop/models.py
+++ b/apps/backend/shop/models.py
@@ -60,22 +60,22 @@ class Product(Document):
 
     meta = {
         "collection": "products",
-        "strict": False,
+        "strict": True,
     }
 
     created_at = DateTimeField(default=datetime.now)
-    name = StringField(max_length=100, required=False)
-    brand = ReferenceField(Brand)
-    category = ReferenceField(Category)
+    name = StringField(max_length=100, required=True)
+    brand = ReferenceField(Brand, required=True)
+    category = ReferenceField(Category, required=True)
     # sub_category= ReferenceField(SubCategory)
-    description = StringField(required=False, max_length=2000)
+    description = StringField(required=True, max_length=2000)
     variations = ListField(EmbeddedDocumentField(Variation))
     tags = ListField(StringField(max_length=100))
-    images = ListField(URLField(required=False))
+    images = ListField(URLField(required=True))
     available = BooleanField()
-    quantity = IntField()
+    quantity = IntField(required=True)
     price = IntField(required=True)
-    discount_percent = IntField(required=False, default=0)
+    discount_percent = IntField(required=True, default=0)
 
     status_choices = (
         ("archived", "archived"),
@@ -93,7 +93,7 @@ class Product(Document):
         ("KIDS", "kids"),
         ("NEUTRAL", "neutral"),
     )
-    gender = StringField(choices=gender_choices)
+    gender = StringField(choices=gender_choices, required=True)
     # gender here will help with filtering the product from like category tshir but gender BOY
 
     @property
@@ -110,7 +110,7 @@ def available_variants(self):
         return variants
 
     def filterby(self, data):  # usually the input from graphene schema i.e FilterInput
-        filter = {}
+        filter = {"status": data["status"]}
         print(data)
 
         if data.categories:
diff --git a/apps/backend/shop/schema.py b/apps/backend/shop/schema.py
index f8243d3..ac6c67f 100644
--- a/apps/backend/shop/schema.py
+++ b/apps/backend/shop/schema.py
@@ -1,6 +1,7 @@
 import graphene
 from graphene_django.types import ObjectType
-
+from numpy import equal
+import bson
 from .models import Product, Category, Variant
 from filters.schema import FilterInput
 from .types import ProductsType, VariantType, ProductType, CategoryType
@@ -25,8 +26,12 @@ def resolve_product(self, info, id, **kwargs):
     def resolve_Products(self, info, filter={}, pageNb=1, **kwargs):
         # print("fetching products")
         # print("pagenb :- ",pageNb)
+
+        if not info.context.user.is_superuser:
+            filter["status"] = "active"
+
         limit = 30
-        offset = (pageNb - 1) * limitBrandType, VariationType, SubCategoryType
+        offset = (pageNb - 1) * limit
         if filter:
             products_set = Product().filterby(filter)
             Products = products_set[offset : (offset + limit)]
@@ -52,28 +57,6 @@ def resolve_variants(self, info, **kwargs):
         return Variant.objects.all()
 
 
-"""
-
-
-class Variant(Document):
-    name = StringField()
-    value = StringField(unique=True)
-
-
-class Variation(EmbeddedDocument):
-    _id = ObjectIdField(required=True, default=lambda: ObjectId())
-    variant = ListField(ReferenceField(Variant))
-    sku = UUIDField(default=lambda: (uuid.uuid4()))
-    quantity = IntField()
-    available = BooleanField(default=True)
-    price = IntField(required=True)
-    discount_percent = IntField(required=False, default=0)
-    images = ListField(URLField())
-    meta = {"strict": False}
-
-"""
-
-
 class VariationInput(graphene.InputObjectType):
 
     quantity = graphene.Int()
@@ -118,5 +101,63 @@ def mutate(root, info, pd):
         return createProduct(product=product)
 
 
+def clean_product_variation(data):
+    copy = {k: v for k, v in data.items() if v != None}
+    variants_cleaned = [bson.ObjectId(variant) for variant in data.variant]
+    copy["variant"] = variants_cleaned
+    return copy
+
+
+def clean_product_update_input(data):
+    copy = {k: v for k, v in data.items() if v != None}
+    brand = copy.get("brand")
+    category = copy.get("category")
+    if brand:
+        copy["brand"] = bson.ObjectId(brand)
+    if category:
+        copy["category"] = bson.ObjectId(category)
+
+    variations_copy = []
+    for variation in copy["variations"]:
+        variations_copy.append(clean_product_variation(variation))
+
+    copy["variations"] = variations_copy
+
+    return copy
+
+
+class updateProduct(graphene.Mutation):
+
+    product = graphene.Field(ProductType)
+
+    class Arguments:
+        id = graphene.String()
+        pd = ProductInput()
+
+    def mutate(root, info, id, pd):
+        product = Product.objects(id=id).first()
+        clean_input = clean_product_update_input(pd)
+        print(clean_input)
+
+        product.update(**clean_input)
+        product.reload()
+        return updateProduct(product=product)
+
+
+class deleteProduct(graphene.Mutation):
+
+    product = graphene.Field(ProductType)
+
+    class Arguments:
+        id = graphene.String()
+
+    def mutate(root, info, id):
+        product = Product.objects(id=id).first()
+        product.delete()
+        return deleteProduct(product=product)
+
+
 class Mutation(graphene.ObjectType):
     create_product = createProduct.Field()
+    update_product = updateProduct.Field()
+    delete_product = deleteProduct.Field()
diff --git a/apps/frontend/admin/src/components/AppSideBar.vue b/apps/frontend/admin/src/components/AppSideBar.vue
index 224d7f8..490534b 100644
--- a/apps/frontend/admin/src/components/AppSideBar.vue
+++ b/apps/frontend/admin/src/components/AppSideBar.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
 import useNavdrawer from '../composables/useNavdrawer'
 
 const menuItems = {
@@ -31,49 +31,28 @@ const menuItems = {
 
 const { toggleDrawer, isDrawerOpen } = useNavdrawer()
 console.log('isOpen', isDrawerOpen)
-const active = ref('home')
-function clickMenuLink(key) {
-  active.value = key
-}
+
+const route = useRoute()
 </script>
 
 <template>
-  <transition
-    name="fade"
-    :duration="1000"
-  >
+  <transition name="fade" :duration="1000">
     <nav
       v-if="isDrawerOpen"
       class="drawer fixed top-0 bottom-0 w-2/3 bg-white h-auto z-50 md:pt-16 md:z-0 p-5 md:w-60 border-r-2 shadow-sm md:shadow-none"
     >
       <div class="text-right px-4 text-xl md:hidden w-full">
-        <font-awesome-icon
-          icon="times"
-          @click="toggleDrawer"
-        ></font-awesome-icon>
+        <font-awesome-icon icon="times" @click="toggleDrawer"></font-awesome-icon>
       </div>
 
-      <div
-        v-for="(item, key) in menuItems"
-        :key="key"
-      >
-        <router-link
-          :to="item.to"
-          :class="active == key ? 'nav-link-active' : 'nav-link'"
-        >
+      <div v-for="(item, key) in menuItems" :key="key">
+        <router-link :to="item.to" :class="route.name == item.to.name ? 'nav-link-active' : 'nav-link'">
           <font-awesome-icon :icon="item.icon" />
-          <span
-            class="mx-4 text-lg font-bold"
-            @click="clickMenuLink(key)"
-          > {{ key }} </span>
+          <span class="mx-4 text-lg font-bold"> {{ key }} </span>
         </router-link>
 
-        <div v-show="active == key">
-          <a
-            v-for="(submenu, key_) in item.submenu"
-            :key="key_"
-            class="nav-link"
-          >
+        <div v-show="route.name == item.to.name">
+          <a v-for="(submenu, key_) in item.submenu" :key="key_" class="nav-link">
             <font-awesome-icon :icon="submenu.icon" />
             <span class="pl-8 text-lg font-normal"> {{ key_ }} </span>
             <span class="flex-grow text-right"> </span>
diff --git a/apps/frontend/admin/src/components/BaseButton.vue b/apps/frontend/admin/src/components/BaseButton.vue
index e4a0ecf..e3ed25d 100644
--- a/apps/frontend/admin/src/components/BaseButton.vue
+++ b/apps/frontend/admin/src/components/BaseButton.vue
@@ -1,7 +1,37 @@
+<script setup>
+defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  primary: {
+    type: Boolean,
+    default: true,
+  },
+})
+</script>
+
 <template>
   <button
-    class="text-center capitalize bg-teal-200 block py-2 px-5 rounded text-teal-600 transition-all ease-in-out duration-300 hover:bg-teal-300 hover:text-teal-800"
+    class="text-center uppercase font-sans block py-2 px-5 rounded text-white transition-all ease-in-out duration-300 hover:scale-105"
+    :class="{
+      'bg-teal-700 hover:bg-teal-600': primary,
+      'bg-gray-400 cursor-not-allowed': disabled,
+      'bg-gray-400 cursor-wait': loading,
+    }"
+    v-bind="$attrs"
   >
-    <slot> </slot>
+    <div class="flex gap-2">
+      <slot> </slot>
+      <div
+        v-if="loading"
+        style="border-top-color: transparent"
+        class="w-5 h-5 border-4 border-white border-solid rounded-full animate-spin"
+      ></div>
+    </div>
   </button>
 </template>
diff --git a/apps/frontend/admin/src/components/BaseCardHeading.vue b/apps/frontend/admin/src/components/BaseCardHeading.vue
index e7eb6d2..20d76f9 100644
--- a/apps/frontend/admin/src/components/BaseCardHeading.vue
+++ b/apps/frontend/admin/src/components/BaseCardHeading.vue
@@ -2,7 +2,7 @@
   <Component
     :is="$props.tag"
     id="input"
-    class="p-3 font-bold font-sans text-gray-900 text-xl"
+    class="p-3 py-6 font-bold font-sans text-gray-900 text-xl"
     :class="[$props.outlinedBottom ? 'border-b' : 'border-b-none', `shadow-${$props.elevation}`]"
     v-bind="$attrs"
   >
@@ -20,7 +20,7 @@ export default {
     },
     outlinedBottom: {
       type: Boolean,
-      default: true,
+      default: false,
     },
 
     elevation: {
diff --git a/apps/frontend/admin/src/components/BaseLoadingSpinner.vue b/apps/frontend/admin/src/components/BaseLoadingSpinner.vue
new file mode 100644
index 0000000..044bb45
--- /dev/null
+++ b/apps/frontend/admin/src/components/BaseLoadingSpinner.vue
@@ -0,0 +1,6 @@
+<template>
+  <div
+    style="border-top-color: transparent"
+    class="w-5 h-5 border-4 border-gray-800 border-solid rounded-full animate-spin"
+  ></div>
+</template>
diff --git a/apps/frontend/admin/src/components/BaseMultiselectField.vue b/apps/frontend/admin/src/components/BaseMultiselectField.vue
index 445c463..338fb37 100644
--- a/apps/frontend/admin/src/components/BaseMultiselectField.vue
+++ b/apps/frontend/admin/src/components/BaseMultiselectField.vue
@@ -80,12 +80,12 @@ const selectOption = option => {
             <div
               v-for="option of options"
               :key="option"
-              class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100"
+              class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-mint"
             >
               <div
                 class="flex w-full items-center p-2 pl-2 relative"
                 :class="{
-                  'border-l-8 border-blue-500': modelValue.includes(option),
+                  'border-l-8 border-teal-700': modelValue.includes(option),
                 }"
                 @click="selectOption(option)"
               >
diff --git a/apps/frontend/admin/src/components/ProductCreateFormOptions.vue b/apps/frontend/admin/src/components/ProductCreateFormOptions.vue
index ee7f49b..8eda15a 100644
--- a/apps/frontend/admin/src/components/ProductCreateFormOptions.vue
+++ b/apps/frontend/admin/src/components/ProductCreateFormOptions.vue
@@ -88,9 +88,10 @@ const editableOptions = computed(() => {
 })
 
 const saveOption = async () => {
-  const valid = await addValidator.value.$validate()
-  console.log(valid)
-  if (valid) {
+  addValidator.value.$validate()
+  const isInvalid = addValidator.value.$invalid
+
+  if (!isInvalid) {
     console.log('onDone')
     selectedOptions.value[addOptionData.option] = addOptionData.variants
     addOptionData.option = Object.keys(cleanOptions.value)[0]
diff --git a/apps/frontend/admin/src/components/ProductCreateFormVariants.vue b/apps/frontend/admin/src/components/ProductCreateFormVariants.vue
index 8963069..e4ddcc3 100644
--- a/apps/frontend/admin/src/components/ProductCreateFormVariants.vue
+++ b/apps/frontend/admin/src/components/ProductCreateFormVariants.vue
@@ -44,6 +44,7 @@
             <tbody>
               <variants-table-row
                 v-for="variantCombination in variationCombinations"
+                :ref="rowKey(variantCombination)"
                 :key="rowKey(variantCombination)"
                 v-model="variations[rowKey(variantCombination)]"
                 :variant-ids="getVariantIds(variantCombination)"
@@ -60,6 +61,7 @@
 </template>
 
 <script>
+import useVariantsValidator from '../composables/useVariantsValidator'
 import { VCard, VCardBody, VCardHeading } from './AppCard.vue'
 import VariantsTableRow from './ProductCreateVariantsTableRow.vue'
 
@@ -85,6 +87,26 @@ export default {
     },
   },
   emits: ['update:modelValue'],
+
+  setup() {
+    const { validators } = useVariantsValidator()
+
+    const validate = () => {
+      let validated = true
+      validators.value.forEach(v$ => {
+        if (v$.$invalid) {
+          validated = false
+        }
+      })
+
+      return validated
+    }
+
+    return {
+      validate,
+    }
+  },
+
   data() {
     return {
       variations: {},
@@ -119,6 +141,7 @@ export default {
       return map
     },
   },
+
   watch: {
     variations: {
       deep: true,
@@ -127,6 +150,22 @@ export default {
       },
     },
   },
+
+  mounted() {
+    this.modelValue.forEach(variation => {
+      const variantIds = []
+      variation.variant.forEach(variant => {
+        variantIds.push(variant.id)
+      })
+      const key = variantIds.join()
+      this.variations[key] = {
+        price: variation.price,
+        quantity: variation.quantity,
+        variant: variantIds,
+      }
+    })
+  },
+
   methods: {
     getVariantId(variant) {
       const key = Object.keys(variant)[0]
diff --git a/apps/frontend/admin/src/components/ProductCreateVariantsTableRow.vue b/apps/frontend/admin/src/components/ProductCreateVariantsTableRow.vue
index 291ea9a..43613fe 100644
--- a/apps/frontend/admin/src/components/ProductCreateVariantsTableRow.vue
+++ b/apps/frontend/admin/src/components/ProductCreateVariantsTableRow.vue
@@ -1,8 +1,10 @@
 <script setup>
 import { reactive, computed, onUnmounted } from 'vue'
+
 import { useVuelidate } from '@vuelidate/core'
 import { required, integer, minValue } from '@vuelidate/validators'
 import VInput from './BaseInput.vue'
+import useVariantsValidator from '../composables/useVariantsValidator'
 
 const props = defineProps({
   variants: {
@@ -60,8 +62,9 @@ const rules = {
   price: { required, integer, minValue: 100 },
   quantity: { required, integer, minValue: 1 },
 }
-
+const { addValidator } = useVariantsValidator()
 const v$ = useVuelidate(rules, variationData)
+addValidator(v$)
 console.log(v$)
 </script>
 
diff --git a/apps/frontend/admin/src/components/ProductImageUpload.vue b/apps/frontend/admin/src/components/ProductImageUpload.vue
index e038887..c4cc199 100644
--- a/apps/frontend/admin/src/components/ProductImageUpload.vue
+++ b/apps/frontend/admin/src/components/ProductImageUpload.vue
@@ -10,14 +10,32 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  update: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const emit = defineEmits(['update:modelValue'])
 
 const uploadedImages = ref([])
 
+const initProductImageUpload = () => {
+  console.log('update')
+  props.modelValue.forEach(url => {
+    uploadedImages.value.push({
+      url,
+      thumbnail_url: url,
+      public_id: url,
+    })
+  })
+}
+
 onMounted(() => {
   console.log('mounted')
+  if (props.update) {
+    initProductImageUpload()
+  }
   includeScript('widget.cloudinary.com/v2.0/global/all.js')
 })
 
diff --git a/apps/frontend/admin/src/components/ProductsList.vue b/apps/frontend/admin/src/components/ProductsList.vue
index ad82413..d3aaba3 100644
--- a/apps/frontend/admin/src/components/ProductsList.vue
+++ b/apps/frontend/admin/src/components/ProductsList.vue
@@ -4,24 +4,24 @@
     <div>
       <!-- product status tabs -->
       <div class="flex px-5 pt-3 border-b-2">
-        <div v-for="category in categories" :key="category">
+        <div v-for="status in statuses" :key="status">
           <button
             class="transition-all duration-100 ease-in-out transform hover:scale-110"
             :class="[
               'mr-8 m-0 py-2.5 text-sm leading-5 font-medium text-gray-500  ',
 
-              selected == category
+              filterState.filterInput.status == status
                 ? 'border-b-4 border-green-800 font-bold text-black'
                 : 'border-b-4 border-transparent',
             ]"
-            @click="selectCategory(category)"
+            @click="setStatus(status)"
           >
-            {{ category }}
+            {{ status }}
           </button>
         </div>
       </div>
 
-      <div class="flex py-3 px-5 justify-between flex-nowrap gap-3">
+      <div class="flex py-3 px-5 justify-between flex-nowrap gap-2">
         <div class="text-lg rounded-md text-gray-400 border-2 py-1 px-2 w-4/5 focus-within:border-blue-400">
           <font-awesome-icon icon="search" class="text-current mr-1"></font-awesome-icon>
           <input
@@ -30,8 +30,10 @@
             class="w-11/12 text-gray-500 border-none focus:ring-transparent focus:border-none"
           />
         </div>
-
-        <button class="border-2 py-1 px-3 text-sm" @click="toggleDrawer()">More Filters</button>
+        <div class="flex items-center gap-3">
+          <sort-dropdown-menu></sort-dropdown-menu>
+          <button class="border border-gray-500 py-2 px-3 w-full text-sm" @click="toggleDrawer()">More Filters</button>
+        </div>
       </div>
 
       <div v-if="!loading">
@@ -53,11 +55,14 @@ import { VCard, VCardFooter } from './AppCard.vue'
 import ProductFilterDrawer from './ProductsFilterDrawer.vue'
 import VPagination from './BasePagination.vue'
 import ProductsTable from './ProductsListTable.vue'
+import SortDropdownMenu from './SortDropdownMenu.vue'
+import useFilters from '../composables/useFilters'
 
 export default {
   components: {
     VCard,
     ProductFilterDrawer,
+    SortDropdownMenu,
     VCardFooter,
     ProductsTable,
     VPagination,
@@ -65,17 +70,15 @@ export default {
 
   setup() {
     const { open, toggleDrawer } = useNavdrawer(true)
-    const selected = ref('Recent')
-    const categories = ref(['active', 'drafted', 'archived'])
-    const selectCategory = category => {
-      selected.value = category
-    }
+    const { setStatus, filterState } = useFilters()
+    const statuses = ref(['active', 'draft', 'archived'])
+
     const { products, totalPages, loading, error, currentPage, loadPage } = useProducts()
 
     return {
-      categories,
-      selected,
-      selectCategory,
+      statuses,
+      setStatus,
+      filterState,
       open,
       toggleDrawer,
       loading,
diff --git a/apps/frontend/admin/src/components/ProductsListTable.vue b/apps/frontend/admin/src/components/ProductsListTable.vue
index 00f0d3d..b128b77 100644
--- a/apps/frontend/admin/src/components/ProductsListTable.vue
+++ b/apps/frontend/admin/src/components/ProductsListTable.vue
@@ -29,7 +29,7 @@
                 <td class="px-6 py-4 whitespace-nowrap">
                   <div class="flex items-center">
                     <div class="flex-shrink-0 h-auto object-contain w-10">
-                      <img class="h-10 w-10" :src="product.variations[0].images[0]" alt="" />
+                      <img class="h-10 w-10" :src="getProductImage(product)" alt="" />
                     </div>
                     <div class="ml-4">
                       <div class="text-sm font-medium text-gray-900">
@@ -51,12 +51,16 @@
                   <span
                     class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
                   >
-                    Active
+                    {{ product.status }}
                   </span>
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ product.quantity }}</td>
                 <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                  <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
+                  <router-link
+                    :to="{ name: 'product-edit', params: { id: product.id } }"
+                    class="text-indigo-600 hover:text-indigo-900"
+                    >Edit</router-link
+                  >
                 </td>
               </tr>
             </tbody>
@@ -70,5 +74,10 @@
 <script>
 export default {
   props: ['products'],
+  methods: {
+    getProductImage(product) {
+      return product.images.length > 0 ? product.images[0] : ''
+    },
+  },
 }
 </script>
diff --git a/apps/frontend/admin/src/components/SortDropdownMenu.vue b/apps/frontend/admin/src/components/SortDropdownMenu.vue
new file mode 100644
index 0000000..4c9fd8a
--- /dev/null
+++ b/apps/frontend/admin/src/components/SortDropdownMenu.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="w-56 text-right">
+    <Menu as="div" class="relative inline-block text-left">
+      <div>
+        <MenuButton
+          class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
+        >
+          Sort
+          <font-awesome-icon
+            icon="sort"
+            class="w-5 h-5 ml-2 -mr-1 text-violet-200 hover:text-violet-100"
+            aria-hidden="true"
+          />
+        </MenuButton>
+      </div>
+
+      <transition
+        enter-active-class="transition duration-100 ease-out"
+        enter-from-class="transform scale-95 opacity-0"
+        enter-to-class="transform scale-100 opacity-100"
+        leave-active-class="transition duration-75 ease-in"
+        leave-from-class="transform scale-100 opacity-100"
+        leave-to-class="transform scale-95 opacity-0"
+      >
+        <MenuItems
+          class="absolute right-0 w-56 mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+        >
+          <div class="px-1 py-1">
+            <MenuItem
+              v-for="option of sortingOptions"
+              :key="option.value"
+              v-slot="{ active }"
+              @click="setSortBy(option.value)"
+            >
+              <button
+                :class="[
+                  active ? 'bg-mint text-gray-800' : 'text-gray-900',
+                  option.value == filterState.filterInput.sortBy
+                    ? 'bg-mint text-gray-800 border-l-3 border-teal-800'
+                    : '',
+                  'group flex rounded-md items-center w-full px-2 py-2 text-sm',
+                ]"
+              >
+                {{ option.title }}
+              </button>
+            </MenuItem>
+          </div>
+        </MenuItems>
+      </transition>
+    </Menu>
+  </div>
+</template>
+
+<script>
+import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
+import useFilters from '../composables/useFilters'
+
+export default {
+  components: {
+    Menu,
+    MenuButton,
+    MenuItems,
+    MenuItem,
+  },
+
+  setup() {
+    const { setSortBy, filterState } = useFilters()
+    // eslint-disable-next-line prefer-destructuring
+    // const sortBy = filterState.value.filterInput.sortBy
+    const { sortingOptions } = filterState.value
+
+    return {
+      sortingOptions,
+      filterState,
+      setSortBy,
+    }
+  },
+
+  data: () => ({
+    // sortingOptions: [
+    //   { title: 'Popularity', value: 'Popularity' },
+    //   { title: 'Whats New', value: 'WhatsNew' },
+    //   { title: 'Better Discount', value: 'BetterDiscount' },
+    //   { title: 'Price : Low to High', value: 'PriceLowToHigh' },
+    //   { title: 'Price : High to Low', value: 'PriceHighToLow' },
+    // ],
+  }),
+}
+</script>
diff --git a/apps/frontend/admin/src/composables/useFilters.js b/apps/frontend/admin/src/composables/useFilters.js
index 9e9399d..4d2555f 100644
--- a/apps/frontend/admin/src/composables/useFilters.js
+++ b/apps/frontend/admin/src/composables/useFilters.js
@@ -1,4 +1,4 @@
-import { reactive, readonly, ref } from 'vue'
+import { readonly, ref } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
 import { fetchFilters } from 'graphql-client/queries/filter'
 
@@ -14,6 +14,7 @@ const filterState = ref({
     gender: '',
     brands: null,
     sortBy: 'BetterDiscount',
+    status: 'active',
   },
   variantFilterInput: [
     //    {
@@ -38,18 +39,30 @@ const filterState = ref({
 const useFilters = () => {
   const getFilters = () => useQuery(fetchFilters, filterState.value.filterInput)
 
-  // const setInputFilter = (type, value) => {
-  //   filterState.filterInput[type] = value
-  // }
-
   const setInputFilter = filter => {
     filterState.value.filterInput = filter
   }
 
+  const setSortBy = sortBy => {
+    filterState.value.filterInput.sortBy = sortBy
+  }
+
+  const setStatus = status => {
+    filterState.value.filterInput.status = status
+  }
+
+  const clearFilters = () => {
+    filterState.value.filterInput = defaultFilterInput
+    filterState.value.variantFilterInput = []
+  }
+
   return {
     fetchFilters: getFilters,
-    filterState,
+    filterState: readonly(filterState),
     setInputFilter,
+    setSortBy,
+    setStatus,
+    clearFilters,
   }
 }
 
diff --git a/apps/frontend/admin/src/composables/useVariantsValidator.js b/apps/frontend/admin/src/composables/useVariantsValidator.js
new file mode 100644
index 0000000..b3d1455
--- /dev/null
+++ b/apps/frontend/admin/src/composables/useVariantsValidator.js
@@ -0,0 +1,14 @@
+import { ref, readonly } from 'vue'
+
+const validators = ref([])
+
+export default () => {
+  const addValidator = validator => {
+    validators.value.push(validator)
+  }
+
+  return {
+    validators: readonly(validators),
+    addValidator,
+  }
+}
diff --git a/apps/frontend/admin/src/router/index.js b/apps/frontend/admin/src/router/index.js
index 0c038a7..e978b1f 100644
--- a/apps/frontend/admin/src/router/index.js
+++ b/apps/frontend/admin/src/router/index.js
@@ -25,8 +25,8 @@ const routes = [
       },
       {
         path: ':id',
-        name: 'products-edit',
-        component: () => import('../views/ProductsEdit.vue'),
+        name: 'product-edit',
+        component: () => import('../views/ProductEdit.vue'),
       },
     ],
   },
diff --git a/apps/frontend/admin/src/views/ProductEdit.vue b/apps/frontend/admin/src/views/ProductEdit.vue
new file mode 100644
index 0000000..9a328e1
--- /dev/null
+++ b/apps/frontend/admin/src/views/ProductEdit.vue
@@ -0,0 +1,297 @@
+<template>
+  <div class="w-full max-w-4xl mx-auto">
+    <div class="flex my-6">
+      <div class="text-xl">
+        <span class="p-3 border">
+          <font-awesome-icon icon="arrow-left"></font-awesome-icon>
+        </span>
+        <span class="px-3 font-bold"> Update Product</span>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+      <div class="col-span-2 h-auto pb-20 space-y-5">
+        <v-card outlined>
+          <v-card-body>
+            <v-input
+              v-model="productData.name"
+              :label="'name'"
+              :errors="v$.productData.name.$errors"
+              outlined
+              placeholder="name"
+            ></v-input>
+            <v-rich-text v-model="productData.description" :errors="v$.productData.description.$errors"></v-rich-text>
+          </v-card-body>
+        </v-card>
+
+        <product-image-upload v-model="productData.images" :update="true"></product-image-upload>
+
+        <v-card outlined class="space-y-3">
+          <v-card-heading>Pricing</v-card-heading>
+          <v-card-body>
+            <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
+              <v-input
+                v-model="productData.price"
+                min="0"
+                :errors="v$.productData.price.$errors"
+                label="Price"
+                type="number"
+              ></v-input>
+              <v-input
+                v-model="productData.discountPercent"
+                min="0"
+                :errors="v$.productData.discountPercent.$errors"
+                label="Discount Percent"
+                type="number"
+              ></v-input>
+            </div>
+          </v-card-body>
+          <v-card-footer>
+            <v-input label="Cost Per Item" type="number"></v-input>
+            <p class="text-sm">Customers wont see it</p>
+          </v-card-footer>
+        </v-card>
+        <v-card>
+          <v-card-heading>Inventory</v-card-heading>
+          <v-card-body>
+            <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
+              <v-input label="SKU (Stock Keeping Unit)"></v-input>
+              <v-input label="Barcode (ISBN, UPC, GTIN, etc.)"></v-input>
+            </div>
+          </v-card-body>
+          <v-card-footer>
+            <p class="text-lg font-bold text-black">Quantity</p>
+            <v-input
+              v-model="productData.quantity"
+              class="w-1/2"
+              type="number"
+              :errors="v$.productData.quantity.$errors"
+            ></v-input>
+            <p class="text-sm">Customers wont see it</p>
+          </v-card-footer>
+        </v-card>
+
+        <variant-options v-model="selectedOptions" :options="cleanOptions"></variant-options>
+        <variantions-field
+          v-if="Object.keys(selectedOptions).length > 0"
+          ref="variationsField"
+          v-model="productData.variations"
+          :selected-variants="selectedOptions"
+          :all-variants="variantOptions"
+        ></variantions-field>
+      </div>
+      <!--end col 1-->
+
+      <div class="space-y-3">
+        <product-status-field v-model="productData.status"></product-status-field>
+
+        <product-organization
+          ref="productOrganisation"
+          v-model="productOrganisationData"
+          :options="productOrganisationOptions"
+        ></product-organization>
+      </div>
+    </div>
+
+    <v-button @click="saveProduct"> Update Product </v-button>
+    <v-button @click="deleteProduct"> Delete Product </v-button>
+  </div>
+</template>
+<script>
+import { computed, ref } from 'vue'
+import { useMutation, useQuery, useResult } from '@vue/apollo-composable'
+import { GET_PRODUCT_EDIT_DATA } from 'graphql-client/queries/productQueries'
+
+import { useRoute } from 'vue-router'
+import { useVuelidate } from '@vuelidate/core'
+import { required, integer } from '@vuelidate/validators'
+import { UPDATE_PRODUCT, DELETE_PRODUCT } from 'graphql-client/mutations/product'
+import { GET_PRODUCTS_QUERY } from 'graphql-client/queries/productQueries'
+import { VCard, VCardBody, VCardHeading, VCardFooter } from '../components/AppCard.vue'
+import VInput from '../components/BaseInput.vue'
+import VRichText from '../components/BaseRichTextInput.vue'
+import VButton from '../components/BaseButton.vue'
+import VariantOptions from '../components/ProductCreateFormOptions.vue'
+import VariantionsField from '../components/ProductCreateFormVariants.vue'
+import ProductStatusField from '../components/ProductCreateFormStatus.vue'
+import ProductOrganization from '../components/ProductCreateOrganization.vue'
+import ProductImageUpload from '../components/ProductImageUpload.vue'
+
+export default {
+  components: {
+    VCard,
+    VInput,
+    VRichText,
+    VButton,
+    VCardBody,
+    VCardHeading,
+    VCardFooter,
+    VariantOptions,
+    ProductStatusField,
+    VariantionsField,
+    ProductOrganization,
+    ProductImageUpload,
+  },
+
+  setup() {
+    const { params } = useRoute()
+    const productId = params.id
+    const { result, loading, onResult } = useQuery(GET_PRODUCT_EDIT_DATA, { id: productId })
+    const variantOptions = useResult(result, [], data => data.variants)
+    const productOrganisationOptions = useResult(result, {}, data => data.filters)
+
+    const productData = ref({
+      name: '',
+      description: '',
+      variations: [],
+      tags: [],
+      images: [],
+      status: 'active',
+      price: null,
+      discountPercent: null,
+      quantity: null,
+    })
+
+    const productOrganisationData = ref({ brand: '', category: '', gender: '' })
+    const selectedOptions = ref({})
+
+    const initProductInput = data => {
+      const fields = ['name', 'description', 'tags', 'images', 'status', 'price', 'discountPercent', 'quantity']
+      const initData = {}
+
+      fields.forEach(field => {
+        initData[field] = data[field]
+      })
+
+      return initData
+    }
+
+    const initProductOrganisation = ({ gender, category, brand }) => {
+      const initData = {}
+      initData.gender = { label: gender, value: gender }
+      initData.category = { label: category.name, value: category.id }
+      initData.brand = { label: brand.name, value: brand.id }
+
+      return initData
+    }
+
+    const initSelectedOptions = ({ availableVariants }) => JSON.parse(availableVariants)
+
+    const initProductVariations = ({ variations }) => {
+      const variationsCopy = variations.slice()
+      variationsCopy.map(variation => ({
+        price: variation.price,
+        quantity: variation.quantity,
+        variant: variation.quantity,
+      }))
+
+      return variationsCopy
+    }
+
+    onResult(({ data }) => {
+      productData.value = initProductInput(data.product)
+      productOrganisationData.value = initProductOrganisation(data.product)
+      selectedOptions.value = initSelectedOptions(data.product)
+      productData.value.variations = initProductVariations(data.product)
+    })
+
+    const cleanOptions = computed(() => {
+      if (loading.value) {
+        return {}
+      }
+      const Options = {}
+
+      variantOptions.value.forEach(element => {
+        if (element.name in Options) {
+          Options[element.name].push(element.value)
+        } else {
+          Options[element.name] = [element.value]
+        }
+      })
+
+      return Options
+    })
+
+    const { mutate: updateProduct } = useMutation(UPDATE_PRODUCT)
+    const { mutate: deleteProduct } = useMutation(DELETE_PRODUCT)
+    const v$ = useVuelidate()
+
+    return {
+      productId,
+      productData,
+      productOrganisationData,
+      selectedOptions,
+      cleanOptions,
+      productOrganisationOptions,
+      variantOptions,
+      updateProduct,
+      DeleteProduct: deleteProduct,
+      v$,
+    }
+  },
+
+  validations: () => ({
+    productData: {
+      name: { required },
+      description: { required },
+      price: { required, integer, minValue: 10 },
+      discountPercent: { required, integer },
+      quantity: { required, integer },
+    },
+  }),
+
+  computed: {
+    cleanedProductOrganisationData() {
+      const clean = {}
+      Object.keys(this.productOrganisationData).forEach(key => {
+        clean[key] = this.productOrganisationData[key].value
+      })
+
+      return clean
+    },
+  },
+
+  methods: {
+    validateForm() {
+      this.v$.productData.$validate()
+      this.$refs.productOrganisation.v$.$validate()
+      const variationsComponent = this.$refs.variationsField
+      console.log('variations cmp', variationsComponent)
+      if (variationsComponent !== undefined && variationsComponent !== null) {
+        if (variationsComponent.validate() === false) {
+          return false
+        }
+      }
+      console.log(this.v$.$errors, 'org', this.$refs.productOrganisation.v$.$errors)
+
+      return !this.v$.productData.$invalid && !this.$refs.productOrganisation.v$.$invalid
+    },
+
+    saveProduct() {
+      console.log('saving', this.$refs.productOrganisation, this.$refs.variationsField)
+      console.log('isvalid', this.validateForm())
+      if (this.validateForm()) {
+        console.log('saving true')
+        const ProductInput = { ...this.productData, ...this.cleanedProductOrganisationData }
+        this.updateProduct({ id: this.productId, ProductInput })
+      }
+    },
+
+    deleteProduct() {
+      this.DeleteProduct(
+        { id: this.productId },
+        {
+          update: cache => {
+            let data = cache.readQuery({ query: GET_PRODUCTS_QUERY })
+            console.log('data', data)
+            if (data.products) {
+              data = data.products.filter(product => product.id !== this.productId)
+              cache.writeQuery({ query: GET_PRODUCTS_QUERY, data })
+            }
+          },
+        },
+      )
+    },
+  },
+}
+</script>
diff --git a/apps/frontend/admin/src/views/ProductsCreate.vue b/apps/frontend/admin/src/views/ProductsCreate.vue
index ec1c998..4daa894 100644
--- a/apps/frontend/admin/src/views/ProductsCreate.vue
+++ b/apps/frontend/admin/src/views/ProductsCreate.vue
@@ -102,6 +102,7 @@ import { getProductCreateData } from 'graphql-client/queries/filter'
 import { useVuelidate } from '@vuelidate/core'
 import { required, integer, minValue } from '@vuelidate/validators'
 import { CREATE_PRODUCT } from 'graphql-client/mutations/product'
+import { GET_PRODUCTS_QUERY } from 'graphql-client/queries/productQueries'
 import { VCard, VCardBody, VCardHeading, VCardFooter } from '../components/AppCard.vue'
 import VInput from '../components/BaseInput.vue'
 import VRichText from '../components/BaseRichTextInput.vue'
@@ -205,15 +206,40 @@ export default {
   },
 
   methods: {
+    validateForm() {
+      this.v$.$validate()
+      this.$refs.productOrganisation.v$.$validate()
+      const variationsComponent = this.$refs.variationsField
+      console.log('variations cmp', variationsComponent)
+      if (variationsComponent !== undefined && variationsComponent !== null) {
+        if (variationsComponent.validate() === false) {
+          return false
+        }
+      }
+      console.log(this.v$.$errors, 'org', this.$refs.productOrganisation.v$.$errors)
+
+      return !this.v$.productData.$invalid && !this.$refs.productOrganisation.v$.$invalid
+    },
+
     saveProduct() {
-      console.log('saving')
-      if (
-        this.v$.$validate() &&
-        this.$refs.productOrganization.v$.$validate() &&
-        this.$refs.variantionsField.v$.$validate()
-      ) {
+      console.log('saving', this.$refs.productOrganisation, this.$refs.variationsField)
+      console.log('isvalid', this.validateForm())
+      if (this.validateForm()) {
+        console.log('saving true')
         const ProductInput = { ...this.productData, ...this.cleanedProductOrganisationData }
-        this.createProduct({ ProductInput })
+        this.createProduct(
+          { ProductInput },
+          {
+            update: (cache, { data: { product } }) => {
+              const data = cache.readQuery({ query: GET_PRODUCTS_QUERY })
+              console.log('data', data)
+              if (data && data.products) {
+                data.products.push(product)
+                cache.writeQuery({ query: GET_PRODUCTS_QUERY, data })
+              }
+            },
+          },
+        )
       }
     },
   },
diff --git a/apps/frontend/admin/tailwind.config.js b/apps/frontend/admin/tailwind.config.js
index 2793a73..1c70a69 100644
--- a/apps/frontend/admin/tailwind.config.js
+++ b/apps/frontend/admin/tailwind.config.js
@@ -12,12 +12,11 @@ module.exports = {
         display: ['Playfair Display', 'serif'],
       },
       colors: {
-        primary: '#DEB992',
-        secondary: '#e98074',
-        accent: '#1BA098',
-        error: '#b71c1c',
-        info: '#D8c3a5',
-        background: '#051622',
+        forest: '#11201e',
+        tealDark: '#154042',
+        mint: '#d5e9dd',
+        pink: '#decec8',
+        cloud: '#d4d6d5',
       },
       spacing: {
         128: '32rem',
diff --git a/packages/graphql-client/mutations/product.js b/packages/graphql-client/mutations/product.js
index bfd7959..b95e700 100644
--- a/packages/graphql-client/mutations/product.js
+++ b/packages/graphql-client/mutations/product.js
@@ -10,4 +10,43 @@ export const CREATE_PRODUCT = gql`
   }
 `
 
-export const Create = ''
+export const UPDATE_PRODUCT = gql`
+  mutation updateProduct($id: String!, $ProductInput: ProductInput!) {
+    updateProduct(id: $id, pd: $ProductInput) {
+      product {
+        id
+        name
+        price
+        quantity
+        description
+        discountPercent
+        images
+        status
+        brand {
+          id
+          name
+        }
+        category {
+          id
+          name
+        }
+        variations {
+          Id
+          price
+          discountPercent
+          quantity
+        }
+      }
+    }
+  }
+`
+
+export const DELETE_PRODUCT = gql`
+  mutation deleteProduct($id: String!) {
+    deleteProduct(id: $id) {
+      product {
+        id
+      }
+    }
+  }
+`
diff --git a/packages/graphql-client/queries/productQueries.js b/packages/graphql-client/queries/productQueries.js
index 4bd9815..c766112 100644
--- a/packages/graphql-client/queries/productQueries.js
+++ b/packages/graphql-client/queries/productQueries.js
@@ -1,72 +1,130 @@
-import gql from 'graphql-tag';
+import gql from 'graphql-tag'
 
-export const  GET_PRODUCTS_QUERY=gql`
-query Product($filter:FilterInput,$page:Int!){
-  Products(
-        filter:$filter 
-        pageNb:$page){
-            totalPages
-            totalProducts
-            pageNo
-            products{
-                id
-                name
-                brand{
-                    id
-                    name
-                }
-                category{
-                    name
-                    id
-                }
-                variations{
-                    Id
-                    price
-                    discountPercent
-                    images
-                    variant{
-                        name
-                        value
-                    }
-                }
-            }
+export const GET_PRODUCTS_QUERY = gql`
+  query Product($filter: FilterInput, $page: Int!) {
+    Products(filter: $filter, pageNb: $page) {
+      totalPages
+      totalProducts
+      pageNo
+      products {
+        id
+        name
+        description
+        brand {
+          id
+          name
+        }
+        category {
+          name
+          id
+        }
+        status
+        images
+        variations {
+          Id
+          price
+          discountPercent
+          images
+          variant {
+            name
+            value
+          }
+        }
+      }
     }
-}
+  }
 `
-export const  GET_PRODUCT_QUERY=gql`
-query product($id:String!){
-  product(id:$id){
-            id
-            name
-            brand{
-                id
-                name
-            }
-            category{
-                name
-                id
-            }
-            availableVariants
+export const GET_PRODUCT_QUERY = gql`
+  query product($id: String!) {
+    product(id: $id) {
+      id
+      name
+      description
+      brand {
+        id
+        name
+      }
+      category {
+        name
+        id
+      }
+      availableVariants
 
-            variations{
-                Id
-                price
-                discountPercent
-                images
-                variant{
-                    name
-                    value
-                }
-            }
+      variations {
+        Id
+        price
+        discountPercent
+        images
+        variant {
+          name
+          value
+        }
+      }
     }
-}
+  }
+`
+export const GET_CATEGORIES = gql`
+  query {
+    categories {
+      name
+      description
+      id
+    }
+  }
 `
-export const GET_CATEGORIES=gql`
-query{
-  categories{
-    name
-    description
-    id
+
+export const GET_PRODUCT_EDIT_DATA = gql`
+  query getProductEditData($id: String!) {
+    product(id: $id) {
+      id
+      name
+      description
+      status
+      price
+      discountPercent
+      images
+      quantity
+      gender
+      brand {
+        id
+        name
+      }
+      category {
+        name
+        id
+      }
+      availableVariants
+      variations {
+        price
+        discountPercent
+        quantity
+        variant {
+          id
+        }
+      }
+    }
+
+    filters {
+      genders
+      categories {
+        id
+        name
+      }
+      variationFilters {
+        filter
+        values
+      }
+      brands {
+        id
+        name
+      }
+      tags
+    }
+
+    variants {
+      id
+      name
+      value
+    }
   }
-}
 `

From 44835faa34705099e5985c521f24ff2f473b9d3d Mon Sep 17 00:00:00 2001
From: Aabid <mailtoaabid01@gmail.com>
Date: Mon, 7 Feb 2022 22:14:40 +0530
Subject: [PATCH 5/8] feat: [admin] added orders list page with filters and
 pagination

---
 .../0011_order_fulfillment_status.py          |  18 ++
 apps/backend/Orders/models.py                 |  90 ++++----
 apps/backend/Orders/schema.py                 |  25 ++-
 .../migrations/0008_auto_20220206_1710.py     |  28 +++
 apps/backend/shop/schema.py                   |   4 +-
 apps/frontend/admin/index.html                |   6 +
 .../admin/src/components/AppSideBar.vue       |  67 ++++--
 .../admin/src/components/BaseButton.vue       |  36 +++-
 .../admin/src/components/BaseCardBody.vue     |   2 +-
 .../admin/src/components/BaseCardFooter.vue   |   2 +-
 .../admin/src/components/BaseCardHeading.vue  |   2 +-
 .../src/components/BaseDropdownSelect.vue     |   9 +-
 .../admin/src/components/BaseInput.vue        |   2 +-
 .../src/components/BaseMultiselectField.vue   |   2 +-
 .../admin/src/components/BaseNavLink.vue      |  19 ++
 .../src/components/OrdersFilterDrawer.vue     |  42 ++++
 .../admin/src/components/OrdersList.vue       | 142 +++++++++++++
 .../admin/src/components/OrdersTable.vue      |  93 +++++++++
 .../components/ProductCreateFormOptions.vue   |   2 +-
 .../components/ProductCreateFormVariants.vue  |   6 +-
 .../src/components/ProductImageUpload.vue     |   2 +-
 .../admin/src/components/ProductsList.vue     |   6 +-
 .../admin/src/components/SortDropdownMenu.vue |   9 +-
 .../admin/src/components/TheNavBar.vue        |  12 +-
 .../admin/src/composables/useOrders.js        |  77 +++++++
 .../admin/src/composables/useProducts.js      |  20 +-
 apps/frontend/admin/src/index.css             |   3 +-
 .../admin/src/layouts/WithSideBar.vue         |   4 +-
 apps/frontend/admin/src/router/index.js       |   8 +
 apps/frontend/admin/src/views/Orders.vue      |  15 ++
 apps/frontend/admin/src/views/OrdersAll.vue   |  26 +++
 apps/frontend/admin/src/views/ProductEdit.vue |  14 +-
 .../admin/src/views/ProductsCreate.vue        |   2 +-
 apps/frontend/admin/tailwind.config.js        |   7 +-
 packages/graphql-client/admin/orders.js       |  90 ++++++++
 packages/graphql-client/queries/order.js      | 192 ++++++++----------
 36 files changed, 867 insertions(+), 217 deletions(-)
 create mode 100644 apps/backend/Orders/migrations/0011_order_fulfillment_status.py
 create mode 100644 apps/backend/Users/migrations/0008_auto_20220206_1710.py
 create mode 100644 apps/frontend/admin/src/components/BaseNavLink.vue
 create mode 100644 apps/frontend/admin/src/components/OrdersFilterDrawer.vue
 create mode 100644 apps/frontend/admin/src/components/OrdersList.vue
 create mode 100644 apps/frontend/admin/src/components/OrdersTable.vue
 create mode 100644 apps/frontend/admin/src/composables/useOrders.js
 create mode 100644 apps/frontend/admin/src/views/Orders.vue
 create mode 100644 apps/frontend/admin/src/views/OrdersAll.vue
 create mode 100644 packages/graphql-client/admin/orders.js

diff --git a/apps/backend/Orders/migrations/0011_order_fulfillment_status.py b/apps/backend/Orders/migrations/0011_order_fulfillment_status.py
new file mode 100644
index 0000000..9483bef
--- /dev/null
+++ b/apps/backend/Orders/migrations/0011_order_fulfillment_status.py
@@ -0,0 +1,18 @@
+# Generated by Django 3.1.13 on 2022-02-06 17:10
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('Orders', '0010_auto_20220109_1000'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='order',
+            name='fulfillment_status',
+            field=models.CharField(choices=[('Unfulfilled', 'Unfulfilled'), ('PartiallyFulfilled', 'PartiallyFulfilled'), ('Fulfilled', 'Fulfilled')], default='Unfulfilled', max_length=50),
+        ),
+    ]
diff --git a/apps/backend/Orders/models.py b/apps/backend/Orders/models.py
index abad73e..faa4805 100644
--- a/apps/backend/Orders/models.py
+++ b/apps/backend/Orders/models.py
@@ -1,54 +1,76 @@
 from django.db import models
-from Users.models import Customer,Address
-from shop.models import Product,Variation
+from Users.models import Customer, Address
+from shop.models import Product
+
 
 # Create your models here.
 class Order(models.Model):
-    Customer=models.ForeignKey(Customer,on_delete=models.DO_NOTHING)
-    paid=models.BooleanField(default=False)
-    payment_methods=(('0','stripe_checkout'),('1','PaymentIntent'))
-    Payment_Statuses =(("initiated","initiated"),("processing", "processing"),("succeeded","succeeded"),
-    ("failed","failed"),("cancelled","cancelled"))
-    payment_method=models.CharField(choices=payment_methods,default='1',max_length=50)
-    payment_id=models.CharField(max_length=100)
-    payment_status= models.CharField(choices=Payment_Statuses,default='initiated',max_length=50)
-    created_at=models.DateTimeField(auto_now_add=True)
-    updated_at=models.DateTimeField(auto_now=True)
-    extra_charges=models.IntegerField(default=0)
-   
+    Customer = models.ForeignKey(Customer, on_delete=models.DO_NOTHING)
+    paid = models.BooleanField(default=False)
+    payment_methods = (("0", "stripe_checkout"), ("1", "PaymentIntent"))
+
+    Payment_Statuses = (
+        ("initiated", "initiated"),
+        ("processing", "processing"),
+        ("succeeded", "succeeded"),
+        ("failed", "failed"),
+        ("cancelled", "cancelled"),
+    )
+
+    Fullfilment_Statuses = (
+        ("Unfulfilled", "Unfulfilled"),
+        ("PartiallyFulfilled", "PartiallyFulfilled"),
+        ("Fulfilled", "Fulfilled"),
+    )
+
+    payment_method = models.CharField(
+        choices=payment_methods, default="1", max_length=50
+    )
+
+    payment_id = models.CharField(max_length=100)
+    payment_status = models.CharField(
+        choices=Payment_Statuses, default="initiated", max_length=50
+    )
+
+    fulfillment_status = models.CharField(
+        choices=Fullfilment_Statuses, default="Unfulfilled", max_length=50
+    )
+
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
+    extra_charges = models.IntegerField(default=0)
 
     def __str__(self):
         return f"{self.Customer} {self.id}"
 
     def total_amount(self):
-        items=OrderItem.objects.filter(order=self)
-        total_amount=self.extra_charges
+        items = OrderItem.objects.filter(order=self)
+        total_amount = self.extra_charges
         for item in items:
-            total_amount+=item.total_amount()
+            total_amount += item.total_amount()
         return total_amount
 
+
 class OrderItem(models.Model):
-    order=models.ForeignKey(Order,on_delete=models.CASCADE)
-    product_id= models.CharField(max_length=100,null=False)
-    variation_id=models.CharField(null=False,max_length=50)
-    Amount=models.IntegerField(null=False) #single item price
-    Customer=models.ForeignKey(Customer,on_delete=models.DO_NOTHING)
-    Address=models.ForeignKey(Address,on_delete=models.DO_NOTHING)
-    Quantity=models.IntegerField(null=False)
-    Order_date=models.DateTimeField(auto_now_add=True, blank=True )
-   
-    details=models.TextField(max_length=500,null=True)
-    paid=models.BooleanField(default=False)
-    fullfillment_status=models.CharField(max_length=200,default='Unpaid')
-    
+    order = models.ForeignKey(Order, on_delete=models.CASCADE)
+    product_id = models.CharField(max_length=100, null=False)
+    variation_id = models.CharField(null=False, max_length=50)
+    Amount = models.IntegerField(null=False)  # single item price
+    Customer = models.ForeignKey(Customer, on_delete=models.DO_NOTHING)
+    Address = models.ForeignKey(Address, on_delete=models.DO_NOTHING)
+    Quantity = models.IntegerField(null=False)
+    Order_date = models.DateTimeField(auto_now_add=True, blank=True)
+
+    details = models.TextField(max_length=500, null=True)
+    paid = models.BooleanField(default=False)
+    fullfillment_status = models.CharField(max_length=200, default="Unpaid")
+
     def total_amount(self):
-        return (self.Amount*self.Quantity)
-    
+        return self.Amount * self.Quantity
+
     @property
     def product(self):
         return Product.objects.get(id=self.product_id)
 
-   
-
     def __str__(self):
         return str(self.id)
diff --git a/apps/backend/Orders/schema.py b/apps/backend/Orders/schema.py
index 000b3ac..d23c5aa 100644
--- a/apps/backend/Orders/schema.py
+++ b/apps/backend/Orders/schema.py
@@ -1,9 +1,9 @@
 from shop.types import ProductType, VariationType
-
+from django.core.paginator import Paginator
 import graphene
 from graphene import relay
 
-from graphene_django import DjangoObjectType
+from graphene_django import DjangoObjectType, DjangoConnectionField
 from graphene_django.filter import DjangoFilterConnectionField
 
 from .models import Order, OrderItem
@@ -25,6 +25,7 @@ class Meta:
             "paid": ["exact"],
             "payment_method": ["exact"],
             "payment_status": ["exact"],
+            "fulfillment_status": ["exact"],
             "created_at": ["exact"],
             "updated_at": ["exact"],
             "extra_charges": ["exact"],
@@ -33,14 +34,33 @@ class Meta:
     order_by = OrderingFilter(fields=(("updated_at", "created_at"),))
 
 
+class PaginationType(graphene.ObjectType):
+
+    page_no = graphene.Int()
+    total_pages = graphene.Int()
+    total_count = graphene.Int()
+
+
+class CountableConnectionBase(relay.Connection):
+    class Meta:
+        abstract = True
+
+    total_items = graphene.Int()
+
+    def resolve_total_items(self, *args, **kwargs):
+        return self.length
+
+
 class OrderNode(DjangoObjectType):
     class Meta:
         model = Order
         interfaces = (relay.Node,)
+        connection_class = CountableConnectionBase
 
     totalAmount = graphene.Int()
 
     def resolve_totalAmount(self, info):
+
         return self.total_amount()
 
 
@@ -91,6 +111,7 @@ def resolve_order(self, info, id=None, get_current=None):
 
     @login_required
     def resolve_orders(self, info, **kwargs):
+        print(self)
         user = info.context.user
         if user.is_superuser:
             orders = OrderFilter(kwargs).qs
diff --git a/apps/backend/Users/migrations/0008_auto_20220206_1710.py b/apps/backend/Users/migrations/0008_auto_20220206_1710.py
new file mode 100644
index 0000000..aee9107
--- /dev/null
+++ b/apps/backend/Users/migrations/0008_auto_20220206_1710.py
@@ -0,0 +1,28 @@
+# Generated by Django 3.1.13 on 2022-02-06 17:10
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('Users', '0007_auto_20220108_1314'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='customer',
+            name='Addresses',
+            field=models.ManyToManyField(blank=True, null=True, to='Users.Address'),
+        ),
+        migrations.AlterField(
+            model_name='customer',
+            name='phone_number',
+            field=models.CharField(blank=True, max_length=13),
+        ),
+        migrations.AlterField(
+            model_name='customer',
+            name='verified_by',
+            field=models.IntegerField(blank=True, choices=[(1, 'phone'), (2, 'email')], null=True),
+        ),
+    ]
diff --git a/apps/backend/shop/schema.py b/apps/backend/shop/schema.py
index ac6c67f..7674dd6 100644
--- a/apps/backend/shop/schema.py
+++ b/apps/backend/shop/schema.py
@@ -27,8 +27,8 @@ def resolve_Products(self, info, filter={}, pageNb=1, **kwargs):
         # print("fetching products")
         # print("pagenb :- ",pageNb)
 
-        if not info.context.user.is_superuser:
-            filter["status"] = "active"
+        # if not info.context.user.is_superuser:
+        #     filter["status"] = "active"
 
         limit = 30
         offset = (pageNb - 1) * limit
diff --git a/apps/frontend/admin/index.html b/apps/frontend/admin/index.html
index 030a6ff..492220d 100644
--- a/apps/frontend/admin/index.html
+++ b/apps/frontend/admin/index.html
@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet">
+
     <title>Vite App</title>
   </head>
   <body>
diff --git a/apps/frontend/admin/src/components/AppSideBar.vue b/apps/frontend/admin/src/components/AppSideBar.vue
index 490534b..762f256 100644
--- a/apps/frontend/admin/src/components/AppSideBar.vue
+++ b/apps/frontend/admin/src/components/AppSideBar.vue
@@ -1,6 +1,9 @@
 <script setup>
+import { computed } from 'vue'
+
 import { useRoute } from 'vue-router'
 import useNavdrawer from '../composables/useNavdrawer'
+import BaseNavLink from './BaseNavLink.vue'
 
 const menuItems = {
   home: {
@@ -15,12 +18,21 @@ const menuItems = {
         icon: null,
         to: { name: 'products-all' },
       },
+      'New Product': {
+        icon: null,
+        to: { name: 'products-create' },
+      },
     },
   },
   orders: {
-    to: { name: 'products' },
+    to: { name: 'orders-all' },
     icon: 'box',
-    submenu: true,
+    submenu: {
+      'All Orders': {
+        icon: null,
+        to: { name: 'orders-all' },
+      },
+    },
   },
   customers: {
     to: { name: 'products' },
@@ -29,6 +41,24 @@ const menuItems = {
   },
 }
 
+const activeSubmenu = computed(() => {
+  const route = useRoute()
+
+  return Object.keys(menuItems).find(key => {
+    const item = menuItems[key]
+
+    if (item.submenu) {
+      return Object.keys(item.submenu).find(subkey => {
+        const subitem = item.submenu[subkey]
+
+        return subitem.to.name === route.name
+      })
+    }
+
+    return item.to.name === route.name
+  })
+})
+
 const { toggleDrawer, isDrawerOpen } = useNavdrawer()
 console.log('isOpen', isDrawerOpen)
 
@@ -39,24 +69,35 @@ const route = useRoute()
   <transition name="fade" :duration="1000">
     <nav
       v-if="isDrawerOpen"
-      class="drawer fixed top-0 bottom-0 w-2/3 bg-white h-auto z-50 md:pt-16 md:z-0 p-5 md:w-60 border-r-2 shadow-sm md:shadow-none"
+      class="gap-4 font-montserrat drawer fixed top-0 bottom-0 w-2/3 bg-white h-auto z-50 md:pt-16 md:z-0 pr-2 md:w-48 border-r-2 shadow-sm md:shadow-none"
     >
       <div class="text-right px-4 text-xl md:hidden w-full">
         <font-awesome-icon icon="times" @click="toggleDrawer"></font-awesome-icon>
       </div>
 
-      <div v-for="(item, key) in menuItems" :key="key">
-        <router-link :to="item.to" :class="route.name == item.to.name ? 'nav-link-active' : 'nav-link'">
-          <font-awesome-icon :icon="item.icon" />
-          <span class="mx-4 text-lg font-bold"> {{ key }} </span>
-        </router-link>
+      <div v-for="(item, key) in menuItems" :key="key" class="mb-4">
+        <base-nav-link :active="route.name == item.to.name">
+          <router-link :to="item.to">
+            <font-awesome-icon :icon="item.icon" />
+            <span class="px-3"> {{ key }} </span>
+          </router-link>
+        </base-nav-link>
 
-        <div v-show="route.name == item.to.name">
-          <a v-for="(submenu, key_) in item.submenu" :key="key_" class="nav-link">
+        <div v-show="activeSubmenu == key" class="">
+          <router-link
+            v-for="(submenu, key_) in item.submenu"
+            :key="key_"
+            :to="submenu.to"
+            :class="[
+              route.name == submenu.to.name
+                ? 'border-l-4  flex bg-cloud bg-opacity-20 border-x-teal-700 font-light  text-teal-700'
+                : 'text-gray-800',
+              'my-1 py-1 font-light text-sm',
+            ]"
+          >
             <font-awesome-icon :icon="submenu.icon" />
-            <span class="pl-8 text-lg font-normal"> {{ key_ }} </span>
-            <span class="flex-grow text-right"> </span>
-          </a>
+            <span class="pl-9 font-normal"> {{ key_ }} </span>
+          </router-link>
         </div>
       </div>
     </nav>
diff --git a/apps/frontend/admin/src/components/BaseButton.vue b/apps/frontend/admin/src/components/BaseButton.vue
index e3ed25d..312f00a 100644
--- a/apps/frontend/admin/src/components/BaseButton.vue
+++ b/apps/frontend/admin/src/components/BaseButton.vue
@@ -10,16 +10,46 @@ defineProps({
   },
   primary: {
     type: Boolean,
-    default: true,
+    default: false,
+  },
+  secondary: {
+    type: Boolean,
+    default: false,
+  },
+  warning: {
+    type: Boolean,
+    default: false,
+  },
+  success: {
+    type: Boolean,
+    default: false,
+  },
+  info: {
+    type: Boolean,
+    default: false,
+  },
+  danger: {
+    type: Boolean,
+    default: false,
+  },
+  tile: {
+    type: Boolean,
+    default: false,
   },
 })
 </script>
 
 <template>
   <button
-    class="text-center uppercase font-sans block py-2 px-5 rounded text-white transition-all ease-in-out duration-300 hover:scale-105"
+    class="text-center capitalize font-montserrat block py-2 px-5 text-white transition-all ease-in-out duration-300 hover:scale-105"
     :class="{
-      'bg-teal-700 hover:bg-teal-600': primary,
+      rounded: !tile,
+      'bg-teal-700 hover:bg-teal-600': !secondary && !warning && !success && !info && !danger,
+      'bg-mint text-gray-600 ': secondary,
+      'bg-yellow-600 text-white': warning,
+      'bg-green-600 text-gray-600': success,
+      'bg-blue-600 text-gray-600': info,
+      'bg-white hover:shadow-sm border border-red-500 text-red-500': danger,
       'bg-gray-400 cursor-not-allowed': disabled,
       'bg-gray-400 cursor-wait': loading,
     }"
diff --git a/apps/frontend/admin/src/components/BaseCardBody.vue b/apps/frontend/admin/src/components/BaseCardBody.vue
index a7df9eb..015aa10 100644
--- a/apps/frontend/admin/src/components/BaseCardBody.vue
+++ b/apps/frontend/admin/src/components/BaseCardBody.vue
@@ -1,7 +1,7 @@
 <template>
   <Component
     :is="$props.tag"
-    class="p-3 space-y-3 overflow-hidden break-words font-sans"
+    class="p-6 space-y-3 overflow-hidden break-words font-poppins"
     :class="[$props.outlinedBottom ? 'border-b' : 'border-b-none', `shadow-${$props.elevation}`]"
     v-bind="$attrs"
   >
diff --git a/apps/frontend/admin/src/components/BaseCardFooter.vue b/apps/frontend/admin/src/components/BaseCardFooter.vue
index 171741a..c02c41e 100644
--- a/apps/frontend/admin/src/components/BaseCardFooter.vue
+++ b/apps/frontend/admin/src/components/BaseCardFooter.vue
@@ -1,7 +1,7 @@
 <template>
   <Component
     :is="$props.tag"
-    class="p-3 space-y-3 overflow-hidden break-words"
+    class="p-6 font-montserrat space-y-3 overflow-hidden break-words"
     :class="[$props.outlinedTop ? 'border-t' : 'border-t-none', `shadow-${$props.elevation}`]"
     v-bind="$attrs"
   >
diff --git a/apps/frontend/admin/src/components/BaseCardHeading.vue b/apps/frontend/admin/src/components/BaseCardHeading.vue
index 20d76f9..52a1436 100644
--- a/apps/frontend/admin/src/components/BaseCardHeading.vue
+++ b/apps/frontend/admin/src/components/BaseCardHeading.vue
@@ -2,7 +2,7 @@
   <Component
     :is="$props.tag"
     id="input"
-    class="p-3 py-6 font-bold font-sans text-gray-900 text-xl"
+    class="p-6 font-semibold font-montserrat text-gray-800 text-lg"
     :class="[$props.outlinedBottom ? 'border-b' : 'border-b-none', `shadow-${$props.elevation}`]"
     v-bind="$attrs"
   >
diff --git a/apps/frontend/admin/src/components/BaseDropdownSelect.vue b/apps/frontend/admin/src/components/BaseDropdownSelect.vue
index 63a9bac..92dda9b 100644
--- a/apps/frontend/admin/src/components/BaseDropdownSelect.vue
+++ b/apps/frontend/admin/src/components/BaseDropdownSelect.vue
@@ -3,10 +3,11 @@
     <div class="relative mt-1">
       <ListboxLabel>{{ label }} :</ListboxLabel>
       <ListboxButton
-        class="relative border border-gray-400 focus-visible:border-blue-400 focus:ring-1 focus:ring-blue-600 w-full py-3 pl-3 pr-10 text-left bg-white rounded-md"
+        class="relative border border-gray-400 focus-visible:border-blue-400 focus:ring-1 focus:ring-blue-600 w-full py-2 pl-3 pr-10 text-left bg-white rounded-md"
         :class="[$props.errors.length > 0 ? 'border-red-500' : 'border-gray-400']"
       >
-        <span class="block truncate">{{ selectedItem.label }}</span>
+        <span v-if="selectedItem" class="block truncate">{{ selectedItem.label }}</span>
+        <span v-else class="block truncate text-gray-400">{{ placeholder }}</span>
         <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
           <font-awesome-icon class="w-5 h-5 text-gray-400" icon="sort"></font-awesome-icon>
         </span>
@@ -62,6 +63,10 @@ export const BaseDropdownSelect = {
       type: String,
       default: '',
     },
+    placeholder: {
+      type: String,
+      default: 'select',
+    },
     errors: {
       type: Array,
       default: () => [],
diff --git a/apps/frontend/admin/src/components/BaseInput.vue b/apps/frontend/admin/src/components/BaseInput.vue
index e78a20e..5e72536 100644
--- a/apps/frontend/admin/src/components/BaseInput.vue
+++ b/apps/frontend/admin/src/components/BaseInput.vue
@@ -5,7 +5,7 @@
     </label>
     <input
       v-model="model"
-      class="p-3 bg-white focus:outline-blue-400 w-full"
+      class="p-2 bg-white focus:outline-blue-400 w-full"
       :class="[
         $props.outlined ? 'border border-gray-400' : 'border-none',
         `shadow-${$props.elevation}`,
diff --git a/apps/frontend/admin/src/components/BaseMultiselectField.vue b/apps/frontend/admin/src/components/BaseMultiselectField.vue
index 338fb37..254d45b 100644
--- a/apps/frontend/admin/src/components/BaseMultiselectField.vue
+++ b/apps/frontend/admin/src/components/BaseMultiselectField.vue
@@ -37,7 +37,7 @@ const selectOption = option => {
       <div class="flex flex-col items-center relative">
         <div class="w-full">
           <div
-            class="my-2 p-1 flex border border-gray-200 bg-white rounded"
+            class="my-2 p-1 flex border border-gray-400 bg-white rounded"
             :class="[$props.errors.length > 0 ? 'border-red-500' : 'border-gray-400']"
           >
             <div class="flex flex-auto items-center flex-wrap">
diff --git a/apps/frontend/admin/src/components/BaseNavLink.vue b/apps/frontend/admin/src/components/BaseNavLink.vue
new file mode 100644
index 0000000..6ef7471
--- /dev/null
+++ b/apps/frontend/admin/src/components/BaseNavLink.vue
@@ -0,0 +1,19 @@
+<script setup>
+defineProps({
+  active: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      active ? 'bg-mint bg-opacity-50 text-teal-800 border-l-8 border-teal-800 px-2' : 'px-3 text-gray-600',
+      'rounded-r-sm font-semibold py-1  cursor-pointer text-base',
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
diff --git a/apps/frontend/admin/src/components/OrdersFilterDrawer.vue b/apps/frontend/admin/src/components/OrdersFilterDrawer.vue
new file mode 100644
index 0000000..b14d419
--- /dev/null
+++ b/apps/frontend/admin/src/components/OrdersFilterDrawer.vue
@@ -0,0 +1,42 @@
+<script setup>
+import { reactive } from 'vue'
+import useOrders from '../composables/useOrders'
+import BaseNavDrawer from './BaseNavDrawer.vue'
+import BaseListItemGroup, { BaseListItem } from './BaseListItemGroup.vue'
+
+defineProps({
+  isOpen: { type: Boolean, default: false },
+  toggleDrawer: { type: Function, required: true },
+})
+
+const { setFilters, resetFilters, filter, filterOptions } = useOrders()
+
+const selectedFilters = reactive({ ...filter })
+
+const saveFilters = () => {
+  setFilters(selectedFilters)
+}
+</script>
+
+<template>
+  <base-nav-drawer :is-open="$props.isOpen" toggle="$props.toggleDrawer" panel-title="Order Filters">
+    <div>
+      <ul>
+        <base-list-item-group v-model="selectedFilters.paymentStatus" title="Payment Status">
+          <base-list-item v-for="status in filterOptions.paymentStatus" :key="status" :value="status">
+            {{ status }}
+          </base-list-item>
+        </base-list-item-group>
+        <base-list-item-group v-model="selectedFilters.fulfillmentStatus" title="Fulfillment Status">
+          <base-list-item v-for="status in filterOptions.fulfillmentStatus" :key="status" :value="status">
+            {{ status }}
+          </base-list-item>
+        </base-list-item-group>
+      </ul>
+    </div>
+    <div class="flex justify-between py-5 px-3">
+      <button class="px-3 py-2 border rounded-md text-gray-400" @click="resetFilters">Clear Filters</button>
+      <button class="px-3 mx-5 py-2 border rounded-md text-white bg-green-800" @click="saveFilters">Done</button>
+    </div>
+  </base-nav-drawer>
+</template>
diff --git a/apps/frontend/admin/src/components/OrdersList.vue b/apps/frontend/admin/src/components/OrdersList.vue
new file mode 100644
index 0000000..a02a2b9
--- /dev/null
+++ b/apps/frontend/admin/src/components/OrdersList.vue
@@ -0,0 +1,142 @@
+<template>
+  <v-card outlined class="p-0">
+    <orders-filter-drawer :is-open="open" :toggle="toggleDrawer"></orders-filter-drawer>
+    <div>
+      <!-- product status tabs -->
+      <div class="flex px-5 pt-3 border-b-2">
+        <button
+          class="transition-all duration-100 ease-in-out transform hover:scale-110"
+          :class="[
+            'mr-8 m-0 py-2.5 text-sm leading-5 font-medium text-gray-500  ',
+
+            filter.paymentStatus == null && filter.fulfillmentStatus == null
+              ? 'border-b-4 border-green-800 font-bold text-black'
+              : 'border-b-4 border-transparent',
+          ]"
+          @click="resetFilters"
+        >
+          All Orders
+        </button>
+        <div v-for="status in paymentStatuses" :key="status.value">
+          <button
+            class="transition-all duration-100 ease-in-out transform hover:scale-110"
+            :class="[
+              'mr-8 m-0 py-2.5 text-sm leading-5 font-medium text-gray-500  ',
+
+              filter.paymentStatus == status.value
+                ? 'border-b-4 border-green-800 font-bold text-black'
+                : 'border-b-4 border-transparent',
+            ]"
+            @click="setFilter('paymentStatus', status.value)"
+          >
+            {{ status.name }}
+          </button>
+        </div>
+        <div v-for="status in fulfillmentStatuses" :key="status.value">
+          <button
+            class="transition-all duration-100 ease-in-out transform hover:scale-110"
+            :class="[
+              'mr-8 m-0 py-2.5 text-sm leading-5 font-medium text-gray-500  ',
+
+              filter.fulfillmentStatus == status.value
+                ? 'border-b-4 border-green-800 font-bold text-black'
+                : 'border-b-4 border-transparent',
+            ]"
+            @click="setFilter('fulfillmentStatus', status.value)"
+          >
+            {{ status.name }}
+          </button>
+        </div>
+      </div>
+
+      <div class="flex py-3 px-5 justify-between flex-nowrap gap-2">
+        <div class="text-lg rounded-md text-gray-400 border-2 py-1 px-2 w-4/5 focus-within:border-blue-400">
+          <font-awesome-icon icon="search" class="text-current mr-1"></font-awesome-icon>
+          <input
+            type="text"
+            placeholder="search orders"
+            class="w-11/12 text-gray-500 border-none focus:ring-transparent focus:border-none"
+          />
+        </div>
+        <div class="flex items-center gap-3">
+          <sort-dropdown-menu></sort-dropdown-menu>
+          <button class="border border-gray-500 py-2 px-3 w-full text-sm" @click="toggleDrawer()">More Filters</button>
+        </div>
+      </div>
+
+      <div v-if="loading">loading</div>
+      <div v-else-if="error">
+        {{ error }}
+      </div>
+      <div v-else>
+        <orders-table :orders="orderNodes"></orders-table>
+      </div>
+    </div>
+    <v-card-footer>
+      <v-pagination
+        :total-pages="pageInfo.totalPages"
+        :current-page="pageInfo.currentPage"
+        @go-to-page="loadPage"
+      ></v-pagination>
+    </v-card-footer>
+  </v-card>
+</template>
+
+<script>
+import useNavdrawer from '../composables/useNavdrawer'
+import { VCard, VCardFooter } from './AppCard.vue'
+import OrdersFilterDrawer from './OrdersFilterDrawer.vue'
+import VPagination from './BasePagination.vue'
+import OrdersTable from './OrdersTable.vue'
+import SortDropdownMenu from './SortDropdownMenu.vue'
+import useOrders from '../composables/useOrders'
+
+export default {
+  components: {
+    VCard,
+    OrdersFilterDrawer,
+    SortDropdownMenu,
+    VCardFooter,
+    OrdersTable,
+    VPagination,
+  },
+
+  setup() {
+    const { open, toggleDrawer } = useNavdrawer(true)
+
+    const paymentStatuses = [
+      {
+        name: 'Paid',
+        value: 'succeeded',
+      },
+      {
+        name: 'Cancelled',
+        value: 'cancelled',
+      },
+    ]
+
+    const fulfillmentStatuses = [
+      {
+        name: 'Unfullfilled',
+        value: 'Unfulfilled',
+      },
+      {
+        name: 'Partially Fulfilled',
+        value: 'PartiallyFulfilled',
+      },
+      {
+        name: 'Fulfilled',
+        value: 'Fulfilled',
+      },
+    ]
+
+    return {
+      ...useOrders(),
+      open,
+      toggleDrawer,
+      paymentStatuses,
+      fulfillmentStatuses,
+    }
+  },
+}
+</script>
diff --git a/apps/frontend/admin/src/components/OrdersTable.vue b/apps/frontend/admin/src/components/OrdersTable.vue
new file mode 100644
index 0000000..81377da
--- /dev/null
+++ b/apps/frontend/admin/src/components/OrdersTable.vue
@@ -0,0 +1,93 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<template>
+  <div class="flex flex-col">
+    <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+      <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+        <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Order
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Date
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Customer
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Payment Status
+                </th>
+
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Fullfillment Status
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Total
+                </th>
+                <th scope="col" class="relative px-6 py-3">
+                  <span class="sr-only">Edit</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+              <tr v-for="{ node: order } in orders" :key="order.id">
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="text-sm font-medium text-gray-900">#{{ order.id }}</div>
+                </td>
+
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="text-sm text-gray-900">
+                    {{ order.createdAt.split('T')[0] }}
+                  </div>
+                </td>
+
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="text-sm text-gray-900">
+                    {{ order.Customer.user.username }}
+                  </div>
+                </td>
+
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="text-sm text-gray-900">
+                    {{ order.paymentStatus }}
+                  </div>
+                </td>
+
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="text-sm text-gray-900">
+                    {{ order.fulfillmentStatus }}
+                  </div>
+                </td>
+
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="text-sm text-gray-900">Rs {{ order.totalAmount }}</div>
+                </td>
+
+                <!-- <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                  <router-link
+                    :to="{ name: 'product-edit', params: { id: order.id } }"
+                    class="text-indigo-600 hover:text-indigo-900"
+                    >Edit</router-link
+                  >
+                </td> -->
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    orders: {
+      type: Array,
+      required: true,
+    },
+  },
+}
+</script>
diff --git a/apps/frontend/admin/src/components/ProductCreateFormOptions.vue b/apps/frontend/admin/src/components/ProductCreateFormOptions.vue
index 8eda15a..e4af0e3 100644
--- a/apps/frontend/admin/src/components/ProductCreateFormOptions.vue
+++ b/apps/frontend/admin/src/components/ProductCreateFormOptions.vue
@@ -105,7 +105,7 @@ const saveOption = async () => {
   <v-card outlined>
     <v-card-heading>Options</v-card-heading>
 
-    <div v-for="(values, option) in selectedOptions" :key="option" class="border-b p-3 py-6">
+    <div v-for="(values, option) in selectedOptions" :key="option" class="border-b px-6 py-3">
       <!-- selected Options -->
 
       <div v-if="editing != option">
diff --git a/apps/frontend/admin/src/components/ProductCreateFormVariants.vue b/apps/frontend/admin/src/components/ProductCreateFormVariants.vue
index e4ddcc3..4d74247 100644
--- a/apps/frontend/admin/src/components/ProductCreateFormVariants.vue
+++ b/apps/frontend/admin/src/components/ProductCreateFormVariants.vue
@@ -1,11 +1,11 @@
 <template>
   <v-card>
-    <v-card-heading> Variants </v-card-heading>
+    <v-card-heading class=""> Variants </v-card-heading>
 
     <!-- {{ variantMap }} -->
     <!-- {{ variationCombinations }} -->
-    <v-card-body class="'p-0">
-      <div class="overflow-x-auto">
+    <v-card-body class="py-3">
+      <div class="overflow-x-auto border">
         <div class="">
           <table class="min-w-full leading-normal">
             <thead>
diff --git a/apps/frontend/admin/src/components/ProductImageUpload.vue b/apps/frontend/admin/src/components/ProductImageUpload.vue
index c4cc199..635cee5 100644
--- a/apps/frontend/admin/src/components/ProductImageUpload.vue
+++ b/apps/frontend/admin/src/components/ProductImageUpload.vue
@@ -69,7 +69,7 @@ const deleteImage = image => {
 <template>
   <v-card outlined>
     <v-card-body>
-      <h3>Media</h3>
+      <h3 class="text-gray-800 font-lg font-semibold">Media</h3>
       <div class="flex gap-2">
         <product-image-thumbnail
           v-for="image of uploadedImages"
diff --git a/apps/frontend/admin/src/components/ProductsList.vue b/apps/frontend/admin/src/components/ProductsList.vue
index d3aaba3..3c46991 100644
--- a/apps/frontend/admin/src/components/ProductsList.vue
+++ b/apps/frontend/admin/src/components/ProductsList.vue
@@ -36,7 +36,11 @@
         </div>
       </div>
 
-      <div v-if="!loading">
+      <div v-if="loading">loading</div>
+      <div v-else-if="error">
+        {{ error }}
+      </div>
+      <div v-else>
         <products-table :products="products"></products-table>
       </div>
     </div>
diff --git a/apps/frontend/admin/src/components/SortDropdownMenu.vue b/apps/frontend/admin/src/components/SortDropdownMenu.vue
index 4c9fd8a..302c5b0 100644
--- a/apps/frontend/admin/src/components/SortDropdownMenu.vue
+++ b/apps/frontend/admin/src/components/SortDropdownMenu.vue
@@ -3,14 +3,9 @@
     <Menu as="div" class="relative inline-block text-left">
       <div>
         <MenuButton
-          class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
+          class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-black rounded-md bg-opacity-30 hover:bg-opacity-40 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
         >
-          Sort
-          <font-awesome-icon
-            icon="sort"
-            class="w-5 h-5 ml-2 -mr-1 text-violet-200 hover:text-violet-100"
-            aria-hidden="true"
-          />
+          Sort <font-awesome-icon icon="sort" class="w-5 h-5 ml-2 -mr-1 text-white" aria-hidden="true" />
         </MenuButton>
       </div>
 
diff --git a/apps/frontend/admin/src/components/TheNavBar.vue b/apps/frontend/admin/src/components/TheNavBar.vue
index 059710e..fc6563c 100644
--- a/apps/frontend/admin/src/components/TheNavBar.vue
+++ b/apps/frontend/admin/src/components/TheNavBar.vue
@@ -8,18 +8,18 @@ const { toggleDrawer } = useNavdrawer()
 <template>
   <!-- start navbar -->
   <div
-    class="fixed w-screen z-10 md:relative flex flex-row flex-wrap items-center justify-between bg-white p-3 border-b border-gray-300"
+    class="fixed w-screen z-10 flex flex-row flex-wrap items-center justify-between bg-white p-3 border-b border-gray-300"
   >
     <!-- logo -->
     <div class="w-56 flex flex-row items-center">
-      <button
-        class="mr-4 text-right text-gray-900 md:hidden"
-        @click="toggleDrawer()"
-      >
+      <button class="mr-4 text-right text-gray-900 md:hidden" @click="toggleDrawer()">
         <f-icon icon="bars"></f-icon>
       </button>
       <!-- <img src="img/logo.png" class="w-10 flex-none" /> -->
-      <strong class="capitalize ml-1 flex-1">zivero</strong>
+      <div>
+        <span class="capitalize font-medium text-lg text-gray-800 font-montserrat px-1">zivero</span>
+        <span class="capitalize font-medium text-lg text-gray-600 font-montserrat"> Admin</span>
+      </div>
     </div>
   </div>
 </template>
diff --git a/apps/frontend/admin/src/composables/useOrders.js b/apps/frontend/admin/src/composables/useOrders.js
new file mode 100644
index 0000000..4c29246
--- /dev/null
+++ b/apps/frontend/admin/src/composables/useOrders.js
@@ -0,0 +1,77 @@
+import { reactive, computed, readonly } from 'vue'
+import { useQuery, useResult } from '@vue/apollo-composable'
+import { GetOrders } from 'graphql-client/admin/orders'
+
+const defaultFilters = {
+  orderBy: null,
+  first: 1,
+  offset: 0,
+  id: null,
+  paid: null,
+  paymentMethod: null,
+  paymentStatus: null,
+  fulfillmentStatus: null,
+  createdAt: null,
+  updatedAt: null,
+}
+
+const ordersFilter = reactive({
+  ...defaultFilters,
+})
+
+const filterOptions = {
+  paymentStatus: ['succeeded', 'processing', 'initiated', 'cancelled'],
+  fulfillmentStatus: ['Unfulfilled', 'Fulfilled', 'PartiallyFulfilled'],
+}
+
+export default () => {
+  const { result, loading, error } = useQuery(GetOrders, () => ({ ...ordersFilter }))
+  const orderNodes = useResult(result, [], data => data.orders.edges)
+  const totalItems = useResult(result, 0, data => data.orders.totalItems)
+
+  // sets the value for a single filtering atribute
+  const setFilter = (key, value) => {
+    ordersFilter[key] = value
+  }
+
+  const setFilters = filterObject => {
+    Object.keys(filterObject).forEach(key => {
+      ordersFilter[key] = filterObject[key]
+    })
+  }
+
+  const loadPage = pageNo => {
+    const offset = pageNo * ordersFilter.first - ordersFilter.first
+    ordersFilter.offset = offset
+  }
+
+  const resetFilters = () => {
+    console.log('resetFilters')
+    Object.keys(ordersFilter).forEach(key => {
+      ordersFilter[key] = defaultFilters[key]
+    })
+  }
+  const pageInfo = computed(() => {
+    console.log(totalItems.value)
+    const totalPages = Math.ceil(totalItems.value / ordersFilter.first)
+    const currentPage = Math.floor((ordersFilter.offset + ordersFilter.first) / ordersFilter.first)
+
+    return {
+      totalPages,
+      currentPage,
+    }
+  })
+
+  return {
+    orderNodes,
+    setFilter,
+    setFilters,
+    loadPage,
+    resetFilters,
+    filter: readonly(ordersFilter),
+    error,
+    loading,
+    pageInfo,
+    filterOptions,
+  }
+}
diff --git a/apps/frontend/admin/src/composables/useProducts.js b/apps/frontend/admin/src/composables/useProducts.js
index f8b243f..94b1041 100644
--- a/apps/frontend/admin/src/composables/useProducts.js
+++ b/apps/frontend/admin/src/composables/useProducts.js
@@ -1,4 +1,4 @@
-import { ref, watchEffect } from 'vue'
+import { ref } from 'vue'
 import { GET_PRODUCTS_QUERY } from 'graphql-client/queries/productQueries'
 import { useQuery, useResult } from '@vue/apollo-composable'
 
@@ -13,7 +13,7 @@ export default () => {
   // eslint-disable-next-line prefer-destructuring
   //   const filterInput = filterState.filterInput
 
-  const { loading, error, result, variables, onResult } = useQuery(GET_PRODUCTS_QUERY, () => ({
+  const { loading, error, result } = useQuery(GET_PRODUCTS_QUERY, () => ({
     page: pageNo.value,
     filter: filterState.value.filterInput,
   }))
@@ -28,27 +28,11 @@ export default () => {
     return data.Products.totalPages
   })
 
-  // implementing total pages this way breaks rectivity of variables
-
   const loadPage = page => {
     console.log('loadinf', page)
     pageNo.value = page
-
-    // variables.value = {
-    //   page: pageNo.value,
-    //   filter: filterInput.value,~
-    // }
-    // variables.value.page = page
   }
 
-  //   watchEffect(() => {
-  //     console.log('refetching', pageNo.value)
-  //     variables.value = {
-  //       page: pageNo.value,
-  //       filter: filterInput.value,
-  //     }
-  //   })
-
   return {
     result,
     loading,
diff --git a/apps/frontend/admin/src/index.css b/apps/frontend/admin/src/index.css
index 2eb9368..4480a52 100644
--- a/apps/frontend/admin/src/index.css
+++ b/apps/frontend/admin/src/index.css
@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 @tailwind base;
+
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
diff --git a/apps/frontend/admin/src/layouts/WithSideBar.vue b/apps/frontend/admin/src/layouts/WithSideBar.vue
index 871c3ec..8d29e9e 100644
--- a/apps/frontend/admin/src/layouts/WithSideBar.vue
+++ b/apps/frontend/admin/src/layouts/WithSideBar.vue
@@ -7,9 +7,9 @@
       <side-bar class=""></side-bar>
       <!-- Sidebar ends -->
       <!-- Remove class [ h-64 ] when adding a card block -->
-      <div class="bg-gray-100 md:pl-64 md:py-5 px-2 md:px-6 m-0 w-full h-full">
+      <div class="bg-gray-100 md:ml-48 md:py-5 px-2 md:px-6 m-0 w-full h-full">
         <!-- Remove class [ border-dashed border-2 border-gray-300 ] to remove dotted border -->
-        <div class="w-full h-full">
+        <div class="w-full min-h-screen h-full">
           <slot />
         </div>
         <!-- Place your content here -->
diff --git a/apps/frontend/admin/src/router/index.js b/apps/frontend/admin/src/router/index.js
index e978b1f..5e13b5c 100644
--- a/apps/frontend/admin/src/router/index.js
+++ b/apps/frontend/admin/src/router/index.js
@@ -30,6 +30,14 @@ const routes = [
       },
     ],
   },
+
+  {
+    path: '/orders',
+    name: 'orders',
+    component: () => import('../views/Orders.vue'),
+
+    children: [{ path: '', name: 'orders-all', component: () => import('../views/OrdersAll.vue') }],
+  },
 ]
 
 const router = createRouter({
diff --git a/apps/frontend/admin/src/views/Orders.vue b/apps/frontend/admin/src/views/Orders.vue
new file mode 100644
index 0000000..7399337
--- /dev/null
+++ b/apps/frontend/admin/src/views/Orders.vue
@@ -0,0 +1,15 @@
+<template>
+  <with-side-bar>
+    <div class="w-full min-h-screen h-full py-12">
+      <router-view></router-view>
+    </div>
+  </with-side-bar>
+</template>
+
+<script>
+import WithSideBar from '../layouts/WithSideBar.vue'
+
+export default {
+  components: { WithSideBar },
+}
+</script>
diff --git a/apps/frontend/admin/src/views/OrdersAll.vue b/apps/frontend/admin/src/views/OrdersAll.vue
new file mode 100644
index 0000000..56b402f
--- /dev/null
+++ b/apps/frontend/admin/src/views/OrdersAll.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="container mx-auto p-5">
+    <!-- header -->
+    <div class="flex justify-between my-4 items-center">
+      <span class="text-lg font-semibold font-montserrat text-black">Orders</span>
+      <div class="flex items-center text-gray-600">
+        <span class="mx-2">Import</span>
+        <span class="ml-2 mr-4">Export</span>
+        <v-button @click="$router.push({ name: 'products-create' })"> Create Order </v-button>
+      </div>
+    </div>
+
+    <orders-list></orders-list>
+  </div>
+</template>
+
+<script>
+import VButton from '../components/BaseButton.vue'
+
+// import VCard from '../components/AppCard.vue'
+import OrdersList from '../components/OrdersList.vue'
+
+export default {
+  components: { VButton, OrdersList },
+}
+</script>
diff --git a/apps/frontend/admin/src/views/ProductEdit.vue b/apps/frontend/admin/src/views/ProductEdit.vue
index 9a328e1..d6989d3 100644
--- a/apps/frontend/admin/src/views/ProductEdit.vue
+++ b/apps/frontend/admin/src/views/ProductEdit.vue
@@ -93,20 +93,24 @@
       </div>
     </div>
 
-    <v-button @click="saveProduct"> Update Product </v-button>
-    <v-button @click="deleteProduct"> Delete Product </v-button>
+    <div class="flex justify-between items-center border-t mt-3 py-4">
+      <div class="flex gap-2">
+        <v-button danger @click="deleteProduct"> Delete Product </v-button>
+        <v-button secondary @click="deleteProduct"> Archive </v-button>
+      </div>
+
+      <v-button @click="saveProduct"> Save </v-button>
+    </div>
   </div>
 </template>
 <script>
 import { computed, ref } from 'vue'
 import { useMutation, useQuery, useResult } from '@vue/apollo-composable'
-import { GET_PRODUCT_EDIT_DATA } from 'graphql-client/queries/productQueries'
-
 import { useRoute } from 'vue-router'
 import { useVuelidate } from '@vuelidate/core'
 import { required, integer } from '@vuelidate/validators'
 import { UPDATE_PRODUCT, DELETE_PRODUCT } from 'graphql-client/mutations/product'
-import { GET_PRODUCTS_QUERY } from 'graphql-client/queries/productQueries'
+import { GET_PRODUCTS_QUERY, GET_PRODUCT_EDIT_DATA } from 'graphql-client/queries/productQueries'
 import { VCard, VCardBody, VCardHeading, VCardFooter } from '../components/AppCard.vue'
 import VInput from '../components/BaseInput.vue'
 import VRichText from '../components/BaseRichTextInput.vue'
diff --git a/apps/frontend/admin/src/views/ProductsCreate.vue b/apps/frontend/admin/src/views/ProductsCreate.vue
index 4daa894..67c876a 100644
--- a/apps/frontend/admin/src/views/ProductsCreate.vue
+++ b/apps/frontend/admin/src/views/ProductsCreate.vue
@@ -59,7 +59,7 @@
             </div>
           </v-card-body>
           <v-card-footer>
-            <p class="text-lg font-bold text-black">Quantity</p>
+            <p class="text-lg font-montserrat font-semibold text-gray-800">Quantity</p>
             <v-input
               v-model="productData.quantity"
               class="w-1/2"
diff --git a/apps/frontend/admin/tailwind.config.js b/apps/frontend/admin/tailwind.config.js
index 1c70a69..08036c4 100644
--- a/apps/frontend/admin/tailwind.config.js
+++ b/apps/frontend/admin/tailwind.config.js
@@ -6,10 +6,9 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        sans: ['Poppins', 'Roboto', 'sans-serif'],
-        serif: ['Playfair Display', 'serif'],
-        body: ['Poppins', 'sans-serif'],
-        display: ['Playfair Display', 'serif'],
+        sans: ['Poppins', 'Helvetica', 'Arial', 'sans-serif'],
+        poppins: ['Poppins', 'sans-serif'],
+        montserrat: ['Montserrat', 'sans-serif'],
       },
       colors: {
         forest: '#11201e',
diff --git a/packages/graphql-client/admin/orders.js b/packages/graphql-client/admin/orders.js
new file mode 100644
index 0000000..f9333ea
--- /dev/null
+++ b/packages/graphql-client/admin/orders.js
@@ -0,0 +1,90 @@
+import gql from 'graphql-tag'
+
+export const GetOrders = gql`
+  query orders(
+    $offset: Int
+    $before: String
+    $after: String
+    $first: Int
+    $last: Int
+    $id: ID
+    $paid: Boolean
+    $paymentMethod: String
+    $paymentStatus: String
+    $fulfillmentStatus: String
+    $createdAt: DateTime
+    $updatedAt: DateTime
+    $orderBy: String
+  ) {
+    orders(
+      orderBy: $orderBy
+      first: $first
+      last: $last
+      offset: $offset
+      before: $before
+      after: $after
+      id: $id
+      paid: $paid
+      paymentMethod: $paymentMethod
+      paymentStatus: $paymentStatus
+      fulfillmentStatus: $fulfillmentStatus
+      createdAt: $createdAt
+      updatedAt: $updatedAt
+    ) {
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+        startCursor
+        endCursor
+      }
+      totalItems
+      edges {
+        node {
+          id
+          extraCharges
+          paymentStatus
+          createdAt
+          fulfillmentStatus
+          totalAmount
+          Customer {
+            user {
+              username
+            }
+          }
+        }
+        cursor
+      }
+    }
+  }
+`
+
+export const GetOrder = gql`
+  query order($id: String, $getCurrent: Boolean!) {
+    order(getCurrent: $getCurrent, id: $id) {
+      id
+      paid
+      paymentStatus
+      extraCharges
+      paymentStatus
+      createdAt
+      orderitemSet {
+        id
+        product {
+          available
+          brand {
+            id
+            name
+          }
+          name
+        }
+        variation {
+          price
+          images
+        }
+        Amount
+        totalAmount
+        Quantity
+      }
+    }
+  }
+`
diff --git a/packages/graphql-client/queries/order.js b/packages/graphql-client/queries/order.js
index 575dd5d..05f74f0 100644
--- a/packages/graphql-client/queries/order.js
+++ b/packages/graphql-client/queries/order.js
@@ -1,120 +1,100 @@
 import gql from 'graphql-tag'
 
-// export const GetOrders= gql`
-// query{
-//   orders{
-//     id
-//     paymentStatus
-//     extraCharges
-//     createdAt
-//     orderitemSet{
-//       totalAmount
-//       productId
-//       variationId
-//       Amount
-//       Quantity
-//       fullfillmentStatus
-//       product{
-//         available
-//         brand
-//         name
-//       }
-//       variation{
-//         available
-//         images
-//         variant{
-//           name
-//           value
-//         }
-//       }
-//     }
-    
-//   }
-// }
-// `
-// $offset: Int ,$before: String , $after: String , $first: Int , $last: Int , $id: ID , $Customer: ID , $paid: Boolean , $paymentMethod: String , $paymentStatus: String , $createdAt: DateTime , updatedAt: DateTime , extraCharges: Int , orderBy: String
 export const GetOrders = gql`
-query 
-orders($offset: Int ,$before: String , $after: String ,
- $first: Int , $last: Int , $id: ID , 
- $paid: Boolean , $paymentMethod: String , $paymentStatus: String , 
- $createdAt: DateTime , $updatedAt: DateTime ,
- $orderBy: String)
-
-{
-  orders(orderBy:$orderBy,first:$first,last:$last,offset:$offset,before:$before,after:$after,
-  id:$id,paid:$paid,paymentMethod:$paymentMethod,paymentStatus:$paymentStatus,createdAt:$createdAt,updatedAt:$updatedAt
-  ){
-    pageInfo{
-     hasNextPage
-     hasPreviousPage
-     startCursor
-     endCursor
-    }
-   edges{
-     node{
-       id
-       extraCharges
-       paymentStatus
-       createdAt
-       orderitemSet{
-         id
-         product{
-           available
-           brand{
-             id
-             name
-           }
-           name
-         }
-         variation{
-           price
-           images
-         }
-         Amount
-         totalAmount
-         Quantity
-         
-       }
-       
-     }
-     cursor
+  query orders(
+    $offset: Int
+    $before: String
+    $after: String
+    $first: Int
+    $last: Int
+    $id: ID
+    $paid: Boolean
+    $paymentMethod: String
+    $paymentStatus: String
+    $fullfilmentStatus: String
+    $createdAt: DateTime
+    $updatedAt: DateTime
+    $orderBy: String
+  ) {
+    orders(
+      orderBy: $orderBy
+      first: $first
+      last: $last
+      offset: $offset
+      before: $before
+      after: $after
+      id: $id
+      paid: $paid
+      paymentMethod: $paymentMethod
+      paymentStatus: $paymentStatus
+      fullfilmentStatus: $fullfilmentStatus
+      createdAt: $createdAt
+      updatedAt: $updatedAt
+    ) {
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+        startCursor
+        endCursor
+      }
+      edges {
+        node {
+          id
+          extraCharges
+          paymentStatus
+          createdAt
+          orderitemSet {
+            id
+            product {
+              available
+              brand {
+                id
+                name
+              }
+              name
+            }
+            variation {
+              price
+              images
+            }
+            Amount
+            totalAmount
+            Quantity
+          }
+        }
+        cursor
+      }
     }
-   
-   } 
- }
+  }
 `
 
 export const GetOrder = gql`
-query order($id: String, $getCurrent: Boolean!){
-  order(getCurrent:$getCurrent , id:$id){
-    id
-    paid
-    paymentStatus
-    extraCharges
-    paymentStatus
-    createdAt
-    orderitemSet{
+  query order($id: String, $getCurrent: Boolean!) {
+    order(getCurrent: $getCurrent, id: $id) {
       id
-      product{
-        available
-        brand{
-          id
+      paid
+      paymentStatus
+      extraCharges
+      paymentStatus
+      createdAt
+      orderitemSet {
+        id
+        product {
+          available
+          brand {
+            id
+            name
+          }
           name
         }
-        name
-      }
-      variation{
-        price
-        images
+        variation {
+          price
+          images
+        }
+        Amount
+        totalAmount
+        Quantity
       }
-      Amount
-      totalAmount
-      Quantity
     }
   }
-}
 `
-
-
-

From 86dc0bc608d7a7809e0a977d8964ceb3d81d3229 Mon Sep 17 00:00:00 2001
From: Aabid <mailtoaabid01@gmail.com>
Date: Thu, 17 Feb 2022 22:53:05 +0530
Subject: [PATCH 6/8] feat: [admin] added dashboard and integrated with backend

---
 .../migrations/0012_auto_20220212_0445.py     |   43 +
 .../migrations/0013_auto_20220212_1244.py     |   38 +
 apps/backend/Orders/models.py                 |   71 +-
 apps/backend/Orders/schema.py                 |   63 +-
 apps/backend/Users/schema.py                  |  127 +-
 apps/backend/cart/models.py                   |  116 +-
 apps/backend/cart/schema.py                   |   22 +-
 apps/backend/checkout/checkout.py             |   52 +-
 apps/backend/shop/models.py                   |    6 +-
 apps/backend/shop/schema.py                   |    4 +-
 apps/backend/utils.py                         |   12 +
 apps/frontend/admin/package.json              |    3 +-
 .../frontend/admin/src/components/AppCard.vue |    2 +-
 .../admin/src/components/AppSideBar.vue       |    4 +-
 .../admin/src/components/BaseButton.vue       |   12 +-
 .../admin/src/components/BaseNavLink.vue      |    2 +-
 .../admin/src/components/BaseTabButton.vue    |   24 +
 .../admin/src/components/CustomersList.vue    |   90 +
 .../admin/src/components/CustomersTable.vue   |   98 +
 .../src/components/DashBoardOverviewCards.vue |   68 +
 .../src/components/DashboardEarningMonth.vue  |   81 +
 .../src/components/DashboardSalesMonth.vue    |   76 +
 .../admin/src/components/OrderItem.vue        |   39 +
 .../admin/src/components/OrderItems.vue       |   39 +
 .../admin/src/components/OrdersTable.vue      |   18 +-
 .../admin/src/components/SalesSummary.vue     |  216 +-
 .../admin/src/components/SortDropdownMenu.vue |   47 +-
 .../admin/src/composables/useCustomers.js     |   69 +
 .../admin/src/composables/useDashboard.js     |  143 +
 .../admin/src/composables/useOrders.js        |   11 +-
 .../admin/src/layouts/WithSideBar.vue         |    2 +-
 apps/frontend/admin/src/main.js               |    1 +
 .../frontend/admin/src/plugins/fontAwesome.js |    6 +
 apps/frontend/admin/src/router/index.js       |   16 +-
 .../frontend/admin/src/views/CustomersAll.vue |   26 +
 apps/frontend/admin/src/views/OrderSingle.vue |  180 +
 apps/frontend/admin/src/views/SideBarView.vue |   15 +
 apps/frontend/admin/src/views/dashboard.vue   |   39 +-
 apps/frontend/store-front/TODO                |   24 +
 apps/frontend/store-front/_package.json       |   19 -
 apps/frontend/store-front/index.html          |   13 -
 apps/frontend/store-front/package.json        |    5 +-
 apps/frontend/store-front/src/App.vue         |   77 +-
 .../store-front/src/graphql/Queries/order.js  |  165 +-
 .../src/graphql/mutations/order.js            |   66 +-
 .../src/store/modules/filters/index.js        |  267 +-
 apps/frontend/store-front/vite.config.js      |    7 -
 .../store-front/workspace.code-workspace      |   11 +
 apps/frontend/store-front/yarn.lock           | 8836 -----------------
 package.json                                  |   33 +-
 packages/config/appolo-preset.js              |    3 +-
 packages/graphql-client/admin/customers.js    |   26 +
 packages/graphql-client/admin/dashboard.js    |   22 +
 packages/graphql-client/admin/orders.js       |   63 +-
 packages/graphql-client/package.json          |    9 +
 packages/graphql-client/queries/order.js      |    6 +-
 yarn.lock                                     |  891 +-
 57 files changed, 2480 insertions(+), 9944 deletions(-)
 create mode 100644 apps/backend/Orders/migrations/0012_auto_20220212_0445.py
 create mode 100644 apps/backend/Orders/migrations/0013_auto_20220212_1244.py
 create mode 100644 apps/backend/utils.py
 create mode 100644 apps/frontend/admin/src/components/BaseTabButton.vue
 create mode 100644 apps/frontend/admin/src/components/CustomersList.vue
 create mode 100644 apps/frontend/admin/src/components/CustomersTable.vue
 create mode 100644 apps/frontend/admin/src/components/DashBoardOverviewCards.vue
 create mode 100644 apps/frontend/admin/src/components/DashboardEarningMonth.vue
 create mode 100644 apps/frontend/admin/src/components/DashboardSalesMonth.vue
 create mode 100644 apps/frontend/admin/src/components/OrderItem.vue
 create mode 100644 apps/frontend/admin/src/components/OrderItems.vue
 create mode 100644 apps/frontend/admin/src/composables/useCustomers.js
 create mode 100644 apps/frontend/admin/src/composables/useDashboard.js
 create mode 100644 apps/frontend/admin/src/views/CustomersAll.vue
 create mode 100644 apps/frontend/admin/src/views/OrderSingle.vue
 create mode 100644 apps/frontend/admin/src/views/SideBarView.vue
 create mode 100644 apps/frontend/store-front/TODO
 delete mode 100644 apps/frontend/store-front/_package.json
 delete mode 100644 apps/frontend/store-front/index.html
 delete mode 100644 apps/frontend/store-front/vite.config.js
 create mode 100644 apps/frontend/store-front/workspace.code-workspace
 delete mode 100644 apps/frontend/store-front/yarn.lock
 create mode 100644 packages/graphql-client/admin/customers.js
 create mode 100644 packages/graphql-client/admin/dashboard.js

diff --git a/apps/backend/Orders/migrations/0012_auto_20220212_0445.py b/apps/backend/Orders/migrations/0012_auto_20220212_0445.py
new file mode 100644
index 0000000..3f322e9
--- /dev/null
+++ b/apps/backend/Orders/migrations/0012_auto_20220212_0445.py
@@ -0,0 +1,43 @@
+# Generated by Django 3.1.13 on 2022-02-12 04:45
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('Users', '0008_auto_20220206_1710'),
+        ('Orders', '0011_order_fulfillment_status'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='orderitem',
+            name='Address',
+        ),
+        migrations.RemoveField(
+            model_name='orderitem',
+            name='fullfillment_status',
+        ),
+        migrations.AddField(
+            model_name='order',
+            name='Address',
+            field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.DO_NOTHING, to='Users.address'),
+        ),
+        migrations.AddField(
+            model_name='order',
+            name='discount_percent',
+            field=models.IntegerField(default=0),
+        ),
+        migrations.AddField(
+            model_name='order',
+            name='tax_percent',
+            field=models.IntegerField(default=0),
+        ),
+        migrations.AddField(
+            model_name='orderitem',
+            name='fulfillment_status',
+            field=models.CharField(choices=[('Unfulfilled', 'Unfulfilled'), ('PartiallyFulfilled', 'PartiallyFulfilled'), ('Fulfilled', 'Fulfilled')], default='Unfulfilled', max_length=50),
+        ),
+    ]
diff --git a/apps/backend/Orders/migrations/0013_auto_20220212_1244.py b/apps/backend/Orders/migrations/0013_auto_20220212_1244.py
new file mode 100644
index 0000000..8f290a3
--- /dev/null
+++ b/apps/backend/Orders/migrations/0013_auto_20220212_1244.py
@@ -0,0 +1,38 @@
+# Generated by Django 3.1.13 on 2022-02-12 12:44
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('Orders', '0012_auto_20220212_0445'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='order',
+            old_name='Customer',
+            new_name='customer',
+        ),
+        migrations.RenameField(
+            model_name='order',
+            old_name='extra_charges',
+            new_name='shipping_charges',
+        ),
+        migrations.RenameField(
+            model_name='orderitem',
+            old_name='Amount',
+            new_name='amount',
+        ),
+        migrations.RenameField(
+            model_name='orderitem',
+            old_name='Customer',
+            new_name='customer',
+        ),
+        migrations.RenameField(
+            model_name='orderitem',
+            old_name='Quantity',
+            new_name='quantity',
+        ),
+    ]
diff --git a/apps/backend/Orders/models.py b/apps/backend/Orders/models.py
index faa4805..dfef25a 100644
--- a/apps/backend/Orders/models.py
+++ b/apps/backend/Orders/models.py
@@ -1,11 +1,14 @@
+import operator
+from functools import reduce
 from django.db import models
 from Users.models import Customer, Address
+from cart.models import document_exists
 from shop.models import Product
 
 
 # Create your models here.
 class Order(models.Model):
-    Customer = models.ForeignKey(Customer, on_delete=models.DO_NOTHING)
+    customer = models.ForeignKey(Customer, on_delete=models.DO_NOTHING)
     paid = models.BooleanField(default=False)
     payment_methods = (("0", "stripe_checkout"), ("1", "PaymentIntent"))
 
@@ -36,41 +39,81 @@ class Order(models.Model):
         choices=Fullfilment_Statuses, default="Unfulfilled", max_length=50
     )
 
+    address = models.ForeignKey(Address, on_delete=models.DO_NOTHING, null=True)
+    tax_percent = models.IntegerField(default=0)
+    discount_percent = models.IntegerField(default=0)
+    shipping_charges = models.IntegerField(default=0)
     created_at = models.DateTimeField(auto_now_add=True)
     updated_at = models.DateTimeField(auto_now=True)
-    extra_charges = models.IntegerField(default=0)
 
     def __str__(self):
-        return f"{self.Customer} {self.id}"
+        return f"{self.customer} {self.id}"
 
+    @property
     def total_amount(self):
         items = OrderItem.objects.filter(order=self)
-        total_amount = self.extra_charges
-        for item in items:
-            total_amount += item.total_amount()
-        return total_amount
+        subtotal = sum((x.total_amount for x in items))
+        subtotal = subtotal + self.shipping_charges
+        subtotal = subtotal - (subtotal * self.discount_percent / 100)
+        return subtotal + (subtotal * self.tax_percent / 100)
+
+    @property
+    def total_items(self):
+
+        items = OrderItem.objects.filter(order=self)
+        return len(items)
+
+    @property
+    def total_quantity(self):
+
+        items = OrderItem.objects.filter(order=self)
+        return reduce(sum, map(lambda x: x.quantity, items))
+
+    @property
+    def total_weight(self):
 
+        items = OrderItem.objects.filter(order=self)
+        return reduce(sum, map(lambda x: x.product.weight * x.quantity, items))
+
+    @property
+    def total_weight_in_grams(self):
+        return self.total_weight() * 1000
 
+
+#  TODO : lowercase the quantity , weight , amount , customer in client
 class OrderItem(models.Model):
     order = models.ForeignKey(Order, on_delete=models.CASCADE)
     product_id = models.CharField(max_length=100, null=False)
     variation_id = models.CharField(null=False, max_length=50)
-    Amount = models.IntegerField(null=False)  # single item price
-    Customer = models.ForeignKey(Customer, on_delete=models.DO_NOTHING)
-    Address = models.ForeignKey(Address, on_delete=models.DO_NOTHING)
-    Quantity = models.IntegerField(null=False)
+    amount = models.IntegerField(null=False)  # single item price
+    customer = models.ForeignKey(Customer, on_delete=models.DO_NOTHING)
+
+    quantity = models.IntegerField(null=False)
     Order_date = models.DateTimeField(auto_now_add=True, blank=True)
 
     details = models.TextField(max_length=500, null=True)
     paid = models.BooleanField(default=False)
-    fullfillment_status = models.CharField(max_length=200, default="Unpaid")
 
+    Fullfilment_Statuses = (
+        ("Unfulfilled", "Unfulfilled"),
+        ("PartiallyFulfilled", "PartiallyFulfilled"),
+        ("Fulfilled", "Fulfilled"),
+    )
+    fulfillment_status = models.CharField(
+        choices=Fullfilment_Statuses, default="Unfulfilled", max_length=50
+    )
+
+    @property
     def total_amount(self):
-        return self.Amount * self.Quantity
+        return self.amount * self.quantity
 
     @property
     def product(self):
-        return Product.objects.get(id=self.product_id)
+
+        if document_exists(lambda: Product.objects.get(id=self.product_id)):
+            return Product.objects.get(id=self.product_id)
+        else:
+            return Product(name="does not exist")
 
     def __str__(self):
         return str(self.id)
diff --git a/apps/backend/Orders/schema.py b/apps/backend/Orders/schema.py
index d23c5aa..b2d8356 100644
--- a/apps/backend/Orders/schema.py
+++ b/apps/backend/Orders/schema.py
@@ -1,8 +1,10 @@
+from ast import Str
+import base64
 from shop.types import ProductType, VariationType
 from django.core.paginator import Paginator
 import graphene
-from graphene import relay
-
+from graphene import Int, relay
+import json
 from graphene_django import DjangoObjectType, DjangoConnectionField
 from graphene_django.filter import DjangoFilterConnectionField
 
@@ -10,37 +12,35 @@
 from Users.models import User, Customer, Address
 from cart.cart import Cart
 from cart.models import PersistentCart
-from graphql_jwt.decorators import login_required
+from graphql_jwt.decorators import login_required, superuser_required
 
 
 from django_filters import FilterSet, OrderingFilter
 
 
+def object_id_from_global_id(global_id: Str) -> Int:
+    global_id_decoded = base64.decodebytes(bytes(global_id, "utf-8")).decode("utf-8")
+    return int(global_id_decoded.split(":")[1])
+
+
 class OrderFilter(FilterSet):
     class Meta:
         model = Order
         fields = {
             "id": ["exact"],
-            "Customer": ["exact"],
+            "customer": ["exact"],
             "paid": ["exact"],
             "payment_method": ["exact"],
             "payment_status": ["exact"],
             "fulfillment_status": ["exact"],
-            "created_at": ["exact"],
+            "created_at": ["exact", "gt", "gte", "lt", "lte", "range", "date"],
             "updated_at": ["exact"],
-            "extra_charges": ["exact"],
+            # "extra_charges": ["exact"],
         }
 
     order_by = OrderingFilter(fields=(("updated_at", "created_at"),))
 
 
-class PaginationType(graphene.ObjectType):
-
-    page_no = graphene.Int()
-    total_pages = graphene.Int()
-    total_count = graphene.Int()
-
-
 class CountableConnectionBase(relay.Connection):
     class Meta:
         abstract = True
@@ -61,7 +61,7 @@ class Meta:
 
     def resolve_totalAmount(self, info):
 
-        return self.total_amount()
+        return self.total_amount
 
 
 class OrderItemType(DjangoObjectType):
@@ -73,14 +73,16 @@ class Meta:
     totalAmount = graphene.Int()
 
     def resolve_totalAmount(self, info):
-        return self.total_amount()
+        return self.total_amount
 
     def resolve_product(self, info):
 
         return self.product
 
     def resolve_variation(self, info):
+
         for v in self.product.variations:
+
             if str(v._id) == self.variation_id:
                 return v
 
@@ -98,6 +100,8 @@ class Query(graphene.ObjectType):
     @login_required
     def resolve_order(self, info, id=None, get_current=None):
         user = info.context.user
+        if id is not None:
+            id = object_id_from_global_id(id)
 
         if get_current:
             session = info.context.session
@@ -162,13 +166,14 @@ def mutate(root, info, input):
 
         customer = Customer.objects.get(user=user)
 
-        order = Order(Customer=customer)
-        order.save()
         # address=Address.objects.get(pk=input.address_id)
         if input.is_primary:
             address = customer.default_address
         else:
             address = customer.Addresses.get(pk=int(input.address_id))
+        order = Order(customer=customer, address=address)
+        order.save()
+
         order_items = []
 
         for item in cart.products():
@@ -182,10 +187,9 @@ def mutate(root, info, input):
             order_item = OrderItem(
                 order=order,
                 product_id=str(product_id),
-                Amount=price,
-                Address=address,
-                Customer=customer,
-                Quantity=item.quantity,
+                amount=price,
+                customer=customer,
+                quantity=item.quantity,
                 variation_id=str(variation_id),
             )
 
@@ -197,5 +201,22 @@ def mutate(root, info, input):
         return CreateOrderMutation(order=order, order_items=order_items)
 
 
+class UpdateOrderMutation(graphene.Mutation):
+
+    order = graphene.Field(OrderNode)
+
+    class Arguments:
+        order_id = graphene.String()
+        fulfillment_status = graphene.String()
+
+    def mutate(self, info, order_id, fulfillment_status, **kwargs):
+        id = object_id_from_global_id(order_id)
+        order = Order.objects.get(pk=id)
+        order.fulfillment_status = fulfillment_status
+        order.save()
+        return UpdateOrderMutation(order=order)
+
+
 class Mutation(graphene.ObjectType):
     create_order = CreateOrderMutation.Field()
+    update_order = UpdateOrderMutation.Field()
diff --git a/apps/backend/Users/schema.py b/apps/backend/Users/schema.py
index 372c077..c7d31ba 100644
--- a/apps/backend/Users/schema.py
+++ b/apps/backend/Users/schema.py
@@ -1,24 +1,27 @@
-import os
-
 # third party packages
 import graphene
-import requests
-from graphene_django.types import DjangoObjectType, ObjectType
-from graphene_mongo import MongoengineObjectType
+from graphene_django.types import DjangoObjectType
 from graphql_auth.schema import UserQuery, MeQuery
 from graphql_auth import mutations
 from graphql_auth.models import UserStatus
-from graphql_jwt.decorators import login_required
+from graphql_jwt.decorators import login_required, superuser_required
+from graphene_django.filter import DjangoFilterConnectionField
+from django_filters import FilterSet
+from utils import CountableConnectionBase
+from graphene import relay
+
 # app packages
 from .models import User, Customer, Address
-from cart.decorators import migrate_cart_to_db,migrate_cart_to_session
+from cart.decorators import migrate_cart_to_db, migrate_cart_to_session
+
 
 class UserType(DjangoObjectType):
     class Meta:
         model = User
-        
+
     verified = graphene.Boolean()
-    def resolve_verified(self,*args,**kwargs):
+
+    def resolve_verified(self, *args, **kwargs):
         return self.status.verified
 
 
@@ -31,6 +34,7 @@ class AddressType(DjangoObjectType):
     class Meta:
         model = Address
 
+
 class MeQuery(MeQuery):
     class Meta:
         abstract = True
@@ -42,46 +46,69 @@ def resolve_me(self, info):
         return info.context.user
 
 
+class CustomerFilter(FilterSet):
+    class Meta:
+        model = Customer
+        fields = {
+            "user": ["exact"],
+            "user__first_name": ["exact"],
+            "user__last_name": ["exact"],
+            "user__email": ["exact"],
+            "phone_number": ["exact"],
+        }
+
+
+class CustomerNode(DjangoObjectType):
+    class Meta:
+        model = Customer
+        interfaces = (relay.Node,)
+        connection_class = CountableConnectionBase
+
+    total_orders = graphene.Int()
+
+    def resolve_total_orders(self, info):
+        return self.orders.count()
+
+
 class Query(UserQuery, MeQuery, graphene.ObjectType):
     # user=graphene.Field(UserType)
     customer = graphene.Field(CustomerType)
     # users=graphene.List(UserType)
-    customers = graphene.List(CustomerType)
+    # customers = graphene.List(CustomerType)
+
+    customers = DjangoFilterConnectionField(
+        CustomerNode, filterset_class=CustomerFilter
+    )
     default_address = graphene.Field(AddressType)
     addresses = graphene.List(AddressType)
-    
+
+    @superuser_required
+    def resolve_customers(self, info, **kwargs):
+
+        return CustomerFilter(kwargs).qs
+
     @login_required
     def resolve_customer(self, info, **kwargs):
         user = info.context.user
-        #print(user)
+        # print(user)
         if user.is_customer:
             customer = Customer.objects.get(user=user)
-            #print("customer", customer)
+            # print("customer", customer)
             return customer
-        raise Exception('You are not registerd as customer')
+        raise Exception("You are not registerd as customer")
 
-    def resolve_customers(self, info, **kwargs):
-        user = info.context.user
-        #print(user)
-        if user.is_superuser:
-            customers = Customer.objects.all()
-            #print("customer", customers)
-            return customers
-        raise Exception('You are not admin')
-    
     @login_required
     def resolve_default_address(self, info, **kwargs):
         user = info.context.user
         # if user.is_customer:
-        customer = Customer.objects.get(
-            user=user)
-        #print(customer)
+        customer = Customer.objects.get(user=user)
+        # print(customer)
         return customer.default_address
 
     @login_required
     def resolve_addresses(self, info, **kwargs):
         user = info.context.user
-        #print(user)
+        # print(user)
         customer = Customer.objects.get(user=user)
         return customer.Addresses.all()
 
@@ -105,24 +132,24 @@ class AddAddressMutation(graphene.Mutation):
 
     class Arguments:
         address = AddressInput()
+
     @login_required
     def mutate(self, info, address):
         user = info.context.user
-        is_primary =address.get("is_primary")
+        is_primary = address.get("is_primary")
         del address["is_primary"]
-        #print("address",address)
+        # print("address",address)
         # #print(user)
         customer = Customer.objects.get(user=user)
         address = Address(**address)
         address.save()
-        #print(address)
-        
-       
+        # print(address)
+
         if is_primary:
             customer.default_address = address
         else:
             customer.Addresses.add(address)
-            
+
         customer.save()
         return AddAddressMutation(address=address)
 
@@ -132,6 +159,7 @@ class ChangeDefaultAddressMutation(graphene.Mutation):
 
     class Arguments:
         address_id = graphene.String()
+
     @login_required
     def mutate(self, info, address_id):
         user = info.context.user
@@ -143,7 +171,7 @@ def mutate(self, info, address_id):
         #     p.update()
         # # add is_primary to new address
         address = customer.Addresses.get(id=address_id)
-        customer.default_address= address
+        customer.default_address = address
         # address.is_primary = True
         address.update()
         customer.update()
@@ -156,6 +184,7 @@ class UpdateAddressMutation(graphene.Mutation):
     class Arguments:
         address_id = graphene.String()
         update_values = AddressInput()
+
     @login_required
     def mutate(self, info, address_id, update_values):
         user = info.context.user
@@ -164,31 +193,34 @@ def mutate(self, info, address_id, update_values):
             address = customer.Addresses.get(id=address_id)
             address.update_fields(update_values)
             if update_values.is_primary:
-                #print("setting as primary")
+                # print("setting as primary")
                 customer.default_address = address
                 customer.Addresses.remove(int(address_id))
-            if update_values.is_primary== False and customer.default_address==address:
-                 customer.default_address.delete()
+            if (
+                update_values.is_primary == False
+                and customer.default_address == address
+            ):
+                customer.default_address.delete()
             address.save()
             customer.save()
             return UpdateAddressMutation(address=address)
 
+
 class DeleteAddressMutation(graphene.Mutation):
     success = graphene.Boolean()
 
-    class Arguments :
+    class Arguments:
         address_id = graphene.String()
 
     @login_required
-    def mutate(self,info,address_id):
+    def mutate(self, info, address_id):
         user = info.context.user
         if user.is_authenticated:
             customer = Customer.objects.get(user=user)
             customer.Addresses.remove(int(address_id))
-            if customer.default_address.id==int(address_id):
+            if customer.default_address.id == int(address_id):
                 customer.default_address.delete()
 
-           
             # address.delete()
             return DeleteAddressMutation(success=True)
 
@@ -196,18 +228,19 @@ def mutate(self,info,address_id):
 class TokenAuth(mutations.ObtainJSONWebToken):
     @classmethod
     @migrate_cart_to_db
-    def resolve_mutation(cls,root,info,**kwargs):
-        response = super().resolve_mutation(root,info,**kwargs)
+    def resolve_mutation(cls, root, info, **kwargs):
+        response = super().resolve_mutation(root, info, **kwargs)
         return response
 
-class RevokeToken(mutations.RevokeToken):
 
+class RevokeToken(mutations.RevokeToken):
     @classmethod
     @migrate_cart_to_session
-    def resolve_mutation(cls,root,info,**kwargs):
-        response = super().resolve_mutation(root,info,**kwargs)
+    def resolve_mutation(cls, root, info, **kwargs):
+        response = super().resolve_mutation(root, info, **kwargs)
         return response
 
+
 class AuthMutation(graphene.ObjectType):
     register = mutations.Register.Field()
     verify_account = mutations.VerifyAccount.Field()
@@ -236,4 +269,4 @@ class Mutation(AuthMutation, graphene.ObjectType):
     add_address = AddAddressMutation.Field()
     change_default_address = ChangeDefaultAddressMutation.Field()
     update_address = UpdateAddressMutation.Field()
-    delete_address=DeleteAddressMutation.Field()
+    delete_address = DeleteAddressMutation.Field()
diff --git a/apps/backend/cart/models.py b/apps/backend/cart/models.py
index df9e813..ea10647 100644
--- a/apps/backend/cart/models.py
+++ b/apps/backend/cart/models.py
@@ -1,46 +1,65 @@
-from xml.dom.minidom import DocumentFragment
 from django.db import models
-from itsdangerous import exc
+
 from mongoengine import *
-from numpy import product
-from shop.models import Product,Variation
+
+from shop.models import Product, Variation
 from .cart import AbstractCart
+
 # Create your models here.
 
+
 class CartItem(EmbeddedDocument):
     product = ReferenceField(Product)
-    variation= EmbeddedDocumentField(Variation)
-    quantity= IntField()
+    variation = EmbeddedDocumentField(Variation)
+    quantity = IntField()
     price = IntField()
     # Ptotal_price = IntField()
 
+
 class FinalMeta(type(Document), type(AbstractCart)):
     pass
 
-class PersistentCart(AbstractCart,Document,metaclass=FinalMeta):
-    user_id =  IntField(required=True,null=False)
-    created_at= DateTimeField()
+
+class PersistentCart(AbstractCart, Document, metaclass=FinalMeta):
+    user_id = IntField(required=True, null=False)
+    created_at = DateTimeField()
     updated_at = DateTimeField()
-    items=ListField(EmbeddedDocumentField(CartItem))
-    
+    items = ListField(EmbeddedDocumentField(CartItem))
+
+    def remove_deleted_products(self):
+        print("deleting")
+
     @classmethod
     def get_or_create(cls, user_id):
-        try :
+        try:
+            print("fetch cart")
             cart = cls.objects.get(user_id=user_id)
-        except DoesNotExist :
-            cart  = cls.objects.create(user_id=user_id)
+
+            print("cart", cart)
+        except DoesNotExist:
+            cart = cls.objects.create(user_id=user_id)
         return cart
 
     def products(self):
-        return self.items
 
-    def add(self, product_id,variation_id,quantity=1, override_quantity=False):
-        #checks if item is in cart already
-        
+        valid_items = list(
+            filter(lambda item: document_exists(lambda: item.product), self.items)
+        )
+        print("valid", valid_items)
+        self.items = valid_items
+        self.save()
+        return valid_items
+
+    def add(self, product_id, variation_id, quantity=1, override_quantity=False):
+        # checks if item is in cart already
+
         if quantity <= 0:
-            raise ValueError('Cannot add zero or negative quantities!')
+            raise ValueError("Cannot add zero or negative quantities!")
         for item in self.items:
-            if str(item.product.id) == product_id and str(item.variation._id)  == variation_id:
+            if (
+                str(item.product.id) == product_id
+                and str(item.variation._id) == variation_id
+            ):
                 # item.price = item.variation.price
                 if override_quantity:
                     item.quantity = quantity
@@ -48,43 +67,68 @@ def add(self, product_id,variation_id,quantity=1, override_quantity=False):
                     item.quantity += 1
                 self.save()
                 return
-        
+
         #  add new item if not in cart already
-        product= Product.objects.get(id=product_id)
-        variation=product.get_variation(variation_id)
-        item = CartItem(product=product,variation=variation,quantity=quantity,price=variation.price)
+        product = Product.objects.get(id=product_id)
+        variation = product.get_variation(variation_id)
+        item = CartItem(
+            product=product,
+            variation=variation,
+            quantity=quantity,
+            price=variation.price,
+        )
         self.items.append(item)
         self.save()
 
-    def remove(self, product_id,variation_id):
+    def remove(self, product_id, variation_id):
         product = Product.objects.get(id=product_id)
         variation = product.get_variation(variation_id)
-        self.update(pull__items= CartItem(product=product,variation=variation))
+        self.update(pull__items=CartItem(product=product, variation=variation))
 
     def clear_cart(self):
         self.items = []
         self.save()
 
     def get_total_price(self):
-        total_price=0
-        for item in self.items :
-            total_price += (item.price * item.quantity)
+        total_price = 0
+        for item in self.items:
+            total_price += item.price * item.quantity
         return total_price
 
     def total_items(self):
-       
+
         return sum(item.quantity for item in self.items)
 
-    
     def add_from_session(self, session_cart):
         cart = session_cart.data()
-        for key,value in cart.items():
+        for key, value in cart.items():
             # print(key,value)
-            product_id,variation_id=key.split(',')
-            self.add(product_id,variation_id,quantity=value["quantity"],override_quantity=True)
+            product_id, variation_id = key.split(",")
+            self.add(
+                product_id,
+                variation_id,
+                quantity=value["quantity"],
+                override_quantity=True,
+            )
         self.save()
-  
 
-                    
+
+# def document_exists(func):
+#     def wrapper(*args, **kwargs):
+#         try:
+#             func(*args, **kwargs)
+#             return True
+#         except DoesNotExist as e:
+#             return False
+
+#     return wrapper
 
 
+def document_exists(callback, onerror=None):
+    try:
+        callback()
+        return True
+    except DoesNotExist as e:
+        if onerror:
+            onerror()
+        return False
diff --git a/apps/backend/cart/schema.py b/apps/backend/cart/schema.py
index 5c5373d..5128c01 100644
--- a/apps/backend/cart/schema.py
+++ b/apps/backend/cart/schema.py
@@ -13,25 +13,6 @@
 from .cart import Cart
 from .models import PersistentCart
 
-# class CartProductType(graphene.ObjectType):
-#     product=graphene.Field(ProductType)
-#     price=graphene.Int()
-#     variation=graphene.Field(VariationType)
-#     quantity=graphene.Int()
-#     total_price=graphene.Int()
-
-
-#     def resolve_total_price(parent):
-
-#         # print("self",self,info)
-#         return parent["quantity"] * parent["price"]
-
-
-# class CartType(graphene.ObjectType):
-#     cartLength=graphene.Int()
-#     totalPrice=graphene.Int()
-#     products=graphene.List(CartProductType)
-
 
 class CartProductType(graphene.ObjectType):
     product = graphene.Field(ProductType)
@@ -67,7 +48,7 @@ def resolve_cart(self, info, **kwargs):
         length = cart_.total_items()
         total_price = cart_.get_total_price()
         cart_products = cart_.products()
-        print(cart_products)
+        print("products", cart_products)
         return CartType(
             cartLength=length, totalPrice=total_price, products=cart_products
         )
@@ -147,6 +128,7 @@ def mutate(root, info, Input):
         else:
             cart = Cart(info.context)
         if Input.quantity <= 0:
+
             cart.remove(product_id=Input.product_id, variation_id=Input.variation_id)
         else:
             cart.add(
diff --git a/apps/backend/checkout/checkout.py b/apps/backend/checkout/checkout.py
index 0a601cd..145898b 100644
--- a/apps/backend/checkout/checkout.py
+++ b/apps/backend/checkout/checkout.py
@@ -1,45 +1,47 @@
 import stripe
 from django.conf import settings
-from Orders.models import Order,OrderItem
+from Orders.models import Order, OrderItem
+
 
 def create_checkout_session(request):
     if request:
-        domain_url = 'http://localhost:8000/'
+        domain_url = "http://localhost:8000/"
         stripe.api_key = settings.STRIPE_SECRET_KEY
         try:
-        
+
             checkout_session = stripe.checkout.Session.create(
-                success_url=domain_url + 'success?session_id={CHECKOUT_SESSION_ID}',
-                cancel_url=domain_url + 'cancelled/',
-                payment_method_types=['card'],
-                mode='payment',
+                success_url=domain_url + "success?session_id={CHECKOUT_SESSION_ID}",
+                cancel_url=domain_url + "cancelled/",
+                payment_method_types=["card"],
+                mode="payment",
                 line_items=[
                     {
-                        'name': 'T-shirt',
-                        'quantity': 1,
-                        'currency': 'usd',
-                        'amount': '2000',
+                        "name": "T-shirt",
+                        "quantity": 1,
+                        "currency": "usd",
+                        "amount": "2000",
                     }
-                ]
+                ],
             )
-            return checkout_session['id']
+            return checkout_session["id"]
         except Exception as e:
-            return  str(e)
+            return str(e)
+
 
 def create_payment_intent(order_id):
-    stripe.api_key=settings.STRIPE_SECRET_KEY
+    stripe.api_key = settings.STRIPE_SECRET_KEY
     print(stripe.api_key)
-    order=Order.objects.get(id=order_id)
-    #print("order_id",order_id)
-    total_price=order.total_amount() *100
-    print("total_price in paisa",total_price)
-    intent=stripe.PaymentIntent.create(
+    order = Order.objects.get(id=order_id)
+    # print("order_id",order_id)
+    total_price = int(order.total_amount * 100)
+    print("total_price in paisa", total_price)
+    intent = stripe.PaymentIntent.create(
         amount=total_price,
-        currency='inr',
+        currency="inr",
         # payment_method_types=['card'],
-        automatic_payment_methods = {"enabled": True},
-        )
-    order.payment_id=intent['id']
+        automatic_payment_methods={"enabled": True},
+    )
+    order.payment_id = intent["id"]
     order.save()
-    #print("intent",intent)
+    # print("intent",intent)
     return intent
diff --git a/apps/backend/shop/models.py b/apps/backend/shop/models.py
index 07e99c1..b30f987 100644
--- a/apps/backend/shop/models.py
+++ b/apps/backend/shop/models.py
@@ -110,9 +110,13 @@ def available_variants(self):
         return variants
 
     def filterby(self, data):  # usually the input from graphene schema i.e FilterInput
-        filter = {"status": data["status"]}
+        filter = {}
+
         print(data)
 
+        if data.status:
+            filter["status"] = data["status"]
+
         if data.categories:
             filter["category__in"] = data.categories
 
diff --git a/apps/backend/shop/schema.py b/apps/backend/shop/schema.py
index 7674dd6..ac6c67f 100644
--- a/apps/backend/shop/schema.py
+++ b/apps/backend/shop/schema.py
@@ -27,8 +27,8 @@ def resolve_Products(self, info, filter={}, pageNb=1, **kwargs):
         # print("fetching products")
         # print("pagenb :- ",pageNb)
 
-        # if not info.context.user.is_superuser:
-        #     filter["status"] = "active"
+        if not info.context.user.is_superuser:
+            filter["status"] = "active"
 
         limit = 30
         offset = (pageNb - 1) * limit
diff --git a/apps/backend/utils.py b/apps/backend/utils.py
new file mode 100644
index 0000000..f409f46
--- /dev/null
+++ b/apps/backend/utils.py
@@ -0,0 +1,12 @@
+import graphene
+import graphene.relay as relay
+
+
+class CountableConnectionBase(relay.Connection):
+    class Meta:
+        abstract = True
+
+    total_items = graphene.Int()
+
+    def resolve_total_items(self, *args, **kwargs):
+        return self.length
diff --git a/apps/frontend/admin/package.json b/apps/frontend/admin/package.json
index 6b8bcc6..a0b4496 100644
--- a/apps/frontend/admin/package.json
+++ b/apps/frontend/admin/package.json
@@ -24,7 +24,7 @@
     "graphql-tag": "^2.12.6",
     "router": "^2.0.0-beta.1",
     "utils": "*",
-    "vue": "^3.2.25",
+    "vue": "~3.2.25",
     "vue-chart-3": "^3.0.9",
     "vue-router": "4",
     "vuex": "4"
@@ -41,6 +41,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.4.0",
     "postcss": "^8.4.5",
+    "sass": "^1.49.7",
     "tailwindcss": "^3.0.15",
     "vite": "^2.7.2"
   }
diff --git a/apps/frontend/admin/src/components/AppCard.vue b/apps/frontend/admin/src/components/AppCard.vue
index 0a6855e..e2472c8 100644
--- a/apps/frontend/admin/src/components/AppCard.vue
+++ b/apps/frontend/admin/src/components/AppCard.vue
@@ -3,7 +3,7 @@
     :is="$props.tag"
     class="bg-white"
     :class="[
-      $props.outlined ? 'border-2' : 'border-none',
+      $props.outlined ? 'border' : 'border-none',
       `shadow-${$props.elevation}`,
 
       $props.tile ? 'rounded-none' : `rounded-${$props.rounded}`,
diff --git a/apps/frontend/admin/src/components/AppSideBar.vue b/apps/frontend/admin/src/components/AppSideBar.vue
index 762f256..00e6a87 100644
--- a/apps/frontend/admin/src/components/AppSideBar.vue
+++ b/apps/frontend/admin/src/components/AppSideBar.vue
@@ -35,7 +35,7 @@ const menuItems = {
     },
   },
   customers: {
-    to: { name: 'products' },
+    to: { name: 'customers-all' },
     icon: 'user',
     submenu: true,
   },
@@ -69,7 +69,7 @@ const route = useRoute()
   <transition name="fade" :duration="1000">
     <nav
       v-if="isDrawerOpen"
-      class="gap-4 font-montserrat drawer fixed top-0 bottom-0 w-2/3 bg-white h-auto z-50 md:pt-16 md:z-0 pr-2 md:w-48 border-r-2 shadow-sm md:shadow-none"
+      class="gap-4 font-montserrat drawer fixed top-0 bottom-0 w-2/3 bg-white h-auto z-50 md:pt-16 md:z-0 pr-2 md:w-56 border-r-2 shadow-sm md:shadow-none"
     >
       <div class="text-right px-4 text-xl md:hidden w-full">
         <font-awesome-icon icon="times" @click="toggleDrawer"></font-awesome-icon>
diff --git a/apps/frontend/admin/src/components/BaseButton.vue b/apps/frontend/admin/src/components/BaseButton.vue
index 312f00a..bba69a7 100644
--- a/apps/frontend/admin/src/components/BaseButton.vue
+++ b/apps/frontend/admin/src/components/BaseButton.vue
@@ -8,6 +8,11 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  base: {
+    type: Boolean,
+    default: false,
+  },
+
   primary: {
     type: Boolean,
     default: false,
@@ -41,17 +46,18 @@ defineProps({
 
 <template>
   <button
-    class="text-center capitalize font-montserrat block py-2 px-5 text-white transition-all ease-in-out duration-300 hover:scale-105"
+    class="text-center capitalize font-montserrat block py-2 px-5 transition-all ease-in-out duration-300 hover:scale-105"
     :class="{
       rounded: !tile,
-      'bg-teal-700 hover:bg-teal-600': !secondary && !warning && !success && !info && !danger,
-      'bg-mint text-gray-600 ': secondary,
+      'bg-teal-700 hover:bg-teal-600 text-white ': !secondary && !warning && !success && !info && !danger && !base,
+      'bg-mint text-gray-600  ': secondary,
       'bg-yellow-600 text-white': warning,
       'bg-green-600 text-gray-600': success,
       'bg-blue-600 text-gray-600': info,
       'bg-white hover:shadow-sm border border-red-500 text-red-500': danger,
       'bg-gray-400 cursor-not-allowed': disabled,
       'bg-gray-400 cursor-wait': loading,
+      'bg-white': base,
     }"
     v-bind="$attrs"
   >
diff --git a/apps/frontend/admin/src/components/BaseNavLink.vue b/apps/frontend/admin/src/components/BaseNavLink.vue
index 6ef7471..15809af 100644
--- a/apps/frontend/admin/src/components/BaseNavLink.vue
+++ b/apps/frontend/admin/src/components/BaseNavLink.vue
@@ -11,7 +11,7 @@ defineProps({
   <div
     :class="[
       active ? 'bg-mint bg-opacity-50 text-teal-800 border-l-8 border-teal-800 px-2' : 'px-3 text-gray-600',
-      'rounded-r-sm font-semibold py-1  cursor-pointer text-base',
+      'rounded-r-sm font-medium py-1  cursor-pointer text-base',
     ]"
   >
     <slot></slot>
diff --git a/apps/frontend/admin/src/components/BaseTabButton.vue b/apps/frontend/admin/src/components/BaseTabButton.vue
new file mode 100644
index 0000000..9d2882a
--- /dev/null
+++ b/apps/frontend/admin/src/components/BaseTabButton.vue
@@ -0,0 +1,24 @@
+<script setup>
+import BaseButton from './BaseButton.vue'
+defineProps({
+  active: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
+
+<template>
+  <base-button
+    base
+    tile
+    :class="[
+      'mr-8 m-0 py-2.5 px-0 text-sm leading-5 font-medium text-gray-500  ',
+
+      active ? 'border-b-4 border-green-800 font-bold text-black' : 'border-b-4 border-transparent',
+    ]"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </base-button>
+</template>
diff --git a/apps/frontend/admin/src/components/CustomersList.vue b/apps/frontend/admin/src/components/CustomersList.vue
new file mode 100644
index 0000000..fd7f5f6
--- /dev/null
+++ b/apps/frontend/admin/src/components/CustomersList.vue
@@ -0,0 +1,90 @@
+<template>
+  <v-card outlined class="p-0">
+    <orders-filter-drawer :is-open="open" :toggle="toggleDrawer"></orders-filter-drawer>
+    <div>
+      <!-- customer status tabs -->
+
+      <div class="flex px-3 py-2">
+        <base-tab-button :active="true"> All </base-tab-button>
+        <base-tab-button v-for="status in statuses" :key="status.value">
+          {{ status.name }}
+        </base-tab-button>
+      </div>
+
+      <div class="flex py-3 px-5 justify-between flex-nowrap gap-2">
+        <div class="text-lg rounded-md text-gray-400 border-2 py-1 px-2 w-4/5 focus-within:border-blue-400">
+          <font-awesome-icon icon="search" class="text-current mr-1"></font-awesome-icon>
+          <input
+            type="text"
+            placeholder="search orders"
+            class="w-11/12 text-gray-500 border-none focus:ring-transparent focus:border-none"
+          />
+        </div>
+        <div class="flex items-center gap-3">
+          <sort-dropdown-menu items="['name']" @sort="console.log('ss')"></sort-dropdown-menu>
+          <button class="border border-gray-500 py-2 px-3 w-full text-sm" @click="toggleDrawer()">More Filters</button>
+        </div>
+      </div>
+
+      <div v-if="loading">loading</div>
+      <div v-else-if="error">
+        {{ error }}
+      </div>
+      <div v-else>
+        <customers-table :customers="customerNodes"></customers-table>
+      </div>
+    </div>
+    <v-card-footer>
+      <v-pagination
+        :total-pages="pageInfo.totalPages"
+        :current-page="pageInfo.currentPage"
+        @go-to-page="loadPage"
+      ></v-pagination>
+    </v-card-footer>
+  </v-card>
+</template>
+
+<script>
+import useNavdrawer from '../composables/useNavdrawer'
+import { VCard, VCardFooter } from './AppCard.vue'
+import BaseTabButton from './BaseTabButton.vue'
+import OrdersFilterDrawer from './OrdersFilterDrawer.vue'
+import VPagination from './BasePagination.vue'
+import CustomersTable from './CustomersTable.vue'
+import SortDropdownMenu from './SortDropdownMenu.vue'
+import useCustomers from '../composables/useCustomers'
+
+export default {
+  components: {
+    VCard,
+    BaseTabButton,
+    OrdersFilterDrawer,
+    SortDropdownMenu,
+    VCardFooter,
+    CustomersTable,
+    VPagination,
+  },
+
+  setup() {
+    const { open, toggleDrawer } = useNavdrawer(true)
+
+    const statuses = [
+      {
+        name: 'Active',
+        value: 'succeeded',
+      },
+      {
+        name: 'Disabled',
+        value: 'cancelled',
+      },
+    ]
+
+    return {
+      ...useCustomers(),
+      open,
+      toggleDrawer,
+      statuses,
+    }
+  },
+}
+</script>
diff --git a/apps/frontend/admin/src/components/CustomersTable.vue b/apps/frontend/admin/src/components/CustomersTable.vue
new file mode 100644
index 0000000..b9187eb
--- /dev/null
+++ b/apps/frontend/admin/src/components/CustomersTable.vue
@@ -0,0 +1,98 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<template>
+  <div class="flex flex-col">
+    <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+      <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+        <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  User ID
+                </th>
+
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  user name
+                </th>
+
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Email
+                </th>
+
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Active Status
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Phone No
+                </th>
+                <th scope="col" class="relative px-6 py-3">
+                  <span class="sr-only">Edit</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+              <tr v-for="{ node: customer } in customers" :key="customer.id" class="cursor-pointer">
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="text-sm font-medium text-gray-900">#{{ customer.id }}</div>
+                </td>
+
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="text-sm text-gray-900">
+                    {{ customer.user.username }}
+                  </div>
+                </td>
+
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="text-sm text-gray-900">
+                    {{ customer.user.email }}
+                  </div>
+                </td>
+
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="text-sm text-gray-900">
+                    {{ customer.user.isActive }}
+                  </div>
+                </td>
+
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="text-sm text-gray-900">
+                    {{ customer.phoneNumber }}
+                  </div>
+                </td>
+
+                <!-- <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                  <router-link
+                    :to="{ name: 'product-edit', params: { id: customer.id } }"
+                    class="text-indigo-600 hover:text-indigo-900"
+                    >Edit</router-link
+                  >
+                </td> -->
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    customers: {
+      type: Array,
+      required: true,
+    },
+  },
+  methods: {
+    goToCustomer(id) {
+      this.$router.push({
+        name: 'order-view',
+        params: {
+          id,
+        },
+      })
+    },
+  },
+}
+</script>
diff --git a/apps/frontend/admin/src/components/DashBoardOverviewCards.vue b/apps/frontend/admin/src/components/DashBoardOverviewCards.vue
new file mode 100644
index 0000000..c6c946b
--- /dev/null
+++ b/apps/frontend/admin/src/components/DashBoardOverviewCards.vue
@@ -0,0 +1,68 @@
+<script setup>
+import { reactive, computed, watchEffect, watch, watchPostEffect } from 'vue'
+import { useQuery, useResult } from '@vue/apollo-composable'
+import { GetOverviewStats } from 'graphql-client/admin/dashboard'
+import { VCard, VCardBody } from './AppCard.vue'
+
+const { result, loading, error } = useQuery(GetOverviewStats)
+const unfulfilledOrdersCount = useResult(result, 0, data => data.unfulfilledOrders.totalItems)
+const totalSales = useResult(result, 0, data =>
+  data.totalSales.edges.reduce((acc, { node }) => acc + node.totalAmount, 0),
+)
+const totalProducts = useResult(result, 0, data => data.Products.totalProducts)
+const totalCustomers = useResult(result, 0, data => data.customers.totalItems)
+
+const overviewData = reactive({
+  unfulfilledOrders: {
+    value: unfulfilledOrdersCount.value,
+    icon: 'shopping-bag',
+    color: '#f1d3a1',
+  },
+  customers: {
+    value: unfulfilledOrdersCount.value,
+    icon: 'user',
+    color: '#faaf92',
+  },
+  products: {
+    value: 0,
+    icon: 'shopping-cart',
+    color: '#baca34',
+  },
+  sales: {
+    value: 100,
+    icon: 'dollar-sign',
+    color: '#89b4c4',
+  },
+})
+watchEffect(() => {
+  overviewData.unfulfilledOrders.value = unfulfilledOrdersCount.value
+  overviewData.sales.value = totalSales.value
+  overviewData.products.value = totalProducts
+  overviewData.customers.value = totalCustomers
+})
+</script>
+<template>
+  <div class="w-full" v-if="!loading">
+    <div class="flex gap-6 justify-between">
+      <v-card outlined rounded="xl" v-for="(value, key) in overviewData" :key="key" class="w-full">
+        <v-card-body>
+          <div class="flex gap-3 items-center">
+            <div class="grow">
+              <p class="text-5xl font-montserrat text-gray-800 font-semibold">{{ value.value }}</p>
+              <p class="text-gray-600 py-2">{{ key }}</p>
+            </div>
+
+            <div
+              class="rounded-full w-24 h-24 flex justify-center items-center"
+              :style="{ backgroundColor: `${value.color}4c` }"
+            >
+              <span :style="{ color: value.color }">
+                <font-awesome-icon class="text-5xl" :icon="value.icon"></font-awesome-icon>
+              </span>
+            </div>
+          </div>
+        </v-card-body>
+      </v-card>
+    </div>
+  </div>
+</template>
diff --git a/apps/frontend/admin/src/components/DashboardEarningMonth.vue b/apps/frontend/admin/src/components/DashboardEarningMonth.vue
new file mode 100644
index 0000000..614fdf7
--- /dev/null
+++ b/apps/frontend/admin/src/components/DashboardEarningMonth.vue
@@ -0,0 +1,81 @@
+<script setup>
+import { LineChart, useLineChart } from 'vue-chart-3'
+import { VCard, VCardBody, VCardHeading, VCardFooter } from './AppCard.vue'
+import { useSalesForMonth } from '../composables/useDashboard'
+import BaseButton from './BaseButton.vue'
+import { computed, watchEffect, ref, reactive } from 'vue'
+// Line Chart
+
+const { earningsPerDay } = useSalesForMonth()
+const totalEarnings = computed(() => {
+  return earningsPerDay.value.reduce((acc, curr) => acc + curr.earnings, 0)
+})
+
+watchEffect(() => {
+  // console.log(totalEarnings.value)
+  console.log(earningsPerDay.value)
+})
+
+const range = (start, end) => Array.from({ length: end - start }, (_, i) => i + start)
+
+const lineChartData = computed(() => ({
+  labels: range(1, earningsPerDay.value.length + 1),
+  // labels: [2, 4, 3],
+  datasets: [
+    {
+      lineTension: 0.3,
+      label: 'My First dataset',
+      fill: true,
+      backgroundColor: 'rgba(41, 128, 185, 0.1)',
+      strokeColor: 'none',
+      borderColor: 'rgba(41, 128, 185, 0.5)',
+      borderWidth: 5,
+      radius: 0,
+
+      data: earningsPerDay.value.map(data => data.earnings),
+    },
+  ],
+}))
+const options = {
+  plugins: { legend: { display: false } },
+
+  scales: {
+    x: {
+      ticks: {
+        display: false,
+      },
+      grid: {
+        drawBorder: false,
+        showTooltip: true,
+        display: false,
+      },
+    },
+    y: {
+      ticks: {
+        display: false,
+      },
+      grid: {
+        drawBorder: false,
+        display: false,
+      },
+    },
+  },
+  responsive: true,
+  aspectRatio: 1,
+  maintainAspectRatio: false,
+}
+</script>
+
+<template>
+  <v-card outlined rounded="xl">
+    <v-card-body>
+      <p>Earnings This Month</p>
+      <!-- {{ earningsPerDay }} -->
+
+      <p class="text-3xl font-semibold font-montserrat">${{ totalEarnings }}</p>
+      <div class="w-full flex" style="height: 200px">
+        <line-chart :chart-data="lineChartData" :options="options" class="w-full"></line-chart>
+      </div>
+    </v-card-body>
+  </v-card>
+</template>
diff --git a/apps/frontend/admin/src/components/DashboardSalesMonth.vue b/apps/frontend/admin/src/components/DashboardSalesMonth.vue
new file mode 100644
index 0000000..7fdafe6
--- /dev/null
+++ b/apps/frontend/admin/src/components/DashboardSalesMonth.vue
@@ -0,0 +1,76 @@
+<script setup>
+import { LineChart, useLineChart } from 'vue-chart-3'
+import { VCard, VCardBody, VCardHeading, VCardFooter } from './AppCard.vue'
+import { useSalesForMonth } from '../composables/useDashboard'
+import BaseButton from './BaseButton.vue'
+import { computed, watchEffect, ref, reactive } from 'vue'
+// Line Chart
+
+const { salesPerDay } = useSalesForMonth()
+const totalSales = computed(() => {
+  return salesPerDay.value.reduce((acc, curr) => acc + curr.sales, 0)
+})
+
+const range = (start, end) => Array.from({ length: end - start }, (_, i) => i + start)
+
+const lineChartData = computed(() => ({
+  labels: range(1, salesPerDay.value.length + 1),
+  // labels: [2, 4, 3],
+  datasets: [
+    {
+      lineTension: 0.3,
+      label: 'My First dataset',
+      fill: true,
+      backgroundColor: 'rgba(213 ,233, 221,0.3)',
+      strokeColor: 'none',
+      borderColor: 'rgba(213, 233 ,221,1)',
+      borderWidth: 5,
+      radius: 0,
+
+      data: salesPerDay.value.map(data => data.sales),
+    },
+  ],
+}))
+const options = {
+  plugins: { legend: { display: false } },
+
+  scales: {
+    x: {
+      ticks: {
+        display: false,
+      },
+      grid: {
+        drawBorder: false,
+        showTooltip: true,
+        display: false,
+      },
+    },
+    y: {
+      ticks: {
+        display: false,
+      },
+      grid: {
+        drawBorder: false,
+        display: false,
+      },
+    },
+  },
+  responsive: true,
+  aspectRatio: 1,
+  maintainAspectRatio: false,
+}
+</script>
+
+<template>
+  <v-card outlined rounded="xl">
+    <v-card-body>
+      <p>Sales This Month</p>
+      <!-- {{ earningsPerDay }} -->
+
+      <p class="text-3xl font-semibold font-montserrat">{{ totalSales }}</p>
+      <div class="w-full flex" style="height: 200px">
+        <line-chart :chart-data="lineChartData" :options="options" class="w-full"></line-chart>
+      </div>
+    </v-card-body>
+  </v-card>
+</template>
diff --git a/apps/frontend/admin/src/components/OrderItem.vue b/apps/frontend/admin/src/components/OrderItem.vue
new file mode 100644
index 0000000..8004480
--- /dev/null
+++ b/apps/frontend/admin/src/components/OrderItem.vue
@@ -0,0 +1,39 @@
+<script setup>
+import { computed } from 'vue'
+import VInput from './BaseInput.vue'
+const props = defineProps({
+  orderItem: {
+    type: Object,
+    required: true,
+  },
+})
+
+const product = computed(() => props.orderItem.product)
+</script>
+
+<template>
+  <tr>
+    <td class="px-6 py-4 w-full whitespace-nowrap flex justify-start items-center gap-2">
+      <div class="h-12 w-12 rounded bg-gray-600">
+        <img :src="product.images ? product.images[0] : ''" alt="" />
+      </div>
+      <div>
+        <router-link :to="{ name: 'product-edit', params: { id: product.id } }">{{ product.name }}</router-link>
+        <div class="text-subtitle-2 text-capitalize">
+          <span class="mr-2 text-sm" v-for="variant of orderItem.variation.variant" :key="variant.name">
+            {{ variant.name }}: <span class="text-uppercase">{{ variant.value }}</span>
+          </span>
+        </div>
+        <p>{{ orderItem.amount }}</p>
+      </div>
+    </td>
+    <td class="px-6 w-28 py-4 whitespace-nowrap">
+      <p>{{ orderItem.quantity }}</p>
+    </td>
+
+    <td class="px-6 py-4 whitespace-nowrap">{{ orderItem.totalAmount }}</td>
+    <td class="px-6 py-4 whitespace-nowrap">
+      <font-awesome-icon icon="times"></font-awesome-icon>
+    </td>
+  </tr>
+</template>
diff --git a/apps/frontend/admin/src/components/OrderItems.vue b/apps/frontend/admin/src/components/OrderItems.vue
new file mode 100644
index 0000000..403a6bd
--- /dev/null
+++ b/apps/frontend/admin/src/components/OrderItems.vue
@@ -0,0 +1,39 @@
+<script setup>
+import OrderItem from './OrderItem.vue'
+defineProps({
+  items: {
+    type: Array,
+    default: () => [],
+  },
+})
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+      <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+        <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Product
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Quantity
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Total
+                </th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+              <order-item v-for="item in items" :order-item="item" :key="item.id"> </order-item>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/frontend/admin/src/components/OrdersTable.vue b/apps/frontend/admin/src/components/OrdersTable.vue
index 81377da..5ac2e4a 100644
--- a/apps/frontend/admin/src/components/OrdersTable.vue
+++ b/apps/frontend/admin/src/components/OrdersTable.vue
@@ -26,13 +26,13 @@
                 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                   Total
                 </th>
-                <th scope="col" class="relative px-6 py-3">
+                <!-- <th scope="col" class="relative px-6 py-3">
                   <span class="sr-only">Edit</span>
-                </th>
+                </th> -->
               </tr>
             </thead>
             <tbody class="bg-white divide-y divide-gray-200">
-              <tr v-for="{ node: order } in orders" :key="order.id">
+              <tr v-for="{ node: order } in orders" :key="order.id" class="cursor-pointer" @click="goToOrder(order.id)">
                 <td class="px-6 py-4 whitespace-nowrap">
                   <div class="text-sm font-medium text-gray-900">#{{ order.id }}</div>
                 </td>
@@ -45,7 +45,7 @@
 
                 <td class="px-6 py-4 whitespace-nowrap">
                   <div class="text-sm text-gray-900">
-                    {{ order.Customer.user.username }}
+                    {{ order.customer.user.username }}
                   </div>
                 </td>
 
@@ -89,5 +89,15 @@ export default {
       required: true,
     },
   },
+  methods: {
+    goToOrder(id) {
+      this.$router.push({
+        name: 'order-view',
+        params: {
+          id,
+        },
+      })
+    },
+  },
 }
 </script>
diff --git a/apps/frontend/admin/src/components/SalesSummary.vue b/apps/frontend/admin/src/components/SalesSummary.vue
index 52a7dd2..a954b6f 100644
--- a/apps/frontend/admin/src/components/SalesSummary.vue
+++ b/apps/frontend/admin/src/components/SalesSummary.vue
@@ -1,132 +1,110 @@
-<template>
-  <div class="w-full card p-2 overflow-hidden flex flex-row flex-wrap">
-    <!-- right -->
-    <div class="border-r border-gray-200 md:w-2/3 w-full">
-      <!-- top -->
-      <div class="p-5 flex flex-row flex-wrap justify-between items-center">
-        <h2 class="font-bold text-lg">
-          Order Summary
-        </h2>
-        <div class="flex flex-row justify-center items-center">
-          <a
-            href="#"
-            class="btn mr-4 text-sm py-2 block"
-          >month</a>
-          <a
-            href="#"
-            class="btn-shadow text-sm py-2 block"
-          >week</a>
-        </div>
-      </div>
-      <!-- end top -->
+<script setup>
+import { computed, ref } from 'vue'
+import { LineChart, useLineChart } from 'vue-chart-3'
+import { VCard, VCardBody, VCardHeading, VCardFooter } from './AppCard.vue'
+import { useSalesForMonths, useSalesForMonth } from '../composables/useDashboard'
+import BaseButton from './BaseButton.vue'
+import max from 'lodash/max'
+import range from 'lodash/range'
+// Line Chart
 
-      <!-- chart -->
+const salesFor = ref('year')
+const labels = computed(() => {
+  if (salesFor.value === 'year') {
+    return ['Jan', 'Feb', 'Mar', 'April', 'May', 'June', 'july', 'September', 'October', 'Nov', 'Dec']
+  }
+})
 
-      <line-chart
-        :chart-data="dataset"
-        :options="options"
-      ></line-chart>
-      <!-- end chart -->
-    </div>
-    <!-- end right -->
-
-    <!-- left -->
-    <div class="md:w-1/3 w-full">
-      <!-- top -->
-      <div class="p-5 border-b border-gray-200">
-        <h2 class="font-bold text-lg mb-6">
-          Sales History
-        </h2>
-
-        <div class="flex flex-row justify-between mb-3">
-          <div class="">
-            <h4 class="text-gray-600 font-thin">
-              Puma Shoes
-            </h4>
-            <p class="text-gray-400 text-xs font-hairline">
-              30 min ago
-            </p>
-          </div>
-          <div class="text-sm font-medium">
-            <span class="text-green-400">+</span> $250
-          </div>
-        </div>
+const salesData = computed(() => {
+  if (salesFor.value === 'year') {
+    const date = new Date()
+    const year = date.getFullYear()
+    const start = new Date(year, 1, 1)
+    const end = new Date(year, 12, 31)
 
-        <div class="flex flex-row justify-between mb-3">
-          <div class="">
-            <h4 class="text-gray-600 font-thin">
-              Google Pixel 4 xl
-            </h4>
-            <p class="text-gray-400 text-xs font-hairline">
-              1 day ago
-            </p>
-          </div>
-          <div class="text-sm font-medium">
-            <span class="text-red-400">-</span> $10
-          </div>
-        </div>
+    return useSalesForMonths(start, end)
+  }
+})
 
-        <div class="flex flex-row justify-between">
-          <div class="">
-            <h4 class="text-gray-600 font-thin">
-              Nike Air Jordan
-            </h4>
-            <p class="text-gray-400 text-xs font-hairline">
-              2 hour ago
-            </p>
-          </div>
-          <div class="text-sm font-medium">
-            <span class="text-red-400">-</span> $98
-          </div>
-        </div>
-      </div>
-      <!-- end top -->
+const sales = computed(() => {
+  if (salesFor.value === 'year') {
+    const { salesMonthRange } = salesData.value
+    const lastMonth = max(salesMonthRange.value.map(({ month }) => month))
+    const defaultData = range(lastMonth).map(() => 0)
+    salesData.value.salesMonthRange.value.forEach(({ sales, month }) => {
+      defaultData[month] = sales
+    })
+    return defaultData
+  }
+})
 
-      <!-- bottom -->
-      <div class="p-5">
-        <h2 class="font-bold text-lg mb-2">
-          Sales History
-        </h2>
-        <strong class="text-teal-400 font-extrabold text-xl">$82,950.96</strong>
+var lineChartData = computed(() => ({
+  labels: labels.value,
 
-        <div class="bg-gray-300 h-2 rounded-full mt-2 relative">
-          <div class="rounded-full bg-teal-400 h-full w-3/4 shadow-md"></div>
-        </div>
-      </div>
-      <!-- end bottom -->
-    </div>
-    <!-- end left -->
-  </div>
-</template>
+  datasets: [
+    {
+      fill: true,
+      lineTension: 0.3,
+      label: 'My First dataset',
+      backgroundColor: 'rgba(41, 128, 185, 0.2)',
+      strokeColor: 'none',
+      borderColor: 'rgba(41, 128, 185, 0)',
+      radius: 2,
+      borderColor: 'rgba(41, 128, 185, 0.5)',
+      borderWidth: 3,
+      pointColor: 'rgba(41, 128, 185, 0.9)',
+      pointStrokeColor: 'rgba(41, 128, 185, 0)',
+      pointHighlightFill: 'rgba(41, 128, 185, 0.9)',
+      pointHighlightStroke: 'rgba(41, 128, 185, 0)',
+      data: sales.value,
+    },
+  ],
+}))
 
-<script>
-import { LineChart } from 'vue-chart-3'
+const options = {
+  plugins: { legend: { display: false } },
 
-export default {
-  components: {
-    LineChart,
-  },
-  data: () => ({
-    dataset: {
-      labels: ['jan', 'feb', 'oct', 'm', 's', 'ss', 'ds', 's'],
-      datasets: [
-        {
-          label: 'My First Dataset',
-          data: [65, 59, 80, 81, 56, 55, 40],
-          fill: true,
-          borderColor: 'rgb(75, 192, 192)',
-          tension: 0.1,
-          backgroundColor: 'rgb(153 246 228)',
-        },
-      ],
+  scales: {
+    x: {
+      grid: {
+        showTooltip: true,
+        display: false,
+      },
     },
-    options: {
-      xaxis: {
-        tooltip: {
-          enabled: false,
-        },
+    y: {
+      grid: {
+        display: false,
       },
     },
-  }),
+  },
 }
 </script>
+
+<template>
+  <v-card>
+    <v-card-heading outlined-bottom>
+      <div class="grid grid-cols-2 gap-3">
+        <div class="p-3 rounded-md bg-lime-100">
+          <p class="text-sm font-normal">Top Order</p>
+          <p class="text-lg py-2 font-gray-800">764387</p>
+        </div>
+        <div class="p-3 rounded-md bg-teal-100">
+          <p class="text-sm font-normal">Average Order</p>
+          <p class="text-lg py-2 font-gray-800">764387</p>
+        </div>
+      </div>
+    </v-card-heading>
+    <v-card-body>
+      <line-chart :chart-data="lineChartData" :options="options"></line-chart>
+    </v-card-body>
+    <v-card-footer>
+      <div class="flex bg-mint p-2 rounded-md gap-2 justify-between">
+        <button class="w-full py-2 bg-white rounded-md text-blue-800">One Week</button>
+        <button class="w-full py-2 bg-white rounded-md text-blue-800">One Month</button>
+
+        <button class="w-full py-2 bg-white rounded-md text-blue-800">Three Month</button>
+        <button class="w-full py-2 text-white bg-teal-800 rounded-md">One Year</button>
+      </div>
+    </v-card-footer>
+  </v-card>
+</template>
diff --git a/apps/frontend/admin/src/components/SortDropdownMenu.vue b/apps/frontend/admin/src/components/SortDropdownMenu.vue
index 302c5b0..a8d0ab2 100644
--- a/apps/frontend/admin/src/components/SortDropdownMenu.vue
+++ b/apps/frontend/admin/src/components/SortDropdownMenu.vue
@@ -30,9 +30,7 @@
               <button
                 :class="[
                   active ? 'bg-mint text-gray-800' : 'text-gray-900',
-                  option.value == filterState.filterInput.sortBy
-                    ? 'bg-mint text-gray-800 border-l-3 border-teal-800'
-                    : '',
+                  option.value == active ? 'bg-mint text-gray-800 border-l-3 border-teal-800' : '',
                   'group flex rounded-md items-center w-full px-2 py-2 text-sm',
                 ]"
               >
@@ -57,28 +55,27 @@ export default {
     MenuItems,
     MenuItem,
   },
-
-  setup() {
-    const { setSortBy, filterState } = useFilters()
-    // eslint-disable-next-line prefer-destructuring
-    // const sortBy = filterState.value.filterInput.sortBy
-    const { sortingOptions } = filterState.value
-
-    return {
-      sortingOptions,
-      filterState,
-      setSortBy,
-    }
+  props: {
+    sortingOptions: {
+      type: Object,
+      required: true,
+    },
+    active: {
+      type: String,
+      required: true,
+    },
   },
-
-  data: () => ({
-    // sortingOptions: [
-    //   { title: 'Popularity', value: 'Popularity' },
-    //   { title: 'Whats New', value: 'WhatsNew' },
-    //   { title: 'Better Discount', value: 'BetterDiscount' },
-    //   { title: 'Price : Low to High', value: 'PriceLowToHigh' },
-    //   { title: 'Price : High to Low', value: 'PriceHighToLow' },
-    // ],
-  }),
+  emits: ['setSortBy'],
+  // setup() {
+  //   const { setSortBy, filterState } = useFilters()
+  //   // eslint-disable-next-line prefer-destructuring
+  //   // const sortBy = filterState.value.filterInput.sortBy
+  //   const { sortingOptions } = filterState.value
+  //   return {
+  //     sortingOptions,
+  //     filterState,
+  //     setSortBy,
+  //   }
+  // },
 }
 </script>
diff --git a/apps/frontend/admin/src/composables/useCustomers.js b/apps/frontend/admin/src/composables/useCustomers.js
new file mode 100644
index 0000000..50f8d15
--- /dev/null
+++ b/apps/frontend/admin/src/composables/useCustomers.js
@@ -0,0 +1,69 @@
+import { reactive, computed, readonly } from 'vue'
+import { useQuery, useResult } from '@vue/apollo-composable'
+import { FetchCustomers } from 'graphql-client/admin/customers'
+
+const defaultFilters = {
+  first: 30,
+  offset: 0,
+}
+
+const customerFilters = reactive({
+  ...defaultFilters,
+})
+
+export const filterOptions = {
+  paymentStatus: ['succeeded', 'processing', 'initiated', 'cancelled'],
+  fulfillmentStatus: ['Unfulfilled', 'Fulfilled', 'PartiallyFulfilled'],
+}
+
+export default () => {
+  const { result, loading, error } = useQuery(FetchCustomers, () => ({ ...customerFilters }))
+  const customerNodes = useResult(result, [], data => data.customers.edges)
+  const totalItems = useResult(result, 0, data => data.customers.totalItems)
+
+  // sets the value for a single filtering atribute
+  const setFilter = (key, value) => {
+    customerFilters[key] = value
+  }
+
+  const setFilters = filterObject => {
+    Object.keys(filterObject).forEach(key => {
+      customerFilters[key] = filterObject[key]
+    })
+  }
+
+  const loadPage = pageNo => {
+    const offset = pageNo * customerFilters.first - customerFilters.first
+    customerFilters.offset = offset
+  }
+
+  const resetFilters = () => {
+    console.log('resetFilters')
+    Object.keys(customerFilters).forEach(key => {
+      customerFilters[key] = defaultFilters[key]
+    })
+  }
+  const pageInfo = computed(() => {
+    console.log(totalItems.value)
+    const totalPages = Math.ceil(totalItems.value / customerFilters.first)
+    const currentPage = Math.floor((customerFilters.offset + customerFilters.first) / customerFilters.first)
+
+    return {
+      totalPages,
+      currentPage,
+    }
+  })
+
+  return {
+    customerNodes,
+    setFilter,
+    setFilters,
+    loadPage,
+    resetFilters,
+    filter: readonly(customerFilters),
+    error,
+    loading,
+    pageInfo,
+    filterOptions,
+  }
+}
diff --git a/apps/frontend/admin/src/composables/useDashboard.js b/apps/frontend/admin/src/composables/useDashboard.js
new file mode 100644
index 0000000..4d4d68a
--- /dev/null
+++ b/apps/frontend/admin/src/composables/useDashboard.js
@@ -0,0 +1,143 @@
+import { reactive, computed, readonly } from 'vue'
+import { useQuery, useResult } from '@vue/apollo-composable'
+import { GetSales } from 'graphql-client/admin/orders'
+
+// return sales per day for the range of dates
+// :param startDate: Date object representing the start of the range of dates , if empty default satrt of current month
+// :param endDate: Date object representing the end of the range of dates , if empty default end of current month
+export const useSalesForMonth = (firstDay, endDate) => {
+  if (!firstDay) {
+    const today = new Date()
+    firstDay = new Date(today.getFullYear(), today.getMonth(), 1)
+  }
+  if (!endDate) {
+    const today = new Date()
+    endDate = new Date(today.getFullYear(), today.getMonth() + 1, 0)
+  }
+
+  const { result, loading, error } = useQuery(GetSales, {
+    createdAt_Gte: firstDay.toISOString(),
+    createdAt_Lte: endDate.toISOString(),
+  })
+
+  const ordersThisMonth = useResult(result, [], data => data.orders.edges)
+
+  const salesPerDay = computed(() => {
+    const sales = []
+    const days = []
+
+    if (ordersThisMonth.value) {
+      ordersThisMonth.value.forEach(({ node }) => {
+        const date = new Date(node.createdAt)
+        const day = date.getDate()
+        const month = date.getMonth()
+        const year = date.getFullYear()
+
+        const dayIndex = days.findIndex(d => d.day === day && d.month === month && d.year === year)
+        if (dayIndex === -1) {
+          days.push({ day, month, year })
+          sales.push({ day, month, year, sales: 1 })
+        } else {
+          sales[dayIndex].sales++
+        }
+      })
+    }
+    return sales
+  })
+
+  const earningsPerDay = computed(() => {
+    const earnings = []
+    const days = []
+
+    if (ordersThisMonth.value) {
+      ordersThisMonth.value.forEach(({ node }) => {
+        const date = new Date(node.createdAt)
+        const day = date.getDate()
+        const month = date.getMonth()
+        const year = date.getFullYear()
+
+        const dayIndex = days.findIndex(d => d.day === day && d.month === month && d.year === year)
+        if (dayIndex === -1) {
+          days.push({ day, month, year })
+          earnings.push({ day, month, year, earnings: node.totalAmount })
+        } else {
+          earnings[dayIndex].earnings += node.totalAmount
+        }
+      })
+    }
+    return earnings
+  })
+
+  return {
+    salesPerDay,
+    earningsPerDay,
+    loading,
+    error,
+    ordersThisMonth,
+  }
+}
+
+// return the sales for the months for startDate and endDate
+// :param startDate: Date object representing the start of the range of dates
+// :param endDate: Date object representing the end of the range of dates
+export const useSalesForMonths = (startDate, endDate) => {
+  const { result, loading, error } = useQuery(GetSales, {
+    createdAt_Gte: startDate.toISOString(),
+    createdAt_Lte: endDate.toISOString(),
+  })
+
+  const ordersTheseMonths = useResult(result, [], data => data.orders.edges)
+
+  const salesMonthRange = computed(() => {
+    const sales = []
+    const months = []
+
+    if (ordersTheseMonths.value) {
+      ordersTheseMonths.value.forEach(({ node }) => {
+        const date = new Date(node.createdAt)
+        console.log('hello')
+        const month = date.getMonth()
+        const year = date.getFullYear()
+        console.log('month', month)
+        const monthIndex = months.findIndex(m => m.month === month && m.year === year)
+        if (monthIndex === -1) {
+          months.push({ month, year })
+          sales.push({ month, year, sales: 1 })
+        } else {
+          sales[monthIndex].sales++
+        }
+      })
+    }
+    return sales
+  })
+
+  const earningsMonthRange = computed(() => {
+    const earnings = []
+    const months = []
+
+    if (ordersTheseMonths.value) {
+      ordersTheseMonths.value.forEach(({ node }) => {
+        const date = new Date(node.createdAt)
+        const month = date.getMonth()
+        const year = date.getFullYear()
+
+        const monthIndex = months.findIndex(m => m.month === month && m.year === year)
+        if (monthIndex === -1) {
+          months.push({ month, year })
+          earnings.push({ month, year, earnings: node.totalAmount })
+        } else {
+          earnings[monthIndex].earnings += node.totalAmount
+        }
+      })
+    }
+    return earnings
+  })
+
+  return {
+    salesMonthRange,
+    earningsMonthRange,
+    loading,
+    error,
+    ordersTheseMonths,
+  }
+}
diff --git a/apps/frontend/admin/src/composables/useOrders.js b/apps/frontend/admin/src/composables/useOrders.js
index 4c29246..ca58be7 100644
--- a/apps/frontend/admin/src/composables/useOrders.js
+++ b/apps/frontend/admin/src/composables/useOrders.js
@@ -4,7 +4,7 @@ import { GetOrders } from 'graphql-client/admin/orders'
 
 const defaultFilters = {
   orderBy: null,
-  first: 1,
+  first: 30,
   offset: 0,
   id: null,
   paid: null,
@@ -19,11 +19,18 @@ const ordersFilter = reactive({
   ...defaultFilters,
 })
 
-const filterOptions = {
+export const filterOptions = {
   paymentStatus: ['succeeded', 'processing', 'initiated', 'cancelled'],
   fulfillmentStatus: ['Unfulfilled', 'Fulfilled', 'PartiallyFulfilled'],
 }
 
+export const salesForMonth = () => {
+  const today = new Date()
+  const firstDay = new Date(today.getFullYear(), today.getMonth(), 1)
+  const { result, loading, error } = useQuery(GetOrders, { createdAt_Gte: firstDay.toISOString() })
+  return useResult(result)
+}
+
 export default () => {
   const { result, loading, error } = useQuery(GetOrders, () => ({ ...ordersFilter }))
   const orderNodes = useResult(result, [], data => data.orders.edges)
diff --git a/apps/frontend/admin/src/layouts/WithSideBar.vue b/apps/frontend/admin/src/layouts/WithSideBar.vue
index 8d29e9e..e0eb0db 100644
--- a/apps/frontend/admin/src/layouts/WithSideBar.vue
+++ b/apps/frontend/admin/src/layouts/WithSideBar.vue
@@ -7,7 +7,7 @@
       <side-bar class=""></side-bar>
       <!-- Sidebar ends -->
       <!-- Remove class [ h-64 ] when adding a card block -->
-      <div class="bg-gray-100 md:ml-48 md:py-5 px-2 md:px-6 m-0 w-full h-full">
+      <div class="bg-gray-100 md:ml-56 md:py-16 px-2 md:px-6 m-0 w-full h-full">
         <!-- Remove class [ border-dashed border-2 border-gray-300 ] to remove dotted border -->
         <div class="w-full min-h-screen h-full">
           <slot />
diff --git a/apps/frontend/admin/src/main.js b/apps/frontend/admin/src/main.js
index e6c4947..1f76ea0 100644
--- a/apps/frontend/admin/src/main.js
+++ b/apps/frontend/admin/src/main.js
@@ -14,6 +14,7 @@ import router from './router'
 
 console.log(apolloClient)
 Chart.register(DoughnutController, ArcElement, Tooltip, LineController, ...registerables)
+Chart.defaults.maintainAspectRatio = false
 library.add(...icons)
 const app = createApp({
   setup() {
diff --git a/apps/frontend/admin/src/plugins/fontAwesome.js b/apps/frontend/admin/src/plugins/fontAwesome.js
index d69cde2..f7c1ac4 100644
--- a/apps/frontend/admin/src/plugins/fontAwesome.js
+++ b/apps/frontend/admin/src/plugins/fontAwesome.js
@@ -1,4 +1,7 @@
 import {
+  faShoppingBag,
+  faShoppingCart,
+  faDollarSign,
   faUserSecret,
   faHome,
   faTag,
@@ -26,6 +29,9 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 
 export default [
+  faShoppingCart,
+  faDollarSign,
+  faShoppingBag,
   faUserSecret,
   faHome,
   faTag,
diff --git a/apps/frontend/admin/src/router/index.js b/apps/frontend/admin/src/router/index.js
index 5e13b5c..351d22f 100644
--- a/apps/frontend/admin/src/router/index.js
+++ b/apps/frontend/admin/src/router/index.js
@@ -10,7 +10,7 @@ const routes = [
   {
     path: '/products',
     name: 'products',
-    component: () => import('../views/Products.vue'),
+    component: () => import('../views/SideBarView.vue'),
 
     children: [
       {
@@ -34,9 +34,19 @@ const routes = [
   {
     path: '/orders',
     name: 'orders',
-    component: () => import('../views/Orders.vue'),
+    component: () => import('../views/SideBarView.vue'),
 
-    children: [{ path: '', name: 'orders-all', component: () => import('../views/OrdersAll.vue') }],
+    children: [
+      { path: '', name: 'orders-all', component: () => import('../views/OrdersAll.vue') },
+      { path: ':id', name: 'order-view', component: () => import('../views/OrderSingle.vue') },
+    ],
+  },
+  {
+    path: '/customers',
+    name: 'customers',
+    component: () => import('../views/SideBarView.vue'),
+
+    children: [{ path: '', name: 'customers-all', component: () => import('../views/CustomersAll.vue') }],
   },
 ]
 
diff --git a/apps/frontend/admin/src/views/CustomersAll.vue b/apps/frontend/admin/src/views/CustomersAll.vue
new file mode 100644
index 0000000..73e1676
--- /dev/null
+++ b/apps/frontend/admin/src/views/CustomersAll.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="container mx-auto p-5">
+    <!-- header -->
+    <div class="flex justify-between my-4 items-center">
+      <span class="text-lg font-semibold font-montserrat text-black">Customers</span>
+      <div class="flex items-center text-gray-600">
+        <span class="mx-2">Import</span>
+        <span class="ml-2 mr-4">Export</span>
+        <v-button @click="$router.push({ name: 'products-create' })"> Create Order </v-button>
+      </div>
+    </div>
+
+    <customers-list></customers-list>
+  </div>
+</template>
+
+<script>
+import VButton from '../components/BaseButton.vue'
+
+// import VCard from '../components/AppCard.vue'
+import CustomersList from '../components/CustomersList.vue'
+
+export default {
+  components: { VButton, CustomersList },
+}
+</script>
diff --git a/apps/frontend/admin/src/views/OrderSingle.vue b/apps/frontend/admin/src/views/OrderSingle.vue
new file mode 100644
index 0000000..14b3668
--- /dev/null
+++ b/apps/frontend/admin/src/views/OrderSingle.vue
@@ -0,0 +1,180 @@
+<script setup>
+import { ref, watchEffect, computed, reactive } from 'vue'
+import { useQuery, useResult, useMutation } from '@vue/apollo-composable'
+import { GetOrder, UpdateOrder } from 'graphql-client/admin/orders'
+import { useRoute } from 'vue-router'
+
+import OrderItems from '../components/OrderItems.vue'
+import { VCard, VCardHeading, VCardBody } from '../components/AppCard.vue'
+import VButton from '../components/BaseButton.vue'
+const { params } = useRoute()
+
+// const fulfillmentStatusOptions = ['UNFULFILLED', 'FULFILLED', 'PARTIALLYFULFILLED']
+const fulfillmentStatusOptions = {
+  UNFULFILLED: 'Unfulfilled',
+  FULFILLED: 'Fulfilled',
+  PARTIALLYFULFILLED: 'PartiallyFulfilled',
+}
+
+const { error, loading, result, onResult } = useQuery(GetOrder, {
+  id: params.id,
+  getCurrent: false,
+})
+const order = useResult(result, {}, data => data.order)
+const customerUser = useResult(result, {}, data => data.order.customer.user)
+const address = useResult(result, {}, data => data.order.address)
+const fulfillmentStatus = useResult(result, 'INITIATED', data => data.order.fulfillmentStatus)
+const subtotal = computed(() => {
+  const items = order.value.orderitemSet
+  if (items) {
+    return items.reduce((acc, item) => acc + item.totalAmount, 0)
+  }
+  return 0
+})
+
+//update related code
+const { error: updateError, loading: updateLoading, mutate: updateMutation } = useMutation(UpdateOrder)
+const updateData = ref({
+  fulfillmentStatus: fulfillmentStatus,
+})
+const saveUpdates = () => {
+  const input = {
+    id: order.value.id,
+    fulfillmentStatus: updateData.value.fulfillmentStatus,
+  }
+  console.log('input', input)
+  updateMutation({ ...input })
+}
+
+watchEffect(() => {
+  const value = fulfillmentStatusOptions[fulfillmentStatus.value]
+  console.log(value)
+  if (value !== null || value !== undefined) {
+    updateData.value = { ...updateData.value, fulfillmentStatus: value }
+  }
+})
+</script>
+
+<template>
+  <div v-if="loading">loading</div>
+  <div v-else-if="error">error {{ error }}</div>
+
+  <div v-else class="container md:w-3/4 mx-auto py-3">
+    <div class="py-3 flex w-full">
+      <p class="text-lg font-bold text-black">#{{ order.id }}</p>
+    </div>
+
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+      <div class="col-span-2 space-y-3">
+        <order-items :items="order.orderitemSet"></order-items>
+
+        <v-card elevation="md">
+          <v-card-heading> Payment </v-card-heading>
+          <v-card-body>
+            <div class="flex justify-between">
+              <p class="text-sm">Subtotal</p>
+              <p class="text-sm">{{ subtotal }}</p>
+            </div>
+            <div class="flex justify-between">
+              <p class="text-sm">Tax</p>
+              <p class="text-sm">{{ order.taxPercent }} %</p>
+            </div>
+            <div class="flex justify-between">
+              <p class="text-sm">Discount</p>
+              <p class="text-sm">{{ order.discountPercent }} %</p>
+            </div>
+            <div class="flex justify-between">
+              <p class="text-sm">Shipping</p>
+              <p class="text-sm">{{ order.shippingCharges }}</p>
+            </div>
+
+            <div class="flex justify-between">
+              <p class="text-base font-semibold text-black">Total</p>
+              <p class="text-base font-semibold text-black">{{ order.totalAmount }}</p>
+            </div>
+          </v-card-body>
+        </v-card>
+
+        <v-card>
+          <v-card-heading>Shipping Details</v-card-heading>
+          <v-card-body>
+            <div class="space-x-4">
+              <span class="text-lg font-semibold text-black">{{ address.name }}</span>
+              <span class="border border-teal-800 px-3 py-1 rounded-full">
+                {{ address.isHome ? 'home' : 'work' }}
+              </span>
+            </div>
+            <p>
+              {{ address.apartmentNo }} .{{ address.town }} . {{ address.city }} .{{ address.state }}.{{
+                address.country
+              }}
+              {{ address.pincode }}
+              -{{ address.email }}
+            </p>
+            <p class="font-semibold text-gray-600">{{ address.phoneNumber }}</p>
+          </v-card-body>
+        </v-card>
+      </div>
+      <div class="col-span-1 space-y-3">
+        <v-card>
+          <v-card-heading> Customer </v-card-heading>
+          <v-card-body>
+            <div class="flex justify-between">
+              <p class="text-sm">Name</p>
+              <p class="text-sm">{{ customerUser.username }}</p>
+            </div>
+            <div class="flex justify-between">
+              <p class="text-sm">Email</p>
+              <p class="text-sm">{{ customerUser.email ?? 'not set' }}</p>
+            </div>
+            <div class="flex justify-between">
+              <p class="text-sm">User ID</p>
+              <p class="text-sm">{{ customerUser.id }}</p>
+            </div>
+          </v-card-body>
+        </v-card>
+        <v-card>
+          <v-card-heading> Fullfillment Status </v-card-heading>
+          <v-card-body>
+            <div>
+              <select
+                v-model="updateData.fulfillmentStatus"
+                class="w-full"
+                name="Fulfilment Status"
+                id="fulfilment-status"
+              >
+                <option v-for="(value, key) in fulfillmentStatusOptions" :key="key" :value="value">{{ value }}</option>
+              </select>
+            </div>
+          </v-card-body>
+        </v-card>
+        <v-card>
+          <v-card-heading> Status </v-card-heading>
+          <v-card-body>
+            <div class="flex justify-between">
+              <p class="text-sm">Created</p>
+              <p class="text-sm">{{ order.createdAt.split('T')[0] }}</p>
+            </div>
+            <div class="flex justify-between">
+              <p class="text-sm">Updated</p>
+              <p class="text-sm">{{ order.updatedAt.split('T')[0] }}</p>
+            </div>
+            <div class="flex justify-between">
+              <p class="text-sm">Payment Status</p>
+              <p class="text-sm">{{ order.paymentStatus }}</p>
+            </div>
+          </v-card-body>
+        </v-card>
+      </div>
+    </div>
+
+    <!-- Action Buttons-->
+    <div class="flex justify-between items-center border-t mt-3 py-4">
+      <div class="flex gap-2">
+        <v-button danger> Remove Order </v-button>
+      </div>
+
+      <v-button @click="saveUpdates" :loading="updateLoading" :disabled="updateLoading"> Save </v-button>
+    </div>
+  </div>
+</template>
diff --git a/apps/frontend/admin/src/views/SideBarView.vue b/apps/frontend/admin/src/views/SideBarView.vue
new file mode 100644
index 0000000..7399337
--- /dev/null
+++ b/apps/frontend/admin/src/views/SideBarView.vue
@@ -0,0 +1,15 @@
+<template>
+  <with-side-bar>
+    <div class="w-full min-h-screen h-full py-12">
+      <router-view></router-view>
+    </div>
+  </with-side-bar>
+</template>
+
+<script>
+import WithSideBar from '../layouts/WithSideBar.vue'
+
+export default {
+  components: { WithSideBar },
+}
+</script>
diff --git a/apps/frontend/admin/src/views/dashboard.vue b/apps/frontend/admin/src/views/dashboard.vue
index 2e5f1ad..7a35406 100644
--- a/apps/frontend/admin/src/views/dashboard.vue
+++ b/apps/frontend/admin/src/views/dashboard.vue
@@ -1,23 +1,40 @@
 <script setup>
 import withSideBarLayout from '../layouts/WithSideBar.vue'
+import { useQuery, useResult } from '@vue/apollo-composable'
+import { GetOrders } from 'graphql-client/admin/orders'
 import summaryChart from '../components/SalesSummary.vue'
-import salesHistory from '../components/SalesTodayCard.vue'
-import recentOrders from '../components/HomeRecentOrders.vue'
-import bestSellers from '../components/HomeBestSellers.vue'
+import DashboardOverviewCards from '../components/DashBoardOverviewCards.vue'
+import EarningsMonth from '../components/DashboardEarningMonth.vue'
+import SalesMonth from '../components/DashboardSalesMonth.vue'
+import OrdersTable from '../components/OrdersTable.vue'
+
+const { result, loading, error } = useQuery(GetOrders, {
+  variables: {
+    first: 10,
+  },
+})
+
+const recentOrders = useResult(result, [], data => data.orders.edges)
 </script>
 
 <template>
   <with-side-bar-layout>
-    <main>
-      <div class="flex-1 w-full pt-16 md:pt-0">
-        <div class="flex w-full flex-wrap justify-center md:justify-between">
-          <sales-history class=""></sales-history>
-          <summary-chart class="w-full mt-1 md:w-2/3"></summary-chart>
+    <main class="space-y-3">
+      <dashboard-overview-cards></dashboard-overview-cards>
+      <div>
+        <h2 class="text-2xl font-montserrat font-semibold py-3 text-gray-600">Earnings Summary</h2>
+        <div class="grid grid-cols-3 gap-8">
+          <div class="flex flex-col justify-between">
+            <earnings-month class=""></earnings-month>
+            <sales-month class=""></sales-month>
+          </div>
+          <summary-chart class="w-full col-span-2"></summary-chart>
         </div>
       </div>
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mt-5">
-        <best-sellers></best-sellers>
-        <recent-orders></recent-orders>
+
+      <div>
+        <h2 class="text-2xl font-montserrat font-semibold py-3 text-gray-600">Recent Orders</h2>
+        <orders-table :orders="recentOrders"></orders-table>
       </div>
     </main>
   </with-side-bar-layout>
diff --git a/apps/frontend/store-front/TODO b/apps/frontend/store-front/TODO
new file mode 100644
index 0000000..0d387d5
--- /dev/null
+++ b/apps/frontend/store-front/TODO
@@ -0,0 +1,24 @@
+
+Todo:
+ 
+*/finish get all products ,pagination and filtering"
+
+  1) implement Authentication completetly
+    -> complete refresh token flow  done
+    -> complete access token flow   done
+    -> complete signup  follow  
+    -> show form errors
+    -> complete 2FA flow
+  
+  2) Complerte the ordering and payment flow
+    -->  complete the cart flow
+    -->  complete the stripe flow
+    --> complete the address and checkout flow and
+
+  3) cart and product page design
+
+  4) home page design 
+
+  
+
+
diff --git a/apps/frontend/store-front/_package.json b/apps/frontend/store-front/_package.json
deleted file mode 100644
index 9c5f19b..0000000
--- a/apps/frontend/store-front/_package.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "store-front",
-  "version": "0.0.0",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "vue": "^3.2.25"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^2.0.0",
-    "autoprefixer": "^10.4.2",
-    "postcss": "^8.4.5",
-    "tailwindcss": "^3.0.15",
-    "vite": "^2.7.2"
-  }
-}
diff --git a/apps/frontend/store-front/index.html b/apps/frontend/store-front/index.html
deleted file mode 100644
index 061923d..0000000
--- a/apps/frontend/store-front/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Zivero</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
diff --git a/apps/frontend/store-front/package.json b/apps/frontend/store-front/package.json
index 5cc6f0a..0b21010 100644
--- a/apps/frontend/store-front/package.json
+++ b/apps/frontend/store-front/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve --host 0.0.0.0 ",
+    "dev": "vue-cli-service serve --host 0.0.0.0 ",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
@@ -33,7 +33,7 @@
     "sass": "^1.19.0",
     "sass-loader": "^8.0.0",
     "vue-cli-plugin-vuetify": "~2.0.7",
-    "vue-template-compiler": "^2.6.11",
+    "vue-template-compiler": "^2.6.12",
     "vuetify-loader": "^1.3.0"
   },
   "eslintConfig": {
@@ -57,7 +57,6 @@
   ],
   "_id": "zivero@0.1.0",
   "readme": "ERROR: No README data found!",
-
   "graphql": {
     "schema": "./schema.graphql",
     "client": {
diff --git a/apps/frontend/store-front/src/App.vue b/apps/frontend/store-front/src/App.vue
index 632d804..d9a886f 100644
--- a/apps/frontend/store-front/src/App.vue
+++ b/apps/frontend/store-front/src/App.vue
@@ -1,68 +1,55 @@
 <template>
   <v-app>
-      <LoadingOverlay :loading="loading"></LoadingOverlay>
-      <navbar-mobile/> 
-      
-     
-       
-      <!-- Sizes your content based upon application components -->
-      <v-main >
-        <search></search>  
-        <!-- Provides the application the proper gutter -->
-        <v-container fluid class='ma-0 pa-0'>
-          <!-- If using vue-router -->
-          <router-view></router-view>
-        </v-container>
-      </v-main>
-      
-
+    <LoadingOverlay :loading="loading"></LoadingOverlay>
+    <navbar-mobile />
+
+    <!-- Sizes your content based upon application components -->
+    <v-main>
+      <search></search>
+      <!-- Provides the application the proper gutter -->
+      <v-container fluid class="ma-0 pa-0">
+        <!-- If using vue-router -->
+        <router-view></router-view>
+      </v-container>
+    </v-main>
   </v-app>
 </template>
 
 <script>
-
-import navbarMobile from './components/navbarMobile.vue';
+import navbarMobile from "./components/navbarMobile.vue";
 // import navdrawer from './components/navdrawer.vue';
-import search from "./components/search/search.vue"
-import LoadingOverlay from './components/loadingOverlay.vue';
-import { mapState } from 'vuex';
+import search from "./components/search/search.vue";
+import LoadingOverlay from "./components/loadingOverlay.vue";
+import { mapState } from "vuex";
 
 export default {
-  name: 'App',
-  
+  name: "App",
+
   components: {
     navbarMobile,
-   
+
     LoadingOverlay,
-    search
-},
-  methods:{
-   
+    search,
   },
+  methods: {},
   data: () => ({
     //
   }),
-  computed:{
+  computed: {
     ...mapState("app", ["loading"]),
-    
-  
-  }
+  },
 };
 </script>
 
 <style>
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-
-:root{
-
-  --primary-color: '#E85a4f';
-  --secondary-color: '#e98074';
-  --accent-color: '#8e8d8a';
-  --error-color: '#b71c1c';
-  --info-color:"#D8c3a5";
-  --background-color:"#eae7dc";
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+:root {
+  --primary-color: "#E85a4f";
+  --secondary-color: "#e98074";
+  --accent-color: "#8e8d8a";
+  --error-color: "#b71c1c";
+  --info-color: "#D8c3a5";
+  --background-color: "#eae7dc";
 }
 </style>
-
-
-
diff --git a/apps/frontend/store-front/src/graphql/Queries/order.js b/apps/frontend/store-front/src/graphql/Queries/order.js
index 575dd5d..7f2d436 100644
--- a/apps/frontend/store-front/src/graphql/Queries/order.js
+++ b/apps/frontend/store-front/src/graphql/Queries/order.js
@@ -1,4 +1,4 @@
-import gql from 'graphql-tag'
+import gql from "graphql-tag";
 
 // export const GetOrders= gql`
 // query{
@@ -28,93 +28,104 @@ import gql from 'graphql-tag'
 //         }
 //       }
 //     }
-    
+
 //   }
 // }
 // `
 // $offset: Int ,$before: String , $after: String , $first: Int , $last: Int , $id: ID , $Customer: ID , $paid: Boolean , $paymentMethod: String , $paymentStatus: String , $createdAt: DateTime , updatedAt: DateTime , extraCharges: Int , orderBy: String
 export const GetOrders = gql`
-query 
-orders($offset: Int ,$before: String , $after: String ,
- $first: Int , $last: Int , $id: ID , 
- $paid: Boolean , $paymentMethod: String , $paymentStatus: String , 
- $createdAt: DateTime , $updatedAt: DateTime ,
- $orderBy: String)
-
-{
-  orders(orderBy:$orderBy,first:$first,last:$last,offset:$offset,before:$before,after:$after,
-  id:$id,paid:$paid,paymentMethod:$paymentMethod,paymentStatus:$paymentStatus,createdAt:$createdAt,updatedAt:$updatedAt
-  ){
-    pageInfo{
-     hasNextPage
-     hasPreviousPage
-     startCursor
-     endCursor
-    }
-   edges{
-     node{
-       id
-       extraCharges
-       paymentStatus
-       createdAt
-       orderitemSet{
-         id
-         product{
-           available
-           brand{
-             id
-             name
-           }
-           name
-         }
-         variation{
-           price
-           images
-         }
-         Amount
-         totalAmount
-         Quantity
-         
-       }
-       
-     }
-     cursor
+  query orders(
+    $offset: Int
+    $before: String
+    $after: String
+    $first: Int
+    $last: Int
+    $id: ID
+    $paid: Boolean
+    $paymentMethod: String
+    $paymentStatus: String
+    $createdAt: DateTime
+    $updatedAt: DateTime
+    $orderBy: String
+  ) {
+    orders(
+      orderBy: $orderBy
+      first: $first
+      last: $last
+      offset: $offset
+      before: $before
+      after: $after
+      id: $id
+      paid: $paid
+      paymentMethod: $paymentMethod
+      paymentStatus: $paymentStatus
+      createdAt: $createdAt
+      updatedAt: $updatedAt
+    ) {
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+        startCursor
+        endCursor
+      }
+      edges {
+        node {
+          id
+          shippingCharges
+          paymentStatus
+          createdAt
+          orderitemSet {
+            id
+            product {
+              available
+              brand {
+                id
+                name
+              }
+              name
+            }
+            variation {
+              price
+              images
+            }
+            amount
+            totalAmount
+            quantity
+          }
+        }
+        cursor
+      }
     }
-   
-   } 
- }
-`
+  }
+`;
 
 export const GetOrder = gql`
-query order($id: String, $getCurrent: Boolean!){
-  order(getCurrent:$getCurrent , id:$id){
-    id
-    paid
-    paymentStatus
-    extraCharges
-    paymentStatus
-    createdAt
-    orderitemSet{
+  query order($id: String, $getCurrent: Boolean!) {
+    order(getCurrent: $getCurrent, id: $id) {
       id
-      product{
-        available
-        brand{
-          id
+      paid
+      paymentStatus
+      shippingCharges
+      paymentStatus
+      createdAt
+      orderitemSet {
+        id
+        product {
+          available
+          brand {
+            id
+            name
+          }
           name
         }
-        name
-      }
-      variation{
-        price
-        images
+        variation {
+          price
+          images
+        }
+        amount
+        totalAmount
+        quantity
       }
-      Amount
-      totalAmount
-      Quantity
     }
   }
-}
-`
-
-
-
+`;
diff --git a/apps/frontend/store-front/src/graphql/mutations/order.js b/apps/frontend/store-front/src/graphql/mutations/order.js
index 2b7a87e..818b3a5 100644
--- a/apps/frontend/store-front/src/graphql/mutations/order.js
+++ b/apps/frontend/store-front/src/graphql/mutations/order.js
@@ -1,42 +1,40 @@
-import gql from 'graphql-tag'
+import gql from "graphql-tag";
 
-export const CreateOrder= gql`
-mutation createOrder($input:OrderInput){
-    createOrder(input:$input){
-        order{
+export const CreateOrder = gql`
+  mutation createOrder($input: OrderInput) {
+    createOrder(input: $input) {
+      order {
+        id
+        paymentId
+      }
+      orderItems {
+        id
+        productId
+        variationId
+        quantity
+        amount
+        product {
+          id
+          name
+          brand {
             id
-            paymentId
+            name
+          }
         }
-        orderItems{
-            id
-            productId
-            variationId
-            Quantity
-            Amount
-            product{
-                id
-                name
-                brand{
-                    id
-                    name
-                }
-
-            }
-            variation{
-                available
-                price
-                images
-                variant{
-                    name
-                    value
-                }
-            }
-
+        variation {
+          available
+          price
+          images
+          variant {
+            name
+            value
+          }
         }
+      }
     }
-}
-`
+  }
+`;
 
 // export const checkoutSecret =gql`
-    
+
 // `
diff --git a/apps/frontend/store-front/src/store/modules/filters/index.js b/apps/frontend/store-front/src/store/modules/filters/index.js
index 001d95a..e317846 100644
--- a/apps/frontend/store-front/src/store/modules/filters/index.js
+++ b/apps/frontend/store-front/src/store/modules/filters/index.js
@@ -1,137 +1,148 @@
-import { isEqual } from "apollo-utilities";
+import { isEqual } from "apollo-utilities"
 
 const defaultFilterInput = {
-  categories: null,
-  gender: "",
-  brands: null,
-  sortBy: "BetterDiscount",
-};
-
-const state = () => ({
-  filterInput: {
-    categories: null,
-    gender: "",
-    brands: null,
-    sortBy: "BetterDiscount",
-  },
-  variantFilterInput: [
+    categories:null,
+    gender:"",
+    brands:null,
+    sortBy:"BetterDiscount"
+    
+}
+
+
+const state=()=>({
+   filterInput:{
+       categories:null,
+       gender:"",
+       brands:null,
+       sortBy:"BetterDiscount"
+       
+   },
+   variantFilterInput:[
     //    {
     //        name:"size",
     //        values:["xl","l"]
     //    }
-  ],
-
-  //state variables for mobile panel
-  mobilePanel: {
-    isVariantFilterSelected: false,
-    selectedFilterType: "brands",
-    selectedVariantType: "",
-  },
-
-  //ui variables for filter and sort
-  isSortingSheetOpen: false,
-
-  // sorting options not mutating this anywhere
-  sortingOptions: [
-    { title: "Popularity", value: "Popularity" },
-    { title: "Whats New", value: "WhatsNew" },
-    { title: "Better Discount", value: "BetterDiscount" },
-    { title: "Price : Low to High", value: "PriceLowToHigh" },
-    { title: "Price : High to Low", value: "PriceHighToLow" },
-  ],
-
-  // state variables products page
-  isFiltering: false,
-});
-
-const getters = {
-  areFiltersChanged(state) {
-    return !isEqual(state.filterInput, defaultFilterInput);
-  },
-};
-
-const mutations = {
-  SetFilterInput(state, { filterType, value }) {
-    state.filterInput[filterType] = value;
-  },
-
-  SetVariantFilterInput(state, { filterType, value }) {
-    if (state.variantFilterInput.length == 0) {
-      state.variantFilterInput = [{ name: filterType, values: value }];
+   ],
+
+   //state variables for mobile panel 
+   mobilePanel:{
+
+        isVariantFilterSelected:false,
+        selectedFilterType:"brands",
+        selectedVariantType:"",
+   },
+
+   //ui variables for filter and sort
+   isSortingSheetOpen:false,
+
+   // sorting options not mutating this anywhere
+   sortingOptions: [
+        { title: 'Popularity' ,value:"Popularity" },
+        { title: 'Whats New' ,value:"WhatsNew" },
+        { title: 'Better Discount' ,value:"BetterDiscount" },
+        { title: 'Price : Low to High'  ,value:"PriceLowToHigh"},
+        { title: 'Price : High to Low', value:"PriceHighToLow" },
+   ],
+
+   // state variables products page
+   isFiltering:false
+})
+
+const getters={
+
+   areFiltersChanged(state){
+        return !isEqual(state.filterInput,defaultFilterInput)
+   }
+}
+
+const mutations={
+
+    SetFilterInput(state,{filterType,value}){
+        state.filterInput[filterType]=value;
+    },
+
+    SetVariantFilterInput(state,{filterType,value}){
+
+        if(state.variantFilterInput.length== 0  ){
+            state.variantFilterInput=[{"name":filterType,"values":value}]
+        }
+        for(let filter of state.variantFilterInput){
+           if ( filter.name==filterType){
+               filter.values=value
+           }
+        }
+    },
+
+    setMobilePanelState(state,{key,value}){
+        state.mobilePanel[key]=value
+    },
+    resetFilters(state){
+        state.filterInput = defaultFilterInput
+        state.variantFilterInput= [ ]
+        state.mobilePanel= { isVariantFilterSelected:false, selectedFilterType:"brands", selectedVariantType:"", }
+    },
+
+    toggleSortingSheet(state,value){
+        state.isSortingSheetOpen =value
+    },
+
+    setIsFiltering(state,value){
+        state.isFiltering=value
+    },
+
+    setFilters(state,filter){
+        state.filterInput = filter
     }
-    for (let filter of state.variantFilterInput) {
-      if (filter.name == filterType) {
-        filter.values = value;
-      }
-    }
-  },
-
-  setMobilePanelState(state, { key, value }) {
-    state.mobilePanel[key] = value;
-  },
-  resetFilters(state) {
-    state.filterInput = defaultFilterInput;
-    state.variantFilterInput = [];
-    state.mobilePanel = {
-      isVariantFilterSelected: false,
-      selectedFilterType: "brands",
-      selectedVariantType: "",
-    };
-  },
-
-  toggleSortingSheet(state, value) {
-    state.isSortingSheetOpen = value;
-  },
-
-  setIsFiltering(state, value) {
-    state.isFiltering = value;
-  },
-
-  setFilters(state, filter) {
-    state.filterInput = filter;
-  },
-};
-
-const actions = {
-  async filterProducts({ dispatch, state }, updateFilters) {
-    let filters = {
-      ...state.filterInput,
-      variantFilters: state.variantFilterInput,
-    };
-    let payload = { filters, pageNb: 1 };
-    await dispatch("products/getProducts", payload, { root: true });
-    console.log("filter", state.filterInput);
-
-    if (updateFilters == true) {
-      dispatch("products/updateFilters", state.filterInput, { root: true });
-    }
-  },
-
-  async selectFilter({ dispatch, commit }, { filterType, value, doUpdate }) {
-    commit("SetFilterInput", { filterType, value });
-    commit("setIsFiltering", true);
-    await dispatch("filterProducts", doUpdate);
-    commit("setIsFiltering", false);
-  },
-
-  async selectVariantFilter({ dispatch, commit }, { filterType, value }) {
-    commit("SetVariantFilterInput", { filterType, value });
-    dispatch("filterProducts", false);
-  },
-
-  async clearFilters({ dispatch, commit }) {
-    commit("setIsFiltering", true);
-    commit("resetFilters");
-    await dispatch("products/getProducts", {}, { root: true });
-    commit("setIsFiltering", false);
-    await dispatch("products/getFilters", {}, { root: true });
-  },
-};
+}
+
+const actions ={
+
+    async filterProducts({dispatch,state},updateFilters) {
+       
+        let filters={...state.filterInput,variantFilters:state.variantFilterInput}
+        let payload ={filters,pageNb:1}
+        await dispatch("products/getProducts",payload,{root:true})
+        console.log("filter",state.filterInput)
+        
+        if (updateFilters == true) {
+          dispatch("products/updateFilters",state.filterInput,{root:true});
+         
+        }
+      
+      },
+    
+    async selectFilter({dispatch,commit},{filterType,value,doUpdate}){
+         
+        commit("SetFilterInput",{filterType,value})
+        commit("setIsFiltering",true)
+        await dispatch("filterProducts",doUpdate)
+        commit("setIsFiltering",false)
+    }, 
+
+    async selectVariantFilter({dispatch,commit},{filterType,value}){
+
+        commit("SetVariantFilterInput",{filterType,value})
+        dispatch("filterProducts",false)
+    } ,
+
+    async clearFilters({dispatch,commit}){
+        commit("setIsFiltering",true)
+        commit("resetFilters")
+        await dispatch("products/getProducts",{},{root:true})
+        commit("setIsFiltering",false)
+        await dispatch("products/getFilters",{},{root:true})
+        
+    },
+    
+
+
+}
+
 
 export default {
-  namespaced: true,
-  state,
-  getters,
-  mutations,
-  actions,
-};
+    namespaced:true,
+    state,
+    getters,
+    mutations,
+    actions
+}
\ No newline at end of file
diff --git a/apps/frontend/store-front/vite.config.js b/apps/frontend/store-front/vite.config.js
deleted file mode 100644
index 315212d..0000000
--- a/apps/frontend/store-front/vite.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue()]
-})
diff --git a/apps/frontend/store-front/workspace.code-workspace b/apps/frontend/store-front/workspace.code-workspace
new file mode 100644
index 0000000..18ee02c
--- /dev/null
+++ b/apps/frontend/store-front/workspace.code-workspace
@@ -0,0 +1,11 @@
+{
+	"folders": [
+		{
+			"path": "."
+		},
+		{
+			"path": "../zivero-backend"
+		}
+	],
+	"settings": {}
+}
\ No newline at end of file
diff --git a/apps/frontend/store-front/yarn.lock b/apps/frontend/store-front/yarn.lock
deleted file mode 100644
index 79fe593..0000000
--- a/apps/frontend/store-front/yarn.lock
+++ /dev/null
@@ -1,8836 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.13.tgz#dcfc826beef65e75c50e21d3837d7d95798dd658"
-  integrity sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==
-  dependencies:
-    "@babel/highlight" "^7.12.13"
-
-"@babel/compat-data@^7.13.0", "@babel/compat-data@^7.13.12", "@babel/compat-data@^7.13.8":
-  version "7.13.12"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.13.12.tgz#a8a5ccac19c200f9dd49624cac6e19d7be1236a1"
-  integrity sha512-3eJJ841uKxeV8dcN/2yGEUy+RfgQspPEgQat85umsE1rotuquQ2AbIub4S6j7c50a2d+4myc+zSlnXeIHrOnhQ==
-
-"@babel/core@^7.11.0":
-  version "7.13.10"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.13.10.tgz#07de050bbd8193fcd8a3c27918c0890613a94559"
-  integrity sha512-bfIYcT0BdKeAZrovpMqX2Mx5NrgAckGbwT982AkdS5GNfn3KMGiprlBAtmBcFZRUmpaufS6WZFP8trvx8ptFDw==
-  dependencies:
-    "@babel/code-frame" "^7.12.13"
-    "@babel/generator" "^7.13.9"
-    "@babel/helper-compilation-targets" "^7.13.10"
-    "@babel/helper-module-transforms" "^7.13.0"
-    "@babel/helpers" "^7.13.10"
-    "@babel/parser" "^7.13.10"
-    "@babel/template" "^7.12.13"
-    "@babel/traverse" "^7.13.0"
-    "@babel/types" "^7.13.0"
-    convert-source-map "^1.7.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.2"
-    json5 "^2.1.2"
-    lodash "^4.17.19"
-    semver "^6.3.0"
-    source-map "^0.5.0"
-
-"@babel/generator@^7.13.0", "@babel/generator@^7.13.9":
-  version "7.13.9"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.13.9.tgz#3a7aa96f9efb8e2be42d38d80e2ceb4c64d8de39"
-  integrity sha512-mHOOmY0Axl/JCTkxTU6Lf5sWOg/v8nUa+Xkt4zMTftX0wqmb6Sh7J8gvcehBw7q0AhrhAR+FDacKjCZ2X8K+Sw==
-  dependencies:
-    "@babel/types" "^7.13.0"
-    jsesc "^2.5.1"
-    source-map "^0.5.0"
-
-"@babel/helper-annotate-as-pure@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.13.tgz#0f58e86dfc4bb3b1fcd7db806570e177d439b6ab"
-  integrity sha512-7YXfX5wQ5aYM/BOlbSccHDbuXXFPxeoUmfWtz8le2yTkTZc+BxsiEnENFoi2SlmA8ewDkG2LgIMIVzzn2h8kfw==
-  dependencies:
-    "@babel/types" "^7.12.13"
-
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.12.13.tgz#6bc20361c88b0a74d05137a65cac8d3cbf6f61fc"
-  integrity sha512-CZOv9tGphhDRlVjVkAgm8Nhklm9RzSmWpX2my+t7Ua/KT616pEzXsQCjinzvkRvHWJ9itO4f296efroX23XCMA==
-  dependencies:
-    "@babel/helper-explode-assignable-expression" "^7.12.13"
-    "@babel/types" "^7.12.13"
-
-"@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.13.10", "@babel/helper-compilation-targets@^7.13.8", "@babel/helper-compilation-targets@^7.9.6":
-  version "7.13.10"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.13.10.tgz#1310a1678cb8427c07a753750da4f8ce442bdd0c"
-  integrity sha512-/Xju7Qg1GQO4mHZ/Kcs6Au7gfafgZnwm+a7sy/ow/tV1sHeraRUHbjdat8/UvDor4Tez+siGKDk6zIKtCPKVJA==
-  dependencies:
-    "@babel/compat-data" "^7.13.8"
-    "@babel/helper-validator-option" "^7.12.17"
-    browserslist "^4.14.5"
-    semver "^6.3.0"
-
-"@babel/helper-create-class-features-plugin@^7.13.0":
-  version "7.13.11"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.13.11.tgz#30d30a005bca2c953f5653fc25091a492177f4f6"
-  integrity sha512-ays0I7XYq9xbjCSvT+EvysLgfc3tOkwCULHjrnscGT3A9qD4sk3wXnJ3of0MAWsWGjdinFvajHU2smYuqXKMrw==
-  dependencies:
-    "@babel/helper-function-name" "^7.12.13"
-    "@babel/helper-member-expression-to-functions" "^7.13.0"
-    "@babel/helper-optimise-call-expression" "^7.12.13"
-    "@babel/helper-replace-supers" "^7.13.0"
-    "@babel/helper-split-export-declaration" "^7.12.13"
-
-"@babel/helper-create-regexp-features-plugin@^7.12.13":
-  version "7.12.17"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.12.17.tgz#a2ac87e9e319269ac655b8d4415e94d38d663cb7"
-  integrity sha512-p2VGmBu9oefLZ2nQpgnEnG0ZlRPvL8gAGvPUMQwUdaE8k49rOMuZpOwdQoy5qJf6K8jL3bcAMhVUlHAjIgJHUg==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.12.13"
-    regexpu-core "^4.7.1"
-
-"@babel/helper-define-polyfill-provider@^0.1.5":
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.1.5.tgz#3c2f91b7971b9fc11fe779c945c014065dea340e"
-  integrity sha512-nXuzCSwlJ/WKr8qxzW816gwyT6VZgiJG17zR40fou70yfAcqjoNyTLl/DQ+FExw5Hx5KNqshmN8Ldl/r2N7cTg==
-  dependencies:
-    "@babel/helper-compilation-targets" "^7.13.0"
-    "@babel/helper-module-imports" "^7.12.13"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/traverse" "^7.13.0"
-    debug "^4.1.1"
-    lodash.debounce "^4.0.8"
-    resolve "^1.14.2"
-    semver "^6.1.2"
-
-"@babel/helper-explode-assignable-expression@^7.12.13":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.13.0.tgz#17b5c59ff473d9f956f40ef570cf3a76ca12657f"
-  integrity sha512-qS0peLTDP8kOisG1blKbaoBg/o9OSa1qoumMjTK5pM+KDTtpxpsiubnCGP34vK8BXGcb2M9eigwgvoJryrzwWA==
-  dependencies:
-    "@babel/types" "^7.13.0"
-
-"@babel/helper-function-name@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz#93ad656db3c3c2232559fd7b2c3dbdcbe0eb377a"
-  integrity sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==
-  dependencies:
-    "@babel/helper-get-function-arity" "^7.12.13"
-    "@babel/template" "^7.12.13"
-    "@babel/types" "^7.12.13"
-
-"@babel/helper-get-function-arity@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz#bc63451d403a3b3082b97e1d8b3fe5bd4091e583"
-  integrity sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==
-  dependencies:
-    "@babel/types" "^7.12.13"
-
-"@babel/helper-hoist-variables@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.13.0.tgz#5d5882e855b5c5eda91e0cadc26c6e7a2c8593d8"
-  integrity sha512-0kBzvXiIKfsCA0y6cFEIJf4OdzfpRuNk4+YTeHZpGGc666SATFKTz6sRncwFnQk7/ugJ4dSrCj6iJuvW4Qwr2g==
-  dependencies:
-    "@babel/traverse" "^7.13.0"
-    "@babel/types" "^7.13.0"
-
-"@babel/helper-member-expression-to-functions@^7.13.0", "@babel/helper-member-expression-to-functions@^7.13.12":
-  version "7.13.12"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz#dfe368f26d426a07299d8d6513821768216e6d72"
-  integrity sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==
-  dependencies:
-    "@babel/types" "^7.13.12"
-
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.13.12", "@babel/helper-module-imports@^7.8.3":
-  version "7.13.12"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz#c6a369a6f3621cb25da014078684da9196b61977"
-  integrity sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==
-  dependencies:
-    "@babel/types" "^7.13.12"
-
-"@babel/helper-module-transforms@^7.13.0":
-  version "7.13.12"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.13.12.tgz#600e58350490828d82282631a1422268e982ba96"
-  integrity sha512-7zVQqMO3V+K4JOOj40kxiCrMf6xlQAkewBB0eu2b03OO/Q21ZutOzjpfD79A5gtE/2OWi1nv625MrDlGlkbknQ==
-  dependencies:
-    "@babel/helper-module-imports" "^7.13.12"
-    "@babel/helper-replace-supers" "^7.13.12"
-    "@babel/helper-simple-access" "^7.13.12"
-    "@babel/helper-split-export-declaration" "^7.12.13"
-    "@babel/helper-validator-identifier" "^7.12.11"
-    "@babel/template" "^7.12.13"
-    "@babel/traverse" "^7.13.0"
-    "@babel/types" "^7.13.12"
-
-"@babel/helper-optimise-call-expression@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz#5c02d171b4c8615b1e7163f888c1c81c30a2aaea"
-  integrity sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==
-  dependencies:
-    "@babel/types" "^7.12.13"
-
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.13.0", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz#806526ce125aed03373bc416a828321e3a6a33af"
-  integrity sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==
-
-"@babel/helper-remap-async-to-generator@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.13.0.tgz#376a760d9f7b4b2077a9dd05aa9c3927cadb2209"
-  integrity sha512-pUQpFBE9JvC9lrQbpX0TmeNIy5s7GnZjna2lhhcHC7DzgBs6fWn722Y5cfwgrtrqc7NAJwMvOa0mKhq6XaE4jg==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.12.13"
-    "@babel/helper-wrap-function" "^7.13.0"
-    "@babel/types" "^7.13.0"
-
-"@babel/helper-replace-supers@^7.12.13", "@babel/helper-replace-supers@^7.13.0", "@babel/helper-replace-supers@^7.13.12":
-  version "7.13.12"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.13.12.tgz#6442f4c1ad912502481a564a7386de0c77ff3804"
-  integrity sha512-Gz1eiX+4yDO8mT+heB94aLVNCL+rbuT2xy4YfyNqu8F+OI6vMvJK891qGBTqL9Uc8wxEvRW92Id6G7sDen3fFw==
-  dependencies:
-    "@babel/helper-member-expression-to-functions" "^7.13.12"
-    "@babel/helper-optimise-call-expression" "^7.12.13"
-    "@babel/traverse" "^7.13.0"
-    "@babel/types" "^7.13.12"
-
-"@babel/helper-simple-access@^7.12.13", "@babel/helper-simple-access@^7.13.12":
-  version "7.13.12"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.13.12.tgz#dd6c538afb61819d205a012c31792a39c7a5eaf6"
-  integrity sha512-7FEjbrx5SL9cWvXioDbnlYTppcZGuCY6ow3/D5vMggb2Ywgu4dMrpTJX0JdQAIcRRUElOIxF3yEooa9gUb9ZbA==
-  dependencies:
-    "@babel/types" "^7.13.12"
-
-"@babel/helper-skip-transparent-expression-wrappers@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.12.1.tgz#462dc63a7e435ade8468385c63d2b84cce4b3cbf"
-  integrity sha512-Mf5AUuhG1/OCChOJ/HcADmvcHM42WJockombn8ATJG3OnyiSxBK/Mm5x78BQWvmtXZKHgbjdGL2kin/HOLlZGA==
-  dependencies:
-    "@babel/types" "^7.12.1"
-
-"@babel/helper-split-export-declaration@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz#e9430be00baf3e88b0e13e6f9d4eaf2136372b05"
-  integrity sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==
-  dependencies:
-    "@babel/types" "^7.12.13"
-
-"@babel/helper-validator-identifier@^7.12.11":
-  version "7.12.11"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
-  integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
-
-"@babel/helper-validator-option@^7.12.17":
-  version "7.12.17"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.17.tgz#d1fbf012e1a79b7eebbfdc6d270baaf8d9eb9831"
-  integrity sha512-TopkMDmLzq8ngChwRlyjR6raKD6gMSae4JdYDB8bByKreQgG0RBTuKe9LRxW3wFtUnjxOPRKBDwEH6Mg5KeDfw==
-
-"@babel/helper-wrap-function@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.13.0.tgz#bdb5c66fda8526ec235ab894ad53a1235c79fcc4"
-  integrity sha512-1UX9F7K3BS42fI6qd2A4BjKzgGjToscyZTdp1DjknHLCIvpgne6918io+aL5LXFcER/8QWiwpoY902pVEqgTXA==
-  dependencies:
-    "@babel/helper-function-name" "^7.12.13"
-    "@babel/template" "^7.12.13"
-    "@babel/traverse" "^7.13.0"
-    "@babel/types" "^7.13.0"
-
-"@babel/helpers@^7.13.10":
-  version "7.13.10"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.13.10.tgz#fd8e2ba7488533cdeac45cc158e9ebca5e3c7df8"
-  integrity sha512-4VO883+MWPDUVRF3PhiLBUFHoX/bsLTGFpFK/HqvvfBZz2D57u9XzPVNFVBTc0PW/CWR9BXTOKt8NF4DInUHcQ==
-  dependencies:
-    "@babel/template" "^7.12.13"
-    "@babel/traverse" "^7.13.0"
-    "@babel/types" "^7.13.0"
-
-"@babel/highlight@^7.12.13":
-  version "7.13.10"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.13.10.tgz#a8b2a66148f5b27d666b15d81774347a731d52d1"
-  integrity sha512-5aPpe5XQPzflQrFwL1/QoeHkP2MsA4JCntcXHRhEsdsfPVkvPi2w7Qix4iV7t5S/oC9OodGrggd8aco1g3SZFg==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.12.11"
-    chalk "^2.0.0"
-    js-tokens "^4.0.0"
-
-"@babel/parser@^7.12.13", "@babel/parser@^7.13.0", "@babel/parser@^7.13.10", "@babel/parser@^7.7.0":
-  version "7.13.12"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.12.tgz#ba320059420774394d3b0c0233ba40e4250b81d1"
-  integrity sha512-4T7Pb244rxH24yR116LAuJ+adxXXnHhZaLJjegJVKSdoNCe4x1eDBaud5YIcQFcqzsaD5BHvJw5BQ0AZapdCRw==
-
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.13.12":
-  version "7.13.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.13.12.tgz#a3484d84d0b549f3fc916b99ee4783f26fabad2a"
-  integrity sha512-d0u3zWKcoZf379fOeJdr1a5WPDny4aOFZ6hlfKivgK0LY7ZxNfoaHL2fWwdGtHyVvra38FC+HVYkO+byfSA8AQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
-    "@babel/plugin-proposal-optional-chaining" "^7.13.12"
-
-"@babel/plugin-proposal-async-generator-functions@^7.13.8":
-  version "7.13.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.13.8.tgz#87aacb574b3bc4b5603f6fe41458d72a5a2ec4b1"
-  integrity sha512-rPBnhj+WgoSmgq+4gQUtXx/vOcU+UYtjy1AA/aeD61Hwj410fwYyqfUcRP3lR8ucgliVJL/G7sXcNUecC75IXA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/helper-remap-async-to-generator" "^7.13.0"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-
-"@babel/plugin-proposal-class-properties@^7.13.0", "@babel/plugin-proposal-class-properties@^7.8.3":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.13.0.tgz#146376000b94efd001e57a40a88a525afaab9f37"
-  integrity sha512-KnTDjFNC1g+45ka0myZNvSBFLhNCLN+GeGYLDEA8Oq7MZ6yMgfLoIRh86GRT0FjtJhZw8JyUskP9uvj5pHM9Zg==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.13.0"
-    "@babel/helper-plugin-utils" "^7.13.0"
-
-"@babel/plugin-proposal-decorators@^7.8.3":
-  version "7.13.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.13.5.tgz#d28071457a5ba8ee1394b23e38d5dcf32ea20ef7"
-  integrity sha512-i0GDfVNuoapwiheevUOuSW67mInqJ8qw7uWfpjNVeHMn143kXblEy/bmL9AdZ/0yf/4BMQeWXezK0tQIvNPqag==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.13.0"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/plugin-syntax-decorators" "^7.12.13"
-
-"@babel/plugin-proposal-dynamic-import@^7.13.8":
-  version "7.13.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.13.8.tgz#876a1f6966e1dec332e8c9451afda3bebcdf2e1d"
-  integrity sha512-ONWKj0H6+wIRCkZi9zSbZtE/r73uOhMVHh256ys0UzfM7I3d4n+spZNWjOnJv2gzopumP2Wxi186vI8N0Y2JyQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-
-"@babel/plugin-proposal-export-namespace-from@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.12.13.tgz#393be47a4acd03fa2af6e3cde9b06e33de1b446d"
-  integrity sha512-INAgtFo4OnLN3Y/j0VwAgw3HDXcDtX+C/erMvWzuV9v71r7urb6iyMXu7eM9IgLr1ElLlOkaHjJ0SbCmdOQ3Iw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-
-"@babel/plugin-proposal-json-strings@^7.13.8":
-  version "7.13.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.13.8.tgz#bf1fb362547075afda3634ed31571c5901afef7b"
-  integrity sha512-w4zOPKUFPX1mgvTmL/fcEqy34hrQ1CRcGxdphBc6snDnnqJ47EZDIyop6IwXzAC8G916hsIuXB2ZMBCExC5k7Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-
-"@babel/plugin-proposal-logical-assignment-operators@^7.13.8":
-  version "7.13.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.13.8.tgz#93fa78d63857c40ce3c8c3315220fd00bfbb4e1a"
-  integrity sha512-aul6znYB4N4HGweImqKn59Su9RS8lbUIqxtXTOcAGtNIDczoEFv+l1EhmX8rUBp3G1jMjKJm8m0jXVp63ZpS4A==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.13.8":
-  version "7.13.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.13.8.tgz#3730a31dafd3c10d8ccd10648ed80a2ac5472ef3"
-  integrity sha512-iePlDPBn//UhxExyS9KyeYU7RM9WScAG+D3Hhno0PLJebAEpDZMocbDe64eqynhNAnwz/vZoL/q/QB2T1OH39A==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-
-"@babel/plugin-proposal-numeric-separator@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.12.13.tgz#bd9da3188e787b5120b4f9d465a8261ce67ed1db"
-  integrity sha512-O1jFia9R8BUCl3ZGB7eitaAPu62TXJRHn7rh+ojNERCFyqRwJMTmhz+tJ+k0CwI6CLjX/ee4qW74FSqlq9I35w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-
-"@babel/plugin-proposal-object-rest-spread@^7.13.8":
-  version "7.13.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.13.8.tgz#5d210a4d727d6ce3b18f9de82cc99a3964eed60a"
-  integrity sha512-DhB2EuB1Ih7S3/IRX5AFVgZ16k3EzfRbq97CxAVI1KSYcW+lexV8VZb7G7L8zuPVSdQMRn0kiBpf/Yzu9ZKH0g==
-  dependencies:
-    "@babel/compat-data" "^7.13.8"
-    "@babel/helper-compilation-targets" "^7.13.8"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-transform-parameters" "^7.13.0"
-
-"@babel/plugin-proposal-optional-catch-binding@^7.13.8":
-  version "7.13.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.13.8.tgz#3ad6bd5901506ea996fc31bdcf3ccfa2bed71107"
-  integrity sha512-0wS/4DUF1CuTmGo+NiaHfHcVSeSLj5S3e6RivPTg/2k3wOv3jO35tZ6/ZWsQhQMvdgI7CwphjQa/ccarLymHVA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-
-"@babel/plugin-proposal-optional-chaining@^7.13.12":
-  version "7.13.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.13.12.tgz#ba9feb601d422e0adea6760c2bd6bbb7bfec4866"
-  integrity sha512-fcEdKOkIB7Tf4IxrgEVeFC4zeJSTr78no9wTdBuZZbqF64kzllU0ybo2zrzm7gUQfxGhBgq4E39oRs8Zx/RMYQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-
-"@babel/plugin-proposal-private-methods@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.13.0.tgz#04bd4c6d40f6e6bbfa2f57e2d8094bad900ef787"
-  integrity sha512-MXyyKQd9inhx1kDYPkFRVOBXQ20ES8Pto3T7UZ92xj2mY0EVD8oAVzeyYuVfy/mxAdTSIayOvg+aVzcHV2bn6Q==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.13.0"
-    "@babel/helper-plugin-utils" "^7.13.0"
-
-"@babel/plugin-proposal-unicode-property-regex@^7.12.13", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.12.13.tgz#bebde51339be829c17aaaaced18641deb62b39ba"
-  integrity sha512-XyJmZidNfofEkqFV5VC/bLabGmO5QzenPO/YOfGuEbgU+2sSwMmio3YLb4WtBgcmmdwZHyVyv8on77IUjQ5Gvg==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.12.13"
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-syntax-async-generators@^7.8.4":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
-  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-class-properties@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
-  integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-syntax-decorators@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.12.13.tgz#fac829bf3c7ef4a1bc916257b403e58c6bdaf648"
-  integrity sha512-Rw6aIXGuqDLr6/LoBBYE57nKOzQpz/aDkKlMqEwH+Vp0MXbG6H/TfRjaY343LKxzAKAMXIHsQ8JzaZKuDZ9MwA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-syntax-dynamic-import@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
-  integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-export-namespace-from@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a"
-  integrity sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-syntax-json-strings@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
-  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-jsx@^7.0.0", "@babel/plugin-syntax-jsx@^7.2.0", "@babel/plugin-syntax-jsx@^7.8.3":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.13.tgz#044fb81ebad6698fe62c478875575bcbb9b70f15"
-  integrity sha512-d4HM23Q1K7oq/SLNmG6mRt85l2csmQ0cHRaxRXjKW0YFdEXqlZ5kzFQKH5Uc3rDJECgu+yCRgPkG04Mm98R/1g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
-  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
-  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-numeric-separator@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
-  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-syntax-object-rest-spread@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
-  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-optional-catch-binding@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
-  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-optional-chaining@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
-  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-top-level-await@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.12.13.tgz#c5f0fa6e249f5b739727f923540cf7a806130178"
-  integrity sha512-A81F9pDwyS7yM//KwbCSDqy3Uj4NMIurtplxphWxoYtNPov7cJsDkAFNNyVlIZ3jwGycVsurZ+LtOA8gZ376iQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-arrow-functions@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.13.0.tgz#10a59bebad52d637a027afa692e8d5ceff5e3dae"
-  integrity sha512-96lgJagobeVmazXFaDrbmCLQxBysKu7U6Do3mLsx27gf5Dk85ezysrs2BZUpXD703U/Su1xTBDxxar2oa4jAGg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-
-"@babel/plugin-transform-async-to-generator@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.13.0.tgz#8e112bf6771b82bf1e974e5e26806c5c99aa516f"
-  integrity sha512-3j6E004Dx0K3eGmhxVJxwwI89CTJrce7lg3UrtFuDAVQ/2+SJ/h/aSFOeE6/n0WB1GsOffsJp6MnPQNQ8nmwhg==
-  dependencies:
-    "@babel/helper-module-imports" "^7.12.13"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/helper-remap-async-to-generator" "^7.13.0"
-
-"@babel/plugin-transform-block-scoped-functions@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.12.13.tgz#a9bf1836f2a39b4eb6cf09967739de29ea4bf4c4"
-  integrity sha512-zNyFqbc3kI/fVpqwfqkg6RvBgFpC4J18aKKMmv7KdQ/1GgREapSJAykLMVNwfRGO3BtHj3YQZl8kxCXPcVMVeg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-block-scoping@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.12.13.tgz#f36e55076d06f41dfd78557ea039c1b581642e61"
-  integrity sha512-Pxwe0iqWJX4fOOM2kEZeUuAxHMWb9nK+9oh5d11bsLoB0xMg+mkDpt0eYuDZB7ETrY9bbcVlKUGTOGWy7BHsMQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-classes@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.13.0.tgz#0265155075c42918bf4d3a4053134176ad9b533b"
-  integrity sha512-9BtHCPUARyVH1oXGcSJD3YpsqRLROJx5ZNP6tN5vnk17N0SVf9WCtf8Nuh1CFmgByKKAIMstitKduoCmsaDK5g==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.12.13"
-    "@babel/helper-function-name" "^7.12.13"
-    "@babel/helper-optimise-call-expression" "^7.12.13"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/helper-replace-supers" "^7.13.0"
-    "@babel/helper-split-export-declaration" "^7.12.13"
-    globals "^11.1.0"
-
-"@babel/plugin-transform-computed-properties@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.13.0.tgz#845c6e8b9bb55376b1fa0b92ef0bdc8ea06644ed"
-  integrity sha512-RRqTYTeZkZAz8WbieLTvKUEUxZlUTdmL5KGMyZj7FnMfLNKV4+r5549aORG/mgojRmFlQMJDUupwAMiF2Q7OUg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-
-"@babel/plugin-transform-destructuring@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.13.0.tgz#c5dce270014d4e1ebb1d806116694c12b7028963"
-  integrity sha512-zym5em7tePoNT9s964c0/KU3JPPnuq7VhIxPRefJ4/s82cD+q1mgKfuGRDMCPL0HTyKz4dISuQlCusfgCJ86HA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-
-"@babel/plugin-transform-dotall-regex@^7.12.13", "@babel/plugin-transform-dotall-regex@^7.4.4":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.12.13.tgz#3f1601cc29905bfcb67f53910f197aeafebb25ad"
-  integrity sha512-foDrozE65ZFdUC2OfgeOCrEPTxdB3yjqxpXh8CH+ipd9CHd4s/iq81kcUpyH8ACGNEPdFqbtzfgzbT/ZGlbDeQ==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.12.13"
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-duplicate-keys@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.12.13.tgz#6f06b87a8b803fd928e54b81c258f0a0033904de"
-  integrity sha512-NfADJiiHdhLBW3pulJlJI2NB0t4cci4WTZ8FtdIuNc2+8pslXdPtRRAEWqUY+m9kNOk2eRYbTAOipAxlrOcwwQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-exponentiation-operator@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.12.13.tgz#4d52390b9a273e651e4aba6aee49ef40e80cd0a1"
-  integrity sha512-fbUelkM1apvqez/yYx1/oICVnGo2KM5s63mhGylrmXUxK/IAXSIf87QIxVfZldWf4QsOafY6vV3bX8aMHSvNrA==
-  dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.12.13"
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-for-of@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.13.0.tgz#c799f881a8091ac26b54867a845c3e97d2696062"
-  integrity sha512-IHKT00mwUVYE0zzbkDgNRP6SRzvfGCYsOxIRz8KsiaaHCcT9BWIkO+H9QRJseHBLOGBZkHUdHiqj6r0POsdytg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-
-"@babel/plugin-transform-function-name@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.12.13.tgz#bb024452f9aaed861d374c8e7a24252ce3a50051"
-  integrity sha512-6K7gZycG0cmIwwF7uMK/ZqeCikCGVBdyP2J5SKNCXO5EOHcqi+z7Jwf8AmyDNcBgxET8DrEtCt/mPKPyAzXyqQ==
-  dependencies:
-    "@babel/helper-function-name" "^7.12.13"
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-literals@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.12.13.tgz#2ca45bafe4a820197cf315794a4d26560fe4bdb9"
-  integrity sha512-FW+WPjSR7hiUxMcKqyNjP05tQ2kmBCdpEpZHY1ARm96tGQCCBvXKnpjILtDplUnJ/eHZ0lALLM+d2lMFSpYJrQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-member-expression-literals@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.12.13.tgz#5ffa66cd59b9e191314c9f1f803b938e8c081e40"
-  integrity sha512-kxLkOsg8yir4YeEPHLuO2tXP9R/gTjpuTOjshqSpELUN3ZAg2jfDnKUvzzJxObun38sw3wm4Uu69sX/zA7iRvg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-modules-amd@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.13.0.tgz#19f511d60e3d8753cc5a6d4e775d3a5184866cc3"
-  integrity sha512-EKy/E2NHhY/6Vw5d1k3rgoobftcNUmp9fGjb9XZwQLtTctsRBOTRO7RHHxfIky1ogMN5BxN7p9uMA3SzPfotMQ==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.13.0"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    babel-plugin-dynamic-import-node "^2.3.3"
-
-"@babel/plugin-transform-modules-commonjs@^7.13.8":
-  version "7.13.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.13.8.tgz#7b01ad7c2dcf2275b06fa1781e00d13d420b3e1b"
-  integrity sha512-9QiOx4MEGglfYZ4XOnU79OHr6vIWUakIj9b4mioN8eQIoEh+pf5p/zEB36JpDFWA12nNMiRf7bfoRvl9Rn79Bw==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.13.0"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/helper-simple-access" "^7.12.13"
-    babel-plugin-dynamic-import-node "^2.3.3"
-
-"@babel/plugin-transform-modules-systemjs@^7.13.8":
-  version "7.13.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.13.8.tgz#6d066ee2bff3c7b3d60bf28dec169ad993831ae3"
-  integrity sha512-hwqctPYjhM6cWvVIlOIe27jCIBgHCsdH2xCJVAYQm7V5yTMoilbVMi9f6wKg0rpQAOn6ZG4AOyvCqFF/hUh6+A==
-  dependencies:
-    "@babel/helper-hoist-variables" "^7.13.0"
-    "@babel/helper-module-transforms" "^7.13.0"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/helper-validator-identifier" "^7.12.11"
-    babel-plugin-dynamic-import-node "^2.3.3"
-
-"@babel/plugin-transform-modules-umd@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.13.0.tgz#8a3d96a97d199705b9fd021580082af81c06e70b"
-  integrity sha512-D/ILzAh6uyvkWjKKyFE/W0FzWwasv6vPTSqPcjxFqn6QpX3u8DjRVliq4F2BamO2Wee/om06Vyy+vPkNrd4wxw==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.13.0"
-    "@babel/helper-plugin-utils" "^7.13.0"
-
-"@babel/plugin-transform-named-capturing-groups-regex@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.12.13.tgz#2213725a5f5bbbe364b50c3ba5998c9599c5c9d9"
-  integrity sha512-Xsm8P2hr5hAxyYblrfACXpQKdQbx4m2df9/ZZSQ8MAhsadw06+jW7s9zsSw6he+mJZXRlVMyEnVktJo4zjk1WA==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.12.13"
-
-"@babel/plugin-transform-new-target@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.12.13.tgz#e22d8c3af24b150dd528cbd6e685e799bf1c351c"
-  integrity sha512-/KY2hbLxrG5GTQ9zzZSc3xWiOy379pIETEhbtzwZcw9rvuaVV4Fqy7BYGYOWZnaoXIQYbbJ0ziXLa/sKcGCYEQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-object-super@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.12.13.tgz#b4416a2d63b8f7be314f3d349bd55a9c1b5171f7"
-  integrity sha512-JzYIcj3XtYspZDV8j9ulnoMPZZnF/Cj0LUxPOjR89BdBVx+zYJI9MdMIlUZjbXDX+6YVeS6I3e8op+qQ3BYBoQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-    "@babel/helper-replace-supers" "^7.12.13"
-
-"@babel/plugin-transform-parameters@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.13.0.tgz#8fa7603e3097f9c0b7ca1a4821bc2fb52e9e5007"
-  integrity sha512-Jt8k/h/mIwE2JFEOb3lURoY5C85ETcYPnbuAJ96zRBzh1XHtQZfs62ChZ6EP22QlC8c7Xqr9q+e1SU5qttwwjw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-
-"@babel/plugin-transform-property-literals@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.12.13.tgz#4e6a9e37864d8f1b3bc0e2dce7bf8857db8b1a81"
-  integrity sha512-nqVigwVan+lR+g8Fj8Exl0UQX2kymtjcWfMOYM1vTYEKujeyv2SkMgazf2qNcK7l4SDiKyTA/nHCPqL4e2zo1A==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-regenerator@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.12.13.tgz#b628bcc9c85260ac1aeb05b45bde25210194a2f5"
-  integrity sha512-lxb2ZAvSLyJ2PEe47hoGWPmW22v7CtSl9jW8mingV4H2sEX/JOcrAj2nPuGWi56ERUm2bUpjKzONAuT6HCn2EA==
-  dependencies:
-    regenerator-transform "^0.14.2"
-
-"@babel/plugin-transform-reserved-words@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.12.13.tgz#7d9988d4f06e0fe697ea1d9803188aa18b472695"
-  integrity sha512-xhUPzDXxZN1QfiOy/I5tyye+TRz6lA7z6xaT4CLOjPRMVg1ldRf0LHw0TDBpYL4vG78556WuHdyO9oi5UmzZBg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-runtime@^7.11.0":
-  version "7.13.10"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.13.10.tgz#a1e40d22e2bf570c591c9c7e5ab42d6bf1e419e1"
-  integrity sha512-Y5k8ipgfvz5d/76tx7JYbKQTcgFSU6VgJ3kKQv4zGTKr+a9T/KBvfRvGtSFgKDQGt/DBykQixV0vNWKIdzWErA==
-  dependencies:
-    "@babel/helper-module-imports" "^7.12.13"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    babel-plugin-polyfill-corejs2 "^0.1.4"
-    babel-plugin-polyfill-corejs3 "^0.1.3"
-    babel-plugin-polyfill-regenerator "^0.1.2"
-    semver "^6.3.0"
-
-"@babel/plugin-transform-shorthand-properties@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.12.13.tgz#db755732b70c539d504c6390d9ce90fe64aff7ad"
-  integrity sha512-xpL49pqPnLtf0tVluuqvzWIgLEhuPpZzvs2yabUHSKRNlN7ScYU7aMlmavOeyXJZKgZKQRBlh8rHbKiJDraTSw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-spread@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.13.0.tgz#84887710e273c1815ace7ae459f6f42a5d31d5fd"
-  integrity sha512-V6vkiXijjzYeFmQTr3dBxPtZYLPcUfY34DebOU27jIl2M/Y8Egm52Hw82CSjjPqd54GTlJs5x+CR7HeNr24ckg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
-
-"@babel/plugin-transform-sticky-regex@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.12.13.tgz#760ffd936face73f860ae646fb86ee82f3d06d1f"
-  integrity sha512-Jc3JSaaWT8+fr7GRvQP02fKDsYk4K/lYwWq38r/UGfaxo89ajud321NH28KRQ7xy1Ybc0VUE5Pz8psjNNDUglg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-template-literals@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.13.0.tgz#a36049127977ad94438dee7443598d1cefdf409d"
-  integrity sha512-d67umW6nlfmr1iehCcBv69eSUSySk1EsIS8aTDX4Xo9qajAh6mYtcl4kJrBkGXuxZPEgVr7RVfAvNW6YQkd4Mw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-
-"@babel/plugin-transform-typeof-symbol@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.12.13.tgz#785dd67a1f2ea579d9c2be722de8c84cb85f5a7f"
-  integrity sha512-eKv/LmUJpMnu4npgfvs3LiHhJua5fo/CysENxa45YCQXZwKnGCQKAg87bvoqSW1fFT+HA32l03Qxsm8ouTY3ZQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-unicode-escapes@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.12.13.tgz#840ced3b816d3b5127dd1d12dcedc5dead1a5e74"
-  integrity sha512-0bHEkdwJ/sN/ikBHfSmOXPypN/beiGqjo+o4/5K+vxEFNPRPdImhviPakMKG4x96l85emoa0Z6cDflsdBusZbw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-unicode-regex@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.12.13.tgz#b52521685804e155b1202e83fc188d34bb70f5ac"
-  integrity sha512-mDRzSNY7/zopwisPZ5kM9XKCfhchqIYwAKRERtEnhYscZB79VRekuRSoYbN0+KVe3y8+q1h6A4svXtP7N+UoCA==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.12.13"
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/preset-env@^7.11.0":
-  version "7.13.12"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.13.12.tgz#6dff470478290582ac282fb77780eadf32480237"
-  integrity sha512-JzElc6jk3Ko6zuZgBtjOd01pf9yYDEIH8BcqVuYIuOkzOwDesoa/Nz4gIo4lBG6K861KTV9TvIgmFuT6ytOaAA==
-  dependencies:
-    "@babel/compat-data" "^7.13.12"
-    "@babel/helper-compilation-targets" "^7.13.10"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/helper-validator-option" "^7.12.17"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.13.12"
-    "@babel/plugin-proposal-async-generator-functions" "^7.13.8"
-    "@babel/plugin-proposal-class-properties" "^7.13.0"
-    "@babel/plugin-proposal-dynamic-import" "^7.13.8"
-    "@babel/plugin-proposal-export-namespace-from" "^7.12.13"
-    "@babel/plugin-proposal-json-strings" "^7.13.8"
-    "@babel/plugin-proposal-logical-assignment-operators" "^7.13.8"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.13.8"
-    "@babel/plugin-proposal-numeric-separator" "^7.12.13"
-    "@babel/plugin-proposal-object-rest-spread" "^7.13.8"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.13.8"
-    "@babel/plugin-proposal-optional-chaining" "^7.13.12"
-    "@babel/plugin-proposal-private-methods" "^7.13.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.12.13"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-    "@babel/plugin-syntax-class-properties" "^7.12.13"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-    "@babel/plugin-syntax-top-level-await" "^7.12.13"
-    "@babel/plugin-transform-arrow-functions" "^7.13.0"
-    "@babel/plugin-transform-async-to-generator" "^7.13.0"
-    "@babel/plugin-transform-block-scoped-functions" "^7.12.13"
-    "@babel/plugin-transform-block-scoping" "^7.12.13"
-    "@babel/plugin-transform-classes" "^7.13.0"
-    "@babel/plugin-transform-computed-properties" "^7.13.0"
-    "@babel/plugin-transform-destructuring" "^7.13.0"
-    "@babel/plugin-transform-dotall-regex" "^7.12.13"
-    "@babel/plugin-transform-duplicate-keys" "^7.12.13"
-    "@babel/plugin-transform-exponentiation-operator" "^7.12.13"
-    "@babel/plugin-transform-for-of" "^7.13.0"
-    "@babel/plugin-transform-function-name" "^7.12.13"
-    "@babel/plugin-transform-literals" "^7.12.13"
-    "@babel/plugin-transform-member-expression-literals" "^7.12.13"
-    "@babel/plugin-transform-modules-amd" "^7.13.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.13.8"
-    "@babel/plugin-transform-modules-systemjs" "^7.13.8"
-    "@babel/plugin-transform-modules-umd" "^7.13.0"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.12.13"
-    "@babel/plugin-transform-new-target" "^7.12.13"
-    "@babel/plugin-transform-object-super" "^7.12.13"
-    "@babel/plugin-transform-parameters" "^7.13.0"
-    "@babel/plugin-transform-property-literals" "^7.12.13"
-    "@babel/plugin-transform-regenerator" "^7.12.13"
-    "@babel/plugin-transform-reserved-words" "^7.12.13"
-    "@babel/plugin-transform-shorthand-properties" "^7.12.13"
-    "@babel/plugin-transform-spread" "^7.13.0"
-    "@babel/plugin-transform-sticky-regex" "^7.12.13"
-    "@babel/plugin-transform-template-literals" "^7.13.0"
-    "@babel/plugin-transform-typeof-symbol" "^7.12.13"
-    "@babel/plugin-transform-unicode-escapes" "^7.12.13"
-    "@babel/plugin-transform-unicode-regex" "^7.12.13"
-    "@babel/preset-modules" "^0.1.4"
-    "@babel/types" "^7.13.12"
-    babel-plugin-polyfill-corejs2 "^0.1.4"
-    babel-plugin-polyfill-corejs3 "^0.1.3"
-    babel-plugin-polyfill-regenerator "^0.1.2"
-    core-js-compat "^3.9.0"
-    semver "^6.3.0"
-
-"@babel/preset-modules@^0.1.4":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.4.tgz#362f2b68c662842970fdb5e254ffc8fc1c2e415e"
-  integrity sha512-J36NhwnfdzpmH41M1DrnkkgAqhZaqr/NBdPfQ677mLzlaXo+oDiv1deyCDtgAhz8p328otdob0Du7+xgHGZbKg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
-    "@babel/plugin-transform-dotall-regex" "^7.4.4"
-    "@babel/types" "^7.4.4"
-    esutils "^2.0.2"
-
-"@babel/runtime@^7.11.0", "@babel/runtime@^7.8.4":
-  version "7.13.10"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
-  integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
-"@babel/template@^7.0.0", "@babel/template@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327"
-  integrity sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==
-  dependencies:
-    "@babel/code-frame" "^7.12.13"
-    "@babel/parser" "^7.12.13"
-    "@babel/types" "^7.12.13"
-
-"@babel/traverse@^7.0.0", "@babel/traverse@^7.13.0", "@babel/traverse@^7.7.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.13.0.tgz#6d95752475f86ee7ded06536de309a65fc8966cc"
-  integrity sha512-xys5xi5JEhzC3RzEmSGrs/b3pJW/o87SypZ+G/PhaE7uqVQNv/jlmVIBXuoh5atqQ434LfXV+sf23Oxj0bchJQ==
-  dependencies:
-    "@babel/code-frame" "^7.12.13"
-    "@babel/generator" "^7.13.0"
-    "@babel/helper-function-name" "^7.12.13"
-    "@babel/helper-split-export-declaration" "^7.12.13"
-    "@babel/parser" "^7.13.0"
-    "@babel/types" "^7.13.0"
-    debug "^4.1.0"
-    globals "^11.1.0"
-    lodash "^4.17.19"
-
-"@babel/types@^7.0.0", "@babel/types@^7.12.1", "@babel/types@^7.12.13", "@babel/types@^7.13.0", "@babel/types@^7.13.12", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
-  version "7.13.12"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.12.tgz#edbf99208ef48852acdff1c8a681a1e4ade580cd"
-  integrity sha512-K4nY2xFN4QMvQwkQ+zmBDp6ANMbVNw6BbxWmYA4qNjhR9W+Lj/8ky5MEY2Me5r+B2c6/v6F53oMndG+f9s3IiA==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.12.11"
-    lodash "^4.17.19"
-    to-fast-properties "^2.0.0"
-
-"@hapi/address@2.x.x":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
-  integrity sha512-QD1PhQk+s31P1ixsX0H0Suoupp3VMXzIVMSwobR3F3MSUO2YCV0B7xqLcUw/Bh8yuvd3LhpyqLQWTNcRmp6IdQ==
-
-"@hapi/bourne@1.x.x":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@hapi/bourne/-/bourne-1.3.2.tgz#0a7095adea067243ce3283e1b56b8a8f453b242a"
-  integrity sha512-1dVNHT76Uu5N3eJNTYcvxee+jzX4Z9lfciqRRHCU27ihbUcYi+iSc2iml5Ke1LXe1SyJCLA0+14Jh4tXJgOppA==
-
-"@hapi/hoek@8.x.x", "@hapi/hoek@^8.3.0":
-  version "8.5.1"
-  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-8.5.1.tgz#fde96064ca446dec8c55a8c2f130957b070c6e06"
-  integrity sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow==
-
-"@hapi/joi@^15.0.1":
-  version "15.1.1"
-  resolved "https://registry.yarnpkg.com/@hapi/joi/-/joi-15.1.1.tgz#c675b8a71296f02833f8d6d243b34c57b8ce19d7"
-  integrity sha512-entf8ZMOK8sc+8YfeOlM8pCfg3b5+WZIKBfUaaJT8UsjAAPjartzxIYm3TIbjvA4u+u++KbcXD38k682nVHDAQ==
-  dependencies:
-    "@hapi/address" "2.x.x"
-    "@hapi/bourne" "1.x.x"
-    "@hapi/hoek" "8.x.x"
-    "@hapi/topo" "3.x.x"
-
-"@hapi/topo@3.x.x":
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-3.1.6.tgz#68d935fa3eae7fdd5ab0d7f953f3205d8b2bfc29"
-  integrity sha512-tAag0jEcjwH+P2quUfipd7liWCNX2F8NvYjQp2wtInsZxnMlypdw0FtAOLxtvvkO+GSRRbmNi8m/5y42PQJYCQ==
-  dependencies:
-    "@hapi/hoek" "^8.3.0"
-
-"@intervolga/optimize-cssnano-plugin@^1.0.5":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@intervolga/optimize-cssnano-plugin/-/optimize-cssnano-plugin-1.0.6.tgz#be7c7846128b88f6a9b1d1261a0ad06eb5c0fdf8"
-  integrity sha512-zN69TnSr0viRSU6cEDIcuPcP67QcpQ6uHACg58FiN9PDrU6SLyGW3MR4tiISbYxy1kDWAVPwD+XwQTWE5cigAA==
-  dependencies:
-    cssnano "^4.0.0"
-    cssnano-preset-default "^4.0.0"
-    postcss "^7.0.0"
-
-"@mrmlnc/readdir-enhanced@^2.2.1":
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
-  integrity sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==
-  dependencies:
-    call-me-maybe "^1.0.1"
-    glob-to-regexp "^0.3.0"
-
-"@nodelib/fs.stat@^1.1.2":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
-  integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
-
-"@soda/friendly-errors-webpack-plugin@^1.7.1":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.0.tgz#84751d82a93019d5c92c0cf0e45ac59087cd2240"
-  integrity sha512-RLotfx6k1+nfLacwNCenj7VnTMPxVwYKoGOcffMFoJDKM8tXzBiCN0hMHFJNnoAojduYAsxuiMm0EOMixgiRow==
-  dependencies:
-    chalk "^2.4.2"
-    error-stack-parser "^2.0.2"
-    string-width "^2.0.0"
-    strip-ansi "^5"
-
-"@soda/get-current-script@^1.0.0":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@soda/get-current-script/-/get-current-script-1.0.2.tgz#a53515db25d8038374381b73af20bb4f2e508d87"
-  integrity sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==
-
-"@types/anymatch@*":
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
-  integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
-
-"@types/body-parser@*":
-  version "1.19.0"
-  resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.0.tgz#0685b3c47eb3006ffed117cdd55164b61f80538f"
-  integrity sha512-W98JrE0j2K78swW4ukqMleo8R7h/pFETjM2DQ90MF6XK2i4LO4W3gQ71Lt4w3bfm2EvVSyWHplECvB5sK22yFQ==
-  dependencies:
-    "@types/connect" "*"
-    "@types/node" "*"
-
-"@types/connect-history-api-fallback@*":
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.4.tgz#8c0f0e6e5d8252b699f5a662f51bdf82fd9d8bb8"
-  integrity sha512-Kf8v0wljR5GSCOCF/VQWdV3ZhKOVA73drXtY3geMTQgHy9dgqQ0dLrf31M0hcuWkhFzK5sP0kkS3mJzcKVtZbw==
-  dependencies:
-    "@types/express-serve-static-core" "*"
-    "@types/node" "*"
-
-"@types/connect@*":
-  version "3.4.34"
-  resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.34.tgz#170a40223a6d666006d93ca128af2beb1d9b1901"
-  integrity sha512-ePPA/JuI+X0vb+gSWlPKOY0NdNAie/rPUqX2GUPpbZwiKTkSPhjXWuee47E4MtE54QVzGCQMQkAL6JhV2E1+cQ==
-  dependencies:
-    "@types/node" "*"
-
-"@types/express-serve-static-core@*", "@types/express-serve-static-core@^4.17.18":
-  version "4.17.19"
-  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.19.tgz#00acfc1632e729acac4f1530e9e16f6dd1508a1d"
-  integrity sha512-DJOSHzX7pCiSElWaGR8kCprwibCB/3yW6vcT8VG3P0SJjnv19gnWG/AZMfM60Xj/YJIp/YCaDHyvzsFVeniARA==
-  dependencies:
-    "@types/node" "*"
-    "@types/qs" "*"
-    "@types/range-parser" "*"
-
-"@types/express@*":
-  version "4.17.11"
-  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.11.tgz#debe3caa6f8e5fcda96b47bd54e2f40c4ee59545"
-  integrity sha512-no+R6rW60JEc59977wIxreQVsIEOAYwgCqldrA/vkpCnbD7MqTefO97lmoBe4WE0F156bC4uLSP1XHDOySnChg==
-  dependencies:
-    "@types/body-parser" "*"
-    "@types/express-serve-static-core" "^4.17.18"
-    "@types/qs" "*"
-    "@types/serve-static" "*"
-
-"@types/glob@^7.1.1":
-  version "7.1.3"
-  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183"
-  integrity sha512-SEYeGAIQIQX8NN6LDKprLjbrd5dARM5EXsd8GI/A5l0apYI1fGMWgPHSe4ZKL4eozlAyI+doUE9XbYS4xCkQ1w==
-  dependencies:
-    "@types/minimatch" "*"
-    "@types/node" "*"
-
-"@types/http-proxy@^1.17.4":
-  version "1.17.5"
-  resolved "https://registry.yarnpkg.com/@types/http-proxy/-/http-proxy-1.17.5.tgz#c203c5e6e9dc6820d27a40eb1e511c70a220423d"
-  integrity sha512-GNkDE7bTv6Sf8JbV2GksknKOsk7OznNYHSdrtvPJXO0qJ9odZig6IZKUi5RFGi6d1bf6dgIAe4uXi3DBc7069Q==
-  dependencies:
-    "@types/node" "*"
-
-"@types/json-schema@^7.0.5", "@types/json-schema@^7.0.6":
-  version "7.0.7"
-  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
-  integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==
-
-"@types/mime@^1":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a"
-  integrity sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==
-
-"@types/minimatch@*":
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.4.tgz#f0ec25dbf2f0e4b18647313ac031134ca5b24b21"
-  integrity sha512-1z8k4wzFnNjVK/tlxvrWuK5WMt6mydWWP7+zvH5eFep4oj+UkrfiJTRtjCeBXNpwaA/FYqqtb4/QS4ianFpIRA==
-
-"@types/minimist@^1.2.0":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.1.tgz#283f669ff76d7b8260df8ab7a4262cc83d988256"
-  integrity sha512-fZQQafSREFyuZcdWFAExYjBiCL7AUCdgsk80iO0q4yihYYdcIiH28CcuPTGFgLOCC8RlW49GSQxdHwZP+I7CNg==
-
-"@types/node@*", "@types/node@>=6":
-  version "14.14.35"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.35.tgz#42c953a4e2b18ab931f72477e7012172f4ffa313"
-  integrity sha512-Lt+wj8NVPx0zUmUwumiVXapmaLUcAk3yPuHCFVXras9k5VT9TdhJqKqGVUQCD60OTMCl0qxJ57OiTL0Mic3Iag==
-
-"@types/normalize-package-data@^2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
-  integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
-
-"@types/q@^1.5.1":
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
-  integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
-
-"@types/qs@*":
-  version "6.9.6"
-  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.6.tgz#df9c3c8b31a247ec315e6996566be3171df4b3b1"
-  integrity sha512-0/HnwIfW4ki2D8L8c9GVcG5I72s9jP5GSLVF0VIXDW00kmIpA6O33G7a8n59Tmh7Nz0WUC3rSb7PTY/sdW2JzA==
-
-"@types/range-parser@*":
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c"
-  integrity sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==
-
-"@types/serve-static@*":
-  version "1.13.9"
-  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.13.9.tgz#aacf28a85a05ee29a11fb7c3ead935ac56f33e4e"
-  integrity sha512-ZFqF6qa48XsPdjXV5Gsz0Zqmux2PerNd3a/ktL45mHpa19cuMi/cL8tcxdAx497yRh+QtYPuofjT9oWw9P7nkA==
-  dependencies:
-    "@types/mime" "^1"
-    "@types/node" "*"
-
-"@types/source-list-map@*":
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
-  integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
-
-"@types/tapable@*":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.6.tgz#a9ca4b70a18b270ccb2bc0aaafefd1d486b7ea74"
-  integrity sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==
-
-"@types/uglify-js@*":
-  version "3.13.0"
-  resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.13.0.tgz#1cad8df1fb0b143c5aba08de5712ea9d1ff71124"
-  integrity sha512-EGkrJD5Uy+Pg0NUR8uA4bJ5WMfljyad0G+784vLCNUkD+QwOJXUbBYExXfVGf7YtyzdQp3L/XMYcliB987kL5Q==
-  dependencies:
-    source-map "^0.6.1"
-
-"@types/webpack-dev-server@^3.11.0":
-  version "3.11.2"
-  resolved "https://registry.yarnpkg.com/@types/webpack-dev-server/-/webpack-dev-server-3.11.2.tgz#73915a7d9e0a9b5e010a2388a46f68ab3f770ef8"
-  integrity sha512-13w1VhaghN+G1rYjkBPgN/GFRoHd9uI2fwK9cSKvLutdmZ22L9iicFEvt69by40DP2I6uNcClaGTyPY6nYhIgQ==
-  dependencies:
-    "@types/connect-history-api-fallback" "*"
-    "@types/express" "*"
-    "@types/serve-static" "*"
-    "@types/webpack" "*"
-    http-proxy-middleware "^1.0.0"
-
-"@types/webpack-sources@*":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-2.1.0.tgz#8882b0bd62d1e0ce62f183d0d01b72e6e82e8c10"
-  integrity sha512-LXn/oYIpBeucgP1EIJbKQ2/4ZmpvRl+dlrFdX7+94SKRUV3Evy3FsfMZY318vGhkWUS5MPhtOM3w1/hCOAOXcg==
-  dependencies:
-    "@types/node" "*"
-    "@types/source-list-map" "*"
-    source-map "^0.7.3"
-
-"@types/webpack@*", "@types/webpack@^4.0.0":
-  version "4.41.26"
-  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.26.tgz#27a30d7d531e16489f9c7607c747be6bc1a459ef"
-  integrity sha512-7ZyTfxjCRwexh+EJFwRUM+CDB2XvgHl4vfuqf1ZKrgGvcS5BrNvPQqJh3tsZ0P6h6Aa1qClVHaJZszLPzpqHeA==
-  dependencies:
-    "@types/anymatch" "*"
-    "@types/node" "*"
-    "@types/tapable" "*"
-    "@types/uglify-js" "*"
-    "@types/webpack-sources" "*"
-    source-map "^0.6.0"
-
-"@types/zen-observable@^0.8.0":
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/@types/zen-observable/-/zen-observable-0.8.2.tgz#808c9fa7e4517274ed555fa158f2de4b4f468e71"
-  integrity sha512-HrCIVMLjE1MOozVoD86622S7aunluLb2PJdPfb3nYiEtohm8mIB/vyv0Fd37AdeMFrTUQXEunw78YloMA3Qilg==
-
-"@vue/babel-helper-vue-jsx-merge-props@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz#31624a7a505fb14da1d58023725a4c5f270e6a81"
-  integrity sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA==
-
-"@vue/babel-helper-vue-transform-on@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.2.tgz#9b9c691cd06fc855221a2475c3cc831d774bc7dc"
-  integrity sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==
-
-"@vue/babel-plugin-jsx@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.0.3.tgz#ad5ee86ebc9fc40900add9914534e223c719eace"
-  integrity sha512-+52ZQFmrM0yh61dQlgwQlfHZXmYbswbQEL25SOSt9QkjegAdfIGu87oELw0l8H6cuJYazZCiNjPR9eU++ZIbxg==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/plugin-syntax-jsx" "^7.0.0"
-    "@babel/template" "^7.0.0"
-    "@babel/traverse" "^7.0.0"
-    "@babel/types" "^7.0.0"
-    "@vue/babel-helper-vue-transform-on" "^1.0.2"
-    camelcase "^6.0.0"
-    html-tags "^3.1.0"
-    svg-tags "^1.0.0"
-
-"@vue/babel-plugin-transform-vue-jsx@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.2.1.tgz#646046c652c2f0242727f34519d917b064041ed7"
-  integrity sha512-HJuqwACYehQwh1fNT8f4kyzqlNMpBuUK4rSiSES5D4QsYncv5fxFsLyrxFPG2ksO7t5WP+Vgix6tt6yKClwPzA==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/plugin-syntax-jsx" "^7.2.0"
-    "@vue/babel-helper-vue-jsx-merge-props" "^1.2.1"
-    html-tags "^2.0.0"
-    lodash.kebabcase "^4.1.1"
-    svg-tags "^1.0.0"
-
-"@vue/babel-preset-app@^4.5.12":
-  version "4.5.12"
-  resolved "https://registry.yarnpkg.com/@vue/babel-preset-app/-/babel-preset-app-4.5.12.tgz#c3a23cf33f6e5ea30536f13c0f9b1fc7e028b1c1"
-  integrity sha512-8q67ORQ9O0Ms0nlqsXTVhaBefRBaLrzPxOewAZhdcO7onHwcO5/wRdWtHhZgfpCZlhY7NogkU16z3WnorSSkEA==
-  dependencies:
-    "@babel/core" "^7.11.0"
-    "@babel/helper-compilation-targets" "^7.9.6"
-    "@babel/helper-module-imports" "^7.8.3"
-    "@babel/plugin-proposal-class-properties" "^7.8.3"
-    "@babel/plugin-proposal-decorators" "^7.8.3"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-    "@babel/plugin-syntax-jsx" "^7.8.3"
-    "@babel/plugin-transform-runtime" "^7.11.0"
-    "@babel/preset-env" "^7.11.0"
-    "@babel/runtime" "^7.11.0"
-    "@vue/babel-plugin-jsx" "^1.0.3"
-    "@vue/babel-preset-jsx" "^1.2.4"
-    babel-plugin-dynamic-import-node "^2.3.3"
-    core-js "^3.6.5"
-    core-js-compat "^3.6.5"
-    semver "^6.1.0"
-
-"@vue/babel-preset-jsx@^1.2.4":
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/babel-preset-jsx/-/babel-preset-jsx-1.2.4.tgz#92fea79db6f13b01e80d3a0099e2924bdcbe4e87"
-  integrity sha512-oRVnmN2a77bYDJzeGSt92AuHXbkIxbf/XXSE3klINnh9AXBmVS1DGa1f0d+dDYpLfsAKElMnqKTQfKn7obcL4w==
-  dependencies:
-    "@vue/babel-helper-vue-jsx-merge-props" "^1.2.1"
-    "@vue/babel-plugin-transform-vue-jsx" "^1.2.1"
-    "@vue/babel-sugar-composition-api-inject-h" "^1.2.1"
-    "@vue/babel-sugar-composition-api-render-instance" "^1.2.4"
-    "@vue/babel-sugar-functional-vue" "^1.2.2"
-    "@vue/babel-sugar-inject-h" "^1.2.2"
-    "@vue/babel-sugar-v-model" "^1.2.3"
-    "@vue/babel-sugar-v-on" "^1.2.3"
-
-"@vue/babel-sugar-composition-api-inject-h@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@vue/babel-sugar-composition-api-inject-h/-/babel-sugar-composition-api-inject-h-1.2.1.tgz#05d6e0c432710e37582b2be9a6049b689b6f03eb"
-  integrity sha512-4B3L5Z2G+7s+9Bwbf+zPIifkFNcKth7fQwekVbnOA3cr3Pq71q71goWr97sk4/yyzH8phfe5ODVzEjX7HU7ItQ==
-  dependencies:
-    "@babel/plugin-syntax-jsx" "^7.2.0"
-
-"@vue/babel-sugar-composition-api-render-instance@^1.2.4":
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/babel-sugar-composition-api-render-instance/-/babel-sugar-composition-api-render-instance-1.2.4.tgz#e4cbc6997c344fac271785ad7a29325c51d68d19"
-  integrity sha512-joha4PZznQMsxQYXtR3MnTgCASC9u3zt9KfBxIeuI5g2gscpTsSKRDzWQt4aqNIpx6cv8On7/m6zmmovlNsG7Q==
-  dependencies:
-    "@babel/plugin-syntax-jsx" "^7.2.0"
-
-"@vue/babel-sugar-functional-vue@^1.2.2":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@vue/babel-sugar-functional-vue/-/babel-sugar-functional-vue-1.2.2.tgz#267a9ac8d787c96edbf03ce3f392c49da9bd2658"
-  integrity sha512-JvbgGn1bjCLByIAU1VOoepHQ1vFsroSA/QkzdiSs657V79q6OwEWLCQtQnEXD/rLTA8rRit4rMOhFpbjRFm82w==
-  dependencies:
-    "@babel/plugin-syntax-jsx" "^7.2.0"
-
-"@vue/babel-sugar-inject-h@^1.2.2":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@vue/babel-sugar-inject-h/-/babel-sugar-inject-h-1.2.2.tgz#d738d3c893367ec8491dcbb669b000919293e3aa"
-  integrity sha512-y8vTo00oRkzQTgufeotjCLPAvlhnpSkcHFEp60+LJUwygGcd5Chrpn5480AQp/thrxVm8m2ifAk0LyFel9oCnw==
-  dependencies:
-    "@babel/plugin-syntax-jsx" "^7.2.0"
-
-"@vue/babel-sugar-v-model@^1.2.3":
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/@vue/babel-sugar-v-model/-/babel-sugar-v-model-1.2.3.tgz#fa1f29ba51ebf0aa1a6c35fa66d539bc459a18f2"
-  integrity sha512-A2jxx87mySr/ulAsSSyYE8un6SIH0NWHiLaCWpodPCVOlQVODCaSpiR4+IMsmBr73haG+oeCuSvMOM+ttWUqRQ==
-  dependencies:
-    "@babel/plugin-syntax-jsx" "^7.2.0"
-    "@vue/babel-helper-vue-jsx-merge-props" "^1.2.1"
-    "@vue/babel-plugin-transform-vue-jsx" "^1.2.1"
-    camelcase "^5.0.0"
-    html-tags "^2.0.0"
-    svg-tags "^1.0.0"
-
-"@vue/babel-sugar-v-on@^1.2.3":
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/@vue/babel-sugar-v-on/-/babel-sugar-v-on-1.2.3.tgz#342367178586a69f392f04bfba32021d02913ada"
-  integrity sha512-kt12VJdz/37D3N3eglBywV8GStKNUhNrsxChXIV+o0MwVXORYuhDTHJRKPgLJRb/EY3vM2aRFQdxJBp9CLikjw==
-  dependencies:
-    "@babel/plugin-syntax-jsx" "^7.2.0"
-    "@vue/babel-plugin-transform-vue-jsx" "^1.2.1"
-    camelcase "^5.0.0"
-
-"@vue/cli-overlay@^4.5.12":
-  version "4.5.12"
-  resolved "https://registry.yarnpkg.com/@vue/cli-overlay/-/cli-overlay-4.5.12.tgz#d5ae353abb187672204197dcd077a4367d4d4a24"
-  integrity sha512-dCN0RzVpA8fp+MfjuVBROgM483MPObAb/je+APE/JhpCJyPQORYQEvNpmaorpN+9Cp6mrESVSzhh0qD4SFrlzg==
-
-"@vue/cli-plugin-babel@~4.5.0":
-  version "4.5.12"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-babel/-/cli-plugin-babel-4.5.12.tgz#c9737d4079485ce9be07c463c81e1e33886c6219"
-  integrity sha512-PhiNDhlGydsRR0F00OJqG/Q3Mz2G1ko8XqS7CJ0l1GVVGmklUEBy2dW/S8ntEgHpSkFa6h49PgYP3WE2OM3CEg==
-  dependencies:
-    "@babel/core" "^7.11.0"
-    "@vue/babel-preset-app" "^4.5.12"
-    "@vue/cli-shared-utils" "^4.5.12"
-    babel-loader "^8.1.0"
-    cache-loader "^4.1.0"
-    thread-loader "^2.1.3"
-    webpack "^4.0.0"
-
-"@vue/cli-plugin-eslint@~4.5.0":
-  version "4.5.12"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-eslint/-/cli-plugin-eslint-4.5.12.tgz#7fc2a1d0a490fa300ef4e94518c2cc49ba7a292f"
-  integrity sha512-nbjGJkWxo/xdD32DwvnEAUwkWYsObpqNk9NuU7T62ehdzHPzz58o3j03YZ7a7T7Le8bYyOWMYsdNfz63F+XiZQ==
-  dependencies:
-    "@vue/cli-shared-utils" "^4.5.12"
-    eslint-loader "^2.2.1"
-    globby "^9.2.0"
-    inquirer "^7.1.0"
-    webpack "^4.0.0"
-    yorkie "^2.0.0"
-
-"@vue/cli-plugin-router@^4.5.12":
-  version "4.5.12"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-router/-/cli-plugin-router-4.5.12.tgz#977c4b2b694cc03e9ef816112a5d58923493d0ac"
-  integrity sha512-DYNz5AA3W7Ewt3aaiOLGdYFt4MX4w/HTEtep+kPzP9S9tAknzyoIJXkaYzhwu8ArpEYwhWgtuCcDZ8hR6++DbA==
-  dependencies:
-    "@vue/cli-shared-utils" "^4.5.12"
-
-"@vue/cli-plugin-vuex@^4.5.12":
-  version "4.5.12"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.12.tgz#f7fbe177ee7176f055b546e9e74472f9d9177626"
-  integrity sha512-STgbvNv/3iHAKArc18b/qjN7RX1FTrfxPeHH26GOr/A8lJes7+CSluZZ8E5R7Zr/vL0zOqOkUVDAjFXVf4zWQA==
-
-"@vue/cli-service@~4.5.0":
-  version "4.5.12"
-  resolved "https://registry.yarnpkg.com/@vue/cli-service/-/cli-service-4.5.12.tgz#483aef7dc4e2a7b02b7f224f0a2ef7cea910e033"
-  integrity sha512-Di/dFw72HIvUrpTgnnPQkPq07mdd7z3GPeCH/o+6fv4bxOD+gwK9z7P6RkG4lGv2QdLz+qjim9f7xw5w+9ENkg==
-  dependencies:
-    "@intervolga/optimize-cssnano-plugin" "^1.0.5"
-    "@soda/friendly-errors-webpack-plugin" "^1.7.1"
-    "@soda/get-current-script" "^1.0.0"
-    "@types/minimist" "^1.2.0"
-    "@types/webpack" "^4.0.0"
-    "@types/webpack-dev-server" "^3.11.0"
-    "@vue/cli-overlay" "^4.5.12"
-    "@vue/cli-plugin-router" "^4.5.12"
-    "@vue/cli-plugin-vuex" "^4.5.12"
-    "@vue/cli-shared-utils" "^4.5.12"
-    "@vue/component-compiler-utils" "^3.1.2"
-    "@vue/preload-webpack-plugin" "^1.1.0"
-    "@vue/web-component-wrapper" "^1.2.0"
-    acorn "^7.4.0"
-    acorn-walk "^7.1.1"
-    address "^1.1.2"
-    autoprefixer "^9.8.6"
-    browserslist "^4.12.0"
-    cache-loader "^4.1.0"
-    case-sensitive-paths-webpack-plugin "^2.3.0"
-    cli-highlight "^2.1.4"
-    clipboardy "^2.3.0"
-    cliui "^6.0.0"
-    copy-webpack-plugin "^5.1.1"
-    css-loader "^3.5.3"
-    cssnano "^4.1.10"
-    debug "^4.1.1"
-    default-gateway "^5.0.5"
-    dotenv "^8.2.0"
-    dotenv-expand "^5.1.0"
-    file-loader "^4.2.0"
-    fs-extra "^7.0.1"
-    globby "^9.2.0"
-    hash-sum "^2.0.0"
-    html-webpack-plugin "^3.2.0"
-    launch-editor-middleware "^2.2.1"
-    lodash.defaultsdeep "^4.6.1"
-    lodash.mapvalues "^4.6.0"
-    lodash.transform "^4.6.0"
-    mini-css-extract-plugin "^0.9.0"
-    minimist "^1.2.5"
-    pnp-webpack-plugin "^1.6.4"
-    portfinder "^1.0.26"
-    postcss-loader "^3.0.0"
-    ssri "^7.1.0"
-    terser-webpack-plugin "^2.3.6"
-    thread-loader "^2.1.3"
-    url-loader "^2.2.0"
-    vue-loader "^15.9.2"
-    vue-style-loader "^4.1.2"
-    webpack "^4.0.0"
-    webpack-bundle-analyzer "^3.8.0"
-    webpack-chain "^6.4.0"
-    webpack-dev-server "^3.11.0"
-    webpack-merge "^4.2.2"
-  optionalDependencies:
-    vue-loader-v16 "npm:vue-loader@^16.1.0"
-
-"@vue/cli-shared-utils@^4.5.12":
-  version "4.5.12"
-  resolved "https://registry.yarnpkg.com/@vue/cli-shared-utils/-/cli-shared-utils-4.5.12.tgz#0e0693d488336d284ffa658ff33b1ea22927d065"
-  integrity sha512-qnIQPJ4XckMoqYh9fJ0Y91QKMIb4Hiibrm9+k4E15QHpk5RaokuOpf10SsOr2NLPCXSWsHOLo3hduZSwHPGY/Q==
-  dependencies:
-    "@hapi/joi" "^15.0.1"
-    chalk "^2.4.2"
-    execa "^1.0.0"
-    launch-editor "^2.2.1"
-    lru-cache "^5.1.1"
-    node-ipc "^9.1.1"
-    open "^6.3.0"
-    ora "^3.4.0"
-    read-pkg "^5.1.1"
-    request "^2.88.2"
-    semver "^6.1.0"
-    strip-ansi "^6.0.0"
-
-"@vue/component-compiler-utils@^3.1.0", "@vue/component-compiler-utils@^3.1.2":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.2.0.tgz#8f85182ceed28e9b3c75313de669f83166d11e5d"
-  integrity sha512-lejBLa7xAMsfiZfNp7Kv51zOzifnb29FwdnMLa96z26kXErPFioSf9BMcePVIQ6/Gc6/mC0UrPpxAWIHyae0vw==
-  dependencies:
-    consolidate "^0.15.1"
-    hash-sum "^1.0.2"
-    lru-cache "^4.1.2"
-    merge-source-map "^1.1.0"
-    postcss "^7.0.14"
-    postcss-selector-parser "^6.0.2"
-    source-map "~0.6.1"
-    vue-template-es2015-compiler "^1.9.0"
-  optionalDependencies:
-    prettier "^1.18.2"
-
-"@vue/preload-webpack-plugin@^1.1.0":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz#ceb924b4ecb3b9c43871c7a429a02f8423e621ab"
-  integrity sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==
-
-"@vue/web-component-wrapper@^1.2.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz#b6b40a7625429d2bd7c2281ddba601ed05dc7f1a"
-  integrity sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==
-
-"@webassemblyjs/ast@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
-  integrity sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==
-  dependencies:
-    "@webassemblyjs/helper-module-context" "1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
-    "@webassemblyjs/wast-parser" "1.9.0"
-
-"@webassemblyjs/floating-point-hex-parser@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz#3c3d3b271bddfc84deb00f71344438311d52ffb4"
-  integrity sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==
-
-"@webassemblyjs/helper-api-error@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz#203f676e333b96c9da2eeab3ccef33c45928b6a2"
-  integrity sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw==
-
-"@webassemblyjs/helper-buffer@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz#a1442d269c5feb23fcbc9ef759dac3547f29de00"
-  integrity sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA==
-
-"@webassemblyjs/helper-code-frame@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz#647f8892cd2043a82ac0c8c5e75c36f1d9159f27"
-  integrity sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==
-  dependencies:
-    "@webassemblyjs/wast-printer" "1.9.0"
-
-"@webassemblyjs/helper-fsm@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz#c05256b71244214671f4b08ec108ad63b70eddb8"
-  integrity sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw==
-
-"@webassemblyjs/helper-module-context@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz#25d8884b76839871a08a6c6f806c3979ef712f07"
-  integrity sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-
-"@webassemblyjs/helper-wasm-bytecode@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz#4fed8beac9b8c14f8c58b70d124d549dd1fe5790"
-  integrity sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw==
-
-"@webassemblyjs/helper-wasm-section@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz#5a4138d5a6292ba18b04c5ae49717e4167965346"
-  integrity sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-buffer" "1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
-    "@webassemblyjs/wasm-gen" "1.9.0"
-
-"@webassemblyjs/ieee754@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz#15c7a0fbaae83fb26143bbacf6d6df1702ad39e4"
-  integrity sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==
-  dependencies:
-    "@xtuc/ieee754" "^1.2.0"
-
-"@webassemblyjs/leb128@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.9.0.tgz#f19ca0b76a6dc55623a09cffa769e838fa1e1c95"
-  integrity sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==
-  dependencies:
-    "@xtuc/long" "4.2.2"
-
-"@webassemblyjs/utf8@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.9.0.tgz#04d33b636f78e6a6813227e82402f7637b6229ab"
-  integrity sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w==
-
-"@webassemblyjs/wasm-edit@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz#3fe6d79d3f0f922183aa86002c42dd256cfee9cf"
-  integrity sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-buffer" "1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
-    "@webassemblyjs/helper-wasm-section" "1.9.0"
-    "@webassemblyjs/wasm-gen" "1.9.0"
-    "@webassemblyjs/wasm-opt" "1.9.0"
-    "@webassemblyjs/wasm-parser" "1.9.0"
-    "@webassemblyjs/wast-printer" "1.9.0"
-
-"@webassemblyjs/wasm-gen@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz#50bc70ec68ded8e2763b01a1418bf43491a7a49c"
-  integrity sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
-    "@webassemblyjs/ieee754" "1.9.0"
-    "@webassemblyjs/leb128" "1.9.0"
-    "@webassemblyjs/utf8" "1.9.0"
-
-"@webassemblyjs/wasm-opt@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz#2211181e5b31326443cc8112eb9f0b9028721a61"
-  integrity sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-buffer" "1.9.0"
-    "@webassemblyjs/wasm-gen" "1.9.0"
-    "@webassemblyjs/wasm-parser" "1.9.0"
-
-"@webassemblyjs/wasm-parser@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz#9d48e44826df4a6598294aa6c87469d642fff65e"
-  integrity sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-api-error" "1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
-    "@webassemblyjs/ieee754" "1.9.0"
-    "@webassemblyjs/leb128" "1.9.0"
-    "@webassemblyjs/utf8" "1.9.0"
-
-"@webassemblyjs/wast-parser@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz#3031115d79ac5bd261556cecc3fa90a3ef451914"
-  integrity sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/floating-point-hex-parser" "1.9.0"
-    "@webassemblyjs/helper-api-error" "1.9.0"
-    "@webassemblyjs/helper-code-frame" "1.9.0"
-    "@webassemblyjs/helper-fsm" "1.9.0"
-    "@xtuc/long" "4.2.2"
-
-"@webassemblyjs/wast-printer@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz#4935d54c85fef637b00ce9f52377451d00d47899"
-  integrity sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/wast-parser" "1.9.0"
-    "@xtuc/long" "4.2.2"
-
-"@wry/context@^0.4.0":
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/@wry/context/-/context-0.4.4.tgz#e50f5fa1d6cfaabf2977d1fda5ae91717f8815f8"
-  integrity sha512-LrKVLove/zw6h2Md/KZyWxIkFM6AoyKp71OqpH9Hiip1csjPVoD3tPxlbQUNxEnHENks3UGgNpSBCAfq9KWuag==
-  dependencies:
-    "@types/node" ">=6"
-    tslib "^1.9.3"
-
-"@wry/equality@^0.1.2":
-  version "0.1.11"
-  resolved "https://registry.yarnpkg.com/@wry/equality/-/equality-0.1.11.tgz#35cb156e4a96695aa81a9ecc4d03787bc17f1790"
-  integrity sha512-mwEVBDUVODlsQQ5dfuLUS5/Tf7jqUKyhKYHmVi4fPB6bDMOfWvUPJmKgS1Z7Za/sOI3vzWt4+O7yCiL/70MogA==
-  dependencies:
-    tslib "^1.9.3"
-
-"@xtuc/ieee754@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
-  integrity sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==
-
-"@xtuc/long@4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
-  integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
-
-accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
-  integrity sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==
-  dependencies:
-    mime-types "~2.1.24"
-    negotiator "0.6.2"
-
-acorn-jsx@^5.2.0:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
-  integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==
-
-acorn-walk@^7.1.1:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
-  integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
-
-acorn@^6.4.1:
-  version "6.4.2"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
-  integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==
-
-acorn@^7.1.1, acorn@^7.4.0:
-  version "7.4.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
-  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
-
-address@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
-  integrity sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==
-
-aggregate-error@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a"
-  integrity sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==
-  dependencies:
-    clean-stack "^2.0.0"
-    indent-string "^4.0.0"
-
-ajv-errors@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
-  integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==
-
-ajv-keywords@^3.1.0, ajv-keywords@^3.4.1, ajv-keywords@^3.5.2:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
-  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
-
-ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
-  version "6.12.6"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
-  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
-  dependencies:
-    fast-deep-equal "^3.1.1"
-    fast-json-stable-stringify "^2.0.0"
-    json-schema-traverse "^0.4.1"
-    uri-js "^4.2.2"
-
-alphanum-sort@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
-  integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
-
-ansi-colors@^3.0.0:
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
-  integrity sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==
-
-ansi-escapes@^4.2.1:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
-  integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
-  dependencies:
-    type-fest "^0.21.3"
-
-ansi-html@0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
-  integrity sha1-gTWEAhliqenm/QOflA0S9WynhZ4=
-
-ansi-regex@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
-  integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8=
-
-ansi-regex@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
-  integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=
-
-ansi-regex@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
-  integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
-
-ansi-regex@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
-  integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
-
-ansi-styles@^3.2.0, ansi-styles@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
-  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
-  dependencies:
-    color-convert "^1.9.0"
-
-ansi-styles@^4.0.0, ansi-styles@^4.1.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
-  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
-  dependencies:
-    color-convert "^2.0.1"
-
-any-promise@^1.0.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
-  integrity sha1-q8av7tzqUugJzcA3au0845Y10X8=
-
-anymatch@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
-  integrity sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==
-  dependencies:
-    micromatch "^3.1.4"
-    normalize-path "^2.1.1"
-
-anymatch@~3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
-  integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
-  dependencies:
-    normalize-path "^3.0.0"
-    picomatch "^2.0.4"
-
-apollo-cache-inmemory@^1.6.6:
-  version "1.6.6"
-  resolved "https://registry.yarnpkg.com/apollo-cache-inmemory/-/apollo-cache-inmemory-1.6.6.tgz#56d1f2a463a6b9db32e9fa990af16d2a008206fd"
-  integrity sha512-L8pToTW/+Xru2FFAhkZ1OA9q4V4nuvfoPecBM34DecAugUZEBhI2Hmpgnzq2hTKZ60LAMrlqiASm0aqAY6F8/A==
-  dependencies:
-    apollo-cache "^1.3.5"
-    apollo-utilities "^1.3.4"
-    optimism "^0.10.0"
-    ts-invariant "^0.4.0"
-    tslib "^1.10.0"
-
-apollo-cache@1.3.5, apollo-cache@^1.3.5:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/apollo-cache/-/apollo-cache-1.3.5.tgz#9dbebfc8dbe8fe7f97ba568a224bca2c5d81f461"
-  integrity sha512-1XoDy8kJnyWY/i/+gLTEbYLnoiVtS8y7ikBr/IfmML4Qb+CM7dEEbIUOjnY716WqmZ/UpXIxTfJsY7rMcqiCXA==
-  dependencies:
-    apollo-utilities "^1.3.4"
-    tslib "^1.10.0"
-
-apollo-client@^2.6.10:
-  version "2.6.10"
-  resolved "https://registry.yarnpkg.com/apollo-client/-/apollo-client-2.6.10.tgz#86637047b51d940c8eaa771a4ce1b02df16bea6a"
-  integrity sha512-jiPlMTN6/5CjZpJOkGeUV0mb4zxx33uXWdj/xQCfAMkuNAC3HN7CvYDyMHHEzmcQ5GV12LszWoQ/VlxET24CtA==
-  dependencies:
-    "@types/zen-observable" "^0.8.0"
-    apollo-cache "1.3.5"
-    apollo-link "^1.0.0"
-    apollo-utilities "1.3.4"
-    symbol-observable "^1.0.2"
-    ts-invariant "^0.4.0"
-    tslib "^1.10.0"
-    zen-observable "^0.8.0"
-
-apollo-link-error@^1.1.13:
-  version "1.1.13"
-  resolved "https://registry.yarnpkg.com/apollo-link-error/-/apollo-link-error-1.1.13.tgz#c1a1bb876ffe380802c8df0506a32c33aad284cd"
-  integrity sha512-jAZOOahJU6bwSqb2ZyskEK1XdgUY9nkmeclCrW7Gddh1uasHVqmoYc4CKdb0/H0Y1J9lvaXKle2Wsw/Zx1AyUg==
-  dependencies:
-    apollo-link "^1.2.14"
-    apollo-link-http-common "^0.2.16"
-    tslib "^1.9.3"
-
-apollo-link-http-common@^0.2.16:
-  version "0.2.16"
-  resolved "https://registry.yarnpkg.com/apollo-link-http-common/-/apollo-link-http-common-0.2.16.tgz#756749dafc732792c8ca0923f9a40564b7c59ecc"
-  integrity sha512-2tIhOIrnaF4UbQHf7kjeQA/EmSorB7+HyJIIrUjJOKBgnXwuexi8aMecRlqTIDWcyVXCeqLhUnztMa6bOH/jTg==
-  dependencies:
-    apollo-link "^1.2.14"
-    ts-invariant "^0.4.0"
-    tslib "^1.9.3"
-
-apollo-link-http@^1.5.17:
-  version "1.5.17"
-  resolved "https://registry.yarnpkg.com/apollo-link-http/-/apollo-link-http-1.5.17.tgz#499e9f1711bf694497f02c51af12d82de5d8d8ba"
-  integrity sha512-uWcqAotbwDEU/9+Dm9e1/clO7hTB2kQ/94JYcGouBVLjoKmTeJTUPQKcJGpPwUjZcSqgYicbFqQSoJIW0yrFvg==
-  dependencies:
-    apollo-link "^1.2.14"
-    apollo-link-http-common "^0.2.16"
-    tslib "^1.9.3"
-
-apollo-link@^1.0.0, apollo-link@^1.2.14:
-  version "1.2.14"
-  resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.2.14.tgz#3feda4b47f9ebba7f4160bef8b977ba725b684d9"
-  integrity sha512-p67CMEFP7kOG1JZ0ZkYZwRDa369w5PIjtMjvrQd/HnIV8FRsHRqLqK+oAZQnFa1DDdZtOtHTi+aMIW6EatC2jg==
-  dependencies:
-    apollo-utilities "^1.3.0"
-    ts-invariant "^0.4.0"
-    tslib "^1.9.3"
-    zen-observable-ts "^0.8.21"
-
-apollo-utilities@1.3.4, apollo-utilities@^1.3.0, apollo-utilities@^1.3.4:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/apollo-utilities/-/apollo-utilities-1.3.4.tgz#6129e438e8be201b6c55b0f13ce49d2c7175c9cf"
-  integrity sha512-pk2hiWrCXMAy2fRPwEyhvka+mqwzeP60Jr1tRYi5xru+3ko94HI9o6lK0CT33/w4RDlxWchmdhDCrvdr+pHCig==
-  dependencies:
-    "@wry/equality" "^0.1.2"
-    fast-json-stable-stringify "^2.0.0"
-    ts-invariant "^0.4.0"
-    tslib "^1.10.0"
-
-aproba@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
-  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
-
-arch@^2.1.1:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/arch/-/arch-2.2.0.tgz#1bc47818f305764f23ab3306b0bfc086c5a29d11"
-  integrity sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==
-
-argparse@^1.0.7:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
-  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
-  dependencies:
-    sprintf-js "~1.0.2"
-
-arr-diff@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
-  integrity sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=
-
-arr-flatten@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
-  integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==
-
-arr-union@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
-  integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
-
-array-flatten@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
-  integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
-
-array-flatten@^2.1.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.2.tgz#24ef80a28c1a893617e2149b0c6d0d788293b099"
-  integrity sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==
-
-array-union@^1.0.1, array-union@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
-  integrity sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=
-  dependencies:
-    array-uniq "^1.0.1"
-
-array-uniq@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
-  integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=
-
-array-unique@^0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
-  integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
-
-asap@~2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
-  integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
-
-asn1.js@^5.2.0:
-  version "5.4.1"
-  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
-  integrity sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==
-  dependencies:
-    bn.js "^4.0.0"
-    inherits "^2.0.1"
-    minimalistic-assert "^1.0.0"
-    safer-buffer "^2.1.0"
-
-asn1@~0.2.3:
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136"
-  integrity sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==
-  dependencies:
-    safer-buffer "~2.1.0"
-
-assert-plus@1.0.0, assert-plus@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
-  integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
-
-assert@^1.1.1:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/assert/-/assert-1.5.0.tgz#55c109aaf6e0aefdb3dc4b71240c70bf574b18eb"
-  integrity sha512-EDsgawzwoun2CZkCgtxJbv392v4nbk9XDD06zI+kQYoBM/3RBWLlEyJARDOmhAAosBjWACEkKL6S+lIZtcAubA==
-  dependencies:
-    object-assign "^4.1.1"
-    util "0.10.3"
-
-assign-symbols@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
-  integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
-
-astral-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
-  integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
-
-async-each@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
-  integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==
-
-async-limiter@~1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
-  integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
-
-async@^2.6.2:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
-  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
-  dependencies:
-    lodash "^4.17.14"
-
-asynckit@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
-  integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
-
-atob@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
-  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
-
-autoprefixer@^9.8.6:
-  version "9.8.6"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
-  integrity sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==
-  dependencies:
-    browserslist "^4.12.0"
-    caniuse-lite "^1.0.30001109"
-    colorette "^1.2.1"
-    normalize-range "^0.1.2"
-    num2fraction "^1.2.2"
-    postcss "^7.0.32"
-    postcss-value-parser "^4.1.0"
-
-aws-sign2@~0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
-  integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
-
-aws4@^1.8.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
-  integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
-
-babel-eslint@^10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
-  integrity sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@babel/parser" "^7.7.0"
-    "@babel/traverse" "^7.7.0"
-    "@babel/types" "^7.7.0"
-    eslint-visitor-keys "^1.0.0"
-    resolve "^1.12.0"
-
-babel-loader@^8.1.0:
-  version "8.2.2"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.2.tgz#9363ce84c10c9a40e6c753748e1441b60c8a0b81"
-  integrity sha512-JvTd0/D889PQBtUXJ2PXaKU/pjZDMtHA9V2ecm+eNRmmBCMR09a+fmpGTNwnJtFmFl5Ei7Vy47LjBb+L0wQ99g==
-  dependencies:
-    find-cache-dir "^3.3.1"
-    loader-utils "^1.4.0"
-    make-dir "^3.1.0"
-    schema-utils "^2.6.5"
-
-babel-plugin-dynamic-import-node@^2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
-  integrity sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==
-  dependencies:
-    object.assign "^4.1.0"
-
-babel-plugin-polyfill-corejs2@^0.1.4:
-  version "0.1.10"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.1.10.tgz#a2c5c245f56c0cac3dbddbf0726a46b24f0f81d1"
-  integrity sha512-DO95wD4g0A8KRaHKi0D51NdGXzvpqVLnLu5BTvDlpqUEpTmeEtypgC1xqesORaWmiUOQI14UHKlzNd9iZ2G3ZA==
-  dependencies:
-    "@babel/compat-data" "^7.13.0"
-    "@babel/helper-define-polyfill-provider" "^0.1.5"
-    semver "^6.1.1"
-
-babel-plugin-polyfill-corejs3@^0.1.3:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.1.7.tgz#80449d9d6f2274912e05d9e182b54816904befd0"
-  integrity sha512-u+gbS9bbPhZWEeyy1oR/YaaSpod/KDT07arZHb80aTpl8H5ZBq+uN1nN9/xtX7jQyfLdPfoqI4Rue/MQSWJquw==
-  dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.1.5"
-    core-js-compat "^3.8.1"
-
-babel-plugin-polyfill-regenerator@^0.1.2:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.1.6.tgz#0fe06a026fe0faa628ccc8ba3302da0a6ce02f3f"
-  integrity sha512-OUrYG9iKPKz8NxswXbRAdSwF0GhRdIEMTloQATJi4bDuFqrXaXcCUT/VGNrr8pBcjMh1RxZ7Xt9cytVJTJfvMg==
-  dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.1.5"
-
-balanced-match@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
-  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
-
-base64-js@^1.0.2:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
-  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
-
-base@^0.11.1:
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
-  integrity sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==
-  dependencies:
-    cache-base "^1.0.1"
-    class-utils "^0.3.5"
-    component-emitter "^1.2.1"
-    define-property "^1.0.0"
-    isobject "^3.0.1"
-    mixin-deep "^1.2.0"
-    pascalcase "^0.1.1"
-
-batch@0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
-  integrity sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=
-
-bcrypt-pbkdf@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
-  integrity sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=
-  dependencies:
-    tweetnacl "^0.14.3"
-
-bfj@^6.1.1:
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/bfj/-/bfj-6.1.2.tgz#325c861a822bcb358a41c78a33b8e6e2086dde7f"
-  integrity sha512-BmBJa4Lip6BPRINSZ0BPEIfB1wUY/9rwbwvIHQA1KjX9om29B6id0wnWXq7m3bn5JrUVjeOTnVuhPT1FiHwPGw==
-  dependencies:
-    bluebird "^3.5.5"
-    check-types "^8.0.3"
-    hoopy "^0.1.4"
-    tryer "^1.0.1"
-
-big.js@^3.1.3:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
-  integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==
-
-big.js@^5.2.2:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
-  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
-
-binary-extensions@^1.0.0:
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
-  integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
-
-binary-extensions@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
-  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
-
-bindings@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
-  integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
-  dependencies:
-    file-uri-to-path "1.0.0"
-
-bluebird@^3.1.1, bluebird@^3.5.5:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
-  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
-
-bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
-  version "4.12.0"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
-  integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
-
-bn.js@^5.0.0, bn.js@^5.1.1:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.0.tgz#358860674396c6997771a9d051fcc1b57d4ae002"
-  integrity sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==
-
-body-parser@1.19.0:
-  version "1.19.0"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
-  integrity sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==
-  dependencies:
-    bytes "3.1.0"
-    content-type "~1.0.4"
-    debug "2.6.9"
-    depd "~1.1.2"
-    http-errors "1.7.2"
-    iconv-lite "0.4.24"
-    on-finished "~2.3.0"
-    qs "6.7.0"
-    raw-body "2.4.0"
-    type-is "~1.6.17"
-
-bonjour@^3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"
-  integrity sha1-jokKGD2O6aI5OzhExpGkK897yfU=
-  dependencies:
-    array-flatten "^2.1.0"
-    deep-equal "^1.0.1"
-    dns-equal "^1.0.0"
-    dns-txt "^2.0.2"
-    multicast-dns "^6.0.1"
-    multicast-dns-service-types "^1.1.0"
-
-boolbase@^1.0.0, boolbase@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
-  integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
-
-brace-expansion@^1.1.7:
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
-  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
-  dependencies:
-    balanced-match "^1.0.0"
-    concat-map "0.0.1"
-
-braces@^2.3.1, braces@^2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
-  integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==
-  dependencies:
-    arr-flatten "^1.1.0"
-    array-unique "^0.3.2"
-    extend-shallow "^2.0.1"
-    fill-range "^4.0.0"
-    isobject "^3.0.1"
-    repeat-element "^1.1.2"
-    snapdragon "^0.8.1"
-    snapdragon-node "^2.0.1"
-    split-string "^3.0.2"
-    to-regex "^3.0.1"
-
-braces@^3.0.1, braces@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
-  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
-  dependencies:
-    fill-range "^7.0.1"
-
-brorand@^1.0.1, brorand@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
-  integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
-
-browserify-aes@^1.0.0, browserify-aes@^1.0.4:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48"
-  integrity sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==
-  dependencies:
-    buffer-xor "^1.0.3"
-    cipher-base "^1.0.0"
-    create-hash "^1.1.0"
-    evp_bytestokey "^1.0.3"
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
-browserify-cipher@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.1.tgz#8d6474c1b870bfdabcd3bcfcc1934a10e94f15f0"
-  integrity sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==
-  dependencies:
-    browserify-aes "^1.0.4"
-    browserify-des "^1.0.0"
-    evp_bytestokey "^1.0.0"
-
-browserify-des@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.2.tgz#3af4f1f59839403572f1c66204375f7a7f703e9c"
-  integrity sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==
-  dependencies:
-    cipher-base "^1.0.1"
-    des.js "^1.0.0"
-    inherits "^2.0.1"
-    safe-buffer "^5.1.2"
-
-browserify-rsa@^4.0.0, browserify-rsa@^4.0.1:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.1.0.tgz#b2fd06b5b75ae297f7ce2dc651f918f5be158c8d"
-  integrity sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==
-  dependencies:
-    bn.js "^5.0.0"
-    randombytes "^2.0.1"
-
-browserify-sign@^4.0.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.1.tgz#eaf4add46dd54be3bb3b36c0cf15abbeba7956c3"
-  integrity sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==
-  dependencies:
-    bn.js "^5.1.1"
-    browserify-rsa "^4.0.1"
-    create-hash "^1.2.0"
-    create-hmac "^1.1.7"
-    elliptic "^6.5.3"
-    inherits "^2.0.4"
-    parse-asn1 "^5.1.5"
-    readable-stream "^3.6.0"
-    safe-buffer "^5.2.0"
-
-browserify-zlib@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
-  integrity sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==
-  dependencies:
-    pako "~1.0.5"
-
-browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.16.3:
-  version "4.16.3"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.3.tgz#340aa46940d7db878748567c5dea24a48ddf3717"
-  integrity sha512-vIyhWmIkULaq04Gt93txdh+j02yX/JzlyhLYbV3YQCn/zvES3JnY7TifHHvvr1w5hTDluNKMkV05cs4vy8Q7sw==
-  dependencies:
-    caniuse-lite "^1.0.30001181"
-    colorette "^1.2.1"
-    electron-to-chromium "^1.3.649"
-    escalade "^3.1.1"
-    node-releases "^1.1.70"
-
-buffer-from@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
-  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
-
-buffer-indexof@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c"
-  integrity sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==
-
-buffer-json@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/buffer-json/-/buffer-json-2.0.0.tgz#f73e13b1e42f196fe2fd67d001c7d7107edd7c23"
-  integrity sha512-+jjPFVqyfF1esi9fvfUs3NqM0pH1ziZ36VP4hmA/y/Ssfo/5w5xHKfTw9BwQjoJ1w/oVtpLomqwUHKdefGyuHw==
-
-buffer-xor@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
-  integrity sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=
-
-buffer@^4.3.0:
-  version "4.9.2"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.2.tgz#230ead344002988644841ab0244af8c44bbe3ef8"
-  integrity sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==
-  dependencies:
-    base64-js "^1.0.2"
-    ieee754 "^1.1.4"
-    isarray "^1.0.0"
-
-builtin-status-codes@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
-  integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
-
-bytes@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
-  integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
-
-bytes@3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
-  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
-
-cacache@^12.0.2, cacache@^12.0.3:
-  version "12.0.4"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.4.tgz#668bcbd105aeb5f1d92fe25570ec9525c8faa40c"
-  integrity sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==
-  dependencies:
-    bluebird "^3.5.5"
-    chownr "^1.1.1"
-    figgy-pudding "^3.5.1"
-    glob "^7.1.4"
-    graceful-fs "^4.1.15"
-    infer-owner "^1.0.3"
-    lru-cache "^5.1.1"
-    mississippi "^3.0.0"
-    mkdirp "^0.5.1"
-    move-concurrently "^1.0.1"
-    promise-inflight "^1.0.1"
-    rimraf "^2.6.3"
-    ssri "^6.0.1"
-    unique-filename "^1.1.1"
-    y18n "^4.0.0"
-
-cacache@^13.0.1:
-  version "13.0.1"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-13.0.1.tgz#a8000c21697089082f85287a1aec6e382024a71c"
-  integrity sha512-5ZvAxd05HDDU+y9BVvcqYu2LLXmPnQ0hW62h32g4xBTgL/MppR4/04NHfj/ycM2y6lmTnbw6HVi+1eN0Psba6w==
-  dependencies:
-    chownr "^1.1.2"
-    figgy-pudding "^3.5.1"
-    fs-minipass "^2.0.0"
-    glob "^7.1.4"
-    graceful-fs "^4.2.2"
-    infer-owner "^1.0.4"
-    lru-cache "^5.1.1"
-    minipass "^3.0.0"
-    minipass-collect "^1.0.2"
-    minipass-flush "^1.0.5"
-    minipass-pipeline "^1.2.2"
-    mkdirp "^0.5.1"
-    move-concurrently "^1.0.1"
-    p-map "^3.0.0"
-    promise-inflight "^1.0.1"
-    rimraf "^2.7.1"
-    ssri "^7.0.0"
-    unique-filename "^1.1.1"
-
-cache-base@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
-  integrity sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==
-  dependencies:
-    collection-visit "^1.0.0"
-    component-emitter "^1.2.1"
-    get-value "^2.0.6"
-    has-value "^1.0.0"
-    isobject "^3.0.1"
-    set-value "^2.0.0"
-    to-object-path "^0.3.0"
-    union-value "^1.0.0"
-    unset-value "^1.0.0"
-
-cache-loader@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/cache-loader/-/cache-loader-4.1.0.tgz#9948cae353aec0a1fcb1eafda2300816ec85387e"
-  integrity sha512-ftOayxve0PwKzBF/GLsZNC9fJBXl8lkZE3TOsjkboHfVHVkL39iUEs1FO07A33mizmci5Dudt38UZrrYXDtbhw==
-  dependencies:
-    buffer-json "^2.0.0"
-    find-cache-dir "^3.0.0"
-    loader-utils "^1.2.3"
-    mkdirp "^0.5.1"
-    neo-async "^2.6.1"
-    schema-utils "^2.0.0"
-
-call-bind@^1.0.0, call-bind@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
-  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
-  dependencies:
-    function-bind "^1.1.1"
-    get-intrinsic "^1.0.2"
-
-call-me-maybe@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b"
-  integrity sha1-JtII6onje1y95gJQoV8DHBak1ms=
-
-caller-callsite@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
-  integrity sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=
-  dependencies:
-    callsites "^2.0.0"
-
-caller-path@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-2.0.0.tgz#468f83044e369ab2010fac5f06ceee15bb2cb1f4"
-  integrity sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=
-  dependencies:
-    caller-callsite "^2.0.0"
-
-callsite@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
-  integrity sha1-KAOY5dZkvXQDi28JBRU+borxvCA=
-
-callsites@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
-  integrity sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=
-
-callsites@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
-  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
-
-camel-case@3.0.x:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
-  integrity sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=
-  dependencies:
-    no-case "^2.2.0"
-    upper-case "^1.1.1"
-
-camelcase@^5.0.0, camelcase@^5.3.1:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
-  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
-
-camelcase@^6.0.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
-  integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
-
-caniuse-api@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
-  integrity sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==
-  dependencies:
-    browserslist "^4.0.0"
-    caniuse-lite "^1.0.0"
-    lodash.memoize "^4.1.2"
-    lodash.uniq "^4.5.0"
-
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001181:
-  version "1.0.30001204"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001204.tgz#256c85709a348ec4d175e847a3b515c66e79f2aa"
-  integrity sha512-JUdjWpcxfJ9IPamy2f5JaRDCaqJOxDzOSKtbdx4rH9VivMd1vIzoPumsJa9LoMIi4Fx2BV2KZOxWhNkBjaYivQ==
-
-case-sensitive-paths-webpack-plugin@^2.3.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"
-  integrity sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==
-
-caseless@~0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
-  integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
-
-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
-  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
-chalk@^4.0.0, chalk@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
-  integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
-chardet@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
-  integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
-
-check-types@^8.0.3:
-  version "8.0.3"
-  resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"
-  integrity sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==
-
-"chokidar@>=2.0.0 <4.0.0", chokidar@^3.4.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
-  integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==
-  dependencies:
-    anymatch "~3.1.1"
-    braces "~3.0.2"
-    glob-parent "~5.1.0"
-    is-binary-path "~2.1.0"
-    is-glob "~4.0.1"
-    normalize-path "~3.0.0"
-    readdirp "~3.5.0"
-  optionalDependencies:
-    fsevents "~2.3.1"
-
-chokidar@^2.1.8:
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
-  integrity sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==
-  dependencies:
-    anymatch "^2.0.0"
-    async-each "^1.0.1"
-    braces "^2.3.2"
-    glob-parent "^3.1.0"
-    inherits "^2.0.3"
-    is-binary-path "^1.0.0"
-    is-glob "^4.0.0"
-    normalize-path "^3.0.0"
-    path-is-absolute "^1.0.0"
-    readdirp "^2.2.1"
-    upath "^1.1.1"
-  optionalDependencies:
-    fsevents "^1.2.7"
-
-chownr@^1.1.1, chownr@^1.1.2:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
-  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
-
-chrome-trace-event@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
-  integrity sha512-9e/zx1jw7B4CO+c/RXoCsfg/x1AfUBioy4owYH0bJprEYAx5hRFLRhWBqHAG57D0ZM4H7vxbP7bPe0VwhQRYDQ==
-  dependencies:
-    tslib "^1.9.0"
-
-ci-info@^1.5.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.6.0.tgz#2ca20dbb9ceb32d4524a683303313f0304b1e497"
-  integrity sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A==
-
-cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
-  integrity sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==
-  dependencies:
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
-class-utils@^0.3.5:
-  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
-  integrity sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==
-  dependencies:
-    arr-union "^3.1.0"
-    define-property "^0.2.5"
-    isobject "^3.0.0"
-    static-extend "^0.1.1"
-
-clean-css@4.2.x:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
-  integrity sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==
-  dependencies:
-    source-map "~0.6.0"
-
-clean-stack@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
-  integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
-
-cli-cursor@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
-  integrity sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=
-  dependencies:
-    restore-cursor "^2.0.0"
-
-cli-cursor@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
-  integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==
-  dependencies:
-    restore-cursor "^3.1.0"
-
-cli-highlight@^2.1.4:
-  version "2.1.10"
-  resolved "https://registry.yarnpkg.com/cli-highlight/-/cli-highlight-2.1.10.tgz#26a087da9209dce4fcb8cf5427dc97cd96ac173a"
-  integrity sha512-CcPFD3JwdQ2oSzy+AMG6j3LRTkNjM82kzcSKzoVw6cLanDCJNlsLjeqVTOTfOfucnWv5F0rmBemVf1m9JiIasw==
-  dependencies:
-    chalk "^4.0.0"
-    highlight.js "^10.0.0"
-    mz "^2.4.0"
-    parse5 "^5.1.1"
-    parse5-htmlparser2-tree-adapter "^6.0.0"
-    yargs "^16.0.0"
-
-cli-spinners@^2.0.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.6.0.tgz#36c7dc98fb6a9a76bd6238ec3f77e2425627e939"
-  integrity sha512-t+4/y50K/+4xcCRosKkA7W4gTr1MySvLV0q+PxmG7FJ5g+66ChKurYjxBCjHggHH3HA5Hh9cy+lcUGWDqVH+4Q==
-
-cli-width@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
-  integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
-
-clipboardy@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-2.3.0.tgz#3c2903650c68e46a91b388985bc2774287dba290"
-  integrity sha512-mKhiIL2DrQIsuXMgBgnfEHOZOryC7kY7YO//TN6c63wlEm3NG5tz+YgY5rVi29KCmq/QQjKYvM7a19+MDOTHOQ==
-  dependencies:
-    arch "^2.1.1"
-    execa "^1.0.0"
-    is-wsl "^2.1.1"
-
-cliui@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
-  integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==
-  dependencies:
-    string-width "^3.1.0"
-    strip-ansi "^5.2.0"
-    wrap-ansi "^5.1.0"
-
-cliui@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
-  integrity sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==
-  dependencies:
-    string-width "^4.2.0"
-    strip-ansi "^6.0.0"
-    wrap-ansi "^6.2.0"
-
-cliui@^7.0.2:
-  version "7.0.4"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
-  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
-  dependencies:
-    string-width "^4.2.0"
-    strip-ansi "^6.0.0"
-    wrap-ansi "^7.0.0"
-
-clone-deep@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
-  integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==
-  dependencies:
-    is-plain-object "^2.0.4"
-    kind-of "^6.0.2"
-    shallow-clone "^3.0.0"
-
-clone@^1.0.2:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
-  integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
-
-coa@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
-  integrity sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==
-  dependencies:
-    "@types/q" "^1.5.1"
-    chalk "^2.4.1"
-    q "^1.1.2"
-
-collection-visit@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
-  integrity sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=
-  dependencies:
-    map-visit "^1.0.0"
-    object-visit "^1.0.0"
-
-color-convert@^1.9.0, color-convert@^1.9.1:
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
-  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
-  dependencies:
-    color-name "1.1.3"
-
-color-convert@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
-  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
-  dependencies:
-    color-name "~1.1.4"
-
-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
-  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
-
-color-name@^1.0.0, color-name@~1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
-  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-
-color-string@^1.5.4:
-  version "1.5.5"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.5.tgz#65474a8f0e7439625f3d27a6a19d89fc45223014"
-  integrity sha512-jgIoum0OfQfq9Whcfc2z/VhCNcmQjWbey6qBX0vqt7YICflUmBCh9E9CiQD5GSJ+Uehixm3NUwHVhqUAWRivZg==
-  dependencies:
-    color-name "^1.0.0"
-    simple-swizzle "^0.2.2"
-
-color@^3.0.0:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e"
-  integrity sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==
-  dependencies:
-    color-convert "^1.9.1"
-    color-string "^1.5.4"
-
-colorette@^1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
-  integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
-
-combined-stream@^1.0.6, combined-stream@~1.0.6:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
-  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
-  dependencies:
-    delayed-stream "~1.0.0"
-
-commander@2.17.x:
-  version "2.17.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
-  integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
-
-commander@^2.18.0, commander@^2.20.0:
-  version "2.20.3"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
-  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
-
-commander@~2.19.0:
-  version "2.19.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
-  integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
-
-commondir@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
-  integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
-
-component-emitter@^1.2.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
-  integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
-
-compressible@~2.0.16:
-  version "2.0.18"
-  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
-  integrity sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==
-  dependencies:
-    mime-db ">= 1.43.0 < 2"
-
-compression@^1.7.4:
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.4.tgz#95523eff170ca57c29a0ca41e6fe131f41e5bb8f"
-  integrity sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==
-  dependencies:
-    accepts "~1.3.5"
-    bytes "3.0.0"
-    compressible "~2.0.16"
-    debug "2.6.9"
-    on-headers "~1.0.2"
-    safe-buffer "5.1.2"
-    vary "~1.1.2"
-
-concat-map@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
-  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
-
-concat-stream@^1.5.0:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
-  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
-  dependencies:
-    buffer-from "^1.0.0"
-    inherits "^2.0.3"
-    readable-stream "^2.2.2"
-    typedarray "^0.0.6"
-
-connect-history-api-fallback@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
-  integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==
-
-console-browserify@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
-  integrity sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==
-
-consolidate@^0.15.1:
-  version "0.15.1"
-  resolved "https://registry.yarnpkg.com/consolidate/-/consolidate-0.15.1.tgz#21ab043235c71a07d45d9aad98593b0dba56bab7"
-  integrity sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==
-  dependencies:
-    bluebird "^3.1.1"
-
-constants-browserify@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
-  integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
-
-content-disposition@0.5.3:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
-  integrity sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==
-  dependencies:
-    safe-buffer "5.1.2"
-
-content-type@~1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
-  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
-
-convert-source-map@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
-  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
-  dependencies:
-    safe-buffer "~5.1.1"
-
-cookie-signature@1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
-  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
-
-cookie@0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
-  integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
-
-copy-concurrently@^1.0.0:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
-  integrity sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==
-  dependencies:
-    aproba "^1.1.1"
-    fs-write-stream-atomic "^1.0.8"
-    iferr "^0.1.5"
-    mkdirp "^0.5.1"
-    rimraf "^2.5.4"
-    run-queue "^1.0.0"
-
-copy-descriptor@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
-  integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
-
-copy-webpack-plugin@^5.1.1:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-5.1.2.tgz#8a889e1dcafa6c91c6cd4be1ad158f1d3823bae2"
-  integrity sha512-Uh7crJAco3AjBvgAy9Z75CjK8IG+gxaErro71THQ+vv/bl4HaQcpkexAY8KVW/T6D2W2IRr+couF/knIRkZMIQ==
-  dependencies:
-    cacache "^12.0.3"
-    find-cache-dir "^2.1.0"
-    glob-parent "^3.1.0"
-    globby "^7.1.1"
-    is-glob "^4.0.1"
-    loader-utils "^1.2.3"
-    minimatch "^3.0.4"
-    normalize-path "^3.0.0"
-    p-limit "^2.2.1"
-    schema-utils "^1.0.0"
-    serialize-javascript "^4.0.0"
-    webpack-log "^2.0.0"
-
-core-js-compat@^3.6.5, core-js-compat@^3.8.1, core-js-compat@^3.9.0:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.9.1.tgz#4e572acfe90aff69d76d8c37759d21a5c59bb455"
-  integrity sha512-jXAirMQxrkbiiLsCx9bQPJFA6llDadKMpYrBJQJ3/c4/vsPP/fAf29h24tviRlvwUL6AmY5CHLu2GvjuYviQqA==
-  dependencies:
-    browserslist "^4.16.3"
-    semver "7.0.0"
-
-core-js@^3.6.5:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.9.1.tgz#cec8de593db8eb2a85ffb0dbdeb312cb6e5460ae"
-  integrity sha512-gSjRvzkxQc1zjM/5paAmL4idJBFzuJoo+jDjF1tStYFMV2ERfD02HhahhCGXUyHxQRG4yFKVSdO6g62eoRMcDg==
-
-core-util-is@1.0.2, core-util-is@~1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
-  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
-
-cosmiconfig@^5.0.0:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
-  integrity sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==
-  dependencies:
-    import-fresh "^2.0.0"
-    is-directory "^0.3.1"
-    js-yaml "^3.13.1"
-    parse-json "^4.0.0"
-
-create-ecdh@^4.0.0:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
-  integrity sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==
-  dependencies:
-    bn.js "^4.1.0"
-    elliptic "^6.5.3"
-
-create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
-  integrity sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==
-  dependencies:
-    cipher-base "^1.0.1"
-    inherits "^2.0.1"
-    md5.js "^1.3.4"
-    ripemd160 "^2.0.1"
-    sha.js "^2.4.0"
-
-create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.7.tgz#69170c78b3ab957147b2b8b04572e47ead2243ff"
-  integrity sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==
-  dependencies:
-    cipher-base "^1.0.3"
-    create-hash "^1.1.0"
-    inherits "^2.0.1"
-    ripemd160 "^2.0.0"
-    safe-buffer "^5.0.1"
-    sha.js "^2.4.8"
-
-cross-spawn@^5.0.1:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
-  integrity sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=
-  dependencies:
-    lru-cache "^4.0.1"
-    shebang-command "^1.2.0"
-    which "^1.2.9"
-
-cross-spawn@^6.0.0, cross-spawn@^6.0.5:
-  version "6.0.5"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
-  integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
-  dependencies:
-    nice-try "^1.0.4"
-    path-key "^2.0.1"
-    semver "^5.5.0"
-    shebang-command "^1.2.0"
-    which "^1.2.9"
-
-cross-spawn@^7.0.0:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
-  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
-  dependencies:
-    path-key "^3.1.0"
-    shebang-command "^2.0.0"
-    which "^2.0.1"
-
-crypto-browserify@^3.11.0:
-  version "3.12.0"
-  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
-  integrity sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==
-  dependencies:
-    browserify-cipher "^1.0.0"
-    browserify-sign "^4.0.0"
-    create-ecdh "^4.0.0"
-    create-hash "^1.1.0"
-    create-hmac "^1.1.0"
-    diffie-hellman "^5.0.0"
-    inherits "^2.0.1"
-    pbkdf2 "^3.0.3"
-    public-encrypt "^4.0.0"
-    randombytes "^2.0.0"
-    randomfill "^1.0.3"
-
-css-color-names@0.0.4, css-color-names@^0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
-  integrity sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=
-
-css-declaration-sorter@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-4.0.1.tgz#c198940f63a76d7e36c1e71018b001721054cb22"
-  integrity sha512-BcxQSKTSEEQUftYpBVnsH4SF05NTuBokb19/sBt6asXGKZ/6VP7PLG1CBCkFDYOnhXhPh0jMhO6xZ71oYHXHBA==
-  dependencies:
-    postcss "^7.0.1"
-    timsort "^0.3.0"
-
-css-loader@^3.5.3:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.6.0.tgz#2e4b2c7e6e2d27f8c8f28f61bffcd2e6c91ef645"
-  integrity sha512-M5lSukoWi1If8dhQAUCvj4H8vUt3vOnwbQBH9DdTm/s4Ym2B/3dPMtYZeJmq7Q3S3Pa+I94DcZ7pc9bP14cWIQ==
-  dependencies:
-    camelcase "^5.3.1"
-    cssesc "^3.0.0"
-    icss-utils "^4.1.1"
-    loader-utils "^1.2.3"
-    normalize-path "^3.0.0"
-    postcss "^7.0.32"
-    postcss-modules-extract-imports "^2.0.0"
-    postcss-modules-local-by-default "^3.0.2"
-    postcss-modules-scope "^2.2.0"
-    postcss-modules-values "^3.0.0"
-    postcss-value-parser "^4.1.0"
-    schema-utils "^2.7.0"
-    semver "^6.3.0"
-
-css-select-base-adapter@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
-  integrity sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==
-
-css-select@^2.0.0, css-select@^2.0.2:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.1.0.tgz#6a34653356635934a81baca68d0255432105dbef"
-  integrity sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==
-  dependencies:
-    boolbase "^1.0.0"
-    css-what "^3.2.1"
-    domutils "^1.7.0"
-    nth-check "^1.0.2"
-
-css-tree@1.0.0-alpha.37:
-  version "1.0.0-alpha.37"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
-  integrity sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==
-  dependencies:
-    mdn-data "2.0.4"
-    source-map "^0.6.1"
-
-css-tree@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.2.tgz#9ae393b5dafd7dae8a622475caec78d3d8fbd7b5"
-  integrity sha512-wCoWush5Aeo48GLhfHPbmvZs59Z+M7k5+B1xDnXbdWNcEF423DoFdqSWE0PM5aNk5nI5cp1q7ms36zGApY/sKQ==
-  dependencies:
-    mdn-data "2.0.14"
-    source-map "^0.6.1"
-
-css-what@^3.2.1:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
-  integrity sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==
-
-cssesc@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
-  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
-
-cssnano-preset-default@^4.0.0, cssnano-preset-default@^4.0.7:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz#51ec662ccfca0f88b396dcd9679cdb931be17f76"
-  integrity sha512-x0YHHx2h6p0fCl1zY9L9roD7rnlltugGu7zXSKQx6k2rYw0Hi3IqxcoAGF7u9Q5w1nt7vK0ulxV8Lo+EvllGsA==
-  dependencies:
-    css-declaration-sorter "^4.0.1"
-    cssnano-util-raw-cache "^4.0.1"
-    postcss "^7.0.0"
-    postcss-calc "^7.0.1"
-    postcss-colormin "^4.0.3"
-    postcss-convert-values "^4.0.1"
-    postcss-discard-comments "^4.0.2"
-    postcss-discard-duplicates "^4.0.2"
-    postcss-discard-empty "^4.0.1"
-    postcss-discard-overridden "^4.0.1"
-    postcss-merge-longhand "^4.0.11"
-    postcss-merge-rules "^4.0.3"
-    postcss-minify-font-values "^4.0.2"
-    postcss-minify-gradients "^4.0.2"
-    postcss-minify-params "^4.0.2"
-    postcss-minify-selectors "^4.0.2"
-    postcss-normalize-charset "^4.0.1"
-    postcss-normalize-display-values "^4.0.2"
-    postcss-normalize-positions "^4.0.2"
-    postcss-normalize-repeat-style "^4.0.2"
-    postcss-normalize-string "^4.0.2"
-    postcss-normalize-timing-functions "^4.0.2"
-    postcss-normalize-unicode "^4.0.1"
-    postcss-normalize-url "^4.0.1"
-    postcss-normalize-whitespace "^4.0.2"
-    postcss-ordered-values "^4.1.2"
-    postcss-reduce-initial "^4.0.3"
-    postcss-reduce-transforms "^4.0.2"
-    postcss-svgo "^4.0.2"
-    postcss-unique-selectors "^4.0.1"
-
-cssnano-util-get-arguments@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz#ed3a08299f21d75741b20f3b81f194ed49cc150f"
-  integrity sha1-7ToIKZ8h11dBsg87gfGU7UnMFQ8=
-
-cssnano-util-get-match@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0.tgz#c0e4ca07f5386bb17ec5e52250b4f5961365156d"
-  integrity sha1-wOTKB/U4a7F+xeUiULT1lhNlFW0=
-
-cssnano-util-raw-cache@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/cssnano-util-raw-cache/-/cssnano-util-raw-cache-4.0.1.tgz#b26d5fd5f72a11dfe7a7846fb4c67260f96bf282"
-  integrity sha512-qLuYtWK2b2Dy55I8ZX3ky1Z16WYsx544Q0UWViebptpwn/xDBmog2TLg4f+DBMg1rJ6JDWtn96WHbOKDWt1WQA==
-  dependencies:
-    postcss "^7.0.0"
-
-cssnano-util-same-parent@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz#574082fb2859d2db433855835d9a8456ea18bbf3"
-  integrity sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==
-
-cssnano@^4.0.0, cssnano@^4.1.10:
-  version "4.1.10"
-  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.10.tgz#0ac41f0b13d13d465487e111b778d42da631b8b2"
-  integrity sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ==
-  dependencies:
-    cosmiconfig "^5.0.0"
-    cssnano-preset-default "^4.0.7"
-    is-resolvable "^1.0.0"
-    postcss "^7.0.0"
-
-csso@^4.0.2:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
-  integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
-  dependencies:
-    css-tree "^1.1.2"
-
-cyclist@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
-  integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
-
-dashdash@^1.12.0:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
-  integrity sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=
-  dependencies:
-    assert-plus "^1.0.0"
-
-de-indent@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
-  integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
-
-debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
-  version "2.6.9"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
-  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
-  dependencies:
-    ms "2.0.0"
-
-debug@^3.1.1, debug@^3.2.6:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
-  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
-  dependencies:
-    ms "^2.1.1"
-
-debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
-  integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==
-  dependencies:
-    ms "2.1.2"
-
-decache@^4.6.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/decache/-/decache-4.6.0.tgz#87026bc6e696759e82d57a3841c4e251a30356e8"
-  integrity sha512-PppOuLiz+DFeaUvFXEYZjLxAkKiMYH/do/b/MxpDe/8AgKBi5GhZxridoVIbBq72GDbL36e4p0Ce2jTGUwwU+w==
-  dependencies:
-    callsite "^1.0.0"
-
-decamelize@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
-  integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
-
-decode-uri-component@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
-  integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
-
-deep-equal@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
-  integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
-  dependencies:
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.1"
-    is-regex "^1.0.4"
-    object-is "^1.0.1"
-    object-keys "^1.1.1"
-    regexp.prototype.flags "^1.2.0"
-
-deep-is@~0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
-  integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
-
-deepmerge@^1.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
-  integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
-
-default-gateway@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
-  integrity sha512-h6sMrVB1VMWVrW13mSc6ia/DwYYw5MN6+exNu1OaJeFac5aSAvwM7lZ0NVfTABuSkQelr4h5oebg3KB1XPdjgA==
-  dependencies:
-    execa "^1.0.0"
-    ip-regex "^2.1.0"
-
-default-gateway@^5.0.5:
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-5.0.5.tgz#4fd6bd5d2855d39b34cc5a59505486e9aafc9b10"
-  integrity sha512-z2RnruVmj8hVMmAnEJMTIJNijhKCDiGjbLP+BHJFOT7ld3Bo5qcIBpVYDniqhbMIIf+jZDlkP2MkPXiQy/DBLA==
-  dependencies:
-    execa "^3.3.0"
-
-defaults@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
-  integrity sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=
-  dependencies:
-    clone "^1.0.2"
-
-define-properties@^1.1.2, define-properties@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
-  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
-  dependencies:
-    object-keys "^1.0.12"
-
-define-property@^0.2.5:
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
-  integrity sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=
-  dependencies:
-    is-descriptor "^0.1.0"
-
-define-property@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
-  integrity sha1-dp66rz9KY6rTr56NMEybvnm/sOY=
-  dependencies:
-    is-descriptor "^1.0.0"
-
-define-property@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
-  integrity sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==
-  dependencies:
-    is-descriptor "^1.0.2"
-    isobject "^3.0.1"
-
-del@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/del/-/del-4.1.1.tgz#9e8f117222ea44a31ff3a156c049b99052a9f0b4"
-  integrity sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==
-  dependencies:
-    "@types/glob" "^7.1.1"
-    globby "^6.1.0"
-    is-path-cwd "^2.0.0"
-    is-path-in-cwd "^2.0.0"
-    p-map "^2.0.0"
-    pify "^4.0.1"
-    rimraf "^2.6.3"
-
-delayed-stream@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
-  integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
-
-depd@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
-  integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
-
-des.js@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
-  integrity sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3ApoppinsEA==
-  dependencies:
-    inherits "^2.0.1"
-    minimalistic-assert "^1.0.0"
-
-destroy@~1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
-  integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
-
-detect-node@^2.0.4:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.5.tgz#9d270aa7eaa5af0b72c4c9d9b814e7f4ce738b79"
-  integrity sha512-qi86tE6hRcFHy8jI1m2VG+LaPUR1LhqDa5G8tVjuUXmOrpuAgqsA1pN0+ldgr3aKUH+QLI9hCY/OcRYisERejw==
-
-diffie-hellman@^5.0.0:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
-  integrity sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==
-  dependencies:
-    bn.js "^4.1.0"
-    miller-rabin "^4.0.0"
-    randombytes "^2.0.0"
-
-dir-glob@^2.0.0, dir-glob@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.2.2.tgz#fa09f0694153c8918b18ba0deafae94769fc50c4"
-  integrity sha512-f9LBi5QWzIW3I6e//uxZoLBlUt9kcp66qo0sSCxL6YZKc75R1c4MFCoe/LaZiBGmgujvQdxc5Bn3QhfyvK5Hsw==
-  dependencies:
-    path-type "^3.0.0"
-
-dns-equal@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
-  integrity sha1-s55/HabrCnW6nBcySzR1PEfgZU0=
-
-dns-packet@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.1.tgz#12aa426981075be500b910eedcd0b47dd7deda5a"
-  integrity sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==
-  dependencies:
-    ip "^1.1.0"
-    safe-buffer "^5.0.1"
-
-dns-txt@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/dns-txt/-/dns-txt-2.0.2.tgz#b91d806f5d27188e4ab3e7d107d881a1cc4642b6"
-  integrity sha1-uR2Ab10nGI5Ks+fRB9iBocxGQrY=
-  dependencies:
-    buffer-indexof "^1.0.0"
-
-doctrine@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
-  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
-  dependencies:
-    esutils "^2.0.2"
-
-dom-converter@^0.2:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
-  integrity sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==
-  dependencies:
-    utila "~0.4"
-
-dom-serializer@0:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
-  integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
-  dependencies:
-    domelementtype "^2.0.1"
-    entities "^2.0.0"
-
-domain-browser@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
-  integrity sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==
-
-domelementtype@1, domelementtype@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
-  integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
-
-domelementtype@^2.0.1:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.1.0.tgz#a851c080a6d1c3d94344aed151d99f669edf585e"
-  integrity sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w==
-
-domhandler@^2.3.0:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
-  integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==
-  dependencies:
-    domelementtype "1"
-
-domutils@^1.5.1, domutils@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
-  integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
-  dependencies:
-    dom-serializer "0"
-    domelementtype "1"
-
-dot-prop@^5.2.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
-  integrity sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==
-  dependencies:
-    is-obj "^2.0.0"
-
-dotenv-expand@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
-  integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
-
-dotenv@^8.2.0:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
-  integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
-
-duplexer@^0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
-  integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
-
-duplexify@^3.4.2, duplexify@^3.6.0:
-  version "3.7.1"
-  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"
-  integrity sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==
-  dependencies:
-    end-of-stream "^1.0.0"
-    inherits "^2.0.1"
-    readable-stream "^2.0.0"
-    stream-shift "^1.0.0"
-
-easy-stack@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/easy-stack/-/easy-stack-1.0.1.tgz#8afe4264626988cabb11f3c704ccd0c835411066"
-  integrity sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==
-
-ecc-jsbn@~0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
-  integrity sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=
-  dependencies:
-    jsbn "~0.1.0"
-    safer-buffer "^2.1.0"
-
-ee-first@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
-  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
-
-ejs@^2.6.1:
-  version "2.7.4"
-  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
-  integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
-
-electron-to-chromium@^1.3.649:
-  version "1.3.699"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.699.tgz#854eea9db8bc8109c409a4807bfdb200dd75a2c7"
-  integrity sha512-fjt43CPXdPYwD9ybmKbNeLwZBmCVdLY2J5fGZub7/eMPuiqQznOGNXv/wurnpXIlE7ScHnvG9Zi+H4/i6uMKmw==
-
-elliptic@^6.5.3:
-  version "6.5.4"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
-  integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
-  dependencies:
-    bn.js "^4.11.9"
-    brorand "^1.1.0"
-    hash.js "^1.0.0"
-    hmac-drbg "^1.0.1"
-    inherits "^2.0.4"
-    minimalistic-assert "^1.0.1"
-    minimalistic-crypto-utils "^1.0.1"
-
-emoji-regex@^7.0.1:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
-  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
-
-emoji-regex@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
-  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
-
-emojis-list@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
-  integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
-
-emojis-list@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
-  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
-
-encodeurl@~1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
-  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
-
-end-of-stream@^1.0.0, end-of-stream@^1.1.0:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
-  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
-  dependencies:
-    once "^1.4.0"
-
-enhanced-resolve@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz#2f3cfd84dbe3b487f18f2db2ef1e064a571ca5ec"
-  integrity sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==
-  dependencies:
-    graceful-fs "^4.1.2"
-    memory-fs "^0.5.0"
-    tapable "^1.0.0"
-
-entities@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
-  integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
-
-entities@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
-  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
-
-errno@^0.1.3, errno@~0.1.7:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
-  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
-  dependencies:
-    prr "~1.0.1"
-
-error-ex@^1.3.1:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
-  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
-  dependencies:
-    is-arrayish "^0.2.1"
-
-error-stack-parser@^2.0.2:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.6.tgz#5a99a707bd7a4c58a797902d48d82803ede6aad8"
-  integrity sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==
-  dependencies:
-    stackframe "^1.1.1"
-
-es-abstract@^1.17.2, es-abstract@^1.18.0-next.2:
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0.tgz#ab80b359eecb7ede4c298000390bc5ac3ec7b5a4"
-  integrity sha512-LJzK7MrQa8TS0ja2w3YNLzUgJCGPdPOV1yVvezjNnS89D+VR08+Szt2mz3YB2Dck/+w5tfIq/RoUAFqJJGM2yw==
-  dependencies:
-    call-bind "^1.0.2"
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    get-intrinsic "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.2"
-    is-callable "^1.2.3"
-    is-negative-zero "^2.0.1"
-    is-regex "^1.1.2"
-    is-string "^1.0.5"
-    object-inspect "^1.9.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.2"
-    string.prototype.trimend "^1.0.4"
-    string.prototype.trimstart "^1.0.4"
-    unbox-primitive "^1.0.0"
-
-es-to-primitive@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
-  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
-  dependencies:
-    is-callable "^1.1.4"
-    is-date-object "^1.0.1"
-    is-symbol "^1.0.2"
-
-escalade@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
-  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
-
-escape-html@~1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
-  integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
-
-escape-string-regexp@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
-  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
-
-eslint-loader@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-2.2.1.tgz#28b9c12da54057af0845e2a6112701a2f6bf8337"
-  integrity sha512-RLgV9hoCVsMLvOxCuNjdqOrUqIj9oJg8hF44vzJaYqsAHuY9G2YAeN3joQ9nxP0p5Th9iFSIpKo+SD8KISxXRg==
-  dependencies:
-    loader-fs-cache "^1.0.0"
-    loader-utils "^1.0.2"
-    object-assign "^4.0.1"
-    object-hash "^1.1.4"
-    rimraf "^2.6.1"
-
-eslint-plugin-vue@^6.2.2:
-  version "6.2.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-6.2.2.tgz#27fecd9a3a24789b0f111ecdd540a9e56198e0fe"
-  integrity sha512-Nhc+oVAHm0uz/PkJAWscwIT4ijTrK5fqNqz9QB1D35SbbuMG1uB6Yr5AJpvPSWg+WOw7nYNswerYh0kOk64gqQ==
-  dependencies:
-    natural-compare "^1.4.0"
-    semver "^5.6.0"
-    vue-eslint-parser "^7.0.0"
-
-eslint-scope@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848"
-  integrity sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==
-  dependencies:
-    esrecurse "^4.1.0"
-    estraverse "^4.1.1"
-
-eslint-scope@^5.0.0:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
-  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
-  dependencies:
-    esrecurse "^4.3.0"
-    estraverse "^4.1.1"
-
-eslint-utils@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
-  integrity sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==
-  dependencies:
-    eslint-visitor-keys "^1.1.0"
-
-eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
-  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
-
-eslint@^6.8.0:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.8.0.tgz#62262d6729739f9275723824302fb227c8c93ffb"
-  integrity sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    ajv "^6.10.0"
-    chalk "^2.1.0"
-    cross-spawn "^6.0.5"
-    debug "^4.0.1"
-    doctrine "^3.0.0"
-    eslint-scope "^5.0.0"
-    eslint-utils "^1.4.3"
-    eslint-visitor-keys "^1.1.0"
-    espree "^6.1.2"
-    esquery "^1.0.1"
-    esutils "^2.0.2"
-    file-entry-cache "^5.0.1"
-    functional-red-black-tree "^1.0.1"
-    glob-parent "^5.0.0"
-    globals "^12.1.0"
-    ignore "^4.0.6"
-    import-fresh "^3.0.0"
-    imurmurhash "^0.1.4"
-    inquirer "^7.0.0"
-    is-glob "^4.0.0"
-    js-yaml "^3.13.1"
-    json-stable-stringify-without-jsonify "^1.0.1"
-    levn "^0.3.0"
-    lodash "^4.17.14"
-    minimatch "^3.0.4"
-    mkdirp "^0.5.1"
-    natural-compare "^1.4.0"
-    optionator "^0.8.3"
-    progress "^2.0.0"
-    regexpp "^2.0.1"
-    semver "^6.1.2"
-    strip-ansi "^5.2.0"
-    strip-json-comments "^3.0.1"
-    table "^5.2.3"
-    text-table "^0.2.0"
-    v8-compile-cache "^2.0.3"
-
-espree@^6.1.2, espree@^6.2.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
-  integrity sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==
-  dependencies:
-    acorn "^7.1.1"
-    acorn-jsx "^5.2.0"
-    eslint-visitor-keys "^1.1.0"
-
-esprima@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
-  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
-
-esquery@^1.0.1, esquery@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
-  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
-  dependencies:
-    estraverse "^5.1.0"
-
-esrecurse@^4.1.0, esrecurse@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
-  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
-  dependencies:
-    estraverse "^5.2.0"
-
-estraverse@^4.1.1:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
-  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
-
-estraverse@^5.1.0, estraverse@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
-  integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
-
-esutils@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
-  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
-
-etag@~1.8.1:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
-  integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
-
-event-pubsub@4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/event-pubsub/-/event-pubsub-4.3.0.tgz#f68d816bc29f1ec02c539dc58c8dd40ce72cb36e"
-  integrity sha512-z7IyloorXvKbFx9Bpie2+vMJKKx1fH1EN5yiTfp8CiLOTptSYy1g8H4yDpGlEdshL1PBiFtBHepF2cNsqeEeFQ==
-
-eventemitter3@^4.0.0:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
-  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
-
-events@^3.0.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
-  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
-
-eventsource@^1.0.7:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-1.1.0.tgz#00e8ca7c92109e94b0ddf32dac677d841028cfaf"
-  integrity sha512-VSJjT5oCNrFvCS6igjzPAt5hBzQ2qPBFIbJ03zLI9SE0mxwZpMw6BfJrbFHm1a141AavMEB8JHmBhWAd66PfCg==
-  dependencies:
-    original "^1.0.0"
-
-evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
-  integrity sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==
-  dependencies:
-    md5.js "^1.3.4"
-    safe-buffer "^5.1.1"
-
-execa@^0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-0.8.0.tgz#d8d76bbc1b55217ed190fd6dd49d3c774ecfc8da"
-  integrity sha1-2NdrvBtVIX7RkP1t1J08d07PyNo=
-  dependencies:
-    cross-spawn "^5.0.1"
-    get-stream "^3.0.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
-
-execa@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
-  integrity sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==
-  dependencies:
-    cross-spawn "^6.0.0"
-    get-stream "^4.0.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
-
-execa@^3.3.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-3.4.0.tgz#c08ed4550ef65d858fac269ffc8572446f37eb89"
-  integrity sha512-r9vdGQk4bmCuK1yKQu1KTwcT2zwfWdbdaXfCtAh+5nU/4fSX+JAb7vZGvI5naJrQlvONrEB20jeruESI69530g==
-  dependencies:
-    cross-spawn "^7.0.0"
-    get-stream "^5.0.0"
-    human-signals "^1.1.1"
-    is-stream "^2.0.0"
-    merge-stream "^2.0.0"
-    npm-run-path "^4.0.0"
-    onetime "^5.1.0"
-    p-finally "^2.0.0"
-    signal-exit "^3.0.2"
-    strip-final-newline "^2.0.0"
-
-expand-brackets@^2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
-  integrity sha1-t3c14xXOMPa27/D4OwQVGiJEliI=
-  dependencies:
-    debug "^2.3.3"
-    define-property "^0.2.5"
-    extend-shallow "^2.0.1"
-    posix-character-classes "^0.1.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
-
-express@^4.16.3, express@^4.17.1:
-  version "4.17.1"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
-  integrity sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
-  dependencies:
-    accepts "~1.3.7"
-    array-flatten "1.1.1"
-    body-parser "1.19.0"
-    content-disposition "0.5.3"
-    content-type "~1.0.4"
-    cookie "0.4.0"
-    cookie-signature "1.0.6"
-    debug "2.6.9"
-    depd "~1.1.2"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    finalhandler "~1.1.2"
-    fresh "0.5.2"
-    merge-descriptors "1.0.1"
-    methods "~1.1.2"
-    on-finished "~2.3.0"
-    parseurl "~1.3.3"
-    path-to-regexp "0.1.7"
-    proxy-addr "~2.0.5"
-    qs "6.7.0"
-    range-parser "~1.2.1"
-    safe-buffer "5.1.2"
-    send "0.17.1"
-    serve-static "1.14.1"
-    setprototypeof "1.1.1"
-    statuses "~1.5.0"
-    type-is "~1.6.18"
-    utils-merge "1.0.1"
-    vary "~1.1.2"
-
-extend-shallow@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
-  integrity sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=
-  dependencies:
-    is-extendable "^0.1.0"
-
-extend-shallow@^3.0.0, extend-shallow@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
-  integrity sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=
-  dependencies:
-    assign-symbols "^1.0.0"
-    is-extendable "^1.0.1"
-
-extend@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
-  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
-
-external-editor@^3.0.3:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
-  integrity sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==
-  dependencies:
-    chardet "^0.7.0"
-    iconv-lite "^0.4.24"
-    tmp "^0.0.33"
-
-extglob@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
-  integrity sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==
-  dependencies:
-    array-unique "^0.3.2"
-    define-property "^1.0.0"
-    expand-brackets "^2.1.4"
-    extend-shallow "^2.0.1"
-    fragment-cache "^0.2.1"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
-
-extsprintf@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
-  integrity sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=
-
-extsprintf@^1.2.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
-  integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
-
-fast-deep-equal@^3.1.1:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
-  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
-
-fast-glob@^2.2.6:
-  version "2.2.7"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
-  integrity sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==
-  dependencies:
-    "@mrmlnc/readdir-enhanced" "^2.2.1"
-    "@nodelib/fs.stat" "^1.1.2"
-    glob-parent "^3.1.0"
-    is-glob "^4.0.0"
-    merge2 "^1.2.3"
-    micromatch "^3.1.10"
-
-fast-json-stable-stringify@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
-  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
-
-fast-levenshtein@~2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
-  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
-
-faye-websocket@^0.11.3:
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.3.tgz#5c0e9a8968e8912c286639fde977a8b209f2508e"
-  integrity sha512-D2y4bovYpzziGgbHYtGCMjlJM36vAl/y+xUyn1C+FVx8szd1E+86KwVw6XvYSzOP8iMpm1X0I4xJD+QtUb36OA==
-  dependencies:
-    websocket-driver ">=0.5.1"
-
-figgy-pudding@^3.5.1:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
-  integrity sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==
-
-figures@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
-  integrity sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==
-  dependencies:
-    escape-string-regexp "^1.0.5"
-
-file-entry-cache@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-5.0.1.tgz#ca0f6efa6dd3d561333fb14515065c2fafdf439c"
-  integrity sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==
-  dependencies:
-    flat-cache "^2.0.1"
-
-file-loader@^4.2.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-4.3.0.tgz#780f040f729b3d18019f20605f723e844b8a58af"
-  integrity sha512-aKrYPYjF1yG3oX0kWRrqrSMfgftm7oJW5M+m4owoldH5C51C0RkIwB++JbRvEW3IU6/ZG5n8UvEcdgwOt2UOWA==
-  dependencies:
-    loader-utils "^1.2.3"
-    schema-utils "^2.5.0"
-
-file-loader@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
-  integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==
-  dependencies:
-    loader-utils "^2.0.0"
-    schema-utils "^3.0.0"
-
-file-uri-to-path@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
-  integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
-
-filesize@^3.6.1:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
-  integrity sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg==
-
-fill-range@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
-  integrity sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=
-  dependencies:
-    extend-shallow "^2.0.1"
-    is-number "^3.0.0"
-    repeat-string "^1.6.1"
-    to-regex-range "^2.1.0"
-
-fill-range@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
-  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
-  dependencies:
-    to-regex-range "^5.0.1"
-
-finalhandler@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
-  integrity sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==
-  dependencies:
-    debug "2.6.9"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    on-finished "~2.3.0"
-    parseurl "~1.3.3"
-    statuses "~1.5.0"
-    unpipe "~1.0.0"
-
-find-cache-dir@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-0.1.1.tgz#c8defae57c8a52a8a784f9e31c57c742e993a0b9"
-  integrity sha1-yN765XyKUqinhPnjHFfHQumToLk=
-  dependencies:
-    commondir "^1.0.1"
-    mkdirp "^0.5.1"
-    pkg-dir "^1.0.0"
-
-find-cache-dir@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
-  integrity sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==
-  dependencies:
-    commondir "^1.0.1"
-    make-dir "^2.0.0"
-    pkg-dir "^3.0.0"
-
-find-cache-dir@^3.0.0, find-cache-dir@^3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.1.tgz#89b33fad4a4670daa94f855f7fbe31d6d84fe880"
-  integrity sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==
-  dependencies:
-    commondir "^1.0.1"
-    make-dir "^3.0.2"
-    pkg-dir "^4.1.0"
-
-find-up@^1.0.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
-  integrity sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=
-  dependencies:
-    path-exists "^2.0.0"
-    pinkie-promise "^2.0.0"
-
-find-up@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
-  integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
-  dependencies:
-    locate-path "^3.0.0"
-
-find-up@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
-  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
-  dependencies:
-    locate-path "^5.0.0"
-    path-exists "^4.0.0"
-
-flat-cache@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0"
-  integrity sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==
-  dependencies:
-    flatted "^2.0.0"
-    rimraf "2.6.3"
-    write "1.0.3"
-
-flatted@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
-  integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
-
-flush-write-stream@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
-  integrity sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==
-  dependencies:
-    inherits "^2.0.3"
-    readable-stream "^2.3.6"
-
-follow-redirects@^1.0.0:
-  version "1.13.3"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.3.tgz#e5598ad50174c1bc4e872301e82ac2cd97f90267"
-  integrity sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==
-
-for-in@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
-  integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
-
-forever-agent@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
-  integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
-
-form-data@~2.3.2:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
-  integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
-  dependencies:
-    asynckit "^0.4.0"
-    combined-stream "^1.0.6"
-    mime-types "^2.1.12"
-
-forwarded@~0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
-  integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
-
-fragment-cache@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
-  integrity sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=
-  dependencies:
-    map-cache "^0.2.2"
-
-fresh@0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
-  integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
-
-from2@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
-  integrity sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=
-  dependencies:
-    inherits "^2.0.1"
-    readable-stream "^2.0.0"
-
-fs-extra@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
-  integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
-fs-minipass@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
-  integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
-  dependencies:
-    minipass "^3.0.0"
-
-fs-write-stream-atomic@^1.0.8:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
-  integrity sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=
-  dependencies:
-    graceful-fs "^4.1.2"
-    iferr "^0.1.5"
-    imurmurhash "^0.1.4"
-    readable-stream "1 || 2"
-
-fs.realpath@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
-  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
-
-fsevents@^1.2.7:
-  version "1.2.13"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.13.tgz#f325cb0455592428bcf11b383370ef70e3bfcc38"
-  integrity sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==
-  dependencies:
-    bindings "^1.5.0"
-    nan "^2.12.1"
-
-fsevents@~2.3.1:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
-
-function-bind@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
-  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
-
-functional-red-black-tree@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
-  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
-
-gensync@^1.0.0-beta.2:
-  version "1.0.0-beta.2"
-  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
-  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
-
-get-caller-file@^2.0.1, get-caller-file@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
-  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
-
-get-intrinsic@^1.0.2, get-intrinsic@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
-  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
-  dependencies:
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-
-get-stream@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
-  integrity sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=
-
-get-stream@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
-  integrity sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==
-  dependencies:
-    pump "^3.0.0"
-
-get-stream@^5.0.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.2.0.tgz#4966a1795ee5ace65e706c4b7beb71257d6e22d3"
-  integrity sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==
-  dependencies:
-    pump "^3.0.0"
-
-get-value@^2.0.3, get-value@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
-  integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
-
-getpass@^0.1.1:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
-  integrity sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=
-  dependencies:
-    assert-plus "^1.0.0"
-
-glob-parent@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
-  integrity sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=
-  dependencies:
-    is-glob "^3.1.0"
-    path-dirname "^1.0.0"
-
-glob-parent@^5.0.0, glob-parent@~5.1.0:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
-  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
-  dependencies:
-    is-glob "^4.0.1"
-
-glob-to-regexp@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
-  integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
-
-glob@^7.0.0, glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
-  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-globals@^11.1.0:
-  version "11.12.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
-  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
-
-globals@^12.1.0:
-  version "12.4.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-12.4.0.tgz#a18813576a41b00a24a97e7f815918c2e19925f8"
-  integrity sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==
-  dependencies:
-    type-fest "^0.8.1"
-
-globby@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
-  integrity sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=
-  dependencies:
-    array-union "^1.0.1"
-    glob "^7.0.3"
-    object-assign "^4.0.1"
-    pify "^2.0.0"
-    pinkie-promise "^2.0.0"
-
-globby@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-7.1.1.tgz#fb2ccff9401f8600945dfada97440cca972b8680"
-  integrity sha1-+yzP+UAfhgCUXfral0QMypcrhoA=
-  dependencies:
-    array-union "^1.0.1"
-    dir-glob "^2.0.0"
-    glob "^7.1.2"
-    ignore "^3.3.5"
-    pify "^3.0.0"
-    slash "^1.0.0"
-
-globby@^9.2.0:
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-9.2.0.tgz#fd029a706c703d29bdd170f4b6db3a3f7a7cb63d"
-  integrity sha512-ollPHROa5mcxDEkwg6bPt3QbEf4pDQSNtd6JPL1YvOvAo/7/0VAm9TccUeoTmarjPw4pfUthSCqcyfNB1I3ZSg==
-  dependencies:
-    "@types/glob" "^7.1.1"
-    array-union "^1.0.2"
-    dir-glob "^2.2.2"
-    fast-glob "^2.2.6"
-    glob "^7.1.3"
-    ignore "^4.0.3"
-    pify "^4.0.1"
-    slash "^2.0.0"
-
-graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.2:
-  version "4.2.6"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
-  integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
-
-graphql-tag@^2.11.0:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.11.0.tgz#1deb53a01c46a7eb401d6cb59dec86fa1cccbffd"
-  integrity sha512-VmsD5pJqWJnQZMUeRwrDhfgoyqcfwEkvtpANqcoUG8/tOLkwNgU9mzub/Mc78OJMhHjx7gfAMTxzdG43VGg3bA==
-
-graphql@^15.4.0:
-  version "15.5.0"
-  resolved "https://registry.yarnpkg.com/graphql/-/graphql-15.5.0.tgz#39d19494dbe69d1ea719915b578bf920344a69d5"
-  integrity sha512-OmaM7y0kaK31NKG31q4YbD2beNYa6jBBKtMFT6gLYJljHLJr42IqJ8KX08u3Li/0ifzTU5HjmoOOrwa5BRLeDA==
-
-gzip-size@^5.0.0:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
-  integrity sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==
-  dependencies:
-    duplexer "^0.1.1"
-    pify "^4.0.1"
-
-handle-thing@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
-  integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==
-
-har-schema@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
-  integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
-
-har-validator@~5.1.3:
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.5.tgz#1f0803b9f8cb20c0fa13822df1ecddb36bde1efd"
-  integrity sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==
-  dependencies:
-    ajv "^6.12.3"
-    har-schema "^2.0.0"
-
-has-bigints@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
-  integrity sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==
-
-has-flag@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
-  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
-
-has-flag@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
-  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
-
-has-symbols@^1.0.0, has-symbols@^1.0.1, has-symbols@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
-  integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
-
-has-value@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
-  integrity sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=
-  dependencies:
-    get-value "^2.0.3"
-    has-values "^0.1.4"
-    isobject "^2.0.0"
-
-has-value@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
-  integrity sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=
-  dependencies:
-    get-value "^2.0.6"
-    has-values "^1.0.0"
-    isobject "^3.0.0"
-
-has-values@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
-  integrity sha1-bWHeldkd/Km5oCCJrThL/49it3E=
-
-has-values@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
-  integrity sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=
-  dependencies:
-    is-number "^3.0.0"
-    kind-of "^4.0.0"
-
-has@^1.0.0, has@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
-  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
-  dependencies:
-    function-bind "^1.1.1"
-
-hash-base@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.1.0.tgz#55c381d9e06e1d2997a883b4a3fddfe7f0d3af33"
-  integrity sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==
-  dependencies:
-    inherits "^2.0.4"
-    readable-stream "^3.6.0"
-    safe-buffer "^5.2.0"
-
-hash-sum@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04"
-  integrity sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=
-
-hash-sum@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
-  integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==
-
-hash.js@^1.0.0, hash.js@^1.0.3:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
-  integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
-  dependencies:
-    inherits "^2.0.3"
-    minimalistic-assert "^1.0.1"
-
-he@1.2.x, he@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
-  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
-
-hex-color-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
-  integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
-
-highlight.js@^10.0.0:
-  version "10.7.1"
-  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.1.tgz#a8ec4152db24ea630c90927d6cae2a45f8ecb955"
-  integrity sha512-S6G97tHGqJ/U8DsXcEdnACbirtbx58Bx9CzIVeYli8OuswCfYI/LsXH2EiGcoGio1KAC3x4mmUwulOllJ2ZyRA==
-
-hmac-drbg@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
-  integrity sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=
-  dependencies:
-    hash.js "^1.0.3"
-    minimalistic-assert "^1.0.0"
-    minimalistic-crypto-utils "^1.0.1"
-
-hoopy@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
-  integrity sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==
-
-hosted-git-info@^2.1.4:
-  version "2.8.8"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
-  integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==
-
-hpack.js@^2.1.6:
-  version "2.1.6"
-  resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
-  integrity sha1-h3dMCUnlE/QuhFdbPEVoH63ioLI=
-  dependencies:
-    inherits "^2.0.1"
-    obuf "^1.0.0"
-    readable-stream "^2.0.1"
-    wbuf "^1.1.0"
-
-hsl-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
-  integrity sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=
-
-hsla-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
-  integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg=
-
-html-comment-regex@^1.1.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
-  integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
-
-html-entities@^1.3.1:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.4.0.tgz#cfbd1b01d2afaf9adca1b10ae7dffab98c71d2dc"
-  integrity sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==
-
-html-minifier@^3.2.3:
-  version "3.5.21"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.21.tgz#d0040e054730e354db008463593194015212d20c"
-  integrity sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==
-  dependencies:
-    camel-case "3.0.x"
-    clean-css "4.2.x"
-    commander "2.17.x"
-    he "1.2.x"
-    param-case "2.1.x"
-    relateurl "0.2.x"
-    uglify-js "3.4.x"
-
-html-tags@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"
-  integrity sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=
-
-html-tags@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
-  integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==
-
-html-webpack-plugin@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz#b01abbd723acaaa7b37b6af4492ebda03d9dd37b"
-  integrity sha1-sBq71yOsqqeze2r0SS69oD2d03s=
-  dependencies:
-    html-minifier "^3.2.3"
-    loader-utils "^0.2.16"
-    lodash "^4.17.3"
-    pretty-error "^2.0.2"
-    tapable "^1.0.0"
-    toposort "^1.0.0"
-    util.promisify "1.0.0"
-
-htmlparser2@^3.10.1:
-  version "3.10.1"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
-  integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==
-  dependencies:
-    domelementtype "^1.3.1"
-    domhandler "^2.3.0"
-    domutils "^1.5.1"
-    entities "^1.1.1"
-    inherits "^2.0.1"
-    readable-stream "^3.1.1"
-
-http-deceiver@^1.2.7:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
-  integrity sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc=
-
-http-errors@1.7.2:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
-  integrity sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==
-  dependencies:
-    depd "~1.1.2"
-    inherits "2.0.3"
-    setprototypeof "1.1.1"
-    statuses ">= 1.5.0 < 2"
-    toidentifier "1.0.0"
-
-http-errors@~1.6.2:
-  version "1.6.3"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d"
-  integrity sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=
-  dependencies:
-    depd "~1.1.2"
-    inherits "2.0.3"
-    setprototypeof "1.1.0"
-    statuses ">= 1.4.0 < 2"
-
-http-errors@~1.7.2:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
-  integrity sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==
-  dependencies:
-    depd "~1.1.2"
-    inherits "2.0.4"
-    setprototypeof "1.1.1"
-    statuses ">= 1.5.0 < 2"
-    toidentifier "1.0.0"
-
-http-parser-js@>=0.5.1:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.3.tgz#01d2709c79d41698bb01d4decc5e9da4e4a033d9"
-  integrity sha512-t7hjvef/5HEK7RWTdUzVUhl8zkEu+LlaE0IYzdMuvbSDipxBRpOn4Uhw8ZyECEa808iVT8XCjzo6xmYt4CiLZg==
-
-http-proxy-middleware@0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz#183c7dc4aa1479150306498c210cdaf96080a43a"
-  integrity sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==
-  dependencies:
-    http-proxy "^1.17.0"
-    is-glob "^4.0.0"
-    lodash "^4.17.11"
-    micromatch "^3.1.10"
-
-http-proxy-middleware@^1.0.0:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-1.0.6.tgz#0618557722f450375d3796d701a8ac5407b3b94e"
-  integrity sha512-NyL6ZB6cVni7pl+/IT2W0ni5ME00xR0sN27AQZZrpKn1b+qRh+mLbBxIq9Cq1oGfmTc7BUq4HB77mxwCaxAYNg==
-  dependencies:
-    "@types/http-proxy" "^1.17.4"
-    http-proxy "^1.18.1"
-    is-glob "^4.0.1"
-    lodash "^4.17.20"
-    micromatch "^4.0.2"
-
-http-proxy@^1.17.0, http-proxy@^1.18.1:
-  version "1.18.1"
-  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549"
-  integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
-  dependencies:
-    eventemitter3 "^4.0.0"
-    follow-redirects "^1.0.0"
-    requires-port "^1.0.0"
-
-http-signature@~1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
-  integrity sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=
-  dependencies:
-    assert-plus "^1.0.0"
-    jsprim "^1.2.2"
-    sshpk "^1.7.0"
-
-https-browserify@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
-  integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
-
-human-signals@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
-  integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
-
-iconv-lite@0.4.24, iconv-lite@^0.4.24:
-  version "0.4.24"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
-  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
-  dependencies:
-    safer-buffer ">= 2.1.2 < 3"
-
-icss-utils@^4.0.0, icss-utils@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
-  integrity sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==
-  dependencies:
-    postcss "^7.0.14"
-
-ieee754@^1.1.4:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
-  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
-
-iferr@^0.1.5:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
-  integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=
-
-ignore@^3.3.5:
-  version "3.3.10"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
-  integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
-
-ignore@^4.0.3, ignore@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
-  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
-
-import-cwd@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
-  integrity sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=
-  dependencies:
-    import-from "^2.1.0"
-
-import-fresh@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
-  integrity sha1-2BNVwVYS04bGH53dOSLUMEgipUY=
-  dependencies:
-    caller-path "^2.0.0"
-    resolve-from "^3.0.0"
-
-import-fresh@^3.0.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
-  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
-  dependencies:
-    parent-module "^1.0.0"
-    resolve-from "^4.0.0"
-
-import-from@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
-  integrity sha1-M1238qev/VOqpHHUuAId7ja387E=
-  dependencies:
-    resolve-from "^3.0.0"
-
-import-local@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
-  integrity sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==
-  dependencies:
-    pkg-dir "^3.0.0"
-    resolve-cwd "^2.0.0"
-
-imurmurhash@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
-  integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
-
-indent-string@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
-  integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
-
-indexes-of@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
-  integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
-
-infer-owner@^1.0.3, infer-owner@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
-  integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
-
-inflight@^1.0.4:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
-  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
-  dependencies:
-    once "^1.3.0"
-    wrappy "1"
-
-inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
-  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
-
-inherits@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
-  integrity sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=
-
-inherits@2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
-  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
-
-inquirer@^7.0.0, inquirer@^7.1.0:
-  version "7.3.3"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.3.3.tgz#04d176b2af04afc157a83fd7c100e98ee0aad003"
-  integrity sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==
-  dependencies:
-    ansi-escapes "^4.2.1"
-    chalk "^4.1.0"
-    cli-cursor "^3.1.0"
-    cli-width "^3.0.0"
-    external-editor "^3.0.3"
-    figures "^3.0.0"
-    lodash "^4.17.19"
-    mute-stream "0.0.8"
-    run-async "^2.4.0"
-    rxjs "^6.6.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-    through "^2.3.6"
-
-internal-ip@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907"
-  integrity sha512-S1zBo1D6zcsyuC6PMmY5+55YMILQ9av8lotMx447Bq6SAgo/sDK6y6uUKmuYhW7eacnIhFfsPmCNYdDzsnnDCg==
-  dependencies:
-    default-gateway "^4.2.0"
-    ipaddr.js "^1.9.0"
-
-interpret@^1.0.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
-  integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
-
-ip-regex@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
-  integrity sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=
-
-ip@^1.1.0, ip@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
-  integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
-
-ipaddr.js@1.9.1, ipaddr.js@^1.9.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
-  integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
-
-is-absolute-url@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
-  integrity sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=
-
-is-absolute-url@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-3.0.3.tgz#96c6a22b6a23929b11ea0afb1836c36ad4a5d698"
-  integrity sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==
-
-is-accessor-descriptor@^0.1.6:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
-  integrity sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=
-  dependencies:
-    kind-of "^3.0.2"
-
-is-accessor-descriptor@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656"
-  integrity sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==
-  dependencies:
-    kind-of "^6.0.0"
-
-is-arguments@^1.0.4:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.0.tgz#62353031dfbee07ceb34656a6bde59efecae8dd9"
-  integrity sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==
-  dependencies:
-    call-bind "^1.0.0"
-
-is-arrayish@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
-  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
-
-is-arrayish@^0.3.1:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
-  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
-
-is-bigint@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.1.tgz#6923051dfcbc764278540b9ce0e6b3213aa5ebc2"
-  integrity sha512-J0ELF4yHFxHy0cmSxZuheDOz2luOdVvqjwmEcj8H/L1JHeuEDSDbeRP+Dk9kFVk5RTFzbucJ2Kb9F7ixY2QaCg==
-
-is-binary-path@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
-  integrity sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=
-  dependencies:
-    binary-extensions "^1.0.0"
-
-is-binary-path@~2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
-  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
-  dependencies:
-    binary-extensions "^2.0.0"
-
-is-boolean-object@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.0.tgz#e2aaad3a3a8fca34c28f6eee135b156ed2587ff0"
-  integrity sha512-a7Uprx8UtD+HWdyYwnD1+ExtTgqQtD2k/1yJgtXP6wnMm8byhkoTZRl+95LLThpzNZJ5aEvi46cdH+ayMFRwmA==
-  dependencies:
-    call-bind "^1.0.0"
-
-is-buffer@^1.1.5:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
-  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
-
-is-callable@^1.1.4, is-callable@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.3.tgz#8b1e0500b73a1d76c70487636f368e519de8db8e"
-  integrity sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==
-
-is-ci@^1.0.10:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.2.1.tgz#e3779c8ee17fccf428488f6e281187f2e632841c"
-  integrity sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==
-  dependencies:
-    ci-info "^1.5.0"
-
-is-color-stop@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
-  integrity sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=
-  dependencies:
-    css-color-names "^0.0.4"
-    hex-color-regex "^1.1.0"
-    hsl-regex "^1.0.0"
-    hsla-regex "^1.0.0"
-    rgb-regex "^1.0.1"
-    rgba-regex "^1.0.0"
-
-is-core-module@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.2.0.tgz#97037ef3d52224d85163f5597b2b63d9afed981a"
-  integrity sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==
-  dependencies:
-    has "^1.0.3"
-
-is-data-descriptor@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
-  integrity sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=
-  dependencies:
-    kind-of "^3.0.2"
-
-is-data-descriptor@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
-  integrity sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==
-  dependencies:
-    kind-of "^6.0.0"
-
-is-date-object@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
-  integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
-
-is-descriptor@^0.1.0:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
-  integrity sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==
-  dependencies:
-    is-accessor-descriptor "^0.1.6"
-    is-data-descriptor "^0.1.4"
-    kind-of "^5.0.0"
-
-is-descriptor@^1.0.0, is-descriptor@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec"
-  integrity sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==
-  dependencies:
-    is-accessor-descriptor "^1.0.0"
-    is-data-descriptor "^1.0.0"
-    kind-of "^6.0.2"
-
-is-directory@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
-  integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
-
-is-docker@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.1.1.tgz#4125a88e44e450d384e09047ede71adc2d144156"
-  integrity sha512-ZOoqiXfEwtGknTiuDEy8pN2CfE3TxMHprvNer1mXiqwkOT77Rw3YVrUQ52EqAOU3QAWDQ+bQdx7HJzrv7LS2Hw==
-
-is-extendable@^0.1.0, is-extendable@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
-  integrity sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=
-
-is-extendable@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
-  integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
-  dependencies:
-    is-plain-object "^2.0.4"
-
-is-extglob@^2.1.0, is-extglob@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
-  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
-
-is-fullwidth-code-point@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
-  integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
-
-is-fullwidth-code-point@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
-  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
-
-is-glob@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
-  integrity sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=
-  dependencies:
-    is-extglob "^2.1.0"
-
-is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
-  integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
-  dependencies:
-    is-extglob "^2.1.1"
-
-is-negative-zero@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.1.tgz#3de746c18dda2319241a53675908d8f766f11c24"
-  integrity sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w==
-
-is-number-object@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
-  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
-
-is-number@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
-  integrity sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=
-  dependencies:
-    kind-of "^3.0.2"
-
-is-number@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
-  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
-
-is-obj@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
-  integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
-
-is-path-cwd@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-2.2.0.tgz#67d43b82664a7b5191fd9119127eb300048a9fdb"
-  integrity sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==
-
-is-path-in-cwd@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz#bfe2dca26c69f397265a4009963602935a053acb"
-  integrity sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==
-  dependencies:
-    is-path-inside "^2.1.0"
-
-is-path-inside@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-2.1.0.tgz#7c9810587d659a40d27bcdb4d5616eab059494b2"
-  integrity sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==
-  dependencies:
-    path-is-inside "^1.0.2"
-
-is-plain-obj@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
-  integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
-
-is-plain-object@^2.0.3, is-plain-object@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
-  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
-  dependencies:
-    isobject "^3.0.1"
-
-is-regex@^1.0.4, is-regex@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.2.tgz#81c8ebde4db142f2cf1c53fc86d6a45788266251"
-  integrity sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==
-  dependencies:
-    call-bind "^1.0.2"
-    has-symbols "^1.0.1"
-
-is-resolvable@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
-  integrity sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==
-
-is-stream@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
-  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
-
-is-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
-  integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
-
-is-string@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
-  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
-
-is-svg@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-3.0.0.tgz#9321dbd29c212e5ca99c4fa9794c714bcafa2f75"
-  integrity sha512-gi4iHK53LR2ujhLVVj+37Ykh9GLqYHX6JOVXbLAucaG/Cqw9xwdFOjDM2qeifLs1sF1npXXFvDu0r5HNgCMrzQ==
-  dependencies:
-    html-comment-regex "^1.1.0"
-
-is-symbol@^1.0.2, is-symbol@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
-  integrity sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==
-  dependencies:
-    has-symbols "^1.0.1"
-
-is-typedarray@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
-  integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
-
-is-windows@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
-  integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
-
-is-wsl@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
-  integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
-
-is-wsl@^2.1.1:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
-  integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
-  dependencies:
-    is-docker "^2.0.0"
-
-isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
-  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
-
-isexe@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
-  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
-
-isobject@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
-  integrity sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=
-  dependencies:
-    isarray "1.0.0"
-
-isobject@^3.0.0, isobject@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
-  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
-
-isstream@~0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
-  integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
-
-javascript-stringify@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-2.0.1.tgz#6ef358035310e35d667c675ed63d3eb7c1aa19e5"
-  integrity sha512-yV+gqbd5vaOYjqlbk16EG89xB5udgjqQF3C5FAORDg4f/IS1Yc5ERCv5e/57yBcfJYw05V5JyIXabhwb75Xxow==
-
-jest-worker@^25.4.0:
-  version "25.5.0"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-25.5.0.tgz#2611d071b79cea0f43ee57a3d118593ac1547db1"
-  integrity sha512-/dsSmUkIy5EBGfv/IjjqmFxrNAUpBERfGs1oHROyD7yxjG/w+t0GOJDX8O1k32ySmd7+a5IhnJU2qQFcJ4n1vw==
-  dependencies:
-    merge-stream "^2.0.0"
-    supports-color "^7.0.0"
-
-js-message@1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/js-message/-/js-message-1.0.7.tgz#fbddd053c7a47021871bb8b2c95397cc17c20e47"
-  integrity sha512-efJLHhLjIyKRewNS9EGZ4UpI8NguuL6fKkhRxVuMmrGV2xN/0APGdQYwLFky5w9naebSZ0OwAGp0G6/2Cg90rA==
-
-js-queue@2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/js-queue/-/js-queue-2.0.2.tgz#0be590338f903b36c73d33c31883a821412cd482"
-  integrity sha512-pbKLsbCfi7kriM3s1J4DDCo7jQkI58zPLHi0heXPzPlj0hjUsm+FesPUbE0DSbIVIK503A36aUBoCN7eMFedkA==
-  dependencies:
-    easy-stack "^1.0.1"
-
-js-tokens@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
-  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
-
-js-yaml@^3.13.1:
-  version "3.14.1"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
-  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
-  dependencies:
-    argparse "^1.0.7"
-    esprima "^4.0.0"
-
-jsbn@~0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
-  integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
-
-jsesc@^2.5.1:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
-  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
-
-jsesc@~0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
-  integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
-
-json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
-  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
-
-json-parse-even-better-errors@^2.3.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
-  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
-
-json-schema-traverse@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
-  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
-
-json-schema@0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
-  integrity sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=
-
-json-stable-stringify-without-jsonify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
-  integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
-
-json-stringify-safe@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
-  integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
-
-json3@^3.3.3:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.3.tgz#7fc10e375fc5ae42c4705a5cc0aa6f62be305b81"
-  integrity sha512-c7/8mbUsKigAbLkD5B010BK4D9LZm7A1pNItkEwiUZRpIN66exu/e7YQWysGun+TRKaJp8MhemM+VkfWv42aCA==
-
-json5@^0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
-  integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
-
-json5@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
-  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
-  dependencies:
-    minimist "^1.2.0"
-
-json5@^2.1.2:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3"
-  integrity sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==
-  dependencies:
-    minimist "^1.2.5"
-
-jsonfile@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
-  integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
-jsprim@^1.2.2:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
-  integrity sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=
-  dependencies:
-    assert-plus "1.0.0"
-    extsprintf "1.3.0"
-    json-schema "0.2.3"
-    verror "1.10.0"
-
-killable@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
-  integrity sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==
-
-kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
-  integrity sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=
-  dependencies:
-    is-buffer "^1.1.5"
-
-kind-of@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-4.0.0.tgz#20813df3d712928b207378691a45066fae72dd57"
-  integrity sha1-IIE989cSkosgc3hpGkUGb65y3Vc=
-  dependencies:
-    is-buffer "^1.1.5"
-
-kind-of@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
-  integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
-
-kind-of@^6.0.0, kind-of@^6.0.2:
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
-  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
-
-launch-editor-middleware@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/launch-editor-middleware/-/launch-editor-middleware-2.2.1.tgz#e14b07e6c7154b0a4b86a0fd345784e45804c157"
-  integrity sha512-s0UO2/gEGiCgei3/2UN3SMuUj1phjQN8lcpnvgLSz26fAzNWPQ6Nf/kF5IFClnfU2ehp6LrmKdMU/beveO+2jg==
-  dependencies:
-    launch-editor "^2.2.1"
-
-launch-editor@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/launch-editor/-/launch-editor-2.2.1.tgz#871b5a3ee39d6680fcc26d37930b6eeda89db0ca"
-  integrity sha512-On+V7K2uZK6wK7x691ycSUbLD/FyKKelArkbaAMSSJU8JmqmhwN2+mnJDNINuJWSrh2L0kDk+ZQtbC/gOWUwLw==
-  dependencies:
-    chalk "^2.3.0"
-    shell-quote "^1.6.1"
-
-levn@^0.3.0, levn@~0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
-  integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
-  dependencies:
-    prelude-ls "~1.1.2"
-    type-check "~0.3.2"
-
-lines-and-columns@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
-  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
-
-loader-fs-cache@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz#f08657646d607078be2f0a032f8bd69dd6f277d9"
-  integrity sha512-ldcgZpjNJj71n+2Mf6yetz+c9bM4xpKtNds4LbqXzU/PTdeAX0g3ytnU1AJMEcTk2Lex4Smpe3Q/eCTsvUBxbA==
-  dependencies:
-    find-cache-dir "^0.1.1"
-    mkdirp "^0.5.1"
-
-loader-runner@^2.3.1, loader-runner@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
-  integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
-
-loader-utils@^0.2.16:
-  version "0.2.17"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
-  integrity sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=
-  dependencies:
-    big.js "^3.1.3"
-    emojis-list "^2.0.0"
-    json5 "^0.5.0"
-    object-assign "^4.0.1"
-
-loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
-  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
-  dependencies:
-    big.js "^5.2.2"
-    emojis-list "^3.0.0"
-    json5 "^1.0.1"
-
-loader-utils@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
-  integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==
-  dependencies:
-    big.js "^5.2.2"
-    emojis-list "^3.0.0"
-    json5 "^2.1.2"
-
-locate-path@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
-  integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==
-  dependencies:
-    p-locate "^3.0.0"
-    path-exists "^3.0.0"
-
-locate-path@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
-  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
-  dependencies:
-    p-locate "^4.1.0"
-
-lodash.debounce@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
-  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
-
-lodash.defaultsdeep@^4.6.1:
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.1.tgz#512e9bd721d272d94e3d3a63653fa17516741ca6"
-  integrity sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA==
-
-lodash.kebabcase@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
-  integrity sha1-hImxyw0p/4gZXM7KRI/21swpXDY=
-
-lodash.mapvalues@^4.6.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz#1bafa5005de9dd6f4f26668c30ca37230cc9689c"
-  integrity sha1-G6+lAF3p3W9PJmaMMMo3IwzJaJw=
-
-lodash.memoize@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
-  integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
-
-lodash.transform@^4.6.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.transform/-/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0"
-  integrity sha1-EjBkIvYzJK7YSD0/ODMrX2cFR6A=
-
-lodash.uniq@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
-  integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
-
-lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.3:
-  version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-
-log-symbols@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
-  integrity sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==
-  dependencies:
-    chalk "^2.0.1"
-
-loglevel@^1.6.8:
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
-  integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
-
-lower-case@^1.1.1:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
-  integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw=
-
-lru-cache@^4.0.1, lru-cache@^4.1.2:
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
-  integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
-  dependencies:
-    pseudomap "^1.0.2"
-    yallist "^2.1.2"
-
-lru-cache@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
-  integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
-  dependencies:
-    yallist "^3.0.2"
-
-lru-cache@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
-  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
-  dependencies:
-    yallist "^4.0.0"
-
-make-dir@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
-  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
-  dependencies:
-    pify "^4.0.1"
-    semver "^5.6.0"
-
-make-dir@^3.0.2, make-dir@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
-  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
-  dependencies:
-    semver "^6.0.0"
-
-map-cache@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
-  integrity sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=
-
-map-visit@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
-  integrity sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=
-  dependencies:
-    object-visit "^1.0.0"
-
-md5.js@^1.3.4:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
-  integrity sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==
-  dependencies:
-    hash-base "^3.0.0"
-    inherits "^2.0.1"
-    safe-buffer "^5.1.2"
-
-mdn-data@2.0.14:
-  version "2.0.14"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
-  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
-
-mdn-data@2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
-  integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
-
-media-typer@0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
-  integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
-
-memory-fs@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
-  integrity sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=
-  dependencies:
-    errno "^0.1.3"
-    readable-stream "^2.0.1"
-
-memory-fs@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.5.0.tgz#324c01288b88652966d161db77838720845a8e3c"
-  integrity sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==
-  dependencies:
-    errno "^0.1.3"
-    readable-stream "^2.0.1"
-
-merge-descriptors@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
-  integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
-
-merge-source-map@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/merge-source-map/-/merge-source-map-1.1.0.tgz#2fdde7e6020939f70906a68f2d7ae685e4c8c646"
-  integrity sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==
-  dependencies:
-    source-map "^0.6.1"
-
-merge-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
-  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
-
-merge2@^1.2.3:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
-  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
-
-methods@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
-  integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
-
-micromatch@^3.1.10, micromatch@^3.1.4:
-  version "3.1.10"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
-  integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
-  dependencies:
-    arr-diff "^4.0.0"
-    array-unique "^0.3.2"
-    braces "^2.3.1"
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    extglob "^2.0.4"
-    fragment-cache "^0.2.1"
-    kind-of "^6.0.2"
-    nanomatch "^1.2.9"
-    object.pick "^1.3.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.2"
-
-micromatch@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
-  integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
-  dependencies:
-    braces "^3.0.1"
-    picomatch "^2.0.5"
-
-miller-rabin@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
-  integrity sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==
-  dependencies:
-    bn.js "^4.0.0"
-    brorand "^1.0.1"
-
-mime-db@1.46.0, "mime-db@>= 1.43.0 < 2":
-  version "1.46.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.46.0.tgz#6267748a7f799594de3cbc8cde91def349661cee"
-  integrity sha512-svXaP8UQRZ5K7or+ZmfNhg2xX3yKDMUzqadsSqi4NCH/KomcH75MAMYAGVlvXn4+b/xOPhS3I2uHKRUzvjY7BQ==
-
-mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
-  version "2.1.29"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.29.tgz#1d4ab77da64b91f5f72489df29236563754bb1b2"
-  integrity sha512-Y/jMt/S5sR9OaqteJtslsFZKWOIIqMACsJSiHghlCAyhf7jfVYjKBmLiX8OgpWeW+fjJ2b+Az69aPFPkUOY6xQ==
-  dependencies:
-    mime-db "1.46.0"
-
-mime@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
-  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
-
-mime@^2.4.4:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.5.2.tgz#6e3dc6cc2b9510643830e5f19d5cb753da5eeabe"
-  integrity sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==
-
-mimic-fn@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
-  integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
-
-mimic-fn@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
-  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
-
-mini-css-extract-plugin@^0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz#47f2cf07aa165ab35733b1fc97d4c46c0564339e"
-  integrity sha512-lp3GeY7ygcgAmVIcRPBVhIkf8Us7FZjA+ILpal44qLdSu11wmjKQ3d9k15lfD7pO4esu9eUIAW7qiYIBppv40A==
-  dependencies:
-    loader-utils "^1.1.0"
-    normalize-url "1.9.1"
-    schema-utils "^1.0.0"
-    webpack-sources "^1.1.0"
-
-minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
-  integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
-
-minimalistic-crypto-utils@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
-  integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
-
-minimatch@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
-  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
-  dependencies:
-    brace-expansion "^1.1.7"
-
-minimist@^1.2.0, minimist@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
-  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
-
-minipass-collect@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"
-  integrity sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==
-  dependencies:
-    minipass "^3.0.0"
-
-minipass-flush@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/minipass-flush/-/minipass-flush-1.0.5.tgz#82e7135d7e89a50ffe64610a787953c4c4cbb373"
-  integrity sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==
-  dependencies:
-    minipass "^3.0.0"
-
-minipass-pipeline@^1.2.2:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz#68472f79711c084657c067c5c6ad93cddea8214c"
-  integrity sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==
-  dependencies:
-    minipass "^3.0.0"
-
-minipass@^3.0.0, minipass@^3.1.1:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.3.tgz#7d42ff1f39635482e15f9cdb53184deebd5815fd"
-  integrity sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==
-  dependencies:
-    yallist "^4.0.0"
-
-mississippi@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
-  integrity sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==
-  dependencies:
-    concat-stream "^1.5.0"
-    duplexify "^3.4.2"
-    end-of-stream "^1.1.0"
-    flush-write-stream "^1.0.0"
-    from2 "^2.1.0"
-    parallel-transform "^1.1.0"
-    pump "^3.0.0"
-    pumpify "^1.3.3"
-    stream-each "^1.1.0"
-    through2 "^2.0.0"
-
-mixin-deep@^1.2.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
-  integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
-  dependencies:
-    for-in "^1.0.2"
-    is-extendable "^1.0.1"
-
-mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1:
-  version "0.5.5"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
-  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
-  dependencies:
-    minimist "^1.2.5"
-
-move-concurrently@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
-  integrity sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=
-  dependencies:
-    aproba "^1.1.1"
-    copy-concurrently "^1.0.0"
-    fs-write-stream-atomic "^1.0.8"
-    mkdirp "^0.5.1"
-    rimraf "^2.5.4"
-    run-queue "^1.0.3"
-
-ms@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
-  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
-
-ms@2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
-  integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
-
-ms@2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
-  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
-
-ms@^2.1.1:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
-  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
-
-multicast-dns-service-types@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
-  integrity sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=
-
-multicast-dns@^6.0.1:
-  version "6.2.3"
-  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.3.tgz#a0ec7bd9055c4282f790c3c82f4e28db3b31b229"
-  integrity sha512-ji6J5enbMyGRHIAkAOu3WdV8nggqviKCEKtXcOqfphZZtQrmHKycfynJ2V7eVPUA4NhJ6V7Wf4TmGbTwKE9B6g==
-  dependencies:
-    dns-packet "^1.3.1"
-    thunky "^1.0.2"
-
-mute-stream@0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
-  integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
-
-mz@^2.4.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
-  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
-  dependencies:
-    any-promise "^1.0.0"
-    object-assign "^4.0.1"
-    thenify-all "^1.0.0"
-
-nan@^2.12.1:
-  version "2.14.2"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
-  integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
-
-nanomatch@^1.2.9:
-  version "1.2.13"
-  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
-  integrity sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==
-  dependencies:
-    arr-diff "^4.0.0"
-    array-unique "^0.3.2"
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    fragment-cache "^0.2.1"
-    is-windows "^1.0.2"
-    kind-of "^6.0.2"
-    object.pick "^1.3.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
-
-natural-compare@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
-  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
-
-negotiator@0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
-  integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
-
-neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
-  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
-
-nice-try@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
-  integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
-
-no-case@^2.2.0:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
-  integrity sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==
-  dependencies:
-    lower-case "^1.1.1"
-
-node-forge@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3"
-  integrity sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==
-
-node-ipc@^9.1.1:
-  version "9.1.4"
-  resolved "https://registry.yarnpkg.com/node-ipc/-/node-ipc-9.1.4.tgz#2acf962681afdac2602876d98fe6434d54d9bd3c"
-  integrity sha512-A+f0mn2KxUt1uRTSd5ktxQUsn2OEhj5evo7NUi/powBzMSZ0vocdzDjlq9QN2v3LH6CJi3e5xAenpZ1QwU5A8g==
-  dependencies:
-    event-pubsub "4.3.0"
-    js-message "1.0.7"
-    js-queue "2.0.2"
-
-node-libs-browser@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.1.tgz#b64f513d18338625f90346d27b0d235e631f6425"
-  integrity sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q==
-  dependencies:
-    assert "^1.1.1"
-    browserify-zlib "^0.2.0"
-    buffer "^4.3.0"
-    console-browserify "^1.1.0"
-    constants-browserify "^1.0.0"
-    crypto-browserify "^3.11.0"
-    domain-browser "^1.1.1"
-    events "^3.0.0"
-    https-browserify "^1.0.0"
-    os-browserify "^0.3.0"
-    path-browserify "0.0.1"
-    process "^0.11.10"
-    punycode "^1.2.4"
-    querystring-es3 "^0.2.0"
-    readable-stream "^2.3.3"
-    stream-browserify "^2.0.1"
-    stream-http "^2.7.2"
-    string_decoder "^1.0.0"
-    timers-browserify "^2.0.4"
-    tty-browserify "0.0.0"
-    url "^0.11.0"
-    util "^0.11.0"
-    vm-browserify "^1.0.1"
-
-node-releases@^1.1.70:
-  version "1.1.71"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.71.tgz#cb1334b179896b1c89ecfdd4b725fb7bbdfc7dbb"
-  integrity sha512-zR6HoT6LrLCRBwukmrVbHv0EpEQjksO6GmFcZQQuCAy139BEsoVKPYnf3jongYW83fAa1torLGYwxxky/p28sg==
-
-normalize-package-data@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
-  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
-  dependencies:
-    hosted-git-info "^2.1.4"
-    resolve "^1.10.0"
-    semver "2 || 3 || 4 || 5"
-    validate-npm-package-license "^3.0.1"
-
-normalize-path@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-1.0.0.tgz#32d0e472f91ff345701c15a8311018d3b0a90379"
-  integrity sha1-MtDkcvkf80VwHBWoMRAY07CpA3k=
-
-normalize-path@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
-  integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=
-  dependencies:
-    remove-trailing-separator "^1.0.1"
-
-normalize-path@^3.0.0, normalize-path@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
-  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
-
-normalize-range@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
-  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
-
-normalize-url@1.9.1:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
-  integrity sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=
-  dependencies:
-    object-assign "^4.0.1"
-    prepend-http "^1.0.0"
-    query-string "^4.1.0"
-    sort-keys "^1.0.0"
-
-normalize-url@^3.0.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
-  integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
-
-npm-run-path@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
-  integrity sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=
-  dependencies:
-    path-key "^2.0.0"
-
-npm-run-path@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
-  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
-  dependencies:
-    path-key "^3.0.0"
-
-nth-check@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
-  integrity sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==
-  dependencies:
-    boolbase "~1.0.0"
-
-null-loader@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/null-loader/-/null-loader-3.0.0.tgz#3e2b6c663c5bda8c73a54357d8fa0708dc61b245"
-  integrity sha512-hf5sNLl8xdRho4UPBOOeoIwT3WhjYcMUQm0zj44EhD6UscMAz72o2udpoDFBgykucdEDGIcd6SXbc/G6zssbzw==
-  dependencies:
-    loader-utils "^1.2.3"
-    schema-utils "^1.0.0"
-
-num2fraction@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
-  integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
-
-oauth-sign@~0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
-  integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
-
-object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
-
-object-copy@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
-  integrity sha1-fn2Fi3gb18mRpBupde04EnVOmYw=
-  dependencies:
-    copy-descriptor "^0.1.0"
-    define-property "^0.2.5"
-    kind-of "^3.0.3"
-
-object-hash@^1.1.4:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df"
-  integrity sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==
-
-object-inspect@^1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.9.0.tgz#c90521d74e1127b67266ded3394ad6116986533a"
-  integrity sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==
-
-object-is@^1.0.1:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
-  integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-
-object-keys@^1.0.12, object-keys@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
-  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
-
-object-visit@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
-  integrity sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=
-  dependencies:
-    isobject "^3.0.0"
-
-object.assign@^4.1.0, object.assign@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
-  integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
-  dependencies:
-    call-bind "^1.0.0"
-    define-properties "^1.1.3"
-    has-symbols "^1.0.1"
-    object-keys "^1.1.1"
-
-object.getownpropertydescriptors@^2.0.3, object.getownpropertydescriptors@^2.1.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.2.tgz#1bd63aeacf0d5d2d2f31b5e393b03a7c601a23f7"
-  integrity sha512-WtxeKSzfBjlzL+F9b7M7hewDzMwy+C8NRssHd1YrNlzHzIDrXcXiNOMrezdAEM4UXixgV+vvnyBeN7Rygl2ttQ==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.2"
-
-object.pick@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
-  integrity sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=
-  dependencies:
-    isobject "^3.0.1"
-
-object.values@^1.1.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.3.tgz#eaa8b1e17589f02f698db093f7c62ee1699742ee"
-  integrity sha512-nkF6PfDB9alkOUxpf1HNm/QlkeW3SReqL5WXeBLpEJJnlPSvRaDQpW3gQTksTN3fgJX4hL42RzKyOin6ff3tyw==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.2"
-    has "^1.0.3"
-
-obuf@^1.0.0, obuf@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
-  integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==
-
-on-finished@~2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
-  integrity sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=
-  dependencies:
-    ee-first "1.1.1"
-
-on-headers@~1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.2.tgz#772b0ae6aaa525c399e489adfad90c403eb3c28f"
-  integrity sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==
-
-once@^1.3.0, once@^1.3.1, once@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
-  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
-  dependencies:
-    wrappy "1"
-
-onetime@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
-  integrity sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=
-  dependencies:
-    mimic-fn "^1.0.0"
-
-onetime@^5.1.0:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
-  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
-  dependencies:
-    mimic-fn "^2.1.0"
-
-open@^6.3.0:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/open/-/open-6.4.0.tgz#5c13e96d0dc894686164f18965ecfe889ecfc8a9"
-  integrity sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==
-  dependencies:
-    is-wsl "^1.1.0"
-
-opener@^1.5.1:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
-  integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
-
-opn@^5.5.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"
-  integrity sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==
-  dependencies:
-    is-wsl "^1.1.0"
-
-optimism@^0.10.0:
-  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/optimism/-/optimism-0.10.3.tgz#163268fdc741dea2fb50f300bedda80356445fd7"
-  integrity sha512-9A5pqGoQk49H6Vhjb9kPgAeeECfUDF6aIICbMDL23kDLStBn1MWk3YvcZ4xWF9CsSf6XEgvRLkXy4xof/56vVw==
-  dependencies:
-    "@wry/context" "^0.4.0"
-
-optionator@^0.8.3:
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
-  integrity sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==
-  dependencies:
-    deep-is "~0.1.3"
-    fast-levenshtein "~2.0.6"
-    levn "~0.3.0"
-    prelude-ls "~1.1.2"
-    type-check "~0.3.2"
-    word-wrap "~1.2.3"
-
-ora@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/ora/-/ora-3.4.0.tgz#bf0752491059a3ef3ed4c85097531de9fdbcd318"
-  integrity sha512-eNwHudNbO1folBP3JsZ19v9azXWtQZjICdr3Q0TDPIaeBQ3mXLrh54wM+er0+hSp+dWKf+Z8KM58CYzEyIYxYg==
-  dependencies:
-    chalk "^2.4.2"
-    cli-cursor "^2.1.0"
-    cli-spinners "^2.0.0"
-    log-symbols "^2.2.0"
-    strip-ansi "^5.2.0"
-    wcwidth "^1.0.1"
-
-original@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/original/-/original-1.0.2.tgz#e442a61cffe1c5fd20a65f3261c26663b303f25f"
-  integrity sha512-hyBVl6iqqUOJ8FqRe+l/gS8H+kKYjrEndd5Pm1MfBtsEKA038HkkdbAl/72EAXGyonD/PFsvmVG+EvcIpliMBg==
-  dependencies:
-    url-parse "^1.4.3"
-
-os-browserify@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
-  integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
-
-os-tmpdir@~1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
-  integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
-
-p-finally@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
-  integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
-
-p-finally@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-2.0.1.tgz#bd6fcaa9c559a096b680806f4d657b3f0f240561"
-  integrity sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==
-
-p-limit@^2.0.0, p-limit@^2.2.0, p-limit@^2.2.1, p-limit@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
-  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
-  dependencies:
-    p-try "^2.0.0"
-
-p-locate@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
-  integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==
-  dependencies:
-    p-limit "^2.0.0"
-
-p-locate@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
-  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
-  dependencies:
-    p-limit "^2.2.0"
-
-p-map@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
-  integrity sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==
-
-p-map@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-3.0.0.tgz#d704d9af8a2ba684e2600d9a215983d4141a979d"
-  integrity sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==
-  dependencies:
-    aggregate-error "^3.0.0"
-
-p-retry@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-3.0.1.tgz#316b4c8893e2c8dc1cfa891f406c4b422bebf328"
-  integrity sha512-XE6G4+YTTkT2a0UWb2kjZe8xNwf8bIbnqpc/IS/idOBVhyves0mK5OJgeocjx7q5pvX/6m23xuzVPYT1uGM73w==
-  dependencies:
-    retry "^0.12.0"
-
-p-try@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
-  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
-
-pako@~1.0.5:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
-  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
-
-parallel-transform@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc"
-  integrity sha512-P2vSmIu38uIlvdcU7fDkyrxj33gTUy/ABO5ZUbGowxNCopBq/OoD42bP4UmMrJoPyk4Uqf0mu3mtWBhHCZD8yg==
-  dependencies:
-    cyclist "^1.0.1"
-    inherits "^2.0.3"
-    readable-stream "^2.1.5"
-
-param-case@2.1.x:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
-  integrity sha1-35T9jPZTHs915r75oIWPvHK+Ikc=
-  dependencies:
-    no-case "^2.2.0"
-
-parent-module@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
-  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
-  dependencies:
-    callsites "^3.0.0"
-
-parse-asn1@^5.0.0, parse-asn1@^5.1.5:
-  version "5.1.6"
-  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.6.tgz#385080a3ec13cb62a62d39409cb3e88844cdaed4"
-  integrity sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==
-  dependencies:
-    asn1.js "^5.2.0"
-    browserify-aes "^1.0.0"
-    evp_bytestokey "^1.0.0"
-    pbkdf2 "^3.0.3"
-    safe-buffer "^5.1.1"
-
-parse-json@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
-  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
-  dependencies:
-    error-ex "^1.3.1"
-    json-parse-better-errors "^1.0.1"
-
-parse-json@^5.0.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
-  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    error-ex "^1.3.1"
-    json-parse-even-better-errors "^2.3.0"
-    lines-and-columns "^1.1.6"
-
-parse5-htmlparser2-tree-adapter@^6.0.0:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
-  integrity sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==
-  dependencies:
-    parse5 "^6.0.1"
-
-parse5@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
-  integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
-
-parse5@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
-  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
-
-parseurl@~1.3.2, parseurl@~1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
-  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
-
-pascalcase@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
-  integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=
-
-path-browserify@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a"
-  integrity sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==
-
-path-dirname@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
-  integrity sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=
-
-path-exists@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
-  integrity sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=
-  dependencies:
-    pinkie-promise "^2.0.0"
-
-path-exists@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
-  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
-
-path-exists@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
-  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
-
-path-is-absolute@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
-  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
-
-path-is-inside@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
-  integrity sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=
-
-path-key@^2.0.0, path-key@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
-  integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
-
-path-key@^3.0.0, path-key@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
-  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
-
-path-parse@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
-  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
-
-path-to-regexp@0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
-  integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
-
-path-type@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
-  integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
-  dependencies:
-    pify "^3.0.0"
-
-pbkdf2@^3.0.3:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.1.tgz#cb8724b0fada984596856d1a6ebafd3584654b94"
-  integrity sha512-4Ejy1OPxi9f2tt1rRV7Go7zmfDQ+ZectEQz3VGUQhgq62HtIRPDyG/JtnwIxs6x3uNMwo2V7q1fMvKjb+Tnpqg==
-  dependencies:
-    create-hash "^1.1.2"
-    create-hmac "^1.1.4"
-    ripemd160 "^2.0.1"
-    safe-buffer "^5.0.1"
-    sha.js "^2.4.8"
-
-performance-now@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
-  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
-
-picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
-  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
-
-pify@^2.0.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
-  integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
-
-pify@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
-  integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
-
-pify@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
-  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
-
-pinkie-promise@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
-  integrity sha1-ITXW36ejWMBprJsXh3YogihFD/o=
-  dependencies:
-    pinkie "^2.0.0"
-
-pinkie@^2.0.0:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
-  integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
-
-pkg-dir@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-1.0.0.tgz#7a4b508a8d5bb2d629d447056ff4e9c9314cf3d4"
-  integrity sha1-ektQio1bstYp1EcFb/TpyTFM89Q=
-  dependencies:
-    find-up "^1.0.0"
-
-pkg-dir@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
-  integrity sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==
-  dependencies:
-    find-up "^3.0.0"
-
-pkg-dir@^4.1.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
-  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
-  dependencies:
-    find-up "^4.0.0"
-
-pnp-webpack-plugin@^1.6.4:
-  version "1.6.4"
-  resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz#c9711ac4dc48a685dabafc86f8b6dd9f8df84149"
-  integrity sha512-7Wjy+9E3WwLOEL30D+m8TSTF7qJJUJLONBnwQp0518siuMxUQUbgZwssaFX+QKlZkjHZcw/IpZCt/H0srrntSg==
-  dependencies:
-    ts-pnp "^1.1.6"
-
-portfinder@^1.0.26:
-  version "1.0.28"
-  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
-  integrity sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==
-  dependencies:
-    async "^2.6.2"
-    debug "^3.1.1"
-    mkdirp "^0.5.5"
-
-posix-character-classes@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
-  integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
-
-postcss-calc@^7.0.1:
-  version "7.0.5"
-  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.5.tgz#f8a6e99f12e619c2ebc23cf6c486fdc15860933e"
-  integrity sha512-1tKHutbGtLtEZF6PT4JSihCHfIVldU72mZ8SdZHIYriIZ9fh9k9aWSppaT8rHsyI3dX+KSR+W+Ix9BMY3AODrg==
-  dependencies:
-    postcss "^7.0.27"
-    postcss-selector-parser "^6.0.2"
-    postcss-value-parser "^4.0.2"
-
-postcss-colormin@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.3.tgz#ae060bce93ed794ac71264f08132d550956bd381"
-  integrity sha512-WyQFAdDZpExQh32j0U0feWisZ0dmOtPl44qYmJKkq9xFWY3p+4qnRzCHeNrkeRhwPHz9bQ3mo0/yVkaply0MNw==
-  dependencies:
-    browserslist "^4.0.0"
-    color "^3.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-convert-values@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-4.0.1.tgz#ca3813ed4da0f812f9d43703584e449ebe189a7f"
-  integrity sha512-Kisdo1y77KUC0Jmn0OXU/COOJbzM8cImvw1ZFsBgBgMgb1iL23Zs/LXRe3r+EZqM3vGYKdQ2YJVQ5VkJI+zEJQ==
-  dependencies:
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-discard-comments@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz#1fbabd2c246bff6aaad7997b2b0918f4d7af4033"
-  integrity sha512-RJutN259iuRf3IW7GZyLM5Sw4GLTOH8FmsXBnv8Ab/Tc2k4SR4qbV4DNbyyY4+Sjo362SyDmW2DQ7lBSChrpkg==
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-discard-duplicates@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-4.0.2.tgz#3fe133cd3c82282e550fc9b239176a9207b784eb"
-  integrity sha512-ZNQfR1gPNAiXZhgENFfEglF93pciw0WxMkJeVmw8eF+JZBbMD7jp6C67GqJAXVZP2BWbOztKfbsdmMp/k8c6oQ==
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-discard-empty@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-4.0.1.tgz#c8c951e9f73ed9428019458444a02ad90bb9f765"
-  integrity sha512-B9miTzbznhDjTfjvipfHoqbWKwd0Mj+/fL5s1QOz06wufguil+Xheo4XpOnc4NqKYBCNqqEzgPv2aPBIJLox0w==
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-discard-overridden@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-4.0.1.tgz#652aef8a96726f029f5e3e00146ee7a4e755ff57"
-  integrity sha512-IYY2bEDD7g1XM1IDEsUT4//iEYCxAmP5oDSFMVU/JVvT7gh+l4fmjciLqGgwjdWpQIdb0Che2VX00QObS5+cTg==
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-load-config@^2.0.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.2.tgz#c5ea504f2c4aef33c7359a34de3573772ad7502a"
-  integrity sha512-/rDeGV6vMUo3mwJZmeHfEDvwnTKKqQ0S7OHUi/kJvvtx3aWtyWG2/0ZWnzCt2keEclwN6Tf0DST2v9kITdOKYw==
-  dependencies:
-    cosmiconfig "^5.0.0"
-    import-cwd "^2.0.0"
-
-postcss-loader@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-3.0.0.tgz#6b97943e47c72d845fa9e03f273773d4e8dd6c2d"
-  integrity sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA==
-  dependencies:
-    loader-utils "^1.1.0"
-    postcss "^7.0.0"
-    postcss-load-config "^2.0.0"
-    schema-utils "^1.0.0"
-
-postcss-merge-longhand@^4.0.11:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz#62f49a13e4a0ee04e7b98f42bb16062ca2549e24"
-  integrity sha512-alx/zmoeXvJjp7L4mxEMjh8lxVlDFX1gqWHzaaQewwMZiVhLo42TEClKaeHbRf6J7j82ZOdTJ808RtN0ZOZwvw==
-  dependencies:
-    css-color-names "0.0.4"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-    stylehacks "^4.0.0"
-
-postcss-merge-rules@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-4.0.3.tgz#362bea4ff5a1f98e4075a713c6cb25aefef9a650"
-  integrity sha512-U7e3r1SbvYzO0Jr3UT/zKBVgYYyhAz0aitvGIYOYK5CPmkNih+WDSsS5tvPrJ8YMQYlEMvsZIiqmn7HdFUaeEQ==
-  dependencies:
-    browserslist "^4.0.0"
-    caniuse-api "^3.0.0"
-    cssnano-util-same-parent "^4.0.0"
-    postcss "^7.0.0"
-    postcss-selector-parser "^3.0.0"
-    vendors "^1.0.0"
-
-postcss-minify-font-values@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz#cd4c344cce474343fac5d82206ab2cbcb8afd5a6"
-  integrity sha512-j85oO6OnRU9zPf04+PZv1LYIYOprWm6IA6zkXkrJXyRveDEuQggG6tvoy8ir8ZwjLxLuGfNkCZEQG7zan+Hbtg==
-  dependencies:
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-minify-gradients@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-4.0.2.tgz#93b29c2ff5099c535eecda56c4aa6e665a663471"
-  integrity sha512-qKPfwlONdcf/AndP1U8SJ/uzIJtowHlMaSioKzebAXSG4iJthlWC9iSWznQcX4f66gIWX44RSA841HTHj3wK+Q==
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    is-color-stop "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-minify-params@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-4.0.2.tgz#6b9cef030c11e35261f95f618c90036d680db874"
-  integrity sha512-G7eWyzEx0xL4/wiBBJxJOz48zAKV2WG3iZOqVhPet/9geefm/Px5uo1fzlHu+DOjT+m0Mmiz3jkQzVHe6wxAWg==
-  dependencies:
-    alphanum-sort "^1.0.0"
-    browserslist "^4.0.0"
-    cssnano-util-get-arguments "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-    uniqs "^2.0.0"
-
-postcss-minify-selectors@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-4.0.2.tgz#e2e5eb40bfee500d0cd9243500f5f8ea4262fbd8"
-  integrity sha512-D5S1iViljXBj9kflQo4YutWnJmwm8VvIsU1GeXJGiG9j8CIg9zs4voPMdQDUmIxetUOh60VilsNzCiAFTOqu3g==
-  dependencies:
-    alphanum-sort "^1.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-selector-parser "^3.0.0"
-
-postcss-modules-extract-imports@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e"
-  integrity sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==
-  dependencies:
-    postcss "^7.0.5"
-
-postcss-modules-local-by-default@^3.0.2:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.3.tgz#bb14e0cc78279d504dbdcbfd7e0ca28993ffbbb0"
-  integrity sha512-e3xDq+LotiGesympRlKNgaJ0PCzoUIdpH0dj47iWAui/kyTgh3CiAr1qP54uodmJhl6p9rN6BoNcdEDVJx9RDw==
-  dependencies:
-    icss-utils "^4.1.1"
-    postcss "^7.0.32"
-    postcss-selector-parser "^6.0.2"
-    postcss-value-parser "^4.1.0"
-
-postcss-modules-scope@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz#385cae013cc7743f5a7d7602d1073a89eaae62ee"
-  integrity sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==
-  dependencies:
-    postcss "^7.0.6"
-    postcss-selector-parser "^6.0.0"
-
-postcss-modules-values@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz#5b5000d6ebae29b4255301b4a3a54574423e7f10"
-  integrity sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==
-  dependencies:
-    icss-utils "^4.0.0"
-    postcss "^7.0.6"
-
-postcss-normalize-charset@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz#8b35add3aee83a136b0471e0d59be58a50285dd4"
-  integrity sha512-gMXCrrlWh6G27U0hF3vNvR3w8I1s2wOBILvA87iNXaPvSNo5uZAMYsZG7XjCUf1eVxuPfyL4TJ7++SGZLc9A3g==
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-normalize-display-values@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.2.tgz#0dbe04a4ce9063d4667ed2be476bb830c825935a"
-  integrity sha512-3F2jcsaMW7+VtRMAqf/3m4cPFhPD3EFRgNs18u+k3lTJJlVe7d0YPO+bnwqo2xg8YiRpDXJI2u8A0wqJxMsQuQ==
-  dependencies:
-    cssnano-util-get-match "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-positions@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-4.0.2.tgz#05f757f84f260437378368a91f8932d4b102917f"
-  integrity sha512-Dlf3/9AxpxE+NF1fJxYDeggi5WwV35MXGFnnoccP/9qDtFrTArZ0D0R+iKcg5WsUd8nUYMIl8yXDCtcrT8JrdA==
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-repeat-style@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.2.tgz#c4ebbc289f3991a028d44751cbdd11918b17910c"
-  integrity sha512-qvigdYYMpSuoFs3Is/f5nHdRLJN/ITA7huIoCyqqENJe9PvPmLhNLMu7QTjPdtnVf6OcYYO5SHonx4+fbJE1+Q==
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    cssnano-util-get-match "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-string@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-4.0.2.tgz#cd44c40ab07a0c7a36dc5e99aace1eca4ec2690c"
-  integrity sha512-RrERod97Dnwqq49WNz8qo66ps0swYZDSb6rM57kN2J+aoyEAJfZ6bMx0sx/F9TIEX0xthPGCmeyiam/jXif0eA==
-  dependencies:
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-timing-functions@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.2.tgz#8e009ca2a3949cdaf8ad23e6b6ab99cb5e7d28d9"
-  integrity sha512-acwJY95edP762e++00Ehq9L4sZCEcOPyaHwoaFOhIwWCDfik6YvqsYNxckee65JHLKzuNSSmAdxwD2Cud1Z54A==
-  dependencies:
-    cssnano-util-get-match "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-unicode@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-4.0.1.tgz#841bd48fdcf3019ad4baa7493a3d363b52ae1cfb"
-  integrity sha512-od18Uq2wCYn+vZ/qCOeutvHjB5jm57ToxRaMeNuf0nWVHaP9Hua56QyMF6fs/4FSUnVIw0CBPsU0K4LnBPwYwg==
-  dependencies:
-    browserslist "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-url@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-4.0.1.tgz#10e437f86bc7c7e58f7b9652ed878daaa95faae1"
-  integrity sha512-p5oVaF4+IHwu7VpMan/SSpmpYxcJMtkGppYf0VbdH5B6hN8YNmVyJLuY9FmLQTzY3fag5ESUUHDqM+heid0UVA==
-  dependencies:
-    is-absolute-url "^2.0.0"
-    normalize-url "^3.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-whitespace@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.2.tgz#bf1d4070fe4fcea87d1348e825d8cc0c5faa7d82"
-  integrity sha512-tO8QIgrsI3p95r8fyqKV+ufKlSHh9hMJqACqbv2XknufqEDhDvbguXGBBqxw9nsQoXWf0qOqppziKJKHMD4GtA==
-  dependencies:
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-ordered-values@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-4.1.2.tgz#0cf75c820ec7d5c4d280189559e0b571ebac0eee"
-  integrity sha512-2fCObh5UanxvSxeXrtLtlwVThBvHn6MQcu4ksNT2tsaV2Fg76R2CV98W7wNSlX+5/pFwEyaDwKLLoEV7uRybAw==
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-reduce-initial@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz#7fd42ebea5e9c814609639e2c2e84ae270ba48df"
-  integrity sha512-gKWmR5aUulSjbzOfD9AlJiHCGH6AEVLaM0AV+aSioxUDd16qXP1PCh8d1/BGVvpdWn8k/HiK7n6TjeoXN1F7DA==
-  dependencies:
-    browserslist "^4.0.0"
-    caniuse-api "^3.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-
-postcss-reduce-transforms@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.2.tgz#17efa405eacc6e07be3414a5ca2d1074681d4e29"
-  integrity sha512-EEVig1Q2QJ4ELpJXMZR8Vt5DQx8/mo+dGWSR7vWXqcob2gQLyQGsionYcGKATXvQzMPn6DSN1vTN7yFximdIAg==
-  dependencies:
-    cssnano-util-get-match "^4.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-selector-parser@^3.0.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz#b310f5c4c0fdaf76f94902bbaa30db6aa84f5270"
-  integrity sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==
-  dependencies:
-    dot-prop "^5.2.0"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-
-postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
-  version "6.0.4"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz#56075a1380a04604c38b063ea7767a129af5c2b3"
-  integrity sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==
-  dependencies:
-    cssesc "^3.0.0"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-    util-deprecate "^1.0.2"
-
-postcss-svgo@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.2.tgz#17b997bc711b333bab143aaed3b8d3d6e3d38258"
-  integrity sha512-C6wyjo3VwFm0QgBy+Fu7gCYOkCmgmClghO+pjcxvrcBKtiKt0uCF+hvbMO1fyv5BMImRK90SMb+dwUnfbGd+jw==
-  dependencies:
-    is-svg "^3.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-    svgo "^1.0.0"
-
-postcss-unique-selectors@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-4.0.1.tgz#9446911f3289bfd64c6d680f073c03b1f9ee4bac"
-  integrity sha512-+JanVaryLo9QwZjKrmJgkI4Fn8SBgRO6WXQBJi7KiAVPlmxikB5Jzc4EvXMT2H0/m0RjrVVm9rGNhZddm/8Spg==
-  dependencies:
-    alphanum-sort "^1.0.0"
-    postcss "^7.0.0"
-    uniqs "^2.0.0"
-
-postcss-value-parser@^3.0.0:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
-  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
-
-postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
-  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
-
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
-  version "7.0.35"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
-  integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
-  dependencies:
-    chalk "^2.4.2"
-    source-map "^0.6.1"
-    supports-color "^6.1.0"
-
-prelude-ls@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
-  integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
-
-prepend-http@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
-  integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
-
-prettier@^1.18.2:
-  version "1.19.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
-  integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
-
-pretty-error@^2.0.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.2.tgz#be89f82d81b1c86ec8fdfbc385045882727f93b6"
-  integrity sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw==
-  dependencies:
-    lodash "^4.17.20"
-    renderkid "^2.0.4"
-
-process-nextick-args@~2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
-  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
-
-process@^0.11.10:
-  version "0.11.10"
-  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
-  integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
-
-progress@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
-  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
-
-promise-inflight@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
-  integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
-
-promise@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e"
-  integrity sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==
-  dependencies:
-    asap "~2.0.6"
-
-proxy-addr@~2.0.5:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf"
-  integrity sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==
-  dependencies:
-    forwarded "~0.1.2"
-    ipaddr.js "1.9.1"
-
-prr@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
-  integrity sha1-0/wRS6BplaRexok/SEzrHXj19HY=
-
-pseudomap@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
-  integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
-
-psl@^1.1.28:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
-  integrity sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==
-
-public-encrypt@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0"
-  integrity sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==
-  dependencies:
-    bn.js "^4.1.0"
-    browserify-rsa "^4.0.0"
-    create-hash "^1.1.0"
-    parse-asn1 "^5.0.0"
-    randombytes "^2.0.1"
-    safe-buffer "^5.1.2"
-
-pump@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
-  integrity sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==
-  dependencies:
-    end-of-stream "^1.1.0"
-    once "^1.3.1"
-
-pump@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
-  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
-  dependencies:
-    end-of-stream "^1.1.0"
-    once "^1.3.1"
-
-pumpify@^1.3.3:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.1.tgz#36513be246ab27570b1a374a5ce278bfd74370ce"
-  integrity sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==
-  dependencies:
-    duplexify "^3.6.0"
-    inherits "^2.0.3"
-    pump "^2.0.0"
-
-punycode@1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
-  integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=
-
-punycode@^1.2.4:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
-  integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
-
-punycode@^2.1.0, punycode@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
-  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
-
-q@^1.1.2:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
-  integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
-
-qs@6.7.0:
-  version "6.7.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
-  integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
-
-qs@~6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
-  integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
-
-query-string@^4.1.0:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
-  integrity sha1-u7aTucqRXCMlFbIosaArYJBD2+s=
-  dependencies:
-    object-assign "^4.1.0"
-    strict-uri-encode "^1.0.0"
-
-querystring-es3@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
-  integrity sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=
-
-querystring@0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
-  integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
-
-querystringify@^2.1.1:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
-  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
-
-randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
-  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
-  dependencies:
-    safe-buffer "^5.1.0"
-
-randomfill@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"
-  integrity sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==
-  dependencies:
-    randombytes "^2.0.5"
-    safe-buffer "^5.1.0"
-
-range-parser@^1.2.1, range-parser@~1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
-  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
-
-raw-body@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"
-  integrity sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==
-  dependencies:
-    bytes "3.1.0"
-    http-errors "1.7.2"
-    iconv-lite "0.4.24"
-    unpipe "1.0.0"
-
-read-pkg@^5.1.1:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
-  integrity sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==
-  dependencies:
-    "@types/normalize-package-data" "^2.4.0"
-    normalize-package-data "^2.5.0"
-    parse-json "^5.0.0"
-    type-fest "^0.6.0"
-
-"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
-  version "2.3.7"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
-  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~2.0.0"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.1.1"
-    util-deprecate "~1.0.1"
-
-readable-stream@^3.0.6, readable-stream@^3.1.1, readable-stream@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
-  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
-  dependencies:
-    inherits "^2.0.3"
-    string_decoder "^1.1.1"
-    util-deprecate "^1.0.1"
-
-readdirp@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
-  integrity sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==
-  dependencies:
-    graceful-fs "^4.1.11"
-    micromatch "^3.1.10"
-    readable-stream "^2.0.2"
-
-readdirp@~3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"
-  integrity sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==
-  dependencies:
-    picomatch "^2.2.1"
-
-rechoir@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
-  integrity sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=
-  dependencies:
-    resolve "^1.1.6"
-
-regenerate-unicode-properties@^8.2.0:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
-  integrity sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==
-  dependencies:
-    regenerate "^1.4.0"
-
-regenerate@^1.4.0:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
-  integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
-
-regenerator-runtime@^0.13.4:
-  version "0.13.7"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
-  integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
-
-regenerator-transform@^0.14.2:
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.5.tgz#c98da154683671c9c4dcb16ece736517e1b7feb4"
-  integrity sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==
-  dependencies:
-    "@babel/runtime" "^7.8.4"
-
-regex-not@^1.0.0, regex-not@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
-  integrity sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==
-  dependencies:
-    extend-shallow "^3.0.2"
-    safe-regex "^1.1.0"
-
-regexp.prototype.flags@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz#7ef352ae8d159e758c0eadca6f8fcb4eef07be26"
-  integrity sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-
-regexpp@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
-  integrity sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==
-
-regexpu-core@^4.7.1:
-  version "4.7.1"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.1.tgz#2dea5a9a07233298fbf0db91fa9abc4c6e0f8ad6"
-  integrity sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==
-  dependencies:
-    regenerate "^1.4.0"
-    regenerate-unicode-properties "^8.2.0"
-    regjsgen "^0.5.1"
-    regjsparser "^0.6.4"
-    unicode-match-property-ecmascript "^1.0.4"
-    unicode-match-property-value-ecmascript "^1.2.0"
-
-regjsgen@^0.5.1:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.2.tgz#92ff295fb1deecbf6ecdab2543d207e91aa33733"
-  integrity sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==
-
-regjsparser@^0.6.4:
-  version "0.6.9"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.9.tgz#b489eef7c9a2ce43727627011429cf833a7183e6"
-  integrity sha512-ZqbNRz1SNjLAiYuwY0zoXW8Ne675IX5q+YHioAGbCw4X96Mjl2+dcX9B2ciaeyYjViDAfvIjFpQjJgLttTEERQ==
-  dependencies:
-    jsesc "~0.5.0"
-
-relateurl@0.2.x:
-  version "0.2.7"
-  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
-  integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
-
-remove-trailing-separator@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
-  integrity sha1-wkvOKig62tW8P1jg1IJJuSN52O8=
-
-renderkid@^2.0.4:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.5.tgz#483b1ac59c6601ab30a7a596a5965cabccfdd0a5"
-  integrity sha512-ccqoLg+HLOHq1vdfYNm4TBeaCDIi1FLt3wGojTDSvdewUv65oTmI3cnT2E4hRjl1gzKZIPK+KZrXzlUYKnR+vQ==
-  dependencies:
-    css-select "^2.0.2"
-    dom-converter "^0.2"
-    htmlparser2 "^3.10.1"
-    lodash "^4.17.20"
-    strip-ansi "^3.0.0"
-
-repeat-element@^1.1.2:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
-  integrity sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==
-
-repeat-string@^1.6.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
-  integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
-
-request@^2.88.2:
-  version "2.88.2"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
-  integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
-  dependencies:
-    aws-sign2 "~0.7.0"
-    aws4 "^1.8.0"
-    caseless "~0.12.0"
-    combined-stream "~1.0.6"
-    extend "~3.0.2"
-    forever-agent "~0.6.1"
-    form-data "~2.3.2"
-    har-validator "~5.1.3"
-    http-signature "~1.2.0"
-    is-typedarray "~1.0.0"
-    isstream "~0.1.2"
-    json-stringify-safe "~5.0.1"
-    mime-types "~2.1.19"
-    oauth-sign "~0.9.0"
-    performance-now "^2.1.0"
-    qs "~6.5.2"
-    safe-buffer "^5.1.2"
-    tough-cookie "~2.5.0"
-    tunnel-agent "^0.6.0"
-    uuid "^3.3.2"
-
-require-directory@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
-  integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
-
-require-main-filename@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
-  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
-
-requires-port@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
-  integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
-
-resolve-cwd@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
-  integrity sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=
-  dependencies:
-    resolve-from "^3.0.0"
-
-resolve-from@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
-  integrity sha1-six699nWiBvItuZTM17rywoYh0g=
-
-resolve-from@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
-  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
-
-resolve-url@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
-  integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
-
-resolve@^1.1.6, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2:
-  version "1.20.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
-  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
-  dependencies:
-    is-core-module "^2.2.0"
-    path-parse "^1.0.6"
-
-restore-cursor@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
-  integrity sha1-n37ih/gv0ybU/RYpI9YhKe7g368=
-  dependencies:
-    onetime "^2.0.0"
-    signal-exit "^3.0.2"
-
-restore-cursor@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
-  integrity sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==
-  dependencies:
-    onetime "^5.1.0"
-    signal-exit "^3.0.2"
-
-ret@~0.1.10:
-  version "0.1.15"
-  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
-  integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
-
-retry@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
-  integrity sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=
-
-rgb-regex@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
-  integrity sha1-wODWiC3w4jviVKR16O3UGRX+rrE=
-
-rgba-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
-  integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
-
-rimraf@2.6.3:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
-  integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
-  dependencies:
-    glob "^7.1.3"
-
-rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.3, rimraf@^2.7.1:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
-  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
-  dependencies:
-    glob "^7.1.3"
-
-ripemd160@^2.0.0, ripemd160@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
-  integrity sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==
-  dependencies:
-    hash-base "^3.0.0"
-    inherits "^2.0.1"
-
-run-async@^2.4.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
-  integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
-
-run-queue@^1.0.0, run-queue@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
-  integrity sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=
-  dependencies:
-    aproba "^1.1.1"
-
-rxjs@^6.6.0:
-  version "6.6.6"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.6.tgz#14d8417aa5a07c5e633995b525e1e3c0dec03b70"
-  integrity sha512-/oTwee4N4iWzAMAL9xdGKjkEHmIwupR3oXbQjCKywF1BeFohswF3vZdogbmEF6pZkOsXTzWkrZszrWpQTByYVg==
-  dependencies:
-    tslib "^1.9.0"
-
-safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
-  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
-
-safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@~5.2.0:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
-  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
-
-safe-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
-  integrity sha1-QKNmnzsHfR6UPURinhV91IAjvy4=
-  dependencies:
-    ret "~0.1.10"
-
-"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
-  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
-
-sass-loader@^8.0.0:
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-8.0.2.tgz#debecd8c3ce243c76454f2e8290482150380090d"
-  integrity sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==
-  dependencies:
-    clone-deep "^4.0.1"
-    loader-utils "^1.2.3"
-    neo-async "^2.6.1"
-    schema-utils "^2.6.1"
-    semver "^6.3.0"
-
-sass@^1.19.0:
-  version "1.32.8"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.32.8.tgz#f16a9abd8dc530add8834e506878a2808c037bdc"
-  integrity sha512-Sl6mIeGpzjIUZqvKnKETfMf0iDAswD9TNlv13A7aAF3XZlRPMq4VvJWBC2N2DXbp94MQVdNSFG6LfF/iOXrPHQ==
-  dependencies:
-    chokidar ">=2.0.0 <4.0.0"
-
-sax@~1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
-  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
-
-schema-utils@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
-  integrity sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==
-  dependencies:
-    ajv "^6.1.0"
-    ajv-errors "^1.0.0"
-    ajv-keywords "^3.1.0"
-
-schema-utils@^2.0.0, schema-utils@^2.5.0, schema-utils@^2.6.1, schema-utils@^2.6.5, schema-utils@^2.6.6, schema-utils@^2.7.0:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
-  integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
-  dependencies:
-    "@types/json-schema" "^7.0.5"
-    ajv "^6.12.4"
-    ajv-keywords "^3.5.2"
-
-schema-utils@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.0.0.tgz#67502f6aa2b66a2d4032b4279a2944978a0913ef"
-  integrity sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==
-  dependencies:
-    "@types/json-schema" "^7.0.6"
-    ajv "^6.12.5"
-    ajv-keywords "^3.5.2"
-
-select-hose@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
-  integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
-
-selfsigned@^1.10.8:
-  version "1.10.8"
-  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.8.tgz#0d17208b7d12c33f8eac85c41835f27fc3d81a30"
-  integrity sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==
-  dependencies:
-    node-forge "^0.10.0"
-
-"semver@2 || 3 || 4 || 5", semver@^5.5.0, semver@^5.6.0:
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
-  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
-
-semver@7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
-  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
-
-semver@^6.0.0, semver@^6.1.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
-  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
-
-semver@^7.1.2:
-  version "7.3.5"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
-  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
-  dependencies:
-    lru-cache "^6.0.0"
-
-send@0.17.1:
-  version "0.17.1"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
-  integrity sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==
-  dependencies:
-    debug "2.6.9"
-    depd "~1.1.2"
-    destroy "~1.0.4"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    fresh "0.5.2"
-    http-errors "~1.7.2"
-    mime "1.6.0"
-    ms "2.1.1"
-    on-finished "~2.3.0"
-    range-parser "~1.2.1"
-    statuses "~1.5.0"
-
-serialize-javascript@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
-  integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
-  dependencies:
-    randombytes "^2.1.0"
-
-serve-index@^1.9.1:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
-  integrity sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=
-  dependencies:
-    accepts "~1.3.4"
-    batch "0.6.1"
-    debug "2.6.9"
-    escape-html "~1.0.3"
-    http-errors "~1.6.2"
-    mime-types "~2.1.17"
-    parseurl "~1.3.2"
-
-serve-static@1.14.1:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.1.tgz#666e636dc4f010f7ef29970a88a674320898b2f9"
-  integrity sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==
-  dependencies:
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    parseurl "~1.3.3"
-    send "0.17.1"
-
-set-blocking@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
-  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
-
-set-value@^2.0.0, set-value@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
-  integrity sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==
-  dependencies:
-    extend-shallow "^2.0.1"
-    is-extendable "^0.1.1"
-    is-plain-object "^2.0.3"
-    split-string "^3.0.1"
-
-setimmediate@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
-  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
-
-setprototypeof@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
-  integrity sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==
-
-setprototypeof@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
-  integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
-
-sha.js@^2.4.0, sha.js@^2.4.8:
-  version "2.4.11"
-  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.11.tgz#37a5cf0b81ecbc6943de109ba2960d1b26584ae7"
-  integrity sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==
-  dependencies:
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
-shallow-clone@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3"
-  integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==
-  dependencies:
-    kind-of "^6.0.2"
-
-shebang-command@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
-  integrity sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=
-  dependencies:
-    shebang-regex "^1.0.0"
-
-shebang-command@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
-  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
-  dependencies:
-    shebang-regex "^3.0.0"
-
-shebang-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
-  integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
-
-shebang-regex@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
-  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
-
-shell-quote@^1.6.1:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
-  integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
-
-shelljs@^0.8.3:
-  version "0.8.4"
-  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.4.tgz#de7684feeb767f8716b326078a8a00875890e3c2"
-  integrity sha512-7gk3UZ9kOfPLIAbslLzyWeGiEqx9e3rxwZM0KE6EL8GlGwjym9Mrlx5/p33bWTu9YG6vcS4MBxYZDHYr5lr8BQ==
-  dependencies:
-    glob "^7.0.0"
-    interpret "^1.0.0"
-    rechoir "^0.6.2"
-
-signal-exit@^3.0.0, signal-exit@^3.0.2:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
-  integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
-
-simple-swizzle@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
-  integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=
-  dependencies:
-    is-arrayish "^0.3.1"
-
-slash@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
-  integrity sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=
-
-slash@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
-  integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
-
-slice-ansi@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
-  integrity sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==
-  dependencies:
-    ansi-styles "^3.2.0"
-    astral-regex "^1.0.0"
-    is-fullwidth-code-point "^2.0.0"
-
-snapdragon-node@^2.0.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
-  integrity sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==
-  dependencies:
-    define-property "^1.0.0"
-    isobject "^3.0.0"
-    snapdragon-util "^3.0.1"
-
-snapdragon-util@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
-  integrity sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==
-  dependencies:
-    kind-of "^3.2.0"
-
-snapdragon@^0.8.1:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.2.tgz#64922e7c565b0e14204ba1aa7d6964278d25182d"
-  integrity sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==
-  dependencies:
-    base "^0.11.1"
-    debug "^2.2.0"
-    define-property "^0.2.5"
-    extend-shallow "^2.0.1"
-    map-cache "^0.2.2"
-    source-map "^0.5.6"
-    source-map-resolve "^0.5.0"
-    use "^3.1.0"
-
-sockjs-client@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.5.0.tgz#2f8ff5d4b659e0d092f7aba0b7c386bd2aa20add"
-  integrity sha512-8Dt3BDi4FYNrCFGTL/HtwVzkARrENdwOUf1ZoW/9p3M8lZdFT35jVdrHza+qgxuG9H3/shR4cuX/X9umUrjP8Q==
-  dependencies:
-    debug "^3.2.6"
-    eventsource "^1.0.7"
-    faye-websocket "^0.11.3"
-    inherits "^2.0.4"
-    json3 "^3.3.3"
-    url-parse "^1.4.7"
-
-sockjs@^0.3.21:
-  version "0.3.21"
-  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.21.tgz#b34ffb98e796930b60a0cfa11904d6a339a7d417"
-  integrity sha512-DhbPFGpxjc6Z3I+uX07Id5ZO2XwYsWOrYjaSeieES78cq+JaJvVe5q/m1uvjIQhXinhIeCFRH6JgXe+mvVMyXw==
-  dependencies:
-    faye-websocket "^0.11.3"
-    uuid "^3.4.0"
-    websocket-driver "^0.7.4"
-
-sort-keys@^1.0.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
-  integrity sha1-RBttTTRnmPG05J6JIK37oOVD+a0=
-  dependencies:
-    is-plain-obj "^1.0.0"
-
-source-list-map@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
-  integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
-
-source-map-resolve@^0.5.0:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
-  integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
-  dependencies:
-    atob "^2.1.2"
-    decode-uri-component "^0.2.0"
-    resolve-url "^0.2.1"
-    source-map-url "^0.4.0"
-    urix "^0.1.0"
-
-source-map-support@~0.5.12:
-  version "0.5.19"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
-  integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
-  dependencies:
-    buffer-from "^1.0.0"
-    source-map "^0.6.0"
-
-source-map-url@^0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
-  integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
-
-source-map@^0.5.0, source-map@^0.5.6:
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
-  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
-
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
-source-map@^0.7.3:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
-  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
-
-spdx-correct@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
-  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
-  dependencies:
-    spdx-expression-parse "^3.0.0"
-    spdx-license-ids "^3.0.0"
-
-spdx-exceptions@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
-  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
-
-spdx-expression-parse@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
-  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
-  dependencies:
-    spdx-exceptions "^2.1.0"
-    spdx-license-ids "^3.0.0"
-
-spdx-license-ids@^3.0.0:
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.7.tgz#e9c18a410e5ed7e12442a549fbd8afa767038d65"
-  integrity sha512-U+MTEOO0AiDzxwFvoa4JVnMV6mZlJKk2sBLt90s7G0Gd0Mlknc7kxEn3nuDPNZRta7O2uy8oLcZLVT+4sqNZHQ==
-
-spdy-transport@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-3.0.0.tgz#00d4863a6400ad75df93361a1608605e5dcdcf31"
-  integrity sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==
-  dependencies:
-    debug "^4.1.0"
-    detect-node "^2.0.4"
-    hpack.js "^2.1.6"
-    obuf "^1.1.2"
-    readable-stream "^3.0.6"
-    wbuf "^1.7.3"
-
-spdy@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/spdy/-/spdy-4.0.2.tgz#b74f466203a3eda452c02492b91fb9e84a27677b"
-  integrity sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==
-  dependencies:
-    debug "^4.1.0"
-    handle-thing "^2.0.0"
-    http-deceiver "^1.2.7"
-    select-hose "^2.0.0"
-    spdy-transport "^3.0.0"
-
-split-string@^3.0.1, split-string@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
-  integrity sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==
-  dependencies:
-    extend-shallow "^3.0.0"
-
-sprintf-js@~1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
-  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
-
-sshpk@^1.7.0:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877"
-  integrity sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==
-  dependencies:
-    asn1 "~0.2.3"
-    assert-plus "^1.0.0"
-    bcrypt-pbkdf "^1.0.0"
-    dashdash "^1.12.0"
-    ecc-jsbn "~0.1.1"
-    getpass "^0.1.1"
-    jsbn "~0.1.0"
-    safer-buffer "^2.0.2"
-    tweetnacl "~0.14.0"
-
-ssri@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.1.tgz#2a3c41b28dd45b62b63676ecb74001265ae9edd8"
-  integrity sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==
-  dependencies:
-    figgy-pudding "^3.5.1"
-
-ssri@^7.0.0, ssri@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/ssri/-/ssri-7.1.0.tgz#92c241bf6de82365b5c7fb4bd76e975522e1294d"
-  integrity sha512-77/WrDZUWocK0mvA5NTRQyveUf+wsrIc6vyrxpS8tVvYBcX215QbafrJR3KtkpskIzoFLqqNuuYQvxaMjXJ/0g==
-  dependencies:
-    figgy-pudding "^3.5.1"
-    minipass "^3.1.1"
-
-stable@^0.1.8:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
-  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
-
-stackframe@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.2.0.tgz#52429492d63c62eb989804c11552e3d22e779303"
-  integrity sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==
-
-static-extend@^0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
-  integrity sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=
-  dependencies:
-    define-property "^0.2.5"
-    object-copy "^0.1.0"
-
-"statuses@>= 1.4.0 < 2", "statuses@>= 1.5.0 < 2", statuses@~1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
-  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
-
-stream-browserify@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"
-  integrity sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==
-  dependencies:
-    inherits "~2.0.1"
-    readable-stream "^2.0.2"
-
-stream-each@^1.1.0:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.3.tgz#ebe27a0c389b04fbcc233642952e10731afa9bae"
-  integrity sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==
-  dependencies:
-    end-of-stream "^1.1.0"
-    stream-shift "^1.0.0"
-
-stream-http@^2.7.2:
-  version "2.8.3"
-  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.8.3.tgz#b2d242469288a5a27ec4fe8933acf623de6514fc"
-  integrity sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==
-  dependencies:
-    builtin-status-codes "^3.0.0"
-    inherits "^2.0.1"
-    readable-stream "^2.3.6"
-    to-arraybuffer "^1.0.0"
-    xtend "^4.0.0"
-
-stream-shift@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
-  integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
-
-strict-uri-encode@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
-  integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
-
-string-width@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
-  integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
-  dependencies:
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^4.0.0"
-
-string-width@^3.0.0, string-width@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
-  integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
-  dependencies:
-    emoji-regex "^7.0.1"
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^5.1.0"
-
-string-width@^4.1.0, string-width@^4.2.0:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5"
-  integrity sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.0"
-
-string.prototype.trimend@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz#e75ae90c2942c63504686c18b287b4a0b1a45f80"
-  integrity sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-
-string.prototype.trimstart@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz#b36399af4ab2999b4c9c648bd7a3fb2bb26feeed"
-  integrity sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-
-string_decoder@^1.0.0, string_decoder@^1.1.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
-  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
-  dependencies:
-    safe-buffer "~5.2.0"
-
-string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
-  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
-  dependencies:
-    safe-buffer "~5.1.0"
-
-strip-ansi@^3.0.0, strip-ansi@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
-  integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
-  dependencies:
-    ansi-regex "^2.0.0"
-
-strip-ansi@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
-  integrity sha1-qEeQIusaw2iocTibY1JixQXuNo8=
-  dependencies:
-    ansi-regex "^3.0.0"
-
-strip-ansi@^5, strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
-  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
-  dependencies:
-    ansi-regex "^4.1.0"
-
-strip-ansi@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
-  integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
-  dependencies:
-    ansi-regex "^5.0.0"
-
-strip-eof@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
-  integrity sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=
-
-strip-final-newline@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
-  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
-
-strip-indent@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
-  integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=
-
-strip-json-comments@^3.0.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
-  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
-
-stylehacks@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
-  integrity sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==
-  dependencies:
-    browserslist "^4.0.0"
-    postcss "^7.0.0"
-    postcss-selector-parser "^3.0.0"
-
-supports-color@^5.3.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
-  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
-  dependencies:
-    has-flag "^3.0.0"
-
-supports-color@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
-  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
-  dependencies:
-    has-flag "^3.0.0"
-
-supports-color@^7.0.0, supports-color@^7.1.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
-  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
-  dependencies:
-    has-flag "^4.0.0"
-
-svg-tags@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
-  integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
-
-svgo@^1.0.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
-  integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
-  dependencies:
-    chalk "^2.4.1"
-    coa "^2.0.2"
-    css-select "^2.0.0"
-    css-select-base-adapter "^0.1.1"
-    css-tree "1.0.0-alpha.37"
-    csso "^4.0.2"
-    js-yaml "^3.13.1"
-    mkdirp "~0.5.1"
-    object.values "^1.1.0"
-    sax "~1.2.4"
-    stable "^0.1.8"
-    unquote "~1.1.1"
-    util.promisify "~1.0.0"
-
-symbol-observable@^1.0.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
-  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
-
-table@^5.2.3:
-  version "5.4.6"
-  resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
-  integrity sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==
-  dependencies:
-    ajv "^6.10.2"
-    lodash "^4.17.14"
-    slice-ansi "^2.1.0"
-    string-width "^3.0.0"
-
-tapable@^1.0.0, tapable@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
-  integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
-
-terser-webpack-plugin@^1.4.3:
-  version "1.4.5"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz#a217aefaea330e734ffacb6120ec1fa312d6040b"
-  integrity sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==
-  dependencies:
-    cacache "^12.0.2"
-    find-cache-dir "^2.1.0"
-    is-wsl "^1.1.0"
-    schema-utils "^1.0.0"
-    serialize-javascript "^4.0.0"
-    source-map "^0.6.1"
-    terser "^4.1.2"
-    webpack-sources "^1.4.0"
-    worker-farm "^1.7.0"
-
-terser-webpack-plugin@^2.3.6:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz#894764a19b0743f2f704e7c2a848c5283a696724"
-  integrity sha512-/fKw3R+hWyHfYx7Bv6oPqmk4HGQcrWLtV3X6ggvPuwPNHSnzvVV51z6OaaCOus4YLjutYGOz3pEpbhe6Up2s1w==
-  dependencies:
-    cacache "^13.0.1"
-    find-cache-dir "^3.3.1"
-    jest-worker "^25.4.0"
-    p-limit "^2.3.0"
-    schema-utils "^2.6.6"
-    serialize-javascript "^4.0.0"
-    source-map "^0.6.1"
-    terser "^4.6.12"
-    webpack-sources "^1.4.3"
-
-terser@^4.1.2, terser@^4.6.12:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
-  integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
-  dependencies:
-    commander "^2.20.0"
-    source-map "~0.6.1"
-    source-map-support "~0.5.12"
-
-text-table@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
-  integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
-
-thenify-all@^1.0.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
-  integrity sha1-GhkY1ALY/D+Y+/I02wvMjMEOlyY=
-  dependencies:
-    thenify ">= 3.1.0 < 4"
-
-"thenify@>= 3.1.0 < 4":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
-  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
-  dependencies:
-    any-promise "^1.0.0"
-
-thread-loader@^2.1.3:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/thread-loader/-/thread-loader-2.1.3.tgz#cbd2c139fc2b2de6e9d28f62286ab770c1acbdda"
-  integrity sha512-wNrVKH2Lcf8ZrWxDF/khdlLlsTMczdcwPA9VEK4c2exlEPynYWxi9op3nPTo5lAnDIkE0rQEB3VBP+4Zncc9Hg==
-  dependencies:
-    loader-runner "^2.3.1"
-    loader-utils "^1.1.0"
-    neo-async "^2.6.0"
-
-throttle-debounce@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz#fd31865e66502071e411817e241465b3e9c372e2"
-  integrity sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==
-
-through2@^2.0.0:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
-  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
-  dependencies:
-    readable-stream "~2.3.6"
-    xtend "~4.0.1"
-
-through@^2.3.6:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
-  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
-
-thunky@^1.0.2:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
-  integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
-
-timers-browserify@^2.0.4:
-  version "2.0.12"
-  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.12.tgz#44a45c11fbf407f34f97bccd1577c652361b00ee"
-  integrity sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==
-  dependencies:
-    setimmediate "^1.0.4"
-
-timsort@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
-  integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
-
-tmp@^0.0.33:
-  version "0.0.33"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
-  integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
-  dependencies:
-    os-tmpdir "~1.0.2"
-
-to-arraybuffer@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
-  integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
-
-to-fast-properties@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
-  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
-
-to-object-path@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
-  integrity sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=
-  dependencies:
-    kind-of "^3.0.2"
-
-to-regex-range@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
-  integrity sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=
-  dependencies:
-    is-number "^3.0.0"
-    repeat-string "^1.6.1"
-
-to-regex-range@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
-  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
-  dependencies:
-    is-number "^7.0.0"
-
-to-regex@^3.0.1, to-regex@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
-  integrity sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==
-  dependencies:
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    regex-not "^1.0.2"
-    safe-regex "^1.1.0"
-
-toidentifier@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
-  integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9ntpoppinsxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
-
-toposort@^1.0.0:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"
-  integrity sha1-LmhELZ9k7HILjMieZEOsbKqVACk=
-
-tough-cookie@~2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
-  integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
-  dependencies:
-    psl "^1.1.28"
-    punycode "^2.1.1"
-
-tryer@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
-  integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
-
-ts-invariant@^0.4.0:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.4.4.tgz#97a523518688f93aafad01b0e80eb803eb2abd86"
-  integrity sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==
-  dependencies:
-    tslib "^1.9.3"
-
-ts-pnp@^1.1.6:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
-  integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
-
-tslib@^1.10.0, tslib@^1.9.0, tslib@^1.9.3:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
-  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
-
-tty-browserify@0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
-  integrity sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=
-
-tunnel-agent@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
-  integrity sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=
-  dependencies:
-    safe-buffer "^5.0.1"
-
-tweetnacl@^0.14.3, tweetnacl@~0.14.0:
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
-  integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
-
-type-check@~0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
-  integrity sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=
-  dependencies:
-    prelude-ls "~1.1.2"
-
-type-fest@^0.21.3:
-  version "0.21.3"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
-  integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
-
-type-fest@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"
-  integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==
-
-type-fest@^0.8.1:
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
-  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
-
-type-is@~1.6.17, type-is@~1.6.18:
-  version "1.6.18"
-  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
-  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
-  dependencies:
-    media-typer "0.3.0"
-    mime-types "~2.1.24"
-
-typedarray@^0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
-  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
-
-uglify-js@3.4.x:
-  version "3.4.10"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"
-  integrity sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==
-  dependencies:
-    commander "~2.19.0"
-    source-map "~0.6.1"
-
-unbox-primitive@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.0.tgz#eeacbc4affa28e9b3d36b5eaeccc50b3251b1d3f"
-  integrity sha512-P/51NX+JXyxK/aigg1/ZgyccdAxm5K1+n8+tvqSntjOivPt19gvm1VC49RWYetsiub8WViUchdxl/KWHHB0kzA==
-  dependencies:
-    function-bind "^1.1.1"
-    has-bigints "^1.0.0"
-    has-symbols "^1.0.0"
-    which-boxed-primitive "^1.0.1"
-
-unicode-canonical-property-names-ecmascript@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
-  integrity sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ==
-
-unicode-match-property-ecmascript@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz#8ed2a32569961bce9227d09cd3ffbb8fed5f020c"
-  integrity sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==
-  dependencies:
-    unicode-canonical-property-names-ecmascript "^1.0.4"
-    unicode-property-aliases-ecmascript "^1.0.4"
-
-unicode-match-property-value-ecmascript@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz#0d91f600eeeb3096aa962b1d6fc88876e64ea531"
-  integrity sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==
-
-unicode-property-aliases-ecmascript@^1.0.4:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz#dd57a99f6207bedff4628abefb94c50db941c8f4"
-  integrity sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==
-
-union-value@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
-  integrity sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==
-  dependencies:
-    arr-union "^3.1.0"
-    get-value "^2.0.6"
-    is-extendable "^0.1.1"
-    set-value "^2.0.1"
-
-uniq@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
-  integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
-
-uniqs@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
-  integrity sha1-/+3ks2slKQaW5uFl1KWe25mOawI=
-
-unique-filename@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
-  integrity sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==
-  dependencies:
-    unique-slug "^2.0.0"
-
-unique-slug@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.2.tgz#baabce91083fc64e945b0f3ad613e264f7cd4e6c"
-  integrity sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==
-  dependencies:
-    imurmurhash "^0.1.4"
-
-universalify@^0.1.0:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
-  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
-
-unpipe@1.0.0, unpipe@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
-  integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
-
-unquote@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
-  integrity sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=
-
-unset-value@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
-  integrity sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=
-  dependencies:
-    has-value "^0.3.1"
-    isobject "^3.0.0"
-
-upath@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
-  integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
-
-upper-case@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
-  integrity sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=
-
-uri-js@^4.2.2:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
-  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
-  dependencies:
-    punycode "^2.1.0"
-
-urix@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
-  integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
-
-url-loader@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-2.3.0.tgz#e0e2ef658f003efb8ca41b0f3ffbf76bab88658b"
-  integrity sha512-goSdg8VY+7nPZKUEChZSEtW5gjbS66USIGCeSJ1OVOJ7Yfuh/36YxCwMi5HVEJh6mqUYOoy3NJ0vlOMrWsSHog==
-  dependencies:
-    loader-utils "^1.2.3"
-    mime "^2.4.4"
-    schema-utils "^2.5.0"
-
-url-parse@^1.4.3, url-parse@^1.4.7:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.1.tgz#d5fa9890af8a5e1f274a2c98376510f6425f6e3b"
-  integrity sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==
-  dependencies:
-    querystringify "^2.1.1"
-    requires-port "^1.0.0"
-
-url@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
-  integrity sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=
-  dependencies:
-    punycode "1.3.2"
-    querystring "0.2.0"
-
-use@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
-  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
-
-util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
-  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
-
-util.promisify@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
-  integrity sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==
-  dependencies:
-    define-properties "^1.1.2"
-    object.getownpropertydescriptors "^2.0.3"
-
-util.promisify@~1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.1.tgz#6baf7774b80eeb0f7520d8b81d07982a59abbaee"
-  integrity sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.2"
-    has-symbols "^1.0.1"
-    object.getownpropertydescriptors "^2.1.0"
-
-util@0.10.3:
-  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
-  integrity sha1-evsa/lCAUkZInj23/g7TeTNqwPk=
-  dependencies:
-    inherits "2.0.1"
-
-util@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/util/-/util-0.11.1.tgz#3236733720ec64bb27f6e26f421aaa2e1b588d61"
-  integrity sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==
-  dependencies:
-    inherits "2.0.3"
-
-utila@~0.4:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
-  integrity sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=
-
-utils-merge@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
-  integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
-
-uuid@^3.3.2, uuid@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
-  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
-
-v8-compile-cache@^2.0.3:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
-  integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
-
-validate-npm-package-license@^3.0.1:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
-  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
-  dependencies:
-    spdx-correct "^3.0.0"
-    spdx-expression-parse "^3.0.0"
-
-vary@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
-  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
-
-vendors@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
-  integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
-
-verror@1.10.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
-  integrity sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=
-  dependencies:
-    assert-plus "^1.0.0"
-    core-util-is "1.0.2"
-    extsprintf "^1.2.0"
-
-vm-browserify@^1.0.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
-  integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
-
-vue-apollo@^3.0.5:
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/vue-apollo/-/vue-apollo-3.0.7.tgz#97a031d45641faa4888a6d5a7f71c40834359704"
-  integrity sha512-EUfIn4cJmoflnDJiSNP8gH4fofIEzd0I2AWnd9nhHB8mddmzIfgSNjIRihDcRB10wypYG1OG0GcU335CFgZRfA==
-  dependencies:
-    chalk "^2.4.2"
-    serialize-javascript "^4.0.0"
-    throttle-debounce "^2.1.0"
-
-vue-cli-plugin-vuetify@~2.0.7:
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.0.9.tgz#982991aec28e79d1f0c2eb8f6e3d62e042087ee8"
-  integrity sha512-J4fzpz27OmCCAA3CI56ulYsUrZ859dQAh58Z9XZilY03kd/M+svLlPkK45cBIrGGfjSqQ40oyWezA3NiPBEG8g==
-  dependencies:
-    null-loader "^3.0.0"
-    semver "^7.1.2"
-    shelljs "^0.8.3"
-
-vue-eslint-parser@^7.0.0:
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.6.0.tgz#01ea1a2932f581ff244336565d712801f8f72561"
-  integrity sha512-QXxqH8ZevBrtiZMZK0LpwaMfevQi9UL7lY6Kcp+ogWHC88AuwUPwwCIzkOUc1LR4XsYAt/F9yHXAB/QoD17QXA==
-  dependencies:
-    debug "^4.1.1"
-    eslint-scope "^5.0.0"
-    eslint-visitor-keys "^1.1.0"
-    espree "^6.2.1"
-    esquery "^1.4.0"
-    lodash "^4.17.15"
-
-vue-hot-reload-api@^2.3.0:
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
-  integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
-
-"vue-loader-v16@npm:vue-loader@^16.1.0":
-  version "16.1.2"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.1.2.tgz#5c03b6c50d2a5f983c7ceba15c50d78ca2b298f4"
-  integrity sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==
-  dependencies:
-    chalk "^4.1.0"
-    hash-sum "^2.0.0"
-    loader-utils "^2.0.0"
-
-vue-loader@^15.9.2:
-  version "15.9.6"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.9.6.tgz#f4bb9ae20c3a8370af3ecf09b8126d38ffdb6b8b"
-  integrity sha512-j0cqiLzwbeImIC6nVIby2o/ABAWhlppyL/m5oJ67R5MloP0hj/DtFgb0Zmq3J9CG7AJ+AXIvHVnJAPBvrLyuDg==
-  dependencies:
-    "@vue/component-compiler-utils" "^3.1.0"
-    hash-sum "^1.0.2"
-    loader-utils "^1.1.0"
-    vue-hot-reload-api "^2.3.0"
-    vue-style-loader "^4.1.0"
-
-vue-router@^3.4.9:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.1.tgz#edf3cf4907952d1e0583e079237220c5ff6eb6c9"
-  integrity sha512-RRQNLT8Mzr8z7eL4p7BtKvRaTSGdCbTy2+Mm5HTJvLGYSSeG9gDzNasJPP/yOYKLy+/cLG/ftrqq5fvkFwBJEw==
-
-vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"
-  integrity sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==
-  dependencies:
-    hash-sum "^1.0.2"
-    loader-utils "^1.0.2"
-
-vue-template-compiler@^2.6.11:
-  version "2.6.12"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz#947ed7196744c8a5285ebe1233fe960437fcc57e"
-  integrity sha512-OzzZ52zS41YUbkCBfdXShQTe69j1gQDZ9HIX8miuC9C3rBCk9wIRjLiZZLrmX9V+Ftq/YEyv1JaVr5Y/hNtByg==
-  dependencies:
-    de-indent "^1.0.2"
-    he "^1.1.0"
-
-vue-template-es2015-compiler@^1.9.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
-  integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
-
-vue@^2.6.12:
-  version "2.6.12"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
-  integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==
-
-vuetify-loader@^1.3.0:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/vuetify-loader/-/vuetify-loader-1.7.2.tgz#5cdc45309496cf3a5fe431fd7611706ffa4aa8c8"
-  integrity sha512-2GSo4KvRAOThBsj8mvtIEeIoyBAZx38GDfh8D90e/or7Hzx4813krJKvcQAllyLO/Ln0eQWrq2IuvBXnZ55cSA==
-  dependencies:
-    decache "^4.6.0"
-    file-loader "^6.2.0"
-    loader-utils "^2.0.0"
-
-vuetify@^2.2.11:
-  version "2.4.8"
-  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.4.8.tgz#c6e883a9b2560f9906bd8b9f9eb58b001200aeef"
-  integrity sha512-rJYyzSO4Qsm/Q79W4FAUedgIDzUvx2uXzXXQ7OB2z9kAAkVOpTdMFY0CnpBcvlYbXOYy/mJ81/yUCV1ZAvJ3FQ==
-
-vuex@^3.5.1:
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
-  integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
-
-watchpack-chokidar2@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"
-  integrity sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==
-  dependencies:
-    chokidar "^2.1.8"
-
-watchpack@^1.7.4:
-  version "1.7.5"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.5.tgz#1267e6c55e0b9b5be44c2023aed5437a2c26c453"
-  integrity sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==
-  dependencies:
-    graceful-fs "^4.1.2"
-    neo-async "^2.5.0"
-  optionalDependencies:
-    chokidar "^3.4.1"
-    watchpack-chokidar2 "^2.0.1"
-
-wbuf@^1.1.0, wbuf@^1.7.3:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.3.tgz#c1d8d149316d3ea852848895cb6a0bfe887b87df"
-  integrity sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==
-  dependencies:
-    minimalistic-assert "^1.0.0"
-
-wcwidth@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
-  integrity sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=
-  dependencies:
-    defaults "^1.0.3"
-
-webpack-bundle-analyzer@^3.8.0:
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.9.0.tgz#f6f94db108fb574e415ad313de41a2707d33ef3c"
-  integrity sha512-Ob8amZfCm3rMB1ScjQVlbYYUEJyEjdEtQ92jqiFUYt5VkEeO2v5UMbv49P/gnmCZm3A6yaFQzCBvpZqN4MUsdA==
-  dependencies:
-    acorn "^7.1.1"
-    acorn-walk "^7.1.1"
-    bfj "^6.1.1"
-    chalk "^2.4.1"
-    commander "^2.18.0"
-    ejs "^2.6.1"
-    express "^4.16.3"
-    filesize "^3.6.1"
-    gzip-size "^5.0.0"
-    lodash "^4.17.19"
-    mkdirp "^0.5.1"
-    opener "^1.5.1"
-    ws "^6.0.0"
-
-webpack-chain@^6.4.0:
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/webpack-chain/-/webpack-chain-6.5.1.tgz#4f27284cbbb637e3c8fbdef43eef588d4d861206"
-  integrity sha512-7doO/SRtLu8q5WM0s7vPKPWX580qhi0/yBHkOxNkv50f6qB76Zy9o2wRTrrPULqYTvQlVHuvbA8v+G5ayuUDsA==
-  dependencies:
-    deepmerge "^1.5.2"
-    javascript-stringify "^2.0.1"
-
-webpack-dev-middleware@^3.7.2:
-  version "3.7.3"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.3.tgz#0639372b143262e2b84ab95d3b91a7597061c2c5"
-  integrity sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ==
-  dependencies:
-    memory-fs "^0.4.1"
-    mime "^2.4.4"
-    mkdirp "^0.5.1"
-    range-parser "^1.2.1"
-    webpack-log "^2.0.0"
-
-webpack-dev-server@^3.11.0:
-  version "3.11.2"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.11.2.tgz#695ebced76a4929f0d5de7fd73fafe185fe33708"
-  integrity sha512-A80BkuHRQfCiNtGBS1EMf2ChTUs0x+B3wGDFmOeT4rmJOHhHTCH2naNxIHhmkr0/UillP4U3yeIyv1pNp+QDLQ==
-  dependencies:
-    ansi-html "0.0.7"
-    bonjour "^3.5.0"
-    chokidar "^2.1.8"
-    compression "^1.7.4"
-    connect-history-api-fallback "^1.6.0"
-    debug "^4.1.1"
-    del "^4.1.1"
-    express "^4.17.1"
-    html-entities "^1.3.1"
-    http-proxy-middleware "0.19.1"
-    import-local "^2.0.0"
-    internal-ip "^4.3.0"
-    ip "^1.1.5"
-    is-absolute-url "^3.0.3"
-    killable "^1.0.1"
-    loglevel "^1.6.8"
-    opn "^5.5.0"
-    p-retry "^3.0.1"
-    portfinder "^1.0.26"
-    schema-utils "^1.0.0"
-    selfsigned "^1.10.8"
-    semver "^6.3.0"
-    serve-index "^1.9.1"
-    sockjs "^0.3.21"
-    sockjs-client "^1.5.0"
-    spdy "^4.0.2"
-    strip-ansi "^3.0.1"
-    supports-color "^6.1.0"
-    url "^0.11.0"
-    webpack-dev-middleware "^3.7.2"
-    webpack-log "^2.0.0"
-    ws "^6.2.1"
-    yargs "^13.3.2"
-
-webpack-log@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-2.0.0.tgz#5b7928e0637593f119d32f6227c1e0ac31e1b47f"
-  integrity sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==
-  dependencies:
-    ansi-colors "^3.0.0"
-    uuid "^3.3.2"
-
-webpack-merge@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.2.2.tgz#a27c52ea783d1398afd2087f547d7b9d2f43634d"
-  integrity sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==
-  dependencies:
-    lodash "^4.17.15"
-
-webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
-  integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
-  dependencies:
-    source-list-map "^2.0.0"
-    source-map "~0.6.1"
-
-webpack@^4.0.0:
-  version "4.46.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.46.0.tgz#bf9b4404ea20a073605e0a011d188d77cb6ad542"
-  integrity sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-module-context" "1.9.0"
-    "@webassemblyjs/wasm-edit" "1.9.0"
-    "@webassemblyjs/wasm-parser" "1.9.0"
-    acorn "^6.4.1"
-    ajv "^6.10.2"
-    ajv-keywords "^3.4.1"
-    chrome-trace-event "^1.0.2"
-    enhanced-resolve "^4.5.0"
-    eslint-scope "^4.0.3"
-    json-parse-better-errors "^1.0.2"
-    loader-runner "^2.4.0"
-    loader-utils "^1.2.3"
-    memory-fs "^0.4.1"
-    micromatch "^3.1.10"
-    mkdirp "^0.5.3"
-    neo-async "^2.6.1"
-    node-libs-browser "^2.2.1"
-    schema-utils "^1.0.0"
-    tapable "^1.1.3"
-    terser-webpack-plugin "^1.4.3"
-    watchpack "^1.7.4"
-    webpack-sources "^1.4.1"
-
-websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"
-  integrity sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==
-  dependencies:
-    http-parser-js ">=0.5.1"
-    safe-buffer ">=5.1.0"
-    websocket-extensions ">=0.1.1"
-
-websocket-extensions@>=0.1.1:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
-  integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
-
-which-boxed-primitive@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
-  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
-  dependencies:
-    is-bigint "^1.0.1"
-    is-boolean-object "^1.1.0"
-    is-number-object "^1.0.4"
-    is-string "^1.0.5"
-    is-symbol "^1.0.3"
-
-which-module@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
-  integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
-
-which@^1.2.9:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
-  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
-  dependencies:
-    isexe "^2.0.0"
-
-which@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
-  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
-  dependencies:
-    isexe "^2.0.0"
-
-word-wrap@~1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
-  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
-
-worker-farm@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"
-  integrity sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==
-  dependencies:
-    errno "~0.1.7"
-
-wrap-ansi@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
-  integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==
-  dependencies:
-    ansi-styles "^3.2.0"
-    string-width "^3.0.0"
-    strip-ansi "^5.0.0"
-
-wrap-ansi@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
-  integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-wrappy@1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
-  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
-
-write@1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"
-  integrity sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==
-  dependencies:
-    mkdirp "^0.5.1"
-
-ws@^6.0.0, ws@^6.2.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
-  integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==
-  dependencies:
-    async-limiter "~1.0.0"
-
-xtend@^4.0.0, xtend@~4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
-  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
-
-y18n@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.1.tgz#8db2b83c31c5d75099bb890b23f3094891e247d4"
-  integrity sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==
-
-y18n@^5.0.5:
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.5.tgz#8769ec08d03b1ea2df2500acef561743bbb9ab18"
-  integrity sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg==
-
-yallist@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
-  integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
-
-yallist@^3.0.2:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
-  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
-
-yallist@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
-  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
-
-yargs-parser@^13.1.2:
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"
-  integrity sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==
-  dependencies:
-    camelcase "^5.0.0"
-    decamelize "^1.2.0"
-
-yargs-parser@^20.2.2:
-  version "20.2.7"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.7.tgz#61df85c113edfb5a7a4e36eb8aa60ef423cbc90a"
-  integrity sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==
-
-yargs@^13.3.2:
-  version "13.3.2"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
-  integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==
-  dependencies:
-    cliui "^5.0.0"
-    find-up "^3.0.0"
-    get-caller-file "^2.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^2.0.0"
-    set-blocking "^2.0.0"
-    string-width "^3.0.0"
-    which-module "^2.0.0"
-    y18n "^4.0.0"
-    yargs-parser "^13.1.2"
-
-yargs@^16.0.0:
-  version "16.2.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
-  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
-  dependencies:
-    cliui "^7.0.2"
-    escalade "^3.1.1"
-    get-caller-file "^2.0.5"
-    require-directory "^2.1.1"
-    string-width "^4.2.0"
-    y18n "^5.0.5"
-    yargs-parser "^20.2.2"
-
-yorkie@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/yorkie/-/yorkie-2.0.0.tgz#92411912d435214e12c51c2ae1093e54b6bb83d9"
-  integrity sha512-jcKpkthap6x63MB4TxwCyuIGkV0oYP/YRyuQU5UO0Yz/E/ZAu+653/uov+phdmO54n6BcvFRyyt0RRrWdN2mpw==
-  dependencies:
-    execa "^0.8.0"
-    is-ci "^1.0.10"
-    normalize-path "^1.0.0"
-    strip-indent "^2.0.0"
-
-zen-observable-ts@^0.8.21:
-  version "0.8.21"
-  resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-0.8.21.tgz#85d0031fbbde1eba3cd07d3ba90da241215f421d"
-  integrity sha512-Yj3yXweRc8LdRMrCC8nIc4kkjWecPAUVh0TI0OUrWXx6aX790vLcDlWca6I4vsyCGH3LpWxq0dJRcMOFoVqmeg==
-  dependencies:
-    tslib "^1.9.3"
-    zen-observable "^0.8.0"
-
-zen-observable@^0.8.0:
-  version "0.8.15"
-  resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
-  integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==
diff --git a/package.json b/package.json
index 4a85a52..4cc6025 100644
--- a/package.json
+++ b/package.json
@@ -2,12 +2,19 @@
   "name": "turborepo-basic-shared",
   "version": "0.0.0",
   "private": true,
-  "workspaces": [
-    "apps/frontend/*",
-    "apps/*",
-    "packages/*"
-  ],
- 
+  "workspaces": {
+    "nohoist": [
+      "*",
+      "**",
+      "apps/frontend/**/vue",
+      "apps/frontend/**/vue/**"
+    ],
+    "packages": [
+      "apps/frontend/*",
+      "apps/*",
+      "packages/*"
+    ]
+  },
   "scripts": {
     "build": "turbo run build",
     "dev": "turbo run dev --parallel",
@@ -15,6 +22,7 @@
     "format": "prettier --write \"**/*.{ts,tsx,md,vue}\""
   },
   "devDependencies": {
+   
     "prettier": "^2.5.1",
     "turbo": "latest"
   },
@@ -32,16 +40,17 @@
       "lint": {
         "outputs": []
       },
-      "dev": {
-        
-      },
-      "format":{
-        "outputs":[]
+      "dev": {},
+      "format": {
+        "outputs": []
       }
     }
   },
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=14.0.0"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/config/appolo-preset.js b/packages/config/appolo-preset.js
index 0e29831..1d9be9e 100644
--- a/packages/config/appolo-preset.js
+++ b/packages/config/appolo-preset.js
@@ -3,8 +3,7 @@ module.exports = {
     service: {
       name: "my-app",
       // URL to the GraphQL API
-      // url: "http://localhost:8000/graphql",
-      schema: "./schema.graphql",
+      url: "http://localhost:8000/graphql",
     },
     // Files processed by the extension
     includes: ["src/**/*.vue", "src/**/*.js"],
diff --git a/packages/graphql-client/admin/customers.js b/packages/graphql-client/admin/customers.js
new file mode 100644
index 0000000..c3a1935
--- /dev/null
+++ b/packages/graphql-client/admin/customers.js
@@ -0,0 +1,26 @@
+import gql from 'graphql-tag'
+
+export const FetchCustomers = gql`
+  query customers($offset: Int, $first: Int, $userId: ID) {
+    customers(offset: $offset, first: $first, user: $userId) {
+      pageInfo {
+        hasNextPage
+        startCursor
+      }
+      edges {
+        node {
+          user {
+            isActive
+            username
+            firstName
+          }
+          id
+          phoneNumber
+          isVerified
+          verifiedBy
+          joinedOn
+        }
+      }
+    }
+  }
+`
diff --git a/packages/graphql-client/admin/dashboard.js b/packages/graphql-client/admin/dashboard.js
new file mode 100644
index 0000000..2618ded
--- /dev/null
+++ b/packages/graphql-client/admin/dashboard.js
@@ -0,0 +1,22 @@
+import gql from 'graphql-tag'
+
+export const GetOverviewStats = gql`
+  query overviewStats {
+    unfulfilledOrders: orders(fulfillmentStatus: "Unfulfilled") {
+      totalItems
+    }
+    totalSales: orders(paymentStatus: "succeeded") {
+      edges {
+        node {
+          totalAmount
+        }
+      }
+    }
+    customers {
+      totalItems
+    }
+    Products(filter: { status: "active" }) {
+      totalProducts
+    }
+  }
+`
diff --git a/packages/graphql-client/admin/orders.js b/packages/graphql-client/admin/orders.js
index f9333ea..6e53f02 100644
--- a/packages/graphql-client/admin/orders.js
+++ b/packages/graphql-client/admin/orders.js
@@ -41,12 +41,12 @@ export const GetOrders = gql`
       edges {
         node {
           id
-          extraCharges
+          createdAt
           paymentStatus
           createdAt
           fulfillmentStatus
           totalAmount
-          Customer {
+          customer {
             user {
               username
             }
@@ -64,12 +64,36 @@ export const GetOrder = gql`
       id
       paid
       paymentStatus
-      extraCharges
+      fulfillmentStatus
+      shippingCharges
+      taxPercent
+      discountPercent
       paymentStatus
       createdAt
+      updatedAt
+      totalAmount
+      customer {
+        user {
+          username
+        }
+      }
+      address {
+        name
+        pincode
+        state
+        country
+        city
+        town
+        apartmentNo
+        isWork
+        isHome
+        phoneNumber
+      }
       orderitemSet {
         id
         product {
+          id
+          images
           available
           brand {
             id
@@ -79,11 +103,40 @@ export const GetOrder = gql`
         }
         variation {
           price
+          variant {
+            name
+            value
+          }
           images
         }
-        Amount
+        amount
         totalAmount
-        Quantity
+        quantity
+      }
+    }
+  }
+`
+
+export const UpdateOrder = gql`
+  mutation updateOrder($id: String!, $fulfillmentStatus: String) {
+    updateOrder(orderId: $id, fulfillmentStatus: $fulfillmentStatus) {
+      order {
+        fulfillmentStatus
+        id
+      }
+    }
+  }
+`
+
+export const GetSales = gql`
+  query getSales($createdAt_Lte: DateTime!, $createdAt_Gte: DateTime!) {
+    orders(createdAt_Gte: $createdAt_Gte, createdAt_Lte: $createdAt_Lte, paymentStatus: "succeeded") {
+      edges {
+        node {
+          id
+          createdAt
+          totalAmount
+        }
       }
     }
   }
diff --git a/packages/graphql-client/package.json b/packages/graphql-client/package.json
index 0fa1158..14cdc82 100644
--- a/packages/graphql-client/package.json
+++ b/packages/graphql-client/package.json
@@ -9,5 +9,14 @@
     "utils":"*",
     "graphql": "^16.3.0",
     "graphql-tag": "^2.12.6"
+  },
+   "graphql": {
+    "schema": "./schema.graphql",
+    "client": {
+      "service": {
+        "name": "zivero",
+        "url": "http://localhost:8000/graphql"
+      }
+    }
   }
 }
diff --git a/packages/graphql-client/queries/order.js b/packages/graphql-client/queries/order.js
index 05f74f0..2b5918d 100644
--- a/packages/graphql-client/queries/order.js
+++ b/packages/graphql-client/queries/order.js
@@ -40,7 +40,7 @@ export const GetOrders = gql`
       edges {
         node {
           id
-          extraCharges
+          deliveryCharges
           paymentStatus
           createdAt
           orderitemSet {
@@ -57,9 +57,9 @@ export const GetOrders = gql`
               price
               images
             }
-            Amount
+            amount
             totalAmount
-            Quantity
+            quantity
           }
         }
         cursor
diff --git a/yarn.lock b/yarn.lock
index 3ae5fdb..836dd5b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,13 @@
 # yarn lockfile v1
 
 
+"@ampproject/remapping@^2.0.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.1.0.tgz#72becdf17ee44b2d1ac5651fb12f1952c336fe23"
+  integrity sha512-d5RysTlJ7hmw5Tw4UxgxcY3lkMe92n8sXCcuLPAyIAHK6j8DefDwtGnVVDgOnv+RnEosulDJ9NPKQL27bDId0g==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.0"
+
 "@apollo/client@^3.5.8":
   version "3.5.8"
   resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.5.8.tgz#7215b974c5988b6157530eb69369209210349fe0"
@@ -28,37 +35,37 @@
     "@babel/highlight" "^7.16.7"
 
 "@babel/compat-data@^7.13.11", "@babel/compat-data@^7.16.4", "@babel/compat-data@^7.16.8":
-  version "7.16.8"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.16.8.tgz#31560f9f29fdf1868de8cb55049538a1b9732a60"
-  integrity sha512-m7OkX0IdKLKPpBlJtF561YJal5y/jyI5fNfWbPxh2D/nbzzGI4qRyrD8xO2jB24u7l+5I2a43scCG2IrfjC50Q==
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.0.tgz#86850b8597ea6962089770952075dcaabb8dba34"
+  integrity sha512-392byTlpGWXMv4FbyWw3sAZ/FrW/DrwqLGXpy0mbyNe9Taqv1mg9yON5/o0cnr8XYCkFTZbC1eV+c+LAROgrng==
 
 "@babel/core@^7.11.0":
-  version "7.16.12"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.16.12.tgz#5edc53c1b71e54881315923ae2aedea2522bb784"
-  integrity sha512-dK5PtG1uiN2ikk++5OzSYsitZKny4wOCD0nrO4TqnW4BVBTQ2NGS3NgilvT/TEyxTST7LNyWV/T4tXDoD3fOgg==
+  version "7.17.2"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.17.2.tgz#2c77fc430e95139d816d39b113b31bf40fb22337"
+  integrity sha512-R3VH5G42VSDolRHyUO4V2cfag8WHcZyxdq5Z/m8Xyb92lW/Erm/6kM+XtRFGf3Mulre3mveni2NHfEUws8wSvw==
   dependencies:
+    "@ampproject/remapping" "^2.0.0"
     "@babel/code-frame" "^7.16.7"
-    "@babel/generator" "^7.16.8"
+    "@babel/generator" "^7.17.0"
     "@babel/helper-compilation-targets" "^7.16.7"
     "@babel/helper-module-transforms" "^7.16.7"
-    "@babel/helpers" "^7.16.7"
-    "@babel/parser" "^7.16.12"
+    "@babel/helpers" "^7.17.2"
+    "@babel/parser" "^7.17.0"
     "@babel/template" "^7.16.7"
-    "@babel/traverse" "^7.16.10"
-    "@babel/types" "^7.16.8"
+    "@babel/traverse" "^7.17.0"
+    "@babel/types" "^7.17.0"
     convert-source-map "^1.7.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
     json5 "^2.1.2"
     semver "^6.3.0"
-    source-map "^0.5.0"
 
-"@babel/generator@^7.16.8":
-  version "7.16.8"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.16.8.tgz#359d44d966b8cd059d543250ce79596f792f2ebe"
-  integrity sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==
+"@babel/generator@^7.17.0":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.0.tgz#7bd890ba706cd86d3e2f727322346ffdbf98f65e"
+  integrity sha512-I3Omiv6FGOC29dtlZhkfXO6pgkmukJSlT26QjVvS1DGZe/NzSVCPG41X0tS21oZkJYlovfj9qDWgKP+Cn4bXxw==
   dependencies:
-    "@babel/types" "^7.16.8"
+    "@babel/types" "^7.17.0"
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
@@ -87,10 +94,10 @@
     browserslist "^4.17.5"
     semver "^6.3.0"
 
-"@babel/helper-create-class-features-plugin@^7.16.10", "@babel/helper-create-class-features-plugin@^7.16.7":
-  version "7.16.10"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.16.10.tgz#8a6959b9cc818a88815ba3c5474619e9c0f2c21c"
-  integrity sha512-wDeej0pu3WN/ffTxMNCPW5UCiOav8IcLRxSIyp/9+IF2xJUM9h/OYjg0IJLHaL6F8oU8kqMz9nc1vryXhMsgXg==
+"@babel/helper-create-class-features-plugin@^7.16.10", "@babel/helper-create-class-features-plugin@^7.16.7", "@babel/helper-create-class-features-plugin@^7.17.1":
+  version "7.17.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.1.tgz#9699f14a88833a7e055ce57dcd3ffdcd25186b21"
+  integrity sha512-JBdSr/LtyYIno/pNnJ75lBcqc3Z1XXujzPanHqjvvrhOA+DTceTFuJi8XjmWTZh4r3fsdfqaCMN0iZemdkxZHQ==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.16.7"
     "@babel/helper-environment-visitor" "^7.16.7"
@@ -101,12 +108,12 @@
     "@babel/helper-split-export-declaration" "^7.16.7"
 
 "@babel/helper-create-regexp-features-plugin@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.16.7.tgz#0cb82b9bac358eb73bfbd73985a776bfa6b14d48"
-  integrity sha512-fk5A6ymfp+O5+p2yCkXAu5Kyj6v0xh0RBeNcAkYUMDvvAAoxvSKXn+Jb37t/yWFiQVDFK1ELpUTD8/aLhCPu+g==
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.17.0.tgz#1dcc7d40ba0c6b6b25618997c5dbfd310f186fe1"
+  integrity sha512-awO2So99wG6KnlE+TPs6rn83gCz5WlEePJDTnLEqbchMVrBeAujURVphRdigsk094VhvZehFoNOihSlcBjwsXA==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.16.7"
-    regexpu-core "^4.7.1"
+    regexpu-core "^5.0.1"
 
 "@babel/helper-define-polyfill-provider@^0.3.1":
   version "0.3.1"
@@ -260,14 +267,14 @@
     "@babel/traverse" "^7.16.8"
     "@babel/types" "^7.16.8"
 
-"@babel/helpers@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.16.7.tgz#7e3504d708d50344112767c3542fc5e357fffefc"
-  integrity sha512-9ZDoqtfY7AuEOt3cxchfii6C7GDyyMBffktR5B2jvWv8u2+efwvpnVKXMWzNehqy68tKgAfSwfdw/lWpthS2bw==
+"@babel/helpers@^7.17.2":
+  version "7.17.2"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.17.2.tgz#23f0a0746c8e287773ccd27c14be428891f63417"
+  integrity sha512-0Qu7RLR1dILozr/6M0xgj+DFPmi6Bnulgm9M8BVa9ZCWxDqlSnqt3cf8IDPB5m45sVXUZ0kuQAgUrdSFFH79fQ==
   dependencies:
     "@babel/template" "^7.16.7"
-    "@babel/traverse" "^7.16.7"
-    "@babel/types" "^7.16.7"
+    "@babel/traverse" "^7.17.0"
+    "@babel/types" "^7.17.0"
 
 "@babel/highlight@^7.16.7":
   version "7.16.10"
@@ -278,10 +285,10 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.16.10", "@babel/parser@^7.16.12", "@babel/parser@^7.16.4", "@babel/parser@^7.16.7", "@babel/parser@^7.7.0":
-  version "7.16.12"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.12.tgz#9474794f9a650cf5e2f892444227f98e28cdf8b6"
-  integrity sha512-VfaV15po8RiZssrkPweyvbGVSe4x2y+aciFCgn0n0/SJMR22cwofRV1mtnJQYcSB1wUTaA/X1LnA3es66MCO5A==
+"@babel/parser@^7.16.4", "@babel/parser@^7.16.7", "@babel/parser@^7.17.0", "@babel/parser@^7.7.0":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.0.tgz#f0ac33eddbe214e4105363bb17c3341c5ffcc43c"
+  integrity sha512-VKXSCQx5D8S04ej+Dqsr1CzYvvWgf20jIw2D+YhQCrIlr2UZGaDds23Y0xg75/skOxpLCRpUZvk/1EAVkGoDOw==
 
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.7":
   version "7.16.7"
@@ -326,13 +333,15 @@
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
 
 "@babel/plugin-proposal-decorators@^7.8.3":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.16.7.tgz#922907d2e3e327f5b07d2246bcfc0bd438f360d2"
-  integrity sha512-DoEpnuXK14XV9btI1k8tzNGCutMclpj4yru8aXKoHlVmbO1s+2A+g2+h4JhcjrxkFJqzbymnLG6j/niOf3iFXQ==
+  version "7.17.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.17.2.tgz#c36372ddfe0360cac1ee331a238310bddca11493"
+  integrity sha512-WH8Z95CwTq/W8rFbMqb9p3hicpt4RX4f0K659ax2VHxgOyT6qQmUaEVEjIh4WR9Eh9NymkVn5vwsrE68fAQNUw==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.16.7"
+    "@babel/helper-create-class-features-plugin" "^7.17.1"
     "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/plugin-syntax-decorators" "^7.16.7"
+    "@babel/helper-replace-supers" "^7.16.7"
+    "@babel/plugin-syntax-decorators" "^7.17.0"
+    charcodes "^0.2.0"
 
 "@babel/plugin-proposal-dynamic-import@^7.16.7":
   version "7.16.7"
@@ -457,10 +466,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-syntax-decorators@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.16.7.tgz#f66a0199f16de7c1ef5192160ccf5d069739e3d3"
-  integrity sha512-vQ+PxL+srA7g6Rx6I1e15m55gftknl2X8GCUW1JTlkTaXZLJOS0UcaY0eK9jYT7IYf4awn6qwyghVHLDz1WyMw==
+"@babel/plugin-syntax-decorators@^7.17.0":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.17.0.tgz#a2be3b2c9fe7d78bd4994e790896bc411e2f166d"
+  integrity sha512-qWe85yCXsvDEluNP0OyeQjH63DlhAR3W7K9BxxU1MvbDb48tgBG+Ao6IJJ6smPDrrVzSQZrbF6donpkFBMcs3A==
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
@@ -748,9 +757,9 @@
     "@babel/helper-plugin-utils" "^7.16.7"
 
 "@babel/plugin-transform-runtime@^7.11.0":
-  version "7.16.10"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.16.10.tgz#53d9fd3496daedce1dd99639097fa5d14f4c7c2c"
-  integrity sha512-9nwTiqETv2G7xI4RvXHNfpGdr8pAA+Q/YtN3yLK7OoK7n9OibVm/xymJ838a9A6E/IciOLPj82lZk0fW6O4O7w==
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.17.0.tgz#0a2e08b5e2b2d95c4b1d3b3371a2180617455b70"
+  integrity sha512-fr7zPWnKXNc1xoHfrIU9mN/4XKX4VLZ45Q+oMhfsYIaHvg7mHgmhfOy/ckRWqDK7XF3QDigRpkh5DKq6+clE8A==
   dependencies:
     "@babel/helper-module-imports" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
@@ -902,9 +911,9 @@
     esutils "^2.0.2"
 
 "@babel/runtime@^7.11.0", "@babel/runtime@^7.8.4":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa"
-  integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==
+  version "7.17.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
+  integrity sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==
   dependencies:
     regenerator-runtime "^0.13.4"
 
@@ -917,26 +926,26 @@
     "@babel/parser" "^7.16.7"
     "@babel/types" "^7.16.7"
 
-"@babel/traverse@^7.0.0", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.10", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.7.0":
-  version "7.16.10"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.16.10.tgz#448f940defbe95b5a8029975b051f75993e8239f"
-  integrity sha512-yzuaYXoRJBGMlBhsMJoUW7G1UmSb/eXr/JHYM/MsOJgavJibLwASijW7oXBdw3NQ6T0bW7Ty5P/VarOs9cHmqw==
+"@babel/traverse@^7.0.0", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.17.0", "@babel/traverse@^7.7.0":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.0.tgz#3143e5066796408ccc880a33ecd3184f3e75cd30"
+  integrity sha512-fpFIXvqD6kC7c7PUNnZ0Z8cQXlarCLtCUpt2S1Dx7PjoRtCFffvOkHHSom+m5HIxMZn5bIBVb71lhabcmjEsqg==
   dependencies:
     "@babel/code-frame" "^7.16.7"
-    "@babel/generator" "^7.16.8"
+    "@babel/generator" "^7.17.0"
     "@babel/helper-environment-visitor" "^7.16.7"
     "@babel/helper-function-name" "^7.16.7"
     "@babel/helper-hoist-variables" "^7.16.7"
     "@babel/helper-split-export-declaration" "^7.16.7"
-    "@babel/parser" "^7.16.10"
-    "@babel/types" "^7.16.8"
+    "@babel/parser" "^7.17.0"
+    "@babel/types" "^7.17.0"
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
-  version "7.16.8"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.8.tgz#0ba5da91dd71e0a4e7781a30f22770831062e3c1"
-  integrity sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==
+"@babel/types@^7.0.0", "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
+  integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==
   dependencies:
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
@@ -961,12 +970,17 @@
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
   integrity sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==
 
+"@fortawesome/fontawesome-common-types@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.3.0.tgz#949995a05c0d8801be7e0a594f775f1dbaa0d893"
+  integrity sha512-CA3MAZBTxVsF6SkfkHXDerkhcQs0QPofy43eFdbWJJkZiq3SfiaH1msOkac59rQaqto5EqWnASboY1dBuKen5w==
+
 "@fortawesome/fontawesome-svg-core@^1.2.36":
-  version "1.2.36"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz#4f2ea6f778298e0c47c6524ce2e7fd58eb6930e3"
-  integrity sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.3.0.tgz#343fac91fa87daa630d26420bfedfba560f85885"
+  integrity sha512-UIL6crBWhjTNQcONt96ExjUnKt1D68foe3xjEensLDclqQ6YagwCRYVQdrp/hW0ALRp/5Fv/VKw+MqTUWYYvPg==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.36"
+    "@fortawesome/fontawesome-common-types" "^0.3.0"
 
 "@fortawesome/free-solid-svg-icons@^5.15.4":
   version "5.15.4"
@@ -1045,6 +1059,24 @@
     cssnano-preset-default "^4.0.0"
     postcss "^7.0.0"
 
+"@jridgewell/resolve-uri@^3.0.3":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.4.tgz#b876e3feefb9c8d3aa84014da28b5e52a0640d72"
+  integrity sha512-cz8HFjOFfUBtvN+NXYSFMHYRdxZMaEl0XypVrhzxBgadKIXhIkRd8aMeHhmF56Sl7SuS8OnUpQ73/k9LE4VnLg==
+
+"@jridgewell/sourcemap-codec@^1.4.10":
+  version "1.4.10"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.10.tgz#baf57b4e2a690d4f38560171f91783656b7f8186"
+  integrity sha512-Ht8wIW5v165atIX1p+JvKR5ONzUyF4Ac8DZIQ5kZs9zrb6M8SJNXpx1zn04rn65VjBMygRoMXcyYwNK0fT7bEg==
+
+"@jridgewell/trace-mapping@^0.3.0":
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz#f6a0832dffd5b8a6aaa633b7d9f8e8e94c83a0c3"
+  integrity sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.0.3"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -1191,9 +1223,9 @@
   integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
 
 "@types/node@*", "@types/node@>=6":
-  version "17.0.10"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.10.tgz#616f16e9d3a2a3d618136b1be244315d95bd7cab"
-  integrity sha512-S/3xB4KzyFxYGCppyDt68yzBU9ysL88lSdIah4D6cptdcltc4NCPCAMc0+PCpg/lLIyC7IPvj2Z52OJWeIUkog==
+  version "17.0.17"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.17.tgz#a8ddf6e0c2341718d74ee3dc413a13a042c45a0c"
+  integrity sha512-e8PUNQy1HgJGV3iU/Bp2+D/DXh3PYeyli8LgIwsQcs1Ar1LoaWHSIT6Rw+H2rNJmiq6SNWiDytfx8+gYj7wDHw==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
@@ -1283,9 +1315,9 @@
   integrity sha512-fbF6oTd4sGGy0xjHPKAt+eS2CrxJ3+6gQ3FGcBoIJR2TLAyCkCyI8JqZNy+FeON0AhVgNJoUumVoZQjBFUqHkw==
 
 "@vitejs/plugin-vue@^2.0.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-2.1.0.tgz#ddf5e0059f84f2ff649afc25ce5a59211e670542"
-  integrity sha512-AZ78WxvFMYd8JmM/GBV6a6SGGTU0GgN/0/4T+FnMMsLzFEzTeAUwuraapy50ifHZsC+G5SvWs86bvaCPTneFlA==
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-2.2.0.tgz#a0affe3ee09f70a9a1415bd39c0f8a58fa78b419"
+  integrity sha512-wXigM1EwN2G7rZcwG6kLk9ivvIMhx2363tCEvMBiXcTu5nePM/12hUPVzPb83Uugt6U+zom1gTpJopi/Ow/jwg==
 
 "@vue/apollo-composable@^4.0.0-alpha.16":
   version "4.0.0-alpha.16"
@@ -1541,47 +1573,47 @@
     semver "^6.1.0"
     strip-ansi "^6.0.0"
 
-"@vue/compiler-core@3.2.29":
-  version "3.2.29"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.29.tgz#b06097ab8ff0493177c68c5ea5b63d379a061097"
-  integrity sha512-RePZ/J4Ub3sb7atQw6V6Rez+/5LCRHGFlSetT3N4VMrejqJnNPXKUt5AVm/9F5MJriy2w/VudEIvgscCfCWqxw==
+"@vue/compiler-core@3.2.30":
+  version "3.2.30"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.30.tgz#6c5b362490930e72de8d033270a145e3830ae5c4"
+  integrity sha512-64fq1KfcR+k3Vlw+IsBM2VhV5B+2IP3YxvKU8LWCDLrkmlXtbf2eMK6+0IwX5KP41D0f1gzryIiXR7P8cB9O5Q==
   dependencies:
     "@babel/parser" "^7.16.4"
-    "@vue/shared" "3.2.29"
+    "@vue/shared" "3.2.30"
     estree-walker "^2.0.2"
     source-map "^0.6.1"
 
-"@vue/compiler-dom@3.2.29":
-  version "3.2.29"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.29.tgz#ad0ead405bd2f2754161335aad9758aa12430715"
-  integrity sha512-y26vK5khdNS9L3ckvkqJk/78qXwWb75Ci8iYLb67AkJuIgyKhIOcR1E8RIt4mswlVCIeI9gQ+fmtdhaiTAtrBQ==
+"@vue/compiler-dom@3.2.30":
+  version "3.2.30"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.30.tgz#ed15e6243227baeaa445d04df804aee6e4926eab"
+  integrity sha512-t7arHz2SXLCXlF2fdGDFVbhENbGMez254Z5edUqb//6WXJU1lC7GvSkUE7i5x8WSjgfqt60i0V8zdmk16rvLdw==
   dependencies:
-    "@vue/compiler-core" "3.2.29"
-    "@vue/shared" "3.2.29"
+    "@vue/compiler-core" "3.2.30"
+    "@vue/shared" "3.2.30"
 
-"@vue/compiler-sfc@3.2.29":
-  version "3.2.29"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.29.tgz#f76d556cd5fca6a55a3ea84c88db1a2a53a36ead"
-  integrity sha512-X9+0dwsag2u6hSOP/XsMYqFti/edvYvxamgBgCcbSYuXx1xLZN+dS/GvQKM4AgGS4djqo0jQvWfIXdfZ2ET68g==
+"@vue/compiler-sfc@3.2.30":
+  version "3.2.30"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.30.tgz#9d2e56adb859059551fc1204bc37503f168c4d0c"
+  integrity sha512-P/5YpILtcQY92z72gxhkyOUPHVskEzhSrvYi91Xcr+csOxaDaYU5OqOxCzZKcf3Og70Tat404vO1OHrwprN90A==
   dependencies:
     "@babel/parser" "^7.16.4"
-    "@vue/compiler-core" "3.2.29"
-    "@vue/compiler-dom" "3.2.29"
-    "@vue/compiler-ssr" "3.2.29"
-    "@vue/reactivity-transform" "3.2.29"
-    "@vue/shared" "3.2.29"
+    "@vue/compiler-core" "3.2.30"
+    "@vue/compiler-dom" "3.2.30"
+    "@vue/compiler-ssr" "3.2.30"
+    "@vue/reactivity-transform" "3.2.30"
+    "@vue/shared" "3.2.30"
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
     postcss "^8.1.10"
     source-map "^0.6.1"
 
-"@vue/compiler-ssr@3.2.29":
-  version "3.2.29"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.29.tgz#37b15b32dcd2f6b410bb61fca3f37b1a92b7eb1e"
-  integrity sha512-LrvQwXlx66uWsB9/VydaaqEpae9xtmlUkeSKF6aPDbzx8M1h7ukxaPjNCAXuFd3fUHblcri8k42lfimHfzMICA==
+"@vue/compiler-ssr@3.2.30":
+  version "3.2.30"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.30.tgz#fc2bc13a9cdfd70fcffab3f0bc7de141cd9c3411"
+  integrity sha512-OUh3MwAu/PsD7VN3UOdBbTkltkrUCNouSht47+CMRzpUR5+ta7+xyMAVHeq8wg4YZenWaJimbR5TL35Ka4Vk6g==
   dependencies:
-    "@vue/compiler-dom" "3.2.29"
-    "@vue/shared" "3.2.29"
+    "@vue/compiler-dom" "3.2.30"
+    "@vue/shared" "3.2.30"
 
 "@vue/component-compiler-utils@^3.1.0", "@vue/component-compiler-utils@^3.1.2":
   version "3.3.0"
@@ -1600,9 +1632,9 @@
     prettier "^1.18.2 || ^2.0.0"
 
 "@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.0.0-beta.18":
-  version "6.0.0-beta.21.1"
-  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.21.1.tgz#f1410f53c42aa67fa3b01ca7bdba891f69d7bc97"
-  integrity sha512-FqC4s3pm35qGVeXRGOjTsRzlkJjrBLriDS9YXbflHLsfA9FrcKzIyWnLXoNm+/7930E8rRakXuAc2QkC50swAw==
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.5.tgz#7e35cfee4f44ada65cde0d19341fbaeb0ae353f4"
+  integrity sha512-2nM84dzo3B63pKgxwoArlT1d/yqSL0y2lG2GiyyGhwpyPTwkfIuJHlCNbputCoSCNnT6MMfenK1g7nv7Mea19A==
 
 "@vue/eslint-config-airbnb@^5.0.2":
   version "5.3.0"
@@ -1619,53 +1651,53 @@
   resolved "https://registry.yarnpkg.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz#ceb924b4ecb3b9c43871c7a429a02f8423e621ab"
   integrity sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==
 
-"@vue/reactivity-transform@3.2.29":
-  version "3.2.29"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.29.tgz#a08d606e10016b7cf588d1a43dae4db2953f9354"
-  integrity sha512-YF6HdOuhdOw6KyRm59+3rML8USb9o8mYM1q+SH0G41K3/q/G7uhPnHGKvspzceD7h9J3VR1waOQ93CUZj7J7OA==
+"@vue/reactivity-transform@3.2.30":
+  version "3.2.30"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.30.tgz#2006e9f4645777a481b78ae77fc486159afa8480"
+  integrity sha512-Le5XzCJyK3qTjoTnvQG/Ehu8fYjayauMNFyMaEnwFlm/avDofpuibpS9u+/6AgzsGnVWN+i0Jgf25bJd9DIwMw==
   dependencies:
     "@babel/parser" "^7.16.4"
-    "@vue/compiler-core" "3.2.29"
-    "@vue/shared" "3.2.29"
+    "@vue/compiler-core" "3.2.30"
+    "@vue/shared" "3.2.30"
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
-"@vue/reactivity@3.2.29":
-  version "3.2.29"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.29.tgz#afdc9c111d4139b14600be17ad80267212af6052"
-  integrity sha512-Ryhb6Gy62YolKXH1gv42pEqwx7zs3n8gacRVZICSgjQz8Qr8QeCcFygBKYfJm3o1SccR7U+bVBQDWZGOyG1k4g==
+"@vue/reactivity@3.2.30":
+  version "3.2.30"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.30.tgz#fdae2bb66d075c34593ea7e15c6831300a1ad39e"
+  integrity sha512-qlNKbkRn2JiGxVUEdoXbLAy+vcuHUCcq+YH2uXWz0BNMvXY2plmz+oqsw+694llwmYLkke5lbdYF4DIupisIkg==
   dependencies:
-    "@vue/shared" "3.2.29"
+    "@vue/shared" "3.2.30"
 
-"@vue/runtime-core@3.2.29", "@vue/runtime-core@latest":
-  version "3.2.29"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.29.tgz#fb8577b2fcf52e8d967bd91cdf49ab9fb91f9417"
-  integrity sha512-VMvQuLdzoTGmCwIKTKVwKmIL0qcODIqe74JtK1pVr5lnaE0l25hopodmPag3RcnIcIXe+Ye3B2olRCn7fTCgig==
+"@vue/runtime-core@3.2.30", "@vue/runtime-core@latest":
+  version "3.2.30"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.30.tgz#1acc119ff8a49c06af6b03611bc4e03f464ca8a2"
+  integrity sha512-RTi7xH0Ht/6wfbo2WFBMJTEiyWFTqGhrksJm8lz6E+auO6lXZ6Eq3gPNfLt47GDWCm4xyrv+rs5R4UbarPEQ1Q==
   dependencies:
-    "@vue/reactivity" "3.2.29"
-    "@vue/shared" "3.2.29"
+    "@vue/reactivity" "3.2.30"
+    "@vue/shared" "3.2.30"
 
-"@vue/runtime-dom@3.2.29", "@vue/runtime-dom@latest":
-  version "3.2.29"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.29.tgz#35e9a2bf04ef80b86ac2ca0e7b2ceaccf1e18f01"
-  integrity sha512-YJgLQLwr+SQyORzTsBQLL5TT/5UiV83tEotqjL7F9aFDIQdFBTCwpkCFvX9jqwHoyi9sJqM9XtTrMcc8z/OjPA==
+"@vue/runtime-dom@3.2.30", "@vue/runtime-dom@latest":
+  version "3.2.30"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.30.tgz#16a85b359ea1fff9b1dd61e9d00e93f4652aba5e"
+  integrity sha512-a3+jrncDvEFQmB+v9k0VyT4/Y3XO6OAueCroXXY4yLyr6PJeyxljweV5TzvW0rvVzH9sZO0QAvG76Lo+6C92Qw==
   dependencies:
-    "@vue/runtime-core" "3.2.29"
-    "@vue/shared" "3.2.29"
+    "@vue/runtime-core" "3.2.30"
+    "@vue/shared" "3.2.30"
     csstype "^2.6.8"
 
-"@vue/server-renderer@3.2.29":
-  version "3.2.29"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.29.tgz#ea6afa361b9c781a868c8da18c761f9b7bc89102"
-  integrity sha512-lpiYx7ciV7rWfJ0tPkoSOlLmwqBZ9FTmQm33S+T4g0j1fO/LmhJ9b9Ctl1o5xvIFVDk9QkSUWANZn7H2pXuxVw==
+"@vue/server-renderer@3.2.30":
+  version "3.2.30"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.30.tgz#4acccad3933475d07b94560c6cb205363975b969"
+  integrity sha512-pzb8J/w+JdZVOtuKFlirGqrs4GP60FXGDJySw3WV2pCetuFstaacDrnymEeSo3ohAD+Qjv7zAG+Y7OvkdxQxmQ==
   dependencies:
-    "@vue/compiler-ssr" "3.2.29"
-    "@vue/shared" "3.2.29"
+    "@vue/compiler-ssr" "3.2.30"
+    "@vue/shared" "3.2.30"
 
-"@vue/shared@3.2.29":
-  version "3.2.29"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.29.tgz#07dac7051117236431d2f737d16932aa38bbb925"
-  integrity sha512-BjNpU8OK6Z0LVzGUppEk0CMYm/hKDnZfYdjSmPOs0N+TR1cLKJAkDwW8ASZUvaaSLEi6d3hVM7jnWnX+6yWnHw==
+"@vue/shared@3.2.30":
+  version "3.2.30"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.30.tgz#e2ba8f6692399c27c81c668ecd3f1a4e13ee2f5e"
+  integrity sha512-B3HouBtUxcfu2w2d+VhdLcVBXKYYhXiFMAfQ+hoe8NUhKkPRkWDIqhpuehCZxVQ3S2dN1P1WfKGlxGC+pfmxGg==
 
 "@vue/web-component-wrapper@^1.2.0":
   version "1.3.0"
@@ -1878,12 +1910,12 @@
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
 accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
-  integrity sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
+  integrity sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==
   dependencies:
-    mime-types "~2.1.24"
-    negotiator "0.6.2"
+    mime-types "~2.1.34"
+    negotiator "0.6.3"
 
 acorn-jsx@^5.2.0, acorn-jsx@^5.3.1:
   version "5.3.2"
@@ -2341,12 +2373,12 @@ babel-plugin-polyfill-corejs2@^0.3.0:
     semver "^6.1.1"
 
 babel-plugin-polyfill-corejs3@^0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.1.tgz#d66183bf10976ea677f4149a7fcc4d8df43d4060"
-  integrity sha512-TihqEe4sQcb/QcPJvxe94/9RZuLQuF1+To4WqQcRvc+3J3gLCPIPgDKzGLG6zmQLfH3nn25heRuDNkS2KR4I8A==
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.2.tgz#aabe4b2fa04a6e038b688c5e55d44e78cd3a5f72"
+  integrity sha512-G3uJih0XWiID451fpeFaYGVuxHEjzKTHtc9uGFEjR6hHrvNzeS/PX+LLLcetJcytsB5m4j+K3o/EpXJNb/5IEQ==
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.1"
-    core-js-compat "^3.20.0"
+    core-js-compat "^3.21.0"
 
 babel-plugin-polyfill-regenerator@^0.3.0:
   version "0.3.1"
@@ -2751,9 +2783,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001286, caniuse-lite@^1.0.30001297:
-  version "1.0.30001301"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001301.tgz#ebc9086026534cab0dab99425d9c3b4425e5f450"
-  integrity sha512-csfD/GpHMqgEL3V3uIgosvh+SVIQvCh43SNu9HRbP1lnxkKm1kjDG4f32PP571JplkLjfS+mg2p1gxR7MYrrIA==
+  version "1.0.30001311"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001311.tgz#682ef3f4e617f1a177ad943de59775ed3032e511"
+  integrity sha512-mleTFtFKfykEeW34EyfhGIFjGCqzhh38Y0LhdQ9aWF+HorZTtdgKV/1hEE0NlFkG2ubvisPV6l400tlbPys98A==
 
 case-sensitive-paths-webpack-plugin@^2.3.0:
   version "2.4.0"
@@ -2790,6 +2822,11 @@ chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+charcodes@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/charcodes/-/charcodes-0.2.0.tgz#5208d327e6cc05f99eb80ffc814707572d1f14e4"
+  integrity sha512-Y4kiDb+AM4Ecy58YkuZrrSRJBDQdQ2L+NyS1vHHFtNtUjgutcZfx3yp1dAONI/oPaPmyGfCLx5CxL+zauIMyKQ==
+
 chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
@@ -2805,7 +2842,7 @@ check-types@^8.0.3:
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"
   integrity sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==
 
-"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.1, chokidar@^3.5.2:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.1, chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -3192,18 +3229,18 @@ copy-webpack-plugin@^5.1.1:
     serialize-javascript "^4.0.0"
     webpack-log "^2.0.0"
 
-core-js-compat@^3.20.0, core-js-compat@^3.20.2, core-js-compat@^3.6.5:
-  version "3.20.3"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.20.3.tgz#d71f85f94eb5e4bea3407412e549daa083d23bd6"
-  integrity sha512-c8M5h0IkNZ+I92QhIpuSijOxGAcj3lgpsWdkCqmUTZNwidujF4r3pi6x1DCN+Vcs5qTS2XWWMfWSuCqyupX8gw==
+core-js-compat@^3.20.2, core-js-compat@^3.21.0, core-js-compat@^3.6.5:
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.21.0.tgz#bcc86aa5a589cee358e7a7fa0a4979d5a76c3885"
+  integrity sha512-OSXseNPSK2OPJa6GdtkMz/XxeXx8/CJvfhQWTqd6neuUraujcL4jVsjkLQz1OWnax8xVQJnRPe0V2jqNWORA+A==
   dependencies:
     browserslist "^4.19.1"
     semver "7.0.0"
 
 core-js@^3.6.5:
-  version "3.20.3"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.20.3.tgz#c710d0a676e684522f3db4ee84e5e18a9d11d69a"
-  integrity sha512-vVl8j8ph6tRS3B8qir40H7yw7voy17xL0piAjlbBUsH7WIfzoedL/ZOr1OV9FyZQLWXsayOJyV4tnRyXR85/ag==
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.21.0.tgz#f479dbfc3dffb035a0827602dd056839a774aa71"
+  integrity sha512-YUdI3fFu4TF/2WykQ2xzSiTQdldLB4KVuL9WeAy5XONZYt5Cun/fpQvctoKbCgvPhmzADeesTk/j2Rdx77AcKQ==
 
 core-util-is@1.0.2:
   version "1.0.2"
@@ -3849,9 +3886,9 @@ ejs@^2.6.1:
   integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
 
 electron-to-chromium@^1.4.17:
-  version "1.4.51"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.51.tgz#a432f5a5d983ace79278a33057300cf949627e63"
-  integrity sha512-JNEmcYl3mk1tGQmy0EvL5eik/CKSBuzAyGP0QFdG6LIgxQe3II0BL1m2zKc2MZMf3uGqHWE1TFddJML0RpjSHQ==
+  version "1.4.68"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.68.tgz#d79447b6bd1bec9183f166bb33d4bef0d5e4e568"
+  integrity sha512-cId+QwWrV8R1UawO6b9BR1hnkJ4EJPCPAr4h315vliHUtVUJDk39Sg1PMNnaWKfj5x+93ssjeJ9LKL6r8LaMiA==
 
 elliptic@^6.5.3:
   version "6.5.4"
@@ -3977,113 +4014,125 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-esbuild-android-arm64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.13.15.tgz#3fc3ff0bab76fe35dd237476b5d2b32bb20a3d44"
-  integrity sha512-m602nft/XXeO8YQPUDVoHfjyRVPdPgjyyXOxZ44MK/agewFFkPa8tUo6lAzSWh5Ui5PB4KR9UIFTSBKh/RrCmg==
-
-esbuild-darwin-64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.13.15.tgz#8e9169c16baf444eacec60d09b24d11b255a8e72"
-  integrity sha512-ihOQRGs2yyp7t5bArCwnvn2Atr6X4axqPpEdCFPVp7iUj4cVSdisgvEKdNR7yH3JDjW6aQDw40iQFoTqejqxvQ==
-
-esbuild-darwin-arm64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.15.tgz#1b07f893b632114f805e188ddfca41b2b778229a"
-  integrity sha512-i1FZssTVxUqNlJ6cBTj5YQj4imWy3m49RZRnHhLpefFIh0To05ow9DTrXROTE1urGTQCloFUXTX8QfGJy1P8dQ==
-
-esbuild-freebsd-64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.15.tgz#0b8b7eca1690c8ec94c75680c38c07269c1f4a85"
-  integrity sha512-G3dLBXUI6lC6Z09/x+WtXBXbOYQZ0E8TDBqvn7aMaOCzryJs8LyVXKY4CPnHFXZAbSwkCbqiPuSQ1+HhrNk7EA==
-
-esbuild-freebsd-arm64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.15.tgz#2e1a6c696bfdcd20a99578b76350b41db1934e52"
-  integrity sha512-KJx0fzEDf1uhNOZQStV4ujg30WlnwqUASaGSFPhznLM/bbheu9HhqZ6mJJZM32lkyfGJikw0jg7v3S0oAvtvQQ==
-
-esbuild-linux-32@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.13.15.tgz#6fd39f36fc66dd45b6b5f515728c7bbebc342a69"
-  integrity sha512-ZvTBPk0YWCLMCXiFmD5EUtB30zIPvC5Itxz0mdTu/xZBbbHJftQgLWY49wEPSn2T/TxahYCRDWun5smRa0Tu+g==
-
-esbuild-linux-64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.13.15.tgz#9cb8e4bcd7574e67946e4ee5f1f1e12386bb6dd3"
-  integrity sha512-eCKzkNSLywNeQTRBxJRQ0jxRCl2YWdMB3+PkWFo2BBQYC5mISLIVIjThNtn6HUNqua1pnvgP5xX0nHbZbPj5oA==
-
-esbuild-linux-arm64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.15.tgz#3891aa3704ec579a1b92d2a586122e5b6a2bfba1"
-  integrity sha512-bYpuUlN6qYU9slzr/ltyLTR9YTBS7qUDymO8SV7kjeNext61OdmqFAzuVZom+OLW1HPHseBfJ/JfdSlx8oTUoA==
-
-esbuild-linux-arm@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.13.15.tgz#8a00e99e6a0c6c9a6b7f334841364d8a2b4aecfe"
-  integrity sha512-wUHttDi/ol0tD8ZgUMDH8Ef7IbDX+/UsWJOXaAyTdkT7Yy9ZBqPg8bgB/Dn3CZ9SBpNieozrPRHm0BGww7W/jA==
-
-esbuild-linux-mips64le@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.15.tgz#36b07cc47c3d21e48db3bb1f4d9ef8f46aead4f7"
-  integrity sha512-KlVjIG828uFPyJkO/8gKwy9RbXhCEUeFsCGOJBepUlpa7G8/SeZgncUEz/tOOUJTcWMTmFMtdd3GElGyAtbSWg==
-
-esbuild-linux-ppc64le@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.15.tgz#f7e6bba40b9a11eb9dcae5b01550ea04670edad2"
-  integrity sha512-h6gYF+OsaqEuBjeesTBtUPw0bmiDu7eAeuc2OEH9S6mV9/jPhPdhOWzdeshb0BskRZxPhxPOjqZ+/OqLcxQwEQ==
-
-esbuild-netbsd-64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.15.tgz#a2fedc549c2b629d580a732d840712b08d440038"
-  integrity sha512-3+yE9emwoevLMyvu+iR3rsa+Xwhie7ZEHMGDQ6dkqP/ndFzRHkobHUKTe+NCApSqG5ce2z4rFu+NX/UHnxlh3w==
-
-esbuild-openbsd-64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.15.tgz#b22c0e5806d3a1fbf0325872037f885306b05cd7"
-  integrity sha512-wTfvtwYJYAFL1fSs8yHIdf5GEE4NkbtbXtjLWjM3Cw8mmQKqsg8kTiqJ9NJQe5NX/5Qlo7Xd9r1yKMMkHllp5g==
-
-esbuild-sunos-64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.13.15.tgz#d0b6454a88375ee8d3964daeff55c85c91c7cef4"
-  integrity sha512-lbivT9Bx3t1iWWrSnGyBP9ODriEvWDRiweAs69vI+miJoeKwHWOComSRukttbuzjZ8r1q0mQJ8Z7yUsDJ3hKdw==
-
-esbuild-windows-32@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.13.15.tgz#c96d0b9bbb52f3303322582ef8e4847c5ad375a7"
-  integrity sha512-fDMEf2g3SsJ599MBr50cY5ve5lP1wyVwTe6aLJsM01KtxyKkB4UT+fc5MXQFn3RLrAIAZOG+tHC+yXObpSn7Nw==
-
-esbuild-windows-64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.13.15.tgz#1f79cb9b1e1bb02fb25cd414cb90d4ea2892c294"
-  integrity sha512-9aMsPRGDWCd3bGjUIKG/ZOJPKsiztlxl/Q3C1XDswO6eNX/Jtwu4M+jb6YDH9hRSUflQWX0XKAfWzgy5Wk54JQ==
-
-esbuild-windows-arm64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.15.tgz#482173070810df22a752c686509c370c3be3b3c3"
-  integrity sha512-zzvyCVVpbwQQATaf3IG8mu1IwGEiDxKkYUdA4FpoCHi1KtPa13jeScYDjlW0Qh+ebWzpKfR2ZwvqAQkSWNcKjA==
-
-esbuild@^0.13.12:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.13.15.tgz#db56a88166ee373f87dbb2d8798ff449e0450cdf"
-  integrity sha512-raCxt02HBKv8RJxE8vkTSCXGIyKHdEdGfUmiYb8wnabnaEmHzyW7DCHb5tEN0xU8ryqg5xw54mcwnYkC4x3AIw==
+esbuild-android-arm64@0.14.21:
+  version "0.14.21"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.21.tgz#8842d0c3b7c81fbe2dc46ddb416ffd6eb822184b"
+  integrity sha512-Bqgld1TY0wZv8TqiQmVxQFgYzz8ZmyzT7clXBDZFkOOdRybzsnj8AZuK1pwcLVA7Ya6XncHgJqIao7NFd3s0RQ==
+
+esbuild-darwin-64@0.14.21:
+  version "0.14.21"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.21.tgz#ec7df02ad88ecf7f8fc23a3ed7917e07dea0c9c9"
+  integrity sha512-j+Eg+e13djzyYINVvAbOo2/zvZ2DivuJJTaBrJnJHSD7kUNuGHRkHoSfFjbI80KHkn091w350wdmXDNSgRjfYQ==
+
+esbuild-darwin-arm64@0.14.21:
+  version "0.14.21"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.21.tgz#0c2a977edec1ef54097ee56a911518c820d4e5e4"
+  integrity sha512-nDNTKWDPI0RuoPj5BhcSB2z5EmZJJAyRtZLIjyXSqSpAyoB8eyAKXl4lB8U2P78Fnh4Lh1le/fmpewXE04JhBQ==
+
+esbuild-freebsd-64@0.14.21:
+  version "0.14.21"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.21.tgz#f5b5fc1d031286c3a0949d1bda7db774b7d0404e"
+  integrity sha512-zIurkCHXhxELiDZtLGiexi8t8onQc2LtuE+S7457H/pP0g0MLRKMrsn/IN4LDkNe6lvBjuoZZi2OfelOHn831g==
+
+esbuild-freebsd-arm64@0.14.21:
+  version "0.14.21"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.21.tgz#a05cab908013e4992b31a675850b8c44eb468c0c"
+  integrity sha512-wdxMmkJfbwcN+q85MpeUEamVZ40FNsBa9mPq8tAszDn8TRT2HoJvVRADPIIBa9SWWwlDChIMjkDKAnS3KS/sPA==
+
+esbuild-linux-32@0.14.21:
+  version "0.14.21"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.21.tgz#638d244cc58b951f447addb4bade628d126ef84b"
+  integrity sha512-fmxvyzOPPh2xiEHojpCeIQP6pXcoKsWbz3ryDDIKLOsk4xp3GbpHIEAWP0xTeuhEbendmvBDVKbAVv3PnODXLg==
+
+esbuild-linux-64@0.14.21:
+  version "0.14.21"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.21.tgz#8eb634abee928be7e35b985fafbfef2f2e31397f"
+  integrity sha512-edZyNOv1ql+kpmlzdqzzDjRQYls+tSyi4QFi+PdBhATJFUqHsnNELWA9vMSzAaInPOEaVUTA5Ml28XFChcy4DA==
+
+esbuild-linux-arm64@0.14.21:
+  version "0.14.21"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.21.tgz#e05599ea6253b58394157da162d856f3ead62f9e"
+  integrity sha512-t5qxRkq4zdQC0zXpzSB2bTtfLgOvR0C6BXYaRE/6/k8/4SrkZcTZBeNu+xGvwCU4b5dU9ST9pwIWkK6T1grS8g==
+
+esbuild-linux-arm@0.14.21:
+  version "0.14.21"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.21.tgz#1ae1078231cf689d3ba894a32d3723c0be9b91fd"
+  integrity sha512-aSU5pUueK6afqmLQsbU+QcFBT62L+4G9hHMJDHWfxgid6hzhSmfRH9U/f+ymvxsSTr/HFRU4y7ox8ZyhlVl98w==
+
+esbuild-linux-mips64le@0.14.21:
+  version "0.14.21"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.21.tgz#f05be62d126764e99b37edcac5bb49b78c7a8890"
+  integrity sha512-jLZLQGCNlUsmIHtGqNvBs3zN+7a4D9ckf0JZ+jQTwHdZJ1SgV9mAjbB980OFo66LoY+WeM7t3WEnq3FjI1zw4A==
+
+esbuild-linux-ppc64le@0.14.21:
+  version "0.14.21"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.21.tgz#592c98d82dad7982268ef8deed858c4566f07ab1"
+  integrity sha512-4TWxpK391en2UBUw6GSrukToTDu6lL9vkm3Ll40HrI08WG3qcnJu7bl8e1+GzelDsiw1QmfAY/nNvJ6iaHRpCQ==
+
+esbuild-linux-riscv64@0.14.21:
+  version "0.14.21"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.21.tgz#0db7bd6f10d8f9afea973a7d6bf87b449b864b7b"
+  integrity sha512-fElngqOaOfTsF+u+oetDLHsPG74vB2ZaGZUqmGefAJn3a5z9Z2pNa4WpVbbKgHpaAAy5tWM1m1sbGohj6Ki6+Q==
+
+esbuild-linux-s390x@0.14.21:
+  version "0.14.21"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.21.tgz#254a9354d34c9d1b41a3e21d2ec9269cbbb2c5df"
+  integrity sha512-brleZ6R5fYv0qQ7ZBwenQmP6i9TdvJCB092c/3D3pTLQHBGHJb5zWgKxOeS7bdHzmLy6a6W7GbFk6QKpjyD6QA==
+
+esbuild-netbsd-64@0.14.21:
+  version "0.14.21"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.21.tgz#4cb783d060b02bf3b897a9a12cce2b3b547726f8"
+  integrity sha512-nCEgsLCQ8RoFWVV8pVI+kX66ICwbPP/M9vEa0NJGIEB/Vs5sVGMqkf67oln90XNSkbc0bPBDuo4G6FxlF7PN8g==
+
+esbuild-openbsd-64@0.14.21:
+  version "0.14.21"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.21.tgz#f886b93feefddbe573528fa4b421c9c6e2bc969b"
+  integrity sha512-h9zLMyVD0T73MDTVYIb/qUTokwI6EJH9O6wESuTNq6+XpMSr6C5aYZ4fvFKdNELW+Xsod+yDS2hV2JTUAbFrLA==
+
+esbuild-sunos-64@0.14.21:
+  version "0.14.21"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.21.tgz#3829e4d57d4cb6950837fe90b0b67cdfb37cf13a"
+  integrity sha512-Kl+7Cot32qd9oqpLdB1tEGXEkjBlijrIxMJ0+vlDFaqsODutif25on0IZlFxEBtL2Gosd4p5WCV1U7UskNQfXA==
+
+esbuild-windows-32@0.14.21:
+  version "0.14.21"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.21.tgz#b858a22d1a82e53cdc59310cd56294133f7a95e7"
+  integrity sha512-V7vnTq67xPBUCk/9UtlolmQ798Ecjdr1ZoI1vcSgw7M82aSSt0eZdP6bh5KAFZU8pxDcx3qoHyWQfHYr11f22A==
+
+esbuild-windows-64@0.14.21:
+  version "0.14.21"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.21.tgz#7bb5a027d5720cf9caf18a4bedd11327208f1f12"
+  integrity sha512-kDgHjKOHwjfJDCyRGELzVxiP/RBJBTA+wyspf78MTTJQkyPuxH2vChReNdWc+dU2S4gIZFHMdP1Qrl/k22ZmaA==
+
+esbuild-windows-arm64@0.14.21:
+  version "0.14.21"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.21.tgz#25df54521ad602c826b262ea2e7cc1fe80f5c2f5"
+  integrity sha512-8Sbo0zpzgwWrwjQYLmHF78f7E2xg5Ve63bjB2ng3V2aManilnnTGaliq2snYg+NOX60+hEvJHRdVnuIAHW0lVw==
+
+esbuild@^0.14.14:
+  version "0.14.21"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.21.tgz#b3e05f900f1c4394f596d60d63d9816468f0f671"
+  integrity sha512-7WEoNMBJdLN993dr9h0CpFHPRc3yFZD+EAVY9lg6syJJ12gc5fHq8d75QRExuhnMkT2DaRiIKFThRvDWP+fO+A==
   optionalDependencies:
-    esbuild-android-arm64 "0.13.15"
-    esbuild-darwin-64 "0.13.15"
-    esbuild-darwin-arm64 "0.13.15"
-    esbuild-freebsd-64 "0.13.15"
-    esbuild-freebsd-arm64 "0.13.15"
-    esbuild-linux-32 "0.13.15"
-    esbuild-linux-64 "0.13.15"
-    esbuild-linux-arm "0.13.15"
-    esbuild-linux-arm64 "0.13.15"
-    esbuild-linux-mips64le "0.13.15"
-    esbuild-linux-ppc64le "0.13.15"
-    esbuild-netbsd-64 "0.13.15"
-    esbuild-openbsd-64 "0.13.15"
-    esbuild-sunos-64 "0.13.15"
-    esbuild-windows-32 "0.13.15"
-    esbuild-windows-64 "0.13.15"
-    esbuild-windows-arm64 "0.13.15"
+    esbuild-android-arm64 "0.14.21"
+    esbuild-darwin-64 "0.14.21"
+    esbuild-darwin-arm64 "0.14.21"
+    esbuild-freebsd-64 "0.14.21"
+    esbuild-freebsd-arm64 "0.14.21"
+    esbuild-linux-32 "0.14.21"
+    esbuild-linux-64 "0.14.21"
+    esbuild-linux-arm "0.14.21"
+    esbuild-linux-arm64 "0.14.21"
+    esbuild-linux-mips64le "0.14.21"
+    esbuild-linux-ppc64le "0.14.21"
+    esbuild-linux-riscv64 "0.14.21"
+    esbuild-linux-s390x "0.14.21"
+    esbuild-netbsd-64 "0.14.21"
+    esbuild-openbsd-64 "0.14.21"
+    esbuild-sunos-64 "0.14.21"
+    esbuild-windows-32 "0.14.21"
+    esbuild-windows-64 "0.14.21"
+    esbuild-windows-arm64 "0.14.21"
 
 escalade@^3.1.1:
   version "3.1.1"
@@ -4156,9 +4205,9 @@ eslint-loader@^2.2.1:
     rimraf "^2.6.1"
 
 eslint-module-utils@^2.7.2:
-  version "2.7.2"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.2.tgz#1d0aa455dcf41052339b63cada8ab5fd57577129"
-  integrity sha512-zquepFnWCY2ISMFwD/DqzaM++H+7PDzOpUvotJWm/y1BAFt5R4oeULgdrTejKqLkz7MA/tgstsUMNYc7wNdTrg==
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz#ad7e3a10552fdd0642e1e55292781bd6e34876ee"
+  integrity sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==
   dependencies:
     debug "^3.2.7"
     find-up "^2.1.0"
@@ -4199,9 +4248,9 @@ eslint-plugin-vue@^6.2.2:
     vue-eslint-parser "^7.0.0"
 
 eslint-plugin-vue@^8.4.0:
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-8.4.0.tgz#16e59b356386b4428fb7d886b6d8ee5df2bbc09d"
-  integrity sha512-Ga96QRG8GA9AyzKtEDxqYRCMt/VJM4SLkcNmm4FvUiFBE4jpaBr25unRBi9iVmHLYhA9EZ/4I+jD8n1vfWzyAA==
+  version "8.4.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-8.4.1.tgz#0a25493bbfee6baa21614e637e3fd390617c0bb4"
+  integrity sha512-nmWOhNmDx9TZ+yP9ZhezTkZUupSHsYA2TocRm+efPSXMOyFrVczVlaIuQcLBjCtI8CbkBiUQ3VcyQsjlIhDrhA==
   dependencies:
     eslint-utils "^3.0.0"
     natural-compare "^1.4.0"
@@ -4603,7 +4652,7 @@ fast-glob@^2.2.6:
     merge2 "^1.2.3"
     micromatch "^3.1.10"
 
-fast-glob@^3.2.7:
+fast-glob@^3.2.11:
   version "3.2.11"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
   integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
@@ -4805,9 +4854,9 @@ flatted@^2.0.0:
   integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
 
 flatted@^3.1.0:
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.4.tgz#28d9969ea90661b5134259f312ab6aa7929ac5e2"
-  integrity sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw==
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
+  integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
 
 flush-write-stream@^1.0.0:
   version "1.1.1"
@@ -4818,9 +4867,9 @@ flush-write-stream@^1.0.0:
     readable-stream "^2.3.6"
 
 follow-redirects@^1.0.0:
-  version "1.14.7"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.7.tgz#2004c02eb9436eee9a21446a6477debf17e81685"
-  integrity sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==
+  version "1.14.8"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.8.tgz#016996fb9a11a100566398b1c6839337d7bfa8fc"
+  integrity sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==
 
 for-in@^1.0.2:
   version "1.0.2"
@@ -4847,9 +4896,9 @@ forwarded@0.2.0:
   integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
 
 fraction.js@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.1.2.tgz#13e420a92422b6cf244dff8690ed89401029fbe8"
-  integrity sha512-o2RiJQ6DZaR/5+Si0qJUIy637QMRudSi9kU/FFzx9EZazrIdnBgpU+3sEWCxAVhH2RtxW2Oz+T4p2o8uOPVcgA==
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.1.3.tgz#be65b0f20762ef27e1e793860bc2dfb716e99e65"
+  integrity sha512-pUHWWt6vHzZZiQJcM6S/0PXfS+g6FM4BF5rj9wZyreivhQPdsh5PpE25VtSNxq80wHS5RfY51Ii+8Z0Zl/pmzg==
 
 fragment-cache@^0.2.1:
   version "0.2.1"
@@ -5028,9 +5077,9 @@ globals@^12.1.0:
     type-fest "^0.8.1"
 
 globals@^13.6.0, globals@^13.9.0:
-  version "13.12.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.12.0.tgz#4d733760304230a0082ed96e21e5c565f898089e"
-  integrity sha512-uS8X6lSKN2JumVoXrbUz+uG4BYG+eiawqm3qFcT7ammfbUHeCBoJMlHcec/S3krSk73/AE/f0szYFmgAA3kYZg==
+  version "13.12.1"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.12.1.tgz#ec206be932e6c77236677127577aa8e50bf1c5cb"
+  integrity sha512-317dFlgY2pdJZ9rspXDks7073GpDmXdfbM3vYYp0HAMKGDh1FfWPleI2ljVNLQX5M5lXcAslTcPTrOrMEFOjyw==
   dependencies:
     type-fest "^0.20.2"
 
@@ -6433,7 +6482,7 @@ mime-db@1.51.0, "mime-db@>= 1.43.0 < 2":
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.51.0.tgz#d9ff62451859b18342d960850dc3cfb77e63fb0c"
   integrity sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==
 
-mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
+mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24, mime-types@~2.1.34:
   version "2.1.34"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.34.tgz#5a712f9ec1503511a945803640fafe09d3793c24"
   integrity sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==
@@ -6486,9 +6535,9 @@ minimalistic-crypto-utils@^1.0.1:
   integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
 minimatch@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
-  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.5.tgz#4da8f1290ee0f0f8e83d60ca69f8f134068604a3"
+  integrity sha512-tUpxzX0VAzJHjLu0xUfFv1gwVp9ba3IOuRAVH2EGuRW8a5emA2FlACLqiT/lDVtS1W+TGNwqz3sWaNyLgDJWuw==
   dependencies:
     brace-expansion "^1.1.7"
 
@@ -6599,7 +6648,7 @@ nanoid@3.1.31:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.31.tgz#f5b58a1ce1b7604da5f0605757840598d8974dc6"
   integrity sha512-ZivnJm0o9bb13p2Ot5CpgC2rQdzB9Uxm/mFZweqm5eMViqOJe3PV6LU2E30SiLgheesmcPrjquqraoolONSA0A==
 
-nanoid@^3.1.30:
+nanoid@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c"
   integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==
@@ -6626,10 +6675,10 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-negotiator@0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
-  integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
+negotiator@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
+  integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
 
 neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1:
   version "2.6.2"
@@ -6692,9 +6741,9 @@ node-libs-browser@^2.2.1:
     vm-browserify "^1.0.1"
 
 node-releases@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.1.tgz#3d1d395f204f1f2f29a54358b9fb678765ad2fc5"
-  integrity sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.2.tgz#7139fe71e2f4f11b47d4d2986aaf8c48699e0c01"
+  integrity sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==
 
 normalize-package-data@^2.5.0:
   version "2.5.0"
@@ -7642,7 +7691,7 @@ postcss-selector-parser@^3.0.0:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.8:
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.9:
   version "6.0.9"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz#ee71c3b9ff63d9cd130838876c13a2ec1a992b2f"
   integrity sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==
@@ -7687,13 +7736,13 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.27, postcss@^7.0.3
     source-map "^0.6.1"
 
 postcss@^8.1.10, postcss@^8.4.5:
-  version "8.4.5"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.5.tgz#bae665764dfd4c6fcc24dc0fdf7e7aa00cc77f95"
-  integrity sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==
+  version "8.4.6"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1"
+  integrity sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==
   dependencies:
-    nanoid "^3.1.30"
+    nanoid "^3.2.0"
     picocolors "^1.0.0"
-    source-map-js "^1.0.1"
+    source-map-js "^1.0.2"
 
 prelude-ls@^1.2.1:
   version "1.2.1"
@@ -7979,10 +8028,10 @@ rechoir@^0.6.2:
   dependencies:
     resolve "^1.1.6"
 
-regenerate-unicode-properties@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-9.0.0.tgz#54d09c7115e1f53dc2314a974b32c1c344efe326"
-  integrity sha512-3E12UeNSPfjrgwjkR81m5J7Aw/T55Tu7nUyZVQYCKEOs+2dkxEY+DpPtZzO4YruuiPb7NkYLVcyJC4+zCbk5pA==
+regenerate-unicode-properties@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz#7f442732aa7934a3740c779bb9b3340dccc1fb56"
+  integrity sha512-vn5DU6yg6h8hP/2OkQo3K7uVILvY4iu0oI4t3HFa81UPkhGJwkRwM10JEc3upjdhHjs/k8GJY1sRBhk5sr69Bw==
   dependencies:
     regenerate "^1.4.2"
 
@@ -8029,27 +8078,27 @@ regexpp@^3.2.0:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
-regexpu-core@^4.7.1:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.8.0.tgz#e5605ba361b67b1718478501327502f4479a98f0"
-  integrity sha512-1F6bYsoYiz6is+oz70NWur2Vlh9KWtswuRuzJOfeYUrfPX2o8n74AnUVaOGDbUqVGO9fNHu48/pjJO4sNVwsOg==
+regexpu-core@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.0.1.tgz#c531122a7840de743dcf9c83e923b5560323ced3"
+  integrity sha512-CriEZlrKK9VJw/xQGJpQM5rY88BtuL8DM+AEwvcThHilbxiTAy8vq4iJnd2tqq8wLmjbGZzP7ZcKFjbGkmEFrw==
   dependencies:
     regenerate "^1.4.2"
-    regenerate-unicode-properties "^9.0.0"
-    regjsgen "^0.5.2"
-    regjsparser "^0.7.0"
+    regenerate-unicode-properties "^10.0.1"
+    regjsgen "^0.6.0"
+    regjsparser "^0.8.2"
     unicode-match-property-ecmascript "^2.0.0"
     unicode-match-property-value-ecmascript "^2.0.0"
 
-regjsgen@^0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.2.tgz#92ff295fb1deecbf6ecdab2543d207e91aa33733"
-  integrity sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==
+regjsgen@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.6.0.tgz#83414c5354afd7d6627b16af5f10f41c4e71808d"
+  integrity sha512-ozE883Uigtqj3bx7OhL1KNbCzGyW2NQZPl6Hs09WTvCuZD5sTI4JY58bkbQWa/Y9hxIsvJ3M8Nbf7j54IqeZbA==
 
-regjsparser@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.7.0.tgz#a6b667b54c885e18b52554cb4960ef71187e9968"
-  integrity sha512-A4pcaORqmNMDVwUjWoTzuhwMGpP+NykpfqAsEgI1FSH/EzC7lrN5TMd+kN8YCovX+jMpu8eaqXgXPCa0g8FQNQ==
+regjsparser@^0.8.2:
+  version "0.8.4"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.8.4.tgz#8a14285ffcc5de78c5b95d62bbf413b6bc132d5f"
+  integrity sha512-J3LABycON/VNEu3abOviqGHuB/LOtOQj8SKmfP9anY5GfAVw/SPjwzSjxGjbZXIxbGfqTHtJw58C2Li/WkStmA==
   dependencies:
     jsesc "~0.5.0"
 
@@ -8147,7 +8196,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.1.6, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.20.0, resolve@^1.21.0:
+resolve@^1.1.6, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.20.0, resolve@^1.22.0:
   version "1.22.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
   integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
@@ -8227,9 +8276,9 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     inherits "^2.0.1"
 
 rollup@^2.59.0:
-  version "2.66.0"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.66.0.tgz#ee529ea15a20485d579039637fec3050bad03bbb"
-  integrity sha512-L6mKOkdyP8HK5kKJXaiWG7KZDumPJjuo1P+cfyHOJPNNTK3Moe7zCH5+fy7v8pVmHXtlxorzaBjvkBMB23s98g==
+  version "2.67.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.67.2.tgz#d95e15f60932ad21e05a870bd0aa0b235d056f04"
+  integrity sha512-hoEiBWwZtf1QdK3jZIq59L0FJj4Fiv4RplCO4pvCRC86qsoFurWB4hKQIjoRf3WvJmk5UZ9b0y5ton+62fC7Tw==
   optionalDependencies:
     fsevents "~2.3.2"
 
@@ -8304,10 +8353,10 @@ sass-loader@^8.0.0:
     schema-utils "^2.6.1"
     semver "^6.3.0"
 
-sass@^1.19.0:
-  version "1.49.0"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.0.tgz#65ec1b1d9a6bc1bae8d2c9d4b392c13f5d32c078"
-  integrity sha512-TVwVdNDj6p6b4QymJtNtRS2YtLJ/CqZriGg0eIAbAKMlN8Xy6kbv33FsEZSF7FufFFM705SQviHjjThfaQ4VNw==
+sass@^1.19.0, sass@^1.49.7:
+  version "1.49.7"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.7.tgz#22a86a50552b9b11f71404dfad1b9ff44c6b0c49"
+  integrity sha512-13dml55EMIR2rS4d/RDHHP0sXMY3+30e1TKsyXaSz3iLWVoDWEoboY8WzJd5JMnxrRHffKO3wq2mpJ0jxRJiEQ==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
@@ -8521,9 +8570,9 @@ side-channel@^1.0.4:
     object-inspect "^1.9.0"
 
 signal-exit@^3.0.0, signal-exit@^3.0.2:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.6.tgz#24e630c4b0f03fea446a2bd299e62b4a6ca8d0af"
-  integrity sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
+  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
 simple-swizzle@^0.2.2:
   version "0.2.2"
@@ -8614,7 +8663,7 @@ source-list-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
@@ -8987,19 +9036,19 @@ table@^5.2.3:
     string-width "^3.0.0"
 
 tailwindcss@^3.0.15:
-  version "3.0.15"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.0.15.tgz#e4db219771eb7678a3bfd97b3f6c8fe20be0a410"
-  integrity sha512-bT2iy7FtjwgsXik4ZoJnHXR+SRCiGR1W95fVqpLZebr64m4ahwUwRbIAc5w5+2fzr1YF4Ct2eI7dojMRRl8sVQ==
+  version "3.0.19"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.0.19.tgz#cd789953e6762af2e80c5a3e5d6da3a975ee8215"
+  integrity sha512-rjsdfz/qZya5xQ0OVynEMETgWq1CacmftgMYeXXh6bRM5vxsNwRSbMJsCCIjq/w67om9VP/AFMolOwiE+5VKig==
   dependencies:
     arg "^5.0.1"
     chalk "^4.1.2"
-    chokidar "^3.5.2"
+    chokidar "^3.5.3"
     color-name "^1.1.4"
     cosmiconfig "^7.0.1"
     detective "^5.2.0"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
-    fast-glob "^3.2.7"
+    fast-glob "^3.2.11"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
     normalize-path "^3.0.0"
@@ -9007,10 +9056,10 @@ tailwindcss@^3.0.15:
     postcss-js "^4.0.0"
     postcss-load-config "^3.1.0"
     postcss-nested "5.0.6"
-    postcss-selector-parser "^6.0.8"
+    postcss-selector-parser "^6.0.9"
     postcss-value-parser "^4.2.0"
     quick-lru "^5.1.1"
-    resolve "^1.21.0"
+    resolve "^1.22.0"
 
 tapable@^0.1.8:
   version "0.1.10"
@@ -9115,9 +9164,9 @@ timsort@^0.3.0:
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
 tinymce@^5.5.0:
-  version "5.10.2"
-  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-5.10.2.tgz#cf1ff01025909be26c64348509e6de8e70d58e1d"
-  integrity sha512-5QhnZ6c8F28fYucLLc00MM37fZoAZ4g7QCYzwIl38i5TwJR5xGqzOv6YMideyLM4tytCzLCRwJoQen2LI66p5A==
+  version "5.10.3"
+  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-5.10.3.tgz#9485cf00159fd70c4948cb5e9dd49bce2a775899"
+  integrity sha512-O59ssHNnujWvSk5Gt8hIGrdNCMKVWVQv9F8siAgLTRgTh0t3NDHrP1UlLtCxArUi9DPWZvlBeUz8D5fJTu7vnA==
 
 tmp@^0.0.33:
   version "0.0.33"
@@ -9247,83 +9296,83 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
-turbo-darwin-64@1.0.28:
-  version "1.0.28"
-  resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-1.0.28.tgz#662392368698c4e698b31871f0953836872f7b0e"
-  integrity sha512-uvARrncW6HNTFi7PFe4sq4JqSOKs1vPgWjJjOEyVhsCFwBgYkXxYsJSdDfO8OhvJa3wv+eYFAK5RaUCk80Z8eg==
+turbo-darwin-64@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-1.1.2.tgz#b129aaf538821de78d5e2129495c553627174650"
+  integrity sha512-rua17HnVvAqAU54gVfiQoH7cfopOqANv+yI6NtxLMD8aFfX2cJ9m8SSvH2v2vCaToNDW6OnTkdqDKQpqIHzbCw==
 
-turbo-darwin-arm64@1.0.28:
-  version "1.0.28"
-  resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-1.0.28.tgz#3ba1a6f9a960321391b8cf809ed8fab0276a499d"
-  integrity sha512-d/ANU+RIq4Fx/MphkqFThvwOpb+NYDuR+07aV5w8cwI7ljw7hPAe3EW3CSlkPJhvjs6P/oh+F86jhh1Q581mVA==
+turbo-darwin-arm64@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-1.1.2.tgz#07a783ad2e3e8af600ae7406cc4062ff56ac0351"
+  integrity sha512-otqSQNYDyKg0KqB3NM0BI4oiRPKdJkUE/XBn8dcUS+zeRLrL00XtaM0eSwynZs1tb6zU/Y+SPMSBRygD1TCOnw==
 
-turbo-freebsd-64@1.0.28:
-  version "1.0.28"
-  resolved "https://registry.yarnpkg.com/turbo-freebsd-64/-/turbo-freebsd-64-1.0.28.tgz#f94e39dc455573c0a42f96f1a84649b252bf0571"
-  integrity sha512-JMJWftuWhJan+Momc39vbbwaLYEcMpYyBxIrumyIrIkQVaiSKs/6oEFzh1YA+KE16kAgzTPJPXFDkmsY3idAQg==
+turbo-freebsd-64@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/turbo-freebsd-64/-/turbo-freebsd-64-1.1.2.tgz#9e22abf04ec2298f205a57b5c9ce14e22844baf3"
+  integrity sha512-2nxwVDTAM0DtIQ2i3UOfEsQLF7vp+XZ/b9SKtiHxz710fXvdyuGivYI25axDdcBn8kQ45rnbUnarF1aW8CMGgg==
 
-turbo-freebsd-arm64@1.0.28:
-  version "1.0.28"
-  resolved "https://registry.yarnpkg.com/turbo-freebsd-arm64/-/turbo-freebsd-arm64-1.0.28.tgz#5551f5c67a82a16ce1ba3193410764bae0849d1a"
-  integrity sha512-fGJNE8qJUhosaIK5sGBheeve9y074FLWv8KfYuXMyV/6+dxpNV60HoAFvw8tL3q8TNp47pU6x8e8h+u1/rn1wQ==
+turbo-freebsd-arm64@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/turbo-freebsd-arm64/-/turbo-freebsd-arm64-1.1.2.tgz#6095c9012881225a5fdfb55362defa12f24b1f8e"
+  integrity sha512-ro1Ah96yzgzyT0BJe1mceAqxPxi0pUwzAvN3IKVpMqi4hYkT3aRbzDCaSxzyC6let2Al/NUsgHnbAv38OF2Xkw==
 
-turbo-linux-32@1.0.28:
-  version "1.0.28"
-  resolved "https://registry.yarnpkg.com/turbo-linux-32/-/turbo-linux-32-1.0.28.tgz#742340e6ca7d77c4fb884159bbc8c7faa8d61026"
-  integrity sha512-fE0qIExxYuVFo5WlVWY0DJ1YZ/w+EC9RheT9nc1tU2EK83XPE1CZFW4lFIsWsXnIy9337zUeNDFVoVxOxCBSUQ==
+turbo-linux-32@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/turbo-linux-32/-/turbo-linux-32-1.1.2.tgz#4726e533d6966172b6bc4a960524ec2eb61adaab"
+  integrity sha512-HKBsETxQMVaf/DJwMg7pypPbGA6KEu0gEf9C8o2aPJvwMPBYgNsNaU08Xizuh5xzEQTzpbIWfQyqdNgMV4RG3Q==
 
-turbo-linux-64@1.0.28:
-  version "1.0.28"
-  resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-1.0.28.tgz#167acbd2899c0da9252f755ae74d619aaf99efe6"
-  integrity sha512-e+f/O1MlcKCMhJf10q1x+1KSImHwuFUW2+A6DbLk+ekBUW5RELC2qF7hGypCzcpm8xIqtj5A0kP3blFy60AMxw==
+turbo-linux-64@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-1.1.2.tgz#dfe7f3a4c91acecdb84ecab330acee06857e568e"
+  integrity sha512-IklKsOklcRHIWkTzKg95BQ6jgJ53kLvRMrp8yqzlvZprkWdiyhAgUxrUTTHOOTce2XA3+jdN2+MwixG44uY2vg==
 
-turbo-linux-arm64@1.0.28:
-  version "1.0.28"
-  resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-1.0.28.tgz#785415e2a04125a69c7b1d45073150dbab3985f6"
-  integrity sha512-zN0nQClxp4nP4edinbdTd/9CpPjgNPsULc8LgunuJD+B9A0NRcRP5NCDo8/6ctTWs456sE3UhUF3t2b+uEgDzw==
+turbo-linux-arm64@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-1.1.2.tgz#c39b6c50657fa0e82627407c86a5c43f19598e2b"
+  integrity sha512-3kS6sk2lOtuBBqkcL+yeGqD1yew4UZ1o7XUcbDD8UPwhF2kAfK7Qs0vTJw4lnO1scjhihkoTrmXM7yozvjf4/w==
 
-turbo-linux-arm@1.0.28:
-  version "1.0.28"
-  resolved "https://registry.yarnpkg.com/turbo-linux-arm/-/turbo-linux-arm-1.0.28.tgz#f6de485aa732ba14cc1c851ba30b0f0a901507f3"
-  integrity sha512-PbB/RzN4W9M6sNZTvcjmc3PZ2S4CeFyQv/53tSs82pIlwM7NKVJzxVC0j3xCtoqoDDgXoJBhCpPV7MUEjCARQg==
+turbo-linux-arm@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/turbo-linux-arm/-/turbo-linux-arm-1.1.2.tgz#2f51f93a3aa144b8ba25d7b0e3c53ea186a0e9dd"
+  integrity sha512-CNbaTvRozq7H/5jpy9OZlzJ6BkeEXF+nF2n9dHiUrbAXd3nq84Qt9odcQJmGnexP19YS9w6l3tIHncX4BgwtqA==
 
-turbo-linux-mips64le@1.0.28:
-  version "1.0.28"
-  resolved "https://registry.yarnpkg.com/turbo-linux-mips64le/-/turbo-linux-mips64le-1.0.28.tgz#4f993f387d90fa99037ad9592e98648fdb9ca608"
-  integrity sha512-7LKmFS9M+AKW5slTHLz00Y4ovZh2CpjgMUkNNC6qtJB8YyWwXwoU0U7Yz28q3+rNVkcEiqWWx4l1Tj1AotTlaA==
+turbo-linux-mips64le@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/turbo-linux-mips64le/-/turbo-linux-mips64le-1.1.2.tgz#f52b7f410ac289d4e539f108679d2324aa5e271e"
+  integrity sha512-CDoXVIlW43C6KLgYxe13KkG8h6DswXHxbTVHiZdOwRQ56j46lU+JOVpLoh6wpQGcHvj58VEiypZBRTGVFMeogw==
 
-turbo-linux-ppc64le@1.0.28:
-  version "1.0.28"
-  resolved "https://registry.yarnpkg.com/turbo-linux-ppc64le/-/turbo-linux-ppc64le-1.0.28.tgz#053163e9042790102ceb1d299a3b79b1aa197be4"
-  integrity sha512-R382Op75XxcIiY1pWPnVnefxOeVbrVAeABIHLL1hKetbu9UPNzKAnQKqJYGzKIdTRKtPh5CQuErEFzs/Ky2ZgA==
+turbo-linux-ppc64le@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/turbo-linux-ppc64le/-/turbo-linux-ppc64le-1.1.2.tgz#18d08d3414075d0dcb4be83ca837dda508313996"
+  integrity sha512-xPVMHoiOJE/qI63jSOXwYIUFQXLdstxDV6fLnRxvq0QnJNxgTKq+mLUeE8M4LDVh1bdqHLcfk/HmyQ6+X1XVkQ==
 
-turbo-windows-32@1.0.28:
-  version "1.0.28"
-  resolved "https://registry.yarnpkg.com/turbo-windows-32/-/turbo-windows-32-1.0.28.tgz#b2b735fa56182aaf4095c9e4555fcf39ba050561"
-  integrity sha512-SjDgimlD5TMvkrFRtsJb4uVP7T44gwr0HqiIpAuWj1m5d8Pz/OisOoUkM/ISPKqVycIU5JF8wx0+CTnxC7YNhQ==
+turbo-windows-32@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/turbo-windows-32/-/turbo-windows-32-1.1.2.tgz#96033019094bcb091647d6063c3c9b8e83d0acbe"
+  integrity sha512-Gj1yvPE0aMDSOxGVSBaecLnwsVDT1xX8U0dtLrg52TYY2jlaci0atjHKr9nTFuX7z8uwAf6PopwdriGoCeT3ng==
 
-turbo-windows-64@1.0.28:
-  version "1.0.28"
-  resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-1.0.28.tgz#7a2ad6f8416f04f20a1445c8b7123b80c6b16583"
-  integrity sha512-nT7bgcdl/9QNGBiwCYwTQ2VszcsqJ4NqT4YkE954KFZYxgSwMjjVTdoXcsnXMHpWiMiYfFF7HZLecUNnDm1uUA==
+turbo-windows-64@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-1.1.2.tgz#8eb3f77ab7e04b077752ae2204114c82e5c74697"
+  integrity sha512-0Ncx/iKhnKrdAU8hJ+8NUcF9jtFr8KoW5mMWfiFzy+mgUbVKbpzWT2eoGR6zJExedQsRvYOejbEX5iihbnj5bA==
 
 turbo@latest:
-  version "1.0.28"
-  resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.0.28.tgz#fb33cecd2d025e3140ddbcc8c274f0ed7328f09d"
-  integrity sha512-5xmyVabNYqA0sCAU4VLdUS2A6GwIyy8FTszB/Fx4eNHwHudQwo00F2qORcDFwBHE4MqtnRoBFhL3ZJzo8c9A2w==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.1.2.tgz#751b9651dc3ebe469898db76afab6405666ad0ff"
+  integrity sha512-3ViHKyAkaBKNKwHASTa1zkVT3tVVhQNLrpxBS7LoN+794ouQUYmy6lf0rTqzG3iTZHtIDwC+piZSdTl4XjEVMg==
   optionalDependencies:
-    turbo-darwin-64 "1.0.28"
-    turbo-darwin-arm64 "1.0.28"
-    turbo-freebsd-64 "1.0.28"
-    turbo-freebsd-arm64 "1.0.28"
-    turbo-linux-32 "1.0.28"
-    turbo-linux-64 "1.0.28"
-    turbo-linux-arm "1.0.28"
-    turbo-linux-arm64 "1.0.28"
-    turbo-linux-mips64le "1.0.28"
-    turbo-linux-ppc64le "1.0.28"
-    turbo-windows-32 "1.0.28"
-    turbo-windows-64 "1.0.28"
+    turbo-darwin-64 "1.1.2"
+    turbo-darwin-arm64 "1.1.2"
+    turbo-freebsd-64 "1.1.2"
+    turbo-freebsd-arm64 "1.1.2"
+    turbo-linux-32 "1.1.2"
+    turbo-linux-64 "1.1.2"
+    turbo-linux-arm "1.1.2"
+    turbo-linux-arm64 "1.1.2"
+    turbo-linux-mips64le "1.1.2"
+    turbo-linux-ppc64le "1.1.2"
+    turbo-windows-32 "1.1.2"
+    turbo-windows-64 "1.1.2"
 
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
@@ -9617,13 +9666,13 @@ verror@1.10.0:
     extsprintf "^1.2.0"
 
 vite@^2.7.2:
-  version "2.7.13"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-2.7.13.tgz#99b56e27dfb1e4399e407cf94648f5c7fb9d77f5"
-  integrity sha512-Mq8et7f3aK0SgSxjDNfOAimZGW9XryfHRa/uV0jseQSilg+KhYDSoNb9h1rknOy6SuMkvNDLKCYAYYUMCE+IgQ==
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-2.8.0.tgz#0646ab9eee805fb24b667889644ac04bc516d0d3"
+  integrity sha512-ed5rjyeysttuPJX/aKSA0gTB/8ZKLM5xF6FtEuKy1B9DiQbDNFMVMQxnb9JesgBPUMMIJxC8w5KZ/KNWLKFXoA==
   dependencies:
-    esbuild "^0.13.12"
+    esbuild "^0.14.14"
     postcss "^8.4.5"
-    resolve "^1.20.0"
+    resolve "^1.22.0"
     rollup "^2.59.0"
   optionalDependencies:
     fsevents "~2.3.2"
@@ -9738,7 +9787,7 @@ vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@^2.6.11:
+vue-template-compiler@^2.6.12:
   version "2.6.14"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz#a2f0e7d985670d42c9c9ee0d044fed7690f4f763"
   integrity sha512-ODQS1SyMbjKoO1JBJZojSw6FE4qnh9rIpUZn2EUT86FKizx9uH5z6uXiIrm4/Nb/gwxTi/o17ZDEGWAXHvtC7g==
@@ -9756,16 +9805,16 @@ vue@^2.6.12:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
   integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==
 
-vue@^3.2.25:
-  version "3.2.29"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.29.tgz#3571b65dbd796d3a6347e2fd45a8e6e11c13d56a"
-  integrity sha512-cFIwr7LkbtCRanjNvh6r7wp2yUxfxeM2yPpDQpAfaaLIGZSrUmLbNiSze9nhBJt5MrZ68Iqt0O5scwAMEVxF+Q==
+vue@~3.2.25:
+  version "3.2.30"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.30.tgz#47de3039631ac22cab2fd26b427575260199b8bb"
+  integrity sha512-ZmTFWVJUX2XADkuOB8GcLTuxnBLogjJBTNVrM7WsTnjqRQ+VR8bLNrvNsbn8vj/LaP5+0WFAPrpngOYE2x+e+Q==
   dependencies:
-    "@vue/compiler-dom" "3.2.29"
-    "@vue/compiler-sfc" "3.2.29"
-    "@vue/runtime-dom" "3.2.29"
-    "@vue/server-renderer" "3.2.29"
-    "@vue/shared" "3.2.29"
+    "@vue/compiler-dom" "3.2.30"
+    "@vue/compiler-sfc" "3.2.30"
+    "@vue/runtime-dom" "3.2.30"
+    "@vue/server-renderer" "3.2.30"
+    "@vue/shared" "3.2.30"
 
 vuetify-loader@^1.3.0:
   version "1.7.3"
@@ -9777,9 +9826,9 @@ vuetify-loader@^1.3.0:
     loader-utils "^2.0.0"
 
 vuetify@^2.2.11:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.6.2.tgz#1ed4d3c9e734d55202bd566b789cce0e0013279a"
-  integrity sha512-nx3uZkO8MZNMshUEh1xKaQ1hQYepNwWFn3FVxKt+XBVf7ZFscd0GS/a3KZo4B3baXQmziCQAZKNIQF5IWeaIUw==
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.6.3.tgz#b33ede2da958a40c6ced0ad1f4eda737984b3967"
+  integrity sha512-Zfiz2DZnp1DvxqGaSCGqGjv4mPNAurJJ5Xwy7bzNzIySGLlRdlO8UH6aNWnSgfaAsLP3voxadSGDm6tKM8Ys7w==
 
 vuex@4:
   version "4.0.2"

From 42d50085b4fa1b31c322b0220970eb98eb63e533 Mon Sep 17 00:00:00 2001
From: Aabid <mailtoaabid01@gmail.com>
Date: Sat, 26 Feb 2022 15:20:27 +0530
Subject: [PATCH 7/8] feat: [admin] added  categories and add category

---
 .../migrations/0014_auto_20220219_0648.py     |  18 ++
 .../migrations/0015_auto_20220219_0705.py     |  30 ++
 apps/backend/Orders/models.py                 |   6 +-
 .../migrations/0009_auto_20220219_0648.py     |  19 ++
 .../migrations/0010_auto_20220219_0705.py     |  18 ++
 apps/backend/Users/models.py                  |  49 +--
 apps/backend/Users/schema.py                  |   8 +
 apps/backend/load_products.py                 |   1 +
 apps/backend/shop/models.py                   |   2 +-
 apps/backend/shop/schema.py                   | 159 +++++++++-
 apps/backend/shop/types.py                    |   9 +-
 .../admin/src/components/AppSideBar.vue       |  15 +
 .../admin/src/components/BaseButton.vue       |   2 +-
 .../admin/src/components/BaseButtonModal.vue  |  92 ++++++
 .../admin/src/components/BasePill.vue         |  43 +++
 .../src/components/BaseRichTextInput.vue      |   3 +-
 .../src/components/CategoryFormModal.vue      |  58 ++++
 .../admin/src/components/CustomersList.vue    |  34 +--
 .../admin/src/components/CustomersTable.vue   |  33 +-
 .../admin/src/components/OrdersList.vue       |  10 +-
 .../admin/src/components/OrdersTable.vue      |  21 +-
 .../src/components/ProductImageUpload.vue     |  40 +--
 .../ProductImageUploadThumbnail.vue           |   4 +-
 .../admin/src/components/ProductsList.vue     |  15 +-
 .../admin/src/components/SortDropdownMenu.vue |  14 +-
 .../admin/src/composables/useCustomers.js     |  27 +-
 .../admin/src/composables/useFilters.js       |   1 +
 .../admin/src/composables/useOrders.js        |  31 +-
 apps/frontend/admin/src/router/index.js       |   8 +
 apps/frontend/admin/src/views/Categories.vue  |  96 ++++++
 apps/frontend/store-front/package.json        |   3 +-
 .../src/components/address/addressCard.vue    |  71 ++---
 .../components/cart/cart-product-preview.vue  |  91 +++---
 .../src/components/filter/filterItemGroup.vue | 191 ++++++------
 .../src/components/home/brands.vue            | 133 ++++-----
 .../components/home/categoriesscroller.vue    | 127 ++++----
 .../src/components/home/categorySlideItem.vue |  67 ++---
 .../store-front/src/components/homePage.vue   | 159 +++++-----
 .../store-front/src/components/navdrawer.vue  |  23 +-
 .../src/components/orders/order.vue           |  66 ++--
 .../src/components/orders/orderItem.vue       |  72 +++--
 .../src/components/products/productCard.vue   | 132 ++++----
 .../components/products/productCarousal.vue   |  66 ++--
 .../src/components/products/productsGrid.vue  | 102 +++----
 .../src/graphql/Queries/homePage.js           |  57 ++--
 apps/frontend/store-front/src/main.js         | 144 +++++----
 apps/frontend/store-front/src/router/index.js |   1 +
 .../src/store/modules/address/index.js        | 230 +++++++-------
 .../src/store/modules/cart/index.js           | 137 ++++-----
 .../src/store/modules/orders/index.js         | 200 ++++++-------
 .../src/store/modules/products/actions.js     | 191 ++++++------
 .../src/store/modules/products/getters.js     | 141 +++++----
 .../src/store/modules/products/state.js       | 116 +++----
 .../src/store/modules/search/index.js         | 118 ++++----
 .../src/store/modules/user/actions.js         | 282 +++++++++---------
 .../src/store/modules/wishlist/index.js       | 109 +++----
 .../store-front/src/views/product.vue         | 186 +++++++-----
 .../store-front/src/views/productsPage.vue    | 167 +++++------
 packages/config/eslint-preset-vue2.js         |   0
 packages/graphql-client/.eslintrc.js          |  10 +-
 packages/graphql-client/admin/collections.js  |  81 +++++
 packages/graphql-client/admin/customers.js    |  24 +-
 packages/graphql-client/queries/cart.js       |  23 +-
 .../graphql-client/queries/collections.js     |  25 ++
 packages/graphql-client/queries/order.js      |   8 +-
 .../graphql-client/queries/productQueries.js  |   6 +-
 test.vue                                      |   6 +
 yarn.lock                                     |  38 ++-
 68 files changed, 2641 insertions(+), 1828 deletions(-)
 create mode 100644 apps/backend/Orders/migrations/0014_auto_20220219_0648.py
 create mode 100644 apps/backend/Orders/migrations/0015_auto_20220219_0705.py
 create mode 100644 apps/backend/Users/migrations/0009_auto_20220219_0648.py
 create mode 100644 apps/backend/Users/migrations/0010_auto_20220219_0705.py
 create mode 100644 apps/frontend/admin/src/components/BaseButtonModal.vue
 create mode 100644 apps/frontend/admin/src/components/BasePill.vue
 create mode 100644 apps/frontend/admin/src/components/CategoryFormModal.vue
 create mode 100644 apps/frontend/admin/src/views/Categories.vue
 create mode 100644 packages/config/eslint-preset-vue2.js
 create mode 100644 packages/graphql-client/admin/collections.js
 create mode 100644 packages/graphql-client/queries/collections.js
 create mode 100644 test.vue

diff --git a/apps/backend/Orders/migrations/0014_auto_20220219_0648.py b/apps/backend/Orders/migrations/0014_auto_20220219_0648.py
new file mode 100644
index 0000000..d63d1ae
--- /dev/null
+++ b/apps/backend/Orders/migrations/0014_auto_20220219_0648.py
@@ -0,0 +1,18 @@
+# Generated by Django 3.1.13 on 2022-02-19 06:48
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('Orders', '0013_auto_20220212_1244'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='order',
+            old_name='Address',
+            new_name='address',
+        ),
+    ]
diff --git a/apps/backend/Orders/migrations/0015_auto_20220219_0705.py b/apps/backend/Orders/migrations/0015_auto_20220219_0705.py
new file mode 100644
index 0000000..04349b0
--- /dev/null
+++ b/apps/backend/Orders/migrations/0015_auto_20220219_0705.py
@@ -0,0 +1,30 @@
+# Generated by Django 3.1.13 on 2022-02-19 07:05
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('Users', '0010_auto_20220219_0705'),
+        ('Orders', '0014_auto_20220219_0648'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='order',
+            name='address',
+            field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.PROTECT, to='Users.address'),
+        ),
+        migrations.AlterField(
+            model_name='order',
+            name='customer',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='Users.customer'),
+        ),
+        migrations.AlterField(
+            model_name='orderitem',
+            name='customer',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='Users.customer'),
+        ),
+    ]
diff --git a/apps/backend/Orders/models.py b/apps/backend/Orders/models.py
index dfef25a..ed0ccf4 100644
--- a/apps/backend/Orders/models.py
+++ b/apps/backend/Orders/models.py
@@ -8,7 +8,7 @@
 
 # Create your models here.
 class Order(models.Model):
-    customer = models.ForeignKey(Customer, on_delete=models.DO_NOTHING)
+    customer = models.ForeignKey(Customer, on_delete=models.CASCADE)
     paid = models.BooleanField(default=False)
     payment_methods = (("0", "stripe_checkout"), ("1", "PaymentIntent"))
 
@@ -39,7 +39,7 @@ class Order(models.Model):
         choices=Fullfilment_Statuses, default="Unfulfilled", max_length=50
     )
 
-    address = models.ForeignKey(Address, on_delete=models.DO_NOTHING, null=True)
+    address = models.ForeignKey(Address, on_delete=models.PROTECT, null=True)
     tax_percent = models.IntegerField(default=0)
     discount_percent = models.IntegerField(default=0)
     shipping_charges = models.IntegerField(default=0)
@@ -86,7 +86,7 @@ class OrderItem(models.Model):
     product_id = models.CharField(max_length=100, null=False)
     variation_id = models.CharField(null=False, max_length=50)
     amount = models.IntegerField(null=False)  # single item price
-    customer = models.ForeignKey(Customer, on_delete=models.DO_NOTHING)
+    customer = models.ForeignKey(Customer, on_delete=models.CASCADE)
 
     quantity = models.IntegerField(null=False)
     Order_date = models.DateTimeField(auto_now_add=True, blank=True)
diff --git a/apps/backend/Users/migrations/0009_auto_20220219_0648.py b/apps/backend/Users/migrations/0009_auto_20220219_0648.py
new file mode 100644
index 0000000..81eb649
--- /dev/null
+++ b/apps/backend/Users/migrations/0009_auto_20220219_0648.py
@@ -0,0 +1,19 @@
+# Generated by Django 3.1.13 on 2022-02-19 06:48
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('Users', '0008_auto_20220206_1710'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='customer',
+            name='default_address',
+            field=models.OneToOneField(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='default_address', to='Users.address'),
+        ),
+    ]
diff --git a/apps/backend/Users/migrations/0010_auto_20220219_0705.py b/apps/backend/Users/migrations/0010_auto_20220219_0705.py
new file mode 100644
index 0000000..22bec7b
--- /dev/null
+++ b/apps/backend/Users/migrations/0010_auto_20220219_0705.py
@@ -0,0 +1,18 @@
+# Generated by Django 3.1.13 on 2022-02-19 07:05
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('Users', '0009_auto_20220219_0648'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='customer',
+            name='Addresses',
+            field=models.ManyToManyField(blank=True, to='Users.Address'),
+        ),
+    ]
diff --git a/apps/backend/Users/models.py b/apps/backend/Users/models.py
index b5aaa38..75640ba 100644
--- a/apps/backend/Users/models.py
+++ b/apps/backend/Users/models.py
@@ -1,7 +1,7 @@
-
 from django.db import models
 from django.contrib.auth.models import AbstractUser
-from typing import Optional,Iterable
+from typing import Optional, Iterable
+
 # from graphql_auth.models import UserStatus
 class User(AbstractUser):
     is_customer = models.BooleanField(default=False)
@@ -10,23 +10,24 @@ class User(AbstractUser):
     #     super().save(*args,**kwargs)
     #     if self.is_customer :
     #         Customer(user=self).save()
-    
+
     # @property
     # def status(self):
     #     status = UserStatus.objects.get(user=self)
     #     print(status)
     #     return status
 
-class DynamicUpdateFields:
 
-    def update_fields(self,update_values):
-        for attr,value in update_values.items():
-            if value :
-                setattr(self,attr,value)
+class DynamicUpdateFields:
+    def update_fields(self, update_values):
+        for attr, value in update_values.items():
+            if value:
+                setattr(self, attr, value)
                 self.save()
 
-class Address(models.Model,DynamicUpdateFields):
-    name=models.CharField(max_length=100)
+
+class Address(models.Model, DynamicUpdateFields):
+    name = models.CharField(max_length=100)
     pincode = models.CharField(max_length=6)
     state = models.CharField(max_length=100)
     country = models.CharField(max_length=100)
@@ -34,8 +35,8 @@ class Address(models.Model,DynamicUpdateFields):
     town = models.CharField(max_length=100)
     apartment_no = models.CharField(max_length=50)
     # is_primary = models.BooleanField(default=False)
-    is_work= models.BooleanField(default=False)
-    is_home= models.BooleanField(default=True)
+    is_work = models.BooleanField(default=False)
+    is_home = models.BooleanField(default=True)
     phone_number = models.CharField(max_length=13, null=False)
 
     def __str__(self):
@@ -43,19 +44,25 @@ def __str__(self):
 
 
 class Customer(models.Model):
-    user = models.OneToOneField(
-        User, on_delete=models.CASCADE, primary_key=True)
-    phone_number = models.CharField(max_length=13, null=False,blank=True)
-    Addresses = models.ManyToManyField(Address,null=True,blank=True)
-    default_address=models.OneToOneField(Address,on_delete=models.SET_NULL,null=True,blank=True ,related_name="default_address")
+    user = models.OneToOneField(User, on_delete=models.CASCADE, primary_key=True)
+    phone_number = models.CharField(max_length=13, null=False, blank=True)
+    Addresses = models.ManyToManyField(Address, blank=True)
+    default_address = models.OneToOneField(
+        Address,
+        on_delete=models.CASCADE,
+        null=True,
+        blank=True,
+        related_name="default_address",
+    )
     is_verified = models.BooleanField(default=False)
     verification_methods = (
-        (1, 'phone'),
-        (2, 'email'),
+        (1, "phone"),
+        (2, "email"),
+    )
+    verified_by = models.IntegerField(
+        choices=verification_methods, null=True, blank=True
     )
-    verified_by = models.IntegerField(choices=verification_methods,null=True,blank=True)
     joined_on = models.DateField(auto_now_add=True, blank=True)
 
     def __str__(self):
         return str(self.user)
-
diff --git a/apps/backend/Users/schema.py b/apps/backend/Users/schema.py
index c7d31ba..88bee6e 100644
--- a/apps/backend/Users/schema.py
+++ b/apps/backend/Users/schema.py
@@ -15,6 +15,11 @@
 from cart.decorators import migrate_cart_to_db, migrate_cart_to_session
 
 
+class UserStatusType(DjangoObjectType):
+    class Meta:
+        model = UserStatus
+
+
 class UserType(DjangoObjectType):
     class Meta:
         model = User
@@ -55,6 +60,9 @@ class Meta:
             "user__last_name": ["exact"],
             "user__email": ["exact"],
             "phone_number": ["exact"],
+            "user__status__verified": ["exact"],
+            "user__status__archived": ["exact"],
+            "user__is_active": ["exact"],
         }
 
 
diff --git a/apps/backend/load_products.py b/apps/backend/load_products.py
index aff4476..2f5bee5 100644
--- a/apps/backend/load_products.py
+++ b/apps/backend/load_products.py
@@ -3,6 +3,7 @@
 import random
 import json 
 from mongoengine import *
+import  
 # connect('products',host='mongodb://localhost:27017')
 # connect('products',host='mongodb://25.19.8.34:27017')
 connect('zivero', host='mongodb+srv://test-user:M7AbnQx3MQLZErZ@cluster0.n9vpu.mongodb.net/zivero?retryWrites=true&w=majority')
diff --git a/apps/backend/shop/models.py b/apps/backend/shop/models.py
index b30f987..ec04e1c 100644
--- a/apps/backend/shop/models.py
+++ b/apps/backend/shop/models.py
@@ -30,7 +30,7 @@ class Category(Document):
         StringField(choices=gender_choices)
     )  # genders a category can have
     # will help in updating filters if a category is selected to get the revent gender associated to it
-    brands = ListField(ReferenceField(Brand))
+    brands = ListField(ReferenceField(Brand, reverse_delete_rule=NULLIFY))
     # will help in updating filters if a category is selected to get the relevent brands  associated to it
 
 
diff --git a/apps/backend/shop/schema.py b/apps/backend/shop/schema.py
index ac6c67f..dbb50e6 100644
--- a/apps/backend/shop/schema.py
+++ b/apps/backend/shop/schema.py
@@ -1,10 +1,9 @@
 import graphene
 from graphene_django.types import ObjectType
-from numpy import equal
 import bson
-from .models import Product, Category, Variant
+from .models import Product, Category, Variant, Brand
 from filters.schema import FilterInput
-from .types import ProductsType, VariantType, ProductType, CategoryType
+from .types import ProductsType, VariantType, ProductType, CategoryType, BrandType
 
 
 class Query(ObjectType):
@@ -17,6 +16,7 @@ class Query(ObjectType):
     product = graphene.Field(ProductType, id=graphene.String())
     categories = graphene.List(CategoryType)
     variants = graphene.List(VariantType)
+    brands = graphene.List(BrandType)
 
     def resolve_product(self, info, id, **kwargs):
         product = Product.objects(id=id).first()
@@ -56,6 +56,9 @@ def resolve_categories(self, info, **kwargs):
     def resolve_variants(self, info, **kwargs):
         return Variant.objects.all()
 
+    def resolve_brands(self, info, **kwargs):
+        return Brand.objects.all()
+
 
 class VariationInput(graphene.InputObjectType):
 
@@ -85,6 +88,147 @@ class ProductInput(graphene.InputObjectType):
     discount_percent = graphene.Int()
 
 
+class CategoryInput(graphene.InputObjectType):
+    name = graphene.String()
+    description = graphene.String()
+    image = graphene.String()
+    brands = graphene.List(graphene.String)
+    genders = graphene.List(graphene.String)
+
+
+class BrandInput(graphene.InputObjectType):
+    name = graphene.String()
+    logo = graphene.String()
+
+
+class VariantInput(graphene.InputObjectType):
+    name = graphene.String()
+    value = graphene.String()
+
+
+class createVariant(graphene.Mutation):
+    class Arguments:
+        input = VariantInput(required=True)
+
+    variant = graphene.Field(VariantType)
+
+    def mutate(self, info, input):
+        variant = Variant(**input)
+        variant.save()
+        return createVariant(variant=variant)
+
+
+class updateVariant(graphene.Mutation):
+    class Arguments:
+        id = graphene.String(required=True)
+        input = VariantInput(required=True)
+
+    variant = graphene.Field(VariantType)
+
+    def mutate(self, info, id, input):
+        variant = Variant.objects(id=id).first()
+        variant.update(**input)
+        variant.save()
+        return updateVariant(variant=variant)
+
+
+class deleteVariant(graphene.Mutation):
+    class Arguments:
+        id = graphene.String(required=True)
+
+    variant = graphene.Field(VariantType)
+
+    def mutate(self, info, id):
+        variant = Variant.objects(id=id).first()
+        variant.delete()
+        return deleteVariant(variant=variant)
+
+
+class createBrand(graphene.Mutation):
+    class Arguments:
+        input = BrandInput(required=True)
+
+    brand = graphene.Field(BrandType)
+
+    def mutate(self, info, input):
+        brand = Brand(**input)
+        brand.save()
+        return createBrand(brand=brand)
+
+
+class updateBrand(graphene.Mutation):
+    class Arguments:
+        input = BrandInput(required=True)
+
+    brand = graphene.Field(BrandType)
+
+    def mutate(self, info, input):
+        brand = Brand.objects(id=input.get("id")).first()
+        brand.update(**input)
+        return updateBrand(brand=brand)
+
+
+class deleteBrand(graphene.Mutation):
+    class Arguments:
+        id = graphene.String(required=True)
+
+    brand = graphene.Field(BrandType)
+
+    def mutate(self, info, id):
+        brand = Brand.objects(id=id).first()
+        brand.delete()
+        return deleteBrand(brand=brand)
+
+
+class createCategory(graphene.Mutation):
+    class Arguments:
+        input = CategoryInput()
+
+    category = graphene.Field(CategoryType)
+
+    def mutate(self, info, input):
+        category = Category(
+            name=input.name,
+            description=input.description,
+            image=input.image,
+            brands=input.brands,
+        )
+        category.save()
+        return createCategory(category=category)
+
+
+class updateCategory(graphene.Mutation):
+    class Arguments:
+        id = graphene.String(required=True)
+        input = CategoryInput(required=True)
+
+    category = graphene.Field(CategoryType)
+
+    def mutate(self, info, id, input):
+        category = Category.objects(id=id).first()
+        if category:
+            category.update(**{k: v for k, v in input.items() if v is not None})
+            category.save()
+            return updateCategory(category=category)
+        else:
+            return updateCategory(category=None)
+
+
+class deleteCategory(graphene.Mutation):
+    class Arguments:
+        id = graphene.String(required=True)
+
+    success = graphene.Boolean()
+
+    def mutate(self, info, id):
+        category = Category.objects(id=id).first()
+        if category:
+            category.delete()
+            return deleteCategory(success=True)
+        else:
+            return deleteCategory(success=False)
+
+
 class createProduct(graphene.Mutation):
     product = graphene.Field(ProductType)
 
@@ -161,3 +305,12 @@ class Mutation(graphene.ObjectType):
     create_product = createProduct.Field()
     update_product = updateProduct.Field()
     delete_product = deleteProduct.Field()
+    create_category = createCategory.Field()
+    update_category = updateCategory.Field()
+    delete_category = deleteCategory.Field()
+    create_brand = createBrand.Field()
+    update_brand = updateBrand.Field()
+    delete_brand = deleteBrand.Field()
+    create_variant = createVariant.Field()
+    update_variant = updateVariant.Field()
+    delete_variant = deleteVariant.Field()
diff --git a/apps/backend/shop/types.py b/apps/backend/shop/types.py
index b5f166f..47f9780 100644
--- a/apps/backend/shop/types.py
+++ b/apps/backend/shop/types.py
@@ -2,11 +2,10 @@
 import graphene
 from shop.models import *
 
+
 class BrandType(MongoengineObjectType):
     class Meta:
-        model=Brand
-
-
+        model = Brand
 
 
 class CategoryType(MongoengineObjectType):
@@ -32,11 +31,13 @@ class Meta:
 class ProductType(MongoengineObjectType):
     available_variants = graphene.JSONString()
     page_no = graphene.Int()
+
     class Meta:
         model = Product
 
+
 class ProductsType(graphene.ObjectType):
     products = graphene.List(ProductType)
     total_products = graphene.Int()
     page_no = graphene.Int()
-    total_pages = graphene.Int()
\ No newline at end of file
+    total_pages = graphene.Int()
diff --git a/apps/frontend/admin/src/components/AppSideBar.vue b/apps/frontend/admin/src/components/AppSideBar.vue
index 00e6a87..b088b4b 100644
--- a/apps/frontend/admin/src/components/AppSideBar.vue
+++ b/apps/frontend/admin/src/components/AppSideBar.vue
@@ -39,6 +39,21 @@ const menuItems = {
     icon: 'user',
     submenu: true,
   },
+  collections: {
+    to: { name: 'categories' },
+    icon: 'tag',
+    submenu: {
+      categories: {
+        to: { name: 'categories' },
+      },
+      brands: {
+        to: { name: 'categories' },
+      },
+      variants: {
+        to: { name: 'categories' },
+      },
+    },
+  },
 }
 
 const activeSubmenu = computed(() => {
diff --git a/apps/frontend/admin/src/components/BaseButton.vue b/apps/frontend/admin/src/components/BaseButton.vue
index bba69a7..6c0558a 100644
--- a/apps/frontend/admin/src/components/BaseButton.vue
+++ b/apps/frontend/admin/src/components/BaseButton.vue
@@ -61,7 +61,7 @@ defineProps({
     }"
     v-bind="$attrs"
   >
-    <div class="flex gap-2">
+    <div class="flex justify-center gap-2">
       <slot> </slot>
       <div
         v-if="loading"
diff --git a/apps/frontend/admin/src/components/BaseButtonModal.vue b/apps/frontend/admin/src/components/BaseButtonModal.vue
new file mode 100644
index 0000000..baec2f0
--- /dev/null
+++ b/apps/frontend/admin/src/components/BaseButtonModal.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="">
+    <button
+      type="button"
+      @click="openModal"
+      class="px-4 py-2 text-sm font-medium text-white bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
+    >
+      {{ buttonText }}
+    </button>
+  </div>
+  <TransitionRoot appear :show="isOpen" as="template">
+    <Dialog as="div" @close="closeModal">
+      <div class="fixed inset-0 z-10 overflow-y-auto">
+        <div class="min-h-screen px-4 text-center">
+          <TransitionChild
+            as="template"
+            enter="duration-300 ease-out"
+            enter-from="opacity-0"
+            enter-to="opacity-100"
+            leave="duration-200 ease-in"
+            leave-from="opacity-100"
+            leave-to="opacity-0"
+          >
+            <DialogOverlay class="fixed inset-0" />
+          </TransitionChild>
+
+          <span class="inline-block h-screen align-middle" aria-hidden="true"> &#8203; </span>
+
+          <TransitionChild
+            as="template"
+            enter="duration-300 ease-out"
+            enter-from="opacity-0 scale-95"
+            enter-to="opacity-100 scale-100"
+            leave="duration-200 ease-in"
+            leave-from="opacity-100 scale-100"
+            leave-to="opacity-0 scale-95"
+          >
+            <div
+              class="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl"
+            >
+              <DialogTitle as="h3" class="text-lg font-medium leading-6 text-gray-900">
+                {{ title }}
+              </DialogTitle>
+
+              <div @close="closeModal">
+                <slot />
+              </div>
+            </div>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { TransitionRoot, TransitionChild, Dialog, DialogOverlay, DialogTitle } from '@headlessui/vue'
+
+export default {
+  components: {
+    TransitionRoot,
+    TransitionChild,
+    Dialog,
+    DialogOverlay,
+    DialogTitle,
+  },
+  props: {
+    buttonText: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+  },
+  setup() {
+    const isOpen = ref(true)
+
+    return {
+      isOpen,
+      closeModal() {
+        isOpen.value = false
+      },
+      openModal() {
+        isOpen.value = true
+      },
+    }
+  },
+}
+</script>
diff --git a/apps/frontend/admin/src/components/BasePill.vue b/apps/frontend/admin/src/components/BasePill.vue
new file mode 100644
index 0000000..006641e
--- /dev/null
+++ b/apps/frontend/admin/src/components/BasePill.vue
@@ -0,0 +1,43 @@
+<script setup>
+defineProps({
+  error: {
+    type: Boolean,
+    default: false,
+  },
+  warning: {
+    type: Boolean,
+    default: false,
+  },
+  info: {
+    type: Boolean,
+    default: false,
+  },
+  success: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  base: {
+    type: Boolean,
+    default: true,
+  },
+})
+</script>
+
+<template>
+  <div
+    :class="{
+      'bg-green-100 text-green-800': success,
+      'bg-red-200 text-red-800': error,
+      'bg-yellow-100 text-yellow-600': warning,
+      'bg-gray-100 text-gray-600': disabled,
+      'bg-blue-100 text-blue-800': info,
+      'px-3 inline-flex text-xs leading-5 font-semibold rounded-full text-center': base,
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
diff --git a/apps/frontend/admin/src/components/BaseRichTextInput.vue b/apps/frontend/admin/src/components/BaseRichTextInput.vue
index 337aae4..09d9d99 100644
--- a/apps/frontend/admin/src/components/BaseRichTextInput.vue
+++ b/apps/frontend/admin/src/components/BaseRichTextInput.vue
@@ -4,7 +4,8 @@
       v-model="model"
       api-key="amcbn744ff0x5gvrf8z0vvxiasj7ldn8f9cqr07cnwyugt26"
       :init="{
-        height: 200,
+        height: 400,
+
         width: '100%',
         menubar: false,
         plugins: [
diff --git a/apps/frontend/admin/src/components/CategoryFormModal.vue b/apps/frontend/admin/src/components/CategoryFormModal.vue
new file mode 100644
index 0000000..09d861a
--- /dev/null
+++ b/apps/frontend/admin/src/components/CategoryFormModal.vue
@@ -0,0 +1,58 @@
+<script setup>
+import { ref, computed } from 'vue'
+import baseButtonModal from './BaseButtonModal.vue'
+import baseInput from './BaseInput.vue'
+import baseButton from './BaseButton.vue'
+import multiSelect from './BaseMultiselectField.vue'
+import { getBrands } from 'graphql-client/queries/collections'
+import { createCategory } from 'graphql-client/admin/collections'
+import { useQuery, useResult, useMutation } from '@vue/apollo-composable'
+
+const { loading, error, result } = useQuery(getBrands)
+const brands = useResult(result, [], data => data.brands)
+
+const brandNames = computed(() => brands.value.map(brand => brand.name))
+const genders = ['Men', 'Women']
+const {
+  mutate: categoryMutation,
+  loading: creatingCategory,
+  error: creatingCategoryError,
+} = useMutation(createCategory)
+
+const input = ref({
+  name: '',
+  description: '',
+  brands: [],
+  genders: [],
+  image: '',
+})
+
+defineEmits(['close'])
+
+const saveCategory = () => {
+  let input_copy = { ...input.value }
+  input_copy.brands = input_copy.brands.map(name => brands.value.find(brand => brand.name == name).id)
+  console.log(input_copy)
+  categoryMutation({
+    input: input_copy,
+  })
+}
+</script>
+
+<template>
+  <base-button-modal button-text="add category" title="add categorry">
+    <div class="py-3">
+      {{ input }}
+      {{ brandNames }}
+      <base-input placeholder="name" v-model="input.name"></base-input>
+
+      <textarea class="w-full rounded mt-3" v-model="input.description" placeholder="description"></textarea>
+      <multi-select v-model="input.brands" :options="brandNames"></multi-select>
+      <multi-select v-model="input.genders" :options="genders"> </multi-select>
+      <base-input placeholder="image url" v-model="input.image"></base-input>
+      <base-button @click="saveCategory" class="w-full" :loading="creatingCategory" :disabled="creatingCategory"
+        >Save</base-button
+      >
+    </div>
+  </base-button-modal>
+</template>
diff --git a/apps/frontend/admin/src/components/CustomersList.vue b/apps/frontend/admin/src/components/CustomersList.vue
index fd7f5f6..2c1b442 100644
--- a/apps/frontend/admin/src/components/CustomersList.vue
+++ b/apps/frontend/admin/src/components/CustomersList.vue
@@ -1,29 +1,35 @@
 <template>
   <v-card outlined class="p-0">
-    <orders-filter-drawer :is-open="open" :toggle="toggleDrawer"></orders-filter-drawer>
+    <!-- <orders-filter-drawer :is-open="open" :toggle="toggleDrawer"></orders-filter-drawer> -->
     <div>
       <!-- customer status tabs -->
 
       <div class="flex px-3 py-2">
-        <base-tab-button :active="true"> All </base-tab-button>
-        <base-tab-button v-for="status in statuses" :key="status.value">
-          {{ status.name }}
+        <base-tab-button
+          v-for="(value, key) in statusOptions"
+          :key="key"
+          :active="filter[key]"
+          @click="toggleStatus(key)"
+        >
+          {{ value }}
         </base-tab-button>
+        <!-- <base-tab-button :active="filter.isArchived" @click="toggleStatus('isArchived')"> Archived </base-tab-button>
+        <base-tab-button :active="filter.isVerified" @click="toggleStatus('isVerified')"> Verified </base-tab-button> -->
       </div>
 
       <div class="flex py-3 px-5 justify-between flex-nowrap gap-2">
-        <div class="text-lg rounded-md text-gray-400 border-2 py-1 px-2 w-4/5 focus-within:border-blue-400">
+        <div class="text-lg rounded-md text-gray-400 border-2 py-1 px-2 w-full focus-within:border-blue-400">
           <font-awesome-icon icon="search" class="text-current mr-1"></font-awesome-icon>
           <input
             type="text"
-            placeholder="search orders"
+            placeholder="search customer"
             class="w-11/12 text-gray-500 border-none focus:ring-transparent focus:border-none"
           />
         </div>
-        <div class="flex items-center gap-3">
+        <!-- <div class="flex items-center gap-3">
           <sort-dropdown-menu items="['name']" @sort="console.log('ss')"></sort-dropdown-menu>
           <button class="border border-gray-500 py-2 px-3 w-full text-sm" @click="toggleDrawer()">More Filters</button>
-        </div>
+        </div> -->
       </div>
 
       <div v-if="loading">loading</div>
@@ -68,22 +74,10 @@ export default {
   setup() {
     const { open, toggleDrawer } = useNavdrawer(true)
 
-    const statuses = [
-      {
-        name: 'Active',
-        value: 'succeeded',
-      },
-      {
-        name: 'Disabled',
-        value: 'cancelled',
-      },
-    ]
-
     return {
       ...useCustomers(),
       open,
       toggleDrawer,
-      statuses,
     }
   },
 }
diff --git a/apps/frontend/admin/src/components/CustomersTable.vue b/apps/frontend/admin/src/components/CustomersTable.vue
index b9187eb..dee352f 100644
--- a/apps/frontend/admin/src/components/CustomersTable.vue
+++ b/apps/frontend/admin/src/components/CustomersTable.vue
@@ -22,6 +22,9 @@
                 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                   Active Status
                 </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Verified Status
+                </th>
                 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                   Phone No
                 </th>
@@ -44,14 +47,19 @@
 
                 <td class="px-6 py-4 whitespace-nowrap">
                   <div class="text-sm text-gray-900">
-                    {{ customer.user.email }}
+                    {{ customer.user.email ?? 'Not Set' }}
                   </div>
                 </td>
 
                 <td class="px-6 py-4 whitespace-nowrap">
-                  <div class="text-sm text-gray-900">
-                    {{ customer.user.isActive }}
-                  </div>
+                  <base-pill :success="customer.user.isActive" :warning="!customer.user.isActive">
+                    {{ userActive(customer.user) }}</base-pill
+                  >
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <base-pill :success="customer.user.status.verified" :error="!customer.user.status.verified">
+                    {{ userVerificationStatus(customer.user) }}
+                  </base-pill>
                 </td>
 
                 <td class="px-6 py-4 whitespace-nowrap">
@@ -77,14 +85,31 @@
 </template>
 
 <script>
+import BasePill from './BasePill.vue'
 export default {
+  name: 'CustomersTable',
+  components: {
+    BasePill,
+  },
+
   props: {
     customers: {
       type: Array,
       required: true,
     },
   },
+  computed: {},
   methods: {
+    userActive(user) {
+      if (user.status.archived) {
+        return 'archived'
+      } else if (user.isActive) {
+        return 'Active'
+      }
+    },
+    userVerificationStatus(user) {
+      return user.status.verified ? 'verified' : 'not verified'
+    },
     goToCustomer(id) {
       this.$router.push({
         name: 'order-view',
diff --git a/apps/frontend/admin/src/components/OrdersList.vue b/apps/frontend/admin/src/components/OrdersList.vue
index a02a2b9..34474f3 100644
--- a/apps/frontend/admin/src/components/OrdersList.vue
+++ b/apps/frontend/admin/src/components/OrdersList.vue
@@ -58,8 +58,13 @@
             class="w-11/12 text-gray-500 border-none focus:ring-transparent focus:border-none"
           />
         </div>
+
         <div class="flex items-center gap-3">
-          <sort-dropdown-menu></sort-dropdown-menu>
+          <sort-dropdown-menu
+            :sorting-options="sortOptions"
+            :selected="sortedBy"
+            @onSort="setSort"
+          ></sort-dropdown-menu>
           <button class="border border-gray-500 py-2 px-3 w-full text-sm" @click="toggleDrawer()">More Filters</button>
         </div>
       </div>
@@ -89,7 +94,7 @@ import OrdersFilterDrawer from './OrdersFilterDrawer.vue'
 import VPagination from './BasePagination.vue'
 import OrdersTable from './OrdersTable.vue'
 import SortDropdownMenu from './SortDropdownMenu.vue'
-import useOrders from '../composables/useOrders'
+import useOrders, { sortOptions } from '../composables/useOrders'
 
 export default {
   components: {
@@ -136,6 +141,7 @@ export default {
       toggleDrawer,
       paymentStatuses,
       fulfillmentStatuses,
+      sortOptions,
     }
   },
 }
diff --git a/apps/frontend/admin/src/components/OrdersTable.vue b/apps/frontend/admin/src/components/OrdersTable.vue
index 5ac2e4a..3538c45 100644
--- a/apps/frontend/admin/src/components/OrdersTable.vue
+++ b/apps/frontend/admin/src/components/OrdersTable.vue
@@ -34,7 +34,7 @@
             <tbody class="bg-white divide-y divide-gray-200">
               <tr v-for="{ node: order } in orders" :key="order.id" class="cursor-pointer" @click="goToOrder(order.id)">
                 <td class="px-6 py-4 whitespace-nowrap">
-                  <div class="text-sm font-medium text-gray-900">#{{ order.id }}</div>
+                  <div class="text-sm text-gray-600 font-semibold font-montserrat">#{{ order.id }}</div>
                 </td>
 
                 <td class="px-6 py-4 whitespace-nowrap">
@@ -50,13 +50,28 @@
                 </td>
 
                 <td class="px-6 py-4 whitespace-nowrap">
-                  <div class="text-sm text-gray-900">
+                  <div
+                    class="px-3 inline-flex text-xs leading-5 font-semibold rounded-full text-center"
+                    :class="{
+                      'bg-green-100 text-green-800': order.paymentStatus === 'SUCCEEDED',
+                      'bg-red-200 text-red-800': order.paymentStatus === 'CANCELED',
+                      'bg-yellow-100 text-yellow-600': order.paymentStatus === 'PROCESSING',
+                      'bg-gray-100 text-gray-600': order.paymentStatus === 'INITIATED',
+                    }"
+                  >
                     {{ order.paymentStatus }}
                   </div>
                 </td>
 
                 <td class="px-6 py-4 whitespace-nowrap">
-                  <div class="text-sm text-gray-900">
+                  <div
+                    class="px-3 inline-flex text-xs leading-5 font-semibold rounded-full text-center text-gray-600"
+                    :class="{
+                      'bg-green-100 text-green-800': order.fulfillmentStatus === 'FULFILLED',
+                      'bg-red-200 text-red-800': order.fulfillmentStatus === 'UNFULFILLED',
+                      'bg-yellow-100 text-yellow-600': order.fulfillmentStatus === 'PARTIALLYFULFILLED',
+                    }"
+                  >
                     {{ order.fulfillmentStatus }}
                   </div>
                 </td>
diff --git a/apps/frontend/admin/src/components/ProductImageUpload.vue b/apps/frontend/admin/src/components/ProductImageUpload.vue
index 635cee5..0368331 100644
--- a/apps/frontend/admin/src/components/ProductImageUpload.vue
+++ b/apps/frontend/admin/src/components/ProductImageUpload.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watchEffect, computed } from 'vue'
 import { includeScript } from 'utils'
 import { VCard, VCardBody } from './AppCard.vue'
 import VButton from './BaseButton.vue'
@@ -10,32 +10,27 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
-  update: {
-    type: Boolean,
-    default: false,
-  },
 })
 
 const emit = defineEmits(['update:modelValue'])
 
 const uploadedImages = ref([])
 
-const initProductImageUpload = () => {
-  console.log('update')
-  props.modelValue.forEach(url => {
-    uploadedImages.value.push({
-      url,
-      thumbnail_url: url,
-      public_id: url,
+watchEffect(() => {
+  if (uploadedImages.value.length < 1 && props.modelValue.length) {
+    const initData = props.modelValue.map(url => {
+      return {
+        public_id: url,
+        secure_url: url,
+        thumbnail_url: url,
+      }
     })
-  })
-}
+    uploadedImages.value = [...initData, ...uploadedImages.value]
+  }
+})
 
 onMounted(() => {
   console.log('mounted')
-  if (props.update) {
-    initProductImageUpload()
-  }
   includeScript('widget.cloudinary.com/v2.0/global/all.js')
 })
 
@@ -70,17 +65,22 @@ const deleteImage = image => {
   <v-card outlined>
     <v-card-body>
       <h3 class="text-gray-800 font-lg font-semibold">Media</h3>
-      <div class="flex gap-2">
+
+      <div class="grid grid-cols-8 gap-4">
         <product-image-thumbnail
-          v-for="image of uploadedImages"
+          v-for="(image, index) of [...uploadedImages]"
           :key="image.public_id"
           :src="image.thumbnail_url"
           alt="product thumbnail"
+          :class="{
+            'col-span-2 h-min': index !== 0,
+            'col-span-4': index == 0 || index == 1,
+          }"
           @remove="deleteImage(image)"
         ></product-image-thumbnail>
       </div>
       <div
-        class="flex py-3 flex-col justify-center items-center w-full border-dotted border-2 border-gray-500 hover:border-blue-600 my-5 rounded-lg"
+        class="flex py-10 flex-col justify-center items-center w-full border-dashed border-2 border-gray-300 hover:border-blue-600 my-5 rounded-lg"
       >
         <v-button @click="openUploadModel"> Add File </v-button>
         <p class="mt-5 mb-2">Add Images to show product details</p>
diff --git a/apps/frontend/admin/src/components/ProductImageUploadThumbnail.vue b/apps/frontend/admin/src/components/ProductImageUploadThumbnail.vue
index 536236c..20bfa31 100644
--- a/apps/frontend/admin/src/components/ProductImageUploadThumbnail.vue
+++ b/apps/frontend/admin/src/components/ProductImageUploadThumbnail.vue
@@ -14,8 +14,8 @@ defineEmits(['remove'])
 </script>
 
 <template>
-  <div class="relative hover:bg-blend-overlay p-3 border border-gray-500 shadow rounded-md">
-    <img :src="src" :alt="alt" />
+  <div class="relative hover:bg-blend-overlay shadow rounded-md">
+    <img :src="src" :alt="alt" class="border rounded-md border-gray-300" />
     <div class="h-full w-full bg-gray-800 absolute inset-0 opacity-0 hover:opacity-50 p-3">
       <font-awesome-icon icon="times" class="text-white float-right cursor-pointer" @click="$emit('remove')"
         >close</font-awesome-icon
diff --git a/apps/frontend/admin/src/components/ProductsList.vue b/apps/frontend/admin/src/components/ProductsList.vue
index 3c46991..0181fd0 100644
--- a/apps/frontend/admin/src/components/ProductsList.vue
+++ b/apps/frontend/admin/src/components/ProductsList.vue
@@ -31,7 +31,7 @@
           />
         </div>
         <div class="flex items-center gap-3">
-          <sort-dropdown-menu></sort-dropdown-menu>
+          <sort-dropdown-menu :sorting-options="sortingOptions" :selected="sortBy" @onSort="sort"></sort-dropdown-menu>
           <button class="border border-gray-500 py-2 px-3 w-full text-sm" @click="toggleDrawer()">More Filters</button>
         </div>
       </div>
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
 import useProducts from '../composables/useProducts'
 import useNavdrawer from '../composables/useNavdrawer'
@@ -74,12 +74,21 @@ export default {
 
   setup() {
     const { open, toggleDrawer } = useNavdrawer(true)
-    const { setStatus, filterState } = useFilters()
+    const { setStatus, filterState, setSortBy } = useFilters()
+    const { sortingOptions } = filterState.value
+    const sortBy = computed(() => filterState.value.filterInput.sortBy)
+
     const statuses = ref(['active', 'draft', 'archived'])
 
     const { products, totalPages, loading, error, currentPage, loadPage } = useProducts()
 
+    const sort = v => setSortBy(v)
+
     return {
+      sort,
+      setSortBy,
+      sortingOptions,
+      sortBy,
       statuses,
       setStatus,
       filterState,
diff --git a/apps/frontend/admin/src/components/SortDropdownMenu.vue b/apps/frontend/admin/src/components/SortDropdownMenu.vue
index a8d0ab2..b26f1ef 100644
--- a/apps/frontend/admin/src/components/SortDropdownMenu.vue
+++ b/apps/frontend/admin/src/components/SortDropdownMenu.vue
@@ -25,12 +25,12 @@
               v-for="option of sortingOptions"
               :key="option.value"
               v-slot="{ active }"
-              @click="setSortBy(option.value)"
+              @click="setSort(option.value)"
             >
               <button
                 :class="[
                   active ? 'bg-mint text-gray-800' : 'text-gray-900',
-                  option.value == active ? 'bg-mint text-gray-800 border-l-3 border-teal-800' : '',
+                  option.value == selected ? 'bg-mint text-gray-800 border-l-3 border-teal-800' : '',
                   'group flex rounded-md items-center w-full px-2 py-2 text-sm',
                 ]"
               >
@@ -60,12 +60,18 @@ export default {
       type: Object,
       required: true,
     },
-    active: {
+    selected: {
       type: String,
       required: true,
     },
   },
-  emits: ['setSortBy'],
+  emits: ['onSort'],
+
+  methods: {
+    setSort(value) {
+      this.$emit('onSort', value)
+    },
+  },
   // setup() {
   //   const { setSortBy, filterState } = useFilters()
   //   // eslint-disable-next-line prefer-destructuring
diff --git a/apps/frontend/admin/src/composables/useCustomers.js b/apps/frontend/admin/src/composables/useCustomers.js
index 50f8d15..94fb638 100644
--- a/apps/frontend/admin/src/composables/useCustomers.js
+++ b/apps/frontend/admin/src/composables/useCustomers.js
@@ -5,15 +5,19 @@ import { FetchCustomers } from 'graphql-client/admin/customers'
 const defaultFilters = {
   first: 30,
   offset: 0,
+  // isVerified: true,
+  // isArchived: false,
+  // isActive: true,
 }
 
 const customerFilters = reactive({
   ...defaultFilters,
 })
 
-export const filterOptions = {
-  paymentStatus: ['succeeded', 'processing', 'initiated', 'cancelled'],
-  fulfillmentStatus: ['Unfulfilled', 'Fulfilled', 'PartiallyFulfilled'],
+const statusOptions = {
+  isActive: 'Active',
+  isVerified: 'Verified',
+  isArchived: 'Archived',
 }
 
 export default () => {
@@ -43,8 +47,19 @@ export default () => {
       customerFilters[key] = defaultFilters[key]
     })
   }
+
+  const toggleStatus = key => {
+    if (['isActive', 'isVerified', 'isArchived'].includes(key)) {
+      // customerFilters[key] = !customerFilters[key]
+      if (customerFilters[key]) {
+        setFilter(key, null)
+      } else {
+        setFilter(key, true)
+      }
+    }
+  }
+
   const pageInfo = computed(() => {
-    console.log(totalItems.value)
     const totalPages = Math.ceil(totalItems.value / customerFilters.first)
     const currentPage = Math.floor((customerFilters.offset + customerFilters.first) / customerFilters.first)
 
@@ -56,14 +71,16 @@ export default () => {
 
   return {
     customerNodes,
+
+    toggleStatus,
     setFilter,
     setFilters,
     loadPage,
     resetFilters,
     filter: readonly(customerFilters),
+    statusOptions,
     error,
     loading,
     pageInfo,
-    filterOptions,
   }
 }
diff --git a/apps/frontend/admin/src/composables/useFilters.js b/apps/frontend/admin/src/composables/useFilters.js
index 4d2555f..34abbae 100644
--- a/apps/frontend/admin/src/composables/useFilters.js
+++ b/apps/frontend/admin/src/composables/useFilters.js
@@ -44,6 +44,7 @@ const useFilters = () => {
   }
 
   const setSortBy = sortBy => {
+    console.log('setting', sortBy)
     filterState.value.filterInput.sortBy = sortBy
   }
 
diff --git a/apps/frontend/admin/src/composables/useOrders.js b/apps/frontend/admin/src/composables/useOrders.js
index ca58be7..df29915 100644
--- a/apps/frontend/admin/src/composables/useOrders.js
+++ b/apps/frontend/admin/src/composables/useOrders.js
@@ -13,8 +13,20 @@ const defaultFilters = {
   fulfillmentStatus: null,
   createdAt: null,
   updatedAt: null,
+  orderBy: '-createdAt',
 }
 
+export const sortOptions = [
+  {
+    title: 'Newest',
+    value: '-created_at',
+  },
+  {
+    title: 'Oldest',
+    value: 'created_at',
+  },
+]
+
 const ordersFilter = reactive({
   ...defaultFilters,
 })
@@ -24,13 +36,6 @@ export const filterOptions = {
   fulfillmentStatus: ['Unfulfilled', 'Fulfilled', 'PartiallyFulfilled'],
 }
 
-export const salesForMonth = () => {
-  const today = new Date()
-  const firstDay = new Date(today.getFullYear(), today.getMonth(), 1)
-  const { result, loading, error } = useQuery(GetOrders, { createdAt_Gte: firstDay.toISOString() })
-  return useResult(result)
-}
-
 export default () => {
   const { result, loading, error } = useQuery(GetOrders, () => ({ ...ordersFilter }))
   const orderNodes = useResult(result, [], data => data.orders.edges)
@@ -58,6 +63,11 @@ export default () => {
       ordersFilter[key] = defaultFilters[key]
     })
   }
+
+  const setSort = sort => {
+    ordersFilter.orderBy = sort
+  }
+
   const pageInfo = computed(() => {
     console.log(totalItems.value)
     const totalPages = Math.ceil(totalItems.value / ordersFilter.first)
@@ -69,8 +79,15 @@ export default () => {
     }
   })
 
+  const sortedBy = computed(() => {
+    const { orderBy } = ordersFilter
+    return orderBy
+  })
+
   return {
     orderNodes,
+    sortedBy,
+    setSort,
     setFilter,
     setFilters,
     loadPage,
diff --git a/apps/frontend/admin/src/router/index.js b/apps/frontend/admin/src/router/index.js
index 351d22f..f92e151 100644
--- a/apps/frontend/admin/src/router/index.js
+++ b/apps/frontend/admin/src/router/index.js
@@ -41,6 +41,14 @@ const routes = [
       { path: ':id', name: 'order-view', component: () => import('../views/OrderSingle.vue') },
     ],
   },
+  {
+    path: '/collections',
+    name: 'collections',
+    component: () => import('../views/SideBarView.vue'),
+
+    children: [{ path: '', name: 'categories', component: () => import('../views/Categories.vue') }],
+  },
+
   {
     path: '/customers',
     name: 'customers',
diff --git a/apps/frontend/admin/src/views/Categories.vue b/apps/frontend/admin/src/views/Categories.vue
new file mode 100644
index 0000000..13b336f
--- /dev/null
+++ b/apps/frontend/admin/src/views/Categories.vue
@@ -0,0 +1,96 @@
+<script setup>
+import VButton from '../components/BaseButton.vue'
+import { useQuery, useResult } from '@vue/apollo-composable'
+import { getCategories } from 'graphql-client/queries/collections'
+import addCategory from '../components/CategoryFormModal.vue'
+const { loading, error, result } = useQuery(getCategories)
+const categories = useResult(result, [], data => data.categories)
+</script>
+
+<template>
+  <div>
+    <!-- header -->
+    <div class="flex justify-between my-4 items-center">
+      <span class="text-lg font-semibold font-montserrat text-black">Categories</span>
+      <div class="flex items-center text-gray-600">
+        <add-category></add-category>
+      </div>
+    </div>
+    <!-- table -->
+    <div class="flex flex-col">
+      <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+        <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+          <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+            <table class="min-w-full divide-y divide-gray-200">
+              <thead class="bg-gray-50">
+                <tr>
+                  <th
+                    scope="col"
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                  >
+                    name
+                  </th>
+                  <th
+                    scope="col"
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                  >
+                    description
+                  </th>
+
+                  <th
+                    scope="col"
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                  >
+                    brands
+                  </th>
+
+                  <th
+                    scope="col"
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                  >
+                    genders
+                  </th>
+                  <!-- <th scope="col" class="relative px-6 py-3">
+                  <span class="sr-only">Edit</span>
+                </th> -->
+                </tr>
+              </thead>
+              <tbody class="bg-white divide-y divide-gray-200">
+                <tr v-for="category in categories" :key="category.id" class="cursor-pointer">
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div>
+                      <div>
+                        <img :src="category.image" alt="" />
+                      </div>
+                      <div>
+                        <div class="text-sm text-gray-600 font-semibold font-montserrat">#{{ category.id }}</div>
+                        <div class="text-sm text-gray-600 font-medium font-montserrat">{{ category.name }}</div>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="text-sm text-gray-600 font-medium">{{ category.description }}</div>
+                  </td>
+                  <td class="px-6 py-4">
+                    <div class="flex gap-1">
+                      <div class="rounded bg-mint text-sm py-1 px-2" v-for="brand in category.brands" :key="brand">
+                        {{ brand.name }}
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex gap-1">
+                      <div class="rounded bg-mint text-sm py-1 px-2" v-for="gender in category.genders" :key="gender">
+                        {{ gender }}
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/frontend/store-front/package.json b/apps/frontend/store-front/package.json
index 0b21010..443a9f8 100644
--- a/apps/frontend/store-front/package.json
+++ b/apps/frontend/store-front/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "vue-cli-service serve --host 0.0.0.0 ",
+    "dev": "vue-cli-service serve --host 0.0.0.0 --skip-plugins @vue/cli-plugin-eslint",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
@@ -20,6 +20,7 @@
     "vue": "^2.6.12",
     "vue-apollo": "^3.0.5",
     "vue-router": "^3.4.9",
+    "vue-sanitize": "^0.2.1",
     "vuetify": "^2.2.11",
     "vuex": "^3.5.1"
   },
diff --git a/apps/frontend/store-front/src/components/address/addressCard.vue b/apps/frontend/store-front/src/components/address/addressCard.vue
index bd62fd5..5c755c2 100644
--- a/apps/frontend/store-front/src/components/address/addressCard.vue
+++ b/apps/frontend/store-front/src/components/address/addressCard.vue
@@ -3,27 +3,28 @@
     <v-container class="d-flex">
       <v-checkbox v-model="selected"></v-checkbox>
       <v-container>
-        
         <p class="ma-0 py-1 text-bold text-h6">
-          {{address.name}} 
-          <v-chip class="mx-4" small outlined color="green" >
+          {{ address.name }}
+          <v-chip class="mx-4" small outlined color="green">
             <span v-if="address.isHome">Home</span>
             <span v-if="address.isWork">Work</span>
-          </v-chip>        
+          </v-chip>
         </p>
         <div class="text-grey">
-          <p class="text-caption  mx-0 px-0">
-            {{address.apartmentNo}}. {{address.town}} .{{address.city}} . 
-            {{address.state}} -{{address.pincode}} 
+          <p class="text-caption mx-0 px-0">
+            {{ address.apartmentNo }}. {{ address.town }} .{{ address.city }} .
+            {{ address.state }} -{{ address.pincode }}
+          </p>
+          <p class="ma-0 py-1 text-subtitle">
+            Mobile <b>{{ address.phoneNumber }}</b>
           </p>
-          <p class="ma-0 py-1 text-subtitle">Mobile <b>{{address.phoneNumber}}</b></p>
         </div>
         <v-container
           class="py-2 px-0 mx-0 d-flex justify-start"
           v-if="selected"
         >
-          <v-btn outlined @click="$emit('updateAddress',address)"> Edit</v-btn>
-          <v-btn outlined class="mx-4"  @click="removeAddress()"> Remove</v-btn>
+          <v-btn outlined @click="$emit('updateAddress', address)"> Edit</v-btn>
+          <v-btn outlined class="mx-4" @click="removeAddress()"> Remove</v-btn>
         </v-container>
       </v-container>
     </v-container>
@@ -31,44 +32,38 @@
 </template>
 
 <script>
-import { mapActions,mapState,mapMutations } from "vuex";
+import { mapActions, mapState, mapMutations } from "vuex";
 export default {
-  props: [ "address",],
-
+  props: ["address"],
   data() {
-    return {
-      
-    };
+    return {};
   },
   methods: {
-    ...mapActions("addresses",["deleteAddress"]),
-    ...mapMutations("addresses",["setSelectedAddress"]),
+    ...mapActions("addresses", ["deleteAddress"]),
+    ...mapMutations("addresses", ["setSelectedAddress"]),
     select() {
       this.selected = !this.selected;
     },
-    removeAddress(){
-      this.deleteAddress(this.address.id)
-    }
-
+    removeAddress() {
+      this.deleteAddress(this.address.id);
+    },
   },
 
-  computed:{
-    ...mapState("addresses",["selectedAddress"]),
-    selected:{
-      get(){
+  computed: {
+    ...mapState("addresses", ["selectedAddress"]),
+    selected: {
+      get() {
         return this.address.id == this.selectedAddress.id;
       },
-      set(value){
-        console.log("valle",value)
-        if (value==true){
-          this.setSelectedAddress(this.address)
+      set(value) {
+        console.log("valle", value);
+        if (value == true) {
+          this.setSelectedAddress(this.address);
+        } else {
+          this.setSelectedAddress({ id: null });
         }
-        else{
-          this.setSelectedAddress({id:null})
-        }
-        
-      }
-    }
-  }
+      },
+    },
+  },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/apps/frontend/store-front/src/components/cart/cart-product-preview.vue b/apps/frontend/store-front/src/components/cart/cart-product-preview.vue
index 5af9053..4beddb8 100644
--- a/apps/frontend/store-front/src/components/cart/cart-product-preview.vue
+++ b/apps/frontend/store-front/src/components/cart/cart-product-preview.vue
@@ -1,36 +1,49 @@
 <template>
-  <div class="product-preview container rounded" >
+  <div class="product-preview container rounded">
     <!-- {{cartObject}}
     {{product}} -->
 
-    
     <v-row height="">
-      <v-col cols="3" >
-        <v-img class="product-image mb-1" contain :src="variation.images[0]" height="200px"> </v-img>
+      <v-col cols="3">
+        <v-img
+          class="product-image mb-1"
+          contain
+          :src="orderItemImage(product, variation)"
+          height="200px"
+        >
+        </v-img>
       </v-col>
       <v-col cols="9">
         <div
           class="product-details d-flex flex justify-space-between align-space-around text-capitalize"
         >
           <div class="pl-4">
-            <div class="text-h6 font-weight-bold ">{{ product.brand.name }}</div>
-            <div class="grey--text text-subtitle-1">{{ product.name}}</div>
-          
-            <div class="quantity  py-4 mx-0 justify-start align-center">
+            <div class="text-h6 font-weight-bold">{{ product.brand.name }}</div>
+            <div class="grey--text text-subtitle-1">{{ product.name }}</div>
 
-              <div><!--quantity-->
-                <v-icon class="mx-1" @click="quantityPlus()" color="darkGrey"> mdi-plus </v-icon>
+            <div class="quantity py-4 mx-0 justify-start align-center">
+              <div>
+                <!--quantity-->
+                <v-icon class="mx-1" @click="quantityPlus()" color="darkGrey">
+                  mdi-plus
+                </v-icon>
 
                 <span class="mx-2">
                   {{ quantity }}
                 </span>
 
-                <v-icon class="mx-1" @click="quantityMinus()" color="darkGrey"> mdi-minus </v-icon>
+                <v-icon class="mx-1" @click="quantityMinus()" color="darkGrey">
+                  mdi-minus
+                </v-icon>
               </div>
-              
+
               <!-- selected variants -->
-              <div class="d-flex justify-start py-5 ">
-                <span  class="mr-4 grey darken-2 text-button rounded white--text px-3 "   v-for="(varaint,index ) in variation.variant" :key="index">
+              <div class="d-flex justify-start py-5">
+                <span
+                  class="mr-4 grey darken-2 text-button rounded white--text px-3"
+                  v-for="(varaint, index) in variation.variant"
+                  :key="index"
+                >
                   {{ varaint.value }}
                 </span>
               </div>
@@ -40,11 +53,12 @@
           <div class="py-3 pr-4">
             <p class="text-subtitle-1 font-weight-bold">Rs {{ price }}</p>
             <p>
-              <span class="text-decoration-line-through grey--text">Rs {{undiscountedPrice}}</span>
-              <span class="poppins red--text">              
+              <span class="text-decoration-line-through grey--text"
+                >Rs {{ undiscountedPrice }}</span
+              >
+              <span class="poppins red--text">
                 {{ variation.discountPercent }} % OFF
               </span>
-           
             </p>
           </div>
         </div>
@@ -53,45 +67,42 @@
     <v-divider></v-divider>
 
     <div
-      class="darkGrey--text  d-flex justify-space-around align-space-between mt-3" 
+      class="darkGrey--text d-flex justify-space-around align-space-between mt-3"
     >
       <span class="link" @click="remove()">Remove</span>
       <v-divider vertical class=""></v-divider>
-      <span class="link" >Move To Wishlist</span>
+      <span class="link">Move To Wishlist</span>
     </div>
   </div>
 </template>
 
 <script>
-import {mapActions} from "vuex"
+import { mapActions, mapGetters } from "vuex";
 export default {
-  
-
   name: "cartProduct",
-  props: [
-   'cartObject'
-  ],
+  props: ["cartObject"],
   components: {},
   data() {
     return {
-      price:this.cartObject.price,
-      totalPrice:this.cartObject.totalPrice,
+      price: this.cartObject.price,
+      totalPrice: this.cartObject.totalPrice,
       quantity: this.cartObject.quantity,
-      product:this.cartObject.product,
-      variation : this.cartObject.variation,
+      product: this.cartObject.product,
+      variation: this.cartObject.variation,
       items: ["xl", "l"],
       selectedVariant: "xl",
     };
   },
   computed: {
+    ...mapGetters("orders", ["orderItemImage"]),
     undiscountedPrice: function () {
-      return this.price + (this.price * (this.variation.discountPercent / 100));
+      return this.price + this.price * (this.variation.discountPercent / 100);
     },
   },
   methods: {
-    ...mapActions("cart",["updateCart"]),
+    ...mapActions("cart", ["updateCart"]),
 
-    UpdateCart(){
+    UpdateCart() {
       let details = {
         productId: this.product.id,
         variationId: this.variation.Id,
@@ -101,19 +112,18 @@ export default {
     },
     quantityPlus() {
       this.quantity += 1;
-      this.UpdateCart()
-
+      this.UpdateCart();
     },
     quantityMinus() {
-      if (this.quantity >= 1 ){
+      if (this.quantity >= 1) {
         this.quantity -= 1;
-        this.UpdateCart()
+        this.UpdateCart();
       }
     },
 
     remove() {
       this.quantity = 0;
-      this.UpdateCart()
+      this.UpdateCart();
     },
   },
   watch: {
@@ -124,11 +134,10 @@ export default {
 };
 </script>
 <style scoped lang="css">
-
-.product-preview{
-  border:1px solid lightgrey;
+.product-preview {
+  border: 1px solid lightgrey;
 }
-.link{
+.link {
   cursor: pointer;
 }
 </style>
diff --git a/apps/frontend/store-front/src/components/filter/filterItemGroup.vue b/apps/frontend/store-front/src/components/filter/filterItemGroup.vue
index 0627467..51b82ab 100644
--- a/apps/frontend/store-front/src/components/filter/filterItemGroup.vue
+++ b/apps/frontend/store-front/src/components/filter/filterItemGroup.vue
@@ -1,108 +1,111 @@
 <template>
+  <div class="px-1">
+    <p class="text-h6 text-uppercase font-weight-bold my-2">
+      {{ label }}
+    </p>
 
-    <div>
-      <p class="text-h6 text-uppercase font-weight-bold my-2" >{{label}}</p> 
-      
-      <v-list-item-group
-        v-model="input"
-        :multiple="multiple"
-      >
-        <template v-for="(item, i) in filterValues">
-          <v-divider
-            v-if="!item"
-            :key="`divider-${i}`"
-          ></v-divider>
-
-          <v-list-item
-            v-else
-            :key="`item-${i}`"
-            :value="getValue(item)"
-            active-class="deep-purple--text text--accent-4"
-          >
-            <template v-slot:default="{ active }">
-              <v-list-item-action>
-                <v-checkbox
-                  :input-value="active"
-                  color="deep-purple accent-4"
-                ></v-checkbox>
-              </v-list-item-action>
-
-              <v-list-item-content>
-                <v-list-item-title class="title-wrap">
-                  <span class="title-wrap text-break">
-                    {{getTitle(item)}}
-                  </span>
-                </v-list-item-title>
-              </v-list-item-content>
-
-            </template>
-
-          </v-list-item>
-        </template>
-      </v-list-item-group>
-    
-    </div>
+    <v-list-item-group v-model="input" :multiple="multiple">
+      <template v-for="(item, i) in filterValues">
+        <v-list-item
+          class="list-item"
+          :value="getValue(item)"
+          active-class="white"
+        >
+          <template v-slot:default="{ active }">
+            <v-list-item-action>
+              <v-checkbox
+                :input-value="active"
+                color="deep-purple accent-4"
+              ></v-checkbox>
+            </v-list-item-action>
 
+            <v-list-item-content class="content">
+              <v-list-item-title class="title-wrap">
+                <span class="title-wrap text-break">
+                  {{ getTitle(item) }}
+                </span>
+              </v-list-item-title>
+            </v-list-item-content>
+          </template>
+        </v-list-item>
+      </template>
+    </v-list-item-group>
+  </div>
 </template>
 
 <script>
-import { mapState,mapActions } from "vuex"
-export default{
-    props:[
-        "filterType","label","filterValues","multiple"
-    ],
-    data(){
-        return{
-          
-        }
-    },
-    computed:{
-        ...mapState("filters",["filterInput"]),
-       
-        input:{
-            get(){
-                return this.filterInput[this.filterType]
-            },
-            set(v){
-
-                this.selectFilter({
-                    filterType:this.filterType,
-                    value:v,
-                    doUpdate:true
-                })
-            }
-
-        }
+import { mapState, mapActions } from "vuex";
+export default {
+  props: ["filterType", "label", "filterValues", "multiple"],
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState("filters", ["filterInput"]),
 
+    input: {
+      get() {
+        return this.filterInput[this.filterType];
+      },
+      set(v) {
+        this.selectFilter({
+          filterType: this.filterType,
+          value: v,
+          doUpdate: true,
+        });
+      },
     },
-    methods:{
-        ...mapActions("filters", ["filterProducts","selectFilter"]),
-        getTitle(item){
-            //return the the name if the item is an obj else the item
-            if (typeof item == "object"){
-                  return item.name
-            }else{
-                return item
-            }
-        },
-        getValue(item){
-            //return the the name if the item is an obj else the item
-            // console.log(typeof item== "object")
-            if (typeof item == "object"){
-                  return item.id
-            }else{
-                return item
-            }
-        }
-    }
-
-}
+  },
+  methods: {
+    ...mapActions("filters", ["filterProducts", "selectFilter"]),
+    getTitle(item) {
+      //return the the name if the item is an obj else the item
+      if (typeof item == "object") {
+        return item.name;
+      } else {
+        return item;
+      }
+    },
+    getValue(item) {
+      //return the the name if the item is an obj else the item
+      // console.log(typeof item== "object")
+      if (typeof item == "object") {
+        return item.id;
+      } else {
+        return item;
+      }
+    },
+  },
+};
 </script>
-<style scoped >
-.title-wrap{
+<style scoped>
+.title-wrap {
   /* word-wrap: break-word !important;
   text-overflow: ellipsis !important; */
   overflow-wrap: break-word;
 }
-</style>
 
+.list-item {
+  height: 10px !important;
+  /* background-color: aqua; */
+
+  padding-block: 0px !important;
+  margin: 0px !important;
+  font-size: 10px !important;
+}
+
+.v-list-item--active::before {
+  opacity: 0;
+  padding: 0;
+  margin: 0;
+}
+
+.content {
+  /* height: 10px !important; */
+  /* background-color: blue; */
+  padding: 0px !important;
+  padding-block: 0px !important;
+  margin: 0px !important;
+  font-size: 10px !important;
+}
+</style>
diff --git a/apps/frontend/store-front/src/components/home/brands.vue b/apps/frontend/store-front/src/components/home/brands.vue
index bef4558..9963d49 100644
--- a/apps/frontend/store-front/src/components/home/brands.vue
+++ b/apps/frontend/store-front/src/components/home/brands.vue
@@ -1,90 +1,79 @@
 <template>
-    <v-container class="brand-poster">
-        <p class="text-h4 font-weight-medium pl-2 py-4 accent--text"> Popular Brands </p>
-        
-        <div class="d-flex flex-wrap ">
-            <v-img 
-                
-                class="img mx-1 rounded my-1 grey lighten-5"
-                v-for="brand,i in brands"
-                :key="i"
-                src="https://images.pexels.com/photos/1619652/pexels-photo-1619652.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
-                :alt="brand" @click="filterByBrand(brand)" >
-                   
-                   <div class="brand-name d-flex justify-center align-center background--text text-md-h5 text-h6 font-weight-bold text-uppercase">
-                       <v-btn color="white" tile outlined >
-                           {{brand.name}}
-                       </v-btn>
-                   </div>
-            </v-img>
-            
+  <v-container fluid class="brand-poster">
+    <p class="text-h4 font-weight-bold pl-2 py-4">Popular Brands</p>
+
+    <div class="d-flex flex-wrap">
+      <v-img
+        class="img mx-1 rounded my-1 grey lighten-5"
+        v-for="(brand, i) in brands"
+        :key="i"
+        src="https://images.pexels.com/photos/1619652/pexels-photo-1619652.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
+        :alt="brand"
+        @click="filterByBrand(brand)"
+      >
+        <div
+          class="brand-name d-flex justify-center align-center background--text text-md-h5 text-h6 font-weight-bold text-uppercase"
+        >
+          <v-btn color="white" tile outlined>
+            {{ brand.name }}
+          </v-btn>
         </div>
-    </v-container>
+      </v-img>
+    </div>
+  </v-container>
 </template>
 
 <script>
-import {mapActions} from "vuex" ;
+import { mapActions } from "vuex";
 export default {
-    name:"brands",
-    props:{
-
-        brands:{
-            type:Array,
-            required:true
-        }
-    
-    },
-    data(){
-        return {
-                
-        }
-    },
-    computed:{
-       
+  name: "brands",
+  props: {
+    brands: {
+      type: Array,
+      required: true,
     },
-    methods:{
-      ...mapActions("products",["addTempFilter"]),
-      filterByBrand(brand){
-        
-        let filter={
-           brands:[brand.id]
-        }
-        
-        this.$router.push({
-            name:"products",
-            query:{
-                "filter":JSON.stringify(filter)
-            }
-            
-        })
-      }  
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {
+    ...mapActions("products", ["addTempFilter"]),
+    filterByBrand(brand) {
+      let filter = {
+        brands: [brand.id],
+      };
+
+      this.$router.push({
+        name: "products",
+        query: {
+          filter: JSON.stringify(filter),
+        },
+      });
     },
-}
+  },
+};
 </script>
 
 <style scoped>
-.brand-poster{
-   cursor: pointer;
-
+.brand-poster {
+  cursor: pointer;
 }
 
-.img{
-    width:35vw;
-    height:55vh;
+.img {
+  width: 35vw;
+  height: 55vh;
 }
 
-@media screen and (min-width:600px){
-    .img{
-        width:20vw;
-        height:45vh;
-    }
+@media screen and (min-width: 600px) {
+  .img {
+    width: 20vw;
+    height: 45vh;
+  }
 }
-    
-
 
-.brand-name{
-    height: 100%;
-    background-color:rgba(65, 64, 64, 0.411);
-    
+.brand-name {
+  height: 100%;
+  background-color: rgba(65, 64, 64, 0.411);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/frontend/store-front/src/components/home/categoriesscroller.vue b/apps/frontend/store-front/src/components/home/categoriesscroller.vue
index 28a98c9..b28967f 100644
--- a/apps/frontend/store-front/src/components/home/categoriesscroller.vue
+++ b/apps/frontend/store-front/src/components/home/categoriesscroller.vue
@@ -1,80 +1,69 @@
 <template>
- <div class='cat my-10'> 
-    <p class="text-h4 font-weight-medium pl-2 py-4 accent--text text-center " > Popular Categories </p>
+  <div>
+    <p class="text-h4 font-weight-bold pl-2 py-4">Popular Categories</p>
 
-      
-    <v-slide-group
-        v-model="model"
-        class="pa-2 "
-        center-active
-        show-arrows='false'
-        
-    >   
+    <v-slide-group v-model="model" class="pa-2" center-active>
       <!-- {{categories}} -->
-       <!-- <gender-slide-item :gender="gender" v-for="gender in genders" :key="gender" @click.native="addGenderFilter(gender.name)" /> -->
-       
-       <categorySlideItem :category="category" v-for="category in categories" :key="category.name" @click.native="addCategoryFilter(category)"  />
-   
-    </v-slide-group>   
-
-    </div>
-
-
+      <!-- <gender-slide-item :gender="gender" v-for="gender in genders" :key="gender" @click.native="addGenderFilter(gender.name)" /> -->
 
+      <categorySlideItem
+        :category="category"
+        v-for="category in categories"
+        :key="category.name"
+        @click.native="addCategoryFilter(category)"
+      />
+    </v-slide-group>
+  </div>
 </template>
 
-<script> 
-    import categorySlideItem from './categorySlideItem.vue'
-     import {mapActions} from 'vuex'
-    export default { 
+<script>
+import categorySlideItem from "./categorySlideItem.vue";
+import { mapActions } from "vuex";
+export default {
+  name: "categories",
+  components: {
+    categorySlideItem,
+  },
+  props: {
+    categories: {
+      type: Array,
+      required: true,
+    },
 
-        name: 'categories',
-        components: {
-            categorySlideItem 
-            } ,
-        props: {
-            categories: {
-                type: Array,
-                required: true
-            },
+    genders: {
+      type: Array,
+      required: true,
+    },
+  },
 
-            genders:{
-                type:Array,
-                required:true
-            }
-        },
-        
-        data(){
-            return{
-                model: null,
-               
-            }
+  data() {
+    return {
+      model: null,
+    };
+  },
+  methods: {
+    ...mapActions("filters", ["selectFilter"]),
 
+    addCategoryFilter(category) {
+      console.log("adding temp filter");
+      let filter = {
+        categories: [category.id],
+      };
+      // this.selectFilter({filterType:"categories",value:[category.id],doUpdate:true})
+      this.$router.push({
+        name: "products",
+        query: {
+          filter: JSON.stringify(filter),
         },
-        methods: {
-            ...mapActions("filters",["selectFilter"]),
-            
-            addCategoryFilter(category){
-                console.log("adding temp filter") 
-                let filter = {
-                    "categories":[category.id],
-                }
-                // this.selectFilter({filterType:"categories",value:[category.id],doUpdate:true})
-                this.$router.push({
-                    "name":"products",
-                    "query":{
-                        "filter":JSON.stringify(filter)
-                    }
-                })
-            },
-            // addGenderFilter(genderName){
-            //     console.log("adding temp filter") ;
-            //     this.updateQueryFilters({
-            //         genders:[genderName]
-            //     })
-            //      this.$router.push({"name":"products"})
-            // },
-        },
-    
-    }    
+      });
+    },
+    // addGenderFilter(genderName){
+    //     console.log("adding temp filter") ;
+    //     this.updateQueryFilters({
+    //         genders:[genderName]
+    //     })
+    //      this.$router.push({"name":"products"})
+    // },
+  },
+};
 </script>
diff --git a/apps/frontend/store-front/src/components/home/categorySlideItem.vue b/apps/frontend/store-front/src/components/home/categorySlideItem.vue
index 57989c7..d4570b0 100644
--- a/apps/frontend/store-front/src/components/home/categorySlideItem.vue
+++ b/apps/frontend/store-front/src/components/home/categorySlideItem.vue
@@ -1,53 +1,40 @@
 <template>
-    <v-slide-item
-      
-    
-      > 
-        <div class="mx-10 item">
-        <v-card
-          color="grey lighten-2"
-          class="my-3 red  rounded-circle"
-          height="20vh"
-          width="20vh"
-          elevation='0'
-          max-width="200px"
-          max-height="200px"
-          
+  <v-slide-item>
+    <div class="ma-2">
+      <v-card color="grey lighten-2" class="my-3 pa-0" elevation="0" outlined>
+        <v-img
+          :src="'https://cdn.allbirds.com/image/upload/f_auto,q_auto,w_533,b_rgb:f5f5f5/cms/RKWji6UFUgqcycaZ4dKlR/51810b36c76ba489106bb790cdeab4dc/TD1MTHU_SHOE_ANGLE_GLOBAL_MENS_TREE_DASHERS_THUNDER.png'"
+          contain
+          width="280px"
+          height="280px"
         >
-          
-            <v-img
-                height='100%'
-                width='100%'
-                class='rounded-circle'
-                :src="category.image"
-                contain
-                >
+        </v-img>
 
-            </v-img>
-
-                        
-        </v-card>
-        <p class='ma-1 poppins  name'>{{category.name}}</p>
+        <div
+          class="poppins white py-5 px-2 text-uppercase font-weight-bold text-subtitle"
+        >
+          {{ category.name }}
         </div>
-      </v-slide-item>
+      </v-card>
+    </div>
+  </v-slide-item>
 </template>
 
-
 <script>
 export default {
-    name:"categorySlideItem",
-    props:['category'],
-}
+  name: "categorySlideItem",
+  props: ["category"],
+};
 </script>
 
 <style scoped>
-.item{
-    cursor:pointer;
+.item {
+  cursor: pointer;
 }
-.name{
-    text-align: center;
-    margin: auto;
-    color: black;
-    text-transform: capitalize;
+.name {
+  text-align: center;
+  margin: auto;
+  color: black;
+  text-transform: capitalize;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/frontend/store-front/src/components/homePage.vue b/apps/frontend/store-front/src/components/homePage.vue
index 33af741..1718f70 100644
--- a/apps/frontend/store-front/src/components/homePage.vue
+++ b/apps/frontend/store-front/src/components/homePage.vue
@@ -1,31 +1,28 @@
 <template>
-    
-    <homepageLoading v-if="$apollo.loading" />
-    
+  <homepageLoading v-if="$apollo.loading" />
 
-    <v-app id='home-page' v-else>
-        
-        <offer/>
-        <banner :imgSrc=" 'https://images.pexels.com/photos/1852382/pexels-photo-1852382.jpeg' "/>
-        
-        
-        <categories :genders="filters.genders" :categories="filters.categories" />
-       
-        <carousal
-            
-            :images='images'
-            >
-        </carousal>
+  <v-app id="home-page" v-else>
+    <offer />
+    <banner
+      :imgSrc="'https://images.pexels.com/photos/1852382/pexels-photo-1852382.jpeg'"
+    />
 
-        <brands :brands="filters.brands" />
-        <v-container>
-           
-             <p class="text-h4 font-weight-medium pl-2 py-4 accent--text"> Best in Boys Wear </p>
-             <productsGrid :productChunks="boysChunks"></productsGrid> 
-             
-        </v-container>
-        
-         <!-- <v-container>
+    <categories
+      :genders="filters.genders"
+      :categories="filters.categories"
+      class="pl-md-16"
+    />
+
+    <carousal :images="images"> </carousal>
+
+    <brands :brands="filters.brands" class="pl-md-16" />
+
+    <div class="pl-md-16 my-5">
+      <p class="text-h4 font-weight-bold pl-2 py-4">New Arrival</p>
+      <productsGrid :productChunks="newArrivals"></productsGrid>
+    </div>
+
+    <!-- <v-container>
              <p class="text-h4 pl-2 py-4"> Trending Now  </p>
              <productsGrid :productChunks="productChunks"></productsGrid> 
              
@@ -36,75 +33,69 @@
              <productsGrid :productChunks="productChunks"></productsGrid> 
              
         </v-container> -->
-       
-     </v-app>
-
+  </v-app>
 </template>
 
 <script>
 //import navbar from './navbar.vue';
-import banner from './home/banner.vue';
-import categories from './home/categoriesscroller.vue';
-import brands from "./home/brands.vue"
-import productsGrid from './products/productsGrid.vue';
-import carousal from './carousal.vue';
-import offer from './offer.vue'; 
-import { LoadMainData } from '../graphql/Queries/homePage';
-import {chunk } from 'lodash'
-import homepageLoading from './home/loading.vue';
+import banner from "./home/banner.vue";
+import categories from "./home/categoriesscroller.vue";
+import brands from "./home/brands.vue";
+import productsGrid from "./products/productsGrid.vue";
+import carousal from "./carousal.vue";
+import offer from "./offer.vue";
+import { LoadMainData } from "../graphql/Queries/homePage";
+import { chunk } from "lodash";
+import homepageLoading from "./home/loading.vue";
 //let h = document.getElementById('nav').clientHeight;
 
-    export default { 
-        name: 'homePage',
-        components: {
-            homepageLoading,
-            banner,
-            categories,
-            brands,
-            productsGrid,
-            carousal,
-            offer,
-           
+export default {
+  name: "homePage",
+  components: {
+    homepageLoading,
+    banner,
+    categories,
+    brands,
+    productsGrid,
+    carousal,
+    offer,
+  },
+  mounted() {
+    // this.$store.dispatch("products/getProducts");
+  },
 
-        },
-        mounted() {
-            // this.$store.dispatch("products/getProducts");
-            
-           
-        },
+  data: () => ({
+    model: null,
+    images: [
+      "https://images.unsplash.com/photo-1542062700-9b61ccbc1696?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8c3R5bGV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
+      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcXw2V1eFXEmzty43HMDJhuFVclDdybrcbGw&usqp=CAUh",
+    ],
+  }),
 
-        data: () => ({
-            model: null,
-            images:['https://images.unsplash.com/photo-1542062700-9b61ccbc1696?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8c3R5bGV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60','https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcXw2V1eFXEmzty43HMDJhuFVclDdybrcbGw&usqp=CAUh']
-            
-             
-         }),
-    
-       computed:{
-          womensTrendingProducts(){
-            return chunk(this.WomensTrending.products,4);
-          },
-          boysChunks(){
-            console.log("chunks",this.BoysTrending)
-            return chunk(this.BoysTrending.products,4);
-          },
-            
-       },
-       apollo:{        
-                filters: {query:LoadMainData},
-                categories:{query:LoadMainData},
-                MensTrending:{query:LoadMainData},
-                WomenTrending:{query:LoadMainData},  
-                BoysTrending:{query:LoadMainData},     
-       }
-    }    
+  computed: {
+    womensTrendingProducts() {
+      return chunk(this.WomensTrending.products, 4);
+    },
+    newArrivals() {
+      console.log("chunks");
+      return chunk(this.NewArrivals.products, 4);
+    },
+  },
+  apollo: {
+    filters: { query: LoadMainData },
+    categories: { query: LoadMainData },
+    MensTrending: { query: LoadMainData },
+    WomenTrending: { query: LoadMainData },
+    NewArrivals: { query: LoadMainData },
+  },
+};
 </script>
 
-<style scoped lang="css" >
-#home-page{
-background-color:#FDF8F5;
+<style scoped lang="css">
+#home-page {
+  background-color: #fdf8f5;
 }
-#cat{
-margin-top:0%;
+#cat {
+  margin-top: 0%;
 }
 </style>
diff --git a/apps/frontend/store-front/src/components/navdrawer.vue b/apps/frontend/store-front/src/components/navdrawer.vue
index b22115c..42912f5 100644
--- a/apps/frontend/store-front/src/components/navdrawer.vue
+++ b/apps/frontend/store-front/src/components/navdrawer.vue
@@ -1,5 +1,11 @@
 <template>
-  <v-navigation-drawer  class="d-block d-md-none "  stateless  app clipped v-model="$store.state.app.is_navbar_open">
+  <v-navigation-drawer
+    class="d-block"
+    stateless
+    app
+    clipped
+    v-model="$store.state.app.is_navbar_open"
+  >
     <v-list nav dense>
       <v-list-item-group
         v-model="group"
@@ -29,20 +35,18 @@
             Products
           </v-list-item-title>
         </v-list-item>
-        <v-list-item v-if="isLoggedIn" >
+        <v-list-item v-if="isLoggedIn">
           <v-list-item-icon>
             <v-icon>mdi-account</v-icon>
           </v-list-item-icon>
-          <v-list-item-title @click="logOut()" >
-            Log Out
-          </v-list-item-title>
+          <v-list-item-title @click="logOut()"> Log Out </v-list-item-title>
         </v-list-item>
-        <v-list-item v-else >
+        <v-list-item v-else>
           <v-list-item-icon>
             <v-icon>mdi-account</v-icon>
           </v-list-item-icon>
-          <v-list-item-title @click="$router.push('/login')" >
-            SignIn / Register 
+          <v-list-item-title @click="$router.push('/login')">
+            SignIn / Register
           </v-list-item-title>
         </v-list-item>
       </v-list-item-group>
@@ -58,7 +62,6 @@ export default {
     ...mapState("user", ["auth"]),
     isLoggedIn() {
       return this.auth.isLoggedIn;
-    
     },
   },
   methods: {
@@ -67,7 +70,7 @@ export default {
     },
     logOut() {
       this.$store.dispatch("user/logOut");
-    }
+    },
   },
 };
 </script>
diff --git a/apps/frontend/store-front/src/components/orders/order.vue b/apps/frontend/store-front/src/components/orders/order.vue
index df94a04..61b322f 100644
--- a/apps/frontend/store-front/src/components/orders/order.vue
+++ b/apps/frontend/store-front/src/components/orders/order.vue
@@ -1,42 +1,42 @@
 <template>
-<div v-if="order!=undefined">
-    
-    <div class="d-flex justify-space-between py-3 " > 
-        <p> <span class="font-weight-bold">OrderId: </span>#{{order.id}}</p>
+  <div v-if="order != undefined">
+    <div class="d-flex justify-space-between py-3">
+      <p><span class="font-weight-bold">OrderId: </span>#{{ order.id }}</p>
 
-        <v-chip outlined color="green">{{order.paymentStatus}}</v-chip>
-    </div>       
-    <order-item class="my-2" :orderItem="item" v-for="item of order.orderitemSet" :key="item.product_id">
-        
+      <v-chip outlined color="green">{{ order.paymentStatus }}</v-chip>
+    </div>
+    <order-item
+      class="my-2"
+      :orderItem="item"
+      v-for="item of order.orderitemSet"
+      :key="item.product_id"
+    >
     </order-item>
-    <div class="d-flex justify-space-between py-3 " > 
-        <p class="font-weight-bold" > Rs {{totalAmount}} </p>
+    <div class="d-flex justify-space-between py-3">
+      <p class="font-weight-bold">Rs {{ order.totalAmount }}</p>
 
-        <p class="text--grey lighten-2 "> {{orderDate}} </p>
-    </div> 
-    
-</div>
+      <p class="text--grey lighten-2">{{ orderDate }}</p>
+    </div>
+  </div>
 </template>
 
 <script>
-import orderItem from "./orderItem.vue"
-import { mapGetters } from "vuex"
-export default{
-    props:["order"],
-    components:{
-        orderItem
+import orderItem from "./orderItem.vue";
+import { mapGetters } from "vuex";
+export default {
+  props: ["order"],
+  components: {
+    orderItem,
+  },
+  computed: {
+    ...mapGetters("orders", ["totalOrderAmount"]),
+    totalAmount() {
+      console.log("order", this.order);
+      return this.totalOrderAmount(this.order);
     },
-    computed:{
-        ...mapGetters("orders",['totalOrderAmount']),
-        totalAmount(){
-            console.log("order",this.order)
-            return this.totalOrderAmount(this.order)
-        },
-        orderDate(){
-            return this.order.createdAt.split("T")[0]
-        }
+    orderDate() {
+      return this.order.createdAt.split("T")[0];
     },
-    
-}
-
-</script>
\ No newline at end of file
+  },
+};
+</script>
diff --git a/apps/frontend/store-front/src/components/orders/orderItem.vue b/apps/frontend/store-front/src/components/orders/orderItem.vue
index b190ac1..65b8043 100644
--- a/apps/frontend/store-front/src/components/orders/orderItem.vue
+++ b/apps/frontend/store-front/src/components/orders/orderItem.vue
@@ -1,33 +1,49 @@
 <template>
-<v-container class="d-flex justify-start grey lighten-3 pt-6" v-if="orderItem.product" color="lightgrey">
+  <v-container
+    class="d-flex justify-start grey lighten-3 pt-6"
+    v-if="orderItem.product"
+    color="lightgrey"
+  >
+    <v-badge overlap :content="orderItem.Quantity">
+      <!-- <v-badge  width="20%" max-width="100px" :content="orderItem.Quantity" height="auto" overlap > -->
+      <v-img
+        :src="orderItemImage(orderItem.product, orderItem.variation)"
+        width="80px"
+        contain
+        class="rounded ma-0 pa-0"
+      >
+      </v-img>
+      <!-- </v-badge> -->
+    </v-badge>
 
-
-<v-badge overlap :content="orderItem.Quantity">
-    <!-- <v-badge  width="20%" max-width="100px" :content="orderItem.Quantity" height="auto" overlap > -->
-    <v-img :src="orderItem.variation.images[0]"   width="80px"  contain class="rounded ma-0 pa-0">
-    </v-img>
-    <!-- </v-badge> -->
-</v-badge>
-
-<div class="ml-5">
-     <p class="text-subtitle-1 font-weight-bold text-uppercase my-0">{{orderItem.product.brand.name}}</p>
-     <p class="text-subtitle-2 text-capitalize my-1">{{orderItem.product.name}}</p>
-     <div class="text-subtitle-2 text-capitalize my-1 " >
-         <span  class="mr-2" v-for="variant of orderItem.variation.variant" :key="variant.name">
-            {{variant.name}}: <span class="text-uppercase">{{variant.value}}</span> 
-         </span>
-     </div>
-     <p>
-         total : {{orderItem.Amount * orderItem.Quantity }} 
-     </p>
-</div>
-               
-</v-container>
+    <div class="ml-5">
+      <p class="text-subtitle-1 font-weight-bold text-uppercase my-0">
+        {{ orderItem.product.brand.name }}
+      </p>
+      <p class="text-subtitle-2 text-capitalize my-1">
+        {{ orderItem.product.name }}
+      </p>
+      <div class="text-subtitle-2 text-capitalize my-1">
+        <span
+          class="mr-2"
+          v-for="variant of orderItem.variation.variant"
+          :key="variant.name"
+        >
+          {{ variant.name }}:
+          <span class="text-uppercase">{{ variant.value }}</span>
+        </span>
+      </div>
+      <p>total : {{ orderItem.amount * orderItem.quantity }}</p>
+    </div>
+  </v-container>
 </template>
 
-
 <script>
-export default{
-    props:["orderItem"],
-}
-</script>
\ No newline at end of file
+import { mapGetters } from "vuex";
+export default {
+  props: ["orderItem"],
+  computed: {
+    ...mapGetters("orders", ["orderItemImage"]),
+  },
+};
+</script>
diff --git a/apps/frontend/store-front/src/components/products/productCard.vue b/apps/frontend/store-front/src/components/products/productCard.vue
index 6a5902b..40d40fd 100644
--- a/apps/frontend/store-front/src/components/products/productCard.vue
+++ b/apps/frontend/store-front/src/components/products/productCard.vue
@@ -1,76 +1,74 @@
 <template>
-        <v-card class="pa-0 "  outlined tile    >
-        
-            <v-img
-                @click='goToProduct()'        
-                class="product-image"
-                :src='image'
-            >  
-            </v-img>
+  <v-card class="pa-0" outlined tile>
+    </v-img>
 
-            <v-container  class="productDetails  d-flex flex-column pa-1 ma-0 " >
-                <div class=' d-flex justify-space-between align-end mb-0 px-1  kpoppins' >
-                    <span class='text-overline'>{{brandName}}</span>
-                    <v-icon class="cursor-pointer" @click="AddToWishlist" v-if="!wishlisted">
-                        mdi-heart-outline
-                    </v-icon>
-                    <v-icon class="cursor-pointer" @click="AddToWishlist" v-else color="red">
-                        mdi-heart
-                    </v-icon>
-                </div>
-                <div class='d-flex details flex-column justify-space-around mt-0'>
-                    <span class='ma-0 px-1 grey--text text-md-h6 text-caption'>{{name}}</span>
-                    <span class='ma-0 px-1 d-flex justify-space-between '> 
-                        <span id='price'> {{ price}} </span>
-                        <span id="mrp"
-                            class=' text-caption text-decoration-line-through green--text '>
-                            $560
-                        </span>
-                    </span>
-                </div>
-
-            </v-container>
-       </v-card>
+    <v-container class="productDetails d-flex flex-column pa-1 ma-0">
+      <div class="d-flex justify-space-between align-end mb-0 px-1 kpoppins">
+        <span class="text-overline">{{ brandName }}</span>
+        <v-icon
+          class="cursor-pointer"
+          @click="AddToWishlist"
+          v-if="!wishlisted"
+        >
+          mdi-heart-outline
+        </v-icon>
+        <v-icon
+          class="cursor-pointer"
+          @click="AddToWishlist"
+          v-else
+          color="red"
+        >
+          mdi-heart
+        </v-icon>
+      </div>
+      <div class="d-flex details flex-column justify-space-around mt-0">
+        <span class="ma-0 px-1 grey--text text-md-h6 text-caption">{{
+          name
+        }}</span>
+        <span class="ma-0 px-1 d-flex justify-space-between">
+          <span id="price"> {{ price }} </span>
+          <span id="mrp" class="text-button primary--text font-weight-bold">
+            {{ discountPercent }} % off
+          </span>
+        </span>
+      </div>
+    </v-container>
+  </v-card>
 </template>
 
-
 <script>
-import { mapActions } from "vuex"
-export default{
-    props:["name","brandName","price","image","id"],
-    data:()=>({
-       wishlisted:false,
-    }),
-    methods:{
-        ...mapActions("wishlist",["addToWishlist","removeFromWishlist"]),
-        goToProduct(){
-            this.$router.push({name:'product',params:{id:this.id}})
-        },
-        AddToWishlist(){
-            if(this.wishlisted){
-                this.removeFromWishlist(this.id)
-                this.wishlisted = false
-            }else{
-                this.addToWishlist(this.id)
-                this.wishlisted = true
-            }
-        }
-    }
-    
-}
+import { mapActions } from "vuex";
+export default {
+  props: ["name", "brandName", "price", "image", "id", "discountPercent"],
+  data: () => ({
+    wishlisted: false,
+  }),
+  methods: {
+    ...mapActions("wishlist", ["addToWishlist", "removeFromWishlist"]),
+    goToProduct() {
+      this.$router.push({ name: "product", params: { id: this.id } });
+    },
+    AddToWishlist() {
+      if (this.wishlisted) {
+        this.removeFromWishlist(this.id);
+        this.wishlisted = false;
+      } else {
+        this.addToWishlist(this.id);
+        this.wishlisted = true;
+      }
+    },
+  },
+};
 </script>
 
 <style scoped lang="css">
+.product-image {
+  height: 40vh;
+}
 
- .product-image{
-     height:40vh;
- }
-
- @media screen and (min-width: 700px){
-
-     .product-image{
-         height: 400px;
-     }
-     
- }
-</style>
\ No newline at end of file
+@media screen and (min-width: 700px) {
+  .product-image {
+    height: 400px;
+  }
+}
+</style>
diff --git a/apps/frontend/store-front/src/components/products/productCarousal.vue b/apps/frontend/store-front/src/components/products/productCarousal.vue
index 9da3ec2..e8cc1d9 100644
--- a/apps/frontend/store-front/src/components/products/productCarousal.vue
+++ b/apps/frontend/store-front/src/components/products/productCarousal.vue
@@ -1,36 +1,52 @@
 <template>
-    <div id="carousel" >
-        <v-carousel light cycle class="" height="auto"  hide-delimiter-background >
-            <v-carousel-item   
-                class=""            
-                v-for="(image, index) in productImages"
-                :key="index"
-            >
-               <v-img :src="image" contain height="auto" width="100%" class="mb-6"  max-height="600px"> </v-img>
-            </v-carousel-item>
-        </v-carousel>
+  <div>
+    <div id="carousel" class="d-md-none">
+      <v-carousel light cycle class="" height="auto" hide-delimiter-background>
+        <v-carousel-item class="" v-for="(image, index) in images" :key="index">
+          <v-img
+            :src="image"
+            contain
+            height="auto"
+            width="100%"
+            class="mb-6"
+            max-height="600px"
+          >
+          </v-img>
+        </v-carousel-item>
+      </v-carousel>
     </div>
-</template>
 
+    <div class="d-none d-md-flex flex-wrap">
+      <v-img
+        v-for="(image, index) in images"
+        :key="index"
+        :src="image"
+        contain
+        height="auto"
+        width="48%"
+        class="ma-2 flex-grow-0"
+      >
+      </v-img>
+    </div>
+  </div>
+</template>
 
 <script>
-import {mapGetters} from "vuex" ;
 export default {
-    name: "productCarousal",
-
-    computed: {
-        ...mapGetters("products",["productImages"])
+  name: "productCarousal",
+  props: {
+    images: {
+      type: Array,
+      required: true,
     },
-
-
-}
+  },
+};
 </script>
 
 <style lang="css" scoped>
-#carousel{
-    background-color: white;
-    height: auto;
-    width: 100vw;
-    max-width: 700px;
+#carousel {
+  background-color: white;
+  height: auto;
+  width: 100vw;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/frontend/store-front/src/components/products/productsGrid.vue b/apps/frontend/store-front/src/components/products/productsGrid.vue
index 677d634..e60cf07 100644
--- a/apps/frontend/store-front/src/components/products/productsGrid.vue
+++ b/apps/frontend/store-front/src/components/products/productsGrid.vue
@@ -1,78 +1,58 @@
 <template>
-<v-container class=" mb-4 productsGrid" >
-    
-    <v-row  v-for='chunk in productChunks' class='pa-0 ma-0'
-    :key='chunk'>
+  <div class="mb-4 w-full productGrid">
+    <v-row v-for="chunk in productChunks" class="pa-0 ma-0 w-full" :key="chunk">
       <v-col
-        class='ma-0 pa-0'
+        class="ma-0 pa-0"
         v-for="product in chunk"
         :key="product.id"
         cols="6"
-        sm='3'
-        lg='3'      
+        sm="4"
+        md="4"
+        lg="3"
       >
         <productCard
+          class="ma-1"
           :name="product.name"
           :brandName="product.brand.name"
-          :price="product.variations[0].price"
-          :image="product.variations[0].images[0]"
+          :price="product.price"
+          :image="product.images[0]"
           :id="product.id"
+          :discountPercent="product.discountPercent"
         ></productCard>
       </v-col>
     </v-row>
-
-   
-  </v-container>
-
-  
-</template> 
-
-<script> 
-import productCard from "./productCard.vue"
-    export default { 
-        name: 'productsGrid',
-        components: {
-           productCard
-        },
-        props:['productChunks'],
-        mounted() {
-
-           
-            // this.observer.observe(this.$refs.loader);
-
-        },
-        data(){
-            return{
-               
-                products:'',
-                hello:'',
-                itemsPerRow:2,
-                
-            }
-        },
-      
-      
-        methods:{
-            
-            goToProduct(id){
-                this.$router.push(`/products/${id}`)
-
-            },
-
-        },
-
-       
-
-}   
+  </div>
+</template>
+
+<script>
+import productCard from "./productCard.vue";
+export default {
+  name: "productsGrid",
+  components: {
+    productCard,
+  },
+  props: ["productChunks"],
+  mounted() {
+    // this.observer.observe(this.$refs.loader);
+  },
+  data() {
+    return {
+      products: "",
+      hello: "",
+      itemsPerRow: 2,
+    };
+  },
+
+  methods: {
+    goToProduct(id) {
+      this.$router.push(`/products/${id}`);
+    },
+  },
+};
 </script>
 
 <style>
-.productsGrid{
-    width: 100vw;
-    overflow: hidden;
+.productGrid {
+  width: 100%;
 }
- 
-
-
-
-</style> 
+</style>
diff --git a/apps/frontend/store-front/src/graphql/Queries/homePage.js b/apps/frontend/store-front/src/graphql/Queries/homePage.js
index f373fe6..1b43e9a 100644
--- a/apps/frontend/store-front/src/graphql/Queries/homePage.js
+++ b/apps/frontend/store-front/src/graphql/Queries/homePage.js
@@ -1,10 +1,9 @@
 import gql from "graphql-tag";
 
 const LoadMainData = gql`
-query HomePageState{
-    
+  query HomePageState {
     filters {
-      brands{
+      brands {
         id
         name
         logo
@@ -17,44 +16,38 @@ query HomePageState{
         image
       }
     }
-    
-    
 
-    MensTrending:Products(filter: {gender:"MEN"}) {
-       products {
-         ...productFields
-       }
+    MensTrending: Products(filter: { gender: "MEN" }) {
+      products {
+        ...productFields
+      }
     }
-    
-    WomenTrending:Products(filter: {gender:"WOMEN"}) {
-       products {
-           ...productFields
-       }
+
+    WomenTrending: Products(filter: { gender: "WOMEN" }) {
+      products {
+        ...productFields
+      }
     }
-    BoysTrending:Products(filter: {gender:"BOYS"}) {
-       products {
-           ...productFields
-       }
+    NewArrivals: Products {
+      products {
+        ...productFields
+      }
     }
-}
+  }
 
-fragment productFields on ProductType {
+  fragment productFields on ProductType {
     id
     available
     name
-    variations {
-      price
-      images 
-      discountPercent
-    }
-    brand{
+
+    price
+    discountPercent
+    images
+    brand {
       name
       id
     }
+  }
+`;
 
-}
-`
-
-export {
-    LoadMainData
-}
\ No newline at end of file
+export { LoadMainData };
diff --git a/apps/frontend/store-front/src/main.js b/apps/frontend/store-front/src/main.js
index 2edf3f9..2406057 100644
--- a/apps/frontend/store-front/src/main.js
+++ b/apps/frontend/store-front/src/main.js
@@ -1,115 +1,113 @@
-import Vue from 'vue'
-import App from './App.vue'
-import vuetify from './plugins/vuetify';
+import Vue from "vue";
+import App from "./App.vue";
+import vuetify from "./plugins/vuetify";
 //import Vuex from "vuex";
-import router from './router';
+import router from "./router";
 import ApolloClient from "apollo-client";
 import { HttpLink } from "apollo-link-http";
 import { InMemoryCache } from "apollo-cache-inmemory";
 
 import VueApollo from "vue-apollo";
 import { onError } from "apollo-link-error";
-import { ApolloLink ,concat ,fromPromise} from 'apollo-link';
+import { ApolloLink, concat, fromPromise } from "apollo-link";
 
-import {refreshTokenFlow} from "./auth"
+import { refreshTokenFlow } from "./auth";
 import store from "@/store";
 
+import VueSanitize from "vue-sanitize";
+
 // console.log("happy coding")
 
-Vue.use(VueApollo)
+Vue.use(VueApollo);
+Vue.use(VueSanitize);
+
 //auth middle ware
 const authMiddleware = new ApolloLink((operation, forward) => {
   // add the authorization to the headers
-  console.log("auth middleware")
-  console.log(store.state.user)
-  var token = store.state.user.auth.token
-  console.log("JWT",token)
+  console.log("auth middleware");
+  console.log(store.state.user);
+  var token = store.state.user.auth.token;
+  console.log("JWT", token);
   operation.setContext({
     headers: {
-      Authorization: token ? `JWT ${token}` : null
-    }
-  })
+      Authorization: token ? `JWT ${token}` : null,
+    },
+  });
 
-  return forward(operation)
-})
+  return forward(operation);
+});
 //apollo config
- // Create an http link:
+// Create an http link:
 
 // const logoutLink = onError(({ networkError }) => {
 //  if (networkError.statusCode === 401) logOut();
 // })
 
-
-const errorLink = onError(
-  ({ graphQLErrors,  operation, forward }) => {
-    console.log("hey eror in request gql")
-    if (graphQLErrors) {
-      console.log("gql-errors",graphQLErrors)
-      for (let err of graphQLErrors) {
-        console.log(err.message,err.extensions)
-        switch (err.message) {
-          case "You do not have permission to perform this action" :
-          case "You are not registerd as customer" :
-          case "Signature has expired" :
-            console.log("refreshing ")
-            return fromPromise(
-             refreshTokenFlow().catch((error) => {
-                // Handle token refresh errors e.g clear stored tokens, redirect to login
-                console.log("error while refresdhing",error)
-                router.push("/login")
-                return;
-              })
-            )
-              .filter((value) => Boolean(value))
-              .flatMap((accessToken) => {
-                const oldHeaders = operation.getContext().headers;
-                // modify the operation context with a new token
-                operation.setContext({
-                  headers: {
-                    ...oldHeaders,
-                    Authorization: `JWT ${accessToken}`,
-                  },
-                });
-
-                // retry the request, returning the new observable
-                console.log("forwarding")
-                return forward(operation);
+const errorLink = onError(({ graphQLErrors, operation, forward }) => {
+  console.log("hey eror in request gql");
+  if (graphQLErrors) {
+    console.log("gql-errors", graphQLErrors);
+    for (let err of graphQLErrors) {
+      console.log(err.message, err.extensions);
+      switch (err.message) {
+        case "You do not have permission to perform this action":
+        case "You are not registerd as customer":
+        case "Signature has expired":
+          console.log("refreshing ");
+          return fromPromise(
+            refreshTokenFlow().catch((error) => {
+              // Handle token refresh errors e.g clear stored tokens, redirect to login
+              console.log("error while refresdhing", error);
+              router.push("/login");
+              return;
+            })
+          )
+            .filter((value) => Boolean(value))
+            .flatMap((accessToken) => {
+              const oldHeaders = operation.getContext().headers;
+              // modify the operation context with a new token
+              operation.setContext({
+                headers: {
+                  ...oldHeaders,
+                  Authorization: `JWT ${accessToken}`,
+                },
               });
-        }
+
+              // retry the request, returning the new observable
+              console.log("forwarding");
+              return forward(operation);
+            });
       }
     }
   }
-);
+});
 
 const link = new HttpLink({
-    uri: 'http://localhost:8000/graphql/',
-    fetch,
-    credentials: 'include',
-    onError(err) {
-        console.log(err)
+  uri: "http://localhost:8000/graphql/",
+  fetch,
+  credentials: "include",
+  onError(err) {
+    console.log(err);
   },
- });
-
+});
 
 export const client = new ApolloClient({
-   link: errorLink.concat(concat(authMiddleware,link)),
-   cache: new InMemoryCache({
-    addTypename: true
-   })
- });
+  link: errorLink.concat(concat(authMiddleware, link)),
+  cache: new InMemoryCache({
+    addTypename: true,
+  }),
+});
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 const apolloProvider = new VueApollo({
-    defaultClient: client,
-  })
+  defaultClient: client,
+});
 
 new Vue({
   store,
   router,
   vuetify,
   apolloProvider,
-  render: h => h(App)
-}).$mount('#app')
-
-
+  render: (h) => h(App),
+}).$mount("#app");
diff --git a/apps/frontend/store-front/src/router/index.js b/apps/frontend/store-front/src/router/index.js
index 8b514ba..b8ea3ea 100644
--- a/apps/frontend/store-front/src/router/index.js
+++ b/apps/frontend/store-front/src/router/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Router from 'vue-router';
 
+
 import homePage from '@/components/homePage.vue';
 
 import cart from '../views/cart.vue';
diff --git a/apps/frontend/store-front/src/store/modules/address/index.js b/apps/frontend/store-front/src/store/modules/address/index.js
index ccbfd34..c4de004 100644
--- a/apps/frontend/store-front/src/store/modules/address/index.js
+++ b/apps/frontend/store-front/src/store/modules/address/index.js
@@ -1,121 +1,115 @@
-import { ADD_ADDRESS,DELETE_ADDRESS,UPDATE_ADDRESS } from "../../../graphql/mutations/address"
-import { fetchAddresses} from "../../../graphql/Queries/address"
-
-import { client } from "../../../main"
-
-const state =()=>({
-    addresses:[],
-    defaultAddress:{},
-    addressToUpdate:{},
-    selectedAddress:{id:null},
-})
-
-const mutations ={
-
-    setAddresses(state,data){
-        state.addresses=data.addresses
-        state.defaultAddress=data.defaultAddress
-        state.selectedAddress=state.defaultAddress ?? {}  // setting the default address to be the selected address for the checkout
-        if(state.defaultAddress){
-            state.defaultAddress.isPrimary = true
-        }
-
-    },
-
-    // setDefaultAddress(state,address){
-    //     state.defaultAddress=address
-        
-    // },
-
-    setAddressToUpdate(state,address){
-        state.addressToUpdate=address
-    },
-    setSelectedAddress(state,address){
-        state.selectedAddress=address
-    }   
-
-}
-
-const actions ={
-
-    async fetchAddresses({commit}){
-        
-        console.log("fetching")
-        let {loading,data} = await client.query({
-            query:fetchAddresses,
-            fetchPolicy:"no-cache"
-        })
-        console.log("addresses",data)
-        commit('setAddresses',data)
-        return loading
-    },
-
-    // async fetchDefaultAddress({commit}){
-    //     let result = await client.query({
-    //         query:fetchDefaultAddress,
-    //         fetchPolicy:"no-cache"
-    //     })
-    //     console.log("default",result)
-    //     commit('setDefaultAddress',result.data.defaultAddress)
-    // },
-
-    async addAddress({dispatch,commit},address){
-
-        // console.log("adding",address)
-        commit('app/SET_LOADING',true,{root:true})
-        let result = await client.mutate({
-            mutation:ADD_ADDRESS,
-            variables:{address:{...address}}
-        })
-
-        // console.log("add address",result)
-        if( result.data.addAddress.address.id){
-            let {loading}= await dispatch("fetchAddresses")
-            commit('app/SET_LOADING',loading,{root:true})
-            // dispatch("fetchDefaultAddress")
-        }
-        commit('app/SET_LOADING',result.loading,{root:true})
-    },
-
-    async updateAddress({dispatch},{addressId,updateValues}){
-        delete updateValues["id"]
-        delete updateValues["__typename"]
-       
-        console.log("addressID",addressId)
-        console.log("address",updateValues)
-        let result = await client.mutate({
-            mutation:UPDATE_ADDRESS,
-            variables:{addressId:addressId,updateValues:{...updateValues}}
-        })
-
-        if( result.data.updateAddress.address.id){
-            dispatch("fetchAddresses")
-            // dispatch("fetchDefaultAddress")
-        }
-    },
-
-    async deleteAddress({dispatch},addressId){
-        
-        console.log("id",addressId)
-        let result = await client.mutate({
-            mutation:DELETE_ADDRESS,
-            variables:{addressId:addressId}
-        })
-        console.log("res",result)
-        if(result.data.deleteAddress.success){
-            console.log("fetching")
-            dispatch("fetchAddresses")
-            // dispatch("fetchDefaultAddress")
-        }
+import {
+  ADD_ADDRESS,
+  DELETE_ADDRESS,
+  UPDATE_ADDRESS,
+} from "graphql-client/mutations/address";
+import { fetchAddresses } from "graphql-client/queries/address";
+
+import { client } from "../../../main";
+
+const state = () => ({
+  addresses: [],
+  defaultAddress: {},
+  addressToUpdate: {},
+  selectedAddress: { id: null },
+});
+
+const mutations = {
+  setAddresses(state, data) {
+    state.addresses = data.addresses;
+    state.defaultAddress = data.defaultAddress;
+    state.selectedAddress = state.defaultAddress ?? {}; // setting the default address to be the selected address for the checkout
+    if (state.defaultAddress) {
+      state.defaultAddress.isPrimary = true;
     }
-
-}
-
-
+  },
+
+  // setDefaultAddress(state,address){
+  //     state.defaultAddress=address
+
+  // },
+
+  setAddressToUpdate(state, address) {
+    state.addressToUpdate = address;
+  },
+  setSelectedAddress(state, address) {
+    state.selectedAddress = address;
+  },
+};
+
+const actions = {
+  async fetchAddresses({ commit }) {
+    console.log("fetching");
+    let { loading, data } = await client.query({
+      query: fetchAddresses,
+      fetchPolicy: "no-cache",
+    });
+    console.log("addresses", data);
+    commit("setAddresses", data);
+    return loading;
+  },
+
+  // async fetchDefaultAddress({commit}){
+  //     let result = await client.query({
+  //         query:fetchDefaultAddress,
+  //         fetchPolicy:"no-cache"
+  //     })
+  //     console.log("default",result)
+  //     commit('setDefaultAddress',result.data.defaultAddress)
+  // },
+
+  async addAddress({ dispatch, commit }, address) {
+    // console.log("adding",address)
+    commit("app/SET_LOADING", true, { root: true });
+    let result = await client.mutate({
+      mutation: ADD_ADDRESS,
+      variables: { address: { ...address } },
+    });
+
+    // console.log("add address",result)
+    if (result.data.addAddress.address.id) {
+      let { loading } = await dispatch("fetchAddresses");
+      commit("app/SET_LOADING", loading, { root: true });
+      // dispatch("fetchDefaultAddress")
+    }
+    commit("app/SET_LOADING", result.loading, { root: true });
+  },
+
+  async updateAddress({ dispatch }, { addressId, updateValues }) {
+    delete updateValues["id"];
+    delete updateValues["__typename"];
+
+    console.log("addressID", addressId);
+    console.log("address", updateValues);
+    let result = await client.mutate({
+      mutation: UPDATE_ADDRESS,
+      variables: { addressId: addressId, updateValues: { ...updateValues } },
+    });
+
+    if (result.data.updateAddress.address.id) {
+      dispatch("fetchAddresses");
+      // dispatch("fetchDefaultAddress")
+    }
+  },
+
+  async deleteAddress({ dispatch }, addressId) {
+    console.log("id", addressId);
+    let result = await client.mutate({
+      mutation: DELETE_ADDRESS,
+      variables: { addressId: addressId },
+    });
+    console.log("res", result);
+    if (result.data.deleteAddress.success) {
+      console.log("fetching");
+      dispatch("fetchAddresses");
+      // dispatch("fetchDefaultAddress")
+    }
+  },
+};
 
 export default {
-    namespaced:true,
-    state,
-    mutations,
-    actions
-}
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};
diff --git a/apps/frontend/store-front/src/store/modules/cart/index.js b/apps/frontend/store-front/src/store/modules/cart/index.js
index 23cabea..2eae674 100644
--- a/apps/frontend/store-front/src/store/modules/cart/index.js
+++ b/apps/frontend/store-front/src/store/modules/cart/index.js
@@ -1,79 +1,72 @@
-import { client } from '../../../main'
-import {AddToCart,UPDATE_CART} from '../../../graphql/mutations/cart'
-import {getCart} from '../../../graphql/Queries/cart'
-const state =()=>({
-    cart:{
-        cartLength:0,
-    },
-})
+import { client } from "../../../main";
+import { AddToCart, UPDATE_CART } from "graphql-client/mutations/cart";
+import { getCart } from "graphql-client/queries/cart";
+const state = () => ({
+  cart: {
+    cartLength: 0,
+  },
+});
 
-const mutations ={
-    addToCart(state,details){
-        //console.log('cart',details)
-        state.cart=details
-    },
+const mutations = {
+  addToCart(state, details) {
+    //console.log('cart',details)
+    state.cart = details;
+  },
 
-    updateCart(state,details){
-        //console.log('cart',details)
-        state.cart=details
-        
-    }
-}
-const actions= {
+  updateCart(state, details) {
+    //console.log('cart',details)
+    state.cart = details;
+  },
+};
+const actions = {
+  async addToCart({ commit }, details) {
+    console.log(details);
+    let { data, loading, errors } = await client.mutate({
+      mutation: AddToCart,
+      variables: {
+        productId: details.productId,
+        variationId: details.variationId,
+        quantity: details.quantity,
+      },
+    });
+    console.log(data, errors);
+    let cart = data.AddToCart.cart;
 
-   async  addToCart({commit},details){
-       console.log(details)
-       let {data,loading,errors} = await client.mutate({
-           mutation:AddToCart,
-           variables:{
-               productId:details.productId,
-               variationId: details.variationId,
-               quantity:details.quantity,
-           }
-       });
-       console.log(data,errors)
-       let cart = data.AddToCart.cart
+    commit("addToCart", cart);
+    return { loading, errors };
+  },
 
-       commit('addToCart',cart)
-       return {loading,errors}
-    },
-
-    async updateCart({commit},details){
-        console.log(details)
-        commit('app/SET_LOADING',true,{root:true})
-        let result = await client.mutate({
-            mutation:UPDATE_CART,
-            variables:{
-                productId:details.productId,
-                variationId: details.variationId,
-                quantity:details.quantity,
-            }
-        });
-        commit('app/SET_LOADING',result.loading,{root:true})
-        console.log(result)
-        let cart = result.data.UpdateCart.cart
-        commit('updateCart',cart)
-    },
-    
-
-
-
-    async fetchCart({commit}){
-       
-        console.log("fetching cart")
-        let result= await client.query({
-            query:getCart,
-            fetchPolicy:"no-cache"
-        });
-        commit('addToCart',result.data.cart)
-        return result.loading
-    }
-}
+  async updateCart({ commit }, details) {
+    console.log(details);
+    commit("app/SET_LOADING", true, { root: true });
+    let result = await client.mutate({
+      mutation: UPDATE_CART,
+      variables: {
+        productId: details.productId,
+        variationId: details.variationId,
+        quantity: details.quantity,
+      },
+    });
+    commit("app/SET_LOADING", result.loading, { root: true });
+    console.log(result);
+    let cart = result.data.UpdateCart.cart;
+    commit("updateCart", cart);
+  },
 
+  async fetchCart({ commit }) {
+    console.log("fetching cart");
+    let result = await client.query({
+      query: getCart,
+      fetchPolicy: "no-cache",
+    });
+    commit("addToCart", result.data.cart);
+    return result.loading;
+  },
+};
 
 export default {
-    namespaced:true,
-    state,
-    mutations,
-    actions
-}
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};
diff --git a/apps/frontend/store-front/src/store/modules/orders/index.js b/apps/frontend/store-front/src/store/modules/orders/index.js
index 74b03b6..1f9f03e 100644
--- a/apps/frontend/store-front/src/store/modules/orders/index.js
+++ b/apps/frontend/store-front/src/store/modules/orders/index.js
@@ -1,109 +1,103 @@
-import {CreateOrder} from "../../../graphql/mutations/order"
-import {GetOrders,GetOrder} from "../../../graphql/Queries/order"
-
-import { client } from "../../../main"
-const state = ()=>({
-    activeOrder:{
-
-    },
-    orders:[]
-})
+import { CreateOrder } from "graphql-client/mutations/order";
+import { GetOrders, GetOrder } from "graphql-client/queries/order";
 
+import { client } from "../../../main";
+const state = () => ({
+  activeOrder: {},
+  orders: [],
+});
 
 const getters = {
-
-    
-
-    totalOrderAmount: () =>(order) => {
-        console.log(order)
-        return order.extraCharges + order.orderitemSet.reduce((total, item) => {
-            return total + (item.totalAmount)
-        }, 0)
-
-    },
-    
-
-
-}
-
-
-const actions={
-    async createOrder({rootState,commit}){
-        console.log("rootstate",rootState)
-        let selectedAddress = rootState.addresses.selectedAddress
-        let orderInput = {
-            addressId:selectedAddress.id,
-            isPrimary:selectedAddress.isPrimary
-        }
-        
-        let {loading ,data,errors} = await client.mutate({
-            mutation:CreateOrder,
-            variables:{input:{...orderInput}}
-        })
-
-        
-        let orderData = data.createOrder
-        commit("setActiveOrder",orderData)
-
-        return {loading,errors}
-    },
-    async fetchActiveOrder({commit}){
-        let {loading ,data} = await client.query({
-            query:GetOrder,
-            variables:{getCurrent:true},
-            fetchPolicy:"no-cache"
-        })
-        let orderData = data.order
-        commit("setActiveOrder",orderData)
-        return loading
-    },
-
-    async fetchOrders({commit},filter){
-        let {loading,data}= await client.query({
-            query:GetOrders,
-            variables:{
-                ...filter
-            }
-        })
-        
-        commit("setOrders",data.orders)
-        return loading
-    },
-
-    async fetchMoreOrders({commit},filter){
-        let {loading,data}= await client.query({
-            query:GetOrders,
-            variables:{
-                ...filter
-            }
-        })
-        commit("addMoreOrders",data.orders)
-        return loading
-    }
-
-
-}
-
-
-const mutations ={
-    setActiveOrder(state,data){
-        state.activeOrder=data
-    },
-    setOrders(state,data){
-        state.orders=data
-    },
-    addMoreOrders(state,{pageInfo,edges}){
-        state.orders.pageInfo = pageInfo
-        state.orders.edges = [...state.orders.edges,...edges]
+  orderItemImage: () => (product, variation) => {
+    if (variation.images.length > 0) {
+      return variation.images[0];
+    } else {
+      return product.images[0];
     }
-
-}
-
+  },
+
+  totalOrderAmount: () => (order) => {
+    console.log(order);
+    return (
+      order.extraCharges +
+      order.orderitemSet.reduce((total, item) => {
+        return total + item.totalAmount;
+      }, 0)
+    );
+  },
+};
+
+const actions = {
+  async createOrder({ rootState, commit }) {
+    console.log("rootstate", rootState);
+    let selectedAddress = rootState.addresses.selectedAddress;
+    let orderInput = {
+      addressId: selectedAddress.id,
+      isPrimary: selectedAddress.isPrimary,
+    };
+
+    let { loading, data, errors } = await client.mutate({
+      mutation: CreateOrder,
+      variables: { input: { ...orderInput } },
+    });
+
+    let orderData = data.createOrder;
+    commit("setActiveOrder", orderData);
+
+    return { loading, errors };
+  },
+  async fetchActiveOrder({ commit }) {
+    let { loading, data } = await client.query({
+      query: GetOrder,
+      variables: { getCurrent: true },
+      fetchPolicy: "no-cache",
+    });
+    let orderData = data.order;
+    commit("setActiveOrder", orderData);
+    return loading;
+  },
+
+  async fetchOrders({ commit }, filter) {
+    let { loading, data } = await client.query({
+      query: GetOrders,
+      variables: {
+        ...filter,
+      },
+    });
+
+    commit("setOrders", data.orders);
+    return loading;
+  },
+
+  async fetchMoreOrders({ commit }, filter) {
+    let { loading, data } = await client.query({
+      query: GetOrders,
+      variables: {
+        ...filter,
+      },
+    });
+    commit("addMoreOrders", data.orders);
+    return loading;
+  },
+};
+
+const mutations = {
+  setActiveOrder(state, data) {
+    state.activeOrder = data;
+  },
+  setOrders(state, data) {
+    state.orders = data;
+  },
+  addMoreOrders(state, { pageInfo, edges }) {
+    state.orders.pageInfo = pageInfo;
+    state.orders.edges = [...state.orders.edges, ...edges];
+  },
+};
 
 export default {
-    namespaced :true,
-    state,
-    actions,
-    mutations,
-    getters
-}
\ No newline at end of file
+  namespaced: true,
+  state,
+  actions,
+  mutations,
+  getters,
+};
diff --git a/apps/frontend/store-front/src/store/modules/products/actions.js b/apps/frontend/store-front/src/store/modules/products/actions.js
index 6455dde..0c293b3 100644
--- a/apps/frontend/store-front/src/store/modules/products/actions.js
+++ b/apps/frontend/store-front/src/store/modules/products/actions.js
@@ -1,113 +1,104 @@
-import {client} from '../../../main'
-
-import {GET_PRODUCTS_QUERY,GET_PRODUCT_QUERY} from '../../../graphql/Queries/productQueries'
-import {fetchFilters} from "../../../graphql/Queries/filter"
-import {UPDATE_FILTERS } from "../../../graphql/mutations/filter"
-import {fetchCategories} from "../../../graphql/Queries/filter"
+import { client } from "../../../main";
 
+import {
+  GET_PRODUCTS_QUERY,
+  GET_PRODUCT_QUERY,
+} from "graphql-client/queries/productQueries";
+import { fetchFilters } from "graphql-client/queries/filter";
+import { UPDATE_FILTERS } from "graphql-client/mutations/filter";
+import { fetchCategories } from "graphql-client/queries/filter";
 
 export default {
-    
+  async getProducts({ commit }, { filters, pageNb }) {
+    let result;
+    console.log("fetching products");
+    if (pageNb === undefined) {
+      pageNb = 1;
+    }
+    console.log({ filters }, pageNb);
 
-    async getProducts({commit},{filters,pageNb}){
-        let result;
-        console.log("fetching products");
-        if(pageNb === undefined){
+    result = await client.query({
+      query: GET_PRODUCTS_QUERY,
+      variables: {
+        filter: { ...filters },
+        page: pageNb,
+      },
+    });
 
-            pageNb = 1;
-        }
-        console.log({filters},pageNb)
-        
-        result= await client.query({
-                query:GET_PRODUCTS_QUERY,variables:{
-                filter:{...filters},
-                page:pageNb,
-               
-            },
-        });
-       
-    
-        if(result){
-           commit('addProducts',result.data.Products)     
-        }
-        return result.loading
-    },
+    if (result) {
+      commit("addProducts", result.data.Products);
+    }
+    return result.loading;
+  },
 
-    async getMoreProducts({state,commit}){
-        let result;
-        console.log("adding more ",state.queryFilters)
-        console.log("fetching more products");
-        result= await client.query(
-            {
-                query:GET_PRODUCTS_QUERY,
-                variables:{
-                    filter:{...state.queryFilters},
-                    page:state.products.pageNo+1,
-                   
-                }
-            }
-        );
-        console.log("fetched",result)
-        if(result){
-            commit('addMoreProducts',result.data.Products)   
-        }
+  async getMoreProducts({ state, commit }) {
+    let result;
+    console.log("adding more ", state.queryFilters);
+    console.log("fetching more products");
+    result = await client.query({
+      query: GET_PRODUCTS_QUERY,
+      variables: {
+        filter: { ...state.queryFilters },
+        page: state.products.pageNo + 1,
+      },
+    });
+    console.log("fetched", result);
+    if (result) {
+      commit("addMoreProducts", result.data.Products);
+    }
+  },
 
-    },
+  async getProduct({ commit }, id) {
+    let result = await client.query({
+      query: GET_PRODUCT_QUERY,
+      variables: {
+        id: id,
+      },
+    });
 
-    async getProduct({commit},id){
+    if (result.data) {
+      commit("getProduct", result.data.product);
+    }
 
-        let result=await client.query({
-            query:GET_PRODUCT_QUERY,
-            variables:{
-                id:id
-            }
-        }) ;
-        
-        if(result.data){
-            commit('getProduct',result.data.product)
-        }
+    return result;
+  },
+  async getFilters({ commit }) {
+    let result = await client.query({
+      query: fetchFilters,
+      fetchPolicy: "no-cache",
+    });
 
-        return result ;
-    },
-    async getFilters({commit}){
-        let result= await client.query({
-            query:fetchFilters,
-            fetchPolicy: 'no-cache'
-        })
-        
-        console.log(result.data)
-        if(result.data){
-            commit('addFilters',result.data.filters)
-        }
-        
-    },
+    console.log(result.data);
+    if (result.data) {
+      commit("addFilters", result.data.filters);
+    }
+  },
 
-    async getCategories({commit}){
-        let result= await client.query({
-            query:fetchCategories,
-            fetchPolicy: 'no-cache'
-        })
-        
-        console.log("getcategories",result.data)
-        if(result.data){
-            commit('addCategories',result.data.categories)
-        }
-    },
+  async getCategories({ commit }) {
+    let result = await client.query({
+      query: fetchCategories,
+      fetchPolicy: "no-cache",
+    });
 
-    async updateFilters({commit},data){
-        console.log("updating Filters",data)
-        //need data to pass for variables in form data should contain gender , category or brand property
-        let result = await client.mutate({
-            mutation:UPDATE_FILTERS,
-            variables:{...data}
-        });
-        console.log("updatedFilters")
-        commit('updateFilters',result.data.updateFilters.updatedFilters)
-        console.log( result.data)
-        //console.log(result.data.updatedFilters)
-        
-    },
-    async addTempFilter({commit},data){
-        commit('addTempFilters',data)      
+    console.log("getcategories", result.data);
+    if (result.data) {
+      commit("addCategories", result.data.categories);
     }
-}
+  },
+
+  async updateFilters({ commit }, data) {
+    console.log("updating Filters", data);
+    //need data to pass for variables in form data should contain gender , category or brand property
+    let result = await client.mutate({
+      mutation: UPDATE_FILTERS,
+      variables: { ...data },
+    });
+    console.log("updatedFilters");
+    commit("updateFilters", result.data.updateFilters.updatedFilters);
+    console.log(result.data);
+    //console.log(result.data.updatedFilters)
+  },
+  async addTempFilter({ commit }, data) {
+    commit("addTempFilters", data);
+  },
+};
diff --git a/apps/frontend/store-front/src/store/modules/products/getters.js b/apps/frontend/store-front/src/store/modules/products/getters.js
index 1c74f07..bbad21b 100644
--- a/apps/frontend/store-front/src/store/modules/products/getters.js
+++ b/apps/frontend/store-front/src/store/modules/products/getters.js
@@ -1,80 +1,75 @@
-
-import _ from 'lodash'
+import _ from "lodash";
 export default {
-    productChunks:(state)=>{
-        return _.chunk(state.products.products,4)
-    },
+  productChunks: (state) => {
+    return _.chunk(state.products.products, 4);
+  },
 
-    productImages:(state)=>{
+  productImages: () => (product) => {
+    console.log("product", product);
+    let productImages = new Set(product.images);
 
-        let productImages= new Set() ;
-        
-        for( let variation of state.product.variations){
-            for(let image of variation.images){
-                productImages.add(image)
-            }
-        }
-        return productImages
-    },
+    for (let variation of product.variations) {
+      for (let image of variation.images) {
+        productImages.add(image);
+      }
+    }
+    return productImages;
+  },
 
-    variations:(state)=>{
-        let product= state.product;
-        // console.log(product)
-        let filters={}
-        for(let v of product.variations){
-            for (let variant of v.variant){
-                if(variant.name in filters){
-                    filters[variant.name].push(variant.value)
-                }
-                else{
-                    filters[variant.name] = [variant.value]
-                }
-            }   
+  variations: (state) => {
+    let product = state.product;
+    // console.log(product)
+    let filters = {};
+    for (let v of product.variations) {
+      for (let variant of v.variant) {
+        if (variant.name in filters) {
+          filters[variant.name].push(variant.value);
+        } else {
+          filters[variant.name] = [variant.value];
         }
-        return filters
-    },
-    
-    variationId(state){
-        
-        // let id;
-        let clean=(obj)=>{
-            let y= {name:obj.name,value:obj.value};
-            return y;
-        } 
-        for(let variation of state.product.variations){
-           let  variant=variation.variant.map(clean)
+      }
+    }
+    return filters;
+  },
 
-            if(_.isEqual(variant,state.selected)){
-                console.log('yes')
-                return variation.Id
-            }else{
-                // id= variation.Id
-            }
-        }
-        return null
-    },
-    cleanedFilters(state){
-        var filters ={};
-        for( var filter in state.filters){
-            
-            if(filter != "variationFilters"){
-               
-                filters[filter] =state.filters[filter]
-            }
-        }
-        //delete filters.variationFilters
-        delete filters.__typename
-        
-        return filters
-    },
-    variationFilters(state){
-        //console.log(state.filters)
-        let cleanedFilters ={};
-        let variationFilters=state.filters.variationFilters;
-        for(var filter of variationFilters){
-            cleanedFilters[filter.filter]=filter.values
-        }
-        console.log({cleanedFilters})
-        return cleanedFilters;
+  variationId(state) {
+    // let id;
+    let clean = (obj) => {
+      let y = { name: obj.name, value: obj.value };
+      return y;
+    };
+    for (let variation of state.product.variations) {
+      let variant = variation.variant.map(clean);
+
+      if (_.isEqual(variant, state.selected)) {
+        console.log("yes");
+        return variation.Id;
+      } else {
+        // id= variation.Id
+      }
+    }
+    return null;
+  },
+  cleanedFilters(state) {
+    var filters = {};
+    for (var filter in state.filters) {
+      if (filter != "variationFilters") {
+        filters[filter] = state.filters[filter];
+      }
+    }
+    //delete filters.variationFilters
+    delete filters.__typename;
+
+    return filters;
+  },
+  variationFilters(state) {
+    //console.log(state.filters)
+    let cleanedFilters = {};
+    let variationFilters = state.filters.variationFilters;
+    for (var filter of variationFilters) {
+      cleanedFilters[filter.filter] = filter.values;
     }
-}
+    console.log({ cleanedFilters });
+    return cleanedFilters;
+  },
+};
diff --git a/apps/frontend/store-front/src/store/modules/products/state.js b/apps/frontend/store-front/src/store/modules/products/state.js
index a99f839..e264c75 100644
--- a/apps/frontend/store-front/src/store/modules/products/state.js
+++ b/apps/frontend/store-front/src/store/modules/products/state.js
@@ -1,51 +1,65 @@
-export default ()=>({
-    products:{
-        
-           products:[],
-           pageNo:0,
-           totalPages:0,
-           totalProducts:0
-    },// state of products in products page
-
-    home_page_products:{ 
-        trending:[],
-        new_arrivals:[],
-        best_sellers:[]
-    },// state of products in home page
-    
-    filters:{
-
-    },  // stores the filters recieved from server
-
-    queryFilters:{
-
-    }, // stores the filters for  querieng products from server
-
-    categories:[
-      
-    ],
-    brands:[
-        {name:"nike",image:"https://i.pinimg.com/originals/25/6c/19/256c19006b945701f7e2d080fde7b12d.jpg",},
-        {name:"adidas",image:"https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/ae900d42678283.57d36e2c13251.jpg",},
-        {name:"puma",image:"https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/ae900d42678283.57d36e2c13251.jpg",},
-        {name:"reebok",image:"https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/ae900d42678283.57d36e2c13251.jpg",},
-    ],
-    genders:[
-        {name:"MEN",image:"https://assets.myntassets.com/h_720,q_90,w_540/v1/assets/images/11326924/2020/3/13/a977398d-4154-41de-a992-6018c0d36d221584097310888-Roadster-Men-Shirts-6761584097308773-1.jpg"},
-        {name:"WOMEN",image:"https://assets.myntassets.com/f_webp,dpr_1.5,q_60,w_210,c_limit,fl_progressive/assets/images/4320668/2018/9/11/75dd2431-cd02-40e9-be90-728276c3ed3c1536644197227-Roadster-Women-Tops-5111536644195073-1.jpg"},
-    ],
-    
-    product:{
-    }, // state of product in product page 
-    
-    selected:[
-    ],
-
-    // queryFilters:{
-       
-    // },// for queries from home page for particular category or tag 
-    // queryVariationFilters:{},
-
-    tempFilters:{},
-
-})
+export default () => ({
+  products: {
+    Products: [],
+    pageNo: 0,
+    totalPages: 0,
+    totalProducts: 0,
+  }, // state of products in products page
+
+  home_page_products: {
+    trending: [],
+    new_arrivals: [],
+    best_sellers: [],
+  }, // state of products in home page
+
+  filters: {}, // stores the filters recieved from server
+
+  queryFilters: {}, // stores the filters for  querieng products from server
+
+  categories: [],
+  brands: [
+    {
+      name: "nike",
+      image:
+        "https://i.pinimg.com/originals/25/6c/19/256c19006b945701f7e2d080fde7b12d.jpg",
+    },
+    {
+      name: "adidas",
+      image:
+        "https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/ae900d42678283.57d36e2c13251.jpg",
+    },
+    {
+      name: "puma",
+      image:
+        "https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/ae900d42678283.57d36e2c13251.jpg",
+    },
+    {
+      name: "reebok",
+      image:
+        "https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/ae900d42678283.57d36e2c13251.jpg",
+    },
+  ],
+  genders: [
+    {
+      name: "MEN",
+      image:
+        "https://assets.myntassets.com/h_720,q_90,w_540/v1/assets/images/11326924/2020/3/13/a977398d-4154-41de-a992-6018c0d36d221584097310888-Roadster-Men-Shirts-6761584097308773-1.jpg",
+    },
+    {
+      name: "WOMEN",
+      image:
+        "https://assets.myntassets.com/f_webp,dpr_1.5,q_60,w_210,c_limit,fl_progressive/assets/images/4320668/2018/9/11/75dd2431-cd02-40e9-be90-728276c3ed3c1536644197227-Roadster-Women-Tops-5111536644195073-1.jpg",
+    },
+  ],
+
+  product: {}, // state of product in product page
+
+  selected: [],
+
+  // queryFilters:{
+
+  // },// for queries from home page for particular category or tag
+  // queryVariationFilters:{},
+
+  tempFilters: {},
+});
diff --git a/apps/frontend/store-front/src/store/modules/search/index.js b/apps/frontend/store-front/src/store/modules/search/index.js
index 2998e6b..bbb60b4 100644
--- a/apps/frontend/store-front/src/store/modules/search/index.js
+++ b/apps/frontend/store-front/src/store/modules/search/index.js
@@ -1,71 +1,65 @@
-import { client} from '../../../main'
-import { AutoCompleteResults,SearchResults } from '../../../graphql/Queries/search'
-const state =()=>({
-   autocompleteResults:[],
-   productSearchResults:{
-        page:1,
-        totalResults:0,
-        totalPages:0,
-        results:[]
-   },
-   isSearchOpen:false,
-})
+import { client } from "../../../main";
+import {
+  AutoCompleteResults,
+  SearchResults,
+} from "graphql-client/queries/search";
+const state = () => ({
+  autocompleteResults: [],
+  productSearchResults: {
+    page: 1,
+    totalResults: 0,
+    totalPages: 0,
+    results: [],
+  },
+  isSearchOpen: false,
+});
 
-const mutations ={
-  
-    setAutocompleteResults(state,results){
-        state.autocompleteResults = results
-    },
+const mutations = {
+  setAutocompleteResults(state, results) {
+    state.autocompleteResults = results;
+  },
 
-    setSearchResults(state,results){
-        state.productSearchResults.page=results.page
-        state.productSearchResults.totalResults=results.totalResults
-        state.productSearchResults.totalPages=results.totalPages
-        state.productSearchResults.results.push(...results.results)
-    },
-    setSearchOpen(state,value){
-        state.isSearchOpen = value
-    }
-}
+  setSearchResults(state, results) {
+    state.productSearchResults.page = results.page;
+    state.productSearchResults.totalResults = results.totalResults;
+    state.productSearchResults.totalPages = results.totalPages;
+    state.productSearchResults.results.push(...results.results);
+  },
+  setSearchOpen(state, value) {
+    state.isSearchOpen = value;
+  },
+};
 
-const actions ={
-    
-    async searchAutocomplete({commit},query){
-         
-        let res = await client.mutate(
-            {
-                mutation:AutoCompleteResults,
-                variables:{search:query}
-            })
-        
-        let results = res.data
-        console.log(results)
-        commit("setAutocompleteResults",results.productAutocompleteResults)
-    },
+const actions = {
+  async searchAutocomplete({ commit }, query) {
+    let res = await client.mutate({
+      mutation: AutoCompleteResults,
+      variables: { search: query },
+    });
 
-    async search({commit},{query,pageNo}){
-        if(pageNo==undefined || pageNo==null){
-            pageNo=1
-        }
+    let results = res.data;
+    console.log(results);
+    commit("setAutocompleteResults", results.productAutocompleteResults);
+  },
 
-        let res = await client.query(
-            {
-                query:SearchResults,
-                variables:{search:query,pageNo:pageNo}
-            })
-        let results = res.data
-        console.log(results)
-        commit("setSearchResults",results.productSearchResults)
+  async search({ commit }, { query, pageNo }) {
+    if (pageNo == undefined || pageNo == null) {
+      pageNo = 1;
     }
 
-    
-}
-
+    let res = await client.query({
+      query: SearchResults,
+      variables: { search: query, pageNo: pageNo },
+    });
+    let results = res.data;
+    console.log(results);
+    commit("setSearchResults", results.productSearchResults);
+  },
+};
 
 export default {
-    namespaced:true,
-    state,
-    mutations,
-    actions
-
-}
\ No newline at end of file
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};
diff --git a/apps/frontend/store-front/src/store/modules/user/actions.js b/apps/frontend/store-front/src/store/modules/user/actions.js
index 044938a..7ddd2b5 100644
--- a/apps/frontend/store-front/src/store/modules/user/actions.js
+++ b/apps/frontend/store-front/src/store/modules/user/actions.js
@@ -1,138 +1,150 @@
-
-import {LOGIN_EMAIL, REGISTER_USER,REFRESH_TOKEN,REVOKE_TOKEN,VERIFY_ACCOUNT, RESEND_ACTIVATION_EMAIL,FORGOT_PASSWORD,RESET_PASSWORD} from '../../../graphql/mutations/auth'
-import {GET_CUSTOMER} from '../../../graphql/Queries/auth'
-import {client} from '../../../main'
+import {
+  LOGIN_EMAIL,
+  REGISTER_USER,
+  REFRESH_TOKEN,
+  REVOKE_TOKEN,
+  VERIFY_ACCOUNT,
+  RESEND_ACTIVATION_EMAIL,
+  FORGOT_PASSWORD,
+  RESET_PASSWORD,
+} from "graphql-client/mutations/auth";
+import { GET_CUSTOMER } from "graphql-client/queries/auth";
+import { client } from "../../../main";
 export default {
-    logInWithEmail: async (
-        {commit},authDetails
-    )=>{
-        //authDetails = email and password
-
-        let result= await client.mutate({mutation:LOGIN_EMAIL,variables:{
-            email:authDetails.email,
-            password:authDetails.password,
-        }});
-        console.log(JSON.stringify(result));
-        let data=result.data.tokenAuth;
-        let  refreshToken=data.refreshToken;
-      
-        //let token=JSON.stringify(data.token)
-        if(data.token!= null){
-            let details= {
-                user:data.user,
-                token:data.token,
-                refreshToken:refreshToken,
-                provider:"Email",
-            }
-          
-            commit('loginUser',details)
-            return true
-
-        } 
-        else{
-            return false
-        }
-       
-    },
-    registerUser:async ({commit},authDetails)=>{
-        commit("app/SET_LOADING",true,{root:true})
-        let result= await client.mutate({mutation:REGISTER_USER,variables:authDetails})
-        let data= result.data.register
-
-        if (data.errors){
-            commit("app/SET_LOADING",false,{root:true})
-            return {errors:data.errors,success:false}
-        }
-
-        let token= data.token
-        let refreshToken=data.refreshToken
-        
-        let details= {
-            user:{},
-            provider:'Email',
-            token:token,
-            refreshToken:refreshToken,
-        };
-
-        commit("app/SET_LOADING",data.loading ,{root:true})
-        commit('loginUser',details)
-        return {errors:data.errors,success:true}
-    },
-
-    async logOut ({ commit,}) {
-
-        let token = localStorage.getItem("Zivero_refresh_token")
-        commit('app/SET_LOADING',true,{root:true})
-        let {errors,loading} =await client.mutate({mutation:REVOKE_TOKEN,variables:{refreshtoken:token}})
-        commit('app/SET_LOADING',loading,{root:true})
-        commit('LOGOUT_USER')
-        return {loading,errors}
-    },
-    
-    async userdetails({commit}){
-        console.log("fetching userdetails")
-        let res= await client.query({query:GET_CUSTOMER})
-        console.log(res)
-        commit("SET_USER" ,res.data.customer)
-    },
-    
-    async refreshToken({commit}){
-        let refreshToken=localStorage.getItem('Zivero_refresh_token')
-        let result= await client.mutate({mutation:REFRESH_TOKEN,variables:{refreshToken:refreshToken}})
-        let data=result.data.refreshToken
-        let token=data.token
-        
-        refreshToken=data.refreshToken
-        let details= {
-            user:{},
-            token:token,
-            refreshToken:refreshToken,
-            provider:"Email",
-        }
-        commit('loginUser',details)
-        return token 
-    },
-
-    async confirmEmail(_,code){
-        let result= await client.mutate({mutation:VERIFY_ACCOUNT,variables:{token:code}})
-        let data=result.data.verifyAccount
-        console.log(data)
-
-        if(data.success){
-            // commit('SET_VERIFIED',true)
-            return {success:true,errors:null}
-        }
-        else{
-            return {success:false,errors:data.errors}
-        }
-    },
-
-    async resendActivationEmail(_,email){
-        let {data}=await client.mutate({
-            mutation:RESEND_ACTIVATION_EMAIL,
-            variables:{email}
-        })
-        return data
-
-    },
-    async forgotPassword(_,email){
-        let {data}= await client.mutate({
-            mutation:FORGOT_PASSWORD,
-            variables:{email}
-        })
-        console.log("data",data)
-        return data.sendPasswordResetEmail
-    },
-
-    async resetPassword(_,{token,newPassword1,newPassword2}){
-        let {data}= await client.mutate({
-            mutation:RESET_PASSWORD,
-            variables:{token,newPassword1,newPassword2}
-        })
-        console.log("reset",data)
-        return data.passwordReset
+  logInWithEmail: async ({ commit }, authDetails) => {
+    //authDetails = email and password
+
+    let result = await client.mutate({
+      mutation: LOGIN_EMAIL,
+      variables: {
+        email: authDetails.email,
+        password: authDetails.password,
+      },
+    });
+    console.log(JSON.stringify(result));
+    let data = result.data.tokenAuth;
+    let refreshToken = data.refreshToken;
+
+    //let token=JSON.stringify(data.token)
+    if (data.token != null) {
+      let details = {
+        user: data.user,
+        token: data.token,
+        refreshToken: refreshToken,
+        provider: "Email",
+      };
+
+      commit("loginUser", details);
+      return true;
+    } else {
+      return false;
+    }
+  },
+  registerUser: async ({ commit }, authDetails) => {
+    commit("app/SET_LOADING", true, { root: true });
+    let result = await client.mutate({
+      mutation: REGISTER_USER,
+      variables: authDetails,
+    });
+    let data = result.data.register;
+
+    if (data.errors) {
+      commit("app/SET_LOADING", false, { root: true });
+      return { errors: data.errors, success: false };
     }
 
-
-
-}
+    let token = data.token;
+    let refreshToken = data.refreshToken;
+
+    let details = {
+      user: {},
+      provider: "Email",
+      token: token,
+      refreshToken: refreshToken,
+    };
+
+    commit("app/SET_LOADING", data.loading, { root: true });
+    commit("loginUser", details);
+    return { errors: data.errors, success: true };
+  },
+
+  async logOut({ commit }) {
+    let token = localStorage.getItem("Zivero_refresh_token");
+    commit("app/SET_LOADING", true, { root: true });
+    let { errors, loading } = await client.mutate({
+      mutation: REVOKE_TOKEN,
+      variables: { refreshtoken: token },
+    });
+    commit("app/SET_LOADING", loading, { root: true });
+    commit("LOGOUT_USER");
+    return { loading, errors };
+  },
+
+  async userdetails({ commit }) {
+    console.log("fetching userdetails");
+    let res = await client.query({ query: GET_CUSTOMER });
+    console.log(res);
+    commit("SET_USER", res.data.customer);
+  },
+
+  async refreshToken({ commit }) {
+    let refreshToken = localStorage.getItem("Zivero_refresh_token");
+    let result = await client.mutate({
+      mutation: REFRESH_TOKEN,
+      variables: { refreshToken: refreshToken },
+    });
+    let data = result.data.refreshToken;
+    let token = data.token;
+
+    refreshToken = data.refreshToken;
+    let details = {
+      user: {},
+      token: token,
+      refreshToken: refreshToken,
+      provider: "Email",
+    };
+    commit("loginUser", details);
+    return token;
+  },
+
+  async confirmEmail(_, code) {
+    let result = await client.mutate({
+      mutation: VERIFY_ACCOUNT,
+      variables: { token: code },
+    });
+    let data = result.data.verifyAccount;
+    console.log(data);
+
+    if (data.success) {
+      // commit('SET_VERIFIED',true)
+      return { success: true, errors: null };
+    } else {
+      return { success: false, errors: data.errors };
+    }
+  },
+
+  async resendActivationEmail(_, email) {
+    let { data } = await client.mutate({
+      mutation: RESEND_ACTIVATION_EMAIL,
+      variables: { email },
+    });
+    return data;
+  },
+  async forgotPassword(_, email) {
+    let { data } = await client.mutate({
+      mutation: FORGOT_PASSWORD,
+      variables: { email },
+    });
+    console.log("data", data);
+    return data.sendPasswordResetEmail;
+  },
+
+  async resetPassword(_, { token, newPassword1, newPassword2 }) {
+    let { data } = await client.mutate({
+      mutation: RESET_PASSWORD,
+      variables: { token, newPassword1, newPassword2 },
+    });
+    console.log("reset", data);
+    return data.passwordReset;
+  },
+};
diff --git a/apps/frontend/store-front/src/store/modules/wishlist/index.js b/apps/frontend/store-front/src/store/modules/wishlist/index.js
index d4c90b8..c90c70b 100644
--- a/apps/frontend/store-front/src/store/modules/wishlist/index.js
+++ b/apps/frontend/store-front/src/store/modules/wishlist/index.js
@@ -1,62 +1,65 @@
-import {client} from '../../../main';
-import { FetchWishlist } from '../../../graphql/Queries/wishlist';
-import {AddToWishlist , RemoveFromWishlist} from '../../../graphql/mutations/wishlist';
+import { client } from "../../../main";
+import { FetchWishlist } from "graphql-client/queries/wishlist";
+import {
+  AddToWishlist,
+  RemoveFromWishlist,
+} from "graphql-client/mutations/wishlist";
 
-const state = ()=> ({
-   
-    wishlist: {
-        id: '',
-        products: [],
-        totalItems:0
-    },
+const state = () => ({
+  wishlist: {
+    id: "",
+    products: [],
+    totalItems: 0,
+  },
+});
 
-})
-
-const actions ={
-    
-    async fetchWishlist({commit}){
-        try{
-            const {data} = await client.query({query: FetchWishlist,fetchPolicy:"no-cache"},);
-            commit('setWishlist', data.wishlist);
-        }catch(error){
-            console.log(error);
-        }
-    },
-
-    async addToWishlist({dispatch}, productId){
-        try{
-            await client.mutate({mutation: AddToWishlist, variables:{productId}});
-            await dispatch('fetchWishlist');
-        }catch(error){
-            console.log(error);
-        }
-    },
-
-    async removeFromWishlist({dispatch}, productId){
-        try{
-            await client.mutate({mutation: RemoveFromWishlist, variables:{productId}});
-            await dispatch('fetchWishlist');
-        }catch(error){
-            console.log(error);
-        }
+const actions = {
+  async fetchWishlist({ commit }) {
+    try {
+      const { data } = await client.query({
+        query: FetchWishlist,
+        fetchPolicy: "no-cache",
+      });
+      commit("setWishlist", data.wishlist);
+    } catch (error) {
+      console.log(error);
     }
+  },
 
+  async addToWishlist({ dispatch }, productId) {
+    try {
+      await client.mutate({
+        mutation: AddToWishlist,
+        variables: { productId },
+      });
+      await dispatch("fetchWishlist");
+    } catch (error) {
+      console.log(error);
+    }
+  },
 
-}
-
-const mutations ={
-
-    setWishlist(state, wishlist){
-        state.wishlist = wishlist;
+  async removeFromWishlist({ dispatch }, productId) {
+    try {
+      await client.mutate({
+        mutation: RemoveFromWishlist,
+        variables: { productId },
+      });
+      await dispatch("fetchWishlist");
+    } catch (error) {
+      console.log(error);
     }
-    
-}
+  },
+};
 
+const mutations = {
+  setWishlist(state, wishlist) {
+    state.wishlist = wishlist;
+  },
+};
 
 export default {
-    namespaced:true,
-    state,
-    mutations,
-    actions
-
-}
\ No newline at end of file
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};
diff --git a/apps/frontend/store-front/src/views/product.vue b/apps/frontend/store-front/src/views/product.vue
index da7e227..52eb082 100644
--- a/apps/frontend/store-front/src/views/product.vue
+++ b/apps/frontend/store-front/src/views/product.vue
@@ -1,15 +1,9 @@
 <template>
-
-
   <v-overlay width="100%" height="100%" v-if="loadingProduct">
-    <v-progress-circular
-      indeterminate
-      color="primary"
-    ></v-progress-circular>
+    <v-progress-circular indeterminate color="primary"></v-progress-circular>
   </v-overlay>
-  <v-flex v-else class="grey d-flex flex-column">
-   
-     <v-alert
+  <v-flex v-else class="d-flex flex-column">
+    <v-alert
       :value="true"
       v-for="error in errors"
       :key="error"
@@ -17,71 +11,71 @@
       type="error"
     >
       {{ error }}
-    </v-alert>   
+    </v-alert>
 
+    <div class="d-flex flex-row flex-wrap justify-space-around product white">
+      <product-carousal id="product-carousel" :images="productImages(product)">
+      </product-carousal>
 
-    <div class="d-flex flex-row flex-wrap  justify-space-around product white">
-      <product-carousal id="product-carousel"> </product-carousal>
-      
       <div id="product-details">
-
-        <v-card class="poppins pa-4"  width="auto" elevation="0" tile>
-
-          <span class="text-subtitle-1 font-weight-bold  text-uppercase">
+        <v-card class="poppins pa-4" width="auto" elevation="0" tile>
+          <span class="text-subtitle-1 font-weight-bold text-uppercase">
             {{ product.brand.name }}
           </span>
-          <div class="text-h5 text-capitalize py-4 ">
+          <div class="text-h3 font-weight-bold text-capitalize py-4">
             {{ product.name }}
           </div>
           <span class="d-flex py-3 justify-start price">
             <span class="poppins">
               {{ product.variations[0].price }}
             </span>
-            <span class="text-decoration-line-through grey--text kpoppins">500</span>
-            <span class="poppins red--text">              
+            <span class="text-decoration-line-through grey--text kpoppins"
+              >500</span
+            >
+            <span class="poppins red--text">
               (You save {{ product.variations[0].discountPercent }}%)
             </span>
           </span>
           <span class="green--text font-weight-bold text-caption poppins price">
             Inclusive of all taxes
           </span>
-        </v-card> 
-        
+        </v-card>
+
         <!-- <p>
           selected {{selected}} <br>
           variantion {{variationId}}
         </p>  -->
 
-        
         <div
-        
-        class="pa-2 mb-2"
-        v-for="(variation, name) in JSON.parse(product.availableVariants)"
-        :key="variation"
+          class="pa-2 mb-2"
+          v-for="(variation, name) in JSON.parse(product.availableVariants)"
+          :key="variation"
         >
           <span class="text-caption font-weight-medium mb-3 text-uppercase">
             {{ name }}
           </span>
           <!-- variants selection for color -->
-          <span class="d-flex flex-wrap justify-start" v-if="name=='color'">
-            
-            <span class="ma-1 mx-3 rounded-circle " :class="{'black':buttonSelected(name, value)}"
-              v-for="(value, i) in variation" 
-              :key="i">         <!-- outline for color selection -->
+          <span class="d-flex flex-wrap justify-start" v-if="name == 'color'">
+            <span
+              class="ma-1 mx-3 rounded-circle"
+              :class="{ black: buttonSelected(name, value) }"
+              v-for="(value, i) in variation"
+              :key="i"
+            >
+              <!-- outline for color selection -->
               <v-btn
-              fab  
+                fab
                 elevation="0"
                 @click="select(name, value)"
-                :ref="value" 
-                :color="value"              
+                :ref="value"
+                :color="value"
                 class="rounded-circle ma-1 pa-1 color-selector"
               >
-                
               </v-btn>
-              </span>
+            </span>
           </span>
           <!-- variations selection for size ,etc -->
-          <span v-else class="d-flex flex-wrap justify-start" >
+          <span v-else class="d-flex flex-wrap justify-start">
             <v-btn
               tile
               elevation="0"
@@ -97,32 +91,62 @@
             </v-btn>
           </span>
         </div>
-        
-        <checkDelivery class="mt-2 mb-2"> </checkDelivery>
-         
-        <div tile class="mb-2 pa-3">
-          <h2 class="text-subtitle-1 font-weight-bold text-uppercase pb-3 ">details</h2>
-          <container class="poppins wrap" >
-            {{ product.description }}
 
-          </container>
+        <!-- <checkDelivery class="mt-2 mb-2"> </checkDelivery> -->
+
+        <div class="d-none d-md-flex flex-column px-3 my-3">
+          <v-btn
+            dark
+            tile
+            color="secondary"
+            block
+            class="py-8"
+            :loading="addingToCart"
+            :disabled="isDisabled"
+            @click="add2Cart()"
+            elevation="0"
+          >
+            <span class="px-3"><v-icon>mdi-cart</v-icon> </span>
+            <span>ADD TO BAG </span>
+          </v-btn>
+          <v-btn color="accent" width="45%" class="py-8 my-3" outlined block>
+            <span class="px-3"><v-icon>mdi-heart</v-icon> </span>
+            <span class="text-caption text-md-button">ADD TO WISHLIST</span>
+          </v-btn>
         </div>
-      </div> <!-- end of product details div -->
-      
-      
-      
-    </div>  <!-- end of product carousel and details flex -->
 
+        <div tile class="mb-2 pa-3">
+          <h2 class="text-subtitle-1 font-weight-bold text-uppercase pb-3">
+            details
+          </h2>
+          <container class="poppins wrap" v-html="sanitizedDescription">
+          </container>
+        </div>
+      </div>
+      <!-- end of product details div -->
+    </div>
+    <!-- end of product carousel and details flex -->
 
-    <v-bottom-navigation class="pa-2 flex justify-center" round horizontal fixed>
-      <v-btn color="grey " width="auto" height="95%" outlined class="mx-7 px-6 py-2">
+    <v-bottom-navigation
+      class="pa-2 d-flex d-md-none justify-center"
+      round
+      horizontal
+      fixed
+    >
+      <v-btn
+        color="accent"
+        width="auto"
+        height="95%"
+        outlined
+        class="mx-7 px-6 py-2"
+      >
         <span><v-icon>mdi-heart</v-icon> </span>
         <span class="text-caption text-md-button">ADD TO WISHLIST</span>
       </v-btn>
       <v-btn
         :loading="addingToCart"
         :disabled="isDisabled"
-        color="red"
+        color="secondary"
         width="56%"
         @click="add2Cart()"
         height="95%"
@@ -152,23 +176,29 @@ export default {
 
   async mounted() {
     let id = this.$route.params.id;
-    let {errors,loading}=await this.$store.dispatch("products/getProduct", id);
-    this.errors=errors;
-    this.loadingProduct=loading;
+    let { errors, loading } = await this.$store.dispatch(
+      "products/getProduct",
+      id
+    );
+    this.errors = errors;
+    this.loadingProduct = loading;
   },
   data() {
     return {
-      errors:["select product variant "],
+      errors: ["select product variant "],
       loadingProduct: true,
-      addingToCart:false,
+      addingToCart: false,
     };
   },
   computed: {
     ...mapState("products", ["product", "selected"]),
-    ...mapGetters("products", ["variations", "variationId"]),
+    ...mapGetters("products", ["variations", "variationId", "productImages"]),
     isDisabled() {
-      console.log("vid",this.variationId)
-      return this.variationId===null || this.addingToCart; 
+      console.log("vid", this.variationId);
+      return this.variationId === null || this.addingToCart;
+    },
+    sanitizedDescription() {
+      return this.$sanitize(this.product.description);
     },
   },
   methods: {
@@ -202,45 +232,41 @@ export default {
         variationId: this.variationId,
         quantity: 1,
       };
-      let {loading,errors} = await this.addToCart(details);
+      let { loading, errors } = await this.addToCart(details);
       this.disableAddToCart = loading;
       this.errors = errors;
       this.addingToCart = loading;
     },
   },
 };
-
 </script>
 
-
 <style scoped lang="scss">
-
-#product-details{
-  font-family: Poppins , sans-serif;
+#product-details {
+  font-family: Poppins, sans-serif;
   margin-bottom: 50px;
-  width:45vw;
-
-
+  width: 30%;
+  margin-left: 3%;
+  margin-right: auto;
 }
 
- #product-carousel {
-    width: 45vw;
-  }
-@media only screen and (max-width: 450px) {
+#product-carousel {
+  width: 55%;
+  margin-left: auto;
+}
 
+@media only screen and (max-width: 980px) {
   #product-details {
     width: 100vw;
   }
 }
 
-
-@media only screen and (max-width: 450px) {
+@media only screen and (max-width: 980px) {
   #product-carousel {
     width: 100vw;
   }
 }
 
-
 #tocart {
   border-radius: 5px;
   font-weight: bold;
@@ -254,7 +280,7 @@ export default {
   margin-right: 8px;
 }
 
-.color-selector{
- border : 2px solid white !important ; 
+.color-selector {
+  border: 2px solid white !important ;
 }
 </style>
diff --git a/apps/frontend/store-front/src/views/productsPage.vue b/apps/frontend/store-front/src/views/productsPage.vue
index 67e41b9..9094760 100644
--- a/apps/frontend/store-front/src/views/productsPage.vue
+++ b/apps/frontend/store-front/src/views/productsPage.vue
@@ -1,111 +1,110 @@
 <template>
-<div>
-  <mobile-filter-panel   />
-  <productsLoading v-if="productsLoading" />
-  
-  <div v-else class="d-flex">
-    
-    <desktop-filter-panel v-if="!isMobile" />
-    
-    <productsLoading v-if="isFiltering" />
+  <div class="w-full">
+    <mobile-filter-panel v-if="isMobile" />
+    <productsLoading v-if="productsLoading" />
+
+    <div v-else v class="d-flex">
+      <desktop-filter-panel v-if="!isMobile" />
 
-    <div v-else >
+      <productsLoading v-if="isFiltering" />
 
+      <v-sheet width="100%" v-else class="">
         <v-sheet class="justify-end d-none d-md-flex" width="100%">
-          <sortingMenu class="mx-5 my-2 d-none d-md-block "/>
+          <sortingMenu class="mx-5 my-2 d-none d-md-block" />
         </v-sheet>
-        
-        <productsGrid  @scroll.prevent :productChunks="productChunks"> </productsGrid>
-         
+
+        <productsGrid @scroll.prevent :productChunks="productChunks">
+        </productsGrid>
+
         <div class="px-4">
-        <v-btn block color="primary" tile  class="mb-4 mt-4 white--text" @click="fetchMoreProducts"
-          v-show="hasNextPage"
-         :loading="fetchingMoreProducts" :disabled="fetchingMoreProducts">
-          Load More
-        </v-btn>
+          <v-btn
+            block
+            color="primary"
+            tile
+            class="mb-4 mt-4 white--text"
+            @click="fetchMoreProducts"
+            v-show="hasNextPage"
+            :loading="fetchingMoreProducts"
+            :disabled="fetchingMoreProducts"
+          >
+            Load More
+          </v-btn>
         </div>
-        
+      </v-sheet>
+
+      <sortingBottomSheet />
+      <bottom-navigation></bottom-navigation>
     </div>
-   
-    <sortingBottomSheet/>
-    <bottom-navigation ></bottom-navigation>
   </div>
-</div>
-
 </template>
 
 <script>
 import productsGrid from "../components/products/productsGrid.vue";
 import desktopFilterPanel from "../components/filter/desktopFilterPanel.vue";
-import mobileFilterPanel from "../components/filter/mobileFilterPanel.vue"
+import mobileFilterPanel from "../components/filter/mobileFilterPanel.vue";
 import bottomNavigation from "../components/products/productsBtmnav.vue";
-import productsLoading   from "../components/products/loader.vue";
+import productsLoading from "../components/products/loader.vue";
 import sortingMenu from "../components/filter/sortingMenu.vue";
 import sortingBottomSheet from "../components/filter/sortingBottomSheet.vue";
 // import loader from "../components/products/loader.vue";
 // import Loading from "../components/loading.vue"
 
-import {mapState,mapActions , mapGetters, mapMutations} from "vuex"
+import { mapState, mapActions, mapGetters, mapMutations } from "vuex";
 // import Loading from "../components/loading.vue";
 export default {
   name: "productsPage ",
   components: {
     productsGrid,
     mobileFilterPanel,
-   desktopFilterPanel,
+    desktopFilterPanel,
     bottomNavigation,
     productsLoading,
     sortingMenu,
     sortingBottomSheet,
-    
-},
+  },
   async mounted() {
-     
     this.$store.dispatch("products/getFilters");
 
     //  if (! this.areFiltersChanged){
-       
-    //     
+
+    //
     //     await this.getProducts({})
     //     this.productsLoading =false
 
     //  }
-    this.productsLoading = true
-    let query=this.$route.query.filter
-    let filter={}
-    console.log(query)
-    if( query != undefined ){
-        filter = JSON.parse(query)
+    this.productsLoading = true;
+    let query = this.$route.query.filter;
+    let filter = {};
+    console.log(query);
+    if (query != undefined) {
+      filter = JSON.parse(query);
     }
-    
-    console.log(filter)
-    this.setFilters(filter)
-    await this.filterProducts(true)
-    this.productsLoading =false
-
-    
 
+    console.log(filter);
+    this.setFilters(filter);
+    await this.filterProducts(true);
+    this.productsLoading = false;
   },
-  destroyed(){
-    console.log("destroyed")
-    this.resetFilters()
-    this.clearProductsPage()
+  destroyed() {
+    console.log("destroyed");
+    this.resetFilters();
+    this.clearProductsPage();
   },
   data() {
     return {
-      productsLoading:false,
-      oberver : null,
+      productsLoading: false,
+      oberver: null,
       isOpenDrawer: false,
-      fetchingMoreProducts:false
+      fetchingMoreProducts: false,
     };
   },
 
   computed: {
-    ...mapState("products",["products"]) ,
-    ...mapState("filters",["isFiltering"]),
+    ...mapState("products", ["products"]),
+    ...mapState("filters", ["isFiltering"]),
     ...mapGetters("filters", ["areFiltersChanged"]),
-    page(){
-      return this.products.pageNo
+    page() {
+      return this.products.pageNo;
     },
     productChunks() {
       let p = this.$store.getters["products/productChunks"];
@@ -121,39 +120,32 @@ export default {
     },
 
     hasNextPage() {
-       return this.products.pageNo < this.products.totalPages
-    }
+      return this.products.pageNo < this.products.totalPages;
+    },
   },
 
-  
-
   methods: {
-    ...mapActions("products",["getMoreProducts","getProducts"]),
-    ...mapActions("filters",["filterProducts"]),
-    ...mapMutations("products",["clearProductsPage"]),
-    ...mapMutations("filters",["resetFilters","setFilters"]),
-    handleObserver(entries, observer){
-      if(entries[0].isIntersecting){
-          console.log('loading more products',observer)
-          this.loading = true
-          observer.unobserve(this.$refs.loader);
-          this.getMoreProducts()
-          }
+    ...mapActions("products", ["getMoreProducts", "getProducts"]),
+    ...mapActions("filters", ["filterProducts"]),
+    ...mapMutations("products", ["clearProductsPage"]),
+    ...mapMutations("filters", ["resetFilters", "setFilters"]),
+    handleObserver(entries, observer) {
+      if (entries[0].isIntersecting) {
+        console.log("loading more products", observer);
+        this.loading = true;
+        observer.unobserve(this.$refs.loader);
+        this.getMoreProducts();
+      }
     },
 
-    async fetchMoreProducts(){
-      this.fetchingMoreProducts =true
+    async fetchMoreProducts() {
+      this.fetchingMoreProducts = true;
       await this.getMoreProducts();
-      this.fetchingMoreProducts =false
-    }
-
-
-
-
+      this.fetchingMoreProducts = false;
+    },
   },
 
-  watch:{
-   
+  watch: {
     // products :{
     //   handler: function(val, ){
     //     console.log("products changed",)
@@ -169,12 +161,15 @@ export default {
     //   },
     //   deep: true
     // }
-  }
-
+  },
 };
 </script>
 
-<style scoped >
+<style scoped>
+.w-full {
+  widows: 100%;
+}
+
 /* @media  screen and (min-width: 700px) {
    
    .products{
diff --git a/packages/config/eslint-preset-vue2.js b/packages/config/eslint-preset-vue2.js
new file mode 100644
index 0000000..e69de29
diff --git a/packages/graphql-client/.eslintrc.js b/packages/graphql-client/.eslintrc.js
index e0b422e..8513853 100644
--- a/packages/graphql-client/.eslintrc.js
+++ b/packages/graphql-client/.eslintrc.js
@@ -1 +1,9 @@
-module.exports = require('config/eslint-preset')
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: ['plugin:vue/essential', 'eslint:recommended'],
+
+  rules: {},
+}
diff --git a/packages/graphql-client/admin/collections.js b/packages/graphql-client/admin/collections.js
new file mode 100644
index 0000000..c1d716b
--- /dev/null
+++ b/packages/graphql-client/admin/collections.js
@@ -0,0 +1,81 @@
+import gql from 'graphql-tag'
+
+// export const CategoryFragment = {
+//   category: gql`
+//     fragment CategoryFragment on CategoryType {
+//       id
+//       brands {
+//         id
+//         name
+//       }
+//       description
+//     }
+//   `,
+// }
+
+export const createCategory = gql`
+  mutation createCategory($input: CategoryInput!) {
+    createCategory(input: $input) {
+      category {
+        #       ...CategoryFragment
+        id
+      }
+    }
+  }
+`
+
+// export const updateCategory = gql`
+//    mutation updateCategory($id:Int!,$input:CategoryInput!){
+//        updateCategory(id:$id,input:$input){
+//               ${CategoryFragment}
+//        }
+//    }
+// `
+
+// export const deleteCategory = gql`
+//   mutation deleteCategory($id: Int!) {
+//     deleteCategory(id: $id) {
+//       success
+//     }
+//   }
+// `
+
+// export const fetchCategories = gql`
+//   query categories(
+//     $offset: Int
+//     $first: Int
+//     $userId: ID
+//     $isActive: Boolean
+//     $isArchived: Boolean
+//     $isVerified: Boolean
+//   ) {
+//     categories(
+//       offset: $offset
+//       first: $first
+//       user: $userId
+//       user_Status_Verified: $isVerified
+//       user_Status_Archived: $isArchived
+//       user_IsActive: $isActive
+//     ) {
+//       pageInfo {
+//         hasNextPage
+//         startCursor
+//       }
+//       edges {
+//         node {
+//           id
+//           ${CategoryFragment}
+//         }
+//       }
+//     }
+//   }
+// `
+
+// export const fetchBrands = gql`
+//   query brands {
+//     brands {
+//       id
+//       name
+//     }
+//   }
+// `
diff --git a/packages/graphql-client/admin/customers.js b/packages/graphql-client/admin/customers.js
index c3a1935..0a199cc 100644
--- a/packages/graphql-client/admin/customers.js
+++ b/packages/graphql-client/admin/customers.js
@@ -1,8 +1,22 @@
 import gql from 'graphql-tag'
 
 export const FetchCustomers = gql`
-  query customers($offset: Int, $first: Int, $userId: ID) {
-    customers(offset: $offset, first: $first, user: $userId) {
+  query customers(
+    $offset: Int
+    $first: Int
+    $userId: ID
+    $isActive: Boolean
+    $isArchived: Boolean
+    $isVerified: Boolean
+  ) {
+    customers(
+      offset: $offset
+      first: $first
+      user: $userId
+      user_Status_Verified: $isVerified
+      user_Status_Archived: $isArchived
+      user_IsActive: $isActive
+    ) {
       pageInfo {
         hasNextPage
         startCursor
@@ -11,13 +25,15 @@ export const FetchCustomers = gql`
         node {
           user {
             isActive
+            status {
+              verified
+              archived
+            }
             username
             firstName
           }
           id
           phoneNumber
-          isVerified
-          verifiedBy
           joinedOn
         }
       }
diff --git a/packages/graphql-client/queries/cart.js b/packages/graphql-client/queries/cart.js
index 4c4301a..995afcb 100644
--- a/packages/graphql-client/queries/cart.js
+++ b/packages/graphql-client/queries/cart.js
@@ -1,25 +1,25 @@
-import gql from 'graphql-tag';
+import gql from 'graphql-tag'
 
-
-export const getCart= gql`query 
-cart
-{
-    cart{
+export const getCart = gql`
+  query cart {
+    cart {
       cartLength
       totalPrice
-      products{
+      products {
         price
         quantity
+
         totalPrice
         product {
+          images
           id
-          brand{
+          brand {
             id
             name
           }
           name
         }
-        variation{
+        variation {
           Id
           images
           price
@@ -28,9 +28,8 @@ cart
             name
             value
           }
-          }
         }
-      
+      }
     }
-}
+  }
 `
diff --git a/packages/graphql-client/queries/collections.js b/packages/graphql-client/queries/collections.js
new file mode 100644
index 0000000..2516251
--- /dev/null
+++ b/packages/graphql-client/queries/collections.js
@@ -0,0 +1,25 @@
+import gql from 'graphql-tag'
+
+export const getCategories = gql`
+  query categories {
+    categories {
+      id
+      brands {
+        id
+        name
+      }
+      description
+      genders
+      image
+      name
+    }
+  }
+`
+export const getBrands = gql`
+  query brands {
+    brands {
+      id
+      name
+    }
+  }
+`
diff --git a/packages/graphql-client/queries/order.js b/packages/graphql-client/queries/order.js
index 2b5918d..c4b8b6b 100644
--- a/packages/graphql-client/queries/order.js
+++ b/packages/graphql-client/queries/order.js
@@ -11,7 +11,7 @@ export const GetOrders = gql`
     $paid: Boolean
     $paymentMethod: String
     $paymentStatus: String
-    $fullfilmentStatus: String
+    $fulfillmentStatus: String
     $createdAt: DateTime
     $updatedAt: DateTime
     $orderBy: String
@@ -27,7 +27,7 @@ export const GetOrders = gql`
       paid: $paid
       paymentMethod: $paymentMethod
       paymentStatus: $paymentStatus
-      fullfilmentStatus: $fullfilmentStatus
+      fulfillmentStatus: $fulfillmentStatus
       createdAt: $createdAt
       updatedAt: $updatedAt
     ) {
@@ -40,12 +40,14 @@ export const GetOrders = gql`
       edges {
         node {
           id
-          deliveryCharges
+          shippingCharges
           paymentStatus
           createdAt
+          totalAmount
           orderitemSet {
             id
             product {
+              images
               available
               brand {
                 id
diff --git a/packages/graphql-client/queries/productQueries.js b/packages/graphql-client/queries/productQueries.js
index c766112..c42d999 100644
--- a/packages/graphql-client/queries/productQueries.js
+++ b/packages/graphql-client/queries/productQueries.js
@@ -20,6 +20,8 @@ export const GET_PRODUCTS_QUERY = gql`
         }
         status
         images
+        price
+        discountPercent
         variations {
           Id
           price
@@ -40,6 +42,8 @@ export const GET_PRODUCT_QUERY = gql`
       id
       name
       description
+      images
+      price
       brand {
         id
         name
@@ -49,7 +53,7 @@ export const GET_PRODUCT_QUERY = gql`
         id
       }
       availableVariants
-
+      status
       variations {
         Id
         price
diff --git a/test.vue b/test.vue
new file mode 100644
index 0000000..d7263fd
--- /dev/null
+++ b/test.vue
@@ -0,0 +1,6 @@
+<script>
+let x = []
+x.map().concat.apply()
+x.:wq
+
+</script>
diff --git a/yarn.lock b/yarn.lock
index 836dd5b..a3e8a82 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3601,6 +3601,11 @@ deepmerge@^1.5.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
   integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
 
+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
 default-gateway@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -5362,7 +5367,7 @@ html-webpack-plugin@^3.2.0:
     toposort "^1.0.0"
     util.promisify "1.0.0"
 
-htmlparser2@^6.1.0:
+htmlparser2@^6.0.0, htmlparser2@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
   integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
@@ -5890,6 +5895,11 @@ is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
+is-plain-object@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
+  integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
+
 is-regex@^1.0.4, is-regex@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
@@ -7180,6 +7190,11 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+parse-srcset@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/parse-srcset/-/parse-srcset-1.0.2.tgz#f2bd221f6cc970a938d88556abc589caaaa2bde1"
+  integrity sha1-8r0iH2zJcKk42IVWq8WJyqqiveE=
+
 parse5-htmlparser2-tree-adapter@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
@@ -7735,7 +7750,7 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.27, postcss@^7.0.3
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.1.10, postcss@^8.4.5:
+postcss@^8.1.10, postcss@^8.3.11, postcss@^8.4.5:
   version "8.4.6"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1"
   integrity sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==
@@ -8342,6 +8357,18 @@ safe-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sanitize-html@^2.1.1:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-2.7.0.tgz#e106205b468aca932e2f9baf241f24660d34e279"
+  integrity sha512-jfQelabOn5voO7FAfnQF7v+jsA6z9zC/O4ec0z3E35XPEtHYJT/OdUziVWlKW4irCr2kXaQAyXTXDHWAibg1tA==
+  dependencies:
+    deepmerge "^4.2.2"
+    escape-string-regexp "^4.0.0"
+    htmlparser2 "^6.0.0"
+    is-plain-object "^5.0.0"
+    parse-srcset "^1.0.2"
+    postcss "^8.3.11"
+
 sass-loader@^8.0.0:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-8.0.2.tgz#debecd8c3ce243c76454f2e8290482150380090d"
@@ -9779,6 +9806,13 @@ vue-router@^3.4.9:
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.3.tgz#041048053e336829d05dafacf6a8fb669a2e7999"
   integrity sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg==
 
+vue-sanitize@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/vue-sanitize/-/vue-sanitize-0.2.1.tgz#60df0ef1dcd7268b04713e470ce993319cc5ea61"
+  integrity sha512-MhrfAaAqIQ8JXWfdlhK6f+H2WnZ7KQwkOgLNeUyfACI2bq/3HPZ2zeUQDathnLdsXMXAa8pJehOgPYtlaG9Jew==
+  dependencies:
+    sanitize-html "^2.1.1"
+
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"

From 37ebd17debdc34f69384a0e7a6a2a6f1689f8b0f Mon Sep 17 00:00:00 2001
From: Aabid <mailtoaabid01@gmail.com>
Date: Sat, 5 Mar 2022 14:24:42 +0530
Subject: [PATCH 8/8] feat: [admin] added  login flow

---
 apps/backend/Orders/schema.py                 |  12 +-
 apps/backend/cart/cart.py                     | 148 +++----
 apps/backend/filters/schema.py                |  10 +-
 apps/backend/shop/models.py                   |   4 +-
 apps/backend/shop/schema.py                   |  29 +-
 apps/backend/shop/types.py                    |  15 +
 apps/frontend/admin/src/apolloClient.js       |  65 ++-
 .../admin/src/components/AppSideBar.vue       |  12 +-
 .../admin/src/components/BaseButtonModal.vue  |   4 +-
 .../admin/src/components/BaseDialog.vue       |  82 ++++
 .../admin/src/components/BaseListItem.vue     |   9 +-
 .../src/components/BaseListItemGroup.vue      |   2 +-
 .../src/components/BaseMultiselectField.vue   |  14 +-
 .../admin/src/components/BrandCreateModal.vue |  42 ++
 .../admin/src/components/BrandDeleteModal.vue |  45 +++
 .../admin/src/components/BrandEditModal.vue   |  56 +++
 .../admin/src/components/BrandForm.vue        |  30 ++
 ...yFormModal.vue => CategoryCreateModal.vue} |  36 +-
 .../src/components/CategoryDeleteDialog.vue   |  42 ++
 .../src/components/CategoryEditModal.vue      |  70 ++++
 .../admin/src/components/CategoryForm.vue     |  56 +++
 .../admin/src/components/CustomersList.vue    |   2 +-
 .../src/components/DashboardEarningMonth.vue  |   4 +-
 .../components/ProductCreateFormOptions.vue   |   6 +-
 .../ProductCreateVariantsTableRow.vue         |   2 +-
 .../src/components/ProductImageUpload.vue     |   6 +-
 .../src/components/ProductOptionForm.vue      |   4 +-
 .../admin/src/components/TheNavBar.vue        |  31 +-
 .../src/components/VariantCreateModal.vue     |  48 +++
 .../src/components/VariantDeleteModal.vue     |  45 +++
 .../admin/src/components/VariantEditModal.vue |  67 ++++
 .../admin/src/components/VariantForm.vue      |  30 ++
 .../admin/src/composables/useCustomers.js     |   2 +-
 .../admin/src/composables/useDashboard.js     |   4 +-
 .../admin/src/composables/useFilters.js       |   2 +-
 .../admin/src/composables/useNavdrawer.js     |   4 +-
 .../admin/src/composables/useOrders.js        |   4 +-
 .../admin/src/composables/useProducts.js      |   2 +-
 .../frontend/admin/src/composables/useUser.js | 144 +++++++
 .../admin/src/layouts/WithSideBar.vue         |   2 +-
 apps/frontend/admin/src/main.js               |  13 +-
 .../frontend/admin/src/plugins/fontAwesome.js |   2 +
 apps/frontend/admin/src/router/index.js       |  13 +-
 apps/frontend/admin/src/views/Brands.vue      |  89 +++++
 apps/frontend/admin/src/views/Categories.vue  |  30 +-
 apps/frontend/admin/src/views/Login.vue       |  56 +++
 apps/frontend/admin/src/views/OrderSingle.vue |   4 +-
 apps/frontend/admin/src/views/ProductEdit.vue |  25 +-
 .../admin/src/views/ProductsCreate.vue        |  12 +-
 .../frontend/admin/src/views/ProductsEdit.vue |  42 --
 apps/frontend/admin/src/views/Variants.vue    | 103 +++++
 apps/frontend/store-front/src/auth/index.js   |  52 +--
 .../src/components/address/addressCard.vue    |   2 +-
 .../src/components/address/addressDialog.vue  | 102 ++---
 .../src/components/address/addressForm.vue    | 133 ++++---
 .../address/updateAddressDialog.vue           | 103 ++---
 .../components/cart/cart-product-preview.vue  |   2 +-
 .../src/components/filter/filterDrawer.vue    |  50 +--
 .../src/components/filter/filterItemGroup.vue |   2 +-
 .../src/components/filter/filterdrawer.vue    |  45 +--
 .../components/filter/variantFilterGroup.vue  | 157 ++++----
 .../src/components/home/brands.vue            |   2 +-
 .../components/home/categoriesscroller.vue    |   4 +-
 .../src/components/home/categorySlideItem.vue |   8 +-
 .../store-front/src/components/homePage.vue   |   2 +-
 .../src/components/orders/order.vue           |   2 +-
 .../src/components/products/productCard.vue   |   3 +-
 .../components/products/selectVariation.vue   | 178 +++++----
 .../src/components/profile/addresses.vue      | 138 +++----
 .../src/components/wishlist/productCard.vue   | 169 ++++----
 apps/frontend/store-front/src/main.js         |  22 +-
 apps/frontend/store-front/src/router/index.js | 234 ++++++-----
 .../src/store/modules/address/index.js        |  20 +-
 .../src/store/modules/cart/index.js           |  14 +-
 .../store-front/src/store/modules/checkout.js |  55 ++-
 .../src/store/modules/filters/index.js        | 267 ++++++-------
 .../src/store/modules/orders/index.js         |   4 +-
 .../src/store/modules/products/actions.js     |  22 +-
 .../src/store/modules/products/getters.js     |  10 +-
 .../src/store/modules/products/mutations.js   | 125 +++---
 .../src/store/modules/search/index.js         |   4 +-
 .../src/store/modules/user/actions.js         |  12 +-
 .../src/store/modules/user/mutations.js       |  70 ++--
 .../src/store/modules/wishlist/index.js       |   6 +-
 apps/frontend/store-front/src/views/cart.vue  | 228 +++++------
 .../store-front/src/views/confirmEmail.vue    |  97 ++---
 .../store-front/src/views/forgotPassword.vue  |  85 ++--
 apps/frontend/store-front/src/views/login.vue | 198 +++++-----
 .../store-front/src/views/paymentPage.vue     | 370 +++++++++---------
 .../src/views/paymentStatusPage.vue           | 227 ++++++-----
 .../store-front/src/views/product.vue         |   6 +-
 .../store-front/src/views/productsPage.vue    |  18 +-
 .../store-front/src/views/selectAddress.vue   | 287 +++++++-------
 .../frontend/store-front/src/views/signup.vue | 202 +++++-----
 .../store-front/src/views/verifyEmailSent.vue | 183 ++++-----
 .../store-front/src/views/wishlist.vue        | 106 +++--
 packages/config/appolo-preset.js              |   2 +-
 packages/graphql-client/admin/collections.js  | 173 ++++----
 packages/graphql-client/queries/auth.js       |  37 +-
 .../graphql-client/queries/collections.js     |  11 +
 packages/graphql-client/queries/queries.js    |  15 -
 packages/utils/helpers.js                     |  20 +
 packages/utils/index.js                       |   3 +-
 packages/utils/router.js                      |   2 +-
 104 files changed, 3553 insertions(+), 2317 deletions(-)
 create mode 100644 apps/frontend/admin/src/components/BaseDialog.vue
 create mode 100644 apps/frontend/admin/src/components/BrandCreateModal.vue
 create mode 100644 apps/frontend/admin/src/components/BrandDeleteModal.vue
 create mode 100644 apps/frontend/admin/src/components/BrandEditModal.vue
 create mode 100644 apps/frontend/admin/src/components/BrandForm.vue
 rename apps/frontend/admin/src/components/{CategoryFormModal.vue => CategoryCreateModal.vue} (67%)
 create mode 100644 apps/frontend/admin/src/components/CategoryDeleteDialog.vue
 create mode 100644 apps/frontend/admin/src/components/CategoryEditModal.vue
 create mode 100644 apps/frontend/admin/src/components/CategoryForm.vue
 create mode 100644 apps/frontend/admin/src/components/VariantCreateModal.vue
 create mode 100644 apps/frontend/admin/src/components/VariantDeleteModal.vue
 create mode 100644 apps/frontend/admin/src/components/VariantEditModal.vue
 create mode 100644 apps/frontend/admin/src/components/VariantForm.vue
 create mode 100644 apps/frontend/admin/src/composables/useUser.js
 create mode 100644 apps/frontend/admin/src/views/Brands.vue
 create mode 100644 apps/frontend/admin/src/views/Login.vue
 delete mode 100644 apps/frontend/admin/src/views/ProductsEdit.vue
 create mode 100644 apps/frontend/admin/src/views/Variants.vue
 delete mode 100644 packages/graphql-client/queries/queries.js

diff --git a/apps/backend/Orders/schema.py b/apps/backend/Orders/schema.py
index b2d8356..f4f5450 100644
--- a/apps/backend/Orders/schema.py
+++ b/apps/backend/Orders/schema.py
@@ -1,5 +1,8 @@
 from ast import Str
 import base64
+from mongoengine.errors import DoesNotExist
+
+from shop.models import Variation
 from shop.types import ProductType, VariationType
 from django.core.paginator import Paginator
 import graphene
@@ -80,11 +83,10 @@ def resolve_product(self, info):
         return self.product
 
     def resolve_variation(self, info):
-
-        for v in self.product.variations:
-
-            if str(v._id) == self.variation_id:
-                return v
+        try:
+            return self.product.get_variation(self.variation_id)
+        except DoesNotExist:
+            return Variation(price=0)
 
 
 class Query(graphene.ObjectType):
diff --git a/apps/backend/cart/cart.py b/apps/backend/cart/cart.py
index 5dfdc7f..b1f90af 100644
--- a/apps/backend/cart/cart.py
+++ b/apps/backend/cart/cart.py
@@ -1,37 +1,37 @@
 from decimal import Decimal
 from telnetlib import DO
-import uuid                     
+import uuid
 from bson.objectid import ObjectId
 from django.conf import settings
 from pathlib import Path
 from mongoengine import DoesNotExist
 from shop.models import Product
-from abc import ABC,abstractmethod
-from typing import List,Dict
+from abc import ABC, abstractmethod
+from typing import List, Dict
+
 BASE_DIR = Path(__file__).resolve().parent.parent
 
 
 class AbstractCart(ABC):
-    
     @abstractmethod
-    def add(self, product_id,variation_id,quantity=1, override_quantity=False):
+    def add(self, product_id, variation_id, quantity=1, override_quantity=False):
         pass
-    
+
     @abstractmethod
     def clear_cart(self):
         pass
-    
+
     @abstractmethod
-    def  total_items(self):
+    def total_items(self):
         pass
- 
+
     @abstractmethod
     def products(self) -> List[Dict]:
-        """ returns all the items in the cart """
+        """returns all the items in the cart"""
         pass
 
     @abstractmethod
-    def remove(self, product_id,variation_id):
+    def remove(self, product_id, variation_id):
         pass
 
     @abstractmethod
@@ -52,99 +52,113 @@ def __init__(self, request):
             # save an empty cart in the session
             cart = self.session[settings.CART_SESSION_ID] = {}
         self.cart = cart
-     
+
     def products(self):
         """
         Iterate over the items in the cart and get the products
         from the database.
         """
-        products=[]
-        for key,item  in self.cart.items():
-            cart_obj= {}
-            cart_obj["quantity"]=item["quantity"]
-            keys=key.split(",")
-            product_id=keys[0]
-
-            try :
+        products = []
+        for key, item in self.cart.items():
+            cart_obj = {}
+            cart_obj["quantity"] = item["quantity"]
+            keys = key.split(",")
+            product_id = keys[0]
+
+            try:
                 product = Product.objects.get(id=product_id)
-            except DoesNotExist :
+            except DoesNotExist:
                 self.remove(key)
-                
-            variation = None 
-            for v in product.variations :               
+
+            variation = None
+            for v in product.variations:
                 if str(v._id) == keys[1]:
-                    variation =v
+                    variation = v
                     break
-            cart_obj['product']=product
-            cart_obj['variation']=variation 
-            cart_obj['price']=int(item['price']) 
+            cart_obj["product"] = product
+            cart_obj["variation"] = variation
+            cart_obj["price"] = int(item["price"])
             # cart_obj['totalPrice']=int(item['price'])* item['quantity']
             products.append(cart_obj)
         return products
-       
+
     def total_items(self):
-        return sum(item['quantity'] for item in self.cart.values())
-    
+        return sum(item["quantity"] for item in self.cart.values())
+
     def data(self):
         return self.cart
 
     def get_total_price(self):
-        #print(self.cart)
-        return sum( 
-            int(item['price']) * int(item['quantity']) for item 
-            in self.cart.values()
+        # print(self.cart)
+        return sum(
+            int(item["price"]) * int(item["quantity"]) for item in self.cart.values()
         )
 
     def clear_cart(self):
         del self.session[settings.CART_SESSION_ID]
         self.save()
-    
 
-    def add(self, product_id,variation_id,quantity=1, override_quantity=False,):
-       
+    def add(
+        self,
+        product_id,
+        variation_id,
+        quantity=1,
+        override_quantity=False,
+    ):
+
         """
         Add a product to the cart or update its quantity.
         """
-    
+
         if quantity <= 0:
-            raise ValueError('Cannot add zero or negative quantities!')
- 
-        product_id = (product_id)
-        product=Product.objects(id=product_id,)
-        
-        for v in product[0].variations:
-            
-            if str(v._id)==str(variation_id):
-                #print('hi')
-                variation = v
-        price=variation.price
-
-        key =f"{product_id},{variation_id}" 
+            raise ValueError("Cannot add zero or negative quantities!")
+
+        product_id = product_id
+
+        try:
+            product = Product.objects.get(
+                id=product_id,
+            )
+            variation = product.get_variation(variation_id)
+
+        except DoesNotExist:
+
+            return
+
+        print("variation", variation)
+        price = variation.price
+
+        key = f"{product_id},{variation_id}"
 
         if key not in self.cart:
-            self.cart[key] = {'quantity': 0,'price': str(price)}
+            self.cart[key] = {"quantity": 0, "price": str(price)}
         if override_quantity:
-            self.cart[key]['price']=str(price)
-            self.cart[key]['quantity'] = quantity
+            self.cart[key]["price"] = str(price)
+            self.cart[key]["quantity"] = quantity
         else:
-            self.cart[key]['price']=str(price)
-            self.cart[key]['quantity'] += quantity
+            self.cart[key]["price"] = str(price)
+            self.cart[key]["quantity"] += quantity
         self.save()
-      
+
     def save(self):
-         # mark the session as "modified" to make sure it gets saved
+        # mark the session as "modified" to make sure it gets saved
         self.session.modified = True
 
-    def remove(self, product_id,variation_id):
-      
-        key =f"{product_id},{variation_id}"
-      
+    def remove(self, product_id, variation_id):
+
+        key = f"{product_id},{variation_id}"
+
         if key in self.cart:
             del self.cart[key]
             self.save()
 
-    def add_from_db(self,db_cart):
+    def add_from_db(self, db_cart):
         items = db_cart.products()
-        for item in items :
-            self.add(str(item.product.id),str(item.variation._id),item.quantity,override_quantity=True)
-        self.save()
\ No newline at end of file
+        for item in items:
+            self.add(
+                str(item.product.id),
+                str(item.variation._id),
+                item.quantity,
+                override_quantity=True,
+            )
+        self.save()
diff --git a/apps/backend/filters/schema.py b/apps/backend/filters/schema.py
index d6d309a..7815a4b 100644
--- a/apps/backend/filters/schema.py
+++ b/apps/backend/filters/schema.py
@@ -72,13 +72,21 @@ class SortOptions(graphene.Enum):
 class FilterInput(graphene.InputObjectType):
     categories = graphene.List(graphene.String, required=False)
     gender = graphene.String(required=False)
-    status = graphene.String(required=False)
+    status = graphene.String(required=False, default_value="active")
     sub_categories = graphene.List(graphene.String, required=False)
     brands = graphene.List(graphene.String, required=False)
     variant_filters = graphene.List(VariantsFilterInput, required=False)
     tags = graphene.List(graphene.String, required=False)
     sort_by = graphene.Field(SortOptions)
 
+    @classmethod
+    def default(cls):
+        meta = cls._meta
+        fields = meta.fields
+        default_fields = {name: field.default_value for name, field in fields.items()}
+        container = meta.container
+        return container(**default_fields)
+
 
 ##### custom filter to use in model #######
 
diff --git a/apps/backend/shop/models.py b/apps/backend/shop/models.py
index ec04e1c..5e95189 100644
--- a/apps/backend/shop/models.py
+++ b/apps/backend/shop/models.py
@@ -65,8 +65,8 @@ class Product(Document):
 
     created_at = DateTimeField(default=datetime.now)
     name = StringField(max_length=100, required=True)
-    brand = ReferenceField(Brand, required=True)
-    category = ReferenceField(Category, required=True)
+    brand = ReferenceField(Brand, required=True, reverse_delete_rule=NULLIFY)
+    category = ReferenceField(Category, required=True, reverse_delete_rule=NULLIFY)
     # sub_category= ReferenceField(SubCategory)
     description = StringField(required=True, max_length=2000)
     variations = ListField(EmbeddedDocumentField(Variation))
diff --git a/apps/backend/shop/schema.py b/apps/backend/shop/schema.py
index dbb50e6..e24bf8c 100644
--- a/apps/backend/shop/schema.py
+++ b/apps/backend/shop/schema.py
@@ -4,13 +4,14 @@
 from .models import Product, Category, Variant, Brand
 from filters.schema import FilterInput
 from .types import ProductsType, VariantType, ProductType, CategoryType, BrandType
+from Orders.models import Order
 
 
 class Query(ObjectType):
 
     Products = graphene.Field(
         ProductsType,
-        filter=FilterInput(),
+        filter=FilterInput(default_value=FilterInput.default()),
         pageNb=graphene.Int(default_value=1, required=False),
     )
     product = graphene.Field(ProductType, id=graphene.String())
@@ -23,12 +24,12 @@ def resolve_product(self, info, id, **kwargs):
         # print(product)
         return product
 
-    def resolve_Products(self, info, filter={}, pageNb=1, **kwargs):
+    def resolve_Products(self, info, filter, pageNb=1, **kwargs):
         # print("fetching products")
         # print("pagenb :- ",pageNb)
 
         if not info.context.user.is_superuser:
-            filter["status"] = "active"
+            filter.status = "active"
 
         limit = 30
         offset = (pageNb - 1) * limit
@@ -158,13 +159,16 @@ def mutate(self, info, input):
 
 class updateBrand(graphene.Mutation):
     class Arguments:
+        id = graphene.String(required=True)
         input = BrandInput(required=True)
 
     brand = graphene.Field(BrandType)
 
-    def mutate(self, info, input):
-        brand = Brand.objects(id=input.get("id")).first()
+    def mutate(self, info, id, input):
+        brand = Brand.objects(id=id).first()
         brand.update(**input)
+        brand.save()
+        brand.reload()
         return updateBrand(brand=brand)
 
 
@@ -206,14 +210,23 @@ class Arguments:
 
     def mutate(self, info, id, input):
         category = Category.objects(id=id).first()
+        clean_input = clean_category_input(input)
         if category:
-            category.update(**{k: v for k, v in input.items() if v is not None})
+            category.update(**clean_input)
             category.save()
+            category.reload()
             return updateCategory(category=category)
         else:
             return updateCategory(category=None)
 
 
+def clean_category_input(input):
+    copy = {k: v for k, v in input.items() if v is not None}
+    if copy.get("brands"):
+        copy["brands"] = {bson.ObjectId(id) for id in copy["brands"]}
+    return copy
+
+
 class deleteCategory(graphene.Mutation):
     class Arguments:
         id = graphene.String(required=True)
@@ -296,6 +309,10 @@ class Arguments:
         id = graphene.String()
 
     def mutate(root, info, id):
+
+        orders_for_product = Order.objects.filter(product_id=id)
+        if orders_for_product:
+            raise Exception("Orders for this product exist")
         product = Product.objects(id=id).first()
         product.delete()
         return deleteProduct(product=product)
diff --git a/apps/backend/shop/types.py b/apps/backend/shop/types.py
index 47f9780..3136bbc 100644
--- a/apps/backend/shop/types.py
+++ b/apps/backend/shop/types.py
@@ -1,6 +1,7 @@
 from graphene_mongo import MongoengineObjectType
 import graphene
 from shop.models import *
+from mongoengine.errors import DoesNotExist
 
 
 class BrandType(MongoengineObjectType):
@@ -35,6 +36,20 @@ class ProductType(MongoengineObjectType):
     class Meta:
         model = Product
 
+    def resolve_brand(self, info):
+        try:
+            brand = self.brand
+            return brand
+        except DoesNotExist:
+            return Brand(name="Doesnt Exist", logo="")
+
+    def resolve_category(self, info):
+        try:
+            category = self.category
+            return category
+        except DoesNotExist:
+            return Category(name="", image="")
+
 
 class ProductsType(graphene.ObjectType):
     products = graphene.List(ProductType)
diff --git a/apps/frontend/admin/src/apolloClient.js b/apps/frontend/admin/src/apolloClient.js
index 7c0951f..f858b51 100644
--- a/apps/frontend/admin/src/apolloClient.js
+++ b/apps/frontend/admin/src/apolloClient.js
@@ -1,56 +1,47 @@
 /* eslint-disable object-curly-newline */
+import { authState, useRefreshToken } from './composables/useUser'
 import { ApolloLink, createHttpLink, ApolloClient, fromPromise, InMemoryCache, concat } from '@apollo/client/core'
 import { onError } from '@apollo/client/link/error'
 
 // import store from './store'
-import router from './router'
-
-const refreshTokenFlow = async () => {
-  console.log('refreshing ')
-}
+import { useRouter } from 'vue-router'
 
 const authMiddleware = new ApolloLink((operation, forward) => {
-  // add the authorization to the headers
-  //   console.log('auth middleware')
-  //   console.log(store.state.user)
-  //   const token = store.state.user.auth.token
-  //   console.log('JWT', token)
-  //   operation.setContext({
-  //     headers: {
-  //       Authorization: token ? `JWT ${token}` : null,
-  //     },
-  //   })
-
-  console.log('auth middleware')
+  operation.setContext({
+    headers: {
+      Authorization: authState.access_token ? `JWT ${authState.access_token}` : null,
+    },
+  })
 
   return forward(operation)
 })
 
 const errorLink = onError(({ graphQLErrors, operation, forward }) => {
-  console.log('hey eror in request gql')
+  //console.log("hey eror in request gql");
+  const { refreshToken, success } = useRefreshToken()
   if (graphQLErrors) {
-    console.log('gql-errors', graphQLErrors)
-
-    graphQLErrors.forEach(({ message, extensions }) => {
-      console.log(message, extensions)
-
-      switch (message) {
+    //console.log("gql-errors", graphQLErrors);
+    for (let err of graphQLErrors) {
+      //console.log(err.message, err.extensions);
+      switch (err.message) {
         case 'You do not have permission to perform this action':
-        case 'You are not registerd as customer':
-        case 'Signature has expired':
-          console.log('refreshing ')
 
+        case 'Signature has expired':
+          console.log('refreshing ', operation.operationName)
           return fromPromise(
-            refreshTokenFlow().catch(error => {
-              // Handle token refresh errors e.g clear stored tokens, redirect to login
-              console.log('error while refresdhing', error)
-              router.push('/login')
+            refreshToken().then(accessToken => {
+              console.log('token', accessToken)
+              if (!accessToken) {
+                // Handle token refresh errors e.g clear stored tokens, redirect to login
+                console.log('error while refresdhing')
+                window.location.replace('/#/login')
+              }
+              return forward(operation)
             }),
           )
             .filter(value => Boolean(value))
             .flatMap(accessToken => {
               const oldHeaders = operation.getContext().headers
-
               // modify the operation context with a new token
               operation.setContext({
                 headers: {
@@ -60,15 +51,11 @@ const errorLink = onError(({ graphQLErrors, operation, forward }) => {
               })
 
               // retry the request, returning the new observable
-              console.log('forwarding')
-
+              console.log('forwarding', operation)
               return forward(operation)
             })
-
-        default:
-          return null
       }
-    })
+    }
   }
 })
 
@@ -77,7 +64,7 @@ const link = createHttpLink({
   fetch,
   credentials: 'include',
   onError(err) {
-    console.log(err)
+    //console.log(err)
   },
 })
 
diff --git a/apps/frontend/admin/src/components/AppSideBar.vue b/apps/frontend/admin/src/components/AppSideBar.vue
index b088b4b..59c8705 100644
--- a/apps/frontend/admin/src/components/AppSideBar.vue
+++ b/apps/frontend/admin/src/components/AppSideBar.vue
@@ -4,6 +4,7 @@ import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import useNavdrawer from '../composables/useNavdrawer'
 import BaseNavLink from './BaseNavLink.vue'
+import BaseButton from './BaseButton.vue'
 
 const menuItems = {
   home: {
@@ -47,10 +48,10 @@ const menuItems = {
         to: { name: 'categories' },
       },
       brands: {
-        to: { name: 'categories' },
+        to: { name: 'brands' },
       },
       variants: {
-        to: { name: 'categories' },
+        to: { name: 'variants' },
       },
     },
   },
@@ -75,7 +76,7 @@ const activeSubmenu = computed(() => {
 })
 
 const { toggleDrawer, isDrawerOpen } = useNavdrawer()
-console.log('isOpen', isDrawerOpen)
+//console.log('isOpen', isDrawerOpen)
 
 const route = useRoute()
 </script>
@@ -84,7 +85,7 @@ const route = useRoute()
   <transition name="fade" :duration="1000">
     <nav
       v-if="isDrawerOpen"
-      class="gap-4 font-montserrat drawer fixed top-0 bottom-0 w-2/3 bg-white h-auto z-50 md:pt-16 md:z-0 pr-2 md:w-56 border-r-2 shadow-sm md:shadow-none"
+      class="gap-4 font-montserrat drawer fixed top-0 bottom-0 w-2/3 bg-white h-auto z-50 md:pt-20 md:z-0 pr-2 md:w-56 border-r-2 shadow-sm md:shadow-none"
     >
       <div class="text-right px-4 text-xl md:hidden w-full">
         <font-awesome-icon icon="times" @click="toggleDrawer"></font-awesome-icon>
@@ -98,11 +99,12 @@ const route = useRoute()
           </router-link>
         </base-nav-link>
 
-        <div v-show="activeSubmenu == key" class="">
+        <div v-show="activeSubmenu == key" class="flex flex-col">
           <router-link
             v-for="(submenu, key_) in item.submenu"
             :key="key_"
             :to="submenu.to"
+            class="w-full"
             :class="[
               route.name == submenu.to.name
                 ? 'border-l-4  flex bg-cloud bg-opacity-20 border-x-teal-700 font-light  text-teal-700'
diff --git a/apps/frontend/admin/src/components/BaseButtonModal.vue b/apps/frontend/admin/src/components/BaseButtonModal.vue
index baec2f0..a0f1993 100644
--- a/apps/frontend/admin/src/components/BaseButtonModal.vue
+++ b/apps/frontend/admin/src/components/BaseButtonModal.vue
@@ -21,7 +21,7 @@
             leave-from="opacity-100"
             leave-to="opacity-0"
           >
-            <DialogOverlay class="fixed inset-0" />
+            <DialogOverlay class="fixed bg-gray-300 opacity-50 inset-0" />
           </TransitionChild>
 
           <span class="inline-block h-screen align-middle" aria-hidden="true"> &#8203; </span>
@@ -76,7 +76,7 @@ export default {
     },
   },
   setup() {
-    const isOpen = ref(true)
+    const isOpen = ref(false)
 
     return {
       isOpen,
diff --git a/apps/frontend/admin/src/components/BaseDialog.vue b/apps/frontend/admin/src/components/BaseDialog.vue
new file mode 100644
index 0000000..2ed1a62
--- /dev/null
+++ b/apps/frontend/admin/src/components/BaseDialog.vue
@@ -0,0 +1,82 @@
+<template>
+  <TransitionRoot appear :show="modelValue" as="template">
+    <Dialog as="div" @close="closeModal">
+      <div class="fixed inset-0 z-10 overflow-y-auto">
+        <div class="min-h-screen px-4 text-center">
+          <TransitionChild
+            as="template"
+            enter="duration-300 ease-out"
+            enter-from="opacity-0"
+            enter-to="opacity-100"
+            leave="duration-200 ease-in"
+            leave-from="opacity-100"
+            leave-to="opacity-0"
+          >
+            <DialogOverlay class="fixed bg-gray-300 opacity-50 inset-0" />
+          </TransitionChild>
+
+          <span class="inline-block h-screen align-middle" aria-hidden="true"> &#8203; </span>
+
+          <TransitionChild
+            as="template"
+            enter="duration-300 ease-out"
+            enter-from="opacity-0 scale-95"
+            enter-to="opacity-100 scale-100"
+            leave="duration-200 ease-in"
+            leave-from="opacity-100 scale-100"
+            leave-to="opacity-0 scale-95"
+          >
+            <div
+              class="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl"
+            >
+              <DialogTitle as="h3" class="text-lg font-medium leading-6 text-gray-900">
+                {{ title }}
+              </DialogTitle>
+
+              <div @close="closeModal">
+                <slot />
+              </div>
+            </div>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { TransitionRoot, TransitionChild, Dialog, DialogOverlay, DialogTitle } from '@headlessui/vue'
+
+export default {
+  components: {
+    TransitionRoot,
+    TransitionChild,
+    Dialog,
+    DialogOverlay,
+    DialogTitle,
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:modelValue'],
+  setup(_, { emit }) {
+    return {
+      closeModal() {
+        //console.log('closing dialog')
+        emit('update:modelValue', false)
+      },
+      openModal() {
+        emit('update:modelValue', true)
+      },
+    }
+  },
+}
+</script>
diff --git a/apps/frontend/admin/src/components/BaseListItem.vue b/apps/frontend/admin/src/components/BaseListItem.vue
index 2e053c0..839f277 100644
--- a/apps/frontend/admin/src/components/BaseListItem.vue
+++ b/apps/frontend/admin/src/components/BaseListItem.vue
@@ -18,17 +18,16 @@ const props = defineProps({
 })
 
 const selectItem = () => {
-  console.log('emitting')
+  //console.log('emitting')
   selectedValue.value = props.value
 }
 
 const selected = computed(() => {
   if (selectedValue.value instanceof Array) {
     return props.value in selectedValue.value
-  } 
-    
-return selectedValue.value == props.value
-  
+  }
+
+  return selectedValue.value == props.value
 })
 
 const checkbox = ref(true)
diff --git a/apps/frontend/admin/src/components/BaseListItemGroup.vue b/apps/frontend/admin/src/components/BaseListItemGroup.vue
index 4a5ee52..422eca6 100644
--- a/apps/frontend/admin/src/components/BaseListItemGroup.vue
+++ b/apps/frontend/admin/src/components/BaseListItemGroup.vue
@@ -54,7 +54,7 @@ export const BaseList = {
     const selected = computed({
       get: () => props.modelValue,
       set: value => {
-        console.log('set computed', value)
+        //console.log('set computed', value)
         const newValue = props.multiselect ? [...props.modelValue, value] : value
         context.emit('update:modelValue', newValue)
       },
diff --git a/apps/frontend/admin/src/components/BaseMultiselectField.vue b/apps/frontend/admin/src/components/BaseMultiselectField.vue
index 254d45b..5c7947b 100644
--- a/apps/frontend/admin/src/components/BaseMultiselectField.vue
+++ b/apps/frontend/admin/src/components/BaseMultiselectField.vue
@@ -16,6 +16,14 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  placeholder: {
+    type: String,
+    default: 'Select Values',
+  },
+  label: {
+    type: String,
+    default: null,
+  },
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -33,6 +41,10 @@ const selectOption = option => {
 
 <template>
   <div class="w-full flex flex-col items-center h-auto h-max-64">
+    <label v-if="$props.label" class="self-start" :for="$attrs.id ?? 'input'">
+      {{ $props.label }}
+    </label>
+
     <div class="w-full">
       <div class="flex flex-col items-center relative">
         <div class="w-full">
@@ -52,7 +64,7 @@ const selectOption = option => {
                 <font-awesome-icon icon="times" @click="selectOption(selectedOption)"></font-awesome-icon>
               </div>
               <div class="flex-1" @click="active = !active">
-                <p class="text-gray-300 pl-2">Add Values</p>
+                <p class="text-gray-300 pl-2">{{ placeholder }}</p>
               </div>
               <!-- <div class="flex-1">
                 <input
diff --git a/apps/frontend/admin/src/components/BrandCreateModal.vue b/apps/frontend/admin/src/components/BrandCreateModal.vue
new file mode 100644
index 0000000..3741760
--- /dev/null
+++ b/apps/frontend/admin/src/components/BrandCreateModal.vue
@@ -0,0 +1,42 @@
+<script setup>
+import { ref } from 'vue'
+import BrandForm from './BrandForm.vue'
+import BaseDialog from './BaseDialog.vue'
+import BaseButton from './BaseButton.vue'
+import { useMutation } from '@vue/apollo-composable'
+import { createBrand } from 'graphql-client/admin/collections'
+import { getBrands } from 'graphql-client/queries/collections'
+const { mutate: createBrandMutation, loading: creatingBrand, error: creatingBrandError } = useMutation(createBrand)
+
+const isOpen = ref(false)
+
+const input = ref({
+  name: '',
+  logo: '',
+})
+
+const save = () => {
+  createBrandMutation(
+    {
+      input: input.value,
+    },
+    {
+      update: (cache, { data: response }) => {
+        const brand = response.createBrand.brand
+        //console.log('cat', brand)
+        cache.updateQuery({ query: getBrands }, data => ({
+          brands: [...data.brands, brand],
+        }))
+      },
+    },
+  )
+}
+</script>
+
+<template>
+  <base-button @click="isOpen = true"> Create Brand </base-button>
+  <base-dialog title="create brand" v-model="isOpen">
+    <brand-form v-model="input"></brand-form>
+    <base-button @click="save" :loading="creatingBrand"> Save </base-button>
+  </base-dialog>
+</template>
diff --git a/apps/frontend/admin/src/components/BrandDeleteModal.vue b/apps/frontend/admin/src/components/BrandDeleteModal.vue
new file mode 100644
index 0000000..fd9b1d6
--- /dev/null
+++ b/apps/frontend/admin/src/components/BrandDeleteModal.vue
@@ -0,0 +1,45 @@
+<script setup>
+import { ref } from 'vue'
+import BaseDialog from './BaseDialog.vue'
+import BaseButton from './BaseButton.vue'
+import { useMutation } from '@vue/apollo-composable'
+import { deleteBrand } from 'graphql-client/admin/collections'
+
+import { getBrands } from 'graphql-client/queries/collections'
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  brand: { type: Object },
+})
+const emit = defineEmits(['update:modelValue'])
+
+const { loading, error, mutate: deleteBrandMutation } = useMutation(deleteBrand)
+
+const Delete = () => {
+  deleteBrandMutation(
+    {
+      id: props.brand.id,
+    },
+    {
+      update: (cache, { data: { deleteBrand } }) => {
+        const brand = deleteBrand.brand
+        if (brand) {
+          cache.updateQuery({ query: getBrands }, data => ({
+            brands: data.brands.filter(brand_ => brand_.id !== brand.id),
+          }))
+        }
+
+        emit('update:modelValue', false)
+      },
+    },
+  )
+}
+</script>
+
+<template>
+  <base-dialog v-model="modelValue" title="Delete Brand">
+    <p>Are you sure you want to delete Brand {{ brand.name }}</p>
+    <p>You cant undo this action</p>
+
+    <base-button @click="Delete" :loading="loading" danger> Delete </base-button>
+  </base-dialog>
+</template>
diff --git a/apps/frontend/admin/src/components/BrandEditModal.vue b/apps/frontend/admin/src/components/BrandEditModal.vue
new file mode 100644
index 0000000..560f92a
--- /dev/null
+++ b/apps/frontend/admin/src/components/BrandEditModal.vue
@@ -0,0 +1,56 @@
+<script setup>
+import { ref, watchEffect } from 'vue'
+import BrandForm from './BrandForm.vue'
+import BaseDialog from './BaseDialog.vue'
+import BaseButton from './BaseButton.vue'
+import { useMutation } from '@vue/apollo-composable'
+import { updateBrand } from 'graphql-client/admin/collections'
+import { getBrands } from 'graphql-client/queries/collections'
+const props = defineProps({
+  brand: {
+    type: Object,
+    required: true,
+  },
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const input = ref({
+  name: '',
+  logo: '',
+})
+
+const { mutate, loading, error } = useMutation(updateBrand)
+const save = () => {
+  mutate(
+    {
+      id: props.brand.id,
+      input: input.value,
+    },
+    {
+      update: (cache, { data: response }) => {
+        const brand = response.updateBrand.brand
+        if (brand) {
+          cache.updateQuery({ query: getBrands }, data => ({
+            brands: data.brands.map(brand_ => (brand_.id === brand.id ? brand : brand_)),
+          }))
+        }
+      },
+    },
+  )
+}
+
+watchEffect(() => {
+  input.value.name = props.brand.name
+  input.value.logo = props.brand.logo
+})
+</script>
+
+<template>
+  <base-dialog title="update brand" v-model="modelValue">
+    <brand-form v-model="input"></brand-form>
+    <base-button @click="save" :loading="loading"> Save </base-button>
+  </base-dialog>
+</template>
diff --git a/apps/frontend/admin/src/components/BrandForm.vue b/apps/frontend/admin/src/components/BrandForm.vue
new file mode 100644
index 0000000..ce3bd54
--- /dev/null
+++ b/apps/frontend/admin/src/components/BrandForm.vue
@@ -0,0 +1,30 @@
+<script setup>
+import { ref, watchEffect } from 'vue'
+import BaseInput from './BaseInput.vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const input = ref({
+  name: '',
+  logo: '',
+})
+
+watchEffect(() => {
+  input.value = props.modelValue
+  emit('update:modelValue', input.value)
+})
+</script>
+
+<template>
+  <div class="py-3 space-y-3">
+    <base-input placeholder="name" label="name" v-model="input.name"></base-input>
+    <base-input placeholder="logo" label="logo" v-model="input.logo"></base-input>
+  </div>
+</template>
diff --git a/apps/frontend/admin/src/components/CategoryFormModal.vue b/apps/frontend/admin/src/components/CategoryCreateModal.vue
similarity index 67%
rename from apps/frontend/admin/src/components/CategoryFormModal.vue
rename to apps/frontend/admin/src/components/CategoryCreateModal.vue
index 09d861a..c8e1e73 100644
--- a/apps/frontend/admin/src/components/CategoryFormModal.vue
+++ b/apps/frontend/admin/src/components/CategoryCreateModal.vue
@@ -1,16 +1,18 @@
 <script setup>
 import { ref, computed } from 'vue'
+import CategoryForm from './CategoryForm.vue'
 import baseButtonModal from './BaseButtonModal.vue'
 import baseInput from './BaseInput.vue'
 import baseButton from './BaseButton.vue'
 import multiSelect from './BaseMultiselectField.vue'
-import { getBrands } from 'graphql-client/queries/collections'
+import { getBrands, getCategories } from 'graphql-client/queries/collections'
 import { createCategory } from 'graphql-client/admin/collections'
 import { useQuery, useResult, useMutation } from '@vue/apollo-composable'
 
+const props = defineProps({})
+
 const { loading, error, result } = useQuery(getBrands)
 const brands = useResult(result, [], data => data.brands)
-
 const brandNames = computed(() => brands.value.map(brand => brand.name))
 const genders = ['Men', 'Women']
 const {
@@ -32,24 +34,28 @@ defineEmits(['close'])
 const saveCategory = () => {
   let input_copy = { ...input.value }
   input_copy.brands = input_copy.brands.map(name => brands.value.find(brand => brand.name == name).id)
-  console.log(input_copy)
-  categoryMutation({
-    input: input_copy,
-  })
+  //console.log(input_copy)
+  categoryMutation(
+    {
+      input: input_copy,
+    },
+    {
+      update: (cache, { data: response }) => {
+        const category = response.createCategory.category
+        //console.log('cat', category)
+        cache.updateQuery({ query: getCategories }, data => ({
+          categories: [...data.categories, category],
+        }))
+      },
+    },
+  )
 }
 </script>
 
 <template>
   <base-button-modal button-text="add category" title="add categorry">
-    <div class="py-3">
-      {{ input }}
-      {{ brandNames }}
-      <base-input placeholder="name" v-model="input.name"></base-input>
-
-      <textarea class="w-full rounded mt-3" v-model="input.description" placeholder="description"></textarea>
-      <multi-select v-model="input.brands" :options="brandNames"></multi-select>
-      <multi-select v-model="input.genders" :options="genders"> </multi-select>
-      <base-input placeholder="image url" v-model="input.image"></base-input>
+    <div class="py-3 space-y-3">
+      <category-form v-model="input"></category-form>
       <base-button @click="saveCategory" class="w-full" :loading="creatingCategory" :disabled="creatingCategory"
         >Save</base-button
       >
diff --git a/apps/frontend/admin/src/components/CategoryDeleteDialog.vue b/apps/frontend/admin/src/components/CategoryDeleteDialog.vue
new file mode 100644
index 0000000..4078338
--- /dev/null
+++ b/apps/frontend/admin/src/components/CategoryDeleteDialog.vue
@@ -0,0 +1,42 @@
+<script setup>
+import BaseDialog from './BaseDialog.vue'
+import VButton from './BaseButton.vue'
+import { useMutation } from '@vue/apollo-composable'
+import { deleteCategory } from 'graphql-client/admin/collections'
+import { getCategories } from 'graphql-client/queries/collections'
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  category: { type: Object },
+})
+const emit = defineEmits(['update:modelValue'])
+
+const { loading, error, mutate: deleteCategoryMutation } = useMutation(deleteCategory)
+
+const Delete = () => {
+  deleteCategoryMutation(
+    {
+      id: props.category.id,
+    },
+    {
+      update: (cache, { data: { deleteCategory } }) => {
+        if (deleteCategory.success) {
+          cache.updateQuery({ query: getCategories }, data => ({
+            categories: data.categories.filter(category => category.id !== props.category.id),
+          }))
+        }
+
+        emit('update:modelValue', false)
+      },
+    },
+  )
+}
+</script>
+
+<template>
+  <base-dialog v-model="modelValue" title="Delete category">
+    <p>Are you sure you want to delete category {{ category.name }}</p>
+    <p>You cant undo this action</p>
+
+    <v-button @click="Delete" :loading="loading" danger> Delete </v-button>
+  </base-dialog>
+</template>
diff --git a/apps/frontend/admin/src/components/CategoryEditModal.vue b/apps/frontend/admin/src/components/CategoryEditModal.vue
new file mode 100644
index 0000000..dea5a62
--- /dev/null
+++ b/apps/frontend/admin/src/components/CategoryEditModal.vue
@@ -0,0 +1,70 @@
+<script setup>
+import { ref, computed, watchEffect } from 'vue'
+import CategoryForm from './CategoryForm.vue'
+import baseButtonModal from './BaseButtonModal.vue'
+import baseButton from './BaseButton.vue'
+import { getBrands } from 'graphql-client/queries/collections'
+import { updateCategory } from 'graphql-client/admin/collections'
+
+import { useQuery, useResult, useMutation } from '@vue/apollo-composable'
+
+const props = defineProps({
+  category: {
+    type: Object,
+    required: true,
+  },
+})
+
+const { loading, error, result } = useQuery(getBrands)
+const brands = useResult(result, [], data => data.brands)
+const brandNames = computed(() => brands.value.map(brand => brand.name))
+const genders = ['Men', 'Women']
+const {
+  mutate: categoryMutation,
+  loading: updatingCategory,
+  error: updatingCategoryError,
+} = useMutation(updateCategory)
+
+const input = ref({
+  name: '',
+  description: '',
+  brands: [],
+  genders: [],
+  image: '',
+})
+
+watchEffect(() => {
+  if (props.category !== null) {
+    const category = props.category
+    input.value.name = category.name
+    input.value.description = category.description
+    input.value.image = category.image
+    input.value.brands = category.brands.map(brand => brand.name)
+    input.value.genders = category.genders
+  }
+})
+
+defineEmits(['close'])
+
+const saveCategory = () => {
+  let input_copy = Object.assign({}, input.value)
+  input_copy.brands = input_copy.brands.map(name => brands.value.find(brand => brand.name == name).id)
+  //console.log(input_copy)
+  categoryMutation({
+    id: props.category.id,
+    input: input_copy,
+  })
+}
+</script>
+
+<template>
+  <base-button-modal button-text="edit" title="edit categorry">
+    <div class="py-3 space-y-3">
+      {{ input }}
+      <category-form v-model="input"></category-form>
+      <base-button @click="saveCategory" class="w-full" :loading="updatingCategory" :disabled="updatingCategory"
+        >Save</base-button
+      >
+    </div>
+  </base-button-modal>
+</template>
diff --git a/apps/frontend/admin/src/components/CategoryForm.vue b/apps/frontend/admin/src/components/CategoryForm.vue
new file mode 100644
index 0000000..6d29edd
--- /dev/null
+++ b/apps/frontend/admin/src/components/CategoryForm.vue
@@ -0,0 +1,56 @@
+<script setup>
+import { ref, computed, watchEffect } from 'vue'
+import baseButtonModal from './BaseButtonModal.vue'
+import baseInput from './BaseInput.vue'
+import baseButton from './BaseButton.vue'
+import multiSelect from './BaseMultiselectField.vue'
+import { getBrands } from 'graphql-client/queries/collections'
+import { createCategory } from 'graphql-client/admin/collections'
+import { useQuery, useResult, useMutation } from '@vue/apollo-composable'
+
+const props = defineProps({
+  modelValue: { type: Object },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const { loading, error, result } = useQuery(getBrands)
+const brands = useResult(result, [], data => data.brands)
+const brandNames = computed(() => brands.value.map(brand => brand.name))
+const genders = ['Men', 'Women']
+
+const input = ref({
+  name: '',
+  description: '',
+  brands: [],
+  genders: [],
+  image: '',
+})
+
+watchEffect(() => {
+  input.value = props.modelValue
+  emit('update:modelValue', input.value)
+})
+</script>
+
+<template>
+  <div>
+    <div class="py-3 space-y-3">
+      <base-input placeholder="name" label="name" v-model="input.name"></base-input>
+
+      <div>
+        <label class="" for="description"> Description </label>
+        <textarea class="w-full rounded" v-model="input.description" placeholder="description"></textarea>
+      </div>
+      <multi-select
+        label="brands"
+        placeholder="select brands"
+        v-model="input.brands"
+        :options="brandNames"
+      ></multi-select>
+      <multi-select label="genders" placeholder="select genders" v-model="input.genders" :options="genders">
+      </multi-select>
+      <base-input label="image url " class="" placeholder="image url" v-model="input.image"></base-input>
+    </div>
+  </div>
+</template>
diff --git a/apps/frontend/admin/src/components/CustomersList.vue b/apps/frontend/admin/src/components/CustomersList.vue
index 2c1b442..99716d2 100644
--- a/apps/frontend/admin/src/components/CustomersList.vue
+++ b/apps/frontend/admin/src/components/CustomersList.vue
@@ -27,7 +27,7 @@
           />
         </div>
         <!-- <div class="flex items-center gap-3">
-          <sort-dropdown-menu items="['name']" @sort="console.log('ss')"></sort-dropdown-menu>
+          <sort-dropdown-menu items="['name']" @sort="//console.log('ss')"></sort-dropdown-menu>
           <button class="border border-gray-500 py-2 px-3 w-full text-sm" @click="toggleDrawer()">More Filters</button>
         </div> -->
       </div>
diff --git a/apps/frontend/admin/src/components/DashboardEarningMonth.vue b/apps/frontend/admin/src/components/DashboardEarningMonth.vue
index 614fdf7..2edfd5e 100644
--- a/apps/frontend/admin/src/components/DashboardEarningMonth.vue
+++ b/apps/frontend/admin/src/components/DashboardEarningMonth.vue
@@ -12,8 +12,8 @@ const totalEarnings = computed(() => {
 })
 
 watchEffect(() => {
-  // console.log(totalEarnings.value)
-  console.log(earningsPerDay.value)
+  // //console.log(totalEarnings.value)
+  //console.log(earningsPerDay.value)
 })
 
 const range = (start, end) => Array.from({ length: end - start }, (_, i) => i + start)
diff --git a/apps/frontend/admin/src/components/ProductCreateFormOptions.vue b/apps/frontend/admin/src/components/ProductCreateFormOptions.vue
index e4af0e3..f5cf418 100644
--- a/apps/frontend/admin/src/components/ProductCreateFormOptions.vue
+++ b/apps/frontend/admin/src/components/ProductCreateFormOptions.vue
@@ -9,7 +9,7 @@ import VInput from './BaseInput.vue'
 import ProductOptionForm from './ProductOptionForm.vue'
 
 const listNotEmpty = value => {
-  console.log('listNotEmpty', value.length)
+  //console.log('listNotEmpty', value.length)
 
   return value.length > 0
 }
@@ -30,7 +30,7 @@ const emit = defineEmits(['update:modelValue'])
 const selectedOptions = computed({
   get: () => props.modelValue,
   set: value => {
-    console.log('setting selectedOptions', value)
+    //console.log('setting selectedOptions', value)
     emit('update:modelValue', value)
   },
 })
@@ -92,7 +92,7 @@ const saveOption = async () => {
   const isInvalid = addValidator.value.$invalid
 
   if (!isInvalid) {
-    console.log('onDone')
+    //console.log('onDone')
     selectedOptions.value[addOptionData.option] = addOptionData.variants
     addOptionData.option = Object.keys(cleanOptions.value)[0]
     addOptionData.variants = []
diff --git a/apps/frontend/admin/src/components/ProductCreateVariantsTableRow.vue b/apps/frontend/admin/src/components/ProductCreateVariantsTableRow.vue
index 43613fe..db6476d 100644
--- a/apps/frontend/admin/src/components/ProductCreateVariantsTableRow.vue
+++ b/apps/frontend/admin/src/components/ProductCreateVariantsTableRow.vue
@@ -65,7 +65,7 @@ const rules = {
 const { addValidator } = useVariantsValidator()
 const v$ = useVuelidate(rules, variationData)
 addValidator(v$)
-console.log(v$)
+//console.log(v$)
 </script>
 
 <template>
diff --git a/apps/frontend/admin/src/components/ProductImageUpload.vue b/apps/frontend/admin/src/components/ProductImageUpload.vue
index 0368331..c01e052 100644
--- a/apps/frontend/admin/src/components/ProductImageUpload.vue
+++ b/apps/frontend/admin/src/components/ProductImageUpload.vue
@@ -30,7 +30,7 @@ watchEffect(() => {
 })
 
 onMounted(() => {
-  console.log('mounted')
+  //console.log('mounted')
   includeScript('widget.cloudinary.com/v2.0/global/all.js')
 })
 
@@ -40,7 +40,7 @@ const openUploadModel = () => {
       { cloud_name: 'dh3azc5sk', upload_preset: 'e4ftjcge', return_delete_token: true },
       (error, result) => {
         if (!error && result && result.event === 'success') {
-          console.log('Done uploading..: ', result.info)
+          //console.log('Done uploading..: ', result.info)
           const url = result.info.secure_url
           emit('update:modelValue', [...props.modelValue, url])
           uploadedImages.value.push(result.info)
@@ -51,7 +51,7 @@ const openUploadModel = () => {
 }
 
 const deleteImage = image => {
-  console.log('deleting image', image)
+  //console.log('deleting image', image)
   const index = uploadedImages.value.findIndex(i => i.public_id === image.public_id)
   uploadedImages.value.splice(index, 1)
   emit(
diff --git a/apps/frontend/admin/src/components/ProductOptionForm.vue b/apps/frontend/admin/src/components/ProductOptionForm.vue
index ce7b5f7..3f4dcd3 100644
--- a/apps/frontend/admin/src/components/ProductOptionForm.vue
+++ b/apps/frontend/admin/src/components/ProductOptionForm.vue
@@ -21,10 +21,10 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue'])
 
 watch(props.modelValue, (oldVal, newVal) => {
-  console.log('watch', oldVal, newVal)
+  //console.log('watch', oldVal, newVal)
 
   if (oldVal.option !== newVal.option) {
-    console.log('opdating')
+    //console.log('opdating')
 
     const value = { ...props.modelValue, variants: [] }
     emit('update:modelValue', value)
diff --git a/apps/frontend/admin/src/components/TheNavBar.vue b/apps/frontend/admin/src/components/TheNavBar.vue
index fc6563c..f112d55 100644
--- a/apps/frontend/admin/src/components/TheNavBar.vue
+++ b/apps/frontend/admin/src/components/TheNavBar.vue
@@ -1,14 +1,19 @@
 <script setup>
 import { FontAwesomeIcon as fIcon } from '@fortawesome/vue-fontawesome'
 import useNavdrawer from '../composables/useNavdrawer'
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import BaseButton from './BaseButton.vue'
+import { useLogout, useUser } from '../composables/useUser'
 
+const { logout, loading: loggingOut } = useLogout()
+const { user } = useUser()
 const { toggleDrawer } = useNavdrawer()
 </script>
 
 <template>
   <!-- start navbar -->
   <div
-    class="fixed w-screen z-10 flex flex-row flex-wrap items-center justify-between bg-white p-3 border-b border-gray-300"
+    class="fixed w-screen z-10 flex flex-row flex-wrap items-center justify-between bg-white p-3 px-6 border-b border-gray-300"
   >
     <!-- logo -->
     <div class="w-56 flex flex-row items-center">
@@ -21,6 +26,30 @@ const { toggleDrawer } = useNavdrawer()
         <span class="capitalize font-medium text-lg text-gray-600 font-montserrat"> Admin</span>
       </div>
     </div>
+
+    <div class="">
+      <Popover v-slot="{ open }" class="relative">
+        <PopoverButton
+          :class="open ? '' : 'text-opacity-90'"
+          class="bg-cloud text-white font-medium py-2 px-4 rounded-lg"
+        >
+          <span> {{ user.username }}</span>
+        </PopoverButton>
+
+        <transition
+          enter-active-class="transition duration-200 ease-out"
+          enter-from-class="translate-y-1 opacity-0"
+          enter-to-class="translate-y-0 opacity-100"
+          leave-active-class="transition duration-150 ease-in"
+          leave-from-class="translate-y-0 opacity-100"
+          leave-to-class="translate-y-1 opacity-0"
+        >
+          <PopoverPanel class="absolute z-10 w-40 mt-5 right-0 px-3 rounded py-2 bg-white shadow-lg">
+            <BaseButton base class="w-full bg-mint" @click="logout" :loading="loggingOut"> logout </BaseButton>
+          </PopoverPanel>
+        </transition>
+      </Popover>
+    </div>
   </div>
 </template>
 
diff --git a/apps/frontend/admin/src/components/VariantCreateModal.vue b/apps/frontend/admin/src/components/VariantCreateModal.vue
new file mode 100644
index 0000000..8e22ed5
--- /dev/null
+++ b/apps/frontend/admin/src/components/VariantCreateModal.vue
@@ -0,0 +1,48 @@
+<script setup>
+import { ref } from 'vue'
+import VariantForm from './VariantForm.vue'
+import BaseDialog from './BaseDialog.vue'
+import BaseButton from './BaseButton.vue'
+import { useMutation } from '@vue/apollo-composable'
+import { createVariant } from 'graphql-client/admin/collections'
+import { getVariants } from 'graphql-client/queries/collections'
+const {
+  mutate: createVariantMutation,
+  loading: creatingVariant,
+  error: creatingVariantError,
+} = useMutation(createVariant)
+
+const isOpen = ref(false)
+
+const input = ref({
+  name: '',
+  value: '',
+})
+
+const save = () => {
+  createVariantMutation(
+    {
+      input: input.value,
+    },
+    {
+      update: (cache, { data: response }) => {
+        const variant = response.createVariant.variant
+        //console.log('cat', brand)
+        cache.updateQuery({ query: getVariants }, data => ({
+          variants: [...data.variants, variant],
+        }))
+
+        isOpen.value = false
+      },
+    },
+  )
+}
+</script>
+
+<template>
+  <base-button @click="isOpen = true"> Add Variant </base-button>
+  <base-dialog title="create variant" v-model="isOpen">
+    <variant-form v-model="input"></variant-form>
+    <base-button @click="save" :loading="creatingVariant"> Save </base-button>
+  </base-dialog>
+</template>
diff --git a/apps/frontend/admin/src/components/VariantDeleteModal.vue b/apps/frontend/admin/src/components/VariantDeleteModal.vue
new file mode 100644
index 0000000..63e8f90
--- /dev/null
+++ b/apps/frontend/admin/src/components/VariantDeleteModal.vue
@@ -0,0 +1,45 @@
+<script setup>
+import { ref } from 'vue'
+import BaseDialog from './BaseDialog.vue'
+import BaseButton from './BaseButton.vue'
+import { useMutation } from '@vue/apollo-composable'
+import { deleteVariant } from 'graphql-client/admin/collections'
+
+import { getVariants } from 'graphql-client/queries/collections'
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  variant: { type: Object },
+})
+const emit = defineEmits(['update:modelValue'])
+
+const { loading, error, mutate } = useMutation(deleteVariant)
+
+const Delete = () => {
+  mutate(
+    {
+      id: props.variant.id,
+    },
+    {
+      update: (cache, { data: { deleteVariant } }) => {
+        const variant = deleteVariant.variant
+        if (variant) {
+          cache.updateQuery({ query: getVariants }, data => ({
+            variants: data.variants.filter(varaint_ => varaint_.id !== variant.id),
+          }))
+        }
+
+        emit('update:modelValue', false)
+      },
+    },
+  )
+}
+</script>
+
+<template>
+  <base-dialog v-model="modelValue" title="Delete Variant">
+    <p>Are you sure you want to delete Variant {{ variant.name }} : {{ variant.value }}</p>
+    <p>You cant undo this action</p>
+
+    <base-button @click="Delete" :loading="loading" danger> Delete </base-button>
+  </base-dialog>
+</template>
diff --git a/apps/frontend/admin/src/components/VariantEditModal.vue b/apps/frontend/admin/src/components/VariantEditModal.vue
new file mode 100644
index 0000000..d2f8670
--- /dev/null
+++ b/apps/frontend/admin/src/components/VariantEditModal.vue
@@ -0,0 +1,67 @@
+<script setup>
+import { ref, watchEffect } from 'vue'
+import VariantForm from './VariantForm.vue'
+import BaseDialog from './BaseDialog.vue'
+import BaseButton from './BaseButton.vue'
+import { useMutation } from '@vue/apollo-composable'
+import { updateVariant } from 'graphql-client/admin/collections'
+import { getVariants } from 'graphql-client/queries/collections'
+const props = defineProps({
+  variant: {
+    type: Object,
+    required: true,
+  },
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const input = ref({
+  name: '',
+  value: '',
+})
+
+const { mutate, loading, error, onDone } = useMutation(updateVariant)
+
+onDone(() => {
+  if (error.value === null) {
+    emit('update:modelValue', false)
+  }
+})
+
+const save = () => {
+  mutate(
+    {
+      id: props.variant.id,
+      input: input.value,
+    },
+
+    // {
+    //   update: (cache, { data: response }) => {
+    //     console.log(response)
+    //     const variant = response.updateVariant.variant
+    //     if (variant) {
+    //       cache.updateQuery({ query: getVariants }, data => ({
+    //         variants: data.variants.map(variant_ => (variant_.id === variant.id ? variant : variant_)),
+    //       }))
+    //     }
+    //   },
+    // },
+  )
+}
+
+watchEffect(() => {
+  input.value.name = props.variant.name
+  input.value.value = props.variant.value
+})
+</script>
+
+<template>
+  <base-dialog title="update variant" v-model="modelValue">
+    <variant-form v-model="input"></variant-form>
+    <base-button @click="save" :loading="loading"> Save </base-button>
+  </base-dialog>
+</template>
diff --git a/apps/frontend/admin/src/components/VariantForm.vue b/apps/frontend/admin/src/components/VariantForm.vue
new file mode 100644
index 0000000..c7d71d9
--- /dev/null
+++ b/apps/frontend/admin/src/components/VariantForm.vue
@@ -0,0 +1,30 @@
+<script setup>
+import { ref, watchEffect } from 'vue'
+import BaseInput from './BaseInput.vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const input = ref({
+  name: '',
+  value: '',
+})
+
+watchEffect(() => {
+  input.value = props.modelValue
+  emit('update:modelValue', input.value)
+})
+</script>
+
+<template>
+  <div class="py-3 space-y-3">
+    <base-input placeholder="name" label="name" v-model="input.name"></base-input>
+    <base-input placeholder="value" label="value" v-model="input.value"></base-input>
+  </div>
+</template>
diff --git a/apps/frontend/admin/src/composables/useCustomers.js b/apps/frontend/admin/src/composables/useCustomers.js
index 94fb638..be01ea3 100644
--- a/apps/frontend/admin/src/composables/useCustomers.js
+++ b/apps/frontend/admin/src/composables/useCustomers.js
@@ -42,7 +42,7 @@ export default () => {
   }
 
   const resetFilters = () => {
-    console.log('resetFilters')
+    //console.log('resetFilters')
     Object.keys(customerFilters).forEach(key => {
       customerFilters[key] = defaultFilters[key]
     })
diff --git a/apps/frontend/admin/src/composables/useDashboard.js b/apps/frontend/admin/src/composables/useDashboard.js
index 4d4d68a..edfa68c 100644
--- a/apps/frontend/admin/src/composables/useDashboard.js
+++ b/apps/frontend/admin/src/composables/useDashboard.js
@@ -95,10 +95,10 @@ export const useSalesForMonths = (startDate, endDate) => {
     if (ordersTheseMonths.value) {
       ordersTheseMonths.value.forEach(({ node }) => {
         const date = new Date(node.createdAt)
-        console.log('hello')
+        //console.log('hello')
         const month = date.getMonth()
         const year = date.getFullYear()
-        console.log('month', month)
+        //console.log('month', month)
         const monthIndex = months.findIndex(m => m.month === month && m.year === year)
         if (monthIndex === -1) {
           months.push({ month, year })
diff --git a/apps/frontend/admin/src/composables/useFilters.js b/apps/frontend/admin/src/composables/useFilters.js
index 34abbae..555e15d 100644
--- a/apps/frontend/admin/src/composables/useFilters.js
+++ b/apps/frontend/admin/src/composables/useFilters.js
@@ -44,7 +44,7 @@ const useFilters = () => {
   }
 
   const setSortBy = sortBy => {
-    console.log('setting', sortBy)
+    //console.log('setting', sortBy)
     filterState.value.filterInput.sortBy = sortBy
   }
 
diff --git a/apps/frontend/admin/src/composables/useNavdrawer.js b/apps/frontend/admin/src/composables/useNavdrawer.js
index 54d776e..0ed9ecb 100644
--- a/apps/frontend/admin/src/composables/useNavdrawer.js
+++ b/apps/frontend/admin/src/composables/useNavdrawer.js
@@ -12,9 +12,9 @@ export default isOpen => {
     return open.value
   })
   function toggleDrawer() {
-    console.log('toggke', open.value)
+    //console.log('toggke', open.value)
     open.value = !open.value
-    console.log('toggke', open.value)
+    //console.log('toggke', open.value)
   }
 
   return { isDrawerOpen, toggleDrawer, open }
diff --git a/apps/frontend/admin/src/composables/useOrders.js b/apps/frontend/admin/src/composables/useOrders.js
index df29915..3bf46da 100644
--- a/apps/frontend/admin/src/composables/useOrders.js
+++ b/apps/frontend/admin/src/composables/useOrders.js
@@ -58,7 +58,7 @@ export default () => {
   }
 
   const resetFilters = () => {
-    console.log('resetFilters')
+    //console.log('resetFilters')
     Object.keys(ordersFilter).forEach(key => {
       ordersFilter[key] = defaultFilters[key]
     })
@@ -69,7 +69,7 @@ export default () => {
   }
 
   const pageInfo = computed(() => {
-    console.log(totalItems.value)
+    //console.log(totalItems.value)
     const totalPages = Math.ceil(totalItems.value / ordersFilter.first)
     const currentPage = Math.floor((ordersFilter.offset + ordersFilter.first) / ordersFilter.first)
 
diff --git a/apps/frontend/admin/src/composables/useProducts.js b/apps/frontend/admin/src/composables/useProducts.js
index 94b1041..c344853 100644
--- a/apps/frontend/admin/src/composables/useProducts.js
+++ b/apps/frontend/admin/src/composables/useProducts.js
@@ -29,7 +29,7 @@ export default () => {
   })
 
   const loadPage = page => {
-    console.log('loadinf', page)
+    //console.log('loadinf', page)
     pageNo.value = page
   }
 
diff --git a/apps/frontend/admin/src/composables/useUser.js b/apps/frontend/admin/src/composables/useUser.js
new file mode 100644
index 0000000..65b54fb
--- /dev/null
+++ b/apps/frontend/admin/src/composables/useUser.js
@@ -0,0 +1,144 @@
+import { ref, reactive, computed, readonly } from 'vue'
+import { useMutation, useResult, useQuery } from '@vue/apollo-composable'
+import { ME_QUERY } from 'graphql-client/queries/auth'
+import { LOGIN_EMAIL, REFRESH_TOKEN, REVOKE_TOKEN } from 'graphql-client/mutations/auth'
+import { parseJwt } from 'utils'
+import { useRouter } from 'vue-router'
+
+export const authState = reactive({
+  access_token: null,
+  refresh_token: localStorage.getItem('Zivero_refresh_token') || null,
+  isLoggedIn: computed(() => !!authState.access_token),
+  expires_at: null,
+})
+
+const getTokenExpirationDate = token => {
+  const decoded = parseJwt(token)
+  // console.log('decoded', decoded)
+  if (decoded.exp === undefined) return null
+  const date = new Date(0)
+  date.setUTCSeconds(decoded.exp)
+  return date
+}
+
+export const refreshAutomatically = () => {
+  const token = authState.refresh_token
+  if (!token) return
+  const date = getTokenExpirationDate(token)
+  if (!date) return
+  const now = new Date()
+  if (now.getTime() > date.getTime()) {
+    const { refreshToken } = useRefreshToken()
+    return refreshToken()
+  }
+}
+
+export const useLogin = () => {
+  const { loading, error, mutate, onDone } = useMutation(LOGIN_EMAIL)
+  const login_success = ref(false)
+  const login_message = ref('')
+  onDone(({ data }) => {
+    if (data.tokenAuth.token) {
+      console.log('login success', data)
+      authState.access_token = data.tokenAuth.token
+      authState.refresh_token = data.tokenAuth.refreshToken
+      authState.expires_at = getTokenExpirationDate(data.tokenAuth.token)
+      localStorage.setItem('Zivero_refresh_token', data.tokenAuth.refreshToken)
+      login_success.value = true
+      login_message.value = 'Login Successful'
+
+      setInterval(refreshAutomatically, 60000)
+    } else {
+      login_message.value = 'Login Failed Please Check Your Credentials'
+    }
+  })
+
+  const loginWithEmail = async ({ email, password }) => {
+    console.log('loginWithEmail', email, password)
+    await mutate({
+      email,
+      password,
+    })
+
+    return login_success.value
+  }
+
+  return {
+    loading,
+    error,
+    login_success,
+    login_message,
+    loginWithEmail,
+  }
+}
+
+export const useUser = () => {
+  const { loading, error, result } = useQuery(ME_QUERY)
+
+  const user = useResult(result, {}, data => data.me)
+
+  return {
+    loading,
+    error,
+    user,
+    authState: readonly(authState),
+  }
+}
+
+export const useLogout = () => {
+  console.log('useLogout')
+  const { loading, error, mutate } = useMutation(REVOKE_TOKEN)
+  const router = useRouter()
+  console.log('auth', authState)
+
+  const logout = async () => {
+    console.log('logout')
+    console.log('auth', authState.refresh_token)
+    await mutate({
+      refreshtoken: authState.refresh_token,
+    })
+
+    authState.access_token = null
+    authState.refresh_token = null
+    localStorage.removeItem('Zivero_refresh_token')
+    router.push({ name: 'login' })
+  }
+
+  return {
+    loading,
+    error,
+    logout,
+  }
+}
+
+export const useRefreshToken = () => {
+  const { loading, error, mutate, onDone } = useMutation(REFRESH_TOKEN)
+  const success = ref(false)
+  onDone(({ data }) => {
+    if (data.refreshToken.token) {
+      authState.access_token = data.refreshToken.token
+      authState.refresh_token = data.refreshToken.refreshToken
+      localStorage.setItem('Zivero_refresh_token', data.refreshToken.refreshToken)
+      success.value = true
+      authState.expires_at = getTokenExpirationDate(data.refreshToken.token)
+    }
+  })
+
+  const refreshToken = async () => {
+    if (authState.refresh_token == null) {
+      return
+    }
+    await mutate({
+      refreshToken: authState.refresh_token,
+    })
+
+    return authState.access_token
+  }
+
+  return {
+    loading,
+    error,
+    refreshToken,
+    success,
+  }
+}
diff --git a/apps/frontend/admin/src/layouts/WithSideBar.vue b/apps/frontend/admin/src/layouts/WithSideBar.vue
index e0eb0db..6603009 100644
--- a/apps/frontend/admin/src/layouts/WithSideBar.vue
+++ b/apps/frontend/admin/src/layouts/WithSideBar.vue
@@ -7,7 +7,7 @@
       <side-bar class=""></side-bar>
       <!-- Sidebar ends -->
       <!-- Remove class [ h-64 ] when adding a card block -->
-      <div class="bg-gray-100 md:ml-56 md:py-16 px-2 md:px-6 m-0 w-full h-full">
+      <div class="bg-gray-100 md:ml-56 md:py-20 @click='logout' :loading='loggingOut' px-2 md:px-6 m-0 w-full h-full">
         <!-- Remove class [ border-dashed border-2 border-gray-300 ] to remove dotted border -->
         <div class="w-full min-h-screen h-full">
           <slot />
diff --git a/apps/frontend/admin/src/main.js b/apps/frontend/admin/src/main.js
index 1f76ea0..63aca30 100644
--- a/apps/frontend/admin/src/main.js
+++ b/apps/frontend/admin/src/main.js
@@ -1,6 +1,6 @@
 /* eslint-disable object-curly-newline */
 import { createApp, provide, h } from 'vue'
-import { DefaultApolloClient, ApolloClients } from '@vue/apollo-composable'
+import { DefaultApolloClient, provideApolloClient, ApolloClients } from '@vue/apollo-composable'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { Chart, LineController, DoughnutController, ArcElement, Tooltip, registerables } from 'chart.js'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -12,19 +12,22 @@ import './css/app.sass'
 import store from './store'
 import router from './router'
 
-console.log(apolloClient)
+//console.log(apolloClient)
 Chart.register(DoughnutController, ArcElement, Tooltip, LineController, ...registerables)
 Chart.defaults.maintainAspectRatio = false
 library.add(...icons)
+provideApolloClient(apolloClient)
+
 const app = createApp({
   setup() {
-    provide(ApolloClients, {
-      default: apolloClient,
-    })
+    // provide(ApolloClients, {
+    //   default: apolloClient,
+    // })
   },
 
   render: () => h(App),
 })
+
 app.component('FontAwesomeIcon', FontAwesomeIcon)
 app.use(store)
 app.use(router)
diff --git a/apps/frontend/admin/src/plugins/fontAwesome.js b/apps/frontend/admin/src/plugins/fontAwesome.js
index f7c1ac4..21b5f18 100644
--- a/apps/frontend/admin/src/plugins/fontAwesome.js
+++ b/apps/frontend/admin/src/plugins/fontAwesome.js
@@ -26,9 +26,11 @@ import {
   faPlus,
   faCheck,
   faSort,
+  faTrash,
 } from '@fortawesome/free-solid-svg-icons'
 
 export default [
+  faTrash,
   faShoppingCart,
   faDollarSign,
   faShoppingBag,
diff --git a/apps/frontend/admin/src/router/index.js b/apps/frontend/admin/src/router/index.js
index f92e151..47ef958 100644
--- a/apps/frontend/admin/src/router/index.js
+++ b/apps/frontend/admin/src/router/index.js
@@ -46,7 +46,12 @@ const routes = [
     name: 'collections',
     component: () => import('../views/SideBarView.vue'),
 
-    children: [{ path: '', name: 'categories', component: () => import('../views/Categories.vue') }],
+    children: [
+      { path: '', name: 'categories', component: () => import('../views/Categories.vue') },
+      { path: 'brands', name: 'brands', component: () => import('../views/Brands.vue') },
+
+      { path: 'variants', name: 'variants', component: () => import('../views/Variants.vue') },
+    ],
   },
 
   {
@@ -56,6 +61,12 @@ const routes = [
 
     children: [{ path: '', name: 'customers-all', component: () => import('../views/CustomersAll.vue') }],
   },
+
+  // {
+  //   path: '/auth',
+  //   children: [{ path: 'login', name: 'login', component: () => import('../views/Login.vue') }],
+  // },
+  { path: '/login', name: 'login', component: () => import('../views/Login.vue') },
 ]
 
 const router = createRouter({
diff --git a/apps/frontend/admin/src/views/Brands.vue b/apps/frontend/admin/src/views/Brands.vue
new file mode 100644
index 0000000..b423e27
--- /dev/null
+++ b/apps/frontend/admin/src/views/Brands.vue
@@ -0,0 +1,89 @@
+<script setup>
+import { ref } from 'vue'
+import VButton from '../components/BaseButton.vue'
+import { useQuery, useResult } from '@vue/apollo-composable'
+import { getBrands } from 'graphql-client/queries/collections'
+
+import BrandCreate from '../components/BrandCreateModal.vue'
+import BrandEditModal from '../components/BrandEditModal.vue'
+import BrandDeleteModal from '../components/BrandDeleteModal.vue'
+const { loading, error, result } = useQuery(getBrands)
+const brands = useResult(result, [], data => data.brands)
+
+const deleteDialog = ref(false)
+const brandToDelete = ref('')
+const editDialog = ref(false)
+const brandToEdit = ref('')
+
+const deleteBrand = brand => {
+  brandToDelete.value = brand
+  deleteDialog.value = true
+}
+
+const editBrand = brand => {
+  brandToEdit.value = brand
+  editDialog.value = true
+}
+</script>
+
+<template>
+  <brand-delete-modal :brand="brandToDelete" v-model="deleteDialog"> </brand-delete-modal>
+  <brand-edit-modal :brand="brandToEdit" v-model="editDialog"></brand-edit-modal>
+  <div>
+    <!-- header -->
+    <div class="flex justify-between my-4 items-center">
+      <span class="text-lg font-semibold font-montserrat text-black">Brands</span>
+      <div class="flex items-center text-gray-600">
+        <brand-create></brand-create>
+      </div>
+    </div>
+    <!-- table -->
+    <div class="flex flex-col">
+      <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+        <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+          <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+            <table class="min-w-full divide-y divide-gray-200">
+              <thead class="bg-gray-50">
+                <tr>
+                  <th
+                    scope="col"
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                  >
+                    name
+                  </th>
+                  <th></th>
+                  <!-- <th scope="col" class="relative px-6 py-3">
+                  <span class="sr-only">Edit</span>
+                </th> -->
+                </tr>
+              </thead>
+              <tbody class="bg-white divide-y divide-gray-200">
+                <tr v-for="brand in brands" :key="brand.id" class="cursor-pointer">
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="h-auto max-h-16 rounded-md w-16 mr-1 overflow-hidden bg-red-400">
+                        <img :src="brand.logo" class="object-cover rounded-md shadow-sm" alt="" />
+                      </div>
+                      <div>
+                        <div class="text-sm text-gray-600 font-semibold font-montserrat">#{{ brand.id }}</div>
+                        <div class="text-sm text-gray-600 font-medium font-montserrat">{{ brand.name }}</div>
+                      </div>
+                    </div>
+                  </td>
+                  <td>
+                    <div class="flex gap-3">
+                      <v-button @click="deleteBrand(brand)" base class="text-red-400">
+                        <font-awesome-icon icon="trash"></font-awesome-icon
+                      ></v-button>
+                      <v-button @click="editBrand(brand)" secondary> Edit</v-button>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/frontend/admin/src/views/Categories.vue b/apps/frontend/admin/src/views/Categories.vue
index 13b336f..8ef06e6 100644
--- a/apps/frontend/admin/src/views/Categories.vue
+++ b/apps/frontend/admin/src/views/Categories.vue
@@ -1,13 +1,26 @@
 <script setup>
+import { ref } from 'vue'
 import VButton from '../components/BaseButton.vue'
 import { useQuery, useResult } from '@vue/apollo-composable'
 import { getCategories } from 'graphql-client/queries/collections'
-import addCategory from '../components/CategoryFormModal.vue'
+import addCategory from '../components/CategoryCreateModal.vue'
+import CategoryEditModal from '../components/CategoryEditModal.vue'
+import CategoryDeleteDialog from '../components/CategoryDeleteDialog.vue'
 const { loading, error, result } = useQuery(getCategories)
 const categories = useResult(result, [], data => data.categories)
+
+const deleteDialog = ref(false)
+const categoryToDelete = ref('')
+
+const deleteCategory = id => {
+  categoryToDelete.value = id
+  deleteDialog.value = true
+}
 </script>
 
 <template>
+  <category-delete-dialog :category="categoryToDelete" v-model="deleteDialog"></category-delete-dialog>
+
   <div>
     <!-- header -->
     <div class="flex justify-between my-4 items-center">
@@ -50,6 +63,7 @@ const categories = useResult(result, [], data => data.categories)
                   >
                     genders
                   </th>
+                  <th></th>
                   <!-- <th scope="col" class="relative px-6 py-3">
                   <span class="sr-only">Edit</span>
                 </th> -->
@@ -58,9 +72,9 @@ const categories = useResult(result, [], data => data.categories)
               <tbody class="bg-white divide-y divide-gray-200">
                 <tr v-for="category in categories" :key="category.id" class="cursor-pointer">
                   <td class="px-6 py-4 whitespace-nowrap">
-                    <div>
-                      <div>
-                        <img :src="category.image" alt="" />
+                    <div class="flex items-center">
+                      <div class="h-auto max-h-16 rounded-md w-16 mr-1 overflow-hidden bg-red-400">
+                        <img :src="category.image" class="object-cover rounded-md shadow-sm" alt="" />
                       </div>
                       <div>
                         <div class="text-sm text-gray-600 font-semibold font-montserrat">#{{ category.id }}</div>
@@ -85,6 +99,14 @@ const categories = useResult(result, [], data => data.categories)
                       </div>
                     </div>
                   </td>
+                  <td>
+                    <div class="flex gap-3">
+                      <v-button @click="deleteCategory(category)" base class="text-red-400">
+                        <font-awesome-icon icon="trash"></font-awesome-icon
+                      ></v-button>
+                      <category-edit-modal :category="category"></category-edit-modal>
+                    </div>
+                  </td>
                 </tr>
               </tbody>
             </table>
diff --git a/apps/frontend/admin/src/views/Login.vue b/apps/frontend/admin/src/views/Login.vue
new file mode 100644
index 0000000..a86a2f0
--- /dev/null
+++ b/apps/frontend/admin/src/views/Login.vue
@@ -0,0 +1,56 @@
+<script setup>
+import { computed, ref, watchEffect } from 'vue'
+import { useLogin } from '../composables/useUser'
+import BaseInput from '../components/BaseInput.vue'
+import BaseButton from '../components/BaseButton.vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const { loginWithEmail, error, loading, login_message, login_success } = useLogin()
+const router = useRouter()
+const route = useRoute()
+
+const redirect = computed(() => route.query.redirect ?? '/')
+
+const input = ref({
+  email: '',
+  password: '',
+})
+
+const login = () => {
+  loginWithEmail(input.value)
+}
+
+watchEffect(() => {
+  if (login_success.value) {
+    console.log('redirecting', redirect.value)
+    router.push(redirect.value)
+  }
+})
+</script>
+<template>
+  <div class="w-screen h-screen flex">
+    <div class="z-20 md:z-0 w-full md:w-1/2 h-full py-4 px-10 flex flex-col backdrop-blur-md md:backdrop-filter-none">
+      <div class="text-3xl font-montserrat font-medium text-forest">Zivero</div>
+      <div class="text-4xl font-medium font-montserrat text-gray-700 py-24">Login to Zivero Admin</div>
+
+      <form @submit.prevent="login" class="flex flex-col w-full md:w-3/4 gap-4">
+        {{ error }}
+        {{ login_message }}
+        <base-input v-model="input.email" placeholder="Enter Your Email" type="email" required class="p-3"></base-input>
+
+        <base-input v-model="input.password" placeholder="password" type="password" required class="p-3"></base-input>
+
+        <base-button type="submit" :loading="loading">LOGIN</base-button>
+      </form>
+    </div>
+    <div
+      class="absolute backdrop-blur-md backdrop-brightness-150 md:backdrop-filter-none md:relative md:w-1/2 bg-mint h-full"
+    >
+      <img
+        src="https://images.pexels.com/photos/3944405/pexels-photo-3944405.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
+        alt=""
+        class="h-full object-cover"
+      />
+    </div>
+  </div>
+</template>
diff --git a/apps/frontend/admin/src/views/OrderSingle.vue b/apps/frontend/admin/src/views/OrderSingle.vue
index 14b3668..7fdb16e 100644
--- a/apps/frontend/admin/src/views/OrderSingle.vue
+++ b/apps/frontend/admin/src/views/OrderSingle.vue
@@ -42,13 +42,13 @@ const saveUpdates = () => {
     id: order.value.id,
     fulfillmentStatus: updateData.value.fulfillmentStatus,
   }
-  console.log('input', input)
+  //console.log('input', input)
   updateMutation({ ...input })
 }
 
 watchEffect(() => {
   const value = fulfillmentStatusOptions[fulfillmentStatus.value]
-  console.log(value)
+  //console.log(value)
   if (value !== null || value !== undefined) {
     updateData.value = { ...updateData.value, fulfillmentStatus: value }
   }
diff --git a/apps/frontend/admin/src/views/ProductEdit.vue b/apps/frontend/admin/src/views/ProductEdit.vue
index d6989d3..96ef644 100644
--- a/apps/frontend/admin/src/views/ProductEdit.vue
+++ b/apps/frontend/admin/src/views/ProductEdit.vue
@@ -8,7 +8,6 @@
         <span class="px-3 font-bold"> Update Product</span>
       </div>
     </div>
-
     <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
       <div class="col-span-2 h-auto pb-20 space-y-5">
         <v-card outlined>
@@ -95,11 +94,11 @@
 
     <div class="flex justify-between items-center border-t mt-3 py-4">
       <div class="flex gap-2">
-        <v-button danger @click="deleteProduct"> Delete Product </v-button>
+        <v-button danger @click="deleteProduct" :loading="deleting"> Delete Product </v-button>
         <v-button secondary @click="deleteProduct"> Archive </v-button>
       </div>
 
-      <v-button @click="saveProduct"> Save </v-button>
+      <v-button @click="saveProduct" :loading="updating"> Save </v-button>
     </div>
   </div>
 </template>
@@ -216,8 +215,8 @@ export default {
       return Options
     })
 
-    const { mutate: updateProduct } = useMutation(UPDATE_PRODUCT)
-    const { mutate: deleteProduct } = useMutation(DELETE_PRODUCT)
+    const { mutate: updateProduct, loading: updating, error: updateError } = useMutation(UPDATE_PRODUCT)
+    const { mutate: deleteProduct, loading: deleting, error: deleteError } = useMutation(DELETE_PRODUCT)
     const v$ = useVuelidate()
 
     return {
@@ -228,6 +227,10 @@ export default {
       cleanOptions,
       productOrganisationOptions,
       variantOptions,
+      deleting,
+      updating,
+      deleteError,
+      updateError,
       updateProduct,
       DeleteProduct: deleteProduct,
       v$,
@@ -260,22 +263,22 @@ export default {
       this.v$.productData.$validate()
       this.$refs.productOrganisation.v$.$validate()
       const variationsComponent = this.$refs.variationsField
-      console.log('variations cmp', variationsComponent)
+      //console.log('variations cmp', variationsComponent)
       if (variationsComponent !== undefined && variationsComponent !== null) {
         if (variationsComponent.validate() === false) {
           return false
         }
       }
-      console.log(this.v$.$errors, 'org', this.$refs.productOrganisation.v$.$errors)
+      //console.log(this.v$.$errors, 'org', this.$refs.productOrganisation.v$.$errors)
 
       return !this.v$.productData.$invalid && !this.$refs.productOrganisation.v$.$invalid
     },
 
     saveProduct() {
-      console.log('saving', this.$refs.productOrganisation, this.$refs.variationsField)
-      console.log('isvalid', this.validateForm())
+      //console.log('saving', this.$refs.productOrganisation, this.$refs.variationsField)
+      //console.log('isvalid', this.validateForm())
       if (this.validateForm()) {
-        console.log('saving true')
+        //console.log('saving true')
         const ProductInput = { ...this.productData, ...this.cleanedProductOrganisationData }
         this.updateProduct({ id: this.productId, ProductInput })
       }
@@ -287,7 +290,7 @@ export default {
         {
           update: cache => {
             let data = cache.readQuery({ query: GET_PRODUCTS_QUERY })
-            console.log('data', data)
+            //console.log('data', data)
             if (data.products) {
               data = data.products.filter(product => product.id !== this.productId)
               cache.writeQuery({ query: GET_PRODUCTS_QUERY, data })
diff --git a/apps/frontend/admin/src/views/ProductsCreate.vue b/apps/frontend/admin/src/views/ProductsCreate.vue
index 67c876a..8e52a76 100644
--- a/apps/frontend/admin/src/views/ProductsCreate.vue
+++ b/apps/frontend/admin/src/views/ProductsCreate.vue
@@ -210,29 +210,29 @@ export default {
       this.v$.$validate()
       this.$refs.productOrganisation.v$.$validate()
       const variationsComponent = this.$refs.variationsField
-      console.log('variations cmp', variationsComponent)
+      //console.log('variations cmp', variationsComponent)
       if (variationsComponent !== undefined && variationsComponent !== null) {
         if (variationsComponent.validate() === false) {
           return false
         }
       }
-      console.log(this.v$.$errors, 'org', this.$refs.productOrganisation.v$.$errors)
+      //console.log(this.v$.$errors, 'org', this.$refs.productOrganisation.v$.$errors)
 
       return !this.v$.productData.$invalid && !this.$refs.productOrganisation.v$.$invalid
     },
 
     saveProduct() {
-      console.log('saving', this.$refs.productOrganisation, this.$refs.variationsField)
-      console.log('isvalid', this.validateForm())
+      //console.log('saving', this.$refs.productOrganisation, this.$refs.variationsField)
+      //console.log('isvalid', this.validateForm())
       if (this.validateForm()) {
-        console.log('saving true')
+        //console.log('saving true')
         const ProductInput = { ...this.productData, ...this.cleanedProductOrganisationData }
         this.createProduct(
           { ProductInput },
           {
             update: (cache, { data: { product } }) => {
               const data = cache.readQuery({ query: GET_PRODUCTS_QUERY })
-              console.log('data', data)
+              //console.log('data', data)
               if (data && data.products) {
                 data.products.push(product)
                 cache.writeQuery({ query: GET_PRODUCTS_QUERY, data })
diff --git a/apps/frontend/admin/src/views/ProductsEdit.vue b/apps/frontend/admin/src/views/ProductsEdit.vue
deleted file mode 100644
index 36524e4..0000000
--- a/apps/frontend/admin/src/views/ProductsEdit.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <div id="demo">
-    <button @click="show = !show">
-      Toggle
-    </button>
-
-    <transition name="fade">
-      <p
-        v-if="show"
-        class="bg-red-500 w-96 h-96"
-      >
-        hello
-      </p>
-    </transition>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      show: true,
-    }
-  },
-}
-</script>
-
-<style lang="scss">
-body {
-  margin: 30px;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 3s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>
diff --git a/apps/frontend/admin/src/views/Variants.vue b/apps/frontend/admin/src/views/Variants.vue
new file mode 100644
index 0000000..91d5d5e
--- /dev/null
+++ b/apps/frontend/admin/src/views/Variants.vue
@@ -0,0 +1,103 @@
+<script setup>
+import { ref } from 'vue'
+import VButton from '../components/BaseButton.vue'
+import { useQuery, useResult } from '@vue/apollo-composable'
+import { getVariants } from 'graphql-client/queries/collections'
+
+import VariantCreate from '../components/VariantCreateModal.vue'
+import VariantEditModal from '../components/VariantEditModal.vue'
+import VariantDeleteModal from '../components/VariantDeleteModal.vue'
+const { loading, error, result } = useQuery(getVariants)
+const variants = useResult(result, [], data => data.variants)
+
+const deleteDialog = ref(false)
+const variantToDelete = ref('')
+const editDialog = ref(false)
+const variantToEdit = ref('')
+
+const deleteVariant = variant => {
+  variantToDelete.value = variant
+  deleteDialog.value = true
+}
+
+const editVariant = variant => {
+  variantToEdit.value = variant
+  editDialog.value = true
+}
+</script>
+
+<template>
+  <variant-delete-modal :variant="variantToDelete" v-model="deleteDialog"> </variant-delete-modal>
+  <variant-edit-modal :variant="variantToEdit" v-model="editDialog"></variant-edit-modal>
+  <div>
+    <!-- header -->
+    <div class="flex justify-between my-4 items-center">
+      <span class="text-lg font-semibold font-montserrat text-black">Brands</span>
+      <div class="flex items-center text-gray-600">
+        <variant-create></variant-create>
+      </div>
+    </div>
+    <!-- table -->
+    <div class="flex flex-col">
+      <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+        <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+          <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+            <table class="min-w-full divide-y divide-gray-200">
+              <thead class="bg-gray-50">
+                <tr>
+                  <th
+                    scope="col"
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                  >
+                    name
+                  </th>
+                  <th
+                    scope="col"
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                  >
+                    value
+                  </th>
+
+                  <th></th>
+                  <!-- <th scope="col" class="relative px-6 py-3">
+                  <span class="sr-only">Edit</span>
+                </th> -->
+                </tr>
+              </thead>
+              <tbody class="bg-white divide-y divide-gray-200">
+                <tr v-for="variant in variants" :key="variant.id" class="cursor-pointer">
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div>
+                        <div class="text-sm text-gray-400 font-medium font-montserrat">#{{ variant.id }}</div>
+                        <div class="text-base text-gray-600 font-semibold font-montserrat">{{ variant.name }}</div>
+                      </div>
+                    </div>
+                  </td>
+                  <td>
+                    <div class="flex gap-3 items-center" v-if="variant.name === 'color'">
+                      <div class="w-10 h-10 rounded-md shadow-sm" :style="{ backgroundColor: variant.value }"></div>
+
+                      <p>{{ variant.value }}</p>
+                    </div>
+                    <div class="rounded-md px-3 py-2 font-montserrat w-min bg-mint" v-else>
+                      {{ variant.value }}
+                    </div>
+                  </td>
+                  <td>
+                    <div class="flex gap-3">
+                      <v-button @click="deleteVariant(variant)" base class="text-red-400">
+                        <font-awesome-icon icon="trash"></font-awesome-icon
+                      ></v-button>
+                      <v-button @click="editVariant(variant)" secondary> Edit</v-button>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/frontend/store-front/src/auth/index.js b/apps/frontend/store-front/src/auth/index.js
index c2d2195..541d4ea 100644
--- a/apps/frontend/store-front/src/auth/index.js
+++ b/apps/frontend/store-front/src/auth/index.js
@@ -1,31 +1,33 @@
-import store from "../store"
-import router from "../router"
-export const  refreshTokenFlow = async () =>{
-    if(!localStorage.getItem('Zivero_refresh_token')){
-        return Error('No refresh token found ,Please Login Again')
-    }
-    console.log("refreshTokenFlow")
-    var timeNow = Math.floor((Date.now())/1000)
-    let isTokenExpired = timeNow < store.state.user.auth.tokenExpireAt
-    if( !store.state.user.authtoken  &&  localStorage.getItem("Zivero_refresh_token")){
-        let token = await store.dispatch("user/refreshToken");
-        return token
-    }
-    if(isTokenExpired ){
-        let token = await store.dispatch("user/refreshToken");
-        return token 
-    }
-}
+import store from "../store";
+import router from "../router";
+export const refreshTokenFlow = async () => {
+  if (!localStorage.getItem("Zivero_refresh_token")) {
+    return Error("No refresh token found ,Please Login Again");
+  }
+  //console.log("refreshTokenFlow")
+  var timeNow = Math.floor(Date.now() / 1000);
+  let isTokenExpired = timeNow < store.state.user.auth.tokenExpireAt;
+  if (
+    !store.state.user.authtoken &&
+    localStorage.getItem("Zivero_refresh_token")
+  ) {
+    let token = await store.dispatch("user/refreshToken");
+    return token;
+  }
+  if (isTokenExpired) {
+    let token = await store.dispatch("user/refreshToken");
+    return token;
+  }
+};
 
-export const logOut= () =>{
-    store.dispatch("user/logOut");
-    router.push("/login");
-
-}
+export const logOut = () => {
+  store.dispatch("user/logOut");
+  router.push("/login");
+};
 
 // const isLoggedIn = () =>{
 //     if(store.state.user.auth.token){
 //         return true
 //     }
-    
-// }
\ No newline at end of file
+
+// }
diff --git a/apps/frontend/store-front/src/components/address/addressCard.vue b/apps/frontend/store-front/src/components/address/addressCard.vue
index 5c755c2..6b75aa4 100644
--- a/apps/frontend/store-front/src/components/address/addressCard.vue
+++ b/apps/frontend/store-front/src/components/address/addressCard.vue
@@ -56,7 +56,7 @@ export default {
         return this.address.id == this.selectedAddress.id;
       },
       set(value) {
-        console.log("valle", value);
+        //console.log("valle", value);
         if (value == true) {
           this.setSelectedAddress(this.address);
         } else {
diff --git a/apps/frontend/store-front/src/components/address/addressDialog.vue b/apps/frontend/store-front/src/components/address/addressDialog.vue
index 39fbd03..d357d4b 100644
--- a/apps/frontend/store-front/src/components/address/addressDialog.vue
+++ b/apps/frontend/store-front/src/components/address/addressDialog.vue
@@ -1,57 +1,65 @@
 <template>
-
-   <v-dialog v-model="propModel" width="450px">
-        <div class="white">
-           <div class="py-6 px-4 text-h5 font-weight-bold d-flex justify-space-between "> 
-              <span>Add Address</span>
-              <v-icon @click="propModel=false"> mdi-close</v-icon>
-            </div>
-           <addressForm class="form" ref="addressForm" ></addressForm>
-            <div class="bottom-nav rounded elevation-4">
-                  <v-btn color="green white--text py-6" width="100%" tile @click="submit()"> Add Address</v-btn>  
-            </div>
-        </div>
-   </v-dialog>
-
+  <v-dialog v-model="propModel" width="450px">
+    <div class="white">
+      <div
+        class="py-6 px-4 text-h5 font-weight-bold d-flex justify-space-between"
+      >
+        <span>Add Address</span>
+        <v-icon @click="propModel = false"> mdi-close</v-icon>
+      </div>
+      <addressForm class="form" ref="addressForm"></addressForm>
+      <div class="bottom-nav rounded elevation-4">
+        <v-btn
+          color="green white--text py-6"
+          width="100%"
+          tile
+          @click="submit()"
+        >
+          Add Address</v-btn
+        >
+      </div>
+    </div>
+  </v-dialog>
 </template>
 
 <script>
 import addressForm from "./addressForm.vue";
 import { mapActions } from "vuex";
-export default{
-   components:{
-      addressForm
-   },
-   props:["open",],
-   
-   computed: {
-      
-      propModel: {
-         get () { return this.open },
-         set (value) { this.$emit('updateDialog', value) },
-      },
-   },
-   methods:{
-      ...mapActions("addresses",["addAddress"]),
-      submit(){
-         let address = this.$refs.addressForm.address
-         console.log(address)
-         this.addAddress(address)
-         this.propModel=false
-      }
+export default {
+  components: {
+    addressForm,
+  },
+  props: ["open"],
 
-   }
-}
+  computed: {
+    propModel: {
+      get() {
+        return this.open;
+      },
+      set(value) {
+        this.$emit("updateDialog", value);
+      },
+    },
+  },
+  methods: {
+    ...mapActions("addresses", ["addAddress"]),
+    submit() {
+      let address = this.$refs.addressForm.address;
+      //console.log(address)
+      this.addAddress(address);
+      this.propModel = false;
+    },
+  },
+};
 </script>
 <style scoped lang="scss">
-
-.bottom-nav{
-   display:flex;
-   justify-content:center;
-   align-items:center;
-   height: auto;
-   border-top:0.5px solid lightgrey;
-   padding-inline: 2%;
-   padding-block: 2%;
+.bottom-nav {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: auto;
+  border-top: 0.5px solid lightgrey;
+  padding-inline: 2%;
+  padding-block: 2%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/frontend/store-front/src/components/address/addressForm.vue b/apps/frontend/store-front/src/components/address/addressForm.vue
index 429ef5c..85fca20 100644
--- a/apps/frontend/store-front/src/components/address/addressForm.vue
+++ b/apps/frontend/store-front/src/components/address/addressForm.vue
@@ -6,8 +6,16 @@
           <span class="ma-0 pa-0 text-button"> Contact details </span>
         </div>
         <div class="pa-2">
-          <v-text-field v-model="address.name" label="Name" outlined></v-text-field>
-          <v-text-field v-model="address.phoneNumber" label="Mobile No" outlined></v-text-field>
+          <v-text-field
+            v-model="address.name"
+            label="Name"
+            outlined
+          ></v-text-field>
+          <v-text-field
+            v-model="address.phoneNumber"
+            label="Mobile No"
+            outlined
+          ></v-text-field>
         </div>
       </div>
       <div class="address-details">
@@ -15,33 +23,63 @@
           <span class="ma-0 pa-0 text-button"> Address</span>
         </div>
         <div class="pa-2">
-          <v-text-field v-model="address.pincode" label="Pincode" outlined></v-text-field>
-          <v-text-field v-model="address.apartmentNo" label="Apartment No" outlined></v-text-field>
-          <v-text-field v-model="address.town" label="locality/town" outlined></v-text-field>
-          <v-text-field v-model="address.city" label="city/district" outlined></v-text-field>
-          <v-text-field v-model="address.state" label="State" outlined></v-text-field>
-          <v-text-field v-model="address.country" label="Country" outlined></v-text-field>
-          
+          <v-text-field
+            v-model="address.pincode"
+            label="Pincode"
+            outlined
+          ></v-text-field>
+          <v-text-field
+            v-model="address.apartmentNo"
+            label="Apartment No"
+            outlined
+          ></v-text-field>
+          <v-text-field
+            v-model="address.town"
+            label="locality/town"
+            outlined
+          ></v-text-field>
+          <v-text-field
+            v-model="address.city"
+            label="city/district"
+            outlined
+          ></v-text-field>
+          <v-text-field
+            v-model="address.state"
+            label="State"
+            outlined
+          ></v-text-field>
+          <v-text-field
+            v-model="address.country"
+            label="Country"
+            outlined
+          ></v-text-field>
+
           <div>
-            <p class="text-button font-weight-bold"> Save Address As</p>
-         
-            <v-btn class="rounded-pill mr-7" outlined  
-              :class = '{"green darken-2": address.isHome}'
+            <p class="text-button font-weight-bold">Save Address As</p>
+
+            <v-btn
+              class="rounded-pill mr-7"
+              outlined
+              :class="{ 'green darken-2': address.isHome }"
               @click="setAsHome()"
-             >
-               Home
+            >
+              Home
             </v-btn>
-            <v-btn class="rounded-pill mr-7" outlined  
-              :class = '{"green darken-2": address.isWork}'
+            <v-btn
+              class="rounded-pill mr-7"
+              outlined
+              :class="{ 'green darken-2': address.isWork }"
               @click="setAsWork()"
-             >
-               Work
+            >
+              Work
             </v-btn>
           </div>
-          <v-checkbox v-model="address.isPrimary" class="" > 
+          <v-checkbox v-model="address.isPrimary" class="">
             <template v-slot:label>
-              <div class="text-button font-weight-bold black--text">Set As Default Address</div>
-            </template> 
+              <div class="text-button font-weight-bold black--text">
+                Set As Default Address
+              </div>
+            </template>
           </v-checkbox>
         </div>
       </div>
@@ -51,19 +89,19 @@
 
 <script>
 export default {
-  props:["update"],
-  
-  mounted(){
-    console.log("mounting form")
-    if(this.update){
-      console.log("updating fields")
-      let address = this.$store.state.addresses.addressToUpdate
-      this.address =address
-    }  
+  props: ["update"],
+
+  mounted() {
+    //console.log("mounting form")
+    if (this.update) {
+      //console.log("updating fields")
+      let address = this.$store.state.addresses.addressToUpdate;
+      this.address = address;
+    }
   },
   data() {
     return {
-      address:{
+      address: {
         name: "",
         pincode: "",
         state: "",
@@ -75,31 +113,30 @@ export default {
         isWork: false,
         isHome: true,
         phoneNumber: "",
-      }
+      },
     };
   },
 
-
-  methods:{
-    setAsHome(){
-      this.address.isHome = !this.address.isHome
-      this.address.isWork =false
+  methods: {
+    setAsHome() {
+      this.address.isHome = !this.address.isHome;
+      this.address.isWork = false;
     },
-    setAsWork(){
-      this.address.isHome =false
-      this.address.isWork = ! this.address.isWork 
-    }
-  }
+    setAsWork() {
+      this.address.isHome = false;
+      this.address.isWork = !this.address.isWork;
+    },
+  },
 };
 </script>
 
 <style>
-.addressForm{
-  width:100%;
-  max-width:600px;
+.addressForm {
+  width: 100%;
+  max-width: 600px;
 }
 
-.outlined{
+.outlined {
   border: 1px solid black;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/frontend/store-front/src/components/address/updateAddressDialog.vue b/apps/frontend/store-front/src/components/address/updateAddressDialog.vue
index 10abd10..e3e3e18 100644
--- a/apps/frontend/store-front/src/components/address/updateAddressDialog.vue
+++ b/apps/frontend/store-front/src/components/address/updateAddressDialog.vue
@@ -1,57 +1,66 @@
 <template>
-
-   <v-dialog v-model="propModel" width="450px">
-        <div class="white">
-           <div class="py-6 px-4 text-h5 font-weight-bold d-flex justify-space-between "> 
-              <span>Update Address</span>
-              <v-icon @click="propModel=false"> mdi-close</v-icon>
-            </div>
-           <addressForm class="form" ref="addressForm" update="true" ></addressForm>
-            <div class="bottom-nav rounded elevation-4">
-                  <v-btn color="green white--text py-6" width="100%" tile @click="submit()"> Update Address</v-btn>  
-            </div>
-        </div>
-   </v-dialog>
-
+  <v-dialog v-model="propModel" width="450px">
+    <div class="white">
+      <div
+        class="py-6 px-4 text-h5 font-weight-bold d-flex justify-space-between"
+      >
+        <span>Update Address</span>
+        <v-icon @click="propModel = false"> mdi-close</v-icon>
+      </div>
+      <addressForm class="form" ref="addressForm" update="true"></addressForm>
+      <div class="bottom-nav rounded elevation-4">
+        <v-btn
+          color="green white--text py-6"
+          width="100%"
+          tile
+          @click="submit()"
+        >
+          Update Address</v-btn
+        >
+      </div>
+    </div>
+  </v-dialog>
 </template>
 
 <script>
 import addressForm from "./addressForm.vue";
 import { mapActions } from "vuex";
-export default{
-   components:{
-      addressForm
-   },
-   props:["open",],
-   
-   computed: {
-      propModel: {
-         get () { return this.open },
-         set (value) { this.$emit('updateDialog', value) },
-      },
-   },
-   methods:{
-      ...mapActions("addresses",["updateAddress"]),
-      submit(){
-         console.log("updating address")
-         let address = this.$refs.addressForm.address
-         console.log(address)
-         this.updateAddress({ addressId:address.id ,updateValues:address})
-         this.propModel=false
-      }
+export default {
+  components: {
+    addressForm,
+  },
+  props: ["open"],
 
-   }
-}
+  computed: {
+    propModel: {
+      get() {
+        return this.open;
+      },
+      set(value) {
+        this.$emit("updateDialog", value);
+      },
+    },
+  },
+  methods: {
+    ...mapActions("addresses", ["updateAddress"]),
+    submit() {
+      //console.log("updating address")
+      let address = this.$refs.addressForm.address;
+      //console.log(address)
+      this.updateAddress({ addressId: address.id, updateValues: address });
+      this.propModel = false;
+    },
+  },
+};
 </script>
 <style scoped lang="scss">
-
-.bottom-nav{
-   display:flex;
-   justify-content:center;
-   align-items:center;
-   height: auto;
-   border-top:0.5px solid lightgrey;
-   padding-inline: 2%;
-   padding-block: 2%;
+.bottom-nav {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: auto;
+  border-top: 0.5px solid lightgrey;
+  padding-inline: 2%;
+  padding-block: 2%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/frontend/store-front/src/components/cart/cart-product-preview.vue b/apps/frontend/store-front/src/components/cart/cart-product-preview.vue
index 4beddb8..d469605 100644
--- a/apps/frontend/store-front/src/components/cart/cart-product-preview.vue
+++ b/apps/frontend/store-front/src/components/cart/cart-product-preview.vue
@@ -128,7 +128,7 @@ export default {
   },
   watch: {
     Quantity: function (oldQuantity, newQuantity) {
-      console.log("request sent", oldQuantity, newQuantity);
+      //console.log("request sent", oldQuantity, newQuantity);
     },
   },
 };
diff --git a/apps/frontend/store-front/src/components/filter/filterDrawer.vue b/apps/frontend/store-front/src/components/filter/filterDrawer.vue
index b6d1a34..5dd7baa 100644
--- a/apps/frontend/store-front/src/components/filter/filterDrawer.vue
+++ b/apps/frontend/store-front/src/components/filter/filterDrawer.vue
@@ -12,7 +12,6 @@
         <v-btn elevation="0" class="red--text" @click="clearFilters()"
           >CLEAR ALL</v-btn
         >
-       
       </div>
       <v-list-item-group
         class="d-none d-md-flex flex-column pa-0 ma-0"
@@ -57,7 +56,7 @@
         </v-radio-group>
       </v-list-item-group>
     </v-list>
-    
+
     <!-- mobile mobile-pannel -->
     <v-container fluid class="d-md-none d-flex mobile-pannel pa-0 ma-0"
       ><!-- filter panel for mobile view-->
@@ -129,7 +128,7 @@
   </v-navigation-drawer>
 </template>
 
-<script >
+<script>
 import { mapState, mapActions, mapGetters, mapMutations } from "vuex";
 export default {
   // props: ["isOpen"],
@@ -143,9 +142,9 @@ export default {
       bottom_selected: "",
       group: "",
       selectedFilter: "gender", // gives the seletec filter type like genders , categories,variationfilter
-      selectedVariation: "",     // gives the seletef  variation filter type like size,color
-      selectedVariationValue: {}, 
-      selectedValue: {},         // returns filter for types expect variationfilters {categories:["red"],genders:["male"]}
+      selectedVariation: "", // gives the seletef  variation filter type like size,color
+      selectedVariationValue: {},
+      selectedValue: {}, // returns filter for types expect variationfilters {categories:["red"],genders:["male"]}
     };
   },
   computed: {
@@ -164,8 +163,8 @@ export default {
         variant.values.push(value);
         filters.push(variant);
       }
-      console.log("cleanvariationfilter");
-      console.log(filters);
+      //console.log("cleanvariationfilter");
+      //console.log(filters);
       return filters;
     },
 
@@ -186,7 +185,7 @@ export default {
 
       set: function () {
         //this.toggleFilterDrawer();
-        //console.log("set");
+        ////console.log("set");
       },
     },
   },
@@ -195,7 +194,7 @@ export default {
     ...mapActions("products", ["updateFilters", "getProducts", "getFilters"]),
     ...mapMutations("products", ["updateQueryFilters"]),
     is_mobile() {
-      console.log(screen.width);
+      //console.log(screen.width);
       if (screen.width <= 700) {
         return true;
       } else {
@@ -203,23 +202,20 @@ export default {
       }
     },
     async fetchProducts(updateFilters) {
-      this.$emit('filtering',true)
-      
+      this.$emit("filtering", true);
+
       let loading = await this.getProducts({
         ...this.selectedValue,
         variantFilters: this.cleanedVariationValues,
       });
-      this.$emit('filtering',!loading)
-      
+      this.$emit("filtering", !loading);
+
       if (updateFilters == true) {
         this.updateFilters(this.selectedValue);
-       
-
       }
       if (this.is_mobile()) {
         this.toggleFilterDrawer();
       }
-      
     },
 
     clearFilters() {
@@ -238,21 +234,27 @@ export default {
     },
   },
 
-  watch:{
+  watch: {
     selectedValue: {
-      handler: function(newValue) {
-        this.updateQueryFilters({...newValue,variantFilters:this.cleanedVariationValues});
+      handler: function (newValue) {
+        this.updateQueryFilters({
+          ...newValue,
+          variantFilters: this.cleanedVariationValues,
+        });
       },
       deep: true,
     },
 
     cleanedVariationValues: {
-      handler: function(newValue) {
-        this.updateQueryFilters({...this.selectedValue,variantFilters:newValue});
+      handler: function (newValue) {
+        this.updateQueryFilters({
+          ...this.selectedValue,
+          variantFilters: newValue,
+        });
       },
       deep: true,
     },
-  }
+  },
 };
 </script>
 
@@ -283,4 +285,4 @@ export default {
   height: 1px;
   width: 100%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/frontend/store-front/src/components/filter/filterItemGroup.vue b/apps/frontend/store-front/src/components/filter/filterItemGroup.vue
index 51b82ab..09314c3 100644
--- a/apps/frontend/store-front/src/components/filter/filterItemGroup.vue
+++ b/apps/frontend/store-front/src/components/filter/filterItemGroup.vue
@@ -68,7 +68,7 @@ export default {
     },
     getValue(item) {
       //return the the name if the item is an obj else the item
-      // console.log(typeof item== "object")
+      // //console.log(typeof item== "object")
       if (typeof item == "object") {
         return item.id;
       } else {
diff --git a/apps/frontend/store-front/src/components/filter/filterdrawer.vue b/apps/frontend/store-front/src/components/filter/filterdrawer.vue
index 4ac17a8..139ae4d 100644
--- a/apps/frontend/store-front/src/components/filter/filterdrawer.vue
+++ b/apps/frontend/store-front/src/components/filter/filterdrawer.vue
@@ -1,44 +1,33 @@
 <template>
-
-    <div>
-
-       <mobile-filter-panel > </mobile-filter-panel>
-       <desktop-filter-panel > </desktop-filter-panel>
-       
-    </div>
-   
-  
+  <div>
+    <mobile-filter-panel> </mobile-filter-panel>
+    <desktop-filter-panel> </desktop-filter-panel>
+  </div>
 </template>
 
-<script >
+<script>
 // import { mapState, mapActions, mapGetters, mapMutations } from "vuex";
 
-import mobileFilterPanel from "./mobileFilterPanel.vue"
-import desktopFilterPanel from "./desktopFilterPanel.vue"
+import mobileFilterPanel from "./mobileFilterPanel.vue";
+import desktopFilterPanel from "./desktopFilterPanel.vue";
 export default {
-  
-  components:{
-     desktopFilterPanel,
-     mobileFilterPanel
+  components: {
+    desktopFilterPanel,
+    mobileFilterPanel,
   },
   mounted() {
-
     this.$store.dispatch("products/getFilters");
-  
   },
   data() {
-    return {
-
-    };
+    return {};
   },
   // computed: {
   //   ...mapState("app", ["isFilterDrawerOpen"]),
   //   ...mapState("products", ["filters"]),
   //   ...mapGetters("products", ["cleanedFilters", "variationFilters"]),
 
-    
   //   is_mobile() {
-  //     console.log(screen.width);
+  //     //console.log(screen.width);
   //     if (screen.width <= 700) {
   //       return true;
   //     } else {
@@ -48,7 +37,7 @@ export default {
 
   //   isOpen: {
   //     get: function () {
-        
+
   //       if(!this.is_mobile){
   //         return true
   //       }
@@ -58,7 +47,7 @@ export default {
 
   //     set: function () {
   //       //this.toggleFilterDrawer();
-  //       //console.log("set");
+  //       ////console.log("set");
   //     },
   //   },
   // },
@@ -66,10 +55,8 @@ export default {
   //   ...mapActions("app", ["toggleFilterDrawer"]),
   //   ...mapActions("filters",["clearFilters"]),
   //   ...mapMutations("products", ["updateQueryFilters"]),
-    
-  // },
 
-  
+  // },
 };
 </script>
 
@@ -100,4 +87,4 @@ export default {
   height: 1px;
   width: 100%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/frontend/store-front/src/components/filter/variantFilterGroup.vue b/apps/frontend/store-front/src/components/filter/variantFilterGroup.vue
index 3e567e3..abbcd20 100644
--- a/apps/frontend/store-front/src/components/filter/variantFilterGroup.vue
+++ b/apps/frontend/store-front/src/components/filter/variantFilterGroup.vue
@@ -1,98 +1,77 @@
 <template>
+  <div>
+    <p class="text-h6 text-uppercase font-weight-bold my-2">{{ label }}</p>
 
-    <div>
+    <v-list-item-group v-model="input" :multiple="multiple">
+      <template v-for="(item, i) in filterValues">
+        <v-divider v-if="!item" :key="`divider-${i}`"></v-divider>
 
-      <p class="text-h6 text-uppercase font-weight-bold my-2">{{label}}</p> 
-      
-      <v-list-item-group
-        v-model="input"
-        :multiple="multiple"
-      >
-        <template v-for="(item, i) in filterValues">
-          <v-divider
-            v-if="!item"
-            :key="`divider-${i}`"
-          ></v-divider>
-
-          <v-list-item
-            v-else
-            :key="`item-${i}`"
-            :value="getValue(item)"
-            active-class="deep-purple--text text--accent-4"
-          >
-            <template v-slot:default="{ active }">
-              <v-list-item-action>
-                <v-checkbox
-                  :input-value="active"
-                  color="deep-purple accent-4"
-                ></v-checkbox>
-              </v-list-item-action>
-
-              <v-list-item-content>
-                <v-list-item-title v-text="getTitle(item)"></v-list-item-title>
-              </v-list-item-content>
-
-            </template>
-
-          </v-list-item>
-        </template>
-      </v-list-item-group>
-    
-    </div>
+        <v-list-item
+          v-else
+          :key="`item-${i}`"
+          :value="getValue(item)"
+          active-class="deep-purple--text text--accent-4"
+        >
+          <template v-slot:default="{ active }">
+            <v-list-item-action>
+              <v-checkbox
+                :input-value="active"
+                color="deep-purple accent-4"
+              ></v-checkbox>
+            </v-list-item-action>
 
+            <v-list-item-content>
+              <v-list-item-title v-text="getTitle(item)"></v-list-item-title>
+            </v-list-item-content>
+          </template>
+        </v-list-item>
+      </template>
+    </v-list-item-group>
+  </div>
 </template>
 
 <script>
-import { mapState,mapActions } from "vuex"
-export default{
-    props:[
-        "filterType","label","filterValues","multiple"
-    ],
-    data(){
-        return{
-          
-        }
-    },
-    computed:{
-        ...mapState("filters",["variantFilterInput"]),
-       
-        input:{
-            get(){
-                return this.variantFilterInput[this.filterType]
-            },
-            set(v){
-
-                this.selectVariantFilter({
-                    filterType:this.filterType,
-                    value:v,
-                    doUpdate:false
-                })
-            }
-
-        }
+import { mapState, mapActions } from "vuex";
+export default {
+  props: ["filterType", "label", "filterValues", "multiple"],
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState("filters", ["variantFilterInput"]),
 
+    input: {
+      get() {
+        return this.variantFilterInput[this.filterType];
+      },
+      set(v) {
+        this.selectVariantFilter({
+          filterType: this.filterType,
+          value: v,
+          doUpdate: false,
+        });
+      },
     },
-    methods:{
-        ...mapActions("filters", ["filterProducts","selectVariantFilter"]),
-        getTitle(item){
-
-            //return the the name if the item is an obj else the item
-            if (typeof item == "object"){
-                  return item.name
-            }else{
-                return item
-            }
-        },
-        getValue(item){
-            //return the the name if the item is an obj else the item
-            // console.log(typeof item== "object")
-            if (typeof item == "object"){
-                  return item.id
-            }else{
-                return item
-            }
-        }
-    }
-
-}
-</script>
\ No newline at end of file
+  },
+  methods: {
+    ...mapActions("filters", ["filterProducts", "selectVariantFilter"]),
+    getTitle(item) {
+      //return the the name if the item is an obj else the item
+      if (typeof item == "object") {
+        return item.name;
+      } else {
+        return item;
+      }
+    },
+    getValue(item) {
+      //return the the name if the item is an obj else the item
+      // //console.log(typeof item== "object")
+      if (typeof item == "object") {
+        return item.id;
+      } else {
+        return item;
+      }
+    },
+  },
+};
+</script>
diff --git a/apps/frontend/store-front/src/components/home/brands.vue b/apps/frontend/store-front/src/components/home/brands.vue
index 9963d49..7527a23 100644
--- a/apps/frontend/store-front/src/components/home/brands.vue
+++ b/apps/frontend/store-front/src/components/home/brands.vue
@@ -7,7 +7,7 @@
         class="img mx-1 rounded my-1 grey lighten-5"
         v-for="(brand, i) in brands"
         :key="i"
-        src="https://images.pexels.com/photos/1619652/pexels-photo-1619652.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
+        :src="brand.logo"
         :alt="brand"
         @click="filterByBrand(brand)"
       >
diff --git a/apps/frontend/store-front/src/components/home/categoriesscroller.vue b/apps/frontend/store-front/src/components/home/categoriesscroller.vue
index b28967f..429244e 100644
--- a/apps/frontend/store-front/src/components/home/categoriesscroller.vue
+++ b/apps/frontend/store-front/src/components/home/categoriesscroller.vue
@@ -45,7 +45,7 @@ export default {
     ...mapActions("filters", ["selectFilter"]),
 
     addCategoryFilter(category) {
-      console.log("adding temp filter");
+      //console.log("adding temp filter");
       let filter = {
         categories: [category.id],
       };
@@ -58,7 +58,7 @@ export default {
       });
     },
     // addGenderFilter(genderName){
-    //     console.log("adding temp filter") ;
+    //     //console.log("adding temp filter") ;
     //     this.updateQueryFilters({
     //         genders:[genderName]
     //     })
diff --git a/apps/frontend/store-front/src/components/home/categorySlideItem.vue b/apps/frontend/store-front/src/components/home/categorySlideItem.vue
index d4570b0..29e6733 100644
--- a/apps/frontend/store-front/src/components/home/categorySlideItem.vue
+++ b/apps/frontend/store-front/src/components/home/categorySlideItem.vue
@@ -2,13 +2,7 @@
   <v-slide-item>
     <div class="ma-2">
       <v-card color="grey lighten-2" class="my-3 pa-0" elevation="0" outlined>
-        <v-img
-          :src="'https://cdn.allbirds.com/image/upload/f_auto,q_auto,w_533,b_rgb:f5f5f5/cms/RKWji6UFUgqcycaZ4dKlR/51810b36c76ba489106bb790cdeab4dc/TD1MTHU_SHOE_ANGLE_GLOBAL_MENS_TREE_DASHERS_THUNDER.png'"
-          contain
-          width="280px"
-          height="280px"
-        >
-        </v-img>
+        <v-img :src="category.image" width="280px" height="280px"> </v-img>
 
         <div
           class="poppins white py-5 px-2 text-uppercase font-weight-bold text-subtitle"
diff --git a/apps/frontend/store-front/src/components/homePage.vue b/apps/frontend/store-front/src/components/homePage.vue
index 1718f70..083e245 100644
--- a/apps/frontend/store-front/src/components/homePage.vue
+++ b/apps/frontend/store-front/src/components/homePage.vue
@@ -77,7 +77,7 @@ export default {
       return chunk(this.WomensTrending.products, 4);
     },
     newArrivals() {
-      console.log("chunks");
+      //console.log("chunks");
       return chunk(this.NewArrivals.products, 4);
     },
   },
diff --git a/apps/frontend/store-front/src/components/orders/order.vue b/apps/frontend/store-front/src/components/orders/order.vue
index 61b322f..80f7700 100644
--- a/apps/frontend/store-front/src/components/orders/order.vue
+++ b/apps/frontend/store-front/src/components/orders/order.vue
@@ -31,7 +31,7 @@ export default {
   computed: {
     ...mapGetters("orders", ["totalOrderAmount"]),
     totalAmount() {
-      console.log("order", this.order);
+      //console.log("order", this.order);
       return this.totalOrderAmount(this.order);
     },
     orderDate() {
diff --git a/apps/frontend/store-front/src/components/products/productCard.vue b/apps/frontend/store-front/src/components/products/productCard.vue
index 40d40fd..83af4ce 100644
--- a/apps/frontend/store-front/src/components/products/productCard.vue
+++ b/apps/frontend/store-front/src/components/products/productCard.vue
@@ -1,7 +1,6 @@
 <template>
   <v-card class="pa-0" outlined tile>
-    </v-img>
-
+    <v-img @click="goToProduct()" class="product-image" :src="image"> </v-img>
     <v-container class="productDetails d-flex flex-column pa-1 ma-0">
       <div class="d-flex justify-space-between align-end mb-0 px-1 kpoppins">
         <span class="text-overline">{{ brandName }}</span>
diff --git a/apps/frontend/store-front/src/components/products/selectVariation.vue b/apps/frontend/store-front/src/components/products/selectVariation.vue
index 3a38bf0..77207d7 100644
--- a/apps/frontend/store-front/src/components/products/selectVariation.vue
+++ b/apps/frontend/store-front/src/components/products/selectVariation.vue
@@ -1,93 +1,103 @@
 <template>
-    <v-dialog v-model="propModel"  max-width="500px" width="70%">
-    <div v-if="loading"> loading </div>
-    <v-container class="white pa-5" v-else >
-        <div
-        
-            class="pa-2 mb-2 white"
-            v-for="(variation, name) in JSON.parse(product.availableVariants)"
-            :key="variation"
-        >
-
-            <span class="text-caption font-weight-medium mb-3 text-uppercase">
-                {{ name }}
-            </span>
-            <!-- variants selection for color -->
-            <span class="d-flex flex-wrap justify-start" v-if="name=='color'">
-                
-                <span class="ma-1 mx-3 rounded-circle " :class="{'black':buttonSelected(name, value)}"
-                v-for="(value, i) in variation" 
-                :key="i">         <!-- outline for color selection -->
-                <v-btn
-                fab  
-                    elevation="0"
-                    @click="select(name, value)"
-                    :ref="value" 
-                    :color="value"              
-                    class="rounded-circle ma-1 pa-1 color-selector"
-                >
-                    
-                </v-btn>
-                </span>
-            </span>
-            <!-- variations selection for size ,etc -->
-            <span v-else class="d-flex flex-wrap justify-start" >
-                <v-btn
-                tile
-                elevation="0"
-                :outlined="buttonSelected(name, value)"
-                @click="select(name, value)"
-                :ref="value"
-                color=""
-                v-for="(value, i) in variation"
-                :key="i"
-                class="ma-2 pa-0"
-                >
-                {{ value }}
-                </v-btn>
-            </span>
-
-        </div>
-        <v-btn class="" @click="add2Cart" color="primary"  elevation="0" x-large block :loading="addingToCart" :disabled="isDisabled" >
-            Done 
-        </v-btn>
+  <v-dialog v-model="propModel" max-width="500px" width="70%">
+    <div v-if="loading">loading</div>
+    <v-container class="white pa-5" v-else>
+      <div
+        class="pa-2 mb-2 white"
+        v-for="(variation, name) in JSON.parse(product.availableVariants)"
+        :key="variation"
+      >
+        <span class="text-caption font-weight-medium mb-3 text-uppercase">
+          {{ name }}
+        </span>
+        <!-- variants selection for color -->
+        <span class="d-flex flex-wrap justify-start" v-if="name == 'color'">
+          <span
+            class="ma-1 mx-3 rounded-circle"
+            :class="{ black: buttonSelected(name, value) }"
+            v-for="(value, i) in variation"
+            :key="i"
+          >
+            <!-- outline for color selection -->
+            <v-btn
+              fab
+              elevation="0"
+              @click="select(name, value)"
+              :ref="value"
+              :color="value"
+              class="rounded-circle ma-1 pa-1 color-selector"
+            >
+            </v-btn>
+          </span>
+        </span>
+        <!-- variations selection for size ,etc -->
+        <span v-else class="d-flex flex-wrap justify-start">
+          <v-btn
+            tile
+            elevation="0"
+            :outlined="buttonSelected(name, value)"
+            @click="select(name, value)"
+            :ref="value"
+            color=""
+            v-for="(value, i) in variation"
+            :key="i"
+            class="ma-2 pa-0"
+          >
+            {{ value }}
+          </v-btn>
+        </span>
+      </div>
+      <v-btn
+        class=""
+        @click="add2Cart"
+        color="primary"
+        elevation="0"
+        x-large
+        block
+        :loading="addingToCart"
+        :disabled="isDisabled"
+      >
+        Done
+      </v-btn>
     </v-container>
-    </v-dialog>
+  </v-dialog>
 </template>
 
-
 <script>
-import {mapActions,mapMutations,mapState,mapGetters} from "vuex";
-export default{
-    props:["productId","open","loading"],
+import { mapActions, mapMutations, mapState, mapGetters } from "vuex";
+export default {
+  props: ["productId", "open", "loading"],
 
-    // async mounted() {
-    //     console.log("mounted")
-    //     let id = this.productId;
-    //     let {errors,loading}=await this.$store.dispatch("products/getProduct", id);
-    //     this.errors=errors;
-    //     this.loadingProduct=loading;
-    // },
-    data:()=>({
-        addingToCart:false
-    }),
-    computed: {
-      ...mapState("products", ["product","selected"]),
-      ...mapGetters("products", ["variations", "variationId"]),
-      propModel: {
-         get () { return this.open },
-         set (value) { this.$emit('close', value) },
+  // async mounted() {
+  //     //console.log("mounted")
+  //     let id = this.productId;
+  //     let {errors,loading}=await this.$store.dispatch("products/getProduct", id);
+  //     this.errors=errors;
+  //     this.loadingProduct=loading;
+  // },
+  data: () => ({
+    addingToCart: false,
+  }),
+  computed: {
+    ...mapState("products", ["product", "selected"]),
+    ...mapGetters("products", ["variations", "variationId"]),
+    propModel: {
+      get() {
+        return this.open;
       },
-      isDisabled() {
-           
-            return this.variationId===null || this.addingToCart; 
+      set(value) {
+        this.$emit("close", value);
       },
     },
-    methods: {
+    isDisabled() {
+      return this.variationId === null || this.addingToCart;
+    },
+  },
+  methods: {
     ...mapMutations("products", ["selectVariant"]),
     ...mapActions("cart", ["addToCart"]),
     buttonSelected(name, value) {
-      //console.log(name + value)
+      ////console.log(name + value)
       for (let i of this.selected) {
         if ((i.name == name) & (i.value == value)) {
           return true;
@@ -107,21 +117,19 @@ export default{
     },
 
     async add2Cart() {
-      //console.log('p',this)
+      ////console.log('p',this)
       this.addingToCart = true;
       let details = {
         productId: this.product.id,
         variationId: this.variationId,
         quantity: 1,
       };
-      let {loading,errors} = await this.addToCart(details);
+      let { loading, errors } = await this.addToCart(details);
       this.disableAddToCart = loading;
       this.errors = errors;
       this.addingToCart = loading;
-      this.$emit("close",false)
+      this.$emit("close", false);
     },
   },
-
-}
-
-</script>
\ No newline at end of file
+};
+</script>
diff --git a/apps/frontend/store-front/src/components/profile/addresses.vue b/apps/frontend/store-front/src/components/profile/addresses.vue
index c248364..4666424 100644
--- a/apps/frontend/store-front/src/components/profile/addresses.vue
+++ b/apps/frontend/store-front/src/components/profile/addresses.vue
@@ -1,36 +1,43 @@
 <template>
-<div>
- 
-
+  <div>
     <div class="" v-if="!loading">
-    
       <div class="white py-4 d-flex justify-space-between">
         <span class="text-h6 font-weight-bold"> Saved Address</span>
-        <v-btn outlined  class="" @click="addAddress()"> Add New Addrress </v-btn>
+        <v-btn outlined class="" @click="addAddress()">
+          Add New Addrress
+        </v-btn>
       </div>
 
-      <div class="default-address" >
-       
-        <p class="text-button ">default Address</p>
-       
-        <addressCard :address="defaultAddress" v-if="defaultAddress!==null" @updateAddress="updateAddress"/>
+      <div class="default-address">
+        <p class="text-button">default Address</p>
+
+        <addressCard
+          :address="defaultAddress"
+          v-if="defaultAddress !== null"
+          @updateAddress="updateAddress"
+        />
       </div>
 
       <div class="other-addresses">
-       
-          <p class="text-button py-2 ">Other Addresses</p>
-        
-          <addressCard  @updateAddress="updateAddress"  v-for="(address,i) of addresses" :key="i" :address="address" />
+        <p class="text-button py-2">Other Addresses</p>
+
+        <addressCard
+          @updateAddress="updateAddress"
+          v-for="(address, i) of addresses"
+          :key="i"
+          :address="address"
+        />
       </div>
-      
     </div>
 
-  
-
-  
-  <addressDialog :open="dialog"          @updateDialog="close">       </addressDialog>
-  <updateAddressDialog ref="updateAddressDialog" :open="updateDialog" @updateDialog="closeUpdate"> </updateAddressDialog>
-</div>
+    <addressDialog :open="dialog" @updateDialog="close"> </addressDialog>
+    <updateAddressDialog
+      ref="updateAddressDialog"
+      :open="updateDialog"
+      @updateDialog="closeUpdate"
+    >
+    </updateAddressDialog>
+  </div>
 </template>
 
 <script>
@@ -39,69 +46,66 @@ import addressCard from "../address/addressCard";
 import addressDialog from "../address/addressDialog.vue";
 import updateAddressDialog from "../address/updateAddressDialog.vue";
 
-import { mapState,mapActions ,mapMutations} from "vuex";
+import { mapState, mapActions, mapMutations } from "vuex";
 export default {
   components: {
-      addressCard ,  addressDialog,
-      updateAddressDialog,
-   
-     },
+    addressCard,
+    addressDialog,
+    updateAddressDialog,
+  },
   data() {
     return {
-      dialog:false ,
-      updateDialog:false,
-      loading:true
-     
+      dialog: false,
+      updateDialog: false,
+      loading: true,
     };
   },
-  async mounted(){
-    
+  async mounted() {
     this.loading = await this.fetchAddresses();
-    
-    
-    console.log("fetching cart data")
+
+    //console.log("fetching cart data")
   },
-  
-  computed:{
-    ...mapState('addresses',['addresses',"defaultAddress"]),
+
+  computed: {
+    ...mapState("addresses", ["addresses", "defaultAddress"]),
   },
 
-  methods:{
-    ...mapActions("addresses",["fetchAddresses","fetchDefaultAddress","addAddress"]),
-    
-    ...mapMutations("addresses",["setAddressToUpdate"]),
-    addAddress(){
-      console.log("add address")
+  methods: {
+    ...mapActions("addresses", [
+      "fetchAddresses",
+      "fetchDefaultAddress",
+      "addAddress",
+    ]),
+
+    ...mapMutations("addresses", ["setAddressToUpdate"]),
+    addAddress() {
+      //console.log("add address")
       this.dialog = true;
       // this.$router.push({name:'addAddress'})
     },
-    updateAddress(address){
-        this.setAddressToUpdate(address)
-        this.updateDialog=true
-        let updateDialog = this.$refs.updateAddressDialog
-        try{
-        window.u =updateDialog
-        updateDialog.$refs.addressForm.address=address
-        console.log(updateDialog.$refs.addressForm.address)
-        }catch(e){
-          console.log("")
-        }
+    updateAddress(address) {
+      this.setAddressToUpdate(address);
+      this.updateDialog = true;
+      let updateDialog = this.$refs.updateAddressDialog;
+      try {
+        window.u = updateDialog;
+        updateDialog.$refs.addressForm.address = address;
+        //console.log(updateDialog.$refs.addressForm.address)
+      } catch (e) {
+        //console.log("")
+      }
     },
 
-    close(v){
-      console.log("v",v)
+    close(v) {
+      //console.log("v",v)
       this.dialog = v;
-     
     },
-    
-    closeUpdate(v){
-      console.log("v",v)
+
+    closeUpdate(v) {
+      //console.log("v",v)
       this.updateDialog = v;
-      
     },
-
-  
-  }
+  },
 };
 </script>
 
@@ -110,7 +114,7 @@ export default {
 //     .addresses{
 //         width:100%;
 //     }
-   
+
 //     @media only screen and (min-width:600px){
 //         .addresses{
 //             width:65%;
@@ -131,4 +135,4 @@ export default {
 //         }
 //     }
 // }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/frontend/store-front/src/components/wishlist/productCard.vue b/apps/frontend/store-front/src/components/wishlist/productCard.vue
index 8418414..5b48701 100644
--- a/apps/frontend/store-front/src/components/wishlist/productCard.vue
+++ b/apps/frontend/store-front/src/components/wishlist/productCard.vue
@@ -1,92 +1,103 @@
 <template>
-        <v-card class="pa-0 "  outlined tile        >
-        
-            <v-img
-                @click='goToProduct()'        
-                class="product-image"
-                :src='image'
-            >  
-               <v-icon class="float-right ma-5 rounded-circle white pa-2 cursor-pointer" @click.stop="removeProduct()">
-                   mdi-close
-               </v-icon>
-            </v-img>
+  <v-card class="pa-0" outlined tile>
+    <v-img @click="goToProduct()" class="product-image" :src="image">
+      <v-icon
+        class="float-right ma-5 rounded-circle white pa-2 cursor-pointer"
+        @click.stop="removeProduct()"
+      >
+        mdi-close
+      </v-icon>
+    </v-img>
 
-            <v-container  class="productDetails  d-flex flex-column pa-0  ma-0 " >
-                <div class=' d-flex justify-space-between align-end mb-0 px-1  kpoppins' >
-                    <span class='text-overline'>{{brandName}}</span>
-                   
-                </div>
-                <div class='d-flex details flex-column justify-space-around mt-0'>
-                    <span class='ma-0 px-1 grey--text text-md-h6 text-caption'>{{name}}</span>
-                    <span class='ma-0 px-1 d-flex justify-space-between '> 
-                        <span id='price'> {{ price}} </span>
-                        <span id="mrp"
-                            class=' text-caption text-decoration-line-through green--text '>
-                            $560
-                        </span>
-                    </span>
-                </div>
-                <div outlined tile class="">
-                    <v-btn @click="openDialog"  block class="secondary--text font-weight-bold" flat tile color="white" elevation="0">
-                        Add to bag
-                    </v-btn>
-                </div>
-            </v-container>
+    <v-container class="productDetails d-flex flex-column pa-0 ma-0">
+      <div class="d-flex justify-space-between align-end mb-0 px-1 kpoppins">
+        <span class="text-overline">{{ brandName }}</span>
+      </div>
+      <div class="d-flex details flex-column justify-space-around mt-0">
+        <span class="ma-0 px-1 grey--text text-md-h6 text-caption">{{
+          name
+        }}</span>
+        <span class="ma-0 px-1 d-flex justify-space-between">
+          <span id="price"> {{ price }} </span>
+          <span
+            id="mrp"
+            class="text-caption text-decoration-line-through green--text"
+          >
+            $560
+          </span>
+        </span>
+      </div>
+      <div outlined tile class="">
+        <v-btn
+          @click="openDialog"
+          block
+          class="secondary--text font-weight-bold"
+          flat
+          tile
+          color="white"
+          elevation="0"
+        >
+          Add to bag
+        </v-btn>
+      </div>
+    </v-container>
 
-            <selectVariation :productId="id" :open="addToCartDialog" @close="closeDialog" :loading="loadingVariation"/>
-       </v-card>
+    <selectVariation
+      :productId="id"
+      :open="addToCartDialog"
+      @close="closeDialog"
+      :loading="loadingVariation"
+    />
+  </v-card>
 </template>
 
-
 <script>
-import {mapActions} from "vuex"
-import selectVariation from "../products/selectVariation.vue"
-export default{
-    props:["name","brandName","price","image","id"],
-    components: {
-        selectVariation
+import { mapActions } from "vuex";
+import selectVariation from "../products/selectVariation.vue";
+export default {
+  props: ["name", "brandName", "price", "image", "id"],
+  components: {
+    selectVariation,
+  },
+  data: () => ({
+    addToCartDialog: false,
+    loadingVariation: true,
+  }),
+  methods: {
+    ...mapActions("wishlist", ["removeFromWishlist"]),
+    goToProduct() {
+      this.$router.push({ name: "product", params: { id: this.id } });
+    },
+    removeProduct() {
+      this.removeFromWishlist(this.id);
+    },
+    closeDialog(v) {
+      this.addToCartDialog = v;
     },
-    data: () => ({
-        addToCartDialog:false,
-        loadingVariation:true,
-    }),
-    methods:{
-        ...mapActions("wishlist",["removeFromWishlist"]),
-        goToProduct(){
-            this.$router.push({name:'product',params:{id:this.id}})
-        },
-        removeProduct(){
-            this.removeFromWishlist(this.id)
-        },
-        closeDialog(v){
-            this.addToCartDialog=v
-        },
 
-        async openDialog(){
-            this.addToCartDialog=true
-            console.log("fetching product")
-            let id = this.id;
-            let {errors,loading}=await this.$store.dispatch("products/getProduct", id);
-            this.errors=errors;
-            this.loadingVariation=loading;
-        }
+    async openDialog() {
+      this.addToCartDialog = true;
+      //console.log("fetching product")
+      let id = this.id;
+      let { errors, loading } = await this.$store.dispatch(
+        "products/getProduct",
+        id
+      );
+      this.errors = errors;
+      this.loadingVariation = loading;
     },
-    
-    
-}
+  },
+};
 </script>
 
 <style scoped lang="css">
+.product-image {
+  height: 40vh;
+}
 
- .product-image{
-     height:40vh;
- }
-
- @media screen and (min-width: 700px){
-
-     .product-image{
-         height: 400px;
-     }
-     
- }
-</style>
\ No newline at end of file
+@media screen and (min-width: 700px) {
+  .product-image {
+    height: 400px;
+  }
+}
+</style>
diff --git a/apps/frontend/store-front/src/main.js b/apps/frontend/store-front/src/main.js
index 2406057..6422e78 100644
--- a/apps/frontend/store-front/src/main.js
+++ b/apps/frontend/store-front/src/main.js
@@ -16,7 +16,7 @@ import store from "@/store";
 
 import VueSanitize from "vue-sanitize";
 
-// console.log("happy coding")
+// //console.log("happy coding")
 
 Vue.use(VueApollo);
 Vue.use(VueSanitize);
@@ -24,10 +24,10 @@ Vue.use(VueSanitize);
 //auth middle ware
 const authMiddleware = new ApolloLink((operation, forward) => {
   // add the authorization to the headers
-  console.log("auth middleware");
-  console.log(store.state.user);
+  //console.log("auth middleware");
+  //console.log(store.state.user);
   var token = store.state.user.auth.token;
-  console.log("JWT", token);
+  //console.log("JWT", token);
   operation.setContext({
     headers: {
       Authorization: token ? `JWT ${token}` : null,
@@ -44,20 +44,20 @@ const authMiddleware = new ApolloLink((operation, forward) => {
 // })
 
 const errorLink = onError(({ graphQLErrors, operation, forward }) => {
-  console.log("hey eror in request gql");
+  //console.log("hey eror in request gql");
   if (graphQLErrors) {
-    console.log("gql-errors", graphQLErrors);
+    //console.log("gql-errors", graphQLErrors);
     for (let err of graphQLErrors) {
-      console.log(err.message, err.extensions);
+      //console.log(err.message, err.extensions);
       switch (err.message) {
         case "You do not have permission to perform this action":
         case "You are not registerd as customer":
         case "Signature has expired":
-          console.log("refreshing ");
+          //console.log("refreshing ");
           return fromPromise(
             refreshTokenFlow().catch((error) => {
               // Handle token refresh errors e.g clear stored tokens, redirect to login
-              console.log("error while refresdhing", error);
+              //console.log("error while refresdhing", error);
               router.push("/login");
               return;
             })
@@ -74,7 +74,7 @@ const errorLink = onError(({ graphQLErrors, operation, forward }) => {
               });
 
               // retry the request, returning the new observable
-              console.log("forwarding");
+              //console.log("forwarding");
               return forward(operation);
             });
       }
@@ -87,7 +87,7 @@ const link = new HttpLink({
   fetch,
   credentials: "include",
   onError(err) {
-    console.log(err);
+    //console.log(err);
   },
 });
 
diff --git a/apps/frontend/store-front/src/router/index.js b/apps/frontend/store-front/src/router/index.js
index b8ea3ea..7e68991 100644
--- a/apps/frontend/store-front/src/router/index.js
+++ b/apps/frontend/store-front/src/router/index.js
@@ -1,187 +1,177 @@
-import Vue from 'vue';
-import Router from 'vue-router';
+import Vue from "vue";
+import Router from "vue-router";
 
+import homePage from "@/components/homePage.vue";
 
-import homePage from '@/components/homePage.vue';
+import cart from "../views/cart.vue";
 
-import cart from '../views/cart.vue';
+import login from "../views/login.vue";
+import signup from "../views/signup.vue";
+import verifyEmailSent from "../views/verifyEmailSent.vue";
+import confirmEmail from "../views/confirmEmail.vue";
+import forgotPassword from "../views/forgotPassword.vue";
+import resetPassword from "../views/passwordReset.vue";
 
-import login from '../views/login.vue';
-import signup from '../views/signup.vue';
-import verifyEmailSent from '../views/verifyEmailSent.vue';
-import confirmEmail from "../views/confirmEmail.vue"
-import forgotPassword from "../views/forgotPassword.vue"
-import resetPassword  from "../views/passwordReset.vue"
+import User from "../views/profile.vue";
+import orders from "@/components/profile/orders.vue";
+import addresses from "@/components/profile/addresses.vue";
+import account from "@/components/profile/account.vue";
 
+import productsPage from "../views/productsPage.vue";
+import productPage from "../views/product.vue";
 
-import User from '../views/profile.vue'
-import orders from '@/components/profile/orders.vue'
-import addresses from '@/components/profile/addresses.vue'
-import account from '@/components/profile/account.vue'
-
-import productsPage from'../views/productsPage.vue';
-import productPage from '../views/product.vue'
-
-import paymentPage from '../views/paymentPage.vue';
-import selectAdress from '../views/selectAddress.vue';
-import addAddress from "../views/addAddress.vue"
+import paymentPage from "../views/paymentPage.vue";
+import selectAdress from "../views/selectAddress.vue";
+import addAddress from "../views/addAddress.vue";
 import paymentStatus from "../views/paymentStatusPage.vue";
 
-import searchResults from '../views/searchResults.vue';
+import searchResults from "../views/searchResults.vue";
 
-import wishlist from '../views/wishlist.vue';
+import wishlist from "../views/wishlist.vue";
 //import store from '../store'
 
 Vue.use(Router);
 
 const routes = [
   {
-    path: '*',
-    name: 'home',
-    title: 'home',
+    path: "*",
+    name: "home",
+    title: "home",
     component: homePage,
   },
   {
-    path:'/products/:id',
-    name:'product',
-    component:productPage
+    path: "/products/:id",
+    name: "product",
+    component: productPage,
   },
   {
-    path:'/cart',
-    name:'cart',
-    component:cart,
-   
+    path: "/cart",
+    name: "cart",
+    component: cart,
   },
- 
-  {
-    path:'/login',
-    name:'login',
-    component:login
 
+  {
+    path: "/login",
+    name: "login",
+    component: login,
   },
   {
-    path:'/signup',
-    name:'signup',
-    component:signup
+    path: "/signup",
+    name: "signup",
+    component: signup,
   },
   {
-    path:'/verification-link-sent',
-    name:'verification-link-sent',
-    component:verifyEmailSent
+    path: "/verification-link-sent",
+    name: "verification-link-sent",
+    component: verifyEmailSent,
   },
   {
-    path:'/activate/:token',
-    name:'activate-account',
-    component:confirmEmail
+    path: "/activate/:token",
+    name: "activate-account",
+    component: confirmEmail,
   },
   {
-    path:"/forgot-password",
-    name:"forgot-password",
-    component:forgotPassword
+    path: "/forgot-password",
+    name: "forgot-password",
+    component: forgotPassword,
   },
   {
-    path:"/password-reset/:token",
-    name:"password-reset",
-    component:resetPassword
-
+    path: "/password-reset/:token",
+    name: "password-reset",
+    component: resetPassword,
   },
   {
-    path:'/profile',
-    name:'profile',
-    component:User,
-    meta:{requiresAuth:true},
-    children:[
+    path: "/profile",
+    name: "profile",
+    component: User,
+    meta: { requiresAuth: true },
+    children: [
       {
-        path:'/profile/orders',
-        name:'orders',
-        component:orders
+        path: "/profile/orders",
+        name: "orders",
+        component: orders,
       },
       {
-        path:'/profile/addresses',
-        name:'addresses',
-        component:addresses
+        path: "/profile/addresses",
+        name: "addresses",
+        component: addresses,
       },
       {
-        path:'/profile/account',
-        name:'account',
-        component:account
-      }
-
-    ]
+        path: "/profile/account",
+        name: "account",
+        component: account,
+      },
+    ],
   },
   {
-    path:'/products',
-    name:'products',
-    component:productsPage
+    path: "/products",
+    name: "products",
+    component: productsPage,
   },
   {
-    path:"/search-results/:query",
-    name:"search-results",
-    component:searchResults
+    path: "/search-results/:query",
+    name: "search-results",
+    component: searchResults,
   },
 
   {
-    path:'/wishlist',
-    name:'wishlist',
-    component:wishlist
+    path: "/wishlist",
+    name: "wishlist",
+    component: wishlist,
   },
   {
-    path:'/checkout/select-address',
-    name:'selectAddress',
-    component:selectAdress,
-    meta:{requiresAuth:true}
+    path: "/checkout/select-address",
+    name: "selectAddress",
+    component: selectAdress,
+    meta: { requiresAuth: true },
   },
   {
-    path:'/address/add-address',
-    name:'addAddress',
-    component:addAddress,
-    meta:{requiresAuth:true}
+    path: "/address/add-address",
+    name: "addAddress",
+    component: addAddress,
+    meta: { requiresAuth: true },
   },
   {
-    path:'/checkout/payment',
-    name:'payment',
-    component:paymentPage,
-    meta: { requiresAuth: true }
+    path: "/checkout/payment",
+    name: "payment",
+    component: paymentPage,
+    meta: { requiresAuth: true },
   },
   {
-    path:'/checkout/payment-status',
-    name:'paymentStatus',
-    component:paymentStatus,
-    meta: { requiresAuth: true }
-  }
-
-  
-
-  
+    path: "/checkout/payment-status",
+    name: "paymentStatus",
+    component: paymentStatus,
+    meta: { requiresAuth: true },
+  },
 ];
-const router= new Router({
-    mode:'history',
-    routes,
+const router = new Router({
+  mode: "history",
+  routes,
 });
 
 router.beforeEach((to, from, next) => {
-    // Check if the user is logged i
-   // console.log(JSON.stringify(store.getters))
-  const isUserLoggedIn = localStorage.getItem('Zivero_refresh_token')
-  if (to.matched.some(record => record.meta.requiresAuth)) {
+  // Check if the user is logged i
+  // //console.log(JSON.stringify(store.getters))
+  const isUserLoggedIn = localStorage.getItem("Zivero_refresh_token");
+  if (to.matched.some((record) => record.meta.requiresAuth)) {
     if (!isUserLoggedIn) {
-     // store.dispatch('logOut')
-     let redirect
-     if(from.name=="cart"){
-       redirect=from.fullPath
-     }else{
-       redirect=to.fullPath
-     }
-     next({
-        path: '/login',
-        query: { redirect: redirect }
-      })
+      // store.dispatch('logOut')
+      let redirect;
+      if (from.name == "cart") {
+        redirect = from.fullPath;
+      } else {
+        redirect = to.fullPath;
+      }
+      next({
+        path: "/login",
+        query: { redirect: redirect },
+      });
     } else {
-      next()
+      next();
     }
   } else {
-    next()
+    next();
   }
-})
+});
 
 export default router;
diff --git a/apps/frontend/store-front/src/store/modules/address/index.js b/apps/frontend/store-front/src/store/modules/address/index.js
index c4de004..737bbd5 100644
--- a/apps/frontend/store-front/src/store/modules/address/index.js
+++ b/apps/frontend/store-front/src/store/modules/address/index.js
@@ -39,12 +39,12 @@ const mutations = {
 
 const actions = {
   async fetchAddresses({ commit }) {
-    console.log("fetching");
+    //console.log("fetching");
     let { loading, data } = await client.query({
       query: fetchAddresses,
       fetchPolicy: "no-cache",
     });
-    console.log("addresses", data);
+    //console.log("addresses", data);
     commit("setAddresses", data);
     return loading;
   },
@@ -54,19 +54,19 @@ const actions = {
   //         query:fetchDefaultAddress,
   //         fetchPolicy:"no-cache"
   //     })
-  //     console.log("default",result)
+  //     //console.log("default",result)
   //     commit('setDefaultAddress',result.data.defaultAddress)
   // },
 
   async addAddress({ dispatch, commit }, address) {
-    // console.log("adding",address)
+    // //console.log("adding",address)
     commit("app/SET_LOADING", true, { root: true });
     let result = await client.mutate({
       mutation: ADD_ADDRESS,
       variables: { address: { ...address } },
     });
 
-    // console.log("add address",result)
+    // //console.log("add address",result)
     if (result.data.addAddress.address.id) {
       let { loading } = await dispatch("fetchAddresses");
       commit("app/SET_LOADING", loading, { root: true });
@@ -79,8 +79,8 @@ const actions = {
     delete updateValues["id"];
     delete updateValues["__typename"];
 
-    console.log("addressID", addressId);
-    console.log("address", updateValues);
+    //console.log("addressID", addressId);
+    //console.log("address", updateValues);
     let result = await client.mutate({
       mutation: UPDATE_ADDRESS,
       variables: { addressId: addressId, updateValues: { ...updateValues } },
@@ -93,14 +93,14 @@ const actions = {
   },
 
   async deleteAddress({ dispatch }, addressId) {
-    console.log("id", addressId);
+    //console.log("id", addressId);
     let result = await client.mutate({
       mutation: DELETE_ADDRESS,
       variables: { addressId: addressId },
     });
-    console.log("res", result);
+    //console.log("res", result);
     if (result.data.deleteAddress.success) {
-      console.log("fetching");
+      //console.log("fetching");
       dispatch("fetchAddresses");
       // dispatch("fetchDefaultAddress")
     }
diff --git a/apps/frontend/store-front/src/store/modules/cart/index.js b/apps/frontend/store-front/src/store/modules/cart/index.js
index 2eae674..a8df1ea 100644
--- a/apps/frontend/store-front/src/store/modules/cart/index.js
+++ b/apps/frontend/store-front/src/store/modules/cart/index.js
@@ -9,18 +9,18 @@ const state = () => ({
 
 const mutations = {
   addToCart(state, details) {
-    //console.log('cart',details)
+    ////console.log('cart',details)
     state.cart = details;
   },
 
   updateCart(state, details) {
-    //console.log('cart',details)
+    ////console.log('cart',details)
     state.cart = details;
   },
 };
 const actions = {
   async addToCart({ commit }, details) {
-    console.log(details);
+    //console.log(details);
     let { data, loading, errors } = await client.mutate({
       mutation: AddToCart,
       variables: {
@@ -29,7 +29,7 @@ const actions = {
         quantity: details.quantity,
       },
     });
-    console.log(data, errors);
+    //console.log(data, errors);
     let cart = data.AddToCart.cart;
 
     commit("addToCart", cart);
@@ -37,7 +37,7 @@ const actions = {
   },
 
   async updateCart({ commit }, details) {
-    console.log(details);
+    //console.log(details);
     commit("app/SET_LOADING", true, { root: true });
     let result = await client.mutate({
       mutation: UPDATE_CART,
@@ -48,13 +48,13 @@ const actions = {
       },
     });
     commit("app/SET_LOADING", result.loading, { root: true });
-    console.log(result);
+    //console.log(result);
     let cart = result.data.UpdateCart.cart;
     commit("updateCart", cart);
   },
 
   async fetchCart({ commit }) {
-    console.log("fetching cart");
+    //console.log("fetching cart");
     let result = await client.query({
       query: getCart,
       fetchPolicy: "no-cache",
diff --git a/apps/frontend/store-front/src/store/modules/checkout.js b/apps/frontend/store-front/src/store/modules/checkout.js
index 3f2df12..c340fc9 100644
--- a/apps/frontend/store-front/src/store/modules/checkout.js
+++ b/apps/frontend/store-front/src/store/modules/checkout.js
@@ -1,34 +1,33 @@
 import { client } from "../../main";
-import { checkoutSecret} from "../../graphql/Queries/checkout";
+import { checkoutSecret } from "../../graphql/Queries/checkout";
 
-const state = ()=>({
-    checkoutSecret:null,
-    shippingCharges:0,
-})
+const state = () => ({
+  checkoutSecret: null,
+  shippingCharges: 0,
+});
 
-const actions ={
-   async fetchCheckoutSecret({commit}){
-       let result = client.query({
-           query:checkoutSecret,
-           fetchPolicy:"no-cache"
-       })
-       console.log("result",result)
-       let secret = (await result).data.checkoutSecret.checkoutSecret
-       commit("setCheckoutSecret",secret)
-       return secret
-   }
-}
-
-const mutations ={
-    setCheckoutSecret(state,data){
-        state.checkoutSecret=data
-    }
-}
+const actions = {
+  async fetchCheckoutSecret({ commit }) {
+    let result = client.query({
+      query: checkoutSecret,
+      fetchPolicy: "no-cache",
+    });
+    //console.log("result",result)
+    let secret = (await result).data.checkoutSecret.checkoutSecret;
+    commit("setCheckoutSecret", secret);
+    return secret;
+  },
+};
 
+const mutations = {
+  setCheckoutSecret(state, data) {
+    state.checkoutSecret = data;
+  },
+};
 
 export default {
-    namespaced:true,
-    state,
-    actions,
-    mutations
-}
\ No newline at end of file
+  namespaced: true,
+  state,
+  actions,
+  mutations,
+};
diff --git a/apps/frontend/store-front/src/store/modules/filters/index.js b/apps/frontend/store-front/src/store/modules/filters/index.js
index e317846..c0e5708 100644
--- a/apps/frontend/store-front/src/store/modules/filters/index.js
+++ b/apps/frontend/store-front/src/store/modules/filters/index.js
@@ -1,148 +1,137 @@
-import { isEqual } from "apollo-utilities"
+import { isEqual } from "apollo-utilities";
 
 const defaultFilterInput = {
-    categories:null,
-    gender:"",
-    brands:null,
-    sortBy:"BetterDiscount"
-    
-}
-
-
-const state=()=>({
-   filterInput:{
-       categories:null,
-       gender:"",
-       brands:null,
-       sortBy:"BetterDiscount"
-       
-   },
-   variantFilterInput:[
+  categories: null,
+  gender: "",
+  brands: null,
+  sortBy: "BetterDiscount",
+};
+
+const state = () => ({
+  filterInput: {
+    categories: null,
+    gender: "",
+    brands: null,
+    sortBy: "BetterDiscount",
+  },
+  variantFilterInput: [
     //    {
     //        name:"size",
     //        values:["xl","l"]
     //    }
-   ],
-
-   //state variables for mobile panel 
-   mobilePanel:{
-
-        isVariantFilterSelected:false,
-        selectedFilterType:"brands",
-        selectedVariantType:"",
-   },
-
-   //ui variables for filter and sort
-   isSortingSheetOpen:false,
-
-   // sorting options not mutating this anywhere
-   sortingOptions: [
-        { title: 'Popularity' ,value:"Popularity" },
-        { title: 'Whats New' ,value:"WhatsNew" },
-        { title: 'Better Discount' ,value:"BetterDiscount" },
-        { title: 'Price : Low to High'  ,value:"PriceLowToHigh"},
-        { title: 'Price : High to Low', value:"PriceHighToLow" },
-   ],
-
-   // state variables products page
-   isFiltering:false
-})
-
-const getters={
-
-   areFiltersChanged(state){
-        return !isEqual(state.filterInput,defaultFilterInput)
-   }
-}
-
-const mutations={
-
-    SetFilterInput(state,{filterType,value}){
-        state.filterInput[filterType]=value;
-    },
-
-    SetVariantFilterInput(state,{filterType,value}){
-
-        if(state.variantFilterInput.length== 0  ){
-            state.variantFilterInput=[{"name":filterType,"values":value}]
-        }
-        for(let filter of state.variantFilterInput){
-           if ( filter.name==filterType){
-               filter.values=value
-           }
-        }
-    },
-
-    setMobilePanelState(state,{key,value}){
-        state.mobilePanel[key]=value
-    },
-    resetFilters(state){
-        state.filterInput = defaultFilterInput
-        state.variantFilterInput= [ ]
-        state.mobilePanel= { isVariantFilterSelected:false, selectedFilterType:"brands", selectedVariantType:"", }
-    },
-
-    toggleSortingSheet(state,value){
-        state.isSortingSheetOpen =value
-    },
-
-    setIsFiltering(state,value){
-        state.isFiltering=value
-    },
-
-    setFilters(state,filter){
-        state.filterInput = filter
+  ],
+
+  //state variables for mobile panel
+  mobilePanel: {
+    isVariantFilterSelected: false,
+    selectedFilterType: "brands",
+    selectedVariantType: "",
+  },
+
+  //ui variables for filter and sort
+  isSortingSheetOpen: false,
+
+  // sorting options not mutating this anywhere
+  sortingOptions: [
+    { title: "Popularity", value: "Popularity" },
+    { title: "Whats New", value: "WhatsNew" },
+    { title: "Better Discount", value: "BetterDiscount" },
+    { title: "Price : Low to High", value: "PriceLowToHigh" },
+    { title: "Price : High to Low", value: "PriceHighToLow" },
+  ],
+
+  // state variables products page
+  isFiltering: false,
+});
+
+const getters = {
+  areFiltersChanged(state) {
+    return !isEqual(state.filterInput, defaultFilterInput);
+  },
+};
+
+const mutations = {
+  SetFilterInput(state, { filterType, value }) {
+    state.filterInput[filterType] = value;
+  },
+
+  SetVariantFilterInput(state, { filterType, value }) {
+    if (state.variantFilterInput.length == 0) {
+      state.variantFilterInput = [{ name: filterType, values: value }];
     }
-}
-
-const actions ={
-
-    async filterProducts({dispatch,state},updateFilters) {
-       
-        let filters={...state.filterInput,variantFilters:state.variantFilterInput}
-        let payload ={filters,pageNb:1}
-        await dispatch("products/getProducts",payload,{root:true})
-        console.log("filter",state.filterInput)
-        
-        if (updateFilters == true) {
-          dispatch("products/updateFilters",state.filterInput,{root:true});
-         
-        }
-      
-      },
-    
-    async selectFilter({dispatch,commit},{filterType,value,doUpdate}){
-         
-        commit("SetFilterInput",{filterType,value})
-        commit("setIsFiltering",true)
-        await dispatch("filterProducts",doUpdate)
-        commit("setIsFiltering",false)
-    }, 
-
-    async selectVariantFilter({dispatch,commit},{filterType,value}){
-
-        commit("SetVariantFilterInput",{filterType,value})
-        dispatch("filterProducts",false)
-    } ,
-
-    async clearFilters({dispatch,commit}){
-        commit("setIsFiltering",true)
-        commit("resetFilters")
-        await dispatch("products/getProducts",{},{root:true})
-        commit("setIsFiltering",false)
-        await dispatch("products/getFilters",{},{root:true})
-        
-    },
-    
-
-
-}
-
+    for (let filter of state.variantFilterInput) {
+      if (filter.name == filterType) {
+        filter.values = value;
+      }
+    }
+  },
+
+  setMobilePanelState(state, { key, value }) {
+    state.mobilePanel[key] = value;
+  },
+  resetFilters(state) {
+    state.filterInput = defaultFilterInput;
+    state.variantFilterInput = [];
+    state.mobilePanel = {
+      isVariantFilterSelected: false,
+      selectedFilterType: "brands",
+      selectedVariantType: "",
+    };
+  },
+
+  toggleSortingSheet(state, value) {
+    state.isSortingSheetOpen = value;
+  },
+
+  setIsFiltering(state, value) {
+    state.isFiltering = value;
+  },
+
+  setFilters(state, filter) {
+    state.filterInput = filter;
+  },
+};
+
+const actions = {
+  async filterProducts({ dispatch, state }, updateFilters) {
+    let filters = {
+      ...state.filterInput,
+      variantFilters: state.variantFilterInput,
+    };
+    let payload = { filters, pageNb: 1 };
+    await dispatch("products/getProducts", payload, { root: true });
+    //console.log("filter",state.filterInput)
+
+    if (updateFilters == true) {
+      dispatch("products/updateFilters", state.filterInput, { root: true });
+    }
+  },
+
+  async selectFilter({ dispatch, commit }, { filterType, value, doUpdate }) {
+    commit("SetFilterInput", { filterType, value });
+    commit("setIsFiltering", true);
+    await dispatch("filterProducts", doUpdate);
+    commit("setIsFiltering", false);
+  },
+
+  async selectVariantFilter({ dispatch, commit }, { filterType, value }) {
+    commit("SetVariantFilterInput", { filterType, value });
+    dispatch("filterProducts", false);
+  },
+
+  async clearFilters({ dispatch, commit }) {
+    commit("setIsFiltering", true);
+    commit("resetFilters");
+    await dispatch("products/getProducts", {}, { root: true });
+    commit("setIsFiltering", false);
+    await dispatch("products/getFilters", {}, { root: true });
+  },
+};
 
 export default {
-    namespaced:true,
-    state,
-    getters,
-    mutations,
-    actions
-}
\ No newline at end of file
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions,
+};
diff --git a/apps/frontend/store-front/src/store/modules/orders/index.js b/apps/frontend/store-front/src/store/modules/orders/index.js
index 1f9f03e..0dc5cc9 100644
--- a/apps/frontend/store-front/src/store/modules/orders/index.js
+++ b/apps/frontend/store-front/src/store/modules/orders/index.js
@@ -17,7 +17,7 @@ const getters = {
   },
 
   totalOrderAmount: () => (order) => {
-    console.log(order);
+    //console.log(order);
     return (
       order.extraCharges +
       order.orderitemSet.reduce((total, item) => {
@@ -29,7 +29,7 @@ const getters = {
 
 const actions = {
   async createOrder({ rootState, commit }) {
-    console.log("rootstate", rootState);
+    //console.log("rootstate", rootState);
     let selectedAddress = rootState.addresses.selectedAddress;
     let orderInput = {
       addressId: selectedAddress.id,
diff --git a/apps/frontend/store-front/src/store/modules/products/actions.js b/apps/frontend/store-front/src/store/modules/products/actions.js
index 0c293b3..bc31440 100644
--- a/apps/frontend/store-front/src/store/modules/products/actions.js
+++ b/apps/frontend/store-front/src/store/modules/products/actions.js
@@ -11,11 +11,11 @@ import { fetchCategories } from "graphql-client/queries/filter";
 export default {
   async getProducts({ commit }, { filters, pageNb }) {
     let result;
-    console.log("fetching products");
+    //console.log("fetching products");
     if (pageNb === undefined) {
       pageNb = 1;
     }
-    console.log({ filters }, pageNb);
+    //console.log({ filters }, pageNb);
 
     result = await client.query({
       query: GET_PRODUCTS_QUERY,
@@ -33,8 +33,8 @@ export default {
 
   async getMoreProducts({ state, commit }) {
     let result;
-    console.log("adding more ", state.queryFilters);
-    console.log("fetching more products");
+    //console.log("adding more ", state.queryFilters);
+    //console.log("fetching more products");
     result = await client.query({
       query: GET_PRODUCTS_QUERY,
       variables: {
@@ -42,7 +42,7 @@ export default {
         page: state.products.pageNo + 1,
       },
     });
-    console.log("fetched", result);
+    //console.log("fetched", result);
     if (result) {
       commit("addMoreProducts", result.data.Products);
     }
@@ -68,7 +68,7 @@ export default {
       fetchPolicy: "no-cache",
     });
 
-    console.log(result.data);
+    //console.log(result.data);
     if (result.data) {
       commit("addFilters", result.data.filters);
     }
@@ -80,23 +80,23 @@ export default {
       fetchPolicy: "no-cache",
     });
 
-    console.log("getcategories", result.data);
+    //console.log("getcategories", result.data);
     if (result.data) {
       commit("addCategories", result.data.categories);
     }
   },
 
   async updateFilters({ commit }, data) {
-    console.log("updating Filters", data);
+    //console.log("updating Filters", data);
     //need data to pass for variables in form data should contain gender , category or brand property
     let result = await client.mutate({
       mutation: UPDATE_FILTERS,
       variables: { ...data },
     });
-    console.log("updatedFilters");
+    //console.log("updatedFilters");
     commit("updateFilters", result.data.updateFilters.updatedFilters);
-    console.log(result.data);
-    //console.log(result.data.updatedFilters)
+    //console.log(result.data);
+    ////console.log(result.data.updatedFilters)
   },
   async addTempFilter({ commit }, data) {
     commit("addTempFilters", data);
diff --git a/apps/frontend/store-front/src/store/modules/products/getters.js b/apps/frontend/store-front/src/store/modules/products/getters.js
index bbad21b..4bce8a5 100644
--- a/apps/frontend/store-front/src/store/modules/products/getters.js
+++ b/apps/frontend/store-front/src/store/modules/products/getters.js
@@ -5,7 +5,7 @@ export default {
   },
 
   productImages: () => (product) => {
-    console.log("product", product);
+    //console.log("product", product);
     let productImages = new Set(product.images);
 
     for (let variation of product.variations) {
@@ -18,7 +18,7 @@ export default {
 
   variations: (state) => {
     let product = state.product;
-    // console.log(product)
+    // //console.log(product)
     let filters = {};
     for (let v of product.variations) {
       for (let variant of v.variant) {
@@ -42,7 +42,7 @@ export default {
       let variant = variation.variant.map(clean);
 
       if (_.isEqual(variant, state.selected)) {
-        console.log("yes");
+        //console.log("yes");
         return variation.Id;
       } else {
         // id= variation.Id
@@ -63,13 +63,13 @@ export default {
     return filters;
   },
   variationFilters(state) {
-    //console.log(state.filters)
+    ////console.log(state.filters)
     let cleanedFilters = {};
     let variationFilters = state.filters.variationFilters;
     for (var filter of variationFilters) {
       cleanedFilters[filter.filter] = filter.values;
     }
-    console.log({ cleanedFilters });
+    //console.log({ cleanedFilters });
     return cleanedFilters;
   },
 };
diff --git a/apps/frontend/store-front/src/store/modules/products/mutations.js b/apps/frontend/store-front/src/store/modules/products/mutations.js
index e1b865c..2a3776a 100644
--- a/apps/frontend/store-front/src/store/modules/products/mutations.js
+++ b/apps/frontend/store-front/src/store/modules/products/mutations.js
@@ -1,75 +1,68 @@
-
 export default {
-    addProducts(state,data){
-        //console.log('addProducts',JSON.stringify(data))
-        state.products= data;
-    },
-    
-    addMoreProducts(state,data){
-        
-            state.products.products.push(...data.products);
-            state.products.pageNo=data.pageNo;
-    },
-
-    getProduct(state,product){
-        state.product=product
-    },
-    //selects a variant from product page
-    selectVariant(state,variant){
-        // console.log(state.selected)
-        let found=false
-        for(let v of state.selected){
-            if(v.name==variant.name){
-                v.value=variant.value
-                found=true
-                break;
-            }
-        }
-        if(!found){
-            state.selected.push(variant)
-        }
-    },
+  addProducts(state, data) {
+    ////console.log('addProducts',JSON.stringify(data))
+    state.products = data;
+  },
 
-    addFilters(state,data){
-        console.log("filter_data")
-        console.log(data)
-        state.filters=data;
-    },
+  addMoreProducts(state, data) {
+    state.products.products.push(...data.products);
+    state.products.pageNo = data.pageNo;
+  },
 
-    updateFilters(state,data){
-        console.log({data})
-        for(var filter in  data){
-             if(data[filter] !== null){
-                  console.log(filter)
-                  state.filters[filter] = data[filter]
-             }
-        }
-        console.log(state.filters)
-    },
-    addCategories(state,data){
-        if( state.categories.length==0){
-            state.categories.push(...data)
-        }
-       
-    },
-    addTempFilters(state,data){
-        state.tempFilters=data;
-    },
-    
-    // mutations related to filter queries
+  getProduct(state, product) {
+    state.product = product;
+  },
+  //selects a variant from product page
+  selectVariant(state, variant) {
+    // //console.log(state.selected)
+    let found = false;
+    for (let v of state.selected) {
+      if (v.name == variant.name) {
+        v.value = variant.value;
+        found = true;
+        break;
+      }
+    }
+    if (!found) {
+      state.selected.push(variant);
+    }
+  },
 
-    //updates the query filters 
-    updateQueryFilters(state,data){
-        console.log("updateQueryFilters")
-        console.log(data)
-        state.queryFilters=data;
-    },
+  addFilters(state, data) {
+    //console.log("filter_data")
+    //console.log(data)
+    state.filters = data;
+  },
 
-    clearProductsPage(state){
-        state.products = { }
+  updateFilters(state, data) {
+    //console.log({data})
+    for (var filter in data) {
+      if (data[filter] !== null) {
+        //console.log(filter)
+        state.filters[filter] = data[filter];
+      }
     }
+    //console.log(state.filters)
+  },
+  addCategories(state, data) {
+    if (state.categories.length == 0) {
+      state.categories.push(...data);
+    }
+  },
+  addTempFilters(state, data) {
+    state.tempFilters = data;
+  },
 
+  // mutations related to filter queries
 
+  //updates the query filters
+  updateQueryFilters(state, data) {
+    //console.log("updateQueryFilters")
+    //console.log(data)
+    state.queryFilters = data;
+  },
 
-
-}
+  clearProductsPage(state) {
+    state.products = {};
+  },
+};
diff --git a/apps/frontend/store-front/src/store/modules/search/index.js b/apps/frontend/store-front/src/store/modules/search/index.js
index bbb60b4..21109ad 100644
--- a/apps/frontend/store-front/src/store/modules/search/index.js
+++ b/apps/frontend/store-front/src/store/modules/search/index.js
@@ -38,7 +38,7 @@ const actions = {
     });
 
     let results = res.data;
-    console.log(results);
+    //console.log(results);
     commit("setAutocompleteResults", results.productAutocompleteResults);
   },
 
@@ -52,7 +52,7 @@ const actions = {
       variables: { search: query, pageNo: pageNo },
     });
     let results = res.data;
-    console.log(results);
+    //console.log(results);
     commit("setSearchResults", results.productSearchResults);
   },
 };
diff --git a/apps/frontend/store-front/src/store/modules/user/actions.js b/apps/frontend/store-front/src/store/modules/user/actions.js
index 7ddd2b5..8e6dd0f 100644
--- a/apps/frontend/store-front/src/store/modules/user/actions.js
+++ b/apps/frontend/store-front/src/store/modules/user/actions.js
@@ -21,7 +21,7 @@ export default {
         password: authDetails.password,
       },
     });
-    console.log(JSON.stringify(result));
+    //console.log(JSON.stringify(result));
     let data = result.data.tokenAuth;
     let refreshToken = data.refreshToken;
 
@@ -81,9 +81,9 @@ export default {
   },
 
   async userdetails({ commit }) {
-    console.log("fetching userdetails");
+    //console.log("fetching userdetails");
     let res = await client.query({ query: GET_CUSTOMER });
-    console.log(res);
+    //console.log(res);
     commit("SET_USER", res.data.customer);
   },
 
@@ -113,7 +113,7 @@ export default {
       variables: { token: code },
     });
     let data = result.data.verifyAccount;
-    console.log(data);
+    //console.log(data);
 
     if (data.success) {
       // commit('SET_VERIFIED',true)
@@ -135,7 +135,7 @@ export default {
       mutation: FORGOT_PASSWORD,
       variables: { email },
     });
-    console.log("data", data);
+    //console.log("data", data);
     return data.sendPasswordResetEmail;
   },
 
@@ -144,7 +144,7 @@ export default {
       mutation: RESET_PASSWORD,
       variables: { token, newPassword1, newPassword2 },
     });
-    console.log("reset", data);
+    //console.log("reset", data);
     return data.passwordReset;
   },
 };
diff --git a/apps/frontend/store-front/src/store/modules/user/mutations.js b/apps/frontend/store-front/src/store/modules/user/mutations.js
index 238f085..b6a18cd 100644
--- a/apps/frontend/store-front/src/store/modules/user/mutations.js
+++ b/apps/frontend/store-front/src/store/modules/user/mutations.js
@@ -1,43 +1,37 @@
 const parseJwt = (token) => {
-    try {
-      let payload = token.split('.')[1];
-      return JSON.parse(Buffer.from(payload, 'base64').toString('utf8'));
-    } catch (e) {
-      return null;
-    }
-  };
+  try {
+    let payload = token.split(".")[1];
+    return JSON.parse(Buffer.from(payload, "base64").toString("utf8"));
+  } catch (e) {
+    return null;
+  }
+};
 
 export default {
-    loginUser:(state,details)=>{
-        state.user=details.user;
-        console.table(details)
-        localStorage.setItem('Zivero_refresh_token', details.refreshToken)
-        // let payload=details.token.split(".")[0] // gets the base64 encode payload from token
-        // payload= Buffer.from(payload,["base64"]).toString()  // converts it to string
-        let payload = parseJwt(details.token);
-        console.log("payload",payload)
-        
-        state.auth.token=details.token;
-        state.auth.tokenExpireAt=payload.exp;        
-        state.auth.loginThrough=details.provider;
-        state.auth.isLoggedIn=true;
-        //let date= new Date();
-        //state.auth.lastlogin= date;
-        
-    },
-    LOGOUT_USER (state) {
-        //state.authStatus = ''
-        state.auth = {isLoggedIn:false} ;
-        state.user ={};
-        localStorage.removeItem('Zivero_refresh_token');
-    },
+  loginUser: (state, details) => {
+    state.user = details.user;
+    //console.table(details)
+    localStorage.setItem("Zivero_refresh_token", details.refreshToken);
+    // let payload=details.token.split(".")[0] // gets the base64 encode payload from token
+    // payload= Buffer.from(payload,["base64"]).toString()  // converts it to string
+    let payload = parseJwt(details.token);
+    //console.log("payload",payload)
 
-    SET_USER(state,data){
-      state.user = {...data.user,phoneNumber:data.phoneNumber}
-    }
-
-
-
-    
-}
+    state.auth.token = details.token;
+    state.auth.tokenExpireAt = payload.exp;
+    state.auth.loginThrough = details.provider;
+    state.auth.isLoggedIn = true;
+    //let date= new Date();
+    //state.auth.lastlogin= date;
+  },
+  LOGOUT_USER(state) {
+    //state.authStatus = ''
+    state.auth = { isLoggedIn: false };
+    state.user = {};
+    localStorage.removeItem("Zivero_refresh_token");
+  },
 
+  SET_USER(state, data) {
+    state.user = { ...data.user, phoneNumber: data.phoneNumber };
+  },
+};
diff --git a/apps/frontend/store-front/src/store/modules/wishlist/index.js b/apps/frontend/store-front/src/store/modules/wishlist/index.js
index c90c70b..84cd12c 100644
--- a/apps/frontend/store-front/src/store/modules/wishlist/index.js
+++ b/apps/frontend/store-front/src/store/modules/wishlist/index.js
@@ -22,7 +22,7 @@ const actions = {
       });
       commit("setWishlist", data.wishlist);
     } catch (error) {
-      console.log(error);
+      //console.log(error);
     }
   },
 
@@ -34,7 +34,7 @@ const actions = {
       });
       await dispatch("fetchWishlist");
     } catch (error) {
-      console.log(error);
+      //console.log(error);
     }
   },
 
@@ -46,7 +46,7 @@ const actions = {
       });
       await dispatch("fetchWishlist");
     } catch (error) {
-      console.log(error);
+      //console.log(error);
     }
   },
 };
diff --git a/apps/frontend/store-front/src/views/cart.vue b/apps/frontend/store-front/src/views/cart.vue
index 4fa6da5..a2e28b0 100644
--- a/apps/frontend/store-front/src/views/cart.vue
+++ b/apps/frontend/store-front/src/views/cart.vue
@@ -1,136 +1,140 @@
 <template>
+  <loading v-if="loading"> </loading>
 
-<loading v-if="loading"> </loading>
+  <div v-else>
+    <cart-empty v-if="cart.cartLength <= 0"></cart-empty>
 
-<div v-else>
-<cart-empty v-if="cart.cartLength <= 0"></cart-empty>
+    <div v-else class="container d-flex flex-wrap justify-around" id="cart">
+      <div class="products">
+        <!--cart products-->
 
-<div v-else class='container d-flex flex-wrap justify-around' id="cart">
-    <div class="products"> <!--cart products-->
-
-        <checkoutProgress cart="true"/>
+        <checkoutProgress cart="true" />
         <offer class="pa-2"></offer>
-        
-        <div class="pt-6 pb-2 text-subtitle-1 font-weight-bold darkGrey--text px-2  d-flex justify-space-between">
-            <span>My Shopping Bag({{cart.cartLength}} Item)</span>
-            <span>Total: Rs {{cart.totalPrice}}</span>
+
+        <div
+          class="pt-6 pb-2 text-subtitle-1 font-weight-bold darkGrey--text px-2 d-flex justify-space-between"
+        >
+          <span>My Shopping Bag({{ cart.cartLength }} Item)</span>
+          <span>Total: Rs {{ cart.totalPrice }}</span>
         </div>
-        <div id="cart-items"> 
-           
-            <cartProduct 
-                class='mt-2 mb-2'
-                v-for='cartObj in cart.products'
-                :key='uniqueKey(cartObj)'
-                :cartObject = 'cartObj'
-            ></cartProduct>
-            
+        <div id="cart-items">
+          <cartProduct
+            class="mt-2 mb-2"
+            v-for="cartObj in cart.products"
+            :key="uniqueKey(cartObj)"
+            :cartObject="cartObj"
+          ></cartProduct>
         </div>
-    </div>
-    <!--Price details --> 
-    <div class="price-details">
+      </div>
+      <!--Price details -->
+      <div class="price-details">
         <v-card
-            elevation="0"
-            outlined
-            rounded
-            class='mt-2 pa-2  pb-8 d-flex flex-column'>
-            <paymentDetails></paymentDetails>
-            
-            <v-btn @click='goToAddress()' color="primary" tile elevation="1" class="white--text place-order-btn">
-                PLACE ORDER
-            </v-btn>
-            <cartBottomnavigation class="bottom-navigation" @submit="goToAddress()" btnLabel="Place Order"> </cartBottomnavigation>
+          elevation="0"
+          outlined
+          rounded
+          class="mt-2 pa-2 pb-8 d-flex flex-column"
+        >
+          <paymentDetails></paymentDetails>
+
+          <v-btn
+            @click="goToAddress()"
+            color="primary"
+            tile
+            elevation="1"
+            class="white--text place-order-btn"
+          >
+            PLACE ORDER
+          </v-btn>
+          <cartBottomnavigation
+            class="bottom-navigation"
+            @submit="goToAddress()"
+            btnLabel="Place Order"
+          >
+          </cartBottomnavigation>
         </v-card>
-        
+      </div>
     </div>
-
-</div>
-</div>
-
+  </div>
 </template>
 
 <script>
+import cartProduct from "../components/cart/cart-product-preview.vue";
+import offer from "../components/offer.vue";
+import cartBottomnavigation from "../components/checkout/checkoutBottomNavigation.vue";
+import checkoutProgress from "../components/checkout/checkoutProgress.vue";
+import cartEmpty from "../components/cart/cartEmpty.vue";
+import loading from "../components/cart/loading.vue";
+import paymentDetails from "../components/checkout/paymentDetails.vue";
+import { refreshTokenFlow } from "../auth";
+import { mapState } from "vuex";
+export default {
+  name: "cart",
+  components: {
+    cartProduct,
+    cartBottomnavigation,
+    offer,
+    checkoutProgress,
+    cartEmpty,
+    loading,
+    paymentDetails,
+  },
+  async mounted() {
+    //console.log("fetching cart data")
+    await refreshTokenFlow();
 
-import cartProduct from '../components/cart/cart-product-preview.vue' ;
-import offer from '../components/offer.vue'
-import cartBottomnavigation from '../components/checkout/checkoutBottomNavigation.vue'
-import checkoutProgress from '../components/checkout/checkoutProgress.vue';
-import cartEmpty from '../components/cart/cartEmpty.vue';
-import loading from '../components/cart/loading.vue';
-import paymentDetails from '../components/checkout/paymentDetails.vue';
-import {refreshTokenFlow} from  "../auth"
-import {mapState} from 'vuex'
-    export default { 
-        name: 'cart',components: {
-            cartProduct,
-            cartBottomnavigation,
-            offer,
-            checkoutProgress,
-            cartEmpty,
-            loading,
-            paymentDetails
+    this.loading = await this.$store.dispatch("cart/fetchCart");
+  },
+  data() {
+    return {
+      loading: true,
+    };
+  },
+  computed: {
+    ...mapState("cart", ["cart"]),
+  },
 
-        },
-        async mounted(){
-            console.log("fetching cart data")
-            await refreshTokenFlow()
-            
-            this.loading= await this.$store.dispatch('cart/fetchCart');
-            
-        },
-        data(){
-            return {
-               loading:true,
-               
-            }
-        },
-        computed:{
-            ...mapState('cart',['cart']),
-
-            
-        },
-
-        methods:{
-            goToAddress(){
-                this.$router.push({name:"selectAddress"})
-            },
-            uniqueKey(cartObj){
-               let key = `${cartObj.product.id},${cartObj.variation.Id}`
-               return key
-            }
-        }
-    }    
+  methods: {
+    goToAddress() {
+      this.$router.push({ name: "selectAddress" });
+    },
+    uniqueKey(cartObj) {
+      let key = `${cartObj.product.id},${cartObj.variation.Id}`;
+      return key;
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-#cart{
-    .products{
-        width:100%;
-    }
-    .price-details{
-        width:100%;
-        margin-bottom: 60px;
+#cart {
+  .products {
+    width: 100%;
+  }
+  .price-details {
+    width: 100%;
+    margin-bottom: 60px;
+  }
+  .place-order-btn {
+    display: none;
+  }
+  @media only screen and (min-width: 600px) {
+    .products {
+      width: 65%;
     }
-    .place-order-btn{
-        display: none
+  }
+  @media only screen and (min-width: 600px) {
+    .price-details {
+      padding-left: 3%;
+      width: 30%;
     }
-    @media only screen and (min-width:600px){
-        .products{
-            width:65%;
-        }
-    }
-    @media only screen and (min-width:600px){
-        .price-details{
-            padding-left:3%;
-            width:30%;
-        }
 
-        .bottom-navigation{
-           display: none;
-        }
+    .bottom-navigation {
+      display: none;
+    }
 
-         .place-order-btn{
-            display: block
-        }
+    .place-order-btn {
+      display: block;
     }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/frontend/store-front/src/views/confirmEmail.vue b/apps/frontend/store-front/src/views/confirmEmail.vue
index 2bf6e20..fd24c69 100644
--- a/apps/frontend/store-front/src/views/confirmEmail.vue
+++ b/apps/frontend/store-front/src/views/confirmEmail.vue
@@ -1,55 +1,62 @@
 <template>
-<div>
-<v-overlay v-if="loading">
-  <div class="d-flex flex-column justify-center align-center">
-    <v-progress-circular  indeterminate >
-
-    </v-progress-circular>
-    <p class="text-h4 font-weight-bold text-center my-5 "> Verifying</p>
-  </div>
-</v-overlay>
-
-<v-sheet v-if="success==true"  height="90vh" class="d-flex justify-center align-center px-6 " >
-    <v-card width="350px" height="auto"  color="tan" class="pa-8  d-flex flex-column justify-space-center align-center">
-        <v-sheet height="100px" color="pink" width="100px" class="mb-5 mt-8  rounded-circle">
+  <div>
+    <v-overlay v-if="loading">
+      <div class="d-flex flex-column justify-center align-center">
+        <v-progress-circular indeterminate> </v-progress-circular>
+        <p class="text-h4 font-weight-bold text-center my-5">Verifying</p>
+      </div>
+    </v-overlay>
 
+    <v-sheet
+      v-if="success == true"
+      height="90vh"
+      class="d-flex justify-center align-center px-6"
+    >
+      <v-card
+        width="350px"
+        height="auto"
+        color="tan"
+        class="pa-8 d-flex flex-column justify-space-center align-center"
+      >
+        <v-sheet
+          height="100px"
+          color="pink"
+          width="100px"
+          class="mb-5 mt-8 rounded-circle"
+        >
         </v-sheet>
-        <p class="text-h4 font-weight-bold  mb-4 ">
-            Verified !
-        </p>
+        <p class="text-h4 font-weight-bold mb-4">Verified !</p>
         <p class="text-h6 mb-4 text-center">
-            Voila ! You have succesfully verified the account
+          Voila ! You have succesfully verified the account
         </p>
-        <p class="text-subtitle-1  text-center mb-4 font-weight-bold grey--text" >
-            Shop exclusive and premium deals now
+        <p class="text-subtitle-1 text-center mb-4 font-weight-bold grey--text">
+          Shop exclusive and premium deals now
         </p>
-        <v-btn block class="mb-8 green white--text">
-            Start Shopping
-        </v-btn>
-    </v-card>
-</v-sheet>
-<div>{{errors}}</div>
-</div>
+        <v-btn block class="mb-8 green white--text"> Start Shopping </v-btn>
+      </v-card>
+    </v-sheet>
+    <div>{{ errors }}</div>
+  </div>
 </template>
 
 <script>
-import { mapActions } from "vuex"
+import { mapActions } from "vuex";
 export default {
-    async mounted(){
-        let token = this.$route.params.token
-        console.log("token",token)
-        let {success,errors} = await this.confirmEmail(token)
-        this.success=success
-        this.errors=errors
-        this.loading = false
-    },
-    data:()=>({
-        loading:true,
-        success:false,
-        errors:null,
-    }),
-    methods:{
-        ...mapActions("user",["confirmEmail"])
-    }
-}
-</script>
\ No newline at end of file
+  async mounted() {
+    let token = this.$route.params.token;
+    //console.log("token",token)
+    let { success, errors } = await this.confirmEmail(token);
+    this.success = success;
+    this.errors = errors;
+    this.loading = false;
+  },
+  data: () => ({
+    loading: true,
+    success: false,
+    errors: null,
+  }),
+  methods: {
+    ...mapActions("user", ["confirmEmail"]),
+  },
+};
+</script>
diff --git a/apps/frontend/store-front/src/views/forgotPassword.vue b/apps/frontend/store-front/src/views/forgotPassword.vue
index 1d89c6f..eee284f 100644
--- a/apps/frontend/store-front/src/views/forgotPassword.vue
+++ b/apps/frontend/store-front/src/views/forgotPassword.vue
@@ -1,46 +1,51 @@
 <template>
-
-<v-container>
-    <p class="font-weight-bold text-h5">Forgot Your Password </p>
-     <v-text-field
-            v-model="email"
-            placeholder='myname@domain.com'
-            label="Email"
-            outlined color='#266150'
-            required >
+  <v-container>
+    <p class="font-weight-bold text-h5">Forgot Your Password</p>
+    <v-text-field
+      v-model="email"
+      placeholder="myname@domain.com"
+      label="Email"
+      outlined
+      color="#266150"
+      required
+    >
     </v-text-field>
-    <p v-if="success"> Link to reset passoword sent </p>
-     <p v-if="errors">{{errors}}</p>    
-     <v-btn @click='sendLink' tile color='#266150' width='100%' :disabled="loading" :loading="loading"
-        class ='white--text'
-        elevation='4'>
-        Send
+    <p v-if="success">Link to reset passoword sent</p>
+    <p v-if="errors">{{ errors }}</p>
+    <v-btn
+      @click="sendLink"
+      tile
+      color="#266150"
+      width="100%"
+      :disabled="loading"
+      :loading="loading"
+      class="white--text"
+      elevation="4"
+    >
+      Send
     </v-btn>
-</v-container>
-
+  </v-container>
 </template>
 
 <script>
-import { mapActions } from "vuex"
-export default{
-    data:()=>({
-        email:"",
-        loading:false.loading,
-        success:false,
-        errors:null,
-    }),
-    methods:{
-        ...mapActions("user",["forgotPassword"]),
-        async sendLink(){
-            this.loading=true
-            let {success,errors} = await this.forgotPassword(this.email)
-            console.log("forgot",success,errors)
-            this.success=success
-            this.errors=errors
-            this.loading =false
-
-        }
-    }
-}
-
-</script>
\ No newline at end of file
+import { mapActions } from "vuex";
+export default {
+  data: () => ({
+    email: "",
+    loading: false.loading,
+    success: false,
+    errors: null,
+  }),
+  methods: {
+    ...mapActions("user", ["forgotPassword"]),
+    async sendLink() {
+      this.loading = true;
+      let { success, errors } = await this.forgotPassword(this.email);
+      //console.log("forgot",success,errors)
+      this.success = success;
+      this.errors = errors;
+      this.loading = false;
+    },
+  },
+};
+</script>
diff --git a/apps/frontend/store-front/src/views/login.vue b/apps/frontend/store-front/src/views/login.vue
index 3a4612c..3e4514d 100644
--- a/apps/frontend/store-front/src/views/login.vue
+++ b/apps/frontend/store-front/src/views/login.vue
@@ -1,115 +1,121 @@
 <template>
+  <v-container class="login">
+    <p>Welcome Back</p>
 
-    <v-container class='login'>
-         <p>Welcome Back</p>
-        
-        <v-text-field
-                v-model="User.email"
-                placeholder='myname@domain.com'
-                label="Email"
-                outlined color='#266150'
-                required >
-        </v-text-field>
-        <v-text-field
-                v-model="User.password"
-                outlined color='#266150'
-                placeholder='*********'
-                label="password"
-                required >
-        </v-text-field>
-    
-        <v-btn @click='login' tile color='#266150' width='100%'
-            class ='white--text'
-            :elevation='loginElevation'>
-            Login
-        </v-btn>
-        <div class='mt-5'>
-        <span>New User</span>
-        <span class="ml-5">
-        <v-btn @click='signup' tile color='#000' width='40%'
-            class ='white--text'
-            :elevation='loginElevation'>
-            Sign Up
+    <v-text-field
+      v-model="User.email"
+      placeholder="myname@domain.com"
+      label="Email"
+      outlined
+      color="#266150"
+      required
+    >
+    </v-text-field>
+    <v-text-field
+      v-model="User.password"
+      outlined
+      color="#266150"
+      placeholder="*********"
+      label="password"
+      required
+    >
+    </v-text-field>
+
+    <v-btn
+      @click="login"
+      tile
+      color="#266150"
+      width="100%"
+      class="white--text"
+      :elevation="loginElevation"
+    >
+      Login
+    </v-btn>
+    <div class="mt-5">
+      <span>New User</span>
+      <span class="ml-5">
+        <v-btn
+          @click="signup"
+          tile
+          color="#000"
+          width="40%"
+          class="white--text"
+          :elevation="loginElevation"
+        >
+          Sign Up
         </v-btn>
-        </span>
+      </span>
     </div>
-    <p id='forgot_password' @click='$router.push("forgot-password")'>Forgot Password</p>
-    </v-container>
-
-
-
-
+    <p id="forgot_password" @click="$router.push('forgot-password')">
+      Forgot Password
+    </p>
+  </v-container>
 </template>
 
 <script>
 //import {LOGIN_EMAIL} from '../graphql/mutations/auth.js';
 
-    export default { 
-        name: 'login',
-        components: {
-        },
-        data(){
-            return{
-                success:false,
-                User:{
-                    
-                    email:"super@gmail.com",
-                    password:"test123",
-            
-                },
-                
-            
-            }
-        },
-        computed:{
-           
-        },
+export default {
+  name: "login",
+  components: {},
+  data() {
+    return {
+      success: false,
+      User: {
+        email: "super@gmail.com",
+        password: "test123",
+      },
+    };
+  },
+  computed: {},
 
-
-        methods:{
-            async login(){
-                //console.log(JSON.stringify(this.$store.state))
-                let success = await this.$store.dispatch('user/logInWithEmail',this.User);
-                let redirect_url = new URLSearchParams(window.location.search).get('redirect')
-                console.log("success",success)
-                if(success){
-                    this.success = true;
-                    if(redirect_url !== null && redirect_url !== undefined && redirect_url !== ''){
-                        this.$router.push(redirect_url)
-                    }else{
-                        this.$router.push({name:"home"})
-                    }
-                }
-                else{
-                    this.success = false;
-                }
-              
-            },
-            signup(){
-                this.$router.push('signup');
-            }
+  methods: {
+    async login() {
+      ////console.log(JSON.stringify(this.$store.state))
+      let success = await this.$store.dispatch(
+        "user/logInWithEmail",
+        this.User
+      );
+      let redirect_url = new URLSearchParams(window.location.search).get(
+        "redirect"
+      );
+      //console.log("success",success)
+      if (success) {
+        this.success = true;
+        if (
+          redirect_url !== null &&
+          redirect_url !== undefined &&
+          redirect_url !== ""
+        ) {
+          this.$router.push(redirect_url);
+        } else {
+          this.$router.push({ name: "home" });
         }
-
-    }    
+      } else {
+        this.success = false;
+      }
+    },
+    signup() {
+      this.$router.push("signup");
+    },
+  },
+};
 </script>
 <style scoped>
-
-.login{
-    text-align: center;
+.login {
+  text-align: center;
 }
 .login p:nth-child(1) {
-    font-family: Cormorant Garamond,'serif';
-    font-weight: 400;
-    font-size: 40px;
-    color:#4f4846;
+  font-family: Cormorant Garamond, "serif";
+  font-weight: 400;
+  font-size: 40px;
+  color: #4f4846;
 }
 
-
-#forgot_password{
-margin-top: 20px;
-color:grey;
-font-weight: bold;
-font-size:18px;
-
+#forgot_password {
+  margin-top: 20px;
+  color: grey;
+  font-weight: bold;
+  font-size: 18px;
 }
 </style>
diff --git a/apps/frontend/store-front/src/views/paymentPage.vue b/apps/frontend/store-front/src/views/paymentPage.vue
index 6bafe19..bd483da 100644
--- a/apps/frontend/store-front/src/views/paymentPage.vue
+++ b/apps/frontend/store-front/src/views/paymentPage.vue
@@ -1,194 +1,212 @@
 <template>
-<loading v-if="checkoutLoading" />
-<div v-else>
-
-    <checkoutProgress class="mt-6" payment="true"/>
-
-    <div  class='container d-flex flex-row flex-wrap justify-center' id="checkout">
-        <div class="paymentOptions" > <!--pAYMENT OPTIONS-->
-
-        
-            <offer class="pa-2"></offer>
-            
-            <div class="my-4">
-                <p class="text-h5 font-weight-bold black--text ">Payment</p>
-                <p class="text-subtitle-1 grey--text">All transactions are secure and encrypted</p>
-            </div>
-            <paymentErrors :errors="stripePaymentErrors" />
-            <form id="payment-form">
-                <div id="payment-element" ref="paymentElement">
-                    <v-skeleton-loader type="card"></v-skeleton-loader>
-                    <!-- Elements will create form elements here -->
-                </div>
-                <div id="error-message">
-                    <!-- Display error message to your customers here -->
-                </div>
-            </form>
-            
+  <loading v-if="checkoutLoading" />
+  <div v-else>
+    <checkoutProgress class="mt-6" payment="true" />
+
+    <div
+      class="container d-flex flex-row flex-wrap justify-center"
+      id="checkout"
+    >
+      <div class="paymentOptions">
+        <!--pAYMENT OPTIONS-->
+
+        <offer class="pa-2"></offer>
+
+        <div class="my-4">
+          <p class="text-h5 font-weight-bold black--text">Payment</p>
+          <p class="text-subtitle-1 grey--text">
+            All transactions are secure and encrypted
+          </p>
         </div>
-        <!--Price details --> 
-        <div class="price-details">
-            <v-card
-                elevation="0"
-                outlined
-                rounded
-                class='mt-2 pa-2  pb-8 d-flex flex-column'>
-                <order-loading v-if="orderLoading"></order-loading>
-                <order :order="activeOrder" v-else ></order>
-                <p  v-if="!orderLoading"> Incl Shipping Charges:   Rs {{activeOrder.extraCharges }}</p>
-                <v-btn @click='submitPayment()' color="#266150" :loading="btnLoading" :disabled="btnLoading" tile elevation="1" class="white--text place-order-btn">
-                    PLACE ORDER
-                </v-btn>
-                <checkoutBottomNavigation :loading="btnLoading" :disabled="btnLoading"  @submit="submitPayment()" btnLabel="Place Order"  class="bottom-navigation"> </checkoutBottomNavigation> 
-            </v-card>
-            
-        </div>
-
+        <paymentErrors :errors="stripePaymentErrors" />
+        <form id="payment-form">
+          <div id="payment-element" ref="paymentElement">
+            <v-skeleton-loader type="card"></v-skeleton-loader>
+            <!-- Elements will create form elements here -->
+          </div>
+          <div id="error-message">
+            <!-- Display error message to your customers here -->
+          </div>
+        </form>
+      </div>
+      <!--Price details -->
+      <div class="price-details">
+        <v-card
+          elevation="0"
+          outlined
+          rounded
+          class="mt-2 pa-2 pb-8 d-flex flex-column"
+        >
+          <order-loading v-if="orderLoading"></order-loading>
+          <order :order="activeOrder" v-else></order>
+          <p v-if="!orderLoading">
+            Incl Shipping Charges: Rs {{ activeOrder.extraCharges }}
+          </p>
+          <v-btn
+            @click="submitPayment()"
+            color="#266150"
+            :loading="btnLoading"
+            :disabled="btnLoading"
+            tile
+            elevation="1"
+            class="white--text place-order-btn"
+          >
+            PLACE ORDER
+          </v-btn>
+          <checkoutBottomNavigation
+            :loading="btnLoading"
+            :disabled="btnLoading"
+            @submit="submitPayment()"
+            btnLabel="Place Order"
+            class="bottom-navigation"
+          >
+          </checkoutBottomNavigation>
+        </v-card>
+      </div>
     </div>
-
-</div>
+  </div>
 </template>
 
 <script>
-
-import offer from '../components/offer.vue'
-import checkoutProgress from '../components/checkout/checkoutProgress.vue';
-import loading from '../components/checkout/loading.vue';
-import orderLoading from '../components/orders/orderloading.vue';
+import offer from "../components/offer.vue";
+import checkoutProgress from "../components/checkout/checkoutProgress.vue";
+import loading from "../components/checkout/loading.vue";
+import orderLoading from "../components/orders/orderloading.vue";
 // import paymentDetails from '../components/checkout/paymentDetails.vue';
-import checkoutBottomNavigation from "../components/checkout/checkoutBottomNavigation.vue"
-import paymentErrors from '../components/checkout/paymentErrors.vue';
-import order from '../components/orders/order.vue';
-import {mapState,mapActions} from 'vuex'
-    export default { 
-        name: 'cart',
-        components: {  
-            offer,
-            checkoutProgress,        
-            loading,
-            // paymentDetails,
-            checkoutBottomNavigation,
-            paymentErrors,
-            order,
-            orderLoading,
-
-        },
-        async mounted(){
-          
-            
-            let secret = await this.fetchCheckoutSecret()
-            if (secret){
-                this.checkoutLoading=false
-                this.includeStripe('js.stripe.com/v3/', function(){
-                    this.initStripe();
-                }.bind(this) );        
-                               
-            }
-
-            this.orderLoading = await this.fetchActiveOrder()
-        },
-        data(){
-            return {
-               stripeLoading:true,
-               checkoutLoading:true,
-               orderLoading:true,
-               stripe:null,
-               elements:null,
-               stripePaymentErrors:null,
-               btnLoading:false,
-              
-               
-            }
-        },
-        computed:{
-            ...mapState('cart',['cart']),
-            ...mapState("checkout",["checkoutSecret"]),
-            ...mapState("orders",["activeOrder"]),
+import checkoutBottomNavigation from "../components/checkout/checkoutBottomNavigation.vue";
+import paymentErrors from "../components/checkout/paymentErrors.vue";
+import order from "../components/orders/order.vue";
+import { mapState, mapActions } from "vuex";
+export default {
+  name: "cart",
+  components: {
+    offer,
+    checkoutProgress,
+    loading,
+    // paymentDetails,
+    checkoutBottomNavigation,
+    paymentErrors,
+    order,
+    orderLoading,
+  },
+  async mounted() {
+    let secret = await this.fetchCheckoutSecret();
+    if (secret) {
+      this.checkoutLoading = false;
+      this.includeStripe(
+        "js.stripe.com/v3/",
+        function () {
+          this.initStripe();
+        }.bind(this)
+      );
+    }
 
-            
+    this.orderLoading = await this.fetchActiveOrder();
+  },
+  data() {
+    return {
+      stripeLoading: true,
+      checkoutLoading: true,
+      orderLoading: true,
+      stripe: null,
+      elements: null,
+      stripePaymentErrors: null,
+      btnLoading: false,
+    };
+  },
+  computed: {
+    ...mapState("cart", ["cart"]),
+    ...mapState("checkout", ["checkoutSecret"]),
+    ...mapState("orders", ["activeOrder"]),
+  },
+
+  methods: {
+    ...mapActions("checkout", ["fetchCheckoutSecret"]),
+    ...mapActions("orders", ["fetchActiveOrder"]),
+    submit() {
+      //console.log("paying")
+    },
+    includeStripe(URL, callback) {
+      let documentTag = document,
+        tag = "script",
+        object = documentTag.createElement(tag),
+        scriptTag = documentTag.getElementsByTagName(tag)[0];
+      object.src = "//" + URL;
+      if (callback) {
+        object.addEventListener(
+          "load",
+          function (e) {
+            callback(null, e);
+          },
+          false
+        );
+      }
+      scriptTag.parentNode.insertBefore(object, scriptTag);
+    },
+
+    initStripe() {
+      this.stripe = window.Stripe("pk_test_Jv6wYlXEfjDe5XS5C2MpqEuR00xUQo6Buk");
+      this.mountElements();
+    },
+    mountElements() {
+      const options = {
+        clientSecret: this.checkoutSecret,
+        // // Fully customizable with appearance API.
+        // appearance: {/*...*/},
+      };
+      this.elements = this.stripe.elements(options);
+      const paymentElement = this.elements.create("payment");
+      paymentElement.mount("#payment-element");
+    },
+    async submitPayment() {
+      let elements = this.elements;
+      this.btnLoading = true;
+      const { error } = await this.stripe.confirmPayment({
+        elements,
+        confirmParams: {
+          return_url: "http://localhost:8080/checkout/payment-status",
         },
-
-        methods:{
-            ...mapActions("checkout",["fetchCheckoutSecret"]),
-            ...mapActions("orders",["fetchActiveOrder"]),
-            submit(){
-                console.log("paying")
-            },
-            includeStripe( URL, callback ){
-                let documentTag = document, tag = 'script',
-                    object = documentTag.createElement(tag),
-                    scriptTag = documentTag.getElementsByTagName(tag)[0];
-                object.src = '//' + URL;
-                if (callback) { object.addEventListener('load', function (e) { callback(null, e); }, false); }
-                scriptTag.parentNode.insertBefore(object, scriptTag);
-            },
-
-            initStripe(){
-               this.stripe = window.Stripe("pk_test_Jv6wYlXEfjDe5XS5C2MpqEuR00xUQo6Buk")
-               this.mountElements()
-            },
-            mountElements(){
-                const options = {
-                    clientSecret: this.checkoutSecret,
-                    // // Fully customizable with appearance API.
-                    // appearance: {/*...*/},
-                };
-                this.elements = this.stripe.elements(options);
-                const paymentElement = this.elements.create('payment');
-                paymentElement.mount("#payment-element");
-
-            },
-            async submitPayment(){
-                let elements= this.elements
-                this.btnLoading=true
-                const {error} = await this.stripe.confirmPayment({
-                    elements,
-                    confirmParams: {
-                        return_url: 'http://localhost:8080/checkout/payment-status',
-                    },
-                });
-
-                if(error){
-                    this.btnLoading=false
-                    this.stripePaymentErrors = error
-                }
-            }
-            
-        }
-    }    
+      });
+
+      if (error) {
+        this.btnLoading = false;
+        this.stripePaymentErrors = error;
+      }
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-
-#checkout{
-    .paymentOptions{
-        width:100%;
-    }
-    .price-details{
-        width:100%;
-        margin-bottom: 60px;
+#checkout {
+  .paymentOptions {
+    width: 100%;
+  }
+  .price-details {
+    width: 100%;
+    margin-bottom: 60px;
+  }
+  .place-order-btn {
+    display: none;
+  }
+  @media only screen and (min-width: 600px) {
+    .paymentOptions {
+      width: 50%;
     }
-    .place-order-btn{
-        display: none
+  }
+  @media only screen and (min-width: 600px) {
+    .price-details {
+      padding-left: 3%;
+      width: 40%;
     }
-    @media only screen and (min-width:600px){
-        .paymentOptions{
-            width:50%;
-        }
-    }
-    @media only screen and (min-width:600px){
-        .price-details{
-            padding-left:3%;
-            width:40%;
-        }
 
-        .bottom-navigation{
-           display: none;
-        }
+    .bottom-navigation {
+      display: none;
+    }
 
-         .place-order-btn{
-            display: block
-        }
+    .place-order-btn {
+      display: block;
     }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/frontend/store-front/src/views/paymentStatusPage.vue b/apps/frontend/store-front/src/views/paymentStatusPage.vue
index 9e98611..372ead5 100644
--- a/apps/frontend/store-front/src/views/paymentStatusPage.vue
+++ b/apps/frontend/store-front/src/views/paymentStatusPage.vue
@@ -1,120 +1,159 @@
 <template>
-
-<div v-if="paymentStatus" class="py-10 d-flex justify-center align-center">
-  
-  <div class="d-flex flex-column justify-center align-center " v-if="paymentStatus=='succeeded'">
-      <lottie-player  v-if="paymentStatus=='succeeded'" src="https://assets5.lottiefiles.com/packages/lf20_uqjdfmt5.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"    autoplay></lottie-player>
-      <p class="text-h5 py-6 font-weight-bold grey--text" >
-          Payment Successfull . Order Fullfilment in Progress .
+  <div v-if="paymentStatus" class="py-10 d-flex justify-center align-center">
+    <div
+      class="d-flex flex-column justify-center align-center"
+      v-if="paymentStatus == 'succeeded'"
+    >
+      <lottie-player
+        v-if="paymentStatus == 'succeeded'"
+        src="https://assets5.lottiefiles.com/packages/lf20_uqjdfmt5.json"
+        background="transparent"
+        speed="1"
+        style="width: 300px; height: 300px"
+        autoplay
+      ></lottie-player>
+      <p class="text-h5 py-6 font-weight-bold grey--text">
+        Payment Successfull . Order Fullfilment in Progress .
       </p>
-  </div>
+    </div>
 
-  <div class="d-flex flex-column justify-center align-center " v-else-if="paymentStatus=='processing'">
-      <lottie-player v-if="paymentStatus=='processing'" src="https://assets10.lottiefiles.com/datafiles/SOR469Hz9YCOk8z/data.json"  background="transparent"  speed="0.3"  style="width: 300px; height: 300px;"  loop  autoplay></lottie-player>
-      <p class="text-h5 py-6 font-weight-bold grey--text" >
-          processing your payment .
+    <div
+      class="d-flex flex-column justify-center align-center"
+      v-else-if="paymentStatus == 'processing'"
+    >
+      <lottie-player
+        v-if="paymentStatus == 'processing'"
+        src="https://assets10.lottiefiles.com/datafiles/SOR469Hz9YCOk8z/data.json"
+        background="transparent"
+        speed="0.3"
+        style="width: 300px; height: 300px"
+        loop
+        autoplay
+      ></lottie-player>
+      <p class="text-h5 py-6 font-weight-bold grey--text">
+        processing your payment .
       </p>
-  </div>
+    </div>
 
-  <div class="d-flex flex-column justify-center align-center " v-else-if="paymentStatus=='requires_payment_method'">
-     <lottie-player src="https://assets7.lottiefiles.com/packages/lf20_xw6o0yii.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"    autoplay></lottie-player>
-      <p class="text-h5 py-6 font-weight-bold grey--text" >
+    <div
+      class="d-flex flex-column justify-center align-center"
+      v-else-if="paymentStatus == 'requires_payment_method'"
+    >
+      <lottie-player
+        src="https://assets7.lottiefiles.com/packages/lf20_xw6o0yii.json"
+        background="transparent"
+        speed="1"
+        style="width: 300px; height: 300px"
+        autoplay
+      ></lottie-player>
+      <p class="text-h5 py-6 font-weight-bold grey--text">
         Your payment was not successful, please try again.
       </p>
-  </div>
+    </div>
 
-  <div class="d-flex flex-column justify-center align-center " v-else>
-     <lottie-player src="https://assets7.lottiefiles.com/packages/lf20_xw6o0yii.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"    autoplay></lottie-player>
-      <p class="text-h5 py-6 font-weight-bold grey--text" >
+    <div class="d-flex flex-column justify-center align-center" v-else>
+      <lottie-player
+        src="https://assets7.lottiefiles.com/packages/lf20_xw6o0yii.json"
+        background="transparent"
+        speed="1"
+        style="width: 300px; height: 300px"
+        autoplay
+      ></lottie-player>
+      <p class="text-h5 py-6 font-weight-bold grey--text">
         Your payment was not successful, Some Thing WEnt Wong
       </p>
+    </div>
   </div>
-
-</div>
 </template>
 
-
 <script>
-
 export default {
-    
-    
-    mounted(){
-        this.includeStripe('js.stripe.com/v3/', function(){
-            this.initStripe();
-            this.fetchPaymentStatus()
-        }.bind(this) ); 
-
+  mounted() {
+    this.includeStripe(
+      "js.stripe.com/v3/",
+      function () {
+        this.initStripe();
+        this.fetchPaymentStatus();
+      }.bind(this)
+    );
+  },
+  data() {
+    return {
+      stripe: null,
+      paymentStatus: null,
+    };
+  },
+  computed: {
+    clientSecret() {
+      return new URLSearchParams(window.location.search).get(
+        "payment_intent_client_secret"
+      );
     },
-    data(){
-        return {
-            stripe:null,
-            paymentStatus: null,
-            
-        }
+  },
+  methods: {
+    sleep(ms) {
+      return new Promise((resolve) => setTimeout(resolve, ms));
     },
-    computed:{
-      clientSecret(){
-        return new URLSearchParams(window.location.search).get(
-                "payment_intent_client_secret"
+    includeStripe(URL, callback) {
+      let documentTag = document,
+        tag = "script",
+        object = documentTag.createElement(tag),
+        scriptTag = documentTag.getElementsByTagName(tag)[0];
+      object.src = "//" + URL;
+      if (callback) {
+        object.addEventListener(
+          "load",
+          function (e) {
+            callback(null, e);
+          },
+          false
         );
-      },
-
+      }
+      scriptTag.parentNode.insertBefore(object, scriptTag);
     },
-    methods:{
-        sleep(ms) {
-            return new Promise(resolve => setTimeout(resolve, ms));
-        },
-        includeStripe( URL, callback ){
-                let documentTag = document, tag = 'script',
-                    object = documentTag.createElement(tag),
-                    scriptTag = documentTag.getElementsByTagName(tag)[0];
-                object.src = '//' + URL;
-                if (callback) { object.addEventListener('load', function (e) { callback(null, e); }, false); }
-                scriptTag.parentNode.insertBefore(object, scriptTag);
-            },
 
-        initStripe(){
-            this.stripe = window.Stripe("pk_test_Jv6wYlXEfjDe5XS5C2MpqEuR00xUQo6Buk")
-        },
+    initStripe() {
+      this.stripe = window.Stripe("pk_test_Jv6wYlXEfjDe5XS5C2MpqEuR00xUQo6Buk");
+    },
 
-        async fetchPaymentStatus(){
-           console.log("fetching payment status")
-           let clientSecret = this.clientSecret
-           if (!clientSecret) {
-                return;
-            }
+    async fetchPaymentStatus() {
+      //console.log("fetching payment status")
+      let clientSecret = this.clientSecret;
+      if (!clientSecret) {
+        return;
+      }
 
-            const { paymentIntent } = await this.stripe.retrievePaymentIntent(clientSecret);
-            // this.paymentStatus=paymentIntent.status
-            this.paymentStatus ="processing"
-            await this.sleep(5000)
-             this.paymentStatus ="succeeded"
-            // this.paymentStatus="requires_payment_method"
-            switch (paymentIntent.status) {
-                // case "succeeded":
-                // // this.paymentStatus= "Payment succeeded!"
-                // break;
-                case "processing":
-                // this.paymentStatus= "Your payment is processing.";
-                await this.sleep(500)
-                await this.fetchPaymentStatus()
-                break;
-                // case "requires_payment_method":
-                // // this.paymentStatus= "Your payment was not successful, please try again.";
-                // break;
-                // default:
-                // // this.paymentStatus="Something went wrong.";
-                // break;
-            }
-        },
-    }
-}
+      const { paymentIntent } = await this.stripe.retrievePaymentIntent(
+        clientSecret
+      );
+      // this.paymentStatus=paymentIntent.status
+      this.paymentStatus = "processing";
+      await this.sleep(5000);
+      this.paymentStatus = "succeeded";
+      // this.paymentStatus="requires_payment_method"
+      switch (paymentIntent.status) {
+        // case "succeeded":
+        // // this.paymentStatus= "Payment succeeded!"
+        // break;
+        case "processing":
+          // this.paymentStatus= "Your payment is processing.";
+          await this.sleep(500);
+          await this.fetchPaymentStatus();
+          break;
+        // case "requires_payment_method":
+        // // this.paymentStatus= "Your payment was not successful, please try again.";
+        // break;
+        // default:
+        // // this.paymentStatus="Something went wrong.";
+        // break;
+      }
+    },
+  },
+};
 </script>
 
-
 <style>
-.root{
-    height: 100vh;
+.root {
+  height: 100vh;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/frontend/store-front/src/views/product.vue b/apps/frontend/store-front/src/views/product.vue
index 52eb082..6900f4d 100644
--- a/apps/frontend/store-front/src/views/product.vue
+++ b/apps/frontend/store-front/src/views/product.vue
@@ -194,7 +194,7 @@ export default {
     ...mapState("products", ["product", "selected"]),
     ...mapGetters("products", ["variations", "variationId", "productImages"]),
     isDisabled() {
-      console.log("vid", this.variationId);
+      //console.log("vid", this.variationId);
       return this.variationId === null || this.addingToCart;
     },
     sanitizedDescription() {
@@ -205,7 +205,7 @@ export default {
     ...mapMutations("products", ["selectVariant"]),
     ...mapActions("cart", ["addToCart"]),
     buttonSelected(name, value) {
-      //console.log(name + value)
+      ////console.log(name + value)
       for (let i of this.selected) {
         if ((i.name == name) & (i.value == value)) {
           return true;
@@ -225,7 +225,7 @@ export default {
     },
 
     async add2Cart() {
-      //console.log('p',this)
+      ////console.log('p',this)
       this.addingToCart = true;
       let details = {
         productId: this.product.id,
diff --git a/apps/frontend/store-front/src/views/productsPage.vue b/apps/frontend/store-front/src/views/productsPage.vue
index 9094760..d105f7c 100644
--- a/apps/frontend/store-front/src/views/productsPage.vue
+++ b/apps/frontend/store-front/src/views/productsPage.vue
@@ -75,18 +75,18 @@ export default {
     this.productsLoading = true;
     let query = this.$route.query.filter;
     let filter = {};
-    console.log(query);
+    //console.log(query);
     if (query != undefined) {
       filter = JSON.parse(query);
     }
 
-    console.log(filter);
+    //console.log(filter);
     this.setFilters(filter);
     await this.filterProducts(true);
     this.productsLoading = false;
   },
   destroyed() {
-    console.log("destroyed");
+    //console.log("destroyed");
     this.resetFilters();
     this.clearProductsPage();
   },
@@ -111,7 +111,7 @@ export default {
       return p;
     },
     is_mobile() {
-      console.log(screen.width);
+      //console.log(screen.width);
       if (screen.width <= 700) {
         return true;
       } else {
@@ -131,7 +131,7 @@ export default {
     ...mapMutations("filters", ["resetFilters", "setFilters"]),
     handleObserver(entries, observer) {
       if (entries[0].isIntersecting) {
-        console.log("loading more products", observer);
+        //console.log("loading more products", observer);
         this.loading = true;
         observer.unobserve(this.$refs.loader);
         this.getMoreProducts();
@@ -148,15 +148,15 @@ export default {
   watch: {
     // products :{
     //   handler: function(val, ){
-    //     console.log("products changed",)
-    //     console.log(val.pageNo)
+    //     //console.log("products changed",)
+    //     //console.log(val.pageNo)
     //     if(val.pageNo == val.totalPages){
     //       this.loading = false
-    //       console.log("final pages")
+    //       //console.log("final pages")
     //       return
     //     }
     //     this.loading = false
-    //     console.log("observing",)
+    //     //console.log("observing",)
     //     this.observer.observe(this.$refs.loader)
     //   },
     //   deep: true
diff --git a/apps/frontend/store-front/src/views/selectAddress.vue b/apps/frontend/store-front/src/views/selectAddress.vue
index f16e1f4..f224893 100644
--- a/apps/frontend/store-front/src/views/selectAddress.vue
+++ b/apps/frontend/store-front/src/views/selectAddress.vue
@@ -1,62 +1,79 @@
 <template>
-<loading v-if="loadingAddresses"> </loading>
-<div v-else >
-  <div class="container d-flex flex-wrap justify-center main-container">
-
-    <div class="addresses py-3">
-      <checkoutProgress address="true"/>
-      <div class="white py-4 d-flex justify-space-between">
-        <span class="text-h6 font-weight-bold"> Select Delivery Address</span>
-        <v-btn outlined  class="" @click="addAddress()"> Add New Addrress </v-btn>
-      </div>
+  <loading v-if="loadingAddresses"> </loading>
+  <div v-else>
+    <div class="container d-flex flex-wrap justify-center main-container">
+      <div class="addresses py-3">
+        <checkoutProgress address="true" />
+        <div class="white py-4 d-flex justify-space-between">
+          <span class="text-h6 font-weight-bold"> Select Delivery Address</span>
+          <v-btn outlined class="" @click="addAddress()">
+            Add New Addrress
+          </v-btn>
+        </div>
 
-      <div class="default-address">
-       
-        <p class="text-button ">default Address</p>
-       
-        <addressCard :address="defaultAddress" v-if="defaultAddress" @updateAddress="updateAddress"/>
-      </div>
+        <div class="default-address">
+          <p class="text-button">default Address</p>
+
+          <addressCard
+            :address="defaultAddress"
+            v-if="defaultAddress"
+            @updateAddress="updateAddress"
+          />
+        </div>
+
+        <div class="other-addresses">
+          <p class="text-button py-2">Other Addresses</p>
 
-      <div class="other-addresses">
-       
-          <p class="text-button py-2 ">Other Addresses</p>
-        
-          <addressCard  @updateAddress="updateAddress"  v-for="(address,i) of addresses" :key="i" :address="address" />
+          <addressCard
+            @updateAddress="updateAddress"
+            v-for="(address, i) of addresses"
+            :key="i"
+            :address="address"
+          />
+        </div>
       </div>
-      
-    </div>
 
-    
-    <div class="price-details">
+      <div class="price-details">
         <v-card
-            elevation="0"
-            outlined
-            rounded
-            class='mt-2 pa-2  pb-8 d-flex flex-column'>
-            <paymentDetails></paymentDetails>
-            
-            <v-btn   color="#266150" tile elevation="1" class="white--text continue-btn "
-                @click="goToPayment()"
-                :loading="submitting"
-                :disabled="btnDisabled"
-                >
-                Continue
-            </v-btn>
-            <checkoutBottomNavigation  
-                :loading="submitting"
-                :disabled="btnDisabled"
-                 class="bottom-navigation" btnLabel="Continue" @submit="goToPayment()">
-            </checkoutBottomNavigation>
+          elevation="0"
+          outlined
+          rounded
+          class="mt-2 pa-2 pb-8 d-flex flex-column"
+        >
+          <paymentDetails></paymentDetails>
+
+          <v-btn
+            color="#266150"
+            tile
+            elevation="1"
+            class="white--text continue-btn"
+            @click="goToPayment()"
+            :loading="submitting"
+            :disabled="btnDisabled"
+          >
+            Continue
+          </v-btn>
+          <checkoutBottomNavigation
+            :loading="submitting"
+            :disabled="btnDisabled"
+            class="bottom-navigation"
+            btnLabel="Continue"
+            @submit="goToPayment()"
+          >
+          </checkoutBottomNavigation>
         </v-card>
-        
+      </div>
     </div>
-   
+    <!--Price details -->
+
+    <addressDialog :open="dialog" @updateDialog="close"> </addressDialog>
+    <updateAddressDialog
+      ref="updateAddressDialog"
+      :open="updateDialog"
+      @updateDialog="closeUpdate"
+    >
+    </updateAddressDialog>
   </div>
-  <!--Price details --> 
-  
-  <addressDialog :open="dialog"          @updateDialog="close">       </addressDialog>
-  <updateAddressDialog ref="updateAddressDialog" :open="updateDialog" @updateDialog="closeUpdate"> </updateAddressDialog>
-</div>
 </template>
 
 <script>
@@ -68,120 +85,118 @@ import updateAddressDialog from "../components/address/updateAddressDialog.vue";
 import paymentDetails from "../components/checkout/paymentDetails.vue";
 import checkoutBottomNavigation from "../components/checkout/checkoutBottomNavigation.vue";
 import loading from "../components/cart/loading.vue";
-import { mapState,mapActions ,mapMutations} from "vuex";
+import { mapState, mapActions, mapMutations } from "vuex";
 export default {
   components: {
-      addressCard , checkoutProgress ,addressDialog,
-      updateAddressDialog,paymentDetails,
-      checkoutBottomNavigation,loading
-     },
+    addressCard,
+    checkoutProgress,
+    addressDialog,
+    updateAddressDialog,
+    paymentDetails,
+    checkoutBottomNavigation,
+    loading,
+  },
   data() {
     return {
-      dialog:false ,
-      updateDialog:false,
-      loadingAddresses:true,
-      submitting:false,
-     
+      dialog: false,
+      updateDialog: false,
+      loadingAddresses: true,
+      submitting: false,
     };
   },
-  async mounted(){
-    
-    await this.$store.dispatch('cart/fetchCart');
+  async mounted() {
+    await this.$store.dispatch("cart/fetchCart");
     this.loadingAddresses = await this.fetchAddresses();
     // this.fetchDefaultAddress();
-    console.log("fetching cart data")
-    
-    
-    
-    
+    //console.log("fetching cart data")
   },
-  
-  computed:{
-    ...mapState('addresses',['addresses',"defaultAddress","selectedAddress"]),
-    btnDisabled(){
-      return this.submitting || !this.selectedAddress.id
-    }
+
+  computed: {
+    ...mapState("addresses", [
+      "addresses",
+      "defaultAddress",
+      "selectedAddress",
+    ]),
+    btnDisabled() {
+      return this.submitting || !this.selectedAddress.id;
+    },
   },
 
-  methods:{
-    ...mapActions("addresses",["fetchAddresses","addAddress"]),
-    ...mapActions("orders",["createOrder"]),
-    ...mapMutations("addresses",["setAddressToUpdate"]),
-    addAddress(){
-      console.log("add address")
+  methods: {
+    ...mapActions("addresses", ["fetchAddresses", "addAddress"]),
+    ...mapActions("orders", ["createOrder"]),
+    ...mapMutations("addresses", ["setAddressToUpdate"]),
+    addAddress() {
+      //console.log("add address")
       this.dialog = true;
       // this.$router.push({name:'addAddress'})
     },
-    updateAddress(address){
-        this.setAddressToUpdate(address)
-        this.updateDialog=true
-        let updateDialog = this.$refs.updateAddressDialog
-        try{
-        window.u =updateDialog
-        updateDialog.$refs.addressForm.address=address
-        console.log(updateDialog.$refs.addressForm.address)
-        }catch(e){
-          console.log("")
-        }
+    updateAddress(address) {
+      this.setAddressToUpdate(address);
+      this.updateDialog = true;
+      let updateDialog = this.$refs.updateAddressDialog;
+      try {
+        window.u = updateDialog;
+        updateDialog.$refs.addressForm.address = address;
+        //console.log(updateDialog.$refs.addressForm.address)
+      } catch (e) {
+        //console.log("")
+      }
     },
 
-    close(v){
-      console.log("v",v)
+    close(v) {
+      //console.log("v",v)
       this.dialog = v;
-     
     },
-    
-    closeUpdate(v){
-      console.log("v",v)
+
+    closeUpdate(v) {
+      //console.log("v",v)
       this.updateDialog = v;
-      
     },
 
-    async goToPayment(){
-      this.submitting =true
-      let {loading,errors }= await this.createOrder()
-      this.submitting=loading
-      if (!errors){
-        this.$router.push({name:'payment'})
+    async goToPayment() {
+      this.submitting = true;
+      let { loading, errors } = await this.createOrder();
+      this.submitting = loading;
+      if (!errors) {
+        this.$router.push({ name: "payment" });
       }
-      // 
-    }
-  
-  }
+      //
+    },
+  },
 };
 </script>
 
 <style scoped lang="scss">
-.main-container{
-    .addresses{
-        width:100%;
-    }
-    .price-details{
-        
-        width:100vw;
-        margin-bottom: 60px;
+.main-container {
+  .addresses {
+    width: 100%;
+  }
+  .price-details {
+    width: 100vw;
+    margin-bottom: 60px;
+  }
+  .continue-btn {
+    display: none;
+  }
+  @media only screen and (min-width: 600px) {
+    .addresses {
+      width: 65%;
     }
-    .continue-btn{
-        display: none
+  }
+  @media only screen and (min-width: 600px) {
+    .price-details {
+      padding-left: 3%;
+      width: 30%;
     }
-    @media only screen and (min-width:600px){
-        .addresses{
-            width:65%;
-        }
+
+    .bottom-navigation {
+      display: none;
     }
-    @media only screen and (min-width:600px){
-        .price-details{
-            padding-left:3%;
-            width:30%;
-        }
-
-        .bottom-navigation{
-           display: none;
-        }
-
-        .continue-btn{
-            display: block
-        }
+
+    .continue-btn {
+      display: block;
     }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/frontend/store-front/src/views/signup.vue b/apps/frontend/store-front/src/views/signup.vue
index a25878b..018ee20 100644
--- a/apps/frontend/store-front/src/views/signup.vue
+++ b/apps/frontend/store-front/src/views/signup.vue
@@ -1,124 +1,126 @@
 <template>
+  <v-container class="signup">
+    <p>Register</p>
 
-    <v-container class='signup'>
-         <p>Register</p>
-        
-    
     errors: {{ errors }}
 
     <v-text-field
-            v-model="User.email"
-            placeholder='myname@domain.com'
-            label="Email"
-            outlined color='#266150'
-            required >
+      v-model="User.email"
+      placeholder="myname@domain.com"
+      label="Email"
+      outlined
+      color="#266150"
+      required
+    >
     </v-text-field>
-     <v-text-field
-            v-model="User.username"
-            placeholder='johnDoe'
-            label="Username"
-            outlined color='#266150'
-            required >
+    <v-text-field
+      v-model="User.username"
+      placeholder="johnDoe"
+      label="Username"
+      outlined
+      color="#266150"
+      required
+    >
     </v-text-field>
-     <v-text-field
-            type="password"
-            v-model="User.password1"
-            outlined color='#266150'
-            placeholder='*********'
-            label="password"
-            required >
+    <v-text-field
+      type="password"
+      v-model="User.password1"
+      outlined
+      color="#266150"
+      placeholder="*********"
+      label="password"
+      required
+    >
     </v-text-field>
-     <v-text-field
-            type="password"
-            v-model="User.password2"
-            outlined color='#266150'
-            placeholder='*********'
-            label="password"
-            required >
+    <v-text-field
+      type="password"
+      v-model="User.password2"
+      outlined
+      color="#266150"
+      placeholder="*********"
+      label="password"
+      required
+    >
     </v-text-field>
-    <v-btn @click='signup' tile color='#266150' width='100%'
-        class ='white--text'
-        elevation='4'>
-        SIGN UP
+    <v-btn
+      @click="signup"
+      tile
+      color="#266150"
+      width="100%"
+      class="white--text"
+      elevation="4"
+    >
+      SIGN UP
     </v-btn>
-    <div class='mt-5'>
-      <span id='signup_label'>Already A User</span>
+    <div class="mt-5">
+      <span id="signup_label">Already A User</span>
       <span>
-      <v-btn @click='login' tile color='#000' width='40%%'
-        class ='white--text ml-5'
-        :elevation='1'>
-        LOG IN
-    </v-btn>
-    </span>  
+        <v-btn
+          @click="login"
+          tile
+          color="#000"
+          width="40%%"
+          class="white--text ml-5"
+          :elevation="1"
+        >
+          LOG IN
+        </v-btn>
+      </span>
     </div>
-    </v-container>
-
-
-
+  </v-container>
 </template>
 
 <script>
 //import {LOGIN_EMAIL} from '../graphql/mutations/auth.js';
 
-    export default { 
-        name: 'login',
-        components: {
-        },
-        data(){
-            return{
-                User:{
-                    
-                    email:"mailtoaabid@ymail.com",
-                    password1:"cjbnsdjhbhjBhhj87646!!",
-                    password2:"cjbnsdjhbhjBhhj87646!!",
-                    username:"",
-            
-                },
-                errors:null
-                
-            
-            }
-        },
-        computed:{
-            user(){
-                return this.$store.state.User     
-            },
-        },
-
-
-        methods:{
-            login(){
-                
-                
-                this.$router.push('login');
+export default {
+  name: "login",
+  components: {},
+  data() {
+    return {
+      User: {
+        email: "mailtoaabid@ymail.com",
+        password1: "cjbnsdjhbhjBhhj87646!!",
+        password2: "cjbnsdjhbhjBhhj87646!!",
+        username: "",
+      },
+      errors: null,
+    };
+  },
+  computed: {
+    user() {
+      return this.$store.state.User;
+    },
+  },
 
-            },
-            async signup(){
-                let {errors,success}=await this.$store.dispatch('user/registerUser',this.User)
-                console.log("errors",errors,success)
-                if(success==true){
-                     console.log("no errors")
-                     this.$router.push('/verification-link-sent?email='+this.User.email)
-                }else{
-                    
-                    this.errors =errors
-                }
-              
-            }
-        }
-
-    }    
+  methods: {
+    login() {
+      this.$router.push("login");
+    },
+    async signup() {
+      let { errors, success } = await this.$store.dispatch(
+        "user/registerUser",
+        this.User
+      );
+      //console.log("errors",errors,success)
+      if (success == true) {
+        //console.log("no errors")
+        this.$router.push("/verification-link-sent?email=" + this.User.email);
+      } else {
+        this.errors = errors;
+      }
+    },
+  },
+};
 </script>
 <style scoped>
-
-.signup{
-    text-align: center;
+.signup {
+  text-align: center;
 }
 .signup p:nth-child(1) {
-    font-family: Cormorant Garamond,'serif';
-    font-weight: 400;
-    font-size: 40px;
-    color:#4f4846;
+  font-family: Cormorant Garamond, "serif";
+  font-weight: 400;
+  font-size: 40px;
+  color: #4f4846;
 }
-
 </style>
diff --git a/apps/frontend/store-front/src/views/verifyEmailSent.vue b/apps/frontend/store-front/src/views/verifyEmailSent.vue
index e464218..fb20458 100644
--- a/apps/frontend/store-front/src/views/verifyEmailSent.vue
+++ b/apps/frontend/store-front/src/views/verifyEmailSent.vue
@@ -1,44 +1,41 @@
 <template>
-<v-sheet height="90vh" color="d-flex justify-center align-center">
-    <v-container class='login d-flex flex-wrap align-center justify-space-around'>
-
-       <v-sheet color="green" height="auto" width="50%" min-width="450px">
-          <v-img src="../assets/message-sent-concept-illustration_114360-3363.jpg"></v-img>
-       </v-sheet>
-       <v-sheet height="100%" width="50%" min-width="450px" class="pl-8" >
-            <p class="text-h5 font-weight-bold ">
-                Verification Link Sent
-            </p>
-            <p class="text-h6  mt-8">
-                We emailed a confirmation link to your email <b>{{email}}</b>
-            </p>
-            <p class="text-h6  mb-8 ">
-                Check your mail to signin and verify
-            </p>
-
-            <p  class="text-subtitle-3 grey--text font-weight-bold mt-4 ">Did'nt get a confirmation email?</p>
-            <p  class="text-subtitle-3  grey--text font-weight-bold">    
-                check your spam or 
-                <v-btn  small outlined :disabled="resendDisabled" class="mx-3 blue--text lighten-4  " @click="resendEmail">
-                   resend 
-                   <span v-if="timerCount > 0">
-                        in {{timerCount}} secs
-                   </span>   
-                </v-btn>
-               
-            </p>
-
-
-       </v-sheet>
+  <v-sheet height="90vh" color="d-flex justify-center align-center">
+    <v-container
+      class="login d-flex flex-wrap align-center justify-space-around"
+    >
+      <v-sheet color="green" height="auto" width="50%" min-width="450px">
+        <v-img
+          src="../assets/message-sent-concept-illustration_114360-3363.jpg"
+        ></v-img>
+      </v-sheet>
+      <v-sheet height="100%" width="50%" min-width="450px" class="pl-8">
+        <p class="text-h5 font-weight-bold">Verification Link Sent</p>
+        <p class="text-h6 mt-8">
+          We emailed a confirmation link to your email <b>{{ email }}</b>
+        </p>
+        <p class="text-h6 mb-8">Check your mail to signin and verify</p>
+
+        <p class="text-subtitle-3 grey--text font-weight-bold mt-4">
+          Did'nt get a confirmation email?
+        </p>
+        <p class="text-subtitle-3 grey--text font-weight-bold">
+          check your spam or
+          <v-btn
+            small
+            outlined
+            :disabled="resendDisabled"
+            class="mx-3 blue--text lighten-4"
+            @click="resendEmail"
+          >
+            resend
+            <span v-if="timerCount > 0"> in {{ timerCount }} secs </span>
+          </v-btn>
+        </p>
+      </v-sheet>
     </v-container>
+  </v-sheet>
 
-</v-sheet>  
-
-
-
-
-
-        <!-- <p>VERIFY YOUR EMAIL</p>
+  <!-- <p>VERIFY YOUR EMAIL</p>
         <p> Link to verify your account has been sent your mail </p>     
     
    
@@ -52,72 +49,56 @@
     </v-btn>
     </span>
     </div> -->
-    
-   
-
-
-
 </template>
 
 <script>
 //import {LOGIN_EMAIL} from '../graphql/mutations/auth.js';
-    import { mapActions } from "vuex";
-    export default { 
-        name: 'confirmEmail',
-        components: {
-        },
-        data(){
-            return{
-                Code:'',  
-                errors:null  ,
-                //resendDisable:false ,
-                timerCount:0,    
-            }
-        },
-        computed:{
-            email(){
-                return this.$route.query.email
-            },
-            resendDisabled(){
-               console.log(this.timerCount > 0)
-               return this.timerCount > 0
-            }
-        },
-        methods:{
-            ...mapActions("user",['confirmEmail',"resendActivationEmail"]),
-            sleep(ms) {
-                return new Promise(resolve => setTimeout(resolve, ms));
-            },
-
-            async resendEmail(){
-                
-                this.timerCount = 110 
-                let data= await this.resendActivationEmail(this.email)
-                console.log("res resend",data)
-                
-            }
-           
-        },
-
-         watch: {
-
-            timerCount: {
-                handler(value) {
-
-                    if (value > 0) {
-                        setTimeout(() => {
-                            this.timerCount--;
-                        }, 1000);
-                    }
-
-                },
-                immediate: true // This ensures the watcher is triggered upon creation
-            }
-
+import { mapActions } from "vuex";
+export default {
+  name: "confirmEmail",
+  components: {},
+  data() {
+    return {
+      Code: "",
+      errors: null,
+      //resendDisable:false ,
+      timerCount: 0,
+    };
+  },
+  computed: {
+    email() {
+      return this.$route.query.email;
+    },
+    resendDisabled() {
+      //console.log(this.timerCount > 0)
+      return this.timerCount > 0;
+    },
+  },
+  methods: {
+    ...mapActions("user", ["confirmEmail", "resendActivationEmail"]),
+    sleep(ms) {
+      return new Promise((resolve) => setTimeout(resolve, ms));
+    },
+
+    async resendEmail() {
+      this.timerCount = 110;
+      let data = await this.resendActivationEmail(this.email);
+      //console.log("res resend",data)
+    },
+  },
+
+  watch: {
+    timerCount: {
+      handler(value) {
+        if (value > 0) {
+          setTimeout(() => {
+            this.timerCount--;
+          }, 1000);
         }
-    }
-        
+      },
+      immediate: true, // This ensures the watcher is triggered upon creation
+    },
+  },
+};
 </script>
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/apps/frontend/store-front/src/views/wishlist.vue b/apps/frontend/store-front/src/views/wishlist.vue
index 4920eab..93c56ec 100644
--- a/apps/frontend/store-front/src/views/wishlist.vue
+++ b/apps/frontend/store-front/src/views/wishlist.vue
@@ -1,73 +1,65 @@
 <template>
-
-    <div>
-       <p class="black--text text-h5 ml-9 my-8 font-weight-bold">
-          My Wishlist  ({{totalItems}} items )
-       </p>
-       <div class="d-flex flex-wrap justify-space-around  overflow-hidden " >
-           
-           <product-card class="product-card ma-0  pa-0 " :name="product.name" :image="product.variations[0].images[0]" 
-              :price="product.variations[0].price"
-              v-for="product in wishlist.products" :key="product.id" :id="product.id"
-              @remove="removeFromWishlist(id)"
-           >
-           </product-card>
-
-       </div>
+  <div>
+    <p class="black--text text-h5 ml-9 my-8 font-weight-bold">
+      My Wishlist ({{ totalItems }} items )
+    </p>
+    <div class="d-flex flex-wrap justify-space-around overflow-hidden">
+      <product-card
+        class="product-card ma-0 pa-0"
+        :name="product.name"
+        :image="product.variations[0].images[0]"
+        :price="product.variations[0].price"
+        v-for="product in wishlist.products"
+        :key="product.id"
+        :id="product.id"
+        @remove="removeFromWishlist(id)"
+      >
+      </product-card>
     </div>
-
-
-
+  </div>
 </template>
 
 <script>
-import { mapState,mapActions } from 'vuex'
+import { mapState, mapActions } from "vuex";
 
-import productCard from "../components/wishlist/productCard.vue"
-export default{
-    components: {
-       productCard
-    },
-    data(){
-        return {
-            loading: true,
-        }
-    },
-    
-    async mounted(){
-        console.log('wishlist mounted')
-        await this.fetchWishlist()
-        this.loading = false
-    },
+import productCard from "../components/wishlist/productCard.vue";
+export default {
+  components: {
+    productCard,
+  },
+  data() {
+    return {
+      loading: true,
+    };
+  },
 
-    computed: {
-        ...mapState("wishlist",["wishlist"]),
-        totalItems(){
-            return this.wishlist.products.length
-        }
-    },
+  async mounted() {
+    //console.log('wishlist mounted')
+    await this.fetchWishlist();
+    this.loading = false;
+  },
 
-    methods: {
-       ...mapActions("wishlist",["fetchWishlist","removeFromWishlist"])
+  computed: {
+    ...mapState("wishlist", ["wishlist"]),
+    totalItems() {
+      return this.wishlist.products.length;
     },
+  },
 
-  
-}
-
+  methods: {
+    ...mapActions("wishlist", ["fetchWishlist", "removeFromWishlist"]),
+  },
+};
 </script>
 
-
-<style scoped >
-.product-card{
-  width:48%;
-
-  
+<style scoped>
+.product-card {
+  width: 48%;
 }
 
-@media screen and (min-width: 700px){
-  .product-card{
-    width:20%;
+@media screen and (min-width: 700px) {
+  .product-card {
+    width: 20%;
   }
 }
-  
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/config/appolo-preset.js b/packages/config/appolo-preset.js
index 1d9be9e..8c75d22 100644
--- a/packages/config/appolo-preset.js
+++ b/packages/config/appolo-preset.js
@@ -3,7 +3,7 @@ module.exports = {
     service: {
       name: "my-app",
       // URL to the GraphQL API
-      url: "http://localhost:8000/graphql",
+      url: "http://localhost:8000/graphql/",
     },
     // Files processed by the extension
     includes: ["src/**/*.vue", "src/**/*.js"],
diff --git a/packages/graphql-client/admin/collections.js b/packages/graphql-client/admin/collections.js
index c1d716b..958bf76 100644
--- a/packages/graphql-client/admin/collections.js
+++ b/packages/graphql-client/admin/collections.js
@@ -1,81 +1,122 @@
 import gql from 'graphql-tag'
 
-// export const CategoryFragment = {
-//   category: gql`
-//     fragment CategoryFragment on CategoryType {
-//       id
-//       brands {
-//         id
-//         name
-//       }
-//       description
-//     }
-//   `,
-// }
+export const CategoryFragment = {
+  category: gql`
+    fragment CategoryFragment on CategoryType {
+      id
+      brands {
+        id
+        name
+      }
+      description
+      image
+      name
+      genders
+    }
+  `,
+}
+
+const BrandFragment = gql`
+  fragment BrandFragment on BrandType {
+    id
+    name
+    logo
+  }
+`
 
 export const createCategory = gql`
   mutation createCategory($input: CategoryInput!) {
     createCategory(input: $input) {
       category {
-        #       ...CategoryFragment
-        id
+        ...CategoryFragment
+      }
+    }
+  }
+
+  ${CategoryFragment.category}
+`
+
+export const updateCategory = gql`
+  mutation updateCategory($id: String!, $input: CategoryInput!) {
+    updateCategory(id: $id, input: $input) {
+      category {
+        ...CategoryFragment
+      }
+    }
+  }
+  ${CategoryFragment.category}
+`
+
+export const deleteCategory = gql`
+  mutation deleteCategory($id: String!) {
+    deleteCategory(id: $id) {
+      success
+    }
+  }
+`
+
+export const createBrand = gql`
+  mutation createBrand($input: BrandInput!) {
+    createBrand(input: $input) {
+      brand {
+        ...BrandFragment
       }
     }
   }
+  ${BrandFragment}
 `
 
-// export const updateCategory = gql`
-//    mutation updateCategory($id:Int!,$input:CategoryInput!){
-//        updateCategory(id:$id,input:$input){
-//               ${CategoryFragment}
-//        }
-//    }
-// `
+export const updateBrand = gql`
+  mutation updateBrand($id: String!, $input: BrandInput!) {
+    updateBrand(id: $id, input: $input) {
+      brand {
+        ...BrandFragment
+      }
+    }
+  }
+  ${BrandFragment}
+`
 
-// export const deleteCategory = gql`
-//   mutation deleteCategory($id: Int!) {
-//     deleteCategory(id: $id) {
-//       success
-//     }
-//   }
-// `
+export const deleteBrand = gql`
+  mutation deleteBrand($id: String!) {
+    deleteBrand(id: $id) {
+      brand {
+        ...BrandFragment
+      }
+    }
+  }
+  ${BrandFragment}
+`
 
-// export const fetchCategories = gql`
-//   query categories(
-//     $offset: Int
-//     $first: Int
-//     $userId: ID
-//     $isActive: Boolean
-//     $isArchived: Boolean
-//     $isVerified: Boolean
-//   ) {
-//     categories(
-//       offset: $offset
-//       first: $first
-//       user: $userId
-//       user_Status_Verified: $isVerified
-//       user_Status_Archived: $isArchived
-//       user_IsActive: $isActive
-//     ) {
-//       pageInfo {
-//         hasNextPage
-//         startCursor
-//       }
-//       edges {
-//         node {
-//           id
-//           ${CategoryFragment}
-//         }
-//       }
-//     }
-//   }
-// `
+export const createVariant = gql`
+  mutation createVariant($input: VariantInput!) {
+    createVariant(input: $input) {
+      variant {
+        id
+        name
+        value
+      }
+    }
+  }
+`
+export const updateVariant = gql`
+  mutation updateVariant($id: String!, $input: VariantInput!) {
+    updateVariant(id: $id, input: $input) {
+      variant {
+        id
+        name
+        value
+      }
+    }
+  }
+`
 
-// export const fetchBrands = gql`
-//   query brands {
-//     brands {
-//       id
-//       name
-//     }
-//   }
-// `
+export const deleteVariant = gql`
+  mutation deleteVariant($id: String!) {
+    deleteVariant(id: $id) {
+      variant {
+        id
+      }
+    }
+  }
+`
diff --git a/packages/graphql-client/queries/auth.js b/packages/graphql-client/queries/auth.js
index 838487b..77f2692 100644
--- a/packages/graphql-client/queries/auth.js
+++ b/packages/graphql-client/queries/auth.js
@@ -1,20 +1,29 @@
-import gql from 'graphql-tag';
+import gql from 'graphql-tag'
 
-export const GET_CUSTOMER=gql`
-query {
-  customer{
-    user{
+export const GET_CUSTOMER = gql`
+  query {
+    customer {
+      user {
+        username
+        email
+        firstName
+        lastName
+        verified
+      }
+      phoneNumber
+    }
+  }
+`
+
+export const ME_QUERY = gql`
+  query me {
+    me {
+      id
+      lastLogin
       username
-      email
       firstName
-      lastName
+      email
       verified
-      
     }
-    phoneNumber
-    
   }
-}`
-
-
-
+`
diff --git a/packages/graphql-client/queries/collections.js b/packages/graphql-client/queries/collections.js
index 2516251..536f729 100644
--- a/packages/graphql-client/queries/collections.js
+++ b/packages/graphql-client/queries/collections.js
@@ -19,7 +19,18 @@ export const getBrands = gql`
   query brands {
     brands {
       id
+      logo
       name
     }
   }
 `
+
+export const getVariants = gql`
+  query {
+    variants {
+      id
+      name
+      value
+    }
+  }
+`
diff --git a/packages/graphql-client/queries/queries.js b/packages/graphql-client/queries/queries.js
deleted file mode 100644
index e854971..0000000
--- a/packages/graphql-client/queries/queries.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import gql from 'graphql-tag'
-
-export const ME_QUERY= gql`
-query me{
-    me{
-        id
-        lastLogin
-        username
-        firstName
-        email
-        
-        verified
-    }
-}
-`
diff --git a/packages/utils/helpers.js b/packages/utils/helpers.js
index 649a60c..75fa6a2 100644
--- a/packages/utils/helpers.js
+++ b/packages/utils/helpers.js
@@ -15,3 +15,23 @@ export function includeScript(URL, callback) {
   }
   scriptTag.parentNode.insertBefore(object, scriptTag);
 }
+
+export const parseJwt = (token) => {
+  try {
+    var base64Url = token.split(".")[1];
+    var base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+    var jsonPayload = decodeURIComponent(
+      atob(base64)
+        .split("")
+        .map(function (c) {
+          return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
+        })
+        .join("")
+    );
+
+    return JSON.parse(jsonPayload);
+  } catch (e) {
+    console.log("parse jwt error", e);
+    return null;
+  }
+};
diff --git a/packages/utils/index.js b/packages/utils/index.js
index 5ca3e56..9e89340 100644
--- a/packages/utils/index.js
+++ b/packages/utils/index.js
@@ -1,3 +1,4 @@
 import { navigationGaurd } from "./router";
 import { includeScript } from "./helpers";
-export { navigationGaurd, includeScript };
+import { parseJwt } from "./helpers";
+export { navigationGaurd, includeScript, parseJwt };
diff --git a/packages/utils/router.js b/packages/utils/router.js
index c7f5443..1af1130 100644
--- a/packages/utils/router.js
+++ b/packages/utils/router.js
@@ -1,6 +1,6 @@
 export const navigationGaurd = (to, from, next) => {
   // Check if the user is logged i
-  // console.log(JSON.stringify(store.getters))
+  // //console.log(JSON.stringify(store.getters))
   const isUserLoggedIn = localStorage.getItem("Zivero_refresh_token");
   if (to.matched.some((record) => record.meta.requiresAuth)) {
     if (!isUserLoggedIn) {