Huge amounts of progress.

Stopping here for tonight.

src/components/ArcadeCard.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { mdiTestTube, mdiStoreOutline, mdiHomeOutline } from "@mdi/js";
+import BaseLevel from "@/components/BaseLevel.vue";
+import CardBox from "@/components/CardBox.vue";
+import PillTag from "@/components/PillTag.vue";
+
+function getCardStyle(game) {
+  if (game !== null) {
+    return `
+      background-image: url('${game}');
+      background-size: cover;
+      background-repeat: no-repeat;
+    `;
+  }
+}
+
+const arcadeData = {
+  id: 0,
+  name: "Test Arcade",
+  beta: true,
+  public: true,
+  cover:
+    "https://nianticlabs.com/img/posts/smb-spotlight-boss-battle-games.jpg",
+};
+</script>
+
+<template>
+  <CardBox :style="getCardStyle(arcadeData.cover)">
+    <BaseLevel
+      type="justify-center"
+      class="bg-white dark:bg-slate-900/90 rounded-2xl p-3"
+    >
+      <div class="space-y-3 text-center">
+        <h1 class="text-2xl lg:text-3xl">{{ arcadeData.name }}</h1>
+        <div class="flex flex-wrap gap-4 place-content-center">
+          <PillTag
+            v-if="arcadeData.beta"
+            label="Beta Enabled"
+            color="warning"
+            :icon="mdiTestTube"
+          />
+          <PillTag
+            v-if="arcadeData.public"
+            label="Public Arcade"
+            color="success"
+            :icon="mdiStoreOutline"
+          />
+          <PillTag
+            v-if="!arcadeData.public"
+            label="Private Arcade"
+            color="info"
+            :icon="mdiHomeOutline"
+          />
+        </div>
+      </div>
+    </BaseLevel>
+  </CardBox>
+</template>

src/components/CardBoxComponentEmpty.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-center py-24 text-gray-500 dark:text-slate-400">
+  <div class="text-center py-14 text-gray-500 dark:text-slate-400">
     <p>Nothing's here…</p>
   </div>
 </template>

src/components/Cards/CardBoxNews.vue

@@ -0,0 +1,39 @@
+<script setup>
+import CardBox from "@/components/CardBox.vue";
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  content: {
+    type: String,
+    required: true,
+  },
+  cover: {
+    type: String,
+    default: null,
+  },
+  date: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <CardBox class="mb-2" is-hoverable has-table>
+    <img :src="props.cover" class="w-auto rounded-t-xl" />
+    <div class="p-3">
+      <h2 class="text-xl pb-2">{{ props.title }}</h2>
+
+      <hr class="pb-2" />
+      <p class="pb-2">{{ props.content }}</p>
+
+      <footer>
+        <hr class="pb-2" />
+        <p>{{ props.date }}</p>
+      </footer>
+    </div>
+  </CardBox>
+</template>

src/components/FooterBar.vue

@@ -24,7 +24,7 @@ import BaseButton from "@/components/BaseButton.vue";
           href="https://paypal.me/trmazi"
           label="Donate"
           :icon="mdiCash"
-          icon-size="xl"
+          icon-size="24"
         />
       </div>
     </BaseLevel>

src/components/Menus/AsideMenu.vue

@@ -1,5 +1,5 @@
 <script setup>
