first commit

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

@@ -0,0 +1,140 @@
+<script setup>
+import { kFormatter } from '@core/utils/formatters'
+import arrowGrowth from '@images/cards/arrow-growth.png'
+import atmCard from '@images/cards/atm-card.png'
+import creditCard from '@images/cards/credit-card.png'
+import paypal from '@images/cards/paypal.png'
+import wallet from '@images/cards/wallet.png'
+
+const transactions = [
+  {
+    gateway: 'PayPal',
+    for: 'Received Money',
+    amount: 2482,
+    img: paypal,
+    imgHeight: 22,
+  },
+  {
+    gateway: 'Credit Card',
+    for: 'DigitalOcean',
+    amount: -1250,
+    img: creditCard,
+    imgHeight: 15,
+  },
+  {
+    gateway: 'Mastercard',
+    for: 'Netflix',
+    amount: -99,
+    img: atmCard,
+    imgHeight: 15,
+  },
+  {
+    gateway: 'Wallet',
+    for: 'Mac\'D',
+    amount: -82,
+    img: wallet,
+    imgHeight: 18,
+  },
+  {
+    gateway: 'Transfer',
+    for: 'Refund',
+    amount: 8934,
+    img: arrowGrowth,
+    imgHeight: 12,
+  },
+  {
+    gateway: 'Wallet',
+    for: 'Buy Apple Watch',
+    amount: -399,
+    img: wallet,
+    imgHeight: 18,
+  },
+]
+
+const transactionsColors = {
+  'PayPal': 'error',
+  'Credit Card': 'success',
+  'Mastercard': 'warning',
+  'Wallet': 'primary',
+  'Transfer': 'info',
+}
+
+const formateAmount = amount => {
+  return Math.sign(amount) === 1 ? `+${ kFormatter(amount) }` : `-${ Math.abs(amount) }`
+}
+</script>
+
+<template>
+  <VCard>
+    <!-- SECTION Card Header and Menu -->
+    <VCardItem>
+      <!-- 👉 Title -->
+      <VCardTitle>Transactions</VCardTitle>
+
+      <!-- 👉 menu -->
+      <template #append>
+        <div class="me-n3">
+          <MoreBtn />
+        </div>
+      </template>
+    </VCardItem>
+    <!-- !SECTION -->
+
+    <!-- SECTION Transactions List -->
+    <VCardText>
+      <VList class="card-list">
+        <VListItem
+          v-for="transaction in transactions"
+          :key="transaction.for"
+        >
+          <!-- 👉 Avatar -->
+          <template #prepend>
+            <VAvatar
+              rounded
+              variant="tonal"
+              :color="transactionsColors[transaction.gateway]"
+            >
+              <img
+                :src="transaction.img"
+                :height="transaction.imgHeight"
+              >
+            </VAvatar>
+          </template>
+
+          <!-- 👉 Title and Subtitle  -->
+          <VListItemTitle>
+            <h6 class="text-h6">
+              {{ transaction.gateway }}
+            </h6>
+          </VListItemTitle>
+          <VListItemSubtitle>
+            <div class="text-body-1 me-2">
+              {{ transaction.for }}
+            </div>
+          </VListItemSubtitle>
+
+          <!-- 👉 Amounts -->
+          <template #append>
+            <VListItemAction>
+              <h6 class="text-h6 me-2">
+                {{ formateAmount(transaction.amount) }}
+              </h6>
+              <VIcon
+                :size="24"
+                :color="Math.sign(transaction.amount) === 1 ? 'success' : 'error'"
+                :icon="Math.sign(transaction.amount) === 1 ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'"
+              />
+            </VListItemAction>
+          </template>
+        </VListItem>
+      </VList>
+    </VCardText>
+    <!-- !SECTION -->
+  </VCard>
+</template>
+
+ <style lang="scss" scoped>
+  .card-list {
+    --v-card-list-gap: 1.5rem;
+  }
+  </style>