​

Dashboard Overview

Your Finanzapp dashboard is your financial command center. It provides a comprehensive view of your finances, including income, expenses, budgets, and financial goals.

​

Dashboard Components

The dashboard is designed to give you instant insights into your financial situation. Here’s what you’ll find:

​

Main Chart Visualization

The central feature of your dashboard is the interactive financial chart. The chart displays on the dashboard preview (index.php:154-165) and shows:

• Income trends over time
• Expense patterns
• Budget vs. actual spending
• Monthly comparisons

Chart Interactions:

• Hover over data points to see exact values
• Click on legend items to show/hide specific data series
• View different time periods (weekly, monthly, yearly)

​

Stat Cards

Below the main chart, you’ll find quick-reference stat cards that highlight key metrics.

Income Card

Icon: Blue upward arrowDisplays: Total income for the selected periodExample: “2.540€” (index.php:167-176)Purpose: Quickly see how much money you’ve earned

Expenses Card

Icon: Red downward arrowDisplays: Total expenses for the selected periodExample: “1.825€” (index.php:177-186)Purpose: Monitor your spending at a glance

Balance Card

Calculation: Income minus ExpensesColor-coded: Green for positive balance, red for negativePurpose: See your net financial position

​

Visual Elements

The dashboard includes floating visual elements for an engaging user experience:

• Chart Line Icon: Represents financial analysis (index.php:191-193)
• Wallet Icon: Symbolizes money management (index.php:194-196)
• Piggy Bank Icon: Indicates savings goals (index.php:197-199)

---

​

Navigating Your Dashboard

---

​

Dashboard Customization

Personalize your dashboard to focus on what matters most to you.

​

Time Period Selection

Change the time period displayed on your dashboard:

Available Time Periods

• This Week: Current 7-day period
• This Month: Current calendar month
• This Quarter: Current 3-month quarter
• This Year: Current calendar year
• Custom Range: Select specific start and end dates

To change the time period:

1. Click the time period dropdown in the top-right corner
2. Select your preferred timeframe
3. The dashboard automatically updates with the relevant data

​

Chart Type Selection

Visualize your data in different ways:

​

Widget Configuration

Customize which widgets appear on your dashboard:

---

​

Dashboard Features

​

Quick Add Transaction

Add transactions without leaving the dashboard: Quick Add Fields:

• Transaction type (Income/Expense)
• Amount
• Category
• Date
• Description (optional)

​

Recent Transactions

See your latest financial activity:

• View the 5-10 most recent transactions
• Click on any transaction to view details or edit
• Filter by transaction type

​

Budget Progress Indicators

Monitor your budget compliance:

• Visual progress bars for each budget category
• Color-coded indicators:
  • Green: Under budget
  • Yellow: Approaching limit (80-100%)
  • Red: Over budget

​

Goals Tracker

Track progress toward your financial goals:

• See all active goals
• View completion percentage
• Estimated time to goal completion
• Quick actions to contribute toward goals

---

​

Dashboard Header

The header contains important navigation and user controls.

​

Navigation Menu

Access all Finanzapp features from the header menu (includes/header.php):

• Dashboard: Return to your main dashboard
• Transactions: Manage all transactions
• Budgets: Create and edit budgets
• Goals: Set and track financial goals
• Reports: View detailed financial reports
• Export: Download your data

​

User Profile Menu

Click your avatar or name to access:

User Settings

Access your account configuration page (app/userConfig.php) to:

• Change your profile picture
• Update your name
• Change your password
• Manage notification preferences

Logout

Safely end your session by clicking Logout (app/auth/logout.php).

​

Mobile Menu

On mobile devices, the navigation collapses into a hamburger menu (includes/mobileMenu.php):

1. Tap the menu icon (☰) to open
2. Access all navigation items
3. Tap outside the menu or the X to close

---

​

Dashboard Notifications

Stay informed with real-time notifications:

​

Notification Types

Success Notifications

Background: Green (#00C851)Examples:

• “Transaction added successfully”
• “Budget created”
• “Goal achieved”

Configured in the Notyf notification system used throughout the app.

Error Notifications

Background: Red (#ff4444)Examples:

• “Failed to save transaction”
• “Invalid amount entered”
• “Connection error”

Warning Alerts

Background: Yellow/OrangeExamples:

• “Budget limit reached”
• “Unusual spending detected”
• “Goal deadline approaching”

Info Messages

Background: BlueExamples:

• “Tip: Set budgets to track spending”
• “New feature available”
• “Monthly report ready”

---

​

Dashboard Performance

​

Data Loading

The dashboard uses efficient data loading:

• Initial Load: Core metrics and chart data load first
• Progressive Loading: Additional widgets load as needed
• Caching: Frequently accessed data is cached for faster performance

​

Auto-Refresh

Your dashboard automatically refreshes:

• When you add or edit transactions
• When budgets are updated
• When goals are modified
• Every few minutes to show the latest data

---

​

Dashboard Best Practices

---

​

Troubleshooting

Dashboard Not Loading

Solutions:

• Refresh your browser
• Clear browser cache
• Check your internet connection
• Try logging out and back in

Data Not Updating

Solutions:

• Click the refresh button
• Check if you’re still logged in
• Verify transactions were saved successfully

Chart Not Displaying

Solutions:

• Ensure JavaScript is enabled
• Try a different browser
• Check for browser extensions blocking scripts
• Verify you have transactions for the selected time period

---

​

Related Pages