add total amount in home page

This commit is contained in:
MaysWind
2021-01-10 21:24:02 +08:00
parent a470752d42
commit a5474d0d65
15 changed files with 576 additions and 7 deletions
+3
View File
@@ -185,6 +185,9 @@ func startWebServer(c *cli.Context) error {
apiV1Route.POST("/users/2fa/recovery/regenerate.json", bindApi(api.TwoFactorAuthorizations.TwoFactorRecoveryCodeRegenerateHandler))
}
// Overview
apiV1Route.GET("/overviews/transaction.json", bindApi(api.Overviews.TransactionOverviewHandler))
// Accounts
apiV1Route.GET("/accounts/list.json", bindApi(api.Accounts.AccountListHandler))
apiV1Route.GET("/accounts/get.json", bindApi(api.Accounts.AccountGetHandler))
+103
View File
@@ -0,0 +1,103 @@
package api
import (
"strings"
"github.com/mayswind/lab/pkg/core"
"github.com/mayswind/lab/pkg/errs"
"github.com/mayswind/lab/pkg/log"
"github.com/mayswind/lab/pkg/models"
"github.com/mayswind/lab/pkg/services"
"github.com/mayswind/lab/pkg/utils"
)
// OverviewApi represents overview api
type OverviewApi struct {
transactions *services.TransactionService
}
// Initialize an overview api singleton instance
var (
Overviews = &OverviewApi{
transactions: services.Transactions,
}
)
// TransactionOverviewHandler returns transaction over of current user
func (a *OverviewApi) TransactionOverviewHandler(c *core.Context) (interface{}, *errs.Error) {
var transactionOverviewReq models.TransactionOverviewRequest
err := c.ShouldBindQuery(&transactionOverviewReq)
if err != nil {
log.WarnfWithRequestId(c, "[overviews.TransactionOverviewHandler] parse request failed, because %s", err.Error())
return nil, errs.NewIncompleteOrIncorrectSubmissionError(err)
}
items := strings.Split(transactionOverviewReq.Query, "|")
requestItems := make([]*models.TransactionOverviewRequestItem, 0, len(items))
for i := 0; i < len(items); i++ {
itemValues := strings.Split(items[i], "_")
if len(itemValues) != 3 {
log.WarnfWithRequestId(c, "[overviews.TransactionOverviewHandler] parse request item failed, because its not valid item, content is \"%s\"", items[i])
continue
}
startTime, err := utils.StringToInt64(itemValues[1])
if err != nil {
log.WarnfWithRequestId(c, "[overviews.TransactionOverviewHandler] parse request item start time failed, because %s", err.Error())
continue
}
endTime, err := utils.StringToInt64(itemValues[2])
if err != nil {
log.WarnfWithRequestId(c, "[overviews.TransactionOverviewHandler] parse request item end time failed, because %s", err.Error())
continue
}
requestItem := &models.TransactionOverviewRequestItem{
Name: itemValues[0],
StartTime: startTime,
EndTime: endTime,
}
requestItems = append(requestItems, requestItem)
}
if len(requestItems) < 1 {
log.WarnfWithRequestId(c, "[overviews.TransactionOverviewHandler] parse request failed, because there are no valid items")
return nil, errs.ErrQueryItemsEmpty
}
if len(requestItems) > 5 {
log.WarnfWithRequestId(c, "[overviews.TransactionOverviewHandler] parse request failed, because there are too many items")
return nil, errs.ErrQueryItemsTooMuch
}
uid := c.GetCurrentUid()
overviewResp := make(map[string]*models.TransactionOverviewResponseItem)
for i := 0; i < len(requestItems); i++ {
requestItem := requestItems[i]
incomeAmount, expenseAmount, err := a.transactions.GetTotalIncomeAndExpenseByDateRange(uid, requestItem.StartTime, requestItem.EndTime)
if err != nil {
log.ErrorfWithRequestId(c, "[overviews.TransactionOverviewHandler] failed to get transaction overview item for user \"uid:%d\", because %s", uid, err.Error())
return nil, errs.ErrOperationFailed
}
overviewResp[requestItem.Name] = &models.TransactionOverviewResponseItem{
StartTime: requestItem.StartTime,
EndTime: requestItem.EndTime,
IncomeAmount: incomeAmount,
ExpenseAmount: expenseAmount,
}
}
return overviewResp, nil
}
+1
View File
@@ -27,6 +27,7 @@ const (
NormalSubcategoryCategory = 6
NormalSubcategoryTag = 7
NormalSubcategoryDataManagement = 8
NormalSubcategoryOverview = 9
)
// Error represents the specific error returned to user
+9
View File
@@ -0,0 +1,9 @@
package errs
import "net/http"
// Error codes related to overview
var (
ErrQueryItemsEmpty = NewNormalError(NormalSubcategoryOverview, 0, http.StatusBadRequest, "query items cannot be empty")
ErrQueryItemsTooMuch = NewNormalError(NormalSubcategoryOverview, 1, http.StatusBadRequest, "query items too much")
)
+21
View File
@@ -0,0 +1,21 @@
package models
// TransactionOverviewRequest represents all parameters of transaction overview request
type TransactionOverviewRequest struct {
Query string `form:"query"`
}
// TransactionOverviewRequestItem represents an item of transaction overview request
type TransactionOverviewRequestItem struct {
Name string
StartTime int64
EndTime int64
}
// TransactionOverviewResponseItem represents an item of transaction overview
type TransactionOverviewResponseItem struct {
StartTime int64 `json:"startTime"`
EndTime int64 `json:"endTime"`
IncomeAmount int64 `json:"incomeAmount"`
ExpenseAmount int64 `json:"expenseAmount"`
}
+6
View File
@@ -44,6 +44,12 @@ type Transaction struct {
DeletedUnixTime int64
}
type TransactionTotalAmount struct {
Uid int64
Type TransactionDbType
TotalAmount int64 `xorm:"NOT NULL"`
}
// TransactionCreateRequest represents all parameters of transaction creation request
type TransactionCreateRequest struct {
Type TransactionType `json:"type" binding:"required"`
+32
View File
@@ -922,6 +922,38 @@ func (s *TransactionService) GetRelatedTransferTransaction(originalTransaction *
return relatedTransaction
}
// GetTotalIncomeAndExpenseByDateRange returns the total income and expense amount by specific date range
func (s *TransactionService) GetTotalIncomeAndExpenseByDateRange(uid int64, startUnixTime int64, endUnixTime int64) (int64, int64, error) {
if uid <= 0 {
return 0, 0, errs.ErrUserIdInvalid
}
startTransactionTime := utils.GetMinTransactionTimeFromUnixTime(startUnixTime)
endTransactionTime := utils.GetMaxTransactionTimeFromUnixTime(endUnixTime)
var transactionTotalAmounts []*models.Transaction
err := s.UserDataDB(uid).Select("uid, type, SUM(amount) as amount").Where("uid=? AND deleted=? AND (type=? OR type=?) AND transaction_time>=? AND transaction_time<=?", uid, false, models.TRANSACTION_DB_TYPE_INCOME, models.TRANSACTION_DB_TYPE_EXPENSE, startTransactionTime, endTransactionTime).GroupBy("type").Find(&transactionTotalAmounts)
if err != nil {
return 0, 0, err
}
var incomeAmount int64
var expenseAmount int64
for i := 0; i < len(transactionTotalAmounts); i++ {
transactionTotalAmount := transactionTotalAmounts[i]
if transactionTotalAmount.Type == models.TRANSACTION_DB_TYPE_INCOME {
incomeAmount = transactionTotalAmount.Amount
} else if transactionTotalAmount.Type == models.TRANSACTION_DB_TYPE_EXPENSE {
expenseAmount = transactionTotalAmount.Amount
}
}
return incomeAmount, expenseAmount, nil
}
func (s *TransactionService) isAccountIdValid(transaction *models.Transaction) error {
if transaction.Type == models.TRANSACTION_DB_TYPE_MODIFY_BALANCE {
if transaction.RelatedAccountId != 0 && transaction.RelatedAccountId != transaction.AccountId {
+21
View File
@@ -159,6 +159,27 @@ export default {
password
});
},
getTransactionOverview: ( { today, thisWeek, thisMonth, thisYear } ) => {
const queryParams = [];
if (today) {
queryParams.push(`today_${today.startTime}_${today.endTime}`);
}
if (thisWeek) {
queryParams.push(`thisWeek_${thisWeek.startTime}_${thisWeek.endTime}`);
}
if (thisMonth) {
queryParams.push(`thisMonth_${thisMonth.startTime}_${thisMonth.endTime}`);
}
if (thisYear) {
queryParams.push(`thisYear_${thisYear.startTime}_${thisYear.endTime}`);
}
return axios.get('v1/overviews/transaction.json' + (queryParams.length ? '?query=' + queryParams.join('|') : ''));
},
getAllAccounts: ({ visibleOnly }) => {
return axios.get('v1/accounts/list.json?visible_only=' + !!visibleOnly);
},
+9 -1
View File
@@ -10,7 +10,9 @@ export default {
'format': {
'date': {
'long': 'MM/DD/YYYY',
'yearMonth': 'YYYY-MM'
'year': 'YYYY',
'yearMonth': 'YYYY-M',
'monthDay': 'M/D'
},
'datetime': {
'long': 'MM/DD/YYYY HH:mm:ss',
@@ -362,6 +364,8 @@ export default {
'transaction tag name is empty': 'Transaction tag title is empty',
'transaction tag name already exists': 'Transaction tag title already exists',
'transaction tag is in use and cannot be deleted': 'Transaction tag is in use and it cannot be deleted',
'query items cannot be empty': 'There are no query items',
'query items too much': 'There are too many query items',
},
'parameter': {
'id': 'ID',
@@ -496,6 +500,10 @@ export default {
'Sign Up': 'Sign Up',
'Transaction List': 'Transaction List',
'Account List': 'Account List',
'This Week': 'This Week',
'This Month': 'This Month',
'This Year': 'This Year',
'Unable to get transaction overview': 'Unable to get transaction overview',
'Net assets': 'Net assets',
'Total assets': 'Total assets',
'Total liabilities': 'Total liabilities',
+9 -1
View File
@@ -10,7 +10,9 @@ export default {
'format': {
'date': {
'long': 'YYYY年MM月DD日',
'yearMonth': 'YYYY年MM月'
'year': 'YYYY年',
'yearMonth': 'YYYY年M月',
'monthDay': 'M月D日'
},
'datetime': {
'long': 'YYYY年MM月DD日 HH:mm:ss',
@@ -362,6 +364,8 @@ export default {
'transaction tag name is empty': '交易标签标题不能为空',
'transaction tag name already exists': '交易标签标题已经存在',
'transaction tag is in use and cannot be deleted': '交易标签正在被使用,无法删除',
'query items cannot be empty': '请求项目不能为空',
'query items too much': '请求项目过多',
},
'parameter': {
'id': 'ID',
@@ -496,6 +500,10 @@ export default {
'Sign Up': '注册',
'Transaction List': '交易列表',
'Account List': '账户列表',
'This Week': '本周',
'This Month': '本月',
'This Year': '今年',
'Unable to get transaction overview': '无法获取交易概要',
'Net assets': '净资产',
'Total assets': '总资产',
'Total liabilities': '总负债',
+18
View File
@@ -40,6 +40,9 @@ import {
UPDATE_TAG_VISIBILITY_IN_TRANSACTION_TAG_LIST,
REMOVE_TAG_FROM_TRANSACTION_TAG_LIST,
UPDATE_TRANSACTION_TAG_LIST_INVALID_STATE,
LOAD_TRANSACTION_OVERVIEW,
UPDATE_TRANSACTION_OVERVIEW_INVALID_STATE,
} from './mutations.js';
import {
@@ -79,6 +82,10 @@ import {
clearExchangeRatesFromLocalStorage,
} from './exchangeRates.js';
import {
loadTransactionOverview
} from './overview.js';
import {
loadAllAccounts,
getAccount,
@@ -154,6 +161,8 @@ const stores = {
allTransactionTags: [],
allTransactionTagsMap: {},
transactionTagListStateInvalid: true,
transactionOverview: {},
transactionOverviewStateInvalid: true,
},
getters: {
// user
@@ -706,6 +715,12 @@ const stores = {
[UPDATE_TRANSACTION_TAG_LIST_INVALID_STATE] (state, invalidState) {
state.transactionTagListStateInvalid = invalidState;
},
[LOAD_TRANSACTION_OVERVIEW] (state, transactionOverview) {
state.transactionOverview = transactionOverview;
},
[UPDATE_TRANSACTION_OVERVIEW_INVALID_STATE] (state, invalidState) {
state.transactionOverviewStateInvalid = invalidState;
},
},
actions: {
// user
@@ -734,6 +749,9 @@ const stores = {
// exchange rates
getLatestExchangeRates,
// overview
loadTransactionOverview,
// account
loadAllAccounts,
saveAccount,
+3
View File
@@ -36,3 +36,6 @@ export const CHANGE_TAG_DISPLAY_ORDER_IN_TRANSACTION_TAG_LIST = 'CHANGE_TAG_DISP
export const UPDATE_TAG_VISIBILITY_IN_TRANSACTION_TAG_LIST = 'UPDATE_TAG_VISIBILITY_IN_TRANSACTION_TAG_LIST';
export const REMOVE_TAG_FROM_TRANSACTION_TAG_LIST = 'REMOVE_TAG_FROM_TRANSACTION_TAG_LIST';
export const UPDATE_TRANSACTION_TAG_LIST_INVALID_STATE = 'UPDATE_TRANSACTION_TAG_LIST_INVALID_STATE';
export const LOAD_TRANSACTION_OVERVIEW = 'LOAD_TRANSACTION_OVERVIEW';
export const UPDATE_TRANSACTION_OVERVIEW_INVALID_STATE = 'UPDATE_TRANSACTION_OVERVIEW_INVALID_STATE';
+53
View File
@@ -0,0 +1,53 @@
import services from '../lib/services.js';
import logger from '../lib/logger.js';
import {
LOAD_TRANSACTION_OVERVIEW,
UPDATE_TRANSACTION_OVERVIEW_INVALID_STATE,
} from './mutations.js';
export function loadTransactionOverview(context, { dateRange, force }) {
if (!force && !context.state.transactionOverviewStateInvalid) {
return new Promise((resolve) => {
resolve(context.state.transactionOverview);
});
}
return new Promise((resolve, reject) => {
services.getTransactionOverview({
today: dateRange.today,
thisWeek: dateRange.thisWeek,
thisMonth: dateRange.thisMonth,
thisYear: dateRange.thisYear
}).then(response => {
const data = response.data;
if (!data || !data.success || !data.result) {
reject({ message: 'Unable to get transaction overview' });
return;
}
context.commit(LOAD_TRANSACTION_OVERVIEW, data.result);
if (context.state.transactionOverviewStateInvalid) {
context.commit(UPDATE_TRANSACTION_OVERVIEW_INVALID_STATE, false);
}
resolve(data.result);
}).catch(error => {
if (force) {
logger.error('failed to force load transaction overview', error);
} else {
logger.error('failed to load transaction overview', error);
}
if (error.response && error.response.data && error.response.data.errorMessage) {
reject({ error: error.response.data });
} else if (!error.processed) {
reject({ message: 'Unable to get transaction overview' });
} else {
reject(error);
}
});
});
}
+3
View File
@@ -14,6 +14,7 @@ import {
REMOVE_TRANSACTION_FROM_TRANSACTION_LIST,
UPDATE_TRANSACTION_LIST_INVALID_STATE,
UPDATE_ACCOUNT_LIST_INVALID_STATE,
UPDATE_TRANSACTION_OVERVIEW_INVALID_STATE,
} from './mutations.js';
const emptyTransactionResult = {
@@ -169,6 +170,7 @@ export function saveTransaction(context, { transaction, defaultCurrency }) {
}
context.commit(UPDATE_ACCOUNT_LIST_INVALID_STATE, true);
context.commit(UPDATE_TRANSACTION_OVERVIEW_INVALID_STATE, true);
resolve(data.result);
}).catch(error => {
@@ -216,6 +218,7 @@ export function deleteTransaction(context, { transaction, defaultCurrency, befor
}
context.commit(UPDATE_ACCOUNT_LIST_INVALID_STATE, true);
context.commit(UPDATE_TRANSACTION_OVERVIEW_INVALID_STATE, true);
resolve(data.result);
}).catch(error => {
+285 -5
View File
@@ -1,12 +1,184 @@
<template>
<f7-page>
<f7-page ptr @ptr:refresh="reload" @page:afterin="onPageAfterIn">
<f7-navbar>
<f7-nav-title :title="$t('global.app.title')"></f7-nav-title>
</f7-navbar>
<f7-list media-list class="skeleton-text">
<f7-list-item title="Placeholder"></f7-list-item>
</f7-list>
<f7-card class="skeleton-text" v-if="loading">
<f7-card-content class="no-safe-areas" :padding="false">
<f7-list>
<f7-list-item link="#" chevron-center>
<div slot="media">
<f7-icon f7="calendar_today"></f7-icon>
</div>
<div slot="title" class="no-padding">
<span>Today</span>
</div>
<div slot="footer" class="overview-transaction-footer">
<span>MM/DD/YYYY</span>
</div>
<div slot="after">
<div class="text-color-red">
<small>0.00 USD</small>
</div>
<div class="text-color-teal">
<small>0.00 USD</small>
</div>
</div>
</f7-list-item>
<f7-list-item link="#" chevron-center>
<div slot="media">
<f7-icon f7="calendar"></f7-icon>
</div>
<div slot="title" class="no-padding">
<span>This week</span>
</div>
<div slot="footer" class="overview-transaction-footer">
<span>MM/DD - MM/DD</span>
</div>
<div slot="after">
<div class="text-color-red">
<small>0.00 USD</small>
</div>
<div class="text-color-teal">
<small>0.00 USD</small>
</div>
</div>
</f7-list-item>
<f7-list-item link="#" chevron-center>
<div slot="media">
<f7-icon f7="calendar"></f7-icon>
</div>
<div slot="title" class="no-padding">
<span>This month</span>
</div>
<div slot="footer" class="overview-transaction-footer">
<span>MM/DD - MM/DD</span>
</div>
<div slot="after">
<div class="text-color-red">
<small>0.00 USD</small>
</div>
<div class="text-color-teal">
<small>0.00 USD</small>
</div>
</div>
</f7-list-item>
<f7-list-item link="#" chevron-center>
<div slot="media">
<f7-icon f7="square_stack_3d_up"></f7-icon>
</div>
<div slot="title" class="no-padding">
<span>This year</span>
</div>
<div slot="footer" class="overview-transaction-footer">
<span>YYYY</span>
</div>
<div slot="after">
<div class="text-color-red">
<small>0.00 USD</small>
</div>
<div class="text-color-teal">
<small>0.00 USD</small>
</div>
</div>
</f7-list-item>
</f7-list>
</f7-card-content>
</f7-card>
<f7-card v-else-if="!loading">
<f7-card-content class="no-safe-areas" :padding="false">
<f7-list>
<f7-list-item link="/transaction/list?dateType=1" chevron-center>
<div slot="media">
<f7-icon f7="calendar_today"></f7-icon>
</div>
<div slot="title" class="no-padding">
<span>{{ $t('Today' )}}</span>
</div>
<div slot="footer" class="overview-transaction-footer">
<span>{{ dateRange.today.startTime | moment($t('format.date.long')) }}</span>
</div>
<div slot="after">
<div class="text-color-red">
<small v-if="transactionOverview.today">{{ transactionOverview.today.incomeAmount | currency(defaultCurrency) }}</small>
</div>
<div class="text-color-teal">
<small v-if="transactionOverview.today">{{ transactionOverview.today.expenseAmount | currency(defaultCurrency) }}</small>
</div>
</div>
</f7-list-item>
<f7-list-item link="/transaction/list?dateType=5" chevron-center>
<div slot="media">
<f7-icon f7="calendar"></f7-icon>
</div>
<div slot="title" class="no-padding">
<span>{{ $t('This Week' )}}</span>
</div>
<div slot="footer" class="overview-transaction-footer">
<span>{{ dateRange.thisWeek.startTime | moment($t('format.date.monthDay')) }}</span>
<span>-</span>
<span>{{ dateRange.thisWeek.endTime | moment($t('format.date.monthDay')) }}</span>
</div>
<div slot="after">
<div class="text-color-red">
<small v-if="transactionOverview.thisWeek">{{ transactionOverview.thisWeek.incomeAmount | currency(defaultCurrency) }}</small>
</div>
<div class="text-color-teal">
<small v-if="transactionOverview.thisWeek">{{ transactionOverview.thisWeek.expenseAmount | currency(defaultCurrency) }}</small>
</div>
</div>
</f7-list-item>
<f7-list-item link="/transaction/list?dateType=7" chevron-center>
<div slot="media">
<f7-icon f7="calendar"></f7-icon>
</div>
<div slot="title" class="no-padding">
<span>{{ $t('This Month' )}}</span>
</div>
<div slot="footer" class="overview-transaction-footer">
<span>{{ dateRange.thisMonth.startTime | moment($t('format.date.monthDay')) }}</span>
<span>-</span>
<span>{{ dateRange.thisMonth.endTime | moment($t('format.date.monthDay')) }}</span>
</div>
<div slot="after">
<div class="text-color-red">
<small v-if="transactionOverview.thisMonth">{{ transactionOverview.thisMonth.incomeAmount | currency(defaultCurrency) }}</small>
</div>
<div class="text-color-teal">
<small v-if="transactionOverview.thisMonth">{{ transactionOverview.thisMonth.expenseAmount | currency(defaultCurrency) }}</small>
</div>
</div>
</f7-list-item>
<f7-list-item link="/transaction/list?dateType=9" chevron-center>
<div slot="media">
<f7-icon f7="square_stack_3d_up"></f7-icon>
</div>
<div slot="title" class="no-padding">
<span>{{ $t('This Year' )}}</span>
</div>
<div slot="footer" class="overview-transaction-footer">
<span>{{ dateRange.thisYear.startTime | moment($t('format.date.year')) }}</span>
</div>
<div slot="after">
<div class="text-color-red">
<small v-if="transactionOverview.thisYear">{{ transactionOverview.thisYear.incomeAmount | currency(defaultCurrency) }}</small>
</div>
<div class="text-color-teal">
<small v-if="transactionOverview.thisYear">{{ transactionOverview.thisYear.expenseAmount | currency(defaultCurrency) }}</small>
</div>
</div>
</f7-list-item>
</f7-list>
</f7-card-content>
</f7-card>
<f7-toolbar tabbar labels bottom>
<f7-link href="/transaction/list">
@@ -33,10 +205,118 @@
</template>
<script>
export default {}
export default {
data() {
const self = this;
return {
dateRange: self.getCurrentDateRange(),
loading: true
};
},
computed: {
transactionOverview() {
return this.$store.state.transactionOverview;
},
defaultCurrency() {
return this.$store.getters.currentUserDefaultCurrency || this.$t('default.currency');
}
},
created() {
const self = this;
self.loading = true;
self.$store.dispatch('loadTransactionOverview', {
dateRange: self.dateRange,
force: false
}).then(() => {
self.loading = false;
}).catch(error => {
self.loading = false;
if (!error.processed) {
self.$toast(error.message || error);
}
});
},
methods: {
onPageAfterIn() {
const newDateRange = this.getCurrentDateRange();
if (newDateRange.today.startTime !== this.dateRange.today.startTime ||
newDateRange.today.endTime !== this.dateRange.today.endTime) {
this.dateRange = newDateRange;
}
if (this.$store.state.transactionOverviewStateInvalid && !this.loading) {
this.reload(null);
}
},
reload(done) {
const self = this;
self.$store.dispatch('loadTransactionOverview', {
dateRange: self.dateRange,
force: true
}).then(() => {
if (done) {
done();
}
}).catch(error => {
if (done) {
done();
}
if (!error.processed) {
self.$toast(error.message || error);
}
});
},
getCurrentDateRange() {
const self = this;
return {
today: {
startTime: self.$utilities.getTodayFirstUnixTime(),
endTime: self.$utilities.getTodayLastUnixTime()
},
thisWeek: {
startTime: self.$utilities.getThisWeekFirstUnixTime(),
endTime: self.$utilities.getThisWeekLastUnixTime()
},
thisMonth: {
startTime: self.$utilities.getThisMonthFirstUnixTime(),
endTime: self.$utilities.getThisMonthLastUnixTime()
},
thisYear: {
startTime: self.$utilities.getThisYearFirstUnixTime(),
endTime: self.$utilities.getThisYearLastUnixTime()
}
};
}
}
}
</script>
<style>
.home-overview-card {
background-color: var(--f7-color-yellow);
height: 300px;
}
.theme-dark .home-overview-card {
background-color: var(--f7-theme-color);
}
.overview-transaction-footer {
padding-top: 2px;
}
.overview-transaction-footer > span {
margin-right: 4px;
}
.tabbar-labels i.lab-tarbar-big-icon {
font-size: 42px;
width: 42px;