Date picker, calculator, and other shared controls

Date Picker

The Date Picker is a powerful calendar component used whenever you need to select a date in the app—whether setting a transaction date, choosing a report period, or navigating to view transactions on a specific day.

Opening the Date Picker

The Date Picker opens as a panel that slides up from the bottom of the screen. You'll encounter it when:

• Tapping a date field in transaction forms
• Selecting a date range for reports
• Navigating to a specific day in various screens

Navigation Levels

The Date Picker has three viewing levels that you can navigate between:

Years View:

• Shows a grid of 12 years at a time
• Each year tile displays:
  • The year number
  • Total income for that year (in the income color with + prefix)
  • Total expenses for that year (in red with - prefix)
• Use the left and right arrows to move between 12-year groups
• The current year has a special highlighted border
• Future years appear slightly faded
• Tap a year to drill down to the months within that year

Months View:

• Shows all 12 months of the selected year
• The header displays:
  • Navigation arrows to move between years
  • The year number (tap to go back to Years View)
  • Total income and expenses for the year
• Each month tile displays:
  • The month name
  • Total income for that month (in the income color with + prefix)
  • Total expenses for that month (in red with - prefix)
• The current month has a special highlighted border
• Future months appear slightly faded
• Tap a month to drill down to the days within that month
• A "Select Full Year" option may appear at the top to select the entire year as a date range

Days View:

• Shows a traditional calendar grid for the selected month
• The header displays:
  • Navigation arrows to move between months
  • The month and year (tap to go back to Months View)
  • Total income and expenses for the month
• Weekday headers (Mon, Tue, Wed, etc.) appear above the grid
• Each day tile displays:
  • The day number
  • Total income for that day (in the income color with + prefix, if any)
  • Total expenses for that day (in red with - prefix, if any)
• Today's date has a special highlighted border
• The currently selected date has a colored background
• Future days appear slightly faded
• Tap any day to select it and close the picker
• A "Today" or "Select Full Month" button may appear at the top

Quick Actions

• Today Button - Quickly jump to and select today's date
• Select Full Month - Select the entire current month as a date range
• Select Full Year - Select the entire current year as a date range

Visual Indicators

The Date Picker provides helpful visual feedback:

• Income totals show in the income color with a + prefix
• Expense totals show in red with a - prefix
• Currently selected dates have a colored background
• Today has a special border even when not selected
• Future dates appear slightly faded

Number Picker (Calculator)

The Number Picker is a calculator-style keypad that appears whenever you need to enter an amount in Budgetum. It supports basic math operations, making it easy to split bills or calculate totals right where you need them.

Opening the Number Picker

The Number Picker slides up from the bottom when you:

• Tap an amount field in any transaction form
• Enter a budget amount
• Tap a category's planned amount directly on the Budget screen for a quick plan adjustment (only when Quick plan update is on in Budget Display Settings)
• Set a transfer amount
• Enter any monetary value in the app

Display Area

The top section shows:

• Title (optional) - Context about what you're entering (e.g., "Amount")
• Expression history - When performing calculations, shows the full expression (e.g., "50 × 2 =")
• Current value - The main number display, showing your input or calculation result

Tap the display to select the entire number—this makes it easy to replace the current value entirely by simply typing a new number.

Some places can show an extra quick-select action above the keypad. For example, when editing a category's planned amount from the Budget screen, Budgetum can offer the category's actual spent amount as a one-tap value so you can quickly align the plan with reality.

Keypad Layout

The keypad is organized in rows:

Top Row (Functions):

• C (Clear) - Clears the entire input and starts fresh
• % (Percent) - Calculates percentages
• ± (Plus/Minus) - Toggles between positive and negative values (when allowed)
• ÷ (Divide) - Division operation

Number Rows:

• Standard calculator layout with 7, 8, 9 in the first row
• 4, 5, 6 in the second row
• 1, 2, 3 in the third row

Operation Keys:

• × (Multiply) - Multiplication operation
• − (Subtract) - Subtraction operation
• + (Add) - Addition operation

Bottom Row:

• Decimal separator (. or , depending on your regional settings)
• 0 - Zero digit
• ⌫ (Backspace) - Deletes the last digit or cancels the current operation
• ✓ (Confirm) - Confirms the value and closes the picker

Performing Calculations

The Number Picker supports chained calculations:

1. Enter the first number
2. Tap an operation (+, −, ×, ÷)
3. Enter the second number
4. The result preview appears dimmed
5. Tap another operation to continue calculating, or ✓ to confirm

Example: Calculating a tip

• Enter restaurant bill: 50
• Tap × (multiply)
• Enter 0.15 (for 15%)
• See the preview: 7.50
• Tap ✓ to confirm

Using Percentages:

• For addition/subtraction: 100 + 10% = 110 (adds 10% of 100)
• For multiplication/division: 100 × 10% = 10 (multiplies by 0.1)
• Without operation: 50% = 0.5 (divides by 100)

Visual Feedback

