<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="grid">
            <h3 class="text-center incomes">Incomes</h3>
            <div class="table-overflow g-col-4">
                <table class="table table-striped table-hover table-responsive">
                    <thead class="table-dark">
                        <tr>
                            <td v-for="column in $page.props.incomes.columns">
                                {{ column }}
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <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="separator"></div>
            <h3 class="text-center expense">Expenses</h3>
            <div class="table-overflow g-col-4">
                <table class="table table-striped table-hover table-responsive">
                    <thead class="table-dark">
                        <tr>
                            <td v-for="column in $page.props.expenses.columns">
                                {{ column }}
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in $page.props.expenses.data">
                            <td>{{ item.amount }}</td>
                            <td>{{ item.description }}</td>
                            <td>{{ item.date }}</td>
                            <td>{{ item.label }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </homeLayout>
</template>
