🌱 🏗️ ⬆️ add expense table 🎨 🔧

This commit is contained in:
2025-05-15 17:45:22 +02:00
parent d17fded423
commit be5225c85d
100 changed files with 6250 additions and 8757 deletions

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 */

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"}

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;
}

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>

View File

@@ -4,6 +4,8 @@ header {
padding: 10px;
border-radius: 0 0 20px 20px;
box-shadow: 0 5px 5px gray;
position: sticky;
top: 0;
}
header a {
color: white;

View File

@@ -1 +1 @@
{"version":3,"sources":["home.scss","home.css"],"names":[],"mappings":"AAAA;EACI,kBAAA;EACA,8BAAA;EACA,aAAA;EACA,4BAAA;EACA,0BAAA;ACCJ;ADAI;EACI,YAAA;EACA,qBAAA;EACA,WAAA;ACER;ADDQ;EACI,WAAA;EACA,cAAA;EACA,WAAA;EACA,WAAA;EACA,SAAA;EACA,OAAA;EACA,yBAAA;EACA,oBAAA;EACA,+BAAA;ACGZ;ADDQ;EACI,cAAA;EACA,yBAAA;ACGZ;ADFY;EACI,oBAAA;ACIhB","file":"home.css"}
{"version":3,"sources":["home.scss","home.css"],"names":[],"mappings":"AAAA;EACI,kBAAA;EACA,8BAAA;EACA,aAAA;EACA,4BAAA;EACA,0BAAA;EACA,gBAAA;EACA,MAAA;ACCJ;ADAI;EACI,YAAA;EACA,qBAAA;EACA,WAAA;ACER;ADDQ;EACI,WAAA;EACA,cAAA;EACA,WAAA;EACA,WAAA;EACA,SAAA;EACA,OAAA;EACA,yBAAA;EACA,oBAAA;EACA,+BAAA;ACGZ;ADDQ;EACI,cAAA;EACA,yBAAA;ACGZ;ADFY;EACI,oBAAA;ACIhB","file":"home.css"}

View File

@@ -8,13 +8,13 @@ import { Link } from "@inertiajs/vue3";
<template>
<header>
<div class="container text-center">
<div class="container text-center position-sticky">
<div class="row">
<div class="col">
<Link href="/">Home</Link>
</div>
<div class="col">
<Link href="/transactions">Manage Expanses & Incomes</Link>
<Link href="/transactions">Manage Expenses & Incomes</Link>
</div>
<div class="col">
<Link href="">Lorem</Link>

View File

@@ -4,6 +4,8 @@ header {
padding: 10px;
border-radius: 0 0 20px 20px;
box-shadow: 0 5px 5px gray;
position: sticky;
top: 0;
a {
color: white;
text-decoration: none;