Initial commit

resources/js/views/dashboards/analytics/AnalyticsSourceVisits.vue

@@ -0,0 +1,133 @@
+<script setup>
+const sourceVisits = [
+  {
+    avatarIcon: 'tabler-shadow',
+    title: 'Direct Source',
+    subtitle: 'Direct link click',
+    stats: '1.2k',
+    profitLoss: 4.2,
+  },
+  {
+    avatarIcon: 'tabler-globe',
+    title: 'Social Network',
+    subtitle: 'Social Channels',
+    stats: '31.5k',
+    profitLoss: 8.2,
+  },
+  {
+    avatarIcon: 'tabler-mail',
+    title: 'Email Newsletter',
+    subtitle: 'Mail Campaigns',
+    stats: '893',
+    profitLoss: 2.4,
+  },
+  {
+    avatarIcon: 'tabler-external-link',
+    title: 'Referrals',
+    subtitle: 'Impact Radius Visits',
+    stats: '342',
+    profitLoss: -0.4,
+  },
+  {
+    avatarIcon: 'tabler-ad',
+    title: 'ADVT',
+    subtitle: 'Google ADVT',
+    stats: '2.15k',
+    profitLoss: 9.1,
+  },
+  {
+    avatarIcon: 'tabler-star',
+    title: 'Other',
+    subtitle: 'Many Sources',
+    stats: '12.5k',
+    profitLoss: 6.2,
+  },
+]
+
+const moreList = [
+  {
+    title: 'Refresh',
+    value: 'refresh',
+  },
+  {
+    title: 'Download',
+    value: 'Download',
+  },
+  {
+    title: 'View All',
+    value: 'View All',
+  },
+]
+</script>
+
+<template>
+  <VCard>
+    <VCardItem>
+      <VCardTitle>Source Visits</VCardTitle>
+      <VCardSubtitle>
+        38.4k Visitors
+      </VCardSubtitle>
+      <template #append>
+        <div class="mt-n4 me-n2">
+          <MoreBtn
+            size="small"
+            :menu-list="moreList"
+          />
+        </div>
+      </template>
+    </VCardItem>
+
+    <VCardText>
+      <VList class="card-list">
+        <VListItem
+          v-for="visit in sourceVisits"
+          :key="visit.title"
+        >
+          <template #prepend>
+            <VAvatar
+              size="38"
+              color="secondary"
+              variant="tonal"
+              class="me-1"
+              rounded
+            >
+              <VIcon
+                :icon="visit.avatarIcon"
+                size="22"
+              />
+            </VAvatar>
+          </template>
+
+          <VListItemTitle class="font-weight-medium me-4">
+            {{ visit.title }}
+          </VListItemTitle>
+          <VListItemSubtitle class="me-4">
+            {{ visit.subtitle }}
+          </VListItemSubtitle>
+
+          <template #append>
+            <div class="d-flex align-center gap-x-4">
+              <div class="text-body-1">
+                {{ visit.stats }}
+              </div>
+              <VChip
+                label
+                size="small"
+                :color="visit.profitLoss > 0 ? 'success' : 'error'"
+              >
+                {{ visit.profitLoss > 0 ? '+' : '' }}
+                {{ visit.profitLoss }}%
+              </VChip>
+            </div>
+          </template>
+        </VListItem>
+      </VList>
+    </VCardText>
+  </VCard>
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+  --v-card-list-gap: 1.5rem;
+}
+</style>