Bump version

Amend CSS
Correct auth callback

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "dex-ui-vue",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "dex-ui-vue",
   "private": true,
-  "version": "0.0.12",
+  "version": "0.0.14",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col size-dvh">
+  <div class="flex flex-col size-full">
     <!-- Navigator here -->
     <Menubar
         :model="items"
@@ -32,10 +32,13 @@
         </div>
       </template>
     </Menubar>
-    <main class="app-main pt-[60px]">
+    <main class="app-main w-full pt-[60px]">
       <Toast/>
       <RouterView/>
     </main>
+    <footer class="fixed bottom-0 right-0">
+      v{{ version }}
+    </footer>
   </div>
 </template>
 
@@ -44,6 +47,8 @@ import {ref} from "vue";
 import {useRouter} from "vue-router";
 import Toast from 'primevue/toast';
 import {useAuthStore} from "./stores/auth.ts";
+// noinspection ES6UnusedImports Used in template
+import { version } from '../package.json'
 
 const authStore = useAuthStore();
 const router = useRouter();

src/api/openapi/api.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/base.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/common.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/configuration.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/index.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/attribute.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/card-page-search-request.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/card-print.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/card-type.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/card-upstream-fetch-request.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/card.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/deck-create-request.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/deck.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/job-dto.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/job-status.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/job-type.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/link-arrow.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/monster-card-sub-type.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/monster-card-type.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/monster-card.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/monster-type.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/page-card-dto.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/page-card-print-dto.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/page-deck-dto.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/page-job-dto.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/page-set-dto.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/page.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/region-code-alias.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/region.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/regional-set.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/set-dto.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/spell-card-type.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/spell-card.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/trap-card-type.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/model/trap-card.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/service/card-print-service.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/service/card-service.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/service/deck-service.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/service/job-service.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/api/openapi/service/set-service.ts

@@ -4,7 +4,7 @@
  * dex API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: 0.0.5
+ * The version of the OpenAPI document: 0.0.6
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

src/auth/oidcConfig.ts

@@ -1,12 +1,16 @@
 import type {UserManagerSettings} from "oidc-client-ts";
 
