ChronoTrack

A professional time tracking and invoicing desktop application built with Electron, React, and TypeScript.

Features

⏱️ Advanced Time Tracking

• Start/Stop Recording: Click start to record task name, date, and start time; click stop to record end time
• Multiple Time Entries: Each task stores multiple start/stop sessions as separate time entries
• Resume Tasks: Continue working on existing tasks - each start/stop creates a new time entry
• Live Timer: Real-time display of elapsed time for active tasks (HH:MM:SS format)
• Session History: Expandable dropdown showing all time entries for each task
• Total Time Calculation: Automatically combines all time entries to show total time worked per task
• Automatic Saving: All timing data saves automatically to localStorage

📊 Task Management

• Task List: View all your tasks with total time worked
• Active Task Indicator: Animated pulse indicator shows which task is currently running
• Search & Filter: Search tasks by name with real-time filtering
• Pagination: Browse through tasks with pagination (15 tasks per page)
• Task Details: Expand any task to see individual time entries with start/end times and durations
• Delete Tasks: Remove tasks with confirmation dialog

👤 Profile & Client Management

• User Profile: Store your business details (name, email, phone, address, hourly rate)
• Client Database: Add, edit, and manage multiple clients
• Privacy First: All data stored locally in browser localStorage - never uploaded anywhere
• Persistent Storage: Settings and data persist across sessions

💰 Professional Invoice Generation

• Smart Filtering: Filter tasks by date range for billing periods
• Time Entry Based: Calculates hours only from completed time entries within date range
• Client Selection: Choose from your saved clients
• Invoice Preview: Beautiful preview before downloading
• Dual Export Options:
  • PDF Export: High-quality PDF with professional formatting
  • HTML Export: Editable HTML file for customization
• Auto-Incrementing Invoice Numbers: Never duplicate invoice numbers
• Professional Layout:
  • Your business details and client details side-by-side
  • Itemized task list with start times, durations, rates, and amounts
  • Total hours and total amount calculations
  • Clean, modern design with indigo theme

💾 Data Privacy & Persistence

• 100% Local Storage: All data stored in browser localStorage
• No Cloud Sync: Your tasks, clients, and personal info never leave your computer
• GitHub Safe: .gitignore configured to never commit private data
• Auto-Save: Changes save immediately as you work

Installation

Prerequisites

• Node.js (v18 or higher)
• npm

Setup

1. Clone the repository:

git clone https://github.com/MilanG-Ne/chronotrack.git
cd chronotrack

2. Install dependencies:

npm install

3. Run the application in development mode:

npm run dev

The Electron window will open automatically.

4. Build for production (optional):

npm run build
npm run build:electron

Usage

First-Time Setup

1. Configure Your Profile

   • Click "Settings" tab
   • Fill in your name, email, phone, address
   • Set your hourly rate
   • Click "Save Profile"

2. Add Clients

   • In Settings, click "Add Client"
   • Enter client details (name and email are required)
   • Click "Save Client"

Tracking Time

1. Start a New Task

   • Enter task name in the input field
   • Click "Start Task" button
   • Timer begins automatically and records start time

2. Stop a Task

   • Click "Stop" button on the active task
   • End time is recorded and time entry is saved

3. Resume a Task

   • Type existing task name OR click "Start" button on any task
   • Creates a new time entry for that task
   • Previous time entries are preserved

4. View Time Entries

   • Click the dropdown arrow on any task
   • See all start/stop sessions with timestamps and durations
   • Active entries show live elapsed time

Generating Invoices

1. Navigate to "Generate Invoice" tab
2. Select a client from dropdown
3. (Optional) Set date range to filter tasks
4. Review the invoice summary:
   • Number of tasks included
   • Total hours calculated from time entries
   • Total amount
5. Click "Preview Invoice" to generate preview
6. Choose download format:
   • Download PDF: Professional PDF for client delivery
   • Download HTML: Editable HTML file

Project Structure

ChronoTrack/
├── electron/
│   └── main.ts              # Electron main process
├── src/
│   ├── components/
│   │   ├── TaskTracker.tsx  # Task creation input
│   │   ├── TaskList.tsx     # Task display with time entries
│   │   ├── SettingsPanel.tsx   # User/client management
│   │   └── InvoiceGenerator.tsx  # Invoice preview & export
│   ├── types.ts             # TypeScript interfaces (Task, TimeEntry, etc.)
│   ├── storage.ts           # localStorage utilities
│   ├── App.tsx              # Main application component
│   ├── main.tsx             # React entry point
│   └── index.css            # Tailwind styles
├── package.json
├── tsconfig.json
├── vite.config.ts
└── tailwind.config.js

Technologies Used

• Electron: Cross-platform desktop application
• React 18: Modern UI library with hooks
• TypeScript: Type-safe development
• Vite: Lightning-fast build tool
• Tailwind CSS: Utility-first styling
• Lucide React: Beautiful icon library
• jsPDF: PDF generation
• html2canvas: HTML to image conversion

Development Scripts

• npm run dev - Run in development mode (starts Vite + Electron)
• npm run build - Build the React application
• npm run build:electron - Build for Electron distribution
• npm start - Start the Electron app (after building)

Data Storage

All application data is stored locally in browser localStorage:

• chronotrack_tasks - All tasks with time entries
• chronotrack_user - Your profile information
• chronotrack_clients - Client database
• chronotrack_invoice_counter - Invoice numbering

Privacy Note: This data never leaves your computer and is not included in git commits.

License

MIT License - feel free to use this project for personal or commercial purposes.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues, questions, or suggestions, please open an issue on GitHub.

---

ChronoTrack - Professional Time Tracking Made Simple

View on GitHub