From 37235b328f6a7e9bf3b15e4e307390debdc96d51 Mon Sep 17 00:00:00 2001
From: sogehige <sogehige@gmail.com>
Date: Mon, 7 Dec 2020 16:14:49 +0100
Subject: [PATCH] fix(viewers): add safeguard before viewers are saved (#4417)

Fixes https://community.sogebot.xyz/t/ui-manage-viewers-set-huge-amount-of-points-if-points-are-empty/211
---
 src/bot/helpers/dayjs.ts                      |    2 +
 src/panel/index.ts                            |    5 +-
 src/panel/views/managers/viewers.vue          | 1057 +++++++++++++++++
 .../views/managers/viewers/viewers-edit.vue   |  607 ----------
 .../views/managers/viewers/viewers-list.vue   |  360 ------
 5 files changed, 1062 insertions(+), 969 deletions(-)
 create mode 100644 src/panel/views/managers/viewers.vue
 delete mode 100644 src/panel/views/managers/viewers/viewers-edit.vue
 delete mode 100644 src/panel/views/managers/viewers/viewers-list.vue

diff --git a/src/bot/helpers/dayjs.ts b/src/bot/helpers/dayjs.ts
index 2eeedf74d72..68f3a1db1e4 100644
--- a/src/bot/helpers/dayjs.ts
+++ b/src/bot/helpers/dayjs.ts
@@ -2,11 +2,13 @@ import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { default as tz } from 'dayjs/plugin/timezone';
 dayjs.extend(utc);
 dayjs.extend(tz);
 dayjs.extend(relativeTime);
 dayjs.extend(localizedFormat);
+dayjs.extend(customParseFormat);
 
 require('dayjs/locale/cs');
 require('dayjs/locale/de');
diff --git a/src/panel/index.ts b/src/panel/index.ts
index 0dcdf393214..ec55bba1684 100644
--- a/src/panel/index.ts
+++ b/src/panel/index.ts
@@ -137,8 +137,9 @@ const main = async () => {
         { path: '/manage/spotify/bannedsongs', name: 'spotifyManagerBannedsongs', component: () => import('./views/managers/spotify/spotify-bannedsongs.vue') },
         { path: '/manage/timers/list', name: 'TimersManagerList', component: () => import('./views/managers/timers/timers-list.vue') },
         { path: '/manage/timers/edit/:id?', name: 'TimersManagerEdit', component: () => import('./views/managers/timers/timers-edit.vue') },
-        { path: '/manage/viewers/list', name: 'viewersManagerList', component: () => import('./views/managers/viewers/viewers-list.vue') },
-        { path: '/manage/viewers/edit/:id?', name: 'viewersManagerEdit', component: () => import('./views/managers/viewers/viewers-edit.vue') },
+        { path: '/manage/viewers/', redirect: '/manage/viewers/list' },
+        { path: '/manage/viewers/list', name: 'viewersManagerList', component: () => import('./views/managers/viewers.vue') },
+        { path: '/manage/viewers/edit/:id?', name: 'viewersManagerEdit', component: () => import('./views/managers/viewers.vue') },
 
         { path: '/settings/permissions/:id?', name: 'PermissionsSettings', component: () => import('./views/settings/permissions.vue') },
         { path: '/settings/translations', name: 'TranslationsSettings', component: () => import('./views/settings/translations.vue') },
diff --git a/src/panel/views/managers/viewers.vue b/src/panel/views/managers/viewers.vue
new file mode 100644
index 00000000000..983fcce429b
--- /dev/null
+++ b/src/panel/views/managers/viewers.vue
@@ -0,0 +1,1057 @@
+<template>
+  <b-container fluid>
+    <b-row>
+      <b-col>
+        <span class="title text-default mb-2">
+          {{ translate('menu.manage') }}
+          <small><fa icon="angle-right"/></small>
+          {{ translate('menu.viewers') }}
+        </span>
+      </b-col>
+    </b-row>
+
+    <panel search @search="search = $event">
+      <template v-slot:left>
+        <b-dropdown no-caret variant="primary">
+          <template v-slot:button-content>
+            <span class="dropdown-icon">
+              <template v-if="sort === 'user.username'">{{ translate('username') }}</template>
+              <template v-if="sort === 'user.seenAt'">{{ translate('last-seen') }}</template>
+              <template v-if="sort === 'user.watchedTime'">{{ translate('watched-time') }}</template>
+              <template v-if="sort === 'user.followedAt'">{{ translate('followed-since') }}</template>
+              <template v-if="sort === 'user.subscribedAt'">{{ translate('subscribed-since') }}</template>
+              <template v-if="sort === 'user.points'">{{ translate('points') }}</template>
+              <template v-if="sort === 'user.messages'">{{ translate('messages') }}</template>
+              <template v-if="sort === 'sumTips'">{{ translate('tips') }}</template>
+              <template v-if="sort === 'sumBits'">{{ translate('bits') }}</template>
+              <template v-if="sort === 'user.giftedSubscribes'">{{ translate('subgifts') }}</template>
+              <template v-if="sort === 'user.subscribeCumulativeMonths'">{{ translate('subCumulativeMonths') }}</template>
+              <template v-if="sort === 'user.subscribeStreak'">{{ translate('subStreak') }}</template>
+              <fa icon="sort-down" fixed-width></fa>
+            </span>
+          </template>
+          <b-dropdown-item @click="sort = 'user.username'; sortDesc = false">{{ translate('username') }}</b-dropdown-item>
+          <b-dropdown-item @click="sort = 'user.seenAt'; sortDesc = true">{{ translate('last-seen') }}</b-dropdown-item>
+          <b-dropdown-item @click="sort = 'user.watchedTime'; sortDesc = true">{{ translate('watched-time') }}</b-dropdown-item>
+          <b-dropdown-item @click="sort = 'user.followedAt'; sortDesc = true">{{ translate('followed-since') }}</b-dropdown-item>
+          <b-dropdown-item @click="sort = 'user.subscribedAt'; sortDesc = true">{{ translate('subscribed-since') }}</b-dropdown-item>
+          <b-dropdown-item @click="sort = 'user.points'; sortDesc = true">{{ translate('points') }}</b-dropdown-item>
+          <b-dropdown-item @click="sort = 'user.messages'; sortDesc = true">{{ translate('messages') }}</b-dropdown-item>
+          <b-dropdown-item @click="sort = 'sumTips'; sortDesc = true">{{ translate('tips') }}</b-dropdown-item>
+          <b-dropdown-item @click="sort = 'sumBits'; sortDesc = true">{{ translate('bits') }}</b-dropdown-item>
+          <b-dropdown-item @click="sort = 'user.giftedSubscribes'; sortDesc = true">{{ translate('subgifts') }}</b-dropdown-item>
+          <b-dropdown-item @click="sort = 'user.subscribeCumulativeMonths'; sortDesc = true">{{ translate('subCumulativeMonths') }}</b-dropdown-item>
+          <b-dropdown-item @click="sort = 'user.subscribeStreak'; sortDesc = true">{{ translate('subStreak') }}</b-dropdown-item>
+        </b-dropdown>
+
+        <b-button variant="primary" @click="sortDesc = !sortDesc">
+          <fa :icon="'sort-alpha-' + (sortDesc ? 'up' : 'down')" fixed-width></fa>
+        </b-button>
+
+        <b-dropdown no-caret variant="primary">
+            <template v-slot:button-content>
+              <span class="dropdown-icon">
+                {{ capitalize(translate('commons.reset')) }}
+                <fa icon="sort-down" fixed-width></fa>
+              </span>
+            </template>
+            <b-dropdown-item @click="resetPoints">{{ translate('points') }}</b-dropdown-item>
+            <b-dropdown-item @click="resetWatchedTime">{{ translate('watched-time') }}</b-dropdown-item>
+            <b-dropdown-item @click="resetMessages">{{ translate('messages') }}</b-dropdown-item>
+            <b-dropdown-item @click="resetBits">{{ translate('bits') }}</b-dropdown-item>
+            <b-dropdown-item @click="resetTips">{{ translate('tips') }}</b-dropdown-item>
+          </b-dropdown>
+      </template>
+
+      <template v-slot:right>
+        <b-pagination
+          class="m-0"
+          v-model="currentPage"
+          :total-rows="count"
+          :per-page="perPage"
+          aria-controls="my-table"
+        ></b-pagination>
+
+        <b-btn-group>
+          <button v-if="filter.vips === null" class="btn border-0 btn-outline-dark" @click="filter.vips = true">
+            <fa icon="question" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">vip</strong>
+          </button>
+          <button v-else-if="filter.vips" class="btn border-0 btn-outline-success" @click="filter.vips = false">
+            <fa icon="check" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">vip</strong>
+          </button>
+          <button v-else class="btn border-0 btn-outline-danger" @click="filter.vips = null">
+            <fa icon="exclamation" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">vip</strong>
+          </button>
+
+          <button v-if="filter.active === null" class="btn border-0 btn-outline-dark" @click="filter.active = true">
+            <fa icon="question" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">active</strong>
+          </button>
+          <button v-else-if="filter.active" class="btn border-0 btn-outline-success" @click="filter.active = false">
+            <fa icon="check" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">active</strong>
+          </button>
+          <button v-else class="btn border-0 btn-outline-danger" @click="filter.active = null">
+            <fa icon="exclamation" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">active</strong>
+          </button>
+
+          <button v-if="filter.subscribers === null" class="btn border-0 btn-outline-dark" @click="filter.subscribers = true">
+            <fa icon="question" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">subscribers</strong>
+          </button>
+          <button v-else-if="filter.subscribers" class="btn border-0 btn-outline-success" @click="filter.subscribers = false">
+            <fa icon="check" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">subscribers</strong>
+          </button>
+          <button v-else class="btn border-0 btn-outline-danger" @click="filter.subscribers = null">
+            <fa icon="exclamation" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">subscriber</strong>
+          </button>
+
+          <button v-if="filter.followers === null" class="btn border-0 btn-outline-dark" @click="filter.followers = true">
+            <fa icon="question" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">followers</strong>
+          </button>
+          <button v-else-if="filter.followers" class="btn border-0 btn-outline-success" @click="filter.followers = false">
+            <fa icon="check" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">followers</strong>
+          </button>
+          <button v-else class="btn border-0 btn-outline-danger" @click="filter.followers = null">
+            <fa icon="exclamation" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">follower</strong>
+          </button>
+        </b-btn-group>
+      </template>
+    </panel>
+
+    <loading v-if="state.loading !== $state.success" slow/>
+    <template v-else>
+      <b-sidebar
+        @change="isSidebarVisibleChange"
+        :visible="isSidebarVisible"
+        :no-slide="!sidebarSlideEnabled"
+        width="600px"
+        no-close-on-route-change
+        shadow
+        no-header
+        right
+        backdrop>
+        <template v-slot:footer="{ hide }">
+          <div class="d-flex bg-opaque align-items-center px-3 py-2 border-top border-gray" style="justify-content: flex-end">
+            <b-button class="mx-2" @click="hide" variant="link">{{ translate('dialog.buttons.close') }}</b-button>
+            <state-button @click="save()" text="saveChanges" :state="state.save" :invalid="!!$v.$invalid && !!$v.$dirty"/>
+          </div>
+        </template>
+        <div class="px-3 py-2">
+          <b-form>
+            <b-form-group
+              :label="translate('username')"
+              label-for="username"
+            >
+              <template v-if="editationItem">
+                <b-input-group>
+                  <b-form-input
+                    id="name"
+                    v-model="editationItem.username"
+                    type="text"
+                    readonly
+                  ></b-form-input>
+                </b-input-group>
+              </template>
+              <b-skeleton v-else type="input" class="w-100"></b-skeleton>
+            </b-form-group>
+
+            <b-form-group
+              :label="translate('last-seen')"
+              label-for="seenAt"
+            >
+              <template v-if="editationItem">
+                <b-input-group>
+                  <b-form-input
+                    id="seenAt"
+                    :value="editationItem.seenAt ? dayjs(Number(editationItem.seenAt)).format('LLL') : ''"
+                    type="text"
+                    readonly
+                  ></b-form-input>
+                </b-input-group>
+              </template>
+              <b-skeleton v-else type="input" class="w-100"></b-skeleton>
+            </b-form-group>
+
+            <b-row>
+              <b-col>
+                <b-form-group
+                  :label="translate('followed-since')"
+                  label-for="followedAt"
+                >
+                  <template v-if="editationItem">
+                    <b-input-group>
+                      <b-input-group-prepend>
+                        <b-button class="border border-right-0"
+                                  variant="secondary"
+                                  @click="forceCheckFollowedAt()">
+                          <fa icon="sync" :spin="state.forceCheckFollowedAt === ButtonStates.progress" ></fa>
+                        </b-button>
+                      </b-input-group-prepend>
+                      <datetime
+                        :key="'followedAt' + (editationItem.followedAt === 0)"
+                        v-model="editationItem.followedAt"
+                        :config="dateTimePickerConfig"
+                        :disabled="editationItem.haveFollowedAtLock"
+                        class="form-control"/>
+                      <b-input-group-append>
+                        <b-button class="border border-left-0"
+                                  :class="[editationItem.haveFollowedAtLock ? 'btn-secondary border-0' : 'btn-light']"
+                                  :variant="editationItem.haveFollowedAtLock ? 'secondary' : 'light'"
+                                  @click="editationItem.haveFollowedAtLock = !editationItem.haveFollowedAtLock">
+                          <fa :icon="editationItem.haveFollowedAtLock ? 'lock' : 'unlock'"></fa>
+                        </b-button>
+                      </b-input-group-append>
+                    </b-input-group>
+                  </template>
+                  <b-skeleton v-else type="input" class="w-100"></b-skeleton>
+                </b-form-group>
+              </b-col>
+              <b-col>
+                <b-form-group
+                  :label="translate('subscribed-since')"
+                  label-for="subscribedAt"
+                >
+                  <template v-if="editationItem">
+                    <b-input-group>
+                      <datetime
+                        :key="'subscribedAt' + (editationItem.subscribedAt === 0)"
+                        v-model="editationItem.subscribedAt"
+                        :config="dateTimePickerConfig"
+                        :disabled="editationItem.haveSubscribedAtLock"
+                        class="form-control"/>
+                      <b-input-group-append>
+                        <b-button class="border border-left-0"
+                                  :class="[editationItem.haveSubscribedAtLock ? 'btn-secondary border-0' : 'btn-light']"
+                                  :variant="editationItem.haveSubscribedAtLock ? 'secondary' : 'light'"
+                                  @click="editationItem.haveSubscribedAtLock = !editationItem.haveSubscribedAtLock">
+                          <fa :icon="editationItem.haveSubscribedAtLock ? 'lock' : 'unlock'"></fa>
+                        </b-button>
+                      </b-input-group-append>
+                    </b-input-group>
+                  </template>
+                  <b-skeleton v-else type="input" class="w-100"></b-skeleton>
+                </b-form-group>
+              </b-col>
+            </b-row>
+
+            <b-row>
+              <b-col>
+                <b-form-group
+                  :label="translate('message')"
+                  label-for="messages"
+                >
+                  <template v-if="editationItem">
+                    <b-input-group>
+                      <b-form-input
+                        id="messages"
+                        v-model="editationItem.messages"
+                        type="number"
+                        min="0"
+                        :state="$v.editationItem.messages.$invalid && $v.editationItem.messages.$dirty ? false : null"
+                        @input="$v.$touch()"
+                      ></b-form-input>
+                    </b-input-group>
+                    <b-form-invalid-feedback :state="!($v.editationItem.messages.$invalid && $v.editationItem.messages.$dirty)">
+                      <template v-if="!$v.editationItem.messages.required">{{ translate('errors.value_cannot_be_empty') }}</template>
+                      <template v-else-if="!$v.editationItem.messages.minValue">{{ translate('errors.minValue_of_value_is').replace('$value', '0') }}</template>
+                    </b-form-invalid-feedback>
+                  </template>
+                  <b-skeleton v-else type="input" class="w-100"></b-skeleton>
+                </b-form-group>
+              </b-col>
+              <b-col>
+                <b-form-group
+                  :label="translate('subCumulativeMonths')"
+                  label-for="subCumulativeMonths"
+                >
+                  <template v-if="editationItem">
+                    <b-input-group>
+                      <b-form-input
+                        id="subCumulativeMonths"
+                        v-model="editationItem.subscribeCumulativeMonths"
+                        type="number"
+                        readonly
+                      ></b-form-input>
+                    </b-input-group>
+                  </template>
+                  <b-skeleton v-else type="input" class="w-100"></b-skeleton>
+                </b-form-group>
+              </b-col>
+            </b-row>
+
+            <b-row>
+              <b-col>
+                <b-form-group>
+                  <label for="watchedTime">
+                    {{ translate('watched-time') }} <small>{{ translate('hours') }}</small>
+                  </label>
+                  <template v-if="editationItem">
+                    <b-input-group>
+                      <b-form-input
+                        id="watchedTime"
+                        v-model="editationItemWatchedTime"
+                        type="number"
+                        min="0"
+                        :state="$v.editationItemWatchedTime.$invalid && $v.editationItemWatchedTime.$dirty ? false : null"
+                        @input="$v.$touch()"
+                      ></b-form-input>
+                    </b-input-group>
+                    <b-form-invalid-feedback :state="!($v.editationItemWatchedTime.$invalid && $v.editationItemWatchedTime.$dirty)">
+                      <template v-if="!$v.editationItemWatchedTime.required">{{ translate('errors.value_cannot_be_empty') }}</template>
+                      <template v-else-if="!$v.editationItemWatchedTime.minValue">{{ translate('errors.minValue_of_value_is').replace('$value', '0') }}</template>
+                    </b-form-invalid-feedback>
+                  </template>
+                  <b-skeleton v-else type="input" class="w-100"></b-skeleton>
+                </b-form-group>
+              </b-col>
+              <b-col>
+                <b-form-group
+                  :label="translate('subgifts')"
+                  label-for="subgifts"
+                >
+                  <template v-if="editationItem">
+                    <b-input-group>
+                      <b-form-input
+                        id="subgifts"
+                        v-model="editationItem.giftedSubscribes"
+                        type="number"
+                        readonly
+                      ></b-form-input>
+                    </b-input-group>
+                  </template>
+                  <b-skeleton v-else type="input" class="w-100"></b-skeleton>
+                </b-form-group>
+              </b-col>
+            </b-row>
+
+            <b-row>
+              <b-col>
+                <b-form-group
+                  :label="translate('points')"
+                  label-for="points"
+                >
+                  <template v-if="editationItem">
+                    <b-input-group>
+                      <b-form-input
+                        id="points"
+                        v-model="editationItem.points"
+                        type="number"
+                        min="0"
+                        :state="$v.editationItem.points.$invalid && $v.editationItem.points.$dirty ? false : null"
+                        @input="$v.$touch()"
+                      ></b-form-input>
+                    </b-input-group>
+                    <b-form-invalid-feedback :state="!($v.editationItem.points.$invalid && $v.editationItem.points.$dirty)">
+                      <template v-if="!$v.editationItem.points.required">{{ translate('errors.value_cannot_be_empty') }}</template>
+                      <template v-else-if="!$v.editationItem.points.minValue">{{ translate('errors.minValue_of_value_is').replace('$value', '0') }}</template>
+                    </b-form-invalid-feedback>
+                  </template>
+                  <b-skeleton v-else type="input" class="w-100"></b-skeleton>
+                </b-form-group>
+              </b-col>
+              <b-col>
+                <b-form-group
+                  :label="translate('subStreak')"
+                  label-for="subStreak"
+                >
+                  <template v-if="editationItem">
+                    <b-input-group>
+                      <b-form-input
+                        id="subStreak"
+                        v-model="editationItem.subscribeStreak"
+                        type="number"
+                        readonly
+                      ></b-form-input>
+                    </b-input-group>
+                  </template>
+                  <b-skeleton v-else type="input" class="w-100"></b-skeleton>
+                </b-form-group>
+              </b-col>
+            </b-row>
+
+            <div class="form-row pb-3">
+              <div class="col">
+                <div class="btn-group d-flex" role="group" v-if="editationItem">
+                  <button :disabled="editationItem.haveFollowerLock" type="button" class="btn btn-block" v-on:click="editationItem.isFollower = !editationItem.isFollower" v-bind:class="[ editationItem.isFollower ? 'btn-success' : 'btn-danger' ]" aria-hidden="true">Follower</button>
+                  <button type="button" class="border border-left-0 btn" :class="[editationItem.haveFollowerLock ? 'btn-secondary border-0' : 'btn-light']" @click="editationItem.haveFollowerLock = !editationItem.haveFollowerLock">
+                    <fa :icon="editationItem.haveFollowerLock ? 'lock' : 'unlock'"></fa>
+                  </button>
+                </div>
+                <b-skeleton v-else type="button"></b-skeleton>
+              </div>
+              <div class="col">
+                <div class="btn-group d-flex" role="group" v-if="editationItem">
+                  <button :disabled="editationItem.haveSubscriberLock" type="button" class="btn btn-block" v-on:click="editationItem.isSubscriber = !editationItem.isSubscriber" v-bind:class="[ editationItem.isSubscriber ? 'btn-success' : 'btn-danger' ]" aria-hidden="true">Subscriber</button>
+                  <button type="button" class="border border-left-0 btn" :class="[editationItem.haveSubscriberLock ? 'btn-secondary border-0' : 'btn-light']" @click="editationItem.haveSubscriberLock = !editationItem.haveSubscriberLock">
+                    <fa :icon="editationItem.haveSubscriberLock ? 'lock' : 'unlock'"></fa>
+                  </button>
+                </div>
+                <b-skeleton v-else type="button"></b-skeleton>
+              </div>
+              <div class="col">
+                <div class="btn-group d-flex" role="group" v-if="editationItem">
+                  <button type="button" class="btn btn-block" v-on:click="editationItem.isVIP = !editationItem.isVIP" v-bind:class="[ editationItem.isVIP ? 'btn-success' : 'btn-danger' ]" aria-hidden="true">VIP</button>
+                </div>
+                <b-skeleton v-else type="button"></b-skeleton>
+              </div>
+            </div>
+
+            <b-tabs content-class="mt-1" pills v-if="editationItem && editationItemEvents">
+              <b-tab :title="translate('bits')" active>
+                <table class="table table-sm ml-2 mr-2" v-if="editationItem.bits.length !== 0">
+                  <tr v-for="(bits, index) of editationItem.bits" :key="bits.cheeredAt">
+                    <td scope="row">
+                      <datetime
+                        v-if="editingBitsIds.includes(index)"
+                        v-model="bits.cheeredAt"
+                        :config="dateTimePickerConfigBitsTips"
+                        class="form-control w-auto"/>
+                      <template v-else>
+                        {{ dayjs(bits.cheeredAt).format('LLL') }}
+                      </template>
+                    </td>
+                    <td>
+                      <input type="number" min="0" v-model="bits.amount" v-if="editingBitsIds.includes(index)" class="form-control">
+                      <strong v-else>{{ Number(bits.amount) }}</strong>
+                    </td>
+                    <td>
+                      <textarea v-model="bits.message" class="form-control" v-if="editingBitsIds.includes(index)" style="height:38px"></textarea>
+                      <span v-else>{{ bits.message }}</span>
+                    </td>
+                    <td class="text-right">
+                      <template v-if="!editingBitsIds.includes(index)">
+                        <b-dropdown variant="light" toggle-class="text-decoration-none" no-caret>
+                          <template v-slot:button-content>
+                            <fa icon="ellipsis-v"></fa>
+                          </template>
+                          <b-dropdown-item @click="editingBitsIds = xor(editingBitsIds, [index]); pending = true"><fa icon="edit" fixed-width></fa> {{ translate('dialog.buttons.edit') }}</b-dropdown-item>
+                          <b-dropdown-item @click="removeBits(index)"><fa icon="trash-alt" fixed-width></fa> {{ translate('dialog.buttons.delete') }}</b-dropdown-item>
+                        </b-dropdown>
+                      </template>
+                      <span v-else>
+                        <button
+                          type="button"
+                          @click="editingBitsIds = xor(editingBitsIds, [index])"
+                          class="btn btn-block btn-outline-dark border-0 h-100 small-spaced">DONE</button>
+                      </span>
+                    </td>
+                  </tr>
+                </table>
+                <button type="button" class="btn btn-outline-dark border-0 ml-1 mb-3 small-spaced" @click="pending = true; editationItem.bits.push({cheeredAt: Date.now(), amount: 0, message: ''})">
+                  <fa class="pr-1" fixed-width icon="plus"></fa>
+                  Add bits
+                </button>
+              </b-tab>
+              <b-tab :title="translate('tips')">
+                <table class="table table-sm ml-2 mr-2" v-if="editationItem.tips.length !== 0">
+                  <tr v-for="(tips, index) of editationItem.tips" :key="tips.tippedAt">
+                    <td scope="row">
+                      <datetime
+                        v-if="editingTipsIds.includes(index)"
+                        v-model="tips.tippedAt"
+                        :config="dateTimePickerConfigBitsTips"
+                        class="form-control w-auto"/>
+                      <template v-else>
+                        {{ dayjs(tips.tippedAt).format('LLL') }}
+                      </template>
+                    </td>
+                    <td>
+                      <div class="d-flex">
+                        <template v-if="editingTipsIds.includes(index)">
+                          <input type="number" min="0" v-model="tips.amount" class="form-control">
+                          <select class="form-control" v-model="tips.currency">
+                            <option value="USD">USD</option>
+                            <option value="AUD">AUD</option>
+                            <option value="BGN">BGN</option>
+                            <option value="BRL">BRL</option>
+                            <option value="CAD">CAD</option>
+                            <option value="CHF">CHF</option>
+                            <option value="CNY">CNY</option>
+                            <option value="CZK">CZK</option>
+                            <option value="DKK">DKK</option>
+                            <option value="EUR">EUR</option>
+                            <option value="GBP">GBP</option>
+                            <option value="HKD">HKD</option>
+                            <option value="HRK">HRK</option>
+                            <option value="HUF">HUF</option>
+                            <option value="IDR">IDR</option>
+                            <option value="ILS">ILS</option>
+                            <option value="INR">INR</option>
+                            <option value="ISK">ISK</option>
+                            <option value="JPY">JPY</option>
+                            <option value="KRW">KRW</option>
+                            <option value="MXN">MXN</option>
+                            <option value="MYR">MYR</option>
+                            <option value="NOK">NOK</option>
+                            <option value="NZD">NZD</option>
+                            <option value="PHP">PHP</option>
+                            <option value="PLN">PLN</option>
+                            <option value="RON">RON</option>
+                            <option value="RUB">RUB</option>
+                            <option value="SEK">SEK</option>
+                            <option value="SGD">SGD</option>
+                            <option value="THB">THB</option>
+                            <option value="TRY">TRY</option>
+                            <option value="ZAR">ZAR</option>
+                          </select>
+                        </template>
+                        <strong v-else>
+                          {{ Intl.NumberFormat($store.state.configuration.lang, { style: 'currency', currency: tips.currency }).format(tips.amount) }}
+                        </strong>
+                      </div>
+                    <td>
+                      <template v-if="editingTipsIds.includes(index)">
+                        <textarea v-model="tips.message" class="form-control" style="height:38px"></textarea>
+                      </template>
+                      <span v-else>{{ tips.message }}</span>
+                    <td class="text-right">
+                      <template v-if="!editingTipsIds.includes(index)">
+                        <b-dropdown variant="light" toggle-class="text-decoration-none" no-caret>
+                          <template v-slot:button-content>
+                            <fa icon="ellipsis-v"></fa>
+                          </template>
+                          <b-dropdown-item @click="editingTipsIds = xor(editingTipsIds, [index]); pending = true"><fa icon="edit" fixed-width></fa> {{ translate('dialog.buttons.edit') }}</b-dropdown-item>
+                          <b-dropdown-item @click="removeTips(index)"><fa icon="trash-alt" fixed-width></fa> {{ translate('dialog.buttons.delete') }}</b-dropdown-item>
+                        </b-dropdown>
+                      </template>
+                      <span v-else>
+                        <button
+                          type="button"
+                          @click="editingTipsIds = xor(editingTipsIds, [index])"
+                          class="btn btn-block btn-outline-dark border-0 h-100 small-spaced">DONE</button>
+                      </span>
+                    </td>
+                  </tr>
+                </table>
+                <button type="button" class="btn btn-outline-dark border-0 ml-1 mb-3 small-spaced" @click="pending = true; editationItem.tips.push({ tippedAt: Date.now(), amount: 0, currency: $store.state.configuration.currency, message: ''})">
+                  <fa class="pr-1" fixed-width icon="plus"></fa>
+                  Add tip
+                </button>
+              </b-tab>
+              <b-tab :title="translate('managers.viewers.eventHistory')" v-if="editationItemEvents">
+                <b-table :items="editationItemEvents" :fields="historyFields" class="table-p-0" :per-page="historyPerPage" :current-page="historyCurrentPage">
+                  <template v-slot:cell(timestamp)="data">
+                    {{ dayjs(data.item.timestamp).format('LLL') }}
+                  </template>
+                  <template v-slot:cell(event)="data">
+                    <strong>{{data.item.event}}</strong>
+                  </template>
+                  <template v-slot:cell(info)="data">
+                    <template v-if="data.item.event === 'raid' || data.item.event === 'host'">
+                      {{ translate('managers.viewers.hostAndRaidViewersCount').replace('$value', JSON.parse(data.item.values_json).viewers) }}
+                    </template>
+                    <template v-else-if="data.item.event === 'subgift'">
+                      <div v-if="data.item.username === editationItem.username" v-html="translate('managers.viewers.receivedSubscribeFrom').replace('$value', JSON.parse(data.item.values_json).fromId)" />
+                      <div v-else v-html="translate('managers.viewers.giftedSubscribeTo').replace('$value', data.item.username)" />
+                    </template>
+                  </template>
+                </b-table>
+                <b-pagination
+                  v-model="historyCurrentPage"
+                  :total-rows="editationItemEvents.length || 0"
+                  :per-page="historyPerPage"
+                  style="text-align: center; margin: auto; width: fit-content;"
+                  class="pb-2"
+                ></b-pagination>
+              </b-tab>
+            </b-tabs>
+          </b-form>
+        </div>
+      </b-sidebar>
+      <b-table
+        hover striped small
+        style="cursor: pointer;"
+        :fields="fields" :items="items"
+        @row-clicked="linkTo($event)"
+        :sort-by.sync="sort" :sort-desc.sync="sortDesc">
+        <template v-slot:cell(username)="data">
+          <div class="text-primary font-bigger">{{ data.item.username }}</div>
+          <b-badge :class="[ data.item.isOnline ? 'badge-success' : 'badge-danger' ]" style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
+            active
+          </b-badge>
+          <b-badge :class="[ data.item.isVIP ? 'badge-success' : 'badge-danger' ]" style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
+            vip
+          </b-badge>
+          <b-badge :class="[ data.item.isFollower ? 'badge-success' : 'badge-danger' ]" style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
+            <fa v-if="data.item.haveFollowerLock" icon="fa-lock"></fa>
+            follower
+          </b-badge>
+          <b-badge :class="[ data.item.isSubscriber ? 'badge-success' : 'badge-danger' ]" style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
+            <fa v-if="data.item.haveSubscriberLock" icon="fa-lock"></fa>
+            subscriber
+          </b-badge>
+        </template>
+        <template v-slot:cell(date)="data">
+          <div v-if="Number(data.item.seenAt) !== 0">
+            <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
+              {{ translate('last-seen') }}:
+            </strong>
+            {{ dayjs(Number(data.item.seenAt)).format('LLL') }}</div>
+          <div v-if="data.item.isFollower && Number(data.item.followedAt) !== 0">
+            <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
+              <fa v-if="data.item.haveFollowedAtLock" icon="fa-lock"></fa>
+              {{ translate('followed-since') }}:
+            </strong>
+            {{ dayjs(Number(data.item.followedAt)).format('LLL') }}</div>
+          <div v-if="data.item.isSubscriber && Number(data.item.subscribedAt) !== 0">
+            <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
+              <fa v-if="data.item.haveSubscribedAtLock" icon="fa-lock"></fa>
+              {{ translate('subscribed-since') }}:
+            </strong>
+            {{ dayjs(Number(data.item.subscribedAt)).format('LLL') }}
+          </div>
+        </template>
+        <template v-slot:cell(stats)="data">
+          <div>
+            <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
+              {{ translate('messages') }}:
+            </strong>
+            {{ Intl.NumberFormat($store.state.configuration.lang).format(data.item.messages) }}
+          </div>
+          <div>
+            <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
+              {{ translate('points') }}:
+            </strong>
+            {{ Intl.NumberFormat($store.state.configuration.lang).format(data.item.points) }}
+          </div>
+          <div>
+            <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
+              {{ translate('watched-time') }}:
+            </strong>
+            {{ Intl.NumberFormat($store.state.configuration.lang, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(data.item.watchedTime / 1000 / 60 / 60) }} h
+          </div>
+          <div>
+            <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
+              {{ translate('tips') }}:
+            </strong>
+            {{ Intl.NumberFormat($store.state.configuration.lang, { style: 'currency', currency: $store.state.configuration.currency }).format(data.item.sumTips) }}
+          </div>
+        </template>
+        <template v-slot:cell(stats2)="data">
+          <div>
+            <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
+              {{ translate('bits') }}:
+            </strong>
+            {{ Intl.NumberFormat($store.state.configuration.lang).format(data.item.sumBits) }}
+          </div>
+          <div v-if="data.item.isSubscriber">
+            <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
+              {{ translate('tier') }}:
+            </strong>
+            {{ data.item.subscribeTier }}
+          </div>
+          <div>
+            <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
+              {{ translate('subgifts') }}:
+            </strong>
+            {{ Intl.NumberFormat($store.state.configuration.lang).format(data.item.giftedSubscribes) }}
+          </div>
+          <div>
+            <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
+              {{ translate('subStreak') }}:
+            </strong>
+            {{ Intl.NumberFormat($store.state.configuration.lang).format(data.item.subscribeStreak) }}
+          </div>
+          <div>
+            <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
+              {{ translate('subCumulativeMonths') }}:
+            </strong>
+            {{ Intl.NumberFormat($store.state.configuration.lang).format(data.item.subscribeCumulativeMonths) }}
+          </div>
+        </template>
+      </b-table>
+    </template>
+  </b-container>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted, watch, getCurrentInstance } from '@vue/composition-api'
+import { getSocket } from 'src/panel/helpers/socket';
+import { get, orderBy, xor } from 'lodash-es';
+import { capitalize } from 'src/panel/helpers/capitalize';
+import { dayjs } from 'src/bot/helpers/dayjs';
+import translate from 'src/panel/helpers/translate';
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faSortDown, faSortUp, faSortAlphaUp, faSortAlphaDown, faLock, faUnlock, faSync } from '@fortawesome/free-solid-svg-icons'
+import { UserInterface } from '../../../bot/database/entity/user';
+library.add(faSortDown, faSortUp, faSortAlphaUp, faSortAlphaDown, faLock, faUnlock, faSync)
+
+import { validationMixin } from 'vuelidate'
+import { required, minValue } from 'vuelidate/lib/validators';
+import { ButtonStates } from 'src/panel/helpers/buttonStates';
+import { EventListInterface } from 'src/bot/database/entity/eventList';
+
+const socket = getSocket('/core/users');
+const socketEventList = getSocket('/overlays/eventlist');
+
+import VueFlatPickr from 'vue-flatpickr-component';
+import 'flatpickr/dist/flatpickr.css';
+
+export default defineComponent({
+  mixins: [ validationMixin ],
+  components: {
+    'loading': () => import('src/panel/components/loading.vue'),
+    datetime: VueFlatPickr,
+  },
+  validations: {
+    editationItem: {
+      messages: { required, minValue: minValue(0) },
+      points: { required, minValue: minValue(0) },
+    },
+    editationItemWatchedTime: { required, minValue: minValue(0) }
+  },
+  setup(props, ctx) {
+    const instance = getCurrentInstance();
+    const isSidebarVisible = ref(false);
+    const sidebarSlideEnabled = ref(true);
+
+    const items = ref([] as Required<UserInterface>[]);
+    const editationItem = ref(null as UserInterface | null);
+    const editationItemEvents = ref(null as Required<EventListInterface>[] | null);
+    const editationItemWatchedTime = ref(0);
+    const editingTipsIds = ref([] as number[]);
+    const editingBitsIds = ref([] as number[]);
+
+    const count = ref(0);
+    const search = ref('');
+
+    const state = ref({
+      loading: ButtonStates.progress,
+      save: ButtonStates.idle,
+      pending: false,
+      forceCheckFollowedAt: ButtonStates.idle,
+    } as {
+      loading: number;
+      save: number;
+      pending: boolean;
+      forceCheckFollowedAt: number;
+    });
+
+    const currentPage = ref(1);
+    const perPage = ref(25);
+    const historyCurrentPage = ref(0);
+    const historyPerPage = ref(10);
+
+    const sortDesc = ref(false);
+    const sort = ref('user.username');
+
+    const filter = ref({
+      followers: null,
+      subscribers: null,
+      vips: null,
+      active: null
+    })
+
+    const fields = [
+      { key: 'username', label: '' },
+      { key: 'date', label: '' },
+      { key: 'stats', label: '' },
+      { key: 'stats2', label: '' },
+    ];
+    const historyFields = [
+      { key: 'timestamp', sortable: true },
+      { key: 'event' },
+      { key: 'info', label: '' },
+    ];
+
+    const dateTimePickerConfig = {
+      enableTime: true,
+      formatDate: (val: any) => {
+        return dayjs(Number(val)).format('LLL');
+      },
+      enableSeconds: true,
+      maxDate: Date.now(),
+      allowInput: true,
+    } as const;
+
+    const dateTimePickerConfigBitsTips = {
+      enableTime: true,
+      formatDate: (val: any) => {
+        return dayjs(Number(val)).format('LLL');
+      },
+      enableSeconds: true,
+      maxDate: Date.now(),
+      allowInput: true,
+    } as const;
+
+    const refresh = () => {
+      state.value.loading = ButtonStates.progress;
+      console.time('find.viewers')
+      socket.emit('find.viewers', { page: (currentPage.value - 1), order: {
+        orderBy: sort.value, sortOrder: sortDesc.value ? 'DESC' : 'ASC'
+      }, filter: filter.value, search: search.value.length > 0 ? search.value : undefined }, (err: string | null, items_: Required<UserInterface>[], count_: number) => {
+        if (err) {
+          return console.error(err);
+        }
+        items.value = items_;
+        count.value = count_;
+        state.value.loading = ButtonStates.success;
+        console.timeEnd('find.viewers');
+      })
+    }
+
+    watch([currentPage, sort, sortDesc, filter, search], () => {
+      refresh();
+    }, { deep: true })
+
+    watch(() => ctx.root.$route.params.id, (val) => {
+      const $v = instance?.$v;
+      $v?.$reset();
+      if (val) {
+        isSidebarVisible.value = true;
+      } else {
+        state.value.pending = false;
+      }
+    })
+    watch(editationItem, (val, oldVal) => {
+      if (val !== null && oldVal !== null) {
+        state.value.pending = true;
+      }
+    }, { deep: true });
+
+    watch(editationItemWatchedTime, (val: number) => {
+      if (editationItem.value) {
+        editationItem.value.watchedTime = val * 60 * 60 * 1000;
+      }
+    })
+
+    // we need to remap editationItem.followedAt to timestamp
+    watch(() => editationItem.value?.followedAt, (value) => {
+      if (typeof value === 'string' && editationItem.value) {
+        const locale = get(ctx.root.$store.state, 'configuration.lang', 'en');
+        editationItem.value.followedAt = dayjs(value, 'LLL', locale).unix() * 1000;
+      }
+    })
+
+    // we need to remap editationItem bits and tips to timestamp
+    watch([() => editationItem.value?.bits, () => editationItem.value?.tips], (value) => {
+      if (editationItem.value) {
+        const locale = get(ctx.root.$store.state, 'configuration.lang', 'en');
+        for (const bit of editationItem.value.bits) {
+          if (typeof bit.cheeredAt === 'string') {
+            bit.cheeredAt = dayjs(bit.cheeredAt, 'LLL', locale).unix() * 1000;
+          }
+        }
+        for (const tip of editationItem.value.tips) {
+          if (typeof tip.tippedAt === 'string') {
+            tip.tippedAt = dayjs(tip.tippedAt, 'LLL', locale).unix() * 1000;
+          }
+        }
+      }
+    }, { deep: true })
+
+    onMounted(() => {
+      refresh();
+      loadEditationItem();
+      if (ctx.root.$route.params.id) {
+        isSidebarVisible.value = true;
+      }
+    });
+
+    const resetPoints = () => {
+      socket.emit('viewers::resetPointsAll', () => {
+        refresh();
+      })
+    }
+
+    const resetWatchedTime = () => {
+      socket.emit('viewers::resetWatchedTimeAll', () => {
+        refresh();
+      })
+    }
+
+    const resetMessages = () => {
+      socket.emit('viewers::resetMessagesAll', () => {
+        refresh();
+      })
+    }
+
+    const resetBits = () => {
+      socket.emit('viewers::resetBitsAll', () => {
+        refresh();
+      })
+    }
+
+    const resetTips = () => {
+      socket.emit('viewers::resetTipsAll', () => {
+        refresh();
+      })
+    }
+
+    const linkTo = (item: Required<UserInterface>) => {
+      console.debug('Clicked', item.userId);
+      ctx.root.$router.push({ name: 'viewersManagerEdit', params: { id: String(item.userId) } });
+    }
+
+    const isSidebarVisibleChange = (isVisible: boolean, ev: any) => {
+      if (!isVisible) {
+        if (state.value.pending) {
+          const isOK = confirm('You will lose your pending changes. Do you want to continue?')
+          if (!isOK) {
+            sidebarSlideEnabled.value = false;
+            isSidebarVisible.value = false;
+            ctx.root.$nextTick(() => {
+              isSidebarVisible.value = true;
+              setTimeout(() => {
+                sidebarSlideEnabled.value = true;
+              }, 300);
+            });
+            return;
+          }
+        }
+        isSidebarVisible.value = isVisible;
+        ctx.root.$router.push({ name: 'viewersManagerList' }).catch(() => {});
+      } else {
+        if (sidebarSlideEnabled.value) {
+          editationItem.value = null
+          editationItemEvents.value = null
+          loadEditationItem();
+        }
+      }
+    }
+
+    const loadEditationItem = async () => {
+      if (!ctx.root.$route.params.id) {
+        return;
+      }
+      await new Promise<void>((resolve, reject) => {
+        socket.emit('viewers::findOne', ctx.root.$route.params.id, (err: string | null, data: Readonly<Required<UserInterface>> & { aggregatedTips: number; aggregatedBits: number; permission: string }) => {
+          if (err) {
+            reject(console.error(err));
+          }
+          console.log('Loaded viewer', data);
+          editationItem.value = {
+            ...data,
+            tips: orderBy(data.tips, 'tippedAt', 'desc'),
+            bits: orderBy(data.bits, 'cheeredAt', 'desc'),
+          }
+
+          editationItemWatchedTime.value = Number((data.watchedTime / (60 * 60 * 1000)).toFixed(1));
+          resolve();
+        })
+      });
+      await new Promise<void>((resolve, reject) => {
+        if (editationItem.value) {
+          socketEventList.emit('eventlist::getUserEvents', editationItem.value.userId, (err: string | null, events: Required<EventListInterface>[]) => {
+            if (err) {
+              return console.error(err);
+            }
+            editationItemEvents.value = events;
+            resolve();
+          })
+        } else {
+          resolve();
+        }
+      });
+
+      ctx.root.$nextTick(() => { state.value.pending = false })
+    }
+
+    const forceCheckFollowedAt = () => {
+      if (editationItem.value) {
+        state.value.pending = true
+        state.value.forceCheckFollowedAt = ButtonStates.progress;
+        socket.emit('viewers::followedAt', editationItem.value.userId, (err: string | null, followed_at: number) => {
+          state.value.forceCheckFollowedAt = ButtonStates.idle;
+          if (err) {
+            if (err.includes('Not a follower') && editationItem.value) {
+              editationItem.value.followedAt = 0;
+            }
+            return console.error(err)
+          }
+          else if (editationItem.value) {
+            editationItem.value.followedAt = followed_at;
+          }
+        })
+      }
+    }
+
+    const save = () => {
+      if (!editationItem.value) {
+        return;
+      }
+
+      const $v = instance?.$v;
+      $v?.$touch();
+      if (!$v?.$invalid) {
+        state.value.save = ButtonStates.progress
+        socket.emit('viewers::save', editationItem.value, (err: string | null, viewer: UserInterface) => {
+          if (err) {
+            console.error(err)
+            return state.value.save = ButtonStates.fail;
+          }
+          state.value.save = ButtonStates.success;
+          editationItem.value = viewer; // replace with new data (e.g. ids on tips etc)
+          ctx.root.$nextTick(() => {
+            refresh();
+            state.value.pending = false
+          });
+          setTimeout(() => {
+            state.value.save = ButtonStates.idle;
+          }, 1000)
+        })
+      }
+    }
+
+    const removeBits = (id: number) => {
+      if (editationItem.value) {
+        editationItem.value.bits.splice(id, 1);
+        ctx.root.$forceUpdate();
+      }
+      state.value.pending = true
+    }
+
+    const removeTips = (id: number) => {
+      if (editationItem.value) {
+        editationItem.value.tips.splice(id, 1);
+        ctx.root.$forceUpdate();
+      }
+      state.value.pending = true
+    }
+
+    return {
+      fields,
+      historyFields,
+      items,
+      perPage,
+      editationItem,
+      editationItemEvents,
+      editationItemWatchedTime,
+      editingTipsIds,
+      editingBitsIds,
+      state,
+      sort,
+      sortDesc,
+      count,
+      currentPage,
+      filter,
+      search,
+      dateTimePickerConfig,
+      dateTimePickerConfigBitsTips,
+      historyCurrentPage,
+      historyPerPage,
+
+      sidebarSlideEnabled,
+      isSidebarVisibleChange,
+      isSidebarVisible,
+
+      linkTo,
+      resetTips,
+      resetBits,
+      resetMessages,
+      resetWatchedTime,
+      resetPoints,
+      removeTips,
+      removeBits,
+      forceCheckFollowedAt,
+      save,
+
+      get,
+      capitalize,
+      dayjs,
+      translate,
+      xor,
+      ButtonStates,
+    }
+  }
+});
+</script>
diff --git a/src/panel/views/managers/viewers/viewers-edit.vue b/src/panel/views/managers/viewers/viewers-edit.vue
deleted file mode 100644
index 1de89e1c320..00000000000
--- a/src/panel/views/managers/viewers/viewers-edit.vue
+++ /dev/null
@@ -1,607 +0,0 @@
-<template>
-  <b-container fluid>
-    <template v-if="state.loading === 1">
-      <b-row>
-        <b-col>
-          <span class="title text-default mb-2">
-            {{ translate('menu.manage') }}
-            <small><fa icon="angle-right"/></small>
-            {{ translate('menu.viewers') }}
-          </span>
-        </b-col>
-      </b-row>
-
-      <panel>
-        <template v-slot:left>
-          <button-with-icon class="btn-secondary btn-shrink btn-reverse" icon="caret-left" href="#/manage/viewers/list">{{translate('commons.back')}}</button-with-icon>
-        </template>
-      </panel>
-      <loading slow/>
-    </template>
-    <template v-else>
-      <b-row>
-        <b-col>
-          <span class="title text-default mb-2">
-            {{ translate('menu.manage') }}
-            <small><fa icon="angle-right"/></small>
-            {{ translate('menu.viewers') }}
-            <template v-if="$route.params.id">
-              <small><fa icon="angle-right"/></small>
-              {{viewer.username}}
-              <small class="text-muted text-monospace" style="font-size:0.7rem">{{$route.params.id}}</small>
-            </template>
-          </span>
-        </b-col>
-      </b-row>
-
-      <panel>
-        <template v-slot:left>
-          <button-with-icon class="btn-secondary btn-shrink btn-reverse" icon="caret-left" href="#/manage/viewers/list">{{translate('commons.back')}}</button-with-icon>
-          <hold-button v-if="$route.params.id || null" @trigger="del()" icon="trash" class="btn-shrink btn-danger">
-            <template slot="title">{{translate('dialog.buttons.delete')}}</template>
-            <template slot="onHoldTitle">{{translate('dialog.buttons.hold-to-delete')}}</template>
-          </hold-button>
-          <button type="button" class="btn btn-outline-primary border-light" @click="forceCheckFollowedAt()">
-            <fa fixed-width icon="sync-alt" class="mr-1" :spin="state.forceCheckFollowedAt"></fa>
-            Force 'followed since' check
-          </button>
-        </template>
-        <template v-slot:right>
-          <b-alert show variant="info" v-if="state.pending" v-html="translate('dialog.changesPending')" class="mr-2 p-2 mb-0"></b-alert>
-          <state-button @click="save()" text="saveChanges" class="btn-shrink" :state="state.save" />
-        </template>
-      </panel>
-
-      <div class="pt-3">
-        <!-- Editation stuff here -->
-        <form>
-          <div class="form-row pl-2 pr-2">
-            <div class="form-group col">
-              <label>{{ translate('last-seen') }}</label>
-              <input readonly="true" v-model="lastSeen" type="text" class="form-control">
-            </div>
-            <div class="form-group col">
-              <label>{{ translate('followed-since') }}</label>
-              <div class="input-group">
-                <datetime
-                  v-model="viewer.followedAt"
-                  :config="dateTimePickerConfig"
-                  :disabled="viewer.haveFollowedAtLock"
-                  class="form-control"/>
-                <div class="input-group-append">
-                  <button type="button" class="border border-left-0 btn" :class="[viewer.haveFollowedAtLock ? 'btn-secondary border-0' : 'btn-light']" @click="viewer.haveFollowedAtLock = !viewer.haveFollowedAtLock">
-                    <fa :icon="viewer.haveFollowedAtLock ? 'lock' : 'unlock'"></fa>
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div class="form-group col">
-              <label>{{ translate('subscribed-since') }}</label>
-              <div class="input-group">
-                <datetime
-                  v-model="viewer.subscribedAt"
-                  :config="dateTimePickerConfig"
-                  :disabled="viewer.haveSubscribedAtLock"
-                  class="form-control"/>
-                <div class="input-group-append">
-                  <button type="button" class="btn border" :class="[viewer.haveSubscribedAtLock ? 'btn-secondary border-0' : 'btn-light']" @click="viewer.haveSubscribedAtLock = !viewer.haveSubscribedAtLock">
-                    <fa :icon="viewer.haveSubscribedAtLock ? 'lock' : 'unlock'"></fa>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="form-row pl-2 pr-2">
-            <div class="form-group col">
-              <label>{{ translate('message') }}</label>
-              <input v-model.number="viewer.messages" type="text" class="form-control">
-            </div>
-            <div class="form-group col">
-              <label>{{ translate('points') }}</label>
-              <input v-model.number="viewer.points" type="text" class="form-control">
-            </div>
-            <div class="form-group col">
-              <label>{{ translate('watched-time') }} <small>{{ translate('hours') }}</small></label>
-              <input v-model.number="watchedTime" type="text" class="form-control">
-            </div>
-            <div class="form-group col">
-              <label>{{ translate('subgifts') }}</label>
-              <input v-model.number="viewer.giftedSubscribes" type="text" class="form-control" readonly="true">
-            </div>
-            <div class="form-group col">
-              <label>{{ translate('subCumulativeMonths') }}</label>
-              <input v-model.number="viewer.subscribeCumulativeMonths" type="text" class="form-control" readonly="true">
-            </div>
-            <div class="form-group col">
-              <label>{{ translate('subStreak') }}</label>
-              <input v-model.number="viewer.subscribeStreak" type="text" class="form-control" readonly="true">
-            </div>
-          </div>
-
-          <div class="form-row pl-2 pr-2 pb-3">
-            <div class="col">
-              <div class="btn-group d-flex" role="group">
-                <button :disabled="viewer.haveFollowerLock" type="button" class="btn btn-block" v-on:click="viewer.isFollower = !viewer.isFollower" v-bind:class="[ viewer.isFollower ? 'btn-success' : 'btn-danger' ]" aria-hidden="true">Follower</button>
-                <button type="button" class="border border-left-0 btn" :class="[viewer.haveFollowerLock ? 'btn-secondary border-0' : 'btn-light']" @click="viewer.haveFollowerLock = !viewer.haveFollowerLock">
-                  <fa :icon="viewer.haveFollowerLock ? 'lock' : 'unlock'"></fa>
-                </button>
-              </div>
-            </div>
-            <div class="col">
-                <div class="btn-group d-flex" role="group">
-                  <button :disabled="viewer.haveSubscriberLock" type="button" class="btn btn-block" v-on:click="viewer.isSubscriber = !viewer.isSubscriber" v-bind:class="[ viewer.isSubscriber ? 'btn-success' : 'btn-danger' ]" aria-hidden="true">Subscriber</button>
-                  <button type="button" class="border border-left-0 btn" :class="[viewer.haveSubscriberLock ? 'btn-secondary border-0' : 'btn-light']" @click="viewer.haveSubscriberLock = !viewer.haveSubscriberLock">
-                    <fa :icon="viewer.haveSubscriberLock ? 'lock' : 'unlock'"></fa>
-                  </button>
-                </div>
-            </div>
-            <div class="col">
-                <div class="btn-group d-flex" role="group">
-                  <button type="button" class="btn btn-block" v-on:click="viewer.isVIP = !viewer.isVIP" v-bind:class="[ viewer.isVIP ? 'btn-success' : 'btn-danger' ]" aria-hidden="true">VIP</button>
-                </div>
-            </div>
-          </div>
-
-          <b-tabs content-class="mt-1" pills>
-            <b-tab :title="translate('bits')" active>
-              <table class="table table-sm ml-2 mr-2" v-if="viewer.bits.length !== 0">
-                <tr v-for="(bits, index) of viewer.bits" :key="bits.cheeredAt">
-                  <td scope="row">
-                    <datetime
-                      v-if="editingBitsIds.includes(index)"
-                      v-model="bits.cheeredAt"
-                      :config="dateTimePickerConfigBitsTips"
-                      class="form-control w-auto"/>
-                    <template v-else>
-                      {{ dayjs(bits.cheeredAt).format('LLL') }}
-                    </template>
-                  </td>
-                  <td>
-                    <input type="number" min="0" v-model="bits.amount" v-if="editingBitsIds.includes(index)" class="form-control">
-                    <strong v-else>{{ Number(bits.amount) }}</strong>
-                  </td>
-                  <td>
-                    <textarea v-model="bits.message" class="form-control" v-if="editingBitsIds.includes(index)" style="height:38px"></textarea>
-                    <span v-else>{{ bits.message }}</span>
-                  </td>
-                  <td class="text-right">
-                    <template v-if="!editingBitsIds.includes(index)">
-                      <b-dropdown variant="light" toggle-class="text-decoration-none" no-caret>
-                        <template v-slot:button-content>
-                          <fa icon="ellipsis-v"></fa>
-                        </template>
-                        <b-dropdown-item @click="editingBitsIds = xor(editingBitsIds, [index]); pending = true"><fa icon="edit" fixed-width></fa> {{ translate('dialog.buttons.edit') }}</b-dropdown-item>
-                        <b-dropdown-item @click="removeBits(index)"><fa icon="trash-alt" fixed-width></fa> {{ translate('dialog.buttons.delete') }}</b-dropdown-item>
-                      </b-dropdown>
-                    </template>
-                    <span v-else>
-                      <button
-                        type="button"
-                        @click="editingBitsIds = xor(editingBitsIds, [index])"
-                        class="btn btn-block btn-outline-dark border-0 h-100 small-spaced">DONE</button>
-                    </span>
-                  </td>
-                </tr>
-              </table>
-              <button type="button" class="btn btn-outline-dark border-0 ml-1 mb-3 small-spaced" @click="pending = true; viewer.bits.push({cheeredAt: Date.now(), amount: 0, message: ''})">
-                <fa class="pr-1" fixed-width icon="plus"></fa>
-                Add bits
-              </button>
-            </b-tab>
-            <b-tab :title="translate('tips')">
-              <table class="table table-sm ml-2 mr-2" v-if="viewer.tips.length !== 0">
-                <tr v-for="(tips, index) of viewer.tips" :key="tips.tippedAt">
-                  <td scope="row">
-                    <datetime
-                      v-if="editingTipsIds.includes(index)"
-                      v-model="tips.tippedAt"
-                      :config="dateTimePickerConfigBitsTips"
-                      class="form-control w-auto"/>
-                    <template v-else>
-                      {{ dayjs(tips.tippedAt).format('LLL') }}
-                    </template>
-                  </td>
-                  <td>
-                    <div class="d-flex">
-                      <template v-if="editingTipsIds.includes(index)">
-                        <input type="number" min="0" v-model="tips.amount" class="form-control">
-                        <select class="form-control" v-model="tips.currency">
-                          <option value="USD">USD</option>
-                          <option value="AUD">AUD</option>
-                          <option value="BGN">BGN</option>
-                          <option value="BRL">BRL</option>
-                          <option value="CAD">CAD</option>
-                          <option value="CHF">CHF</option>
-                          <option value="CNY">CNY</option>
-                          <option value="CZK">CZK</option>
-                          <option value="DKK">DKK</option>
-                          <option value="EUR">EUR</option>
-                          <option value="GBP">GBP</option>
-                          <option value="HKD">HKD</option>
-                          <option value="HRK">HRK</option>
-                          <option value="HUF">HUF</option>
-                          <option value="IDR">IDR</option>
-                          <option value="ILS">ILS</option>
-                          <option value="INR">INR</option>
-                          <option value="ISK">ISK</option>
-                          <option value="JPY">JPY</option>
-                          <option value="KRW">KRW</option>
-                          <option value="MXN">MXN</option>
-                          <option value="MYR">MYR</option>
-                          <option value="NOK">NOK</option>
-                          <option value="NZD">NZD</option>
-                          <option value="PHP">PHP</option>
-                          <option value="PLN">PLN</option>
-                          <option value="RON">RON</option>
-                          <option value="RUB">RUB</option>
-                          <option value="SEK">SEK</option>
-                          <option value="SGD">SGD</option>
-                          <option value="THB">THB</option>
-                          <option value="TRY">TRY</option>
-                          <option value="ZAR">ZAR</option>
-                        </select>
-                      </template>
-                      <strong v-else>
-                        {{ Intl.NumberFormat($store.state.configuration.lang, { style: 'currency', currency: tips.currentcy }).format(tips.amount) }}
-                      </strong>
-                    </div>
-                  <td>
-                    <template v-if="editingTipsIds.includes(index)">
-                      <textarea v-model="tips.message" class="form-control" style="height:38px"></textarea>
-                    </template>
-                    <span v-else>{{ tips.message }}</span>
-                  <td class="text-right">
-                    <template v-if="!editingTipsIds.includes(index)">
-                      <b-dropdown variant="light" toggle-class="text-decoration-none" no-caret>
-                        <template v-slot:button-content>
-                          <fa icon="ellipsis-v"></fa>
-                        </template>
-                        <b-dropdown-item @click="editingTipsIds = xor(editingTipsIds, [index]); pending = true"><fa icon="edit" fixed-width></fa> {{ translate('dialog.buttons.edit') }}</b-dropdown-item>
-                        <b-dropdown-item @click="removeTips(index)"><fa icon="trash-alt" fixed-width></fa> {{ translate('dialog.buttons.delete') }}</b-dropdown-item>
-                      </b-dropdown>
-                    </template>
-                    <span v-else>
-                      <button
-                        type="button"
-                        @click="editingTipsIds = xor(editingTipsIds, [index])"
-                        class="btn btn-block btn-outline-dark border-0 h-100 small-spaced">DONE</button>
-                    </span>
-                  </td>
-                </tr>
-              </table>
-              <button type="button" class="btn btn-outline-dark border-0 ml-1 mb-3 small-spaced" @click="pending = true; viewer.tips.push({ tippedAt: Date.now(), amount: 0, currency: $store.state.configuration.currency, message: ''})">
-                <fa class="pr-1" fixed-width icon="plus"></fa>
-                Add tip
-              </button>
-            </b-tab>
-            <b-tab :title="translate('managers.viewers.eventHistory')">
-              <b-table :items="events" :fields="fields" class="table-p-0" :per-page="historyPerPage" :current-page="historyCurrentPage">
-                <template v-slot:cell(timestamp)="data">
-                  {{ dayjs(data.item.timestamp).format('LLL') }}
-                </template>
-                <template v-slot:cell(event)="data">
-                  <strong>{{data.item.event}}</strong>
-                </template>
-                <template v-slot:cell(info)="data">
-                  <template v-if="data.item.event === 'raid' || data.item.event === 'host'">
-                    {{ translate('managers.viewers.hostAndRaidViewersCount').replace('$value', JSON.parse(data.item.values_json).viewers) }}
-                  </template>
-                  <template v-else-if="data.item.event === 'subgift'">
-                    <div v-if="data.item.username === viewer.username" v-html="translate('managers.viewers.receivedSubscribeFrom').replace('$value', JSON.parse(data.item.values_json).fromId)" />
-                    <div v-else v-html="translate('managers.viewers.giftedSubscribeTo').replace('$value', data.item.username)" />
-                  </template>
-                </template>
-              </b-table>
-              <b-pagination
-                v-model="historyCurrentPage"
-                :total-rows="events.length || 0"
-                :per-page="historyPerPage"
-                style="text-align: center; margin: auto; width: fit-content;"
-                class="pb-2"
-              ></b-pagination>
-            </b-tab>
-          </b-tabs>
-        </form>
-      </div>
-    </template>
-  </b-container>
-</template>
-
-<script lang="ts">
-import { Vue, Component, Watch } from 'vue-property-decorator';
-import { getSocket } from 'src/panel/helpers/socket';
-import { orderBy, remove, xor } from 'lodash';
-import translate from 'src/panel/helpers/translate';
-
-import { Route } from 'vue-router'
-import { NextFunction } from 'express';
-
-import VueFlatPickr from 'vue-flatpickr-component';
-import 'flatpickr/dist/flatpickr.css';
-
-import { dayjs } from 'src/bot/helpers/dayjs';
-import { UserInterface } from 'src/bot/database/entity/user';
-import type { EventListInterface } from 'src/bot/database/entity/eventList';
-
-import { library } from '@fortawesome/fontawesome-svg-core';
-import {
-  faLock, faUnlock,
-} from '@fortawesome/free-solid-svg-icons';
-library.add(faLock, faUnlock);
-
-Component.registerHooks([
-  'beforeRouteEnter',
-  'beforeRouteLeave',
-  'beforeRouteUpdate' // for vue-router 2.2+
-])
-
-@Component({
-  components: {
-    'loading': () => import('../../../components/loading.vue'),
-    datetime: VueFlatPickr,
-  }
-})
-export default class viewersEdit extends Vue {
-  translate = translate;
-  dayjs = dayjs;
-  orderBy = orderBy;
-  xor = xor;
-
-  socket = getSocket('/core/users');
-  socketEventList = getSocket('/overlays/eventlist');
-
-  viewer: UserInterface | null = null;
-  watchedTime: any = null;
-
-  editingTipsIds: number[] = [];
-  editingBitsIds: number[] = [];
-
-  dateTimePickerConfig = {
-    enableTime: true,
-    enableSeconds: true,
-    maxDate: Date.now()
-  }
-
-  dateTimePickerConfigBitsTips = {
-    defaultDate: Date.now(),
-    enableTime: true,
-    enableSeconds: true,
-  }
-
-  events: Required<EventListInterface>[] = []
-  fields = [
-    { key: 'timestamp', sortable: true },
-    { key: 'event' },
-    { key: 'info', label: '' },
-  ];
-  historyCurrentPage = 0;
-  historyPerPage = 10;
-
-  state: {
-    loading: number;
-    save: number;
-    pending: boolean;
-    forceCheckFollowedAt: boolean;
-  } = {
-    loading: this.$state.progress,
-    save: this.$state.idle,
-    pending: false,
-    forceCheckFollowedAt: false,
-  }
-
-  forceCheckFollowedAt() {
-    if (this.viewer) {
-      this.state.pending = true
-      this.state.forceCheckFollowedAt = true
-      this.socket.emit('viewers::followedAt', this.viewer.userId, (err: string | null, followed_at: number) => {
-        this.state.forceCheckFollowedAt = false
-        if (err) return console.error(err)
-        else if (this.viewer) {
-          this.viewer.followedAt = followed_at;
-        }
-      })
-    }
-  }
-
-  removeBits(id: number) {
-    if (this.viewer) {
-      remove(this.viewer.bits, (_v, idx) => idx === id);
-      this.$forceUpdate();
-    }
-    this.state.pending = true
-  }
-
-  removeTips(id: number) {
-    if (this.viewer) {
-      remove(this.viewer.tips, (_v, idx) => idx === id);
-      this.$forceUpdate();
-    }
-    this.state.pending = true
-  }
-
-  del() {
-    this.socket.emit('viewers::remove', this.viewer, (err: string | null) => {
-      this.$router.push({ name: 'viewersManagerList' })
-    })
-  }
-
-  save() {
-    this.state.save = this.$state.progress
-    this.socket.emit('viewers::save', this.viewer, (err: string | null, viewer: UserInterface) => {
-      if (err) {
-        console.error(err)
-        return this.state.save = this.$state.fail;
-      }
-      this.state.save = this.$state.success;
-      this.viewer = viewer; // replace with new data (e.g. ids on tips etc)
-      this.$nextTick(() => { this.state.pending = false });
-      setTimeout(() => this.state.save = this.$state.idle, 1000)
-    })
-  }
-
-  @Watch('watchedTime')
-  _watchedTime(val: number) {
-    if (this.viewer) {
-      this.viewer.watchedTime = val * 60 * 60 * 1000;
-    }
-  }
-
-  @Watch('viewer', { deep: true })
-  setPending() { this.state.pending = true; }
-
-  @Watch('viewer.bits', { deep: true })
-  _watchBits(val: UserInterface['bits']) {
-    if (this.viewer) {
-      this.state.pending = true;
-      for (const v of val) {
-        v.cheeredAt = (new Date(v.cheeredAt || 0)).getTime()
-      }
-    }
-  }
-
-  @Watch('viewer.tips', { deep: true })
-  _watchTips(val: UserInterface['tips']) {
-    if (this.viewer) {
-      this.state.pending = true;
-      for (const v of val) {
-        v.tippedAt = (new Date(v.tippedAt || 0)).getTime()
-      }
-    }
-  }
-
-  @Watch('viewer.followedAt')
-  _watchTimeFollow(val: number) {
-    if (this.viewer) {
-      if (val === null || this.viewer.followedAt === new Date(val).getTime()) {
-        return
-      }
-      this.state.pending = true;
-      this.viewer.followedAt = new Date(val).getTime();
-    }
-  }
-
-  @Watch('viewer.subscribedAt')
-  _watchTimeSub(val: number) {
-    if (this.viewer) {
-      if (val === null || this.viewer.subscribedAt === new Date(val).getTime()) {
-        return
-      }
-      this.state.pending = true;
-      this.viewer.subscribedAt = new Date(val).getTime();
-    }
-  }
-
-  get lastSeen() {
-    if (!this.viewer || this.viewer.seenAt === 0) {
-      return '';
-    } else {
-      return dayjs(this.viewer.seenAt).format('HH:mm:ss, YYYY-MM-DD');
-    }
-  }
-
-  get followedAt() {
-    if (!this.viewer || this.viewer.followedAt === 0) {
-      return '';
-    } else {
-      return this.viewer.followedAt;
-    }
-  }
-
-
-  set followedAt(val: number | '' | undefined) {
-    if (this.viewer) {
-      this.viewer.followedAt = Number(val);
-    }
-  }
-
-  get subscribedAt() {
-    if (!this.viewer || this.viewer.subscribedAt === 0) {
-      return '';
-    } else {
-      return this.viewer.subscribedAt;
-    }
-  }
-
-
-  set subscribedAt(val: number | '' | undefined) {
-    if (this.viewer) {
-      this.viewer.subscribedAt = Number(val);
-    }
-  }
-
-  @Watch('viewer.tips', { deep: true })
-  @Watch('viewer.bits', { deep: true })
-  updateOrder() {
-    if (this.viewer) {
-      if (this.viewer.bits.length > 0 && this.viewer.bits[0].cheeredAt !== orderBy(this.viewer.bits, 'cheeredAt', 'desc')[0].cheeredAt) {
-        this.viewer.bits = orderBy(this.viewer.bits, 'cheeredAt', 'desc');
-      }
-      if (this.viewer.tips.length > 0 && this.viewer.tips[0].tippedAt !== orderBy(this.viewer.tips, 'tippedAt', 'desc')[0].tippedAt) {
-        this.viewer.tips = orderBy(this.viewer.tips, 'tippedAt', 'desc');
-      }
-    }
-  }
-
-  async created() {
-    this.state.loading = this.$state.progress;
-    await new Promise<void>((resolve, reject) => {
-      this.socket.emit('viewers::findOne', this.$route.params.id, (err: string | null, data: Readonly<Required<UserInterface>> & { aggregatedTips: number; aggregatedBits: number; permission: string }) => {
-        if (err) {
-          reject(console.error(err));
-        }
-        console.log('Loaded viewer', data);
-        this.viewer = {
-          ...data,
-          tips: orderBy(data.tips, 'tippedAt', 'desc'),
-          bits: orderBy(data.bits, 'cheeredAt', 'desc'),
-        }
-        this.watchedTime = Number(data.watchedTime / (60 * 60 * 1000)).toFixed(1);
-        resolve();
-      })
-    });
-    await new Promise<void>((resolve, reject) => {
-      if (this.viewer) {
-        this.socketEventList.emit('eventlist::getUserEvents', this.viewer.userId, (err: string | null, events: Required<EventListInterface>[]) => {
-          if (err) {
-            return console.error(err);
-          }
-          this.events = events;
-          resolve();
-        })
-      } else {
-        resolve();
-      }
-    });
-
-    this.state.loading = this.$state.success;
-    this.$nextTick(() => { this.state.pending = false })
-  }
-
-  beforeRouteUpdate(to: Route, from: Route, next: NextFunction) {
-    if (this.state.pending) {
-      const isOK = confirm('You will lose your pending changes. Do you want to continue?')
-      if (!isOK) {
-        next(false);
-      } else {
-        next();
-      }
-    } else {
-      next();
-    }
-  }
-
-  beforeRouteLeave(to: Route, from: Route, next: NextFunction) {
-    if (this.state.pending) {
-      const isOK = confirm('You will lose your pending changes. Do you want to continue?')
-      if (!isOK) {
-        next(false);
-      } else {
-        next();
-      }
-    } else {
-      next();
-    }
-  }
-}
-</script>
\ No newline at end of file
diff --git a/src/panel/views/managers/viewers/viewers-list.vue b/src/panel/views/managers/viewers/viewers-list.vue
deleted file mode 100644
index 6893a13dcf8..00000000000
--- a/src/panel/views/managers/viewers/viewers-list.vue
+++ /dev/null
@@ -1,360 +0,0 @@
-<template>
-  <b-container fluid>
-    <b-row>
-      <b-col>
-        <span class="title text-default mb-2">
-          {{ translate('menu.manage') }}
-          <small><fa icon="angle-right"/></small>
-          {{ translate('menu.viewers') }}
-        </span>
-      </b-col>
-    </b-row>
-
-    <panel search @search="search = $event">
-      <template v-slot:left>
-        <b-dropdown no-caret variant="primary">
-          <template v-slot:button-content>
-            <span class="dropdown-icon">
-              <template v-if="sort === 'user.username'">{{ translate('username') }}</template>
-              <template v-if="sort === 'user.seenAt'">{{ translate('last-seen') }}</template>
-              <template v-if="sort === 'user.watchedTime'">{{ translate('watched-time') }}</template>
-              <template v-if="sort === 'user.followedAt'">{{ translate('followed-since') }}</template>
-              <template v-if="sort === 'user.subscribedAt'">{{ translate('subscribed-since') }}</template>
-              <template v-if="sort === 'user.points'">{{ translate('points') }}</template>
-              <template v-if="sort === 'user.messages'">{{ translate('messages') }}</template>
-              <template v-if="sort === 'sumTips'">{{ translate('tips') }}</template>
-              <template v-if="sort === 'sumBits'">{{ translate('bits') }}</template>
-              <template v-if="sort === 'user.giftedSubscribes'">{{ translate('subgifts') }}</template>
-              <template v-if="sort === 'user.subscribeCumulativeMonths'">{{ translate('subCumulativeMonths') }}</template>
-              <template v-if="sort === 'user.subscribeStreak'">{{ translate('subStreak') }}</template>
-              <fa icon="sort-down" fixed-width></fa>
-            </span>
-          </template>
-          <b-dropdown-item @click="sort = 'user.username'; sortDesc = false">{{ translate('username') }}</b-dropdown-item>
-          <b-dropdown-item @click="sort = 'user.seenAt'; sortDesc = true">{{ translate('last-seen') }}</b-dropdown-item>
-          <b-dropdown-item @click="sort = 'user.watchedTime'; sortDesc = true">{{ translate('watched-time') }}</b-dropdown-item>
-          <b-dropdown-item @click="sort = 'user.followedAt'; sortDesc = true">{{ translate('followed-since') }}</b-dropdown-item>
-          <b-dropdown-item @click="sort = 'user.subscribedAt'; sortDesc = true">{{ translate('subscribed-since') }}</b-dropdown-item>
-          <b-dropdown-item @click="sort = 'user.points'; sortDesc = true">{{ translate('points') }}</b-dropdown-item>
-          <b-dropdown-item @click="sort = 'user.messages'; sortDesc = true">{{ translate('messages') }}</b-dropdown-item>
-          <b-dropdown-item @click="sort = 'sumTips'; sortDesc = true">{{ translate('tips') }}</b-dropdown-item>
-          <b-dropdown-item @click="sort = 'sumBits'; sortDesc = true">{{ translate('bits') }}</b-dropdown-item>
-          <b-dropdown-item @click="sort = 'user.giftedSubscribes'; sortDesc = true">{{ translate('subgifts') }}</b-dropdown-item>
-          <b-dropdown-item @click="sort = 'user.subscribeCumulativeMonths'; sortDesc = true">{{ translate('subCumulativeMonths') }}</b-dropdown-item>
-          <b-dropdown-item @click="sort = 'user.subscribeStreak'; sortDesc = true">{{ translate('subStreak') }}</b-dropdown-item>
-        </b-dropdown>
-
-        <b-button variant="primary" @click="sortDesc = !sortDesc">
-          <fa :icon="'sort-alpha-' + (sortDesc ? 'up' : 'down')" fixed-width></fa>
-        </b-button>
-
-        <b-dropdown no-caret variant="primary">
-            <template v-slot:button-content>
-              <span class="dropdown-icon">
-                {{ capitalize(translate('commons.reset')) }}
-                <fa icon="sort-down" fixed-width></fa>
-              </span>
-            </template>
-            <b-dropdown-item @click="resetPoints">{{ translate('points') }}</b-dropdown-item>
-            <b-dropdown-item @click="resetWatchedTime">{{ translate('watched-time') }}</b-dropdown-item>
-            <b-dropdown-item @click="resetMessages">{{ translate('messages') }}</b-dropdown-item>
-            <b-dropdown-item @click="resetBits">{{ translate('bits') }}</b-dropdown-item>
-            <b-dropdown-item @click="resetTips">{{ translate('tips') }}</b-dropdown-item>
-          </b-dropdown>
-      </template>
-
-      <template v-slot:right>
-        <b-pagination
-          class="m-0"
-          v-model="currentPage"
-          :total-rows="rows"
-          :per-page="perPage"
-          aria-controls="my-table"
-        ></b-pagination>
-
-        <b-btn-group>
-          <button v-if="filter.vips === null" class="btn border-0 btn-outline-dark" @click="filter.vips = true">
-            <fa icon="question" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">vip</strong>
-          </button>
-          <button v-else-if="filter.vips" class="btn border-0 btn-outline-success" @click="filter.vips = false">
-            <fa icon="check" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">vip</strong>
-          </button>
-          <button v-else class="btn border-0 btn-outline-danger" @click="filter.vips = null">
-            <fa icon="exclamation" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">vip</strong>
-          </button>
-
-          <button v-if="filter.active === null" class="btn border-0 btn-outline-dark" @click="filter.active = true">
-            <fa icon="question" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">active</strong>
-          </button>
-          <button v-else-if="filter.active" class="btn border-0 btn-outline-success" @click="filter.active = false">
-            <fa icon="check" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">active</strong>
-          </button>
-          <button v-else class="btn border-0 btn-outline-danger" @click="filter.active = null">
-            <fa icon="exclamation" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">active</strong>
-          </button>
-
-          <button v-if="filter.subscribers === null" class="btn border-0 btn-outline-dark" @click="filter.subscribers = true">
-            <fa icon="question" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">subscribers</strong>
-          </button>
-          <button v-else-if="filter.subscribers" class="btn border-0 btn-outline-success" @click="filter.subscribers = false">
-            <fa icon="check" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">subscribers</strong>
-          </button>
-          <button v-else class="btn border-0 btn-outline-danger" @click="filter.subscribers = null">
-            <fa icon="exclamation" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">subscriber</strong>
-          </button>
-
-          <button v-if="filter.followers === null" class="btn border-0 btn-outline-dark" @click="filter.followers = true">
-            <fa icon="question" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">followers</strong>
-          </button>
-          <button v-else-if="filter.followers" class="btn border-0 btn-outline-success" @click="filter.followers = false">
-            <fa icon="check" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">followers</strong>
-          </button>
-          <button v-else class="btn border-0 btn-outline-danger" @click="filter.followers = null">
-            <fa icon="exclamation" fixed-width></fa> <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">follower</strong>
-          </button>
-        </b-btn-group>
-      </template>
-    </panel>
-
-    <loading v-if="state.loading !== $state.success" slow/>
-    <b-table
-      v-else
-      hover striped small
-      style="cursor: pointer;"
-      :fields="fields" :items="fItems"
-      @row-clicked="linkTo($event)"
-      :sort-by.sync="sort" :sort-desc.sync="sortDesc">
-      <template v-slot:cell(username)="data">
-        <div class="text-primary font-bigger">{{ data.item.username }}</div>
-        <b-badge :class="[ data.item.isOnline ? 'badge-success' : 'badge-danger' ]" style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
-          active
-        </b-badge>
-        <b-badge :class="[ data.item.isVIP ? 'badge-success' : 'badge-danger' ]" style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
-          vip
-        </b-badge>
-        <b-badge :class="[ data.item.isFollower ? 'badge-success' : 'badge-danger' ]" style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
-          <fa v-if="data.item.haveFollowerLock" :icon="['fas', 'fa-lock']"></fa>
-          follower
-        </b-badge>
-        <b-badge :class="[ data.item.isSubscriber ? 'badge-success' : 'badge-danger' ]" style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
-          <fa v-if="data.item.haveSubscriberLock" :icon="['fas', 'fa-lock']"></fa>
-          subscriber
-        </b-badge>
-      </template>
-      <template v-slot:cell(date)="data">
-        <div v-if="Number(data.item.seenAt) !== 0">
-          <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
-            {{ translate('last-seen') }}:
-          </strong>
-          {{ dayjs(Number(data.item.seenAt)).format('LLL') }}</div>
-        <div v-if="data.item.isFollower && Number(data.item.followedAt) !== 0">
-          <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
-            <fa v-if="data.item.haveFollowedAtLock" :icon="['fas', 'fa-lock']"></fa>
-            {{ translate('followed-since') }}:
-          </strong>
-          {{ dayjs(Number(data.item.followedAt)).format('LLL') }}</div>
-        <div v-if="data.item.isSubscriber && Number(data.item.subscribedAt) !== 0">
-          <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
-            <fa v-if="data.item.haveSubscribedAtLock" :icon="['fas', 'fa-lock']"></fa>
-            {{ translate('subscribed-since') }}:
-          </strong>
-          {{ dayjs(Number(data.item.subscribedAt)).format('LLL') }}
-        </div>
-      </template>
-      <template v-slot:cell(stats)="data">
-        <div>
-          <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
-            {{ translate('messages') }}:
-          </strong>
-          {{ Intl.NumberFormat($store.state.configuration.lang).format(data.item.messages) }}
-        </div>
-        <div>
-          <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
-            {{ translate('points') }}:
-          </strong>
-          {{ Intl.NumberFormat($store.state.configuration.lang).format(data.item.points) }}
-        </div>
-        <div>
-          <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
-            {{ translate('watched-time') }}:
-          </strong>
-          {{ Intl.NumberFormat($store.state.configuration.lang, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(data.item.watchedTime / 1000 / 60 / 60) }} h
-        </div>
-        <div>
-          <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
-            {{ translate('tips') }}:
-          </strong>
-          {{ Intl.NumberFormat($store.state.configuration.lang, { style: 'currency', currency: $store.state.configuration.currency }).format(data.item.sumTips) }}
-        </div>
-      </template>
-      <template v-slot:cell(stats2)="data">
-        <div>
-          <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
-            {{ translate('bits') }}:
-          </strong>
-          {{ Intl.NumberFormat($store.state.configuration.lang).format(data.item.sumBits) }}
-        </div>
-        <div v-if="data.item.isSubscriber">
-          <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
-            {{ translate('tier') }}:
-          </strong>
-          {{ data.item.subscribeTier }}
-        </div>
-        <div>
-          <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
-            {{ translate('subgifts') }}:
-          </strong>
-          {{ Intl.NumberFormat($store.state.configuration.lang).format(data.item.giftedSubscribes) }}
-        </div>
-        <div>
-          <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
-            {{ translate('subStreak') }}:
-          </strong>
-          {{ Intl.NumberFormat($store.state.configuration.lang).format(data.item.subscribeStreak) }}
-        </div>
-        <div>
-          <strong style="margin: 0px 0px 3px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">
-            {{ translate('subCumulativeMonths') }}:
-          </strong>
-          {{ Intl.NumberFormat($store.state.configuration.lang).format(data.item.subscribeCumulativeMonths) }}
-        </div>
-      </template>
-    </b-table>
-  </b-container>
-</template>
-
-<script lang="ts">
-import { Vue, Component, Watch } from 'vue-property-decorator';
-import { getSocket } from 'src/panel/helpers/socket';
-import { get } from 'lodash-es';
-import { capitalize } from 'src/panel/helpers/capitalize';
-import { dayjs } from 'src/bot/helpers/dayjs';
-import translate from 'src/panel/helpers/translate';
-
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faSortDown, faSortUp, faSortAlphaUp, faSortAlphaDown } from '@fortawesome/free-solid-svg-icons'
-import { UserInterface } from '../../../../bot/database/entity/user';
-
-library.add(faSortDown, faSortUp, faSortAlphaUp, faSortAlphaDown)
-
-@Component({
-  components: {
-    'loading': () => import('../../../components/loading.vue'),
-  }
-})
-export default class viewersList extends Vue {
-  capitalize = capitalize;
-  get = get;
-  dayjs = dayjs;
-  translate = translate;
-
-  socket = getSocket('/core/users');
-
-  items: Required<UserInterface>[] = []
-  count: number = 0;
-  search: string = '';
-
-  state: {
-    loading: number,
-  } = {
-    loading: this.$state.progress,
-  }
-
-  currentPage = 1;
-  perPage = 25;
-
-  sortDesc = false;
-  sort = 'user.username';
-
-  filter: any = {
-    followers: null,
-    subscribers: null,
-    vips: null,
-    active: null
-  }
-
-  fields = [
-    { key: 'username', label: '' },
-    { key: 'date', label: '' },
-    { key: 'stats', label: '' },
-    { key: 'stats2', label: '' },
-  ]
-
-  get rows() {
-    return this.count;
-  }
-
-  get fItems() {
-    return this.items;
-  }
-
-  @Watch('currentPage')
-  @Watch('sort')
-  @Watch('sortDesc')
-  @Watch('filter', { deep: true })
-  @Watch('search')
-  refresh() {
-    this.state.loading = this.$state.progress;
-    this.socket.emit('find.viewers', { page: (this.currentPage - 1), order: {
-      orderBy: this.sort, sortOrder: this.sortDesc ? 'DESC' : 'ASC'
-    }, filter: this.filter, search: this.search.length > 0 ? this.search : undefined }, (err: string | null, items: Required<UserInterface>[], count: number) => {
-      if (err) {
-        return console.error(err);
-      }
-      this.items = items;
-      this.count = count;
-      this.state.loading = this.$state.success;
-      console.timeEnd('find.viewers');
-    })
-  }
-
-  created() {
-    console.time('find.viewers');
-    this.state.loading = this.$state.progress;
-    this.socket.emit('find.viewers', { page: 0 }, (err: string | null, items: Required<UserInterface>[], count: number) => {
-      if (err) {
-        return console.error(err);
-      }
-      this.items = items;
-      this.count = count;
-      this.state.loading = this.$state.success;
-      console.timeEnd('find.viewers');
-    })
-  }
-
-  resetPoints() {
-    this.socket.emit('viewers::resetPointsAll', () => {
-      this.refresh();
-    })
-  }
-
-  resetWatchedTime() {
-    this.socket.emit('viewers::resetWatchedTimeAll', () => {
-      this.refresh();
-    })
-  }
-
-  resetMessages() {
-    this.socket.emit('viewers::resetMessagesAll', () => {
-      this.refresh();
-    })
-  }
-
-  resetBits() {
-    this.socket.emit('viewers::resetBitsAll', () => {
-      this.refresh();
-    })
-  }
-
-  resetTips() {
-    this.socket.emit('viewers::resetTipsAll', () => {
-      this.refresh();
-    })
-  }
-
-  linkTo(item: Required<UserInterface>) {
-    console.debug('Clicked', item.userId);
-    this.$router.push({ name: 'viewersManagerEdit', params: { id: String(item.userId) } });
-  }
-}
-</script>