-export const oidcConfig : UserManagerSettings = {
+const redirectUri = import.meta.env.PROD
+    ? "https://dex.smoothbrain.win"
+    : "http://localhost:5173";
+
+export const oidcConfig: UserManagerSettings = {
   authority: 'https://auth.smoothbrain.win/application/o/dex/',
   client_id: 'K202NAqkgfjceLZr28gAVQgJDc6RjZfdrE1jNx0K',
-  redirect_uri: 'https://dex.smoothbrain.win/callback',
+  redirect_uri: `${redirectUri}/callback`,
   response_type: 'code',
   scope: 'openid profile email',
-  post_logout_redirect_uri: 'httpS://dex.smoothbrain.win',
+  post_logout_redirect_uri: redirectUri,
   loadUserInfo: true,
   automaticSilentRenew: true,
   extraQueryParams: {

src/components.d.ts

@@ -11,19 +11,26 @@ declare module 'vue' {
     Avatar: typeof import('primevue/avatar')['default']
     Badge: typeof import('primevue/badge')['default']
     Button: typeof import('primevue/button')['default']
+    Card: typeof import('primevue/card')['default']
+    CardAttributes: typeof import('./components/CardAttributes.vue')['default']
     CardFilterPanel: typeof import('./components/CardFilterPanel.vue')['default']
     CardListComponent: typeof import('./components/CardListComponent.vue')['default']
     CardListExpansion: typeof import('./components/CardListExpansion.vue')['default']
+    CardSetImportModal: typeof import('./components/CardSetImportModal.vue')['default']
     CardTable: typeof import('./components/CardTable.vue')['default']
     Carousel: typeof import('primevue/carousel')['default']
     Column: typeof import('primevue/column')['default']
     CustomTag: typeof import('./components/CustomTag.vue')['default']
     DataTable: typeof import('primevue/datatable')['default']
+    DataView: typeof import('primevue/dataview')['default']
+    Dialog: typeof import('primevue/dialog')['default']
     Divider: typeof import('primevue/divider')['default']
     DynamicAsset: typeof import('./components/DynamicAsset.vue')['default']
     Fieldset: typeof import('primevue/fieldset')['default']
     FloatLabel: typeof import('primevue/floatlabel')['default']
     Image: typeof import('primevue/image')['default']
+    InputGroup: typeof import('primevue/inputgroup')['default']
+    InputGroupAddon: typeof import('primevue/inputgroupaddon')['default']
     InputNumber: typeof import('primevue/inputnumber')['default']
     InputText: typeof import('primevue/inputtext')['default']
     LinkArrowsComponent: typeof import('./components/LinkArrowsComponent.vue')['default']
@@ -39,5 +46,6 @@ declare module 'vue' {
     SplitButton: typeof import('primevue/splitbutton')['default']
     Tag: typeof import('primevue/tag')['default']
     Textarea: typeof import('primevue/textarea')['default']
+    TreeTable: typeof import('primevue/treetable')['default']
   }
 }

src/components/CardAttributes.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="flex flex-wrap gap-4 justify-center">
+    <Tag
+        :value="card.cardType"
+        :severity="getCardSeverity(card.cardType)"
+    />
+    <template v-if="isMonsterCard(card)">
+      <Tag
+          v-if="card.isPendulum"
+          value="PENDULUM"
+          :severity="getSeverityFromMonsterCardType(card.type)"
+      />
+      <Tag
+          :value="card.type"
+          :severity="getSeverityFromMonsterCardType(card.type)"
+      />
+      <Tag
+          v-for="subType in card.subTypes"
+          :value="subType"
+          severity="secondary"
+      />
+    </template>
+    <template v-if="isSpellCard(card)">
+      <Tag
+          :value="card.type"
+          :severity="getSeverityFromSpellCardType(card.type)"
+      />
+    </template>
+    <template v-if="isTrapCard(card)">
+      <Tag
+          :value="card.type"
+          :severity="getSeverityFromTrapCardType(card.type)"
+      />
+    </template>
+  </div>
+</template><
+
+<script setup lang="ts">
+import type {Ref} from "vue";
+import type {Card} from "@/api/openapi";
+import {
+  getCardSeverity,
+  getSeverityFromMonsterCardType, getSeverityFromSpellCardType, getSeverityFromTrapCardType,
+  isMonsterCard,
+  isSpellCard,
+  isTrapCard
+} from "@/util/card-type-util.ts";
+
+const card: Ref<Card> = defineModel({
+  required: true
+})
+</script>
+
+<style scoped>
+
+</style>>`

src/components/CardFilterPanel.vue

@@ -2,10 +2,8 @@
 
   <Panel>
     <ScrollPanel
-        class="w-full"
         style="height: 800px"
     >
-
       <FloatLabel variant="on" class="my-2">
         <InputText
             fluid

src/components/CardSetImportModal.vue

@@ -0,0 +1,77 @@
+<template>
+  <Dialog
+      modal
+      :draggable="false"
+      :dismissable-mask="true"
+      :visible="visible"
+      @update:visible="emit('update:visible', $event)"
+  >
+    <template #header>
+      <div class="inline-flex items-center justify-center gap-2">
+        <span class="font-bold whitespace-nowrap">Import Set</span>
+      </div>
+    </template>
+    <span class="text-surface-500 dark:text-surface-400 block mb-8">Import a Set by its name</span>
+    <div class="flex items-center gap-4 mb-4">
+      <label for="setName" class="font-semibold w-24">Set Name</label>
+      <InputText id="setName" class="flex-auto" autocomplete="off" v-model="cardSetName"/>
+    </div>
+    <template #footer>
+      <Button label="Cancel" text severity="secondary" @click="visible = false"/>
+      <Button label="Import" outlined severity="secondary" @click="importSet(cardSetName)"/>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import {inject, ref, type Ref, watch} from "vue";
+import {SetService} from "@/api/openapi";
+import {SetServiceKey} from "@/main.ts";
+import {useToast} from "primevue";
+
+const toast = useToast();
+const emit = defineEmits(['update:visible'])
+const visible: Ref<boolean> = defineModel("visible", {
+  required: true
+})
+
+const setService: SetService = inject(SetServiceKey) as SetService;
+const cardSetName: Ref<string | null> = ref(null);
+
+const importSet = async(name: string | null) => {
+  if (!name) {
+    toast.add({
+      severity: "warn",
+      summary: `Name of Set is required to import`,
+    })
+    return;
+  }
+
+  try {
+    await setService.scrapeSetByName({
+      name: name,
+    });
+
+    toast.add({
+      severity: "info",
+      summary: `Import Job for Set '${cardSetName.value}' was started successfully`,
+    })
+  } catch (ex: unknown) {
+    toast.add({
+      severity: "error",
+      summary: `Error occurred trying to import Set '${cardSetName.value}'`,
+    })
+  } finally {
+    cardSetName.value = null;
+    visible.value = false
+  }
+}
+
+watch(visible, () => {
+  cardSetName.value = null;
+})
+</script>
+
+<style scoped>
+
+</style>

src/main.ts

@@ -28,6 +28,7 @@ import JobsView from "./views/JobsView.vue";
 import {definePreset} from "@primeuix/themes";
 import {getConfig, initConfig} from "@/util/config.ts";
 import axios from "axios";
+import CreateDeckView from "@/views/deck/CreateDeckView.vue";
 
 // Initialize configuration from window object
 initConfig((window as any).__APP_CONFIG__ || {})
@@ -113,7 +114,8 @@ const routes: RouteRecordRaw[] = [
   {path: '/', component: HomeView},
   {path: '/cards', component: CardsView, meta: {requiresAuth: false}},
   {path: '/cards/:id', component: CardView, meta: {requiresAuth: true}},
-  {path: '/decks', component: DecksView, meta: {requiresAuth: true}},
+  {path: '/decks', component: DecksView, meta: {requiresAuth: false}},
+  {path: '/decks/create', component: CreateDeckView, meta: {requiresAuth: true}},
   {path: '/decks/:id', component: DeckView, meta: {requiresAuth: true}},
   {path: '/sets', component: SetsView},
   {path: '/sets/:id', component: DeckView, meta: {requiresAuth: true}},
@@ -134,6 +136,7 @@ router.beforeEach(async (to) => {
       return false;
     }
   }
+  return true;
 })
 
 app.use(router);
@@ -143,10 +146,6 @@ const apiUrl = import.meta.env.PROD
     ? "/"
     : `http://${getConfig().API_HOST}:${getConfig().API_PORT}`;
 
-console.log(apiUrl)
-console.log(import.meta.env.PROD)
-console.log(`http://${getConfig().API_HOST}:${getConfig().API_PORT}`)
-
 const axiosInstance = axios.create({
   baseURL: apiUrl,
   headers: {

src/style.css

@@ -5,6 +5,7 @@
 body {
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   font-size: 14px;
+  width: 100%;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;

src/util/card-type-util.ts

@@ -24,6 +24,14 @@ export const isMonsterCard = (card: Card): card is MonsterCard => {
   return card.cardType === "MONSTER"
 }
 
+export const isSpellCard = (card: Card): card is SpellCard => {
+  return card.cardType === "SPELL"
+}
+
+export const isTrapCard = (card: Card): card is TrapCard => {
+  return card.cardType === "TRAP"
+}
+
 export const getMonsterCardType = (monsterCard: MonsterCard) => {
   return `${monsterCard.type} MONSTER `
 }

src/views/Callback.vue

@@ -16,7 +16,7 @@ onMounted(async () => {
     await router.push('/'); // Redirect to home after login
   } catch (error) {
     console.error('Login callback error:', error);
-    await router.push('/error'); // Handle errors
+    await router.push('/'); // Handle errors
   }
 });
 </script>

src/views/JobsView.vue

@@ -30,7 +30,7 @@
 
 <script setup lang="ts">
 
-import {type JobDto, JobService, JobType} from "../api/openapi";
+import {type JobDto, JobService, JobType} from "@/api/openapi";
 import {inject, onMounted, type Ref, ref} from "vue";
 import {JobServiceKey} from "../main.ts";
 

src/views/card/CardsView.vue

@@ -1,9 +1,7 @@
 <template>
-  <div class="flex w-full min-h-content">
+  <div class="flex">
-    <Panel class="w-full m-4">
+    <Panel class="w-[50%] m-4">
       <DataTable
-          class="my-4 ml-4 w-full"
-          tableStyle="min-width: 50rem"
           dataKey="id"
           paginator
           lazy
@@ -44,33 +42,21 @@
             <!--        <Avatar image="https://upload.wikimedia.org/wikipedia/en/2/2b/Yugioh_Card_Back.jpg" class="mr-2" size="xlarge" shape="circle" />-->
           </template>
         </Column>
-        <Column field="name" header="Name">
+        <Column header="Name">
           <template #body="slotProps">
-            <p class="font-bold">
+            <div class="w-[50%]">
-              {{slotProps.data.name}}
+              <p class="font-bold text-center">
+                {{ slotProps.data.name }}
               </p>
+              <p class="text-muted-color text-center" v-if="isMonsterCard(slotProps.data)">
+                {{ slotProps.data.monsterType}}
+              </p>
+            </div>
           </template>
         </Column>
-        <Column header="Card Type" filter>
+        <Column header="Attributes" class="w-[20%]">
           <template #body="slotProps">
-            <Tag
+            <CardAttributes v-model="slotProps.data"/>
-                :value="slotProps.data.cardType"
-                :severity="getCardSeverity(slotProps.data.cardType)"
-            ></Tag>
-          </template>
-        </Column>
-        <Column header="Type">
-          <template #body="slotProps">
-            <Tag
-                v-if="slotProps.data.type !== 'FUSION'"
-                :value="slotProps.data.type"
-                :severity="getCardTypeSeverity(slotProps.data)"
-            />
-            <CustomTag
-                v-else
-                color="purple"
-                :value="slotProps.data.type"
-            />
           </template>
         </Column>
         <template #expansion="slotProps">
@@ -81,17 +67,17 @@
 
     <CardFilterPanel
         v-model="filters"
-        class="fixed right-0 w-[42%] m-4"
+        class="fixed right-0 w-content m-4 h-content"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import CardFilterPanel from "../../components/CardFilterPanel.vue";
+import CardFilterPanel from "@/components/CardFilterPanel.vue";
-import {getCardTypeSeverity, getCardSeverity} from "../../util/card-type-util.ts";
+import {isMonsterCard} from "@/util/card-type-util.ts";
-import {type Card, CardService, type CardServiceGetCardPageRequest} from "../../api/openapi";
+import {type Card, CardService, type CardServiceGetCardPageRequest} from "@/api/openapi";
 import {inject, onMounted, ref, type Ref, watch} from "vue";
-import {CardServiceKey} from "../../main.ts";
+import {CardServiceKey} from "@/main.ts";
 import type {
   DataTableFilterEvent,
   DataTablePageEvent,
@@ -99,7 +85,7 @@ import type {
   DataTableSortEvent
 } from "primevue";
 import {useDebounceFn} from "@vueuse/core";
-import type {MutableCardRequest} from "../../api/mutableTypes.ts";
+import type {MutableCardRequest} from "@/api/mutableTypes.ts";
 
 const cardService: CardService = inject(CardServiceKey) as CardService;
 
@@ -143,7 +129,7 @@ const filters: Ref<MutableCardRequest> = ref({
   pageCount: 10
 })
 
-const getGetCardPage = async (filters: CardServiceGetCardPageRequest): Promise<void> => {
+const getCardPage = async (filters: CardServiceGetCardPageRequest): Promise<void> => {
   loading.value = true;
   const cardPage = (await cardService.getCardPage(filters)).data
 
@@ -156,7 +142,7 @@ const getGetCardPage = async (filters: CardServiceGetCardPageRequest): Promise<v
 const handlePaging = async (e: DataTablePageEvent) => {
   filters.value.page = e.page;
   filters.value.pageSize = e.rows
-  await getGetCardPage(filters.value)
+  await getCardPage(filters.value)
 }
 
 const handleSorting = (_: DataTableSortEvent) => {
@@ -172,13 +158,13 @@ const handleRowSelect = (e: DataTableRowSelectEvent) => {
   console.log(JSON.stringify(e.data))
 }
 
-const debouncedGetCardPage = useDebounceFn(getGetCardPage, 150)
+const debouncedGetCardPage = useDebounceFn(getCardPage, 150)
 
 watch(filters, async (newFiltersValue) => {
   await debouncedGetCardPage(newFiltersValue)
 })
 
 onMounted(async () => {
-  await getGetCardPage(filters.value)
+  await getCardPage(filters.value)
 })
 </script>

src/views/deck/CreateDeckView.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="flex gap-4 m-4">
+
+    <div class="flex flex-col gap-4 min-w-[40%]">
+      <Panel
+          header="Main Deck"
+          class="bg-primary-950 min-h-60"
+          @dragover.prevent
+          @drop="onDropToMainDeck"
+      >
+        <DataView
+            :value="mainDeck"
+            :pt="{
+            content: {
+              class: 'bg-inherit'
+            }
+          }"
+        >
+          <template #list="slotProps">
+            <div class="flex flex-col">
+              <div v-for="(card, index) in slotProps.items" :key="index">
+                <Card
+                    :draggable="true"
+                    class="text-lg font-medium mt-2"
+                    @dragstart="onDragStart(card, 'deck')"
+                >
+                  <template #content>
+                    {{ card.name }}
+                    <Button @click="removeFromDeck(card)">Remove</Button>
+                  </template>
+                </Card>
+              </div>
+            </div>
+          </template>
+          <template #empty>
+            Nope
+          </template>
+        </DataView>
+      </Panel>
+
+      <Panel
+          header="Extra Deck"
+          class="bg-indigo-950 min-h-60"
+          @dragover.prevent
+          @drop="onDropToExtraDeck"
+      >
+        <DataTable
+            :value="extraDeck"
+            :pt="{
+              emptyMessage: {
+                  class: 'bg-indigo-950'
+              },
+              column: {
+                headerCell: {
+                  class: 'bg-indigo-950 text-center'
+                },
+                columnHeaderContent: {
+                  class: 'justify-center'
+                }
+              },
+              bodyRow: {
+                class: 'bg-indigo-950 justify-center'
+              }
+            }"
+        >
+          <Column field="name" header="Card"/>
+          <Column header="Quantity" class="w-46">
+            <template #body>
+              <InputGroup class="w-full">
+                <InputGroupAddon>
+                  <Button icon="pi pi-minus" severity="primary"/>
+                </InputGroupAddon>
+                <InputNumber :model-value="1"/>
+                <InputGroupAddon>
+                  <Button icon="pi pi-plus" severity="primary"/>
+                </InputGroupAddon>
+              </InputGroup>
+            </template>
+          </Column>
+          <template #empty>
+            <div>
+              drag cards here senpai
+            </div>
+          </template>
+        </DataTable>
+      </Panel>
+
+      <Panel
+          header="Side Deck"
+          class="bg-slate-800 min-h-50"
+          @dragover.prevent
+          @drop="onDropToSideDeck"
+      >
+        <DataView
+            :value="sideDeck"
+            :pt="{
+            content: {
+              class: 'bg-inherit'
+            }
+          }"
+        >
+          <template #list="slotProps">
+            <div class="flex flex-col">
+              <div v-for="(card, index) in slotProps.items" :key="index" class="flex flex-wrap">
+                <Card
+                    :draggable="true"
+                    class="text-lg font-medium mt-2 w-full"
+                    @dragstart="onDragStart(card, 'deck')"
+                >
+                  <template #content>
+                    <div class="flex justify-between items-center gap-4">
+                      <p>
+                        {{ card.name }}
+                      </p>
+                      <InputGroup class="w-36">
+                        <InputGroupAddon>
+                          <Button icon="pi pi-minus" severity="primary"/>
+                        </InputGroupAddon>
+                        <InputNumber :model-value="1"/>
+                        <InputGroupAddon>
+                          <Button icon="pi pi-plus" severity="primary"/>
+                        </InputGroupAddon>
+                      </InputGroup>
+                    </div>
+                  </template>
+                </Card>
+              </div>
+            </div>
+          </template>
+          <template #empty>
+            Nope
+          </template>
+        </DataView>
+      </Panel>
+    </div>
+
+
+    <Panel
+        header="Available Cards"
+        class="w-[50%] fixed right-0"
+        @dragover.prevent
+        @drop="onDropToPool"
+    >
+      <DataView :value="availableCards">
+        <template #list="slotProps">
+          <div class="flex flex-col">
+            <div v-for="(card, index) in slotProps.items" :key="index">
+              <Card
+                  :draggable="true"
+                  class="text-lg font-medium mt-2"
+                  @dragstart="onDragStart(card, 'pool')"
+              >
+                <template #content>
+                  {{ card.name }}
+                </template>
+              </Card>
+            </div>
+          </div>
+        </template>
+      </DataView>
+    </Panel>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import {inject, onMounted, ref, type Ref} from "vue";
+import {SetServiceKey} from "@/main.ts";
+import {type Card, type SetDto, SetService} from "@/api/openapi";
+
+const setService = inject(SetServiceKey) as SetService
+const loading: Ref<boolean> = ref(false);
+const decks: Ref<SetDto[]> = ref([]);
+
+const page: Ref<number> = ref(0);
+const pageSize: Ref<number> = ref(20);
+const pageCount: Ref<number> = ref(0);
+const totalRecords: Ref<number> = ref(0);
+
+const getSetPage = async (page: number, pageSize: number): Promise<void> => {
+  loading.value = true;
+  const deckPage = (await setService.getCardSetPage({
+    page: page,
+    pageSize: pageSize
+  })).data
+
+  decks.value = deckPage.content
+  pageCount.value = deckPage.totalPages!!
+  totalRecords.value = deckPage.totalRecords!!
+  loading.value = false;
+}
+
+onMounted(async () => {
+  await getSetPage(
+      page.value,
+      pageSize.value
+  )
+})
+
+// ----
+// Initial card pool
+const mainDeck: Ref<Card[]> = ref([])
+const extraDeck: Ref<Card[]> = ref([])
+const sideDeck: Ref<Card[]> = ref([])
+
+const availableCards = ref([
+  {id: 1, name: 'Blue-Eyes White Dragon'},
+  {id: 2, name: 'Dark Magician'},
+  {id: 3, name: 'Red-Eyes Black Dragon'},
+  // ... more cards
+])
+
+// User's deck
+
+// Track the dragged card and its origin
+let draggedCard: Ref<Card | null> = ref(null)
+let originPool: Ref<string | null> = ref(null)
+
+function onDragStart(card: Card, from: string) {
+  draggedCard.value = card
+  originPool.value = from
+}
+
+function onDropToMainDeck() {
+  if (originPool.value === 'pool') {
+    // Prevent duplicates
+    if (draggedCard.value && !mainDeck.value.find(card => card.id === draggedCard.value?.id)) {
+      mainDeck.value.push(draggedCard.value)
+    }
+  } else if (originPool.value === 'deck') {
+    // Handle reordering within deck if desired
+    // For simplicity, no-op
+  }
+  resetDrag()
+}
+
+function onDropToExtraDeck() {
+  if (originPool.value === 'pool') {
+    // Prevent duplicates
+    if (draggedCard.value && !mainDeck.value.find(card => card.id === draggedCard.value?.id)) {
+      extraDeck.value.push(draggedCard.value)
+    }
+  } else if (originPool.value === 'deck') {
+    // Handle reordering within deck if desired
+    // For simplicity, no-op
+  }
+  resetDrag()
+}
+
+function onDropToSideDeck() {
+  if (originPool.value === 'pool') {
+    // Prevent duplicates
+    if (draggedCard.value && !mainDeck.value.find(card => card.id === draggedCard.value?.id)) {
+      sideDeck.value.push(draggedCard.value)
+    }
+  } else if (originPool.value === 'deck') {
+    // Handle reordering within deck if desired
+    // For simplicity, no-op
+  }
+  resetDrag()
+}
+
+function onDropToPool() {
+  if (originPool.value === 'deck') {
+    // Remove from deck and return to pool
+    mainDeck.value = mainDeck.value.filter(c => c.id !== draggedCard.value?.id)
+  }
+  resetDrag()
+}
+
+function removeFromDeck(cardToRemove: Card) {
+  mainDeck.value = mainDeck.value.filter(card => card.id !== cardToRemove.id)
+}
+
+function resetDrag() {
+  draggedCard.value = null
+  originPool.value = null
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/deck/DecksView.vue

@@ -1,73 +1,123 @@
 <template>
-  <div class="card">
+  <DataView :value="decks" :layout="layout">
-    <Carousel :value="decks" :numVisible="3" :numScroll="3">
+    <template #header>
-      <template #item="slotProps">
+      <div class="flex justify-end gap-4">
-        <div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4 w-96 h-auto">
+        <SelectButton v-model="layout" :options="layoutOptions" :allowEmpty="false">
-          <div class="mb-4">
+          <template #option="{ option }">
-            <div class="relative mx-auto">
+            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
-              <img
+          </template>
-                  :src="'https://upload.wikimedia.org/wikipedia/en/2/2b/Yugioh_Card_Back.jpg?20201122212343'"
+        </SelectButton>
-                  class="w-full rounded"
+        <Button type="button" size="small" label="Build" icon="pi pi-plus" @click="router.push('/decks/create')"/>
-                  alt="Deck"
+      </div>
-              />
+    </template>
+
+    <template #list="slotProps">
+      <div class="flex flex-col">
+        <div v-for="(item, index) in slotProps.items" :key="index">
+          <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
+            <div class="md:w-40 relative">
+              <img class="block xl:block mx-auto rounded w-full" src="https://m.media-amazon.com/images/I/81H7zpRNyRL.jpg" alt="peepee poopoo" />
+            </div>
+            <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
+              <div class="flex flex-row md:flex-col justify-between items-start gap-2">
+                <div>
+                  <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                  <div class="text-lg font-medium mt-2">{{ item.name }}</div>
+                </div>
+                <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                  <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                    <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                    <i class="pi pi-star-fill text-yellow-500"></i>
+                  </div>
+                </div>
+              </div>
+              <div class="flex flex-col md:items-end gap-8">
+                <span class="text-xl font-semibold">${{ item.price }}</span>
+                <div class="flex flex-row-reverse md:flex-row gap-2">
+                  <Button icon="pi pi-heart" outlined></Button>
+                  <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
+                </div>
               </div>
             </div>
-          <div class="flex justify-between ">
-            <p class="font-bold">
-              {{ slotProps.data.name }}
-            </p>
-            <Tag
-                value="[ARCHETYPE]"
-            />
           </div>
-          <div class="flex justify- items-center">
-            <SplitButton
-                label="View"
-                :model="deckMenuItems"
-                @click="viewDeck(slotProps.data.id)"
-            />
         </div>
       </div>
     </template>
-    </Carousel>
+
+    <template #grid="slotProps">
+      <div class="grid grid-cols-12 gap-4">
+        <div v-for="(deck, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
+          <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
+            <div class="bg-surface-50 flex justify-center rounded p-4">
+              <div class="relative mx-auto">
+                <img class="rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${deck.image}`" :alt="deck.name" style="max-width: 300px"/>
               </div>
+            </div>
+            <div class="pt-6">
+              <div class="flex flex-row justify-between items-start gap-2">
+                <div>
+                  <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">[ARCHETYPE]</span>
+                  <div class="text-lg font-medium mt-1">{{ deck.name }}</div>
+                </div>
+                <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                  <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                    <span class="text-surface-900 font-medium text-sm">5</span>
+                    <i class="pi pi-star-fill text-yellow-500"></i>
+                  </div>
+                </div>
+              </div>
+              <div class="flex flex-col gap-6 mt-6">
+                <span class="text-2xl font-semibold">50€</span>
+                <div class="flex gap-2">
+                  <Button icon="pi pi-shopping-cart" label="Buy Now" class="flex-auto whitespace-nowrap"></Button>
+                  <Button icon="pi pi-heart" outlined></Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </DataView>
 </template>
 
 <script setup lang="ts">
-
+import {type Deck, DeckService} from "@/api/openapi";
-import {type Deck, DeckService} from "../../api/openapi";
-import {DeckServiceKey} from "../../main.ts";
 import {inject, onMounted, ref, type Ref} from "vue";
-import {useToast} from "primevue";
+import {DeckServiceKey} from "@/main.ts";
 import {useRouter} from "vue-router";
 
-const toast = useToast();
 const router = useRouter();
+
+const layout: Ref<"grid" | "list"> = ref('grid');
+const layoutOptions: Ref<string[]> = ref(['list', 'grid']);
+const loading: Ref<boolean> = ref(false);
 const deckService: DeckService = inject(DeckServiceKey) as DeckService;
-const decks: Ref<Deck[]> = ref([])
+const decks: Ref<Deck[]> = ref([]);
 
-const deckMenuItems = [
+const page: Ref<number> = ref(0);
-  {
+const pageSize: Ref<number> = ref(20);
-    label: 'Edit',
+const pageCount: Ref<number> = ref(0);
-    command: () => {
+const totalRecords: Ref<number> = ref(0);
-      toast.add({
-        severity: 'info',
-        summary: 'Not Implemented',
-        detail: 'Deck Editing isn\'t implemented yet',
-        life: 3000
-      });
-    }
-  },
-]
 
-const viewDeck = (deckId: number) => {
+const getDeckPage = async (page: number, pageSize: number): Promise<void> => {
-  router.push(`/decks/${deckId}`);
+  loading.value = true;
+  const deckPage = (await deckService.getDecks({
+    page: page,
+    pageSize: pageSize
+  })).data
+
+  decks.value = deckPage.content
+  pageCount.value = deckPage.totalPages!!
+  totalRecords.value = deckPage.totalRecords!!
+  loading.value = false;
 }
 
-onMounted(async () => {
+onMounted( async() => {
-  const decksResponse = await deckService.getDecks()
+  await getDeckPage(
-
+      page.value,
-  decks.value = decksResponse.data.content
+      pageSize.value
+  )
 })
 </script>
 

src/views/set/SetsView.vue

@@ -1,4 +1,8 @@
 <template>
+  <CardSetImportModal
+    :visible="importModalVisible"
+    @update:visible="args => importModalVisible = args"
+  />
   <DataTable
       tableStyle="min-width: 50rem"
       dataKey="id"
@@ -16,6 +20,11 @@
       @page="handlePaging"
       @sort="handleSorting"
   >
+    <template #header>
+      <div class="flex justify-end">
+        <Button type="button" size="small" label="Import" icon="pi pi-download" @click="importModalVisible = true"/>
+      </div>
+    </template>
     <Column header="Image">
       <template #body>
         <Image alt="Image" preview class="h-64">
@@ -24,7 +33,9 @@
           </template>
           <template #image>
             <div class="overflow-hidden">
-              <img src="https://comicbook.com/wp-content/uploads/sites/4/2024/11/YuGiOh-Early-Days-Collection.png?resize=2000,1125" alt="image" width="650" height="650"/>
+              <img
+                  src="https://comicbook.com/wp-content/uploads/sites/4/2024/11/YuGiOh-Early-Days-Collection.png?resize=2000,1125"
+                  alt="image" width="650" height="650"/>
             </div>
           </template>
           <template #preview="slotProps">
@@ -41,25 +52,26 @@
     <Column field="name" header="Name">
       <template #body="slotProps">
         <p class="font-bold">
-          {{slotProps.data.name}}
+          {{ slotProps.data.name }}
         </p>
       </template>
     </Column>
     <Column header="No. of Regional Sets">
-      <template #body="slotProps">
+      <template #body>
-        {{ slotProps.data.regionalSets.length }}
+        N/A
       </template>
     </Column>
-    <template #footer> In total there are {{ sets ? sets.length : 0 }} Card Sets </template>
+    <template #footer> In total there are {{ sets ? sets.length : 0 }} Card Sets</template>
   </DataTable>
 </template>
 
 <script setup lang="ts">
-import {type SetDto, SetService} from "../../api/openapi";
+import {type SetDto, SetService} from "@/api/openapi";
 import {inject, onMounted, ref, type Ref} from "vue";
-import {SetServiceKey} from "../../main.ts";
+import {SetServiceKey} from "@/main.ts";
 import type {DataTablePageEvent, DataTableSortEvent} from "primevue";
 
+const importModalVisible: Ref<boolean> = ref(false);
 const setService: SetService = inject(SetServiceKey) as SetService;
 const loading: Ref<boolean> = ref(true);
 const sets: Ref<SetDto[]> = ref([])
@@ -72,16 +84,16 @@ const first = ref(0);
 
 const fetchCardSetPage = async (page: number, pageSize: number): Promise<void> => {
   loading.value = true;
-  const cardPage = (await setService.getCardSetPage({
+  const setPage = (await setService.getCardSetPage({
         name: null,
         page: page,
         pageSize: pageSize
       }
   )).data
 
-  sets.value = cardPage.content
+  sets.value = setPage.content
-  pageCount.value = cardPage.totalPages!!
+  pageCount.value = setPage.totalPages!!
-  totalRecords.value = cardPage.totalRecords!!
+  totalRecords.value = setPage.totalRecords!!
   loading.value = false;
 }