60 lines
2.1 KiB
Vue
60 lines
2.1 KiB
Vue
<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>
|