Recount/Recount-Server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Compare commits

base: Recount:00a697d1a6330a8d0818b49198160882f7aebe0e
Branches Tags
Recount:main
..
compare: Recount:d0e334e8422e6c609ae025e48efcbdd3e377d866
Branches Tags
Recount:main

No commits in common. "00a697d1a6330a8d0818b49198160882f7aebe0e" and "d0e334e8422e6c609ae025e48efcbdd3e377d866" have entirely different histories.
00a697d1a6 ... d0e334e842

10 changed files with 216 additions and 267 deletions
Show stats Expand all files Collapse all files

2
api.go
View file

@ -41,7 +41,7 @@ func getTransactions(w http.ResponseWriter, req *http.Request) {
transactions := []types.Transaction{}
err := db.GetTransactions(&transactions, input.ResultCount, input.PageNum)
err := db.GetTransactions(&transactions, input.ResultCount, input.PageNum);
if err != nil {

103
db/db.go
View file

@ -1,8 +1,8 @@
package db
import (
"database/sql"
"fmt"
"database/sql"
"github.com/jmoiron/sqlx"
_ "github.com/lib/pq"
@ -11,14 +11,14 @@ import (
"nickiel.net/recount_server/types"
)
var DB_TYPE string
var DB_SCHEMA string
var DB_CONNECTION_STRING string
var DB_TYPE string;
var DB_SCHEMA string;
var DB_CONNECTION_STRING string;
func SetConstants(db_type string, db_schema string, db_conn_string string) {
DB_TYPE = db_type
DB_SCHEMA = db_schema
DB_CONNECTION_STRING = db_conn_string
DB_TYPE = db_type;
DB_SCHEMA = db_schema;
DB_CONNECTION_STRING = db_conn_string;
}
func GetTransactions(transactions *[]types.Transaction, resultCount int, pageNum int) error {
@ -69,61 +69,62 @@ func NewTransaction(transaction types.Transaction) error {
}
func GetUserAccounts(userID int) ([]types.Account, error) {
user_accounts := make([]types.Account, 4)
user_accounts := make([]types.Account, 4);
user_accounts[0] = types.Account{
Id: 1,
DisplayName: sql.NullString{
String: "Savings",
Valid: true,
},
Description: sql.NullString{
String: "BECU Saving Account",
Valid: true,
},
}
user_accounts[1] = types.Account{
Id: 2,
DisplayName: sql.NullString{
String: "BECU Credit Card",
Valid: true,
},
Description: sql.NullString{
String: "BECU Saving Account",
Valid: true,
},
}
user_accounts[0] = types.Account {
Id: 1,
DisplayName: sql.NullString {
String: "Savings",
Valid: true,
} ,
Description: sql.NullString {
String: "BECU Saving Account",
Valid: true,
},
};
user_accounts[1] = types.Account {
Id: 2,
DisplayName: sql.NullString {
String: "BECU Credit Card",
Valid: true,
} ,
Description: sql.NullString {
String: "BECU Saving Account",
Valid: true,
},
};
return user_accounts, nil
return user_accounts, nil;
}
func GetUserBuckets(userID int) ([]types.Bucket, error) {
bucket1 := types.Bucket{
Id: 1,
DisplayCode: sql.NullString{String: "SVNG", Valid: true},
DisplayName: sql.NullString{String: "Savings", Valid: true},
Description: sql.NullString{String: "The Savings Bucket", Valid: true},
}
bucket1 := types.Bucket{
Id: 1,
DisplayCode: sql.NullString{String: "SVNG", Valid: true},
DisplayName: sql.NullString{String: "Savings", Valid: true},
Description: sql.NullString{String: "The Savings Bucket", Valid: true},
}
bucket2 := types.Bucket{
Id: 2,
DisplayCode: sql.NullString{String: "SPND", Valid: true},
DisplayName: sql.NullString{String: "Spending", Valid: true},
Description: sql.NullString{String: "The Spending Bucket", Valid: true},
}
bucket2 := types.Bucket{
Id: 2,
DisplayCode: sql.NullString{String: "SPND", Valid: true},
DisplayName: sql.NullString{String: "Spending", Valid: true},
Description: sql.NullString{String: "The Spending Bucket", Valid: true},
}
// Creating a slice of length two and populating it with the two structs
buckets := []types.Bucket{bucket1, bucket2}
// Creating a slice of length two and populating it with the two structs
buckets := []types.Bucket{bucket1, bucket2}
return buckets, nil
return buckets, nil;
}
func GetTransPaneEntries(userID int) ([]types.QuickTransactionType, error) {
transaction_types := make([]types.QuickTransactionType, 1)
transaction_types := make([]types.QuickTransactionType, 1);
transaction_types[0] = types.QuickTransactionType{
DisplayName: "Manual",
}
transaction_types[0] = types.QuickTransactionType {
DisplayName: "Manual",
};
return transaction_types, nil
return transaction_types, nil;
}

4
recount-server.go
View file

@ -1,8 +1,8 @@
package main
import (
"nickiel.net/recount_server/db"
"nickiel.net/recount_server/tests"
"nickiel.net/recount_server/db"
"nickiel.net/recount_server/web"
"net/http"
@ -60,7 +60,7 @@ func main() {
debug_mode.Init_testdb(DB_TYPE, DB_CONNECTION_STRING)
}
db.SetConstants(DB_TYPE, DB_SCHEMA, DB_CONNECTION_STRING)
db.SetConstants(DB_TYPE, DB_SCHEMA, DB_CONNECTION_STRING);
debug_mode.SetLogLevel(zerolog.GlobalLevel())

23
tests/testdb.go
View file

@ -1,8 +1,8 @@
package debug_mode
import (
"nickiel.net/recount_server/types"
"encoding/json"
"nickiel.net/recount_server/types"
"os"
"github.com/jmoiron/sqlx"
@ -11,31 +11,32 @@ import (
"github.com/rs/zerolog/log"
)
func SetLogLevel(level zerolog.Level) {
zerolog.SetGlobalLevel(level)
}
func Init_testdb(DB_TYPE string, DB_CONNECTION_STRING string) {
cwd, err := os.Getwd()
cwd, err := os.Getwd();
if err != nil {
log.Fatal().Err(err).Msg("Could not get current working directory")
} else {
cwd = cwd + "/"
cwd = cwd + "/";
log.Trace().Msgf("Currect working directory is: %s", cwd)
}
_, err = os.Stat(cwd + DB_CONNECTION_STRING)
_, err = os.Stat(cwd + DB_CONNECTION_STRING)
if err != nil {
log.Debug().Msg("No existing test.db file found")
} else {
log.Debug().Msg("Found existing test.db file. Attempting to delete")
err = os.Remove(cwd + DB_CONNECTION_STRING)
if err != nil {
log.Warn().Err(err).Msg("Failed to delete testing db. Continueing anyways")
} else {
log.Debug().Msg("Deleted test.db file successfully")
}
log.Debug().Msg("Found existing test.db file. Attempting to delete")
err = os.Remove(cwd + DB_CONNECTION_STRING)
if err != nil {
log.Warn().Err(err).Msg("Failed to delete testing db. Continueing anyways")
} else {
log.Debug().Msg("Deleted test.db file successfully")
}
}
db, err := sqlx.Connect(DB_TYPE, DB_CONNECTION_STRING)

24
types/types.go
View file

@ -3,7 +3,7 @@ package types
import (
"database/sql"
"time"
"time"
)
type Transaction struct {
@ -22,33 +22,33 @@ type Account struct {
}
type Bucket struct {
Id int `db:"bkt_id" json:"id"`
DisplayCode sql.NullString `db:"bkt_display_code" json:"DisplayCode"`
DisplayName sql.NullString `db:"bkt_display_name" json:"DisplayName"`
Description sql.NullString `db:"bkt_description" json:"Description"`
Id int `db:"bkt_id" json:"id"`
DisplayCode sql.NullString `db:"bkt_display_code" json:"DisplayCode"`
DisplayName sql.NullString `db:"bkt_display_name" json:"DisplayName"`
Description sql.NullString `db:"bkt_description" json:"Description"`
}
type HumanLegibleTransaction struct {
Id int `db:"trns_id" json:"Id"`
Amount string `db:"trns_amount" json:"Amount"`
Description sql.NullString `db:"trns_description" json:"Description"`
AccountName sql.NullString `db:"account_name" json:"AccountName"`
AccountName sql.NullString `db:"account_name" json:"AccountName"`
Account int `db:"trns_account" json:"Account"`
Bucket sql.NullInt64 `db:"trns_bucket" json:"Bucket"`
BucketName sql.NullString `db:"bucket_name" json:"BucketName"`
BucketName sql.NullString `db:"bucket_name" json:"BucketName"`
Date time.Time `db:"trns_date" json:"TransactionDate"`
}
type QuickTransactionType struct {
DisplayName string
DisplayName string
}
type ChartjsData struct {
Labels []string `json:"labels"`
Data []int `json:"data"`
Labels []string `json:"labels"`
Data []int `json:"data"`
}
type TwoIntsItem struct {
Item1 int
Item2 int
Item1 int
Item2 int
}

85
web/rendering.go
View file

@ -1,7 +1,7 @@
package web
import (
"nickiel.net/recount_server/web/templates"
"nickiel.net/recount_server/web/templates"
"context"
"database/sql"
@ -15,10 +15,11 @@ import (
"nickiel.net/recount_server/types"
)
const DEFAULT_RESULT_COUNT = 20
const DEFAULT_RESULT_COUNT = 20;
func GetTransactionsRows(w http.ResponseWriter, req *http.Request) {
transactions := make([]types.HumanLegibleTransaction, 10)
transactions := make([]types.HumanLegibleTransaction, 10)
// Populate the slice with dummy data (you can replace this with your actual data)
for i := 10; i > 0; i-- {
@ -33,15 +34,15 @@ func GetTransactionsRows(w http.ResponseWriter, req *http.Request) {
Date: time.Now(),
}
transactions[10-i] = transaction
transactions[10 - i] = transaction
}
component := templates.TransactionRows(&transactions)
component.Render(context.Background(), w)
component := templates.TransactionRows(&transactions);
component.Render(context.Background(), w);
}
func GetTransactionQuickAccessEntries(w http.ResponseWriter, req *http.Request) {
transactions := make([]types.HumanLegibleTransaction, 20)
transactions := make([]types.HumanLegibleTransaction, 20)
// Populate the slice with dummy data (you can replace this with your actual data)
for i := 0; i < 20; i++ {
@ -58,50 +59,50 @@ func GetTransactionQuickAccessEntries(w http.ResponseWriter, req *http.Request)
transactions[i] = transaction
}
component := templates.TransactionQuickAccessEntries(&transactions)
component.Render(context.Background(), w)
component := templates.TransactionQuickAccessEntries(&transactions);
component.Render(context.Background(), w);
}
func GetExpenditureChart(w http.ResponseWriter, req *http.Request) {
data_package := struct {
Labels []string `json:"labels"`
IncomeDataset []int `json:"income_data"`
ExpensesDataset []int `json:"expenses_data"`
}{
Labels: []string{"Income", "Expenses"},
IncomeDataset: []int{300, 250},
ExpensesDataset: []int{200, 100},
}
data_package := struct{
Labels []string `json:"labels"`
IncomeDataset []int `json:"income_data"`
ExpensesDataset []int `json:"expenses_data"`
} {
Labels: []string{"Income", "Expenses"},
IncomeDataset: []int {300, 250},
ExpensesDataset: []int {200, 100},
};
json_data, err := json.Marshal(data_package)
if err != nil {
log.Fatal().Err(err).Msg("Could not jsonify data_package")
}
w.Write(json_data)
json_data, err := json.Marshal(data_package);
if err != nil {
log.Fatal().Err(err).Msg("Could not jsonify data_package");
}
w.Write(json_data);
}
func GetAccountSummaries(w http.ResponseWriter, req *http.Request) {
accounts := make([]types.TwoIntsItem, 20)
for i := 0; i < 20; i++ {
accounts[i] = types.TwoIntsItem{Item1: i * 100, Item2: i + 5}
}
component := templates.AccountSummaryRows(&accounts)
component.Render(context.Background(), w)
accounts := make([]types.TwoIntsItem, 20)
for i := 0; i < 20; i++ {
accounts[i] = types.TwoIntsItem {Item1: i*100, Item2: i+5}
}
component := templates.AccountSummaryRows(&accounts)
component.Render(context.Background(), w)
}
func GetAccountSummaryChart(w http.ResponseWriter, req *http.Request) {
accountID := chi.URLParam(req, "accountID")
accountID := chi.URLParam(req, "accountID")
data_package := types.ChartjsData {
Labels: []string {accountID, "1/10", "1/17", "1/24"},
Data: []int {100, 0, -50, 25},
}
data_package := types.ChartjsData{
Labels: []string{accountID, "1/10", "1/17", "1/24"},
Data: []int{100, 0, -50, 25},
}
json_data, err := json.Marshal(data_package)
if err != nil {
log.Fatal().Err(err).Msg("Could not jsonify data_package")
}
w.Write(json_data)
json_data, err := json.Marshal(data_package);
if err != nil {
log.Fatal().Err(err).Msg("Could not jsonify data_package");
}
w.Write(json_data);
}

165
web/router.go
View file

@ -18,10 +18,10 @@ import (
)
type IndexTemplateModel struct {
InnerHtml template.HTML
ActivePage string
NewTransactionPane template.HTML
QuickAccessPane template.HTML
InnerHtml template.HTML
ActivePage string
NewTransactionPane template.HTML
QuickAccessPane template.HTML
}
const TemplateDir = "./web/templates/"
@ -33,110 +33,111 @@ func SetLogLevel(level zerolog.Level) {
func WebRouter() http.Handler {
r := chi.NewRouter()
r.Get("/", getDashboard)
r.Get("/transactions", getTransactionsPage)
r.Get("/transactions", getTransactionsPage)
r.Get("/components/account_summaries", GetAccountSummaries)
r.Get("/components/account_summaries", GetAccountSummaries)
r.Get("/components/data/transaction_table_rows", GetTransactionsRows)
r.Get("/components/data/expenditure_chart", GetExpenditureChart)
r.Get("/components/data/account_summary/{accountID}", GetAccountSummaryChart)
r.Get("/components/data/transaction_quick_access", GetTransactionQuickAccessEntries)
r.Get("/components/data/transaction_table_rows", GetTransactionsRows)
r.Get("/components/data/expenditure_chart", GetExpenditureChart)
r.Get("/components/data/account_summary/{accountID}", GetAccountSummaryChart)
r.Get("/components/data/transaction_quick_access", GetTransactionQuickAccessEntries)
r.Handle("/static/*", http.StripPrefix("/static/", http.FileServer(http.Dir("web/static/"))))
r.Handle("/static/*", http.StripPrefix("/static/", http.FileServer(http.Dir("web/static/"))))
return r
}
//for name, values := range req.Header {
// Loop over all values for the name.
// Loop over all values for the name.
// for _, value := range values {
// log.Debug().Msg(name + " " + value);
// }
// }
func renderFullPage(w http.ResponseWriter, c templ.Component, pageName string) {
var main_component bytes.Buffer
var main_component bytes.Buffer
// Render the provided templ component
err := c.Render(context.Background(), &main_component)
if err != nil {
log.Fatal().Err(err).Msg("Fatal error reading hello template")
}
// Render the provided templ component
err := c.Render(context.Background(), &main_component)
if err != nil {
log.Fatal().Err(err).Msg("Fatal error reading hello template");
}
// get the index template
index, err := template.ParseFiles(TemplateDir + "index.html")
if err != nil {
log.Fatal().
Err(err).
Msg("Fatal error reading index template")
}
// get the index template
index, err := template.ParseFiles(TemplateDir + "index.html")
if err != nil {
log.Fatal().
Err(err).
Msg("Fatal error reading index template")
}
var new_tp bytes.Buffer
quick_trans_types, err := db.GetTransPaneEntries(0)
if err != nil {
log.Fatal().Err(err).Msg("Could not get transaction pane entries for user")
}
user_acnts, err := db.GetUserAccounts(0)
if err != nil {
log.Fatal().Err(err).Msg("Could not get accounts for user")
}
user_bkts, err := db.GetUserBuckets(0)
if err != nil {
log.Fatal().Err(err).Msg("Could not get buckets for user")
}
var new_tp bytes.Buffer;
err = templates.NewTransactionPane(&quick_trans_types, &user_acnts, &user_bkts).Render(context.Background(), &new_tp)
if err != nil {
log.Fatal().Err(err).Msg("Could not render new transaction pane for index")
}
quick_trans_types, err := db.GetTransPaneEntries(0);
if err != nil {
log.Fatal().Err(err).Msg("Could not get transaction pane entries for user");
}
user_acnts, err := db.GetUserAccounts(0);
if err != nil {
log.Fatal().Err(err).Msg("Could not get accounts for user");
}
user_bkts, err := db.GetUserBuckets(0);
if err != nil {
log.Fatal().Err(err).Msg("Could not get buckets for user");
}
var quick_ap bytes.Buffer
err = templates.QuickAccessPane().Render(context.Background(), &quick_ap)
if err != nil {
log.Fatal().Err(err).Msg("Could not render quick access pane for index")
}
err = templates.NewTransactionPane(&quick_trans_types, &user_acnts, &user_bkts).Render(context.Background(), &new_tp);
if err != nil {
log.Fatal().Err(err).Msg("Could not render new transaction pane for index");
}
// Inject the templ component html into the index template
err = index.Execute(w,
IndexTemplateModel{
InnerHtml: template.HTML(main_component.String()),
ActivePage: pageName,
NewTransactionPane: template.HTML(new_tp.String()),
QuickAccessPane: template.HTML(quick_ap.String()),
})
if err != nil {
log.Fatal().Err(err).Msg("Fatal error reading hello template")
}
var quick_ap bytes.Buffer;
err = templates.QuickAccessPane().Render(context.Background(), &quick_ap);
if err != nil {
log.Fatal().Err(err).Msg("Could not render quick access pane for index");
}
// Inject the templ component html into the index template
err = index.Execute(w,
IndexTemplateModel{
InnerHtml: template.HTML(main_component.String()),
ActivePage: pageName,
NewTransactionPane: template.HTML(new_tp.String()),
QuickAccessPane: template.HTML(quick_ap.String()),
});
if err != nil {
log.Fatal().Err(err).Msg("Fatal error reading hello template");
}
}
func getDashboard(w http.ResponseWriter, req *http.Request) {
component := templates.Dashboard()
component := templates.Dashboard();
_, ok := req.Header["Hx-Request"]
if ok {
err := component.Render(context.Background(), w)
if err != nil {
log.Fatal().Err(err).Msg("Couldn't render dashboard templ template")
}
} else {
renderFullPage(w, component, "Dashboard")
}
_, ok := req.Header["Hx-Request"]
if ok {
err := component.Render(context.Background(), w);
if err != nil {
log.Fatal().Err(err).Msg("Couldn't render dashboard templ template");
}
} else {
renderFullPage(w, component, "Dashboard");
}
}
func getTransactionsPage(w http.ResponseWriter, req *http.Request) {
accounts := make([]string, 10)
for i := 0; i < 10; i++ {
accounts[i] = strconv.Itoa(i) + " Account"
}
accounts := make([]string, 10);
for i := 0; i < 10; i++ {
accounts[i] = strconv.Itoa(i) + " Account";
}
component := templates.TransactionsPage(1, &accounts)
_, ok := req.Header["Hx-Request"]
if ok {
err := component.Render(context.Background(), w)
if err != nil {
log.Fatal().Err(err).Msg("Couldn't render transactions templ template")
}
} else {
renderFullPage(w, component, "Transactions")
}
component := templates.TransactionsPage(1, &accounts);
_, ok := req.Header["Hx-Request"]
if ok {
err := component.Render(context.Background(), w);
if err != nil {
log.Fatal().Err(err).Msg("Couldn't render transactions templ template");
}
} else {
renderFullPage(w, component, "Transactions")
}
}

4
web/static/index.js
View file

@ -3,7 +3,7 @@ import {register_dropdowns} from "./dropdowns.js";
import {
open_new_transaction_pane
, close_new_transaction_pane
, register_breakdown_handlers
, add_new_breakdown
} from "./new_transactions.js";
@ -60,12 +60,12 @@ function register_handlers() {
a_el.addEventListener("click", switch_nav);
});
register_dropdowns();
register_breakdown_handlers();
document.querySelector("#open-draft").addEventListener("click", open_drafts);
document.querySelector("#close-transaction-pane").addEventListener("click", close_drafts);
document.querySelector(".input-sizer > input").addEventListener("input", (event) => {
event.target.parentNode.dataset.value = event.target.value
});
document.getElementById("new-breakdown-btn").addEventListener("click", add_new_breakdown);
close_new_transaction_pane();
}

63
web/static/new_transactions.js
View file

@ -48,68 +48,15 @@ function close_new_transaction_pane() {
}
/**
* @param {Event} event
*/
function on_input(event) {
if (event.target.id === "bottom-most-breakdown-input"
|| document.querySelectorAll("#breakdown-tbody input[type='number']:not(#tax-input)").length === 0
) {
add_new_breakdown();
}
let total_input = document.getElementById("amount-entry");
if (event.target.id === "amount-entry") {
let tax_entry = document.getElementById("tax-input");
let tax_rate = document.getElementById("new-transaction-pane").dataset.rcntTaxrate;
if (tax_entry) {
tax_entry.value = (parseFloat(total_input.value) - (parseFloat(total_input.value) / (1 + parseFloat(tax_rate)))).toFixed(2);
}
}
let breakdown_sum = Array.from(document
.querySelectorAll("#breakdown-tbody input[type='number']:not(#bottom-most-breakdown-input)"
)).reduce(function(total, el) {
return total + parseFloat(el.value || 0);
}, 0);
if (total_input.value) {
let value_total = parseFloat(total_input.value);
document.getElementById("bottom-most-breakdown-input").value = (value_total - breakdown_sum).toFixed(2);
} else {
total_input.placeholder = breakdown_sum;
}
}
function add_new_breakdown() {
let input_latest_old = document.getElementById("bottom-most-breakdown-input");
if (input_latest_old) {
input_latest_old.id = "";
}
let source = document.importNode(document.getElementById("breakdown-template-row").content, true);
let input_latest = source.querySelector("input[type='number']");
input_latest.addEventListener("input", on_input);
input_latest.id = "bottom-most-breakdown-input";
let source = document.querySelector("#breakdown-template-row tr").cloneNode(true);
source.style.removeProperty("display");
console.log(source.querySelector("input[type='number']"));
document.getElementById("breakdown-tbody").appendChild(source);
}
function insert_tax() {
if (document.getElementById("tax-input")) return;
let source = document.importNode(document.getElementById("breakdown-template-row").content, true);
source.querySelector("input[type='text']").value = "Tax";
source.querySelector("input[type='number']").id = "tax-input";
function update_breakdown_amount() {
let table_body = document.getElementById("breakdown-tbody");
table_body.insertBefore(source, table_body.firstChild);
// on_input();
}
function register_breakdown_handlers() {
document.getElementById("amount-entry").addEventListener("input", on_input);
document.getElementById("new-breakdown-btn").addEventListener("click", add_new_breakdown);
document.getElementById("tax-breakdown-btn").addEventListener("click", insert_tax);
}
export {open_new_transaction_pane, close_new_transaction_pane, register_breakdown_handlers}
export {open_new_transaction_pane, close_new_transaction_pane, add_new_breakdown}

10
web/templates/new_transaction_pane.templ
View file

@ -5,8 +5,7 @@ import "strconv"
templ NewTransactionPane(entry_types *[]types.QuickTransactionType, acnts *[]types.Account, buckets *[]types.Bucket) {
<template id="breakdown-template-row">
<tr>
<div style="display: none" id="breakdown-template-row">
<td></td>
<td class="my-2">
<select class="ms-2 select border" id="acnt-entry-selection">
@ -17,9 +16,8 @@ templ NewTransactionPane(entry_types *[]types.QuickTransactionType, acnts *[]typ
</td>
<td><input type="text" /></td>
<td><input type="number" step="any" /></td>
</tr>
</template>
<div id="new-transaction-pane" style="opacity: 0;" class="cr-all c-base d-flex-col" data-rcnt-taxrate="0.095">
</div>
<div id="new-transaction-pane" style="opacity: 0;" class="cr-all c-base d-flex-col">
<div class="my-2 d-flex">
<h2 class="ms-5">New Transaction</h2>
<button class="ms-auto me-4 my-auto exit-btn" id="close-transaction-pane">
@ -86,7 +84,7 @@ templ NewTransactionPane(entry_types *[]types.QuickTransactionType, acnts *[]typ
<i class="" data-feather="plus"></i>
<span class="my-auto pe-2">New</span>
</button>
<button class="btn-sm ms-5 my-auto c-green invert" id="tax-breakdown-btn">
<button class="btn-sm ms-5 my-auto c-green invert">
<i class="" data-feather="plus"></i>
<span class="my-auto pe-2">Tax</span>
</button>