tethys.backend/resources/js/Components/CardBoxTransaction.vue

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