-import AsideMenuLayer from "@/components/AsideMenuLayer.vue";
+import AsideMenuLayer from "@/components/Menus/AsideMenuLayer.vue";
 import OverlayLayer from "@/components/OverlayLayer.vue";
 
 defineProps({

src/components/Menus/AsideMenuItem.vue

@@ -5,7 +5,7 @@ import { useStyleStore } from "@/stores/style.js";
 import { mdiMinus, mdiPlus } from "@mdi/js";
 import { getButtonColor } from "@/colors.js";
 import BaseIcon from "@/components/BaseIcon.vue";
-import AsideMenuList from "@/components/AsideMenuList.vue";
+import AsideMenuList from "@/components/Menus/AsideMenuList.vue";
 
 const props = defineProps({
   item: {

src/components/Menus/AsideMenuLayer.vue

@@ -2,8 +2,8 @@
 import { mdiLogout, mdiClose } from "@mdi/js";
 import { computed } from "vue";
 import { useStyleStore } from "@/stores/style.js";
-import AsideMenuList from "@/components/AsideMenuList.vue";
-import AsideMenuItem from "@/components/AsideMenuItem.vue";
+import AsideMenuList from "@/components/Menus/AsideMenuList.vue";
+import AsideMenuItem from "@/components/Menus/AsideMenuItem.vue";
 import BaseIcon from "@/components/BaseIcon.vue";
 
 defineProps({

src/components/Menus/AsideMenuList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import AsideMenuItem from "@/components/AsideMenuItem.vue";
+import AsideMenuItem from "@/components/Menus/AsideMenuItem.vue";
 
 defineProps({
   isDropdownList: Boolean,

src/components/NotificationBar.vue

@@ -11,7 +11,10 @@ const props = defineProps({
     type: String,
     default: null,
   },
-  outline: Boolean,
+  outline: {
+    type: Boolean,
+    default: true,
+  },
   color: {
     type: String,
     required: true,
@@ -37,7 +40,7 @@ const hasRightSlot = computed(() => slots.right);
   <div
     v-if="!isDismissed"
     :class="componentClass"
-    class="px-3 py-6 md:py-3 mb-6 last:mb-0 border rounded-lg transition-colors duration-150"
+    class="px-3 py-3 md:py-3 last:mb-0 border rounded-lg transition-colors duration-150"
   >
     <BaseLevel>
       <div class="flex flex-col md:flex-row items-center">

src/components/Tables/TableMachine.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { computed, ref } from "vue";
+import BaseLevel from "@/components/BaseLevel.vue";
+import BaseButtons from "@/components/BaseButtons.vue";
+import BaseButton from "@/components/BaseButton.vue";
+
+const props = defineProps({
+  machines: {
+    type: Object,
+    required: true,
+  },
+});
+
+const perPage = ref(5);
+
+const currentPage = ref(0);
+
+const itemsPaginated = computed(() =>
+  props.machines.slice(
+    perPage.value * currentPage.value,
+    perPage.value * (currentPage.value + 1)
+  )
+);
+const numPages = computed(() =>
+  Math.ceil(props.machines.length / perPage.value)
+);
+
+const currentPageHuman = computed(() => currentPage.value + 1);
+const pagesList = computed(() => {
+  const pagesList = [];
+
+  for (let i = 0; i < numPages.value; i++) {
+    pagesList.push(i);
+  }
+
+  return pagesList;
+});
+</script>
+
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>PCBID</th>
+        <th>Cabinet?</th>
+        <th>Updates?</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="machine of itemsPaginated" :key="machine.id">
+        <td data-label="Name">{{ machine.name }}</td>
+        <td data-label="PCBID">{{ machine.pcbid }}</td>
+        <td data-label="Cabinet?">{{ machine.cabinet ? "Yes" : "No" }}</td>
+        <td data-label="Updates?">{{ machine.ota ? "Yes" : "No" }}</td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800">
+    <BaseLevel>
+      <BaseButtons>
+        <BaseButton
+          v-for="page in pagesList"
+          :key="page"
+          :active="page === currentPage"
+          :label="page + 1"
+          :color="page === currentPage ? 'lightDark' : 'whiteDark'"
+          small
+          @click="currentPage = page"
+        />
+      </BaseButtons>
+      <small>Page {{ currentPageHuman }} of {{ numPages }}</small>
+    </BaseLevel>
+  </div>
+</template>

src/components/Tables/TableRivalsFull.vue

@@ -63,10 +63,7 @@ function getCardStyle(game) {
           class="border-b-0 lg:w-6 before:hidden"
           :style="getCardStyle('ddr')"
         >
-          <UserAvatar
-            :username="Trmazi"
-            class="w-24 h-24 mx-auto lg:w-6 lg:h-6"
-          />
+          <UserAvatar username="" class="w-24 h-24 mx-auto lg:w-6 lg:h-6" />
         </td>
         <td data-label="User">Trmazi</td>
         <td data-label="Profile">TRMAZI</td>

src/layouts/LayoutAuthenticated.vue

@@ -9,7 +9,7 @@ import { useStyleStore } from "@/stores/style.js";
 import BaseIcon from "@/components/BaseIcon.vue";
 import NavBar from "@/components/NavBar.vue";
 import NavBarItemPlain from "@/components/NavBarItemPlain.vue";
-import AsideMenu from "@/components/AsideMenu.vue";
+import AsideMenu from "@/components/Menus/AsideMenu.vue";
 import FooterBar from "@/components/FooterBar.vue";
 
 useMainStore().setUser({

src/menuAside.js

@@ -1,9 +1,7 @@
 import {
   mdiMonitor,
-  mdiSquareEditOutline,
-  mdiTable,
-  mdiViewList,
-  mdiTelevisionGuide,
+  mdiGamepadCircleOutline,
+  mdiNewspaperVariant,
 } from "@mdi/js";
 
 export default [
@@ -13,34 +11,17 @@ export default [
     label: "Dashboard",
   },
   {
-    to: "/tables",
-    label: "Tables",
-    icon: mdiTable,
+    to: "/news",
+    icon: mdiNewspaperVariant,
+    label: "News",
   },
   {
-    to: "/forms",
-    label: "Forms",
-    icon: mdiSquareEditOutline,
-  },
-  {
-    to: "/ui",
-    label: "UI",
-    icon: mdiTelevisionGuide,
-  },
-  {
-    label: "Dropdown",
-    icon: mdiViewList,
+    label: "Arcades",
+    icon: mdiGamepadCircleOutline,
     menu: [
       {
-        label: "Item One",
-        menu: [
-          {
-            label: "balls",
-          },
-        ],
-      },
-      {
-        label: "Item Two",
+        label: "Test Arcade",
+        to: "/arcade/0",
       },
     ],
   },

src/router/index.js

@@ -12,43 +12,11 @@ const routes = [
   },
   {
     meta: {
-      title: "Tables",
+      title: "News",
     },
-    path: "/tables",
-    name: "tables",
-    component: () => import("@/views/TablesView.vue"),
-  },
-  {
-    meta: {
-      title: "Forms",
-    },
-    path: "/forms",
-    name: "forms",
-    component: () => import("@/views/FormsView.vue"),
-  },
-  {
-    meta: {
-      title: "Profile",
-    },
-    path: "/profile",
-    name: "profile",
-    component: () => import("@/views/ProfileView.vue"),
-  },
-  {
-    meta: {
-      title: "Ui",
-    },
-    path: "/ui",
-    name: "ui",
-    component: () => import("@/views/UiView.vue"),
-  },
-  {
-    meta: {
-      title: "Responsive layout",
-    },
-    path: "/responsive",
-    name: "responsive",
-    component: () => import("@/views/ResponsiveView.vue"),
+    path: "/news",
+    name: "news",
+    component: () => import("@/views/NewsView.vue"),
   },
   {
     meta: {
@@ -60,11 +28,19 @@ const routes = [
   },
   {
     meta: {
-      title: "Error",
+      title: "Profile",
     },
-    path: "/error",
-    name: "error",
-    component: () => import("@/views/ErrorView.vue"),
+    path: "/profile",
+    name: "profile",
+    component: () => import("@/views/ProfileView.vue"),
+  },
+  {
+    meta: {
+      title: "Test Arcade",
+    },
+    path: "/arcade/0",
+    name: "arcade",
+    component: () => import("@/views/ArcadeView.vue"),
   },
 ];
 

src/views/ArcadeView.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { mdiStoreOutline, mdiGamepad } from "@mdi/js";
+import SectionMain from "@/components/SectionMain.vue";
+import TableMachines from "@/components/Tables/TableMachine.vue";
+import CardBox from "@/components/CardBox.vue";
+import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
+import SectionTitleLine from "@/components/SectionTitleLine.vue";
+import ArcadeCard from "@/components/ArcadeCard.vue";
+import CardBoxComponentEmpty from "@/components/CardBoxComponentEmpty.vue";
+
+const machineList = [
+  {
+    id: 0,
+    pcbid: "1A2B3C4D0000",
+    name: "Test PCBID",
+    ota: false,
+    cabinet: false,
+  },
+  {
+    id: 1,
+    pcbid: "1E2R3G3F4JJ0",
+    name: "Other PCBID",
+    ota: true,
+    cabinet: true,
+  },
+];
+</script>
+
+<template>
+  <LayoutAuthenticated>
+    <SectionMain>
+      <SectionTitleLine :icon="mdiStoreOutline" title="Manage Arcade" main />
+      <ArcadeCard class="mb-6" />
+
+      <SectionTitleLine :icon="mdiGamepad" title="Machines" />
+      <CardBox class="mb-6" has-table>
+        <TableMachines v-if="machineList.length" :machines="machineList" />
+        <CardBoxComponentEmpty v-if="!machineList.length" />
+      </CardBox>
+
+      <SectionTitleLine :icon="mdiGamepad" title="Game Settings" />
+    </SectionMain>
+  </LayoutAuthenticated>
+</template>

src/views/HomeView.vue

@@ -6,6 +6,7 @@ import {
   mdiReload,
   mdiChartBellCurveCumulative,
   mdiGamepad,
+  mdiTestTube,
 } from "@mdi/js";
 import UserCard from "@/components/UserCard.vue";
 import * as chartConfig from "@/components/Charts/chart.config.js";
@@ -18,7 +19,8 @@ import CardBoxGameStat from "@/components/CardBoxGameStat.vue";
 import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
 import SectionTitleLine from "@/components/SectionTitleLine.vue";
 import PillTag from "@/components/PillTag.vue";
-import TableRivalsFull from "@/components/TableRivalsFull.vue";
+import TableRivalsFull from "@/components/Tables/TableRivalsFull.vue";
+import NotificationBar from "@/components/NotificationBar.vue";
 import { GameConstants } from "@/constants";
 
 const chartData = ref(null);
@@ -38,6 +40,15 @@ onMounted(() => {
       <h2 class="pb-4 text-4xl lg:text-5xl">Welcome to <samp>PhaseII</samp></h2>
       <UserCard class="mb-6" />
 
+      <div class="my-4">
+        <NotificationBar color="info">
+          You have unread news!
+          <template #right>
+            <a href="#/news" class="text-blue-300 hover:underline">View now</a>
+          </template>
+        </NotificationBar>
+      </div>
+
       <SectionTitleLine
         :icon="mdiChartTimelineVariant"
         title="Quick Stats"

src/views/NewsView.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { mdiNewspaperVariant } from "@mdi/js";
+import SectionMain from "@/components/SectionMain.vue";
+import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
+import SectionTitleLine from "@/components/SectionTitleLine.vue";
+import CardBoxComponentEmpty from "@/components/CardBoxComponentEmpty.vue";
+import CardBoxNews from "@/components/Cards/CardBoxNews.vue";
+
+const testNews = [
+  {
+    id: 0,
+    title: "GITADORA HIGH-VOLTAGE Now Supported!",
+    content:
+      "I finally bit the bullet, sat down for 14 hours straight, and completely rewrote my Gitadora backend. Gitadora High-Voltage is now FULLY supported! For the time being this has broken all Gitadora ORIGINAL profiles, but these will be migrated over soon! Expect Nex+age and older to come soon. Enjoy!",
+    cover: "https://i.imgur.com/WPRlNo6.png",
+    timestamp: "2022.11.20 5:48:10 PM",
+  },
+  {
+    id: 1,
+    title: "FutureTomTom Now Supported!",
+    content:
+      "This weird drumming game now has support on PhaseII! Ver.1 and Ver.2 are both fully working, though there aren't any events set up currently.",
+    cover: "https://i.imgur.com/UWtUAd5.png",
+    timestamp: "2022.11.20 5:48:10 PM",
+  },
+];
+</script>
+
+<template>
+  <LayoutAuthenticated>
+    <SectionMain>
+      <SectionTitleLine :icon="mdiNewspaperVariant" title="Network News" main />
+
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <CardBoxNews
+          v-for="news of testNews"
+          :key="news.id"
+          :title="news.title"
+          :content="news.content"
+          :date="news.timestamp"
+          :cover="news.cover"
+        />
+      </div>
+      <CardBoxComponentEmpty v-if="!testNews || !testNews.length" />
+    </SectionMain>
+  </LayoutAuthenticated>
+</template>

src/views/ResponsiveView.vue

@@ -1,59 +0,0 @@
-<script setup>
-import SectionTitle from "@/components/SectionTitle.vue";
-import SectionMain from "@/components/SectionMain.vue";
-import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
-</script>
-
-<template>
-  <LayoutAuthenticated>
-    <SectionTitle first>Mobile & Tablet</SectionTitle>
-
-    <SectionMain>
-      <div
-        class="md:w-10/12 shadow-2xl md:mx-auto rounded-3xl border-8 border-white overflow-hidden"
-      >
-        <img
-          src="https://static.justboil.me/templates/one/one-tailwind-vue-mobile.png"
-          class="block"
-        />
-      </div>
-    </SectionMain>
-
-    <SectionTitle>Small laptop 1024px</SectionTitle>
-
-    <SectionMain>
-      <div
-        class="md:w-10/12 shadow-2xl md:mx-auto rounded-3xl border-8 border-white overflow-hidden"
-      >
-        <img
-          src="https://static.justboil.me/templates/one/one-tailwind-vue-1024.png"
-          class="block"
-        />
-      </div>
-    </SectionMain>
-
-    <SectionMain>
-      <div
-        class="md:w-10/12 shadow-2xl md:mx-auto rounded-3xl border-8 border-white overflow-hidden"
-      >
-        <img
-          src="https://static.justboil.me/templates/one/one-tailwind-vue-1024-menu-open.png"
-          class="block"
-        />
-      </div>
-    </SectionMain>
-
-    <SectionTitle>Laptop & desktop</SectionTitle>
-
-    <SectionMain>
-      <div
-        class="md:w-10/12 shadow-2xl md:mx-auto rounded-3xl border-8 border-white overflow-hidden"
-      >
-        <img
-          src="https://static.justboil.me/templates/one/one-tailwind-vue-widescreen.png"
-          class="block"
-        />
-      </div>
-    </SectionMain>
-  </LayoutAuthenticated>
-</template>

src/views/StyleView.vue

@@ -1,68 +0,0 @@
-<script setup>
-import { useRouter } from "vue-router";
-import { useStyleStore } from "@/stores/style.js";
-import { gradientBgPurplePink } from "@/colors.js";
-import SectionMain from "@/components/SectionMain.vue";
-import CardBox from "@/components/CardBox.vue";
-import LayoutGuest from "@/layouts/LayoutGuest.vue";
-
-const styles = ["white", "basic"];
-
-const styleStore = useStyleStore();
-
-styleStore.setDarkMode(false);
-
-const router = useRouter();
-
-const click = (slug) => {
-  styleStore.setStyle(slug);
-  router.push("/dashboard");
-};
-</script>
-
-<template>
-  <LayoutGuest>
-    <div
-      :class="gradientBgPurplePink"
-      class="flex min-h-screen items-center justify-center"
-    >
-      <SectionMain>
-        <h1
-          class="text-4xl md:text-5xl text-center text-white font-bold mt-12 mb-3 lg:mt-0"
-        >
-          Pick a style&hellip;
-        </h1>
-        <h2 class="text-xl md:text-xl text-center text-white mb-12">
-          Style switching with a single
-          <code class="px-1.5 py-0.5 rounded bg-white bg-opacity-20"
-            >action()</code
-          >
-        </h2>
-        <div
-          class="grid gap-6 grid-cols-1 lg:grid-cols-2 px-6 max-w-6xl mx-auto"
-        >
-          <CardBox
-            v-for="style in styles"
-            :key="style"
-            class="cursor-pointer bg-gray-50"
-            is-hoverable
-            @click="click(style)"
-          >
-            <div class="mb-3 md:mb-6">
-              <img
-                :src="`https://static.justboil.me/templates/one/small/${style}-v3.png`"
-                width="1280"
-                height="720"
-              />
-            </div>
-
-            <h1 class="text-xl md:text-2xl font-black capitalize">
-              {{ style }}
-            </h1>
-            <h2 class="text-lg md:text-xl">& Dark mode</h2>
-          </CardBox>
-        </div>
-      </SectionMain>
-    </div>
-  </LayoutGuest>
-</template>

src/views/TablesView.vue

@@ -1,51 +0,0 @@
-<script setup>
-import {
-  mdiMonitorCellphone,
-  mdiTableBorder,
-  mdiTableOff,
-  mdiGithub,
-} from "@mdi/js";
-import SectionMain from "@/components/SectionMain.vue";
-import NotificationBar from "@/components/NotificationBar.vue";
-import TableSampleClients from "@/components/TableSampleClients.vue";
-import CardBox from "@/components/CardBox.vue";
-import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
-import SectionTitleLineWithButton from "@/components/SectionTitleLineWithButton.vue";
-import BaseButton from "@/components/BaseButton.vue";
-import CardBoxComponentEmpty from "@/components/CardBoxComponentEmpty.vue";
-</script>
-
-<template>
-  <LayoutAuthenticated>
-    <SectionMain>
-      <SectionTitleLineWithButton :icon="mdiTableBorder" title="Tables" main>
-        <BaseButton
-          href="https://github.com/justboil/admin-one-vue-tailwind"
-          target="_blank"
-          :icon="mdiGithub"
-          label="Star on GitHub"
-          color="contrast"
-          rounded-full
-          small
-        />
-      </SectionTitleLineWithButton>
-      <NotificationBar color="info" :icon="mdiMonitorCellphone">
-        <b>Responsive table.</b> Collapses on mobile
-      </NotificationBar>
-
-      <CardBox class="mb-6" has-table>
-        <TableSampleClients checkable />
-      </CardBox>
-
-      <SectionTitleLineWithButton :icon="mdiTableOff" title="Empty variation" />
-
-      <NotificationBar color="danger" :icon="mdiTableOff">
-        <b>Empty table.</b> When there's nothing to show
-      </NotificationBar>
-
-      <CardBox>
-        <CardBoxComponentEmpty />
-      </CardBox>
-    </SectionMain>
-  </LayoutAuthenticated>
-</template>

src/views/UiView.vue

@@ -1,552 +0,0 @@
-<script setup>
-import { ref, computed } from "vue";
-import { useStyleStore } from "@/stores/style.js";
-import {
-  mdiContrastCircle,
-  mdiInformation,
-  mdiCheckCircle,
-  mdiAlert,
-  mdiAlertCircle,
-  mdiOpenInNew,
-  mdiClose,
-  mdiReload,
-  mdiTrendingUp,
-} from "@mdi/js";
-import SectionMain from "@/components/SectionMain.vue";
-import CardBox from "@/components/CardBox.vue";
-import BaseButtons from "@/components/BaseButtons.vue";
-import BaseButton from "@/components/BaseButton.vue";
-import NotificationBar from "@/components/NotificationBar.vue";
-import BaseDivider from "@/components/BaseDivider.vue";
-import CardBoxModal from "@/components/CardBoxModal.vue";
-import SectionTitle from "@/components/SectionTitle.vue";
-import FormField from "@/components/FormField.vue";
-import FormCheckRadioGroup from "@/components/FormCheckRadioGroup.vue";
-import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
-import SectionTitleLineWithButton from "@/components/SectionTitleLineWithButton.vue";
-import CardBoxComponentEmpty from "@/components/CardBoxComponentEmpty.vue";
-import CardBoxComponentTitle from "@/components/CardBoxComponentTitle.vue";
-import PillTag from "@/components/PillTag.vue";
-
-const modalOneActive = ref(false);
-
-const modalTwoActive = ref(false);
-
-const modalThreeActive = ref(false);
-
-const notificationSettingsModel = ref([]);
-
-const notificationsOutline = computed(
-  () => notificationSettingsModel.value.indexOf("outline") > -1
-);
-
-const buttonSettingsModel = ref([]);
-
-const buttonsOutline = computed(
-  () => buttonSettingsModel.value.indexOf("outline") > -1
-);
-
-const buttonsSmall = computed(
-  () => buttonSettingsModel.value.indexOf("small") > -1
-);
-
-const buttonsDisabled = computed(
-  () => buttonSettingsModel.value.indexOf("disabled") > -1
-);
-
-const buttonsRounded = computed(
-  () => buttonSettingsModel.value.indexOf("rounded") > -1
-);
-
-const pillsSettingsModel = ref(["icon"]);
-
-const pillsOutline = computed(
-  () => pillsSettingsModel.value.indexOf("outline") > -1
-);
-
-const pillsSmall = computed(
-  () => pillsSettingsModel.value.indexOf("small") > -1
-);
-
-const pillsIcon = computed(() =>
-  pillsSettingsModel.value.indexOf("icon") > -1 ? mdiTrendingUp : null
-);
-
-const styleStore = useStyleStore();
-</script>
-
-<template>
-  <LayoutAuthenticated>
-    <CardBoxModal
-      v-model="modalOneActive"
-      title="Please confirm action"
-      button-label="Confirm"
-      has-cancel
-    >
-      <p>This is sample modal</p>
-      <p>Lorem ipsum dolor</p>
-    </CardBoxModal>
-
-    <CardBoxModal
-      v-model="modalTwoActive"
-      title="Unhandled exception"
-      button="danger"
-    >
-      <p>This is sample modal</p>
-      <p>Lorem ipsum dolor</p>
-    </CardBoxModal>
-
-    <CardBoxModal v-model="modalThreeActive" title="Success" button="success">
-      <p>This is sample modal</p>
-      <p>Lorem ipsum dolor</p>
-    </CardBoxModal>
-
-    <SectionTitle first>Dark mode</SectionTitle>
-
-    <SectionMain>
-      <CardBox class="md:w-7/12 lg:w-5/12 xl:w-4/12 shadow-2xl md:mx-auto">
-        <div
-          class="text-center py-24 lg:py-12 text-gray-500 dark:text-slate-400"
-        >
-          <BaseButton
-            label="Toggle"
-            color="contrast"
-            @click="styleStore.setDarkMode()"
-          />
-        </div>
-      </CardBox>
-    </SectionMain>
-
-    <SectionTitle>Modal examples</SectionTitle>
-
-    <SectionMain>
-      <div class="space-y-12">
-        <CardBox
-          class="cursor-pointer md:w-7/12 lg:w-5/12 shadow-2xl md:mx-auto"
-          is-hoverable
-          @click="modalOneActive = true"
-        >
-          <CardBoxComponentTitle title="Please confirm action">
-            <BaseButton :icon="mdiClose" color="whiteDark" small rounded-full />
-          </CardBoxComponentTitle>
-          <div class="space-y-3">
-            <p>Click to see in action</p>
-          </div>
-
-          <template #footer>
-            <BaseButtons>
-              <BaseButton label="Confirm" color="info" />
-              <BaseButton label="Cancel" color="info" outline />
-            </BaseButtons>
-          </template>
-        </CardBox>
-
-        <CardBox
-          class="cursor-pointer md:w-7/12 lg:w-5/12 shadow-2xl md:mx-auto"
-          is-hoverable
-          @click="modalTwoActive = true"
-        >
-          <CardBoxComponentTitle title="Unhandled exception" />
-
-          <div class="space-y-3">
-            <p>Click to see in action</p>
-          </div>
-
-          <template #footer>
-            <BaseButtons>
-              <BaseButton label="Done" color="danger" />
-            </BaseButtons>
-          </template>
-        </CardBox>
-
-        <CardBox
-          class="cursor-pointer md:w-7/12 lg:w-5/12 shadow-2xl md:mx-auto"
-          is-hoverable
-          @click="modalThreeActive = true"
-        >
-          <CardBoxComponentTitle title="Success" />
-
-          <div class="space-y-3">
-            <p>Click to see in action</p>
-          </div>
-
-          <template #footer>
-            <BaseButton label="Done" color="success" />
-          </template>
-        </CardBox>
-      </div>
-    </SectionMain>
-
-    <SectionTitle custom>
-      <h1 class="text-2xl text-gray-500 dark:text-slate-400">Notifications</h1>
-      <div class="flex items-center justify-center mt-6">
-        <FormCheckRadioGroup
-          v-model="notificationSettingsModel"
-          type="switch"
-          name="notifications-switch"
-          :options="{ outline: 'Outline' }"
-        />
-      </div>
-    </SectionTitle>
-
-    <SectionMain>
-      <NotificationBar
-        color="info"
-        :icon="mdiInformation"
-        :outline="notificationsOutline"
-      >
-        <b>Info state</b>. NotificationBar
-        <template #right>
-          <BaseButton
-            label="Button"
-            :color="notificationsOutline ? 'info' : 'white'"
-            :outline="notificationsOutline"
-            rounded-full
-            small
-          />
-        </template>
-      </NotificationBar>
-
-      <NotificationBar
-        color="success"
-        :icon="mdiCheckCircle"
-        :outline="notificationsOutline"
-      >
-        <b>Success state</b>. NotificationBar
-        <template #right>
-          <BaseButton
-            label="Button"
-            :color="notificationsOutline ? 'success' : 'white'"
-            :outline="notificationsOutline"
-            rounded-full
-            small
-          />
-        </template>
-      </NotificationBar>
-
-      <NotificationBar
-        color="warning"
-        :icon="mdiAlert"
-        :outline="notificationsOutline"
-      >
-        <b>Warning state</b>. NotificationBar
-        <template #right>
-          <BaseButton
-            label="Button"
-            :color="notificationsOutline ? 'warning' : 'white'"
-            :outline="notificationsOutline"
-            rounded-full
-            small
-          />
-        </template>
-      </NotificationBar>
-
-      <NotificationBar
-        color="danger"
-        :icon="mdiAlertCircle"
-        :outline="notificationsOutline"
-      >
-        <b>Danger state</b>. NotificationBar
-        <template #right>
-          <BaseButton
-            label="Button"
-            :color="notificationsOutline ? 'danger' : 'white'"
-            :outline="notificationsOutline"
-            rounded-full
-            small
-          />
-        </template>
-      </NotificationBar>
-
-      <NotificationBar
-        color="contrast"
-        :icon="mdiContrastCircle"
-        :outline="notificationsOutline"
-      >
-        <b>Contrast</b>. NotificationBar
-      </NotificationBar>
-    </SectionMain>
-
-    <SectionTitle>Buttons</SectionTitle>
-
-    <SectionMain>
-      <CardBox>
-        <FormField label="Settings">
-          <FormCheckRadioGroup
-            v-model="buttonSettingsModel"
-            name="buttons-switch"
-            type="switch"
-            :options="{
-              outline: 'Outline',
-              small: 'Small',
-              rounded: 'Rounded',
-              disabled: 'Disabled',
-            }"
-          />
-        </FormField>
-
-        <BaseDivider />
-
-        <BaseButtons>
-          <BaseButton
-            color="lightDark"
-            label="Button"
-            :small="buttonsSmall"
-            :outline="buttonsOutline"
-            :disabled="buttonsDisabled"
-            :rounded-full="buttonsRounded"
-          />
-          <BaseButton
-            color="contrast"
-            label="Button"
-            :small="buttonsSmall"
-            :outline="buttonsOutline"
-            :disabled="buttonsDisabled"
-            :rounded-full="buttonsRounded"
-          />
-          <BaseButton
-            color="info"
-            label="Button"
-            :small="buttonsSmall"
-            :outline="buttonsOutline"
-            :disabled="buttonsDisabled"
-            :rounded-full="buttonsRounded"
-          />
-          <BaseButton
-            color="success"
-            label="Button"
-            :small="buttonsSmall"
-            :outline="buttonsOutline"
-            :disabled="buttonsDisabled"
-            :rounded-full="buttonsRounded"
-          />
-          <BaseButton
-            color="warning"
-            label="Button"
-            :small="buttonsSmall"
-            :outline="buttonsOutline"
-            :disabled="buttonsDisabled"
-            :rounded-full="buttonsRounded"
-          />
-          <BaseButton
-            color="danger"
-            label="Button"
-            :small="buttonsSmall"
-            :outline="buttonsOutline"
-            :disabled="buttonsDisabled"
-            :rounded-full="buttonsRounded"
-          />
-        </BaseButtons>
-
-        <BaseDivider />
-
-        <BaseButtons>
-          <BaseButton
-            color="lightDark"
-            label="Button"
-            :icon="mdiOpenInNew"
-            :small="buttonsSmall"
-            :outline="buttonsOutline"
-            :disabled="buttonsDisabled"
-            :rounded-full="buttonsRounded"
-          />
-          <BaseButton
-            color="contrast"
-            label="Button"
-            :icon="mdiOpenInNew"
-            :small="buttonsSmall"
-            :outline="buttonsOutline"
-            :disabled="buttonsDisabled"
-            :rounded-full="buttonsRounded"
-          />
-          <BaseButton
-            color="info"
-            label="Button"
-            :icon="mdiOpenInNew"
-            :small="buttonsSmall"
-            :outline="buttonsOutline"
-            :disabled="buttonsDisabled"
-            :rounded-full="buttonsRounded"
-          />
-          <BaseButton
-            color="success"
-            label="Button"
-            :icon="mdiOpenInNew"
-            :small="buttonsSmall"
-            :outline="buttonsOutline"
-            :disabled="buttonsDisabled"
-            :rounded-full="buttonsRounded"
-          />
-          <BaseButton
-            color="warning"
-            label="Button"
-            :icon="mdiOpenInNew"
-            :small="buttonsSmall"
-            :outline="buttonsOutline"
-            :disabled="buttonsDisabled"
-            :rounded-full="buttonsRounded"
-          />
-          <BaseButton
-            color="danger"
-            label="Button"
-            :icon="mdiOpenInNew"
-            :small="buttonsSmall"
-            :outline="buttonsOutline"
-            :disabled="buttonsDisabled"
-            :rounded-full="buttonsRounded"
-          />
-        </BaseButtons>
-
-        <BaseDivider />
-
-        <BaseButtons>
-          <BaseButton
-            color="lightDark"
-            :icon="mdiOpenInNew"
-            :small="buttonsSmall"
-            :outline="buttonsOutline"
-            :disabled="buttonsDisabled"
-            :rounded-full="buttonsRounded"
-          />
-          <BaseButton
-            color="contrast"
-            :icon="mdiOpenInNew"
-            :small="buttonsSmall"
-            :outline="buttonsOutline"
-            :disabled="buttonsDisabled"
-            :rounded-full="buttonsRounded"
-          />
-          <BaseButton
-            color="info"
-            :icon="mdiOpenInNew"
-            :small="buttonsSmall"
-            :outline="buttonsOutline"
-            :disabled="buttonsDisabled"
-            :rounded-full="buttonsRounded"
-          />
-          <BaseButton
-            color="success"
-            :icon="mdiOpenInNew"
-            :small="buttonsSmall"
-            :outline="buttonsOutline"
-            :disabled="buttonsDisabled"
-            :rounded-full="buttonsRounded"
-          />
-          <BaseButton
-            color="warning"
-            :icon="mdiOpenInNew"
-            :small="buttonsSmall"
-            :outline="buttonsOutline"
-            :disabled="buttonsDisabled"
-            :rounded-full="buttonsRounded"
-          />
-          <BaseButton
-            color="danger"
-            :icon="mdiOpenInNew"
-            :small="buttonsSmall"
-            :outline="buttonsOutline"
-            :disabled="buttonsDisabled"
-            :rounded-full="buttonsRounded"
-          />
-        </BaseButtons>
-      </CardBox>
-    </SectionMain>
-
-    <SectionTitle>Pills</SectionTitle>
-
-    <SectionMain>
-      <CardBox>
-        <FormField label="Settings">
-          <FormCheckRadioGroup
-            v-model="pillsSettingsModel"
-            name="buttons-switch"
-            type="switch"
-            :options="{ outline: 'Outline', small: 'Small', icon: 'Icon' }"
-          />
-        </FormField>
-
-        <BaseDivider />
-
-        <BaseButtons>
-          <PillTag
-            color="contrast"
-            label="Contrast"
-            :small="pillsSmall"
-            :outline="pillsOutline"
-            :icon="pillsIcon"
-          />
-          <PillTag
-            color="info"
-            label="Info"
-            :small="pillsSmall"
-            :outline="pillsOutline"
-            :icon="pillsIcon"
-          />
-          <PillTag
-            color="success"
-            label="Success"
-            :small="pillsSmall"
-            :outline="pillsOutline"
-            :icon="pillsIcon"
-          />
-          <PillTag
-            color="warning"
-            label="Warning"
-            :small="pillsSmall"
-            :outline="pillsOutline"
-            :icon="pillsIcon"
-          />
-          <PillTag
-            color="danger"
-            label="Danger"
-            :small="pillsSmall"
-            :outline="pillsOutline"
-            :icon="pillsIcon"
-          />
-        </BaseButtons>
-      </CardBox>
-    </SectionMain>
-
-    <SectionTitle>Cards</SectionTitle>
-
-    <SectionMain>
-      <div class="grid grid-cols-1 gap-6 mb-6 lg:grid-cols-2">
-        <CardBox>
-          <CardBoxComponentTitle title="With title & icon">
-            <BaseButton :icon="mdiReload" color="whiteDark" rounded-full />
-          </CardBoxComponentTitle>
-          <div class="space-y-3">
-            <p>Card with title, icon & footer</p>
-          </div>
-
-          <template #footer>
-            <BaseButtons>
-              <BaseButton label="Confirm" color="info" />
-              <BaseButton label="Cancel" color="info" outline />
-            </BaseButtons>
-          </template>
-        </CardBox>
-
-        <CardBox>
-          Just body & footer
-
-          <template #footer>
-            <BaseButtons>
-              <BaseButton label="Confirm" color="info" />
-              <BaseButton label="Cancel" color="info" outline />
-            </BaseButtons>
-          </template>
-        </CardBox>
-      </div>
-
-      <SectionTitleLineWithButton
-        :icon="mdiAlertCircle"
-        title="Empty variation"
-      />
-
-      <CardBox>
-        <CardBoxComponentEmpty />
-      </CardBox>
-    </SectionMain>
-  </LayoutAuthenticated>
-</template>