<script setup>
import {onMounted, reactive} from "vue";

const myInvoices = reactive({
    'myInvoices': '',
    'approvedInvoices': '',
    'deniedInvoices': '',
})

onMounted(async () => {
        const response = await fetch('/api/v1/dashboard/my-invoices');
    const data = await response.json();
    Object.assign(myInvoices, data);
});

</script>

<template>
    <h2>Meine Abrechnungen</h2>
    <p v-for="invoice in myInvoices.myInvoices" class="widget-content-item">
        <a :href="'/invoice/my-invoices/' + invoice.slug" class="link">{{invoice.title}} ({{invoice.count}})</a>
        <label>
            {{invoice.amount}}
        </label>
    </p>


</template>

<style scoped>

</style>
