initial commit

resources/js/Components/CardBoxTransaction.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { computed } from 'vue'
+import { mdiCashMinus, mdiCashPlus, mdiReceipt, mdiCreditCardOutline } from '@mdi/js'
+import CardBox from '@/Components/CardBox.vue'
+import BaseLevel from '@/Components/BaseLevel.vue'
+import PillTag from '@/Components/PillTag.vue'
+import IconRounded from '@/Components/IconRounded.vue'
+
+const props = defineProps({
+  amount: {
+    type: Number,
+    required: true
+  },
+  date: {
+    type: String,
+    required: true
+  },
+  business: {
+    type: String,
+    required: true
+  },
+  type: {
+    type: String,
+    required: true
+  },
+  name: {
+    type: String,
+    required: true
+  },
+  account: {
+    type: String,
+    required: true
+  }
+})
+
+const icon = computed(() => {
+  if (props.type === 'withdrawal') {
+    return {
+      icon: mdiCashMinus,
+      type: 'danger'
+    }
+  } else if (props.type === 'deposit') {
+    return {
+      icon: mdiCashPlus,
+      type: 'success'
+    }
+  } else if (props.type === 'invoice') {
+    return {
+      icon: mdiReceipt,
+      type: 'warning'
+    }
+  }
+
+  return {
+    icon: mdiCreditCardOutline,
+    type: 'info'
+  }
+})
+</script>
+
+<template>
+  <CardBox
+    class="mb-6 last:mb-0"
+    hoverable
+  >
+    <BaseLevel>
+      <BaseLevel type="justify-start">
+        <IconRounded
+          :icon="icon.icon"
+          :type="icon.type"
+          class="md:mr-6"
+        />
+        <div class="text-center space-y-1 md:text-left md:mr-6">
+          <h4 class="text-xl">
+            ${{ amount }}
+          </h4>
+          <p class="text-gray-500 dark:text-slate-400">
+            <b>{{ date }}</b> via {{ business }}
+          </p>
+        </div>
+      </BaseLevel>
+      <div class="text-center md:text-right space-y-2">
+        <p class="text-sm text-gray-500">
+          {{ name }}
+        </p>
+        <div>
+          <PillTag
+            :type="icon.type"
+            :text="type"
+            small
+          />
+        </div>
+      </div>
+    </BaseLevel>
+  </CardBox>
+</template>