fix bugs

src/components/ErrorHeader.vue

@@ -1,30 +0,0 @@
-<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
-      v-if="props.errorCode"
-      class="text-h1 font-weight-medium"
-    >
-      {{ props.errorCode }}
-    </h1>
-    <h5
-      v-if="props.errorTitle"
-      class="text-h5 font-weight-medium mb-3"
-    >
-      {{ props.errorTitle }}
-    </h5>
-    <p v-if="props.errorDescription">
-      {{ props.errorDescription }}
-    </p>
-  </div>
-</template>

src/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/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/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>