<script setup>
import AppLayout from '../../../../resources/js/layouts/AppLayout.vue'
import ShadowedBox from "../../../Views/Components/ShadowedBox.vue";
import MyInvoices from "./Partials/Widgets/MyInvoices.vue";
import MyParticipations from "./Partials/Widgets/MyParticipations.vue";

const props = defineProps({
    myInvoices: Object,
    myParticipations: Object,
})


function newInvoice() {
    window.location.href = '/invoice/new';
}

</script>

<template>
    <AppLayout title='Dashboard'>
        <diV class="dashboard-widget-container">
            <shadowed-box class="dashboard-widget-box" style="width: 60%;">
                <MyParticipations />
            </shadowed-box>

            <shadowed-box  class="dashboard-widget-box" style="height: 275px;">
                <MyInvoices />
                <input type="button" value="Neue Abrechnung" @click="newInvoice" style="margin-top: 20px;">


            </shadowed-box>
        </diV>
    </AppLayout>
</template>

<style>
.dashboard-widget-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    position: relative;


}

.dashboard-widget-box {
    flex-grow: 1; display: inline-block;
     margin: 0 10px;
}

.dashboard-widget-box h2 {
    border-color: #c0c0c0;
    border-left-width: 40px;
    border-left-style: solid;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    padding: 5px 10px;
    font-size: 13pt;
}

</style>
