<script setup>
import homeLayout from "../../templates/home.layout.vue";
import { Head } from "@inertiajs/vue3";
</script>

<style>
@import "index.css";
</style>

<template>
    <homeLayout>
        <Head>
            <title>Transactions</title>
        </Head>
        <div class="row h-50">
            <div class="col">
                <h3 class="text-center">Incomes</h3>
                <table class="table table-striped table-hover table-responsive">
                    <tbody>
                        <tr>
                            <td v-for="column in $page.props.incomes.columns">
                                {{ column }}
                            </td>
                        </tr>
                        <tr v-for="item in $page.props.incomes.data">
                            <td>{{ item.amount }}</td>
                            <td>{{ item.description }}</td>
                            <td>{{ item.date }}</td>
                            <td>{{ item.label }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col">
                <table class="table table-striped"></table>
            </div>
        </div>
    </homeLayout>
</template>
