Management Dashboard Features (Graph Display, Data Import)

Purpose of Creating the Demo App

Previously, we had an opportunity to build a dashboard for a manufacturer who sells on multiple e-commerce sites, allowing them to centrally manage their sales status.

As a similar use case, we created a typical household budgeting app that displays income and expenses in graphs and also allows users to search through transaction details.

We implemented the minimum set of features required for a typical household budgeting app and will introduce it here as a demo application.

After the feature overview, we also summarize what work was done and over what period, so we hope this will serve as a reference if you consider asking us to build an app with similar requirements.

Overview of the App We Built

Dashboard

On this screen, users can see at a glance their current balance, income and expenses for the past month, and a comparison with the previous month.

The balance is shown as a graph of its changes over the past month, and by hovering the mouse cursor over the graph, users can check detailed figures.

For expenses, we provide a graph by category so users can see which categories account for a large share of their total spending.

Since the desired period varies by user—one month may feel too long or too short—we provide filters that allow users to narrow it down to one week, extend it to three months, and so on.

The design is set up so that it can be viewed on both PC and smartphone.

Income/Expense Details Screen

After getting a rough overview on the dashboard, users can check individual transactions on the income/expense details screen.

If there are many entries, users can sort by date, category, amount, etc., or use filter functions such as narrowing down by category to review individual transactions.

Bulk Import of Income/Expense Details

We created a CSV import feature to bulk import bank statements, credit card statements, and similar data. (Not all statements can necessarily be imported via CSV, but we provide this as an initial feature.)

Naturally, the CSV format provided differs by company, so users can select which columns contain the date, amount, and other information. After setting the fields for "Date", "Amount", and "Payee" and clicking the register button, they can set the payment method and complete the registration.

Editing Income/Expense Details

In imported CSV files, categories may not be set, so users can edit income/expense details, such as assigning categories from the transaction list screen.

There may also be cases where users want to create a new category for certain transactions, and they can directly create and assign a new category from the income/expense detail edit screen.

Category List Screen

There is a category list screen where users can check which categories are already set. Through this screen, they can change category names, add new categories, or delete categories.

The number of transactions assigned to each category is also displayed, so users can identify categories with no registered transactions and delete them if desired.

Payment Method List Screen

There is a payment method list screen where users can check which payment methods are already set. Its structure is similar to the category list screen, and through this screen users can change payment method names, add new payment methods, or delete payment methods.

However, since a payment method must always be set when registering income/expense details, we restrict deletion of any payment method that already has registered transactions.

Deleting Income/Expense Details

Users can delete income/expense details that were registered by mistake. Multiple income/expense details can also be deleted at once.

Creating Income/Expense Details

We previously introduced the bulk import feature for income/expense details, but it is also possible to enter them one by one.

Work Performed This Time

Here is a summary of the work we carried out. Our company can implement this scope of work in roughly two months.

1. Environment Setup

Authentication service configuration
Database configuration
Test page creation
Program deployment
Access via temporary URL

2. Header UI Creation

PC navigation creation
Smartphone navigation creation

3. Payment Method Screens

List screen
API for retrieval
Creation screen
API for creation
Bulk delete API
Edit screen
API for editing

4. Category Setting Screens

List screen
API for retrieval
Creation screen
API for creation
Bulk delete API
Edit screen
API for editing

5. Income/Expense Detail Screens

List screen
API for retrieval
Filter processing implementation
Creation screen
API for creation
Bulk delete API
Edit screen
API for editing

6. Bulk Detail Import Screen

Screen for bulk import
API for import

7. Aggregation Processing

API for retrieving aggregation results

8. Dashboard Creation

Display processing for balance, income, and expenses
Graph display processing
Filter processing

Future Extensions of This Demo Environment

The features introduced so far have been limited to the minimum required to provide a typical household budgeting app. By adding features like those below, we believe convenience can be further improved and the potential to expand the user base will increase.

Of course, not all of these are necessarily required. When you ask us to build an app, we will discuss which features are needed or not, and whether to include them in the initial release, so that we can help you introduce the app efficiently and as early as possible.

Data Integration with Banks and Credit Card Companies

In a household budgeting app, data integration with banks, credit cards, and other electronic payment services is crucial. To reduce the input burden on users, it is desirable to integrate with as many companies as possible. However, if you handle the procedures and development (API integration or scraping) for each company individually, it will be difficult to scale. Therefore, it is necessary to consider the overall scheme, such as integrating data via intermediary providers that aggregate electronic payment data.

Subscription Features

Once you are able to provide useful features, it becomes necessary to implement subscription functionality and consider monetizing the app itself. By implementing subscription payment processing per account and restricting access to certain features as paid options, this can be realized relatively easily.

However, careful consideration is needed when deciding which features to make paid.

Budget Setting and Notification Features

Among people who keep household budgets, many are concerned about the future, wondering things like “Am I overspending this month?” By aggregating how much spending has accumulated per category and notifying users when they exceed a pre-set budget, we believe the app can provide peace of mind.

Recently, AI accuracy has improved, and it is now possible to automatically set budgets based on a user’s past income/expense details.

Receipt Scanning

One way to address the hassle of entering expense details every time is to provide a receipt scanning feature. By scanning receipts, the date, amount, and payee can be set automatically, leaving only category selection to the user, which should make data entry more efficient.

We have previously verified in-house that using the Google Vision API allows for relatively accurate receipt reading.

Family Sharing

In the current setup, one email address corresponds to one household budget. By introducing a sharing feature, it would be possible to view other people’s household budgets. For example, a small child could use the budgeting app while their parents monitor it.

In Closing

We will be opening a blog article soon that introduces the implementation details.