first commit

resources/js/views/pages/cards/card-advance/CardAdvanceTotalEarning.vue

@@ -0,0 +1,99 @@
+<script setup>
+import aviato from '@images/logos/aviato.png'
+import bitbank from '@images/logos/bitbank.png'
+import zipcar from '@images/logos/zipcar.png'
+
+const earnings = [
+  {
+    avatar: zipcar,
+    title: 'Zipcar',
+    subtitle: 'Vuejs, React & HTML',
+    amount: '$24,895.65',
+    progress: 'primary',
+  },
+  {
+    avatar: bitbank,
+    title: 'Bitbank',
+    subtitle: 'Sketch, Figma & XD',
+    amount: '$8,6500.20',
+    progress: 'info',
+  },
+  {
+    avatar: aviato,
+    title: 'Aviato',
+    subtitle: 'HTML & Anguler',
+    amount: '$1,2450.80',
+    progress: 'secondary',
+  },
+]
+</script>
+
+<template>
+  <VCard>
+    <VCardItem>
+      <VCardTitle>Total Earning</VCardTitle>
+
+      <template #append>
+        <div class="me-n3">
+          <MoreBtn />
+        </div>
+      </template>
+    </VCardItem>
+
+    <VCardText>
+      <div class="d-flex align-center">
+        <h3 class="text-h3">
+          $24,895
+        </h3>
+
+        <VIcon
+          size="24"
+          icon="ri-arrow-up-s-line"
+          color="success"
+        />
+        <div class="text-success">
+          10%
+        </div>
+      </div>
+      <div class="text-body-1 mb-6">
+        Compared to $84,325 last year
+      </div>
+
+      <VList class="card-list">
+        <VListItem
+          v-for="earning in earnings"
+          :key="earning.title"
+        >
+          <template #prepend>
+            <VAvatar
+              rounded
+              :image="earning.avatar"
+              variant="tonal"
+            />
+          </template>
+
+          <VListItemTitle class="font-weight-medium">
+            {{ earning.title }}
+          </VListItemTitle>
+          <VListItemSubtitle class="text-body-1">
+            {{ earning.subtitle }}
+          </VListItemSubtitle>
+
+          <template #append>
+            <div>
+              <h6 class="text-h6 mb-2">
+                {{ earning.amount }}
+              </h6>
+              <VProgressLinear
+                :color="earning.progress"
+                model-value="80"
+                rounded
+                rounded-bar
+              />
+            </div>
+          </template>
+        </VListItem>
+      </VList>
+    </VCardText>
+  </VCard>
+</template>