Svelte on its own does not handle any routing. To compensate, I have a small amount of state management. 

The buttons for "enter expense" and "track expenses" will simply update the state of the page to show their respective information. It uses the  {#IF} block in svelte to decide what module is currently shown.

At the top of the page is a header bar. This contains a home button, as well as debug info when it's enabled. The home button simply sets the page number to 0, returning to the main page. 

When entering a receipt, if the receipt has no total then it is considered invalid. This causes the green submit button to be disabled. 

Each item gets its own row, where you can give it a name, cost, quantity and category. The last item cannot be deleted.

Adding items to the receipt is as simple as clicking "add item."

When receipt data is added, it's added to an array as a JSON object. This object is formatted as follows (with example data):

{

  "expenseType": "receipt",

  "storeName": "Example Store",

  "taxRate": 8.5,

  "items": [

    { "name": "Item A", "cost": 3.5, "quantity": 2, "category": "Food" },

    { "name": "Item B", "cost": 6, "quantity": 1, "category": "Personal" }

  ],

  "subtotal": 7.0,

  "total": 7.595,

  "timestamp": 1690000000000

}

When viewing past entries, the user can click on a given entry to reveal its receipt. This is quite literally formatted as a receipt. Only one expense can be expanded at a given time.

Below the receipt, there is an edit button. Clicking that button will bring you back to the logging page with the data already added. From here, you can remove items, add items, change the store name, tax rate, or even delete the expense entirely.