• Active operation - The currently active operation button (+, −, ×, ÷) is highlighted
• Selection highlight - When the display is tapped to select, a subtle background indicates selection mode
• Pending calculation - Shows the expression and a dimmed preview of the result

Undo

Press backspace (⌫) to:

• Delete the last digit when entering a number
• Cancel the current operation when one is pending
• Clear the selection when the display is selected

Budget Period Picker

The Budget Period Picker is a full-screen selector used specifically on the Budget screen. Unlike the general Period Picker, it switches the app between monthly budgeting and saved custom budget periods.

Opening the Budget Period Picker

Open it by tapping the current period in the Budget screen header.

Header Toggle

The top bar contains a two-part toggle:

• Month - Standard calendar-month budgeting
• Other Periods - Saved custom budget periods

If the Other Periods tab is active, an Add button appears in the header so you can create a new custom period.

Month Tab

The Month tab uses the date-picker-style month grid:

• Shows monthly income and expense totals
• Lets you switch back to normal month-based budgeting
• Clears the active custom budget period when you choose a month

Other Periods Tab

Custom periods are grouped by status:

• Future - Starts later than today
• Active - Includes today
• Previous - Ended before today

Future and Previous sections can be collapsed. Previous-period totals are loaded when that group is expanded.

Period Cards

Each custom period card can include:

• Name or date range
• Planned badges for income and expenses
• Actual badges for income and expenses
• A trailing balance/remainder
• Selection highlight for the active period
• More menu for additional actions

Card Actions

Tapping a card applies that custom period to the Budget screen.

The more menu or long-press menu can provide:

• Use this period
• Edit
• Delete

Empty State

If no custom periods exist yet, the screen shows a message and a button to create the first one.

Quick Edit on Budget Screen

An Edit button with a calendar icon (tooltip Edit) always appears next to the period name. When a custom period is selected, it opens that period’s editor. When a calendar month is selected, it opens the month editor (optional Budget amount and Income section). See Budget Screen and Custom Budget Periods.

Period Picker

The Period Picker lets you select a date range for filtering transactions, reports, and analytics. It provides both manual date selection and quick preset options.

Appearance

The Period Picker appears as a horizontal bar with:

• Left Arrow (<) - Move to the previous period
• Start Date Box - Tap to set the start date
• Dash separator - Visual separator between dates
• End Date Box - Tap to set the end date
• Right Arrow (>) - Move to the next period
• Dropdown Arrow - Opens quick period options

Manual Date Selection

Tap either date box to open the Date Picker:

• Select a specific date to set as start or end
• Choose "Select Full Month" to set both dates to a complete month
• Choose "Select Full Year" to set both dates to a complete year

Quick Navigation

Use the left and right arrows to shift the period:

• When viewing a complete month, arrows move by one month
• When viewing a complete year, arrows move by one year
• For custom ranges, arrows shift by the period's length

Quick Period Options

Tap the dropdown arrow to see preset periods:

• All Time - From your first transaction to today
• This Month - The current calendar month
• This Quarter - Current 3-month quarter (Jan-Mar, Apr-Jun, Jul-Sep, Oct-Dec)
• This Half - Current 6-month half (Jan-Jun or Jul-Dec)
• This Year - The current calendar year
• Previous Year - Last year (January 1 to December 31)

Each quick option shows the actual date range below its name.

Summary Card

The Summary Card displays financial totals at a glance. You'll find it on budget screens, transaction lists, and detail pages for accounts, categories, and contacts.

Basic Layout

The Summary Card shows three columns:

• Income - Total money received (shown in the income color)
• Expenses - Total money spent (shown in blue or red depending on context)
• Balance - The difference (income minus expenses)

Budget Mode

When viewing budget-related screens, the Summary Card shows both planned and actual amounts:

For each column:

• Planned amount - Your budget target (shown in gray)
• Actual amount - What you've actually spent/received (shown in color)
• Difference - How much you're over or under plan

Progress indicators appear as vertical bars between columns:

• The bar fills up as actual approaches planned
• At the plan, the bar is full. Above the plan, its full length represents the actual total: the planned share keeps its normal color, while the excess is red for expenses or lighter green for income. A thin divider marks the boundary, with no minimum excess size. For example, 500 planned and 1,000 actual gives two equal portions.
• Expense progress uses the primary color for the planned share. The Savings breakdown uses the income color and lighter green surplus, like income.
• In Budget and Edit Plan summaries, progress requires planned values to be enabled and a positive actual amount. A zero or missing plan does not hide progress: expenses show fully red, while income and Savings show fully in the income color, without a divider. This applies to vertical summary bars, single-line bars, and the expanded type bars. Zero or negative actual amounts have no progress fill.
• Actual-only summaries on Transactions, Analytics, and Account screens do not show budget progress bars.
• Summary indicators use the summary’s own planned totals, including the optional category-overspending adjustment in Budget screens. See Summary Card for details.

Single-Line Mode

When only income or only expenses exist, the Summary Card switches to a compact single-line layout:

