Earnflo: A Salary Dashboard That Shows Your Earnings in Real Time

Source: Dev.to

💡 The Idea

Most salary calculators show static numbers—monthly salary, hourly rate, or yearly projection. Real life isn’t static: you work, take breaks, sleep, and your earnings accumulate continuously. I wanted to visualize that flow, so I built Earnflo, a small web dashboard that turns a raw salary figure into live, time‑aware income widgets.

Demo:

Earnflo spreads your salary across the effective working time of the current month and visualizes it through various widgets.

📊 What the Dashboard Shows

Instead of a single static number, Earnflo provides time‑aware income metrics, such as:

• earnings this month
• income per working hour
• income per week
• income per working second
• value of a paid day off
• value of a full night of sleep
• projected quarterly / half‑year / yearly income

The core idea is simple: salary is not just a number — it’s a rate flowing through time.

🗓 The Calendar Problem

A naïve “salary ÷ 30 days” calculation is inaccurate because real months contain:

• weekends
• public holidays
• varying numbers of workdays
• different working schedules

Earnflo builds a month model based on:

• workdays per week
• working hours per day
• shift start time
• extra days off
• regional holidays

This produces a realistic effective work calendar. Example snapshot:

• public holidays: 2
• effective workdays: 25
• weekends: 4
• scheduled hours: 250

That data drives all calculations.

Holiday Awareness

Earnflo includes holiday support for several regions:

• Uzbekistan
• United States
• Russia

Public holidays are excluded from the effective work schedule, allowing the dashboard to reflect actual regional work rhythms.

💵 Salary Normalization

People receive pay in various formats:

• hourly
• weekly
• monthly
• yearly

Earnflo normalizes all of them into a single internal monthly representation, from which it can derive:

• hourly rate
• per‑second rate
• per‑week earnings
• calendar‑based projections

🎛 Configurable Work Rhythm

The dashboard adapts instantly to user configuration:

• salary amount
• currency
• pay period
• holiday calendar
• workdays per week
• work hours per day
• shift start time
• extra days off

All widgets update live when settings change.

🇺🇿 Multilingual Support

Earnflo supports three UI languages:

• English
• Russian
• Uzbek

The language can be switched instantly and is persisted locally.

💱 Supported Currencies

Current currency options:

• UZS
• USD
• RUB
• EUR
• GBP

All widgets automatically adapt to the selected currency.

🧑‍💻 Why I Built This

I enjoy building tools that make abstract concepts visible. Time and money are the most abstract resources we handle daily. Connecting them reveals insights such as:

• the value of a weekend
• the value of a vacation day
• the value of one focused working hour

Earnflo aims to make those relationships visible at a glance.

🖥 Tech Stack

Earnflo uses a minimal modern stack:

• React 19
• Vite 7
• Plain CSS

There is no backend; all settings persist locally via localStorage, keeping the app fast and privacy‑friendly.

⚡️ Live Demo

Try it here: (no signup required)

📩 Feedback Welcome

This project started as a small experiment. If you have ideas for:

• new widgets
• additional currencies
• more holiday calendars
• productivity metrics

please share them—I’d love to hear your feedback.