first commit

src/@core/components/ErrorHeader.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+interface Props {
+  errorCode: string
+  errorTitle: string
+  errorDescription: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div class="text-center mb-4">
+    <!-- 👉 Title and subtitle -->
+    <h1 class="text-h1">
+      {{ props.errorCode }}
+    </h1>
+    <h5 class="text-h5 mb-1">
+      {{ props.errorTitle }}
+    </h5>
+    <p class="text-sm">
+      {{ props.errorDescription }}
+    </p>
+  </div>
+</template>

src/@core/components/MoreBtn.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+interface Props {
+  menuList?: unknown[]
+  itemProps?: boolean
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <IconBtn>
+    <VIcon icon="mdi-dots-vertical" />
+
+    <VMenu
+      v-if="props.menuList"
+      activator="parent"
+    >
+      <VList
+        :items="props.menuList"
+        :item-props="props.itemProps"
+      />
+    </VMenu>
+  </IconBtn>
+</template>

src/@core/components/ThemeSwitcher.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useTheme } from 'vuetify'
+import type { ThemeSwitcherTheme } from '@layouts/types'
+
+const props = defineProps<{
+  themes: ThemeSwitcherTheme[]
+}>()
+
+const { name: themeName, global: globalTheme } = useTheme()
+const { state: currentThemeName, next: getNextThemeName, index: currentThemeIndex } = useCycleList(props.themes.map(t => t.name), { initialValue: themeName })
+
+const changeTheme = () => {
+  globalTheme.name.value = getNextThemeName()
+}
+
+// Update icon if theme is changed from other sources
+watch(() => globalTheme.name.value, val => {
+  currentThemeName.value = val
+})
+</script>
+
+<template>
+  <IconBtn @click="changeTheme">
+    <VIcon :icon="props.themes[currentThemeIndex].icon" />
+    <VTooltip
+      activator="parent"
+      open-delay="1000"
+      scroll-strategy="close"
+    >
+      <span class="text-capitalize">{{ currentThemeName }}</span>
+    </VTooltip>
+  </IconBtn>
+</template>

src/@core/components/cards/CardStatisticsHorizontal.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { kFormatter } from '@core/utils/formatters'
+
+interface Props {
+  title: string
+  color?: string
+  icon: string
+  stats: number
+  change: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: 'primary',
+})
+
+const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
+</script>
+
+<template>
+  <VCard>
+    <VCardText class="d-flex align-center">
+      <VAvatar
+        size="44"
+        rounded
+        :color="props.color"
+        variant="tonal"
+        class="me-4"
+      >
+        <VIcon
+          :icon="props.icon"
+          size="30"
+        />
+      </VAvatar>
+
+      <div>
+        <span class="text-caption">{{ props.title }}</span>
+        <div class="d-flex align-center flex-wrap">
+          <span class="text-h6 font-weight-semibold">{{ kFormatter(props.stats) }}</span>
+          <div
+            v-if="props.change"
+            :class="`${isPositive ? 'text-success' : 'text-error'} mt-1`"
+          >
+            <VIcon :icon="isPositive ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
+            <span class="text-caption font-weight-semibold">{{ Math.abs(props.change) }}%</span>
+          </div>
+        </div>
+      </div>
+    </VCardText>
+  </VCard>
+</template>

src/@core/components/cards/CardStatisticsVertical.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  color?: string
+  icon: string
+  stats: string
+  change: number
+  subtitle: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: 'primary',
+})
+
+const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
+</script>
+
+<template>
+  <VCard>
+    <VCardText class="d-flex align-center">
+      <VAvatar
+        v-if="props.icon"
+        size="38"
+        :color="props.color"
+      >
+        <VIcon
+          :icon="props.icon"
+          size="24"
+        />
+      </VAvatar>
+
+      <VSpacer />
+
+      <MoreBtn class="me-n3 mt-n1" />
+    </VCardText>
+
+    <VCardText>
+      <h6 class="text-sm font-weight-semibold mb-2">
+        {{ props.title }}
+      </h6>
+      <div
+        v-if="props.change"
+        class="d-flex align-center mb-2"
+      >
+        <span class="font-weight-semibold text-h5 me-2">{{ props.stats }}</span>
+        <span
+          :class="isPositive ? 'text-success' : 'text-error'"
+          class="text-caption"
+        >
+          {{ isPositive ? `+${props.change}` : props.change }}%
+        </span>
+      </div>
+      <span class="text-caption">{{ props.subtitle }}</span>
+    </VCardText>
+  </VCard>
+</template>

src/@core/components/cards/CardStatisticsWithImages.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  subtitle: string
+  stats: string
+  change: number
+  image: string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: 'primary',
+})
+
+const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
+</script>
+
+<template>
+  <VCard class="overflow-visible">
+    <div class="d-flex position-relative">
+      <VCardText>
+        <h6 class="text-base font-weight-semibold mb-4">
+          {{ props.title }}
+        </h6>
+        <div class="d-flex align-center flex-wrap mb-4">
+          <h5 class="text-h5 font-weight-semibold me-2">
+            {{ props.stats }}
+          </h5>
+          <span
+            class="text-caption"
+            :class="isPositive ? 'text-success' : 'text-error'"
+          >
+            {{ isPositive ? `+${props.change}` : props.change }}%
+          </span>
+        </div>
+
+        <VChip
+          v-if="props.subtitle"
+          size="small"
+          :color="props.color"
+        >
+          {{ props.subtitle }}
+        </VChip>
+      </VCardText>
+
+      <VSpacer />
+
+      <div class="illustrator-img">
+        <VImg
+          v-if="props.image"
+          :src="props.image"
+          :width="110"
+        />
+      </div>
+    </div>
+  </VCard>
+</template>
+
+<style lang="scss">
+.illustrator-img {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-end: 5%;
+}
+</style>