clement/budget_analyser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🌱 🏗️ ⬆️ ✨add expense table 🎨 🔧

Browse Source
This commit is contained in:
Clément Turlure
2025-05-15 17:45:22 +02:00
parent d17fded423
commit be5225c85d
100 changed files with 6250 additions and 8757 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
resources/js/Pages/Transactions/index.css
View File

@@ -1,3 +1,16 @@
h3 {
h3.incomes {
background-color: green;
}
h3.expense {
background-color: red;
}
.table-overflow {
max-height: 500px;
overflow-y: scroll;
}
.separator {
margin: 1rem;
}/*# sourceMappingURL=index.css.map */

2
resources/js/Pages/Transactions/index.css.map
View File

@@ -1 +1 @@
{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACI,uBAAA;ACCJ","file":"index.css"}
{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACI,uBAAA;ACCJ;;ADCA;EACI,qBAAA;ACEJ;;ADAA;EACI,iBAAA;EACA,kBAAA;ACGJ;;ADDA;EACI,YAAA;ACIJ","file":"index.css"}

12
resources/js/Pages/Transactions/index.scss
View File

@@ -1,3 +1,13 @@
h3 {
h3.incomes {
background-color: green;
}
h3.expense {
background-color: red;
}
.table-overflow{
max-height: 500px;
overflow-y: scroll;
}
.separator{
margin: 1rem;
}

66
resources/js/Pages/Transactions/index.vue
View File

@@ -12,31 +12,47 @@ import { Head } from "@inertiajs/vue3";
<Head>
<title>Transactions</title>
</Head>
<div class="container">
<div class="row">
<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="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>