Salary Tracker
Salary Tracker is a powerful, self-contained web application designed to empower freelancers, hourly employees, and salaried professionals to meticulously track their work hours, calculateearnings, and manage their attendance records with unparalleled control and ease.
Operating entirely within the user’s browser with no need for a server or internet connection after the initial load, this app uses localStorage to securely save all data on the user’s own device. It combines real-time tracking with robust manual editing and comprehensive reporting, making it an all-in-one solution for personal time and salary management.
Core Functionality
The application is structured around four main views, accessible via a clean, mobile-friendly bottom navigation bar:
- Today (Attendance Tracker): The main dashboard for daily operations. Users can clock in, clock out, and track lunch breaks in real-time. The view provides an instant summary of the current day’s status, work duration, overtime, and estimated earnings.
- Summary (Salary & Reporting): This view offers a high-level financial overview. Users can select any month to see a detailed breakdown of total work hours, overtime accrued, gross salary, deductions (like PF and ESI), and the final net payable salary.
- History (Attendance Log): A chronological log of all past workdays. Each entry provides a detailed summary, including in/out times, lunch duration, work/OT hours, and earnings for that day. This view serves as the central hub for data management.
- Settings (Customization): The control center of the app. Here, users can tailor the calculation logic to their specific employment terms, including setting work hours, pay rates (daily or hourly), overtime multipliers, and deduction percentages.
Key Features & Technical Implementation
This version introduces significant enhancements focused on user control, data management, and reporting.
1. Advanced Record Management (Edit, Add, Delete)
The app moves beyond simple tracking by giving users full control over their historical data.
- Manual Time Change (Edit): Users can now correct mistakes or adjust past entries. In the History view, each record has an “Edit” (✏️) icon. Clicking this opens a modal form pre-populated with that day’s data (Date, In-Time, Out-Time, Lunch Start/End). After making changes, the app re-runs its calculation engine to update work duration, overtime, and salary, ensuring all derived data remains accurate.
- Manual Entry (Bulk Add Simulation): An “+ Add Manual Entry” button in the History view allows users to add records for days they missed tracking. This opens the same modal form, where they can input a complete day’s record. The app intelligently handles default values; for instance, if lunch times are left blank, it automatically deducts the fixedLunchDuration specified in the Settings.
- Individual Record Deletion: A “Delete” (🗑️) icon on each history record provides a straightforward way to remove incorrect or unwanted entries permanently after a confirmation prompt.
2. PNG Summary Downloads
To facilitate sharing or personal archiving, the app integrates the html2canvas JavaScript library to convert key summary information into downloadable PNG images