The latest articles on DEV Community by Jasur Yusupov (@jzr-supove). https://dev.to/jzr-supove https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1023914%2F993e2ad4-0c11-4299-a5f6-f4aaace273f5.jpeg https://dev.to/jzr-supove en Jasur Yusupov Sat, 14 Mar 2026 19:05:58 +0000 https://dev.to/jzr-supove/earnflo-a-salary-dashboard-that-shows-your-earnings-in-real-time-50m8 https://dev.to/jzr-supove/earnflo-a-salary-dashboard-that-shows-your-earnings-in-real-time-50m8 <p>Most salary calculators show <strong>static numbers</strong>.<br> Monthly salary.<br> Hourly rate.<br> Maybe yearly projection.<br> But real life doesn’t feel static.</p> <p>You wake up, start working, take breaks, sleep, and your salary is quietly accumulating somewhere in the background.<br> I wanted to <strong>visualize that flow</strong>.</p> <p>So I built <strong>Earnflo</strong>.</p> <p>A small web dashboard that turns a raw salary figure into <strong>live, time-aware income widgets</strong>.</p> <p>Demo: <a href="https://earnflo.jzr.uz" rel="noopener noreferrer">https://earnflo.jzr.uz</a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6uirj4lr7m88y6jgxemb.jpeg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6uirj4lr7m88y6jgxemb.jpeg" alt="Main dashboard: Live counter" width="800" height="446"></a></p> <h2> 💡 The Idea </h2> <p>Most people know their monthly salary.</p> <p>But very few know things like:</p> <ul> <li>how much they earned <strong>today</strong> </li> <li>what one <strong>working second</strong> is worth</li> <li>how much they earn <strong>while sleeping</strong> </li> <li>how much a <strong>paid day off</strong> is worth </li> <li>how their salary spreads across the <strong>actual workdays of the month</strong> </li> </ul> <p>Those numbers become interesting when you <strong>connect salary with time</strong>.</p> <p>Earnflo does exactly that.</p> <p>It spreads your salary across the <strong>effective working time of the current month</strong> and visualizes it through different widgets.</p> <h2> 📊 What the Dashboard Shows </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2mrfr2pqcl8oqf5i7yk0.jpeg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2mrfr2pqcl8oqf5i7yk0.jpeg" alt="Various Dashboards" width="800" height="446"></a></p> <p>Instead of a single salary number, Earnflo produces <strong>time-aware income metrics</strong>.</p> <p>Examples:</p> <ul> <li>earnings this month </li> <li>income per working hour </li> <li>income per week </li> <li>income per working second</li> <li>value of a paid day off </li> <li>value of a full night of sleep </li> <li>projected quarterly / half-year / yearly income</li> </ul> <p>The core idea is simple:</p> <blockquote> <p>salary is not just a number — it's a <strong>rate flowing through time</strong></p> </blockquote> <h3> 🗓 The Calendar Problem </h3> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffha1gz4x3qcdcavgjm8q.jpeg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffha1gz4x3qcdcavgjm8q.jpeg" alt="Calendar UI" width="800" height="446"></a></p> <p>A simple salary ÷ 30 days calculation would be wrong.</p> <p>Real months contain:</p> <ul> <li>weekends</li> <li>public holidays</li> <li>varying numbers of workdays</li> <li>different working schedules</li> </ul> <p>Earnflo solves this by building a <strong>month model</strong> based on:</p> <ul> <li>workdays per week</li> <li>working hours per day</li> <li>shift start time</li> <li>extra days off</li> <li>regional holidays</li> </ul> <p>This produces a realistic <strong>effective work calendar</strong>.</p> <p>Example snapshot:</p> <ul> <li>public holidays: 2</li> <li>effective workdays: 25</li> <li>weekends: 4</li> <li>scheduled hours: 250</li> </ul> <p>That data drives all the calculations.</p> <h3> Holiday Awareness </h3> <p>One interesting part was <strong>holiday support</strong>.</p> <p>Currently supported calendars:</p> <ul> <li>Uzbekistan</li> <li>United States</li> <li>Russia</li> </ul> <p>Public holidays are excluded from the effective work schedule.</p> <p>This allows the dashboard to reflect <strong>actual regional work rhythms</strong>.</p> <h2> 💵 Salary Normalization </h2> <p>People get paid in different ways:</p> <ul> <li>hourly</li> <li>weekly</li> <li>monthly</li> <li>yearly</li> </ul> <p>Earnflo normalizes all of them into a <strong>single internal monthly representation</strong>.</p> <p>Once normalized, it can derive:</p> <ul> <li>hourly rate</li> <li>per-second rate</li> <li>per-week earnings</li> <li>calendar-based projections</li> </ul> <h2> 🎛 Configurable Work Rhythm </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh42kw9kzb5v3onrv8qid.jpeg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh42kw9kzb5v3onrv8qid.jpeg" alt="Control Panel" width="800" height="446"></a></p> <p>The dashboard adapts instantly to user configuration:</p> <ul> <li>salary amount</li> <li>currency</li> <li>pay period</li> <li>holiday calendar</li> <li>workdays per week</li> <li>work hours per day</li> <li>shift start time</li> <li>extra days off</li> </ul> <p>Once configured, everything updates <strong>live</strong>.</p> <h2> 🇺🇿 Multilingual Support </h2> <p>Earnflo supports three languages:</p> <ul> <li>English</li> <li>Russian</li> <li>Uzbek</li> </ul> <p>UI language can be switched instantly and is persisted locally.</p> <h2> 💱 Supported Currencies </h2> <p>Currently supported currencies:</p> <ul> <li>UZS</li> <li>USD</li> <li>RUB</li> <li>EUR</li> <li>GBP</li> </ul> <p>All widgets automatically adapt to the selected currency.</p> <h2> 🧑‍💻 Why I Built This </h2> <p>I like building tools that make <strong>abstract things visible</strong>.</p> <p>Time and money are two of the most abstract resources we deal with every day.</p> <p>When you connect them, interesting insights appear.</p> <p>For example:</p> <ul> <li>the value of a weekend</li> <li>the value of a vacation day</li> <li>the value of one focused working hour</li> </ul> <p>Earnflo tries to make those relationships <strong>visible at a glance</strong>.</p> <h2> 🖥 Tech Stack </h2> <p>Earnflo intentionally uses a <strong>minimal modern stack</strong>.</p> <ul> <li>React 19</li> <li>Vite 7</li> <li>Plain CSS</li> </ul> <p>No backend.<br> All settings persist locally using <strong>localStorage</strong>, which makes the app fast and privacy-friendly.</p> <h2> ⚡️ Live Demo </h2> <p>You can try it here:</p> <p><a href="https://earnflo.jzr.uz" rel="noopener noreferrer">earnflo.jzr.uz</a></p> <p>No signup required.</p> <h2> 📩 Feedback Welcome </h2> <p>This project started as a small experiment.</p> <p>If you have ideas for:</p> <ul> <li>new widgets</li> <li>additional currencies</li> <li>more holiday calendars</li> <li>productivity metrics</li> </ul> <p>I'd love to hear them.</p> saas webdev Jasur Yusupov Thu, 29 May 2025 13:05:13 +0000 https://dev.to/jzr-supove/just-launched-aiogramx-prebuilt-widgets-for-telegram-bots-using-aiogram-open-source-5h75 https://dev.to/jzr-supove/just-launched-aiogramx-prebuilt-widgets-for-telegram-bots-using-aiogram-open-source-5h75 <p>Hey Everyone! 👋</p> <p>I just released an open-source project I’ve been building: <a href="https://github.com/jzr-supove/aiogramx" rel="noopener noreferrer"><strong>AiogramX</strong></a> — a collection of <strong>modular, ready-to-use widgets</strong> for building rich Telegram bot UIs using <a href="https://github.com/aiogram/aiogram" rel="noopener noreferrer">Aiogram</a>.</p> <h2> <strong>🧱 What It Is</strong> </h2> <p>AiogramX simplifies the process of building interactive Telegram bots by giving you clean, high-level components — no more managing raw <code>callback_data</code> or building inline keyboards by hand.</p> <p>It currently includes:</p> <ul> <li>📚 <code>Paginator</code> — page navigation</li> <li>🗓️ <code>Calendar</code> — date selection</li> <li>🧩 <code>CheckboxGroup</code> — multi-select options</li> <li>🕓 <code>TimeSelector</code> — choose hour/minute</li> </ul> <p>Each widget handles both <strong>rendering</strong> and <strong>interaction logic</strong>, so you can focus on user experience — not boilerplate.</p> <h2> <strong>🛠️ More Widgets Coming Soon</strong> </h2> <p>I plan to add more components like dropdowns, multi-step forms, tabs, and toggle switches.<br> If you have ideas, I’d love to hear them — or better yet, contribute!</p> <h2> <strong>🧪 Try It Live</strong> </h2> <p>Check out the <a href="https://t.me/aiogramx_demobot?start=devTo" rel="noopener noreferrer">demo bot</a> on Telegram<br> (The full demo source is in the repo under <code>/demo</code>)</p> <h2> <strong>💡 Why I Built It</strong> </h2> <p>Working with Telegram bots usually means dealing with callback data, inline keyboards, and routing mess. AiogramX gives you <strong>declarative-like building blocks</strong>: drop in a widget, hook a callback, done.</p> <p>Think of it as reusable UI components for Telegram bots — like a mini toolkit for clean user flows.</p> <h2> <strong>👐 Looking for Feedback &amp; Support</strong> </h2> <p>Would love to hear:</p> <ul> <li>Feature suggestions</li> <li>Widget ideas</li> <li>Real-world use cases</li> <li>Bug reports or PRs</li> </ul> <p>If you find it useful, <strong>please give the project a ⭐ on GitHub</strong> — it really helps!</p> <h2> 🔗 <strong>Links</strong> </h2> <ul> <li>GitHub: <a href="https://github.com/jzr-supove/aiogramx" rel="noopener noreferrer">https://github.com/jzr-supove/aiogramx</a> </li> <li>Demo Bot: <a href="https://t.me/aiogramx_demobot?start=devTo" rel="noopener noreferrer">https://t.me/aiogramx_demobot</a> </li> </ul> <p>Thanks for reading! Hope this helps you build better Telegram bots 🙌<br><br> Feedback is super welcome 👇</p>