pwizla / swimo

Swimo, a portmanteau word for Swiss and money. Swimo is like a Swiss friend helping you manage your money. 🇨🇭

Swimo

Swimo, a portmanteau word for Swiss and money.
Swimo is like a Swiss friend helping you manage your money.

Based on the principles of envelope budgeting
Design inspired by my Swiss roots 🇨🇭

Reached release 0.2

Second minor release, still in the MVP phase.

For now, you can:

• Add new transactions
• See the full list of transactions
• Get real-time updated total amounts for account balance and budget envelopes
• See budget envelopes, as well as engaged and remaining amounts for each envelope
• Modify the amount allowed to each budget envelope

NEW in v0.2 :

This release focuses on various improvements to the budget table:

• Envelopes are now editable: click on any amount in the "Envelope" column, edit the amount, and press Enter or click outside of the cell to save it. The table is automatically updated and saved!

• Totals are computed and displayed at the bottom of table.

• Introducing 'Conditional Formatting':
  Some lines are automatically highlighted to draw your attention on certain alert levels:

  • when your expenses reach 90% or more of the envelope budget, the line is highlighted with a light orange tone

  

  • when you're over budget, the line turns to a white on red scheme

  

Please Note: About budget categories
The number of budget categories and their name is not editable in the UI yet. This data is hardcoded in the src/lib/settings.jsx file. Feel free to modify it to your own convenience there, by using the same JSON-based format.

swimo's Issues

Remove hard-coded budget categories from state

… and maybe switch to a settings.jsxconfig, at least as a first approach?

Validate form data

Budget table should display the total budget envelope at the end of 'envelope column'

Transactions in the transactions list should be editable

User story:
A user can modify an item from the TransactionsList table by clicking on it.

UI implementation suggestions:

• minimalistic: click on item -> edit -> onBlur event to save
• more elaborate approach: hovering over an item -> an edit icon appear -> click the icon or item to edit -> press Enter / Esc or click on save / cancel button (green check / red cross)

Refactor form inputs

Avoid code redundancy by creating a FormInput component

Add sepia mode

Flexbox design is flawed

Add category

Better table styling

Redesign JSON architecture to avoid the need for flatBudget

Add night mode

Implement stylized date picker

Envelopes should be editable

Currently hard-coded in app.js

Add interface theming customization

• Red or blue
• Font size ?
• Striped or not
• …

Persistent data (basics)

LocalStorage, JSON… ?

Budget table not displaying if using react-bootstrap-table

react-bootstrap-table apparently requires a flattened object (or array of objects).
It's incompatible with my state.budget architecture.
Maybe just render a simple HTML table?

Clicking on a checkbox select *all* transactions for this date

Will check whether it's a known bug of react-create-table.

Add table sorting

User story :

• A user can click on a table header to sort the corresponding column (toggling between ascending and descending order on each click)