🌱 🏗️ ⬆️ ✨add expense table 🎨 🔧
This commit is contained in:
@@ -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 */
|
||||
@@ -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"}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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"}
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user