First preview on Financial Management app

In the past month I have been working on a financial management application. Scroll down for the images and videos.

Status

A work in progress.

Technologies

1. C# / .NET MVC4 — The “new way to go” in the .NET environment. MVC4 applies the MVC pattern and uses the Controller as the access-point when a user requests the results from an URL
2. KnockoutJS — A framework on top of jQuery that binds data to HTML objects. KnockoutJS promotes the use of the MVVM (Model, View, Viewmodel) pattern
3. HighCharts — A commercial JavaScript library to draw charts. It is a extensive library with most relevant charts. It works. It is nice to work with.
4. jQuery — For all things in HTML not done with KnockoutJS I use jQuery.
5. MS Entity Framework (tweaked) — A object-oriented approach to data in the .NET environment. I changed some of the scripts generating the C# code to simplify working with JSON / Knockout.

Origins

I built the first version of this application somewhere in 2001 in MS Access. It comprised of the following parts:

1. Taxes / VAT — Each month or each quarter you need to do your taxes
2. Mark transactions — Each transaction needs to be marked. What was it for? How much VAT is related to the transaction? Is it business-related or private?
3. Run reports — How did you do this month? Did you make profit? Loss?
4. Make and manage outstanding invoices — What has been done? How much needs to be paid by the client? Did the client pay? What is still standing open?

Starting points

1. Ease of use — To do all the needed steps for my own financial management should be simple, quick. Within minutes I should be able to produce the data I can use to do my VAT declarations
2. Complete management — The previous app required working with Word to create the invoices and estimates, which then were published to PDF. The totals per invice then had to be inserted manually in the application I had.
3. Valuable feedback — What is really going on? How am I doing related to last year? What is still open on projects?

New version

The new version is completely revised.

1. Web based — Gone with MS Access.
2. Possibility for multiple users — If needed, the application can be used by many people, all working within their own sand box.
3. Graphs — Helping you to see what goes where and if this is to expectation
4. Managing project financials — As financial entities: collecting offers / invoces / reminders, financial transacitons on projects and sub-projects.

Transactions

Transactions and categories

This is the basic overview of a month. The month/period is shown above the list of transactions in the right-hand panel.

Selecting a category

When you select a category, the list in the right-hand side panel is filtered. It will show check boxes allowing you to select / deselect items to add or remove them from a category.

“Undefined”

Not shown here is the “Undefined” category in which all unmarked / “undefined” transactions are collected. Select one of the items from that list and it will be added to the selected Category.

Summaries

The summary is shown in the third panel.

It shows transactions per category and split on the VAT percentage set on the Category.

It splits the total amounts in “credit”, “debit” and “amount of VAT”.

Charts

The pie chart shows the “weight” of the different categories.

It is automatically updated each time the user adds or removes an item to or from a category.

The stacked line chart does something similar, but over time. The data here is quite incomplete and used to test, not representing anything.

See it in action

Best viewed full screen.

Assigning transactions to categories

Clicking around in the lists

Charts

Projects

Contacts

Projects are gathered under “contacts”. The assumption is that a project is always related to a client. Either internal within the organization or to some external client.

Transactions to a project

Like with the categories, transactions can be linked to a project. The principle is exactly the same. Click on a checkbox, check or uncheck the box and it is added to a project or removed from the project.

The idea behind this is that transactions (expenses, income) are in many cases related to specific projects. By adding them to a project, you can track how much is spent and received on that project.

Invoices to a project

Each project can have one or more invoices related to the work done on that project.

The application keeps track on the payments made by clients and the total amount to (still) receive.

Creating an offer / invoice / reminder

The offer / invoice / reminder has three parts: the “front page” showing the client-data, how much is the toal amount and how much of that is fulfilled, allowing you to insert the invoice-number.

Below that area is a summary of all elements in the offer/invoice/reminder you find on the next “page”, “Lines”.

Adding lines is easy as clicking on “add new item”. Calculations are done on the spot, showing totals based on VAT, number of items and price per item.

Contacts within a project

In some (or many) cases your projects might be related to several people. For instance: because it is an event you organize to which each contact needs to pay a separate invoice to you.

To each contact in the project a separate estimate and invoice can be assigned.

See it in action

Best viewed full screen.

Managing projects

Editing a contact

Working with invoices

Posted in: C# MVC4