• Label on the left
• Values on the right
• Progress bar below (when comparing actual to planned)

Expandable Details

Some Summary Cards can expand to show more information:

Expense Breakdown (Budget screens):

• Tap the card to expand
• Shows breakdown by category type: Needs, Wants, Savings
• Each type displays its own planned/actual amounts and percentages
• Tap a type to filter the transaction list by that type
• Tap again to deselect

Account Details (Account screens):

• Tap the card to expand
• Shows additional account-specific information:
  • Income and expenses
  • Incoming and outgoing transfers
  • Balance increases and decreases
  • Opening and closing balances with net change

Visual Indicators

• Income color - Income values and some positive balances
• Primary - Expenses within budget
• Red - Negative balances or expenses exceeding budget
• Progress bars - Fill from bottom to top (vertical) or left to right (horizontal)
• Small "i" icon - Indicates the card can be expanded for more details

Bottom Sheets

Bottom Sheets are panels that slide up from the bottom of the screen to present options, forms, or additional information. They're used extensively throughout Budgetum for focused interactions.

Common Features

All bottom sheets share these characteristics:

• Drag handle - A small bar at the top indicating you can drag to dismiss
• Pull down to close - Swipe down on the sheet to dismiss it
• Tap outside to close - Tap the dimmed area above the sheet to close it
• Safe area - Content stays above the home indicator on modern devices

Types of Bottom Sheets

Options Sheets: Present a list of actions you can take, such as:

• Edit, duplicate, or delete a transaction
• Quick period selection options
• Account action menus

Form Sheets: Contain input fields and controls for:

• Date selection
• Number entry
• Configuration options

Confirmation Sheets: Ask you to confirm an action, particularly for:

• Confirming scheduled transactions
• Managing recurring transactions

Transaction Options Sheet

When you long-press or tap on a transaction, an options sheet appears with:

• Edit - Open the transaction for editing
• Edit receipt - Shown when the transaction belongs to a receipt. Opens that receipt with all of its items
• Duplicate - Create a copy with today's date
• Transform to Receipt - Convert an expense into a multi-item receipt. Hidden when the transaction is already part of a receipt
• Delete - Remove the transaction (with confirmation)

The available options may vary based on the transaction type (regular, transfer, balance adjustment).

Delete Confirmation Dialog

Before permanently deleting items like transactions, accounts, or categories, Budgetum asks you to confirm the action.

Dialog Layout

• Title - Indicates what will be deleted
• Message - Explains the consequences of deletion
• Cancel Button - Closes the dialog without deleting
• Delete Button - Confirms the deletion (shown in red)

When It Appears

Confirmation is required when deleting:

• Transactions
• Accounts
• Categories and sections
• Recurring transaction templates
• Contacts
• Tags
• Receipts

Cascade Deletions

The confirmation message may warn you about related items that will be affected. For example:

• Deleting an account removes all its transactions
• Deleting a category moves its transactions to "Uncategorized"

Recurring Options

When setting up recurring transactions or templates, you use the Recurring Options control to define the repeat pattern.

Enable/Disable Toggle

• Toggle the switch ON to make something recurring
• Toggle OFF to make it a one-time entry

Frequency Options

When enabled, choose from preset frequencies:

• Every day - Repeats daily
• Every week - Repeats weekly on the same day
• Every 2 weeks - Bi-weekly (every 14 days)
• Every 3 weeks - Tri-weekly (every 21 days)
• Every 4 weeks - Every 4 weeks (every 28 days)
• Every month - Monthly on the same date
• Every 2 months - Bi-monthly
• Every 3 months - Quarterly
• Every 6 months - Semi-annually
• Every year - Annually on the same date
• Custom... - Create your own pattern

End Conditions

You can optionally set when the recurrence should stop:

• Never ends - Continues indefinitely
• End by date - Stops after a specific date
• End after count - Stops after a certain number of occurrences

Next Occurrence

For existing recurring templates, you can manually override when the next transaction should be created:

• Tap the "Next on" row to open a date picker
• Select a new date for the next occurrence
• Clear the override to return to automatic calculation

Helper Text

Below the control, helpful text summarizes:

• The repeat pattern in plain language
• When the next occurrence will be
• Any end condition set

Tips for Using Shared Components

1. Learn the gestures - Bottom sheets dismiss with a swipe down; tapping outside also closes most overlays

2. Use the calculator - Don't switch apps to calculate—use the built-in math operations in the Number Picker

3. Check visual indicators - Colors consistently mean the same thing: income color for income, red for over-budget or negative

4. Expand for details - Look for the small info icon on Summary Cards indicating more details are available

5. Use quick period options - The Period Picker's preset options save time for common date ranges

6. Navigate Date Picker levels - Tap the header in the Date Picker to navigate up a level (days → months → years)

7. Preview before confirming - The Number Picker shows calculation results before you confirm

8. Use quick-select values when offered - If a suggested value appears above the keypad, tap it to replace the current number immediately.

9. Read confirmation messages - Delete confirmations explain what else might be affected by the deletion