Skip to content

Latest commit

 

History

History
350 lines (288 loc) · 12.8 KB

new-functionalities.md

File metadata and controls

350 lines (288 loc) · 12.8 KB

Click Tracker - New Functionalities & Enhancement Requirements

Application Context

Click Tracker is an Electron-based desktop application built with React that helps users monitor their productivity by tracking time duration, mouse clicks, and keyboard activity across different projects and tasks. The app uses system-level hooks (uiohook-napi) to capture user activity and stores data in a local SQLite database.

Current Tech Stack:

  • Frontend: React 19.2.4 with React Hooks
  • Backend: Electron 40.3.0 with Node.js
  • Database: SQLite3 (stored in %APPDATA%/click-tracker/)
  • Activity Tracking: uiohook-napi 1.5.4
  • Build: Webpack 5.105.1

Current State:

  • Basic project creation and selection ✅
  • Task start/stop with timer ✅
  • Real-time click and keyboard tracking ✅
  • Database persistence ✅
  • Multi-process architecture with centralized uIOhook management ✅

1. PROJECT MANAGEMENT FUNCTIONS

1.1 Create New Project

Current Status: ✅ Implemented
Requirements:

  • User can click "+ New Project" button in the sidebar
  • Modal/form appears with input field for project name and optional description
  • Project is saved to SQLite database with timestamp
  • New project appears in the project list immediately
  • Project is automatically selected after creation

1.2 Delete Existing Project

Current Status: ❌ Not Implemented
Requirements:

  • Add a delete/trash icon button next to each project in the sidebar list
  • Show confirmation dialog before deletion: "Are you sure you want to delete '[Project Name]'? All tasks and activity data will be permanently removed."
  • Provide two options: "Cancel" and "Delete Permanently" (red button)
  • On confirmation:
    • Delete project record from projects table
    • Delete all associated tasks from tasks table (CASCADE)
    • Delete all associated activity events from activity_events table (CASCADE)
    • Remove project from UI immediately
    • If deleted project was selected, show welcome screen
  • Display toast notification: "Project '[Name]' and all associated data deleted successfully"

Database Implementation:

-- Add CASCADE to foreign keys in database.js
-- Tasks deletion will auto-cascade to activity_events
DELETE FROM projects WHERE id = ?;

1.3 Activate/Deactivate Project

Current Status: 🔶 Partial (can select, but no explicit activation state)
Requirements:

  • Add visual "Active" indicator badge on selected project (green dot or "Active" label)
  • Only one project can be active at a time
  • When no project is selected/active:
    • Task management area shows: "Please select a project to manage tasks"
    • All task buttons are disabled/grayed out
    • "+ New Task" button is disabled
  • When project is activated (selected):
    • Task management area becomes fully interactive
    • User can add, delete, start, and stop tasks
    • Task history is visible
  • Store active project ID in app state and persist to localStorage for session recovery

2. TASK MANAGEMENT FUNCTIONS

2.1 Add New Task

Current Status: ✅ Implemented (via input + "Start Task")
Enhancement Requirements:

  • Add separate "+ New Task" button that creates task WITHOUT auto-starting
  • Task appears in task list with status: "Not Started"
  • User must manually click "Start" button to begin tracking
  • Allow pre-creating multiple tasks before starting work

2.2 Delete Existing Task

Current Status: ❌ Not Implemented
Requirements:

  • Add delete icon (trash/X) button in each task row (visible on hover)
  • Cannot delete task while it's actively running (show tooltip: "Stop task before deleting")
  • Show confirmation dialog: "Delete task '[Task Name]'? All recorded activity data will be removed."
  • On confirmation:
    • Delete task from tasks table
    • Delete all associated activity events (CASCADE)
    • Remove from UI immediately
    • Show toast notification: "Task deleted successfully"

2.3 Task Control Buttons (Per Task Row)

Current Status: 🔶 Partial (only available for active task)
Requirements:

Each task row should display these buttons based on task state:

A. Start Button (▶️ Play Icon)

  • Visible when: Task is not running
  • Action:
    • Start timer (00:00:00)
    • Initialize tracking counters (clicks: 0, keys: 0)
    • Start uIOhook listeners globally
    • Record start time to database
    • Button changes to "Stop" button
    • Other tasks' start buttons become disabled (only one task can run at a time)
    • Task row gets highlighted border (e.g., blue glow)
  • Display: Green circular button with white play icon

B. Stop Button (⏹️ Stop Icon)

  • Visible when: Task is currently running
  • Action:
    • Stop timer and freeze display
    • Stop tracking (remove listeners)
    • Calculate total duration
    • Save final stats to database: duration_seconds, end_time
    • Button changes back to "Start" button
    • Remove highlighted border from task row
    • Re-enable other tasks' start buttons
    • Update task totals display
  • Display: Red circular button with white stop icon

C. View Details/Log Button (📊 Chart/List Icon)

  • Visible: Always (for all tasks, even not started)
  • Action:
    • Open modal/expandable panel showing detailed activity log
    • Display session breakdown (see Section 2.4)
    • Show graphs/charts if applicable
  • Display: Blue/gray icon button

D. Delete Button (🗑️ Trash Icon)

  • Visible: On hover over task row
  • Action: Trigger task deletion flow (see 2.2)
  • State: Disabled while task is running
  • Display: Gray icon that turns red on hover

2.4 View Activity Log/Details

Current Status: ❌ Not Implemented
Requirements:

When user clicks "View Details" button on a task, show a modal or expandable panel with:

Session History Table:

Session # Start Time End Time Duration Clicks Keystrokes
1 2026-02-11 09:15:23 2026-02-11 10:45:12 1h 29m 49s 1,247 8,543
2 2026-02-11 14:30:05 2026-02-11 15:00:22 30m 17s 423 2,891
Total - - 2h 0m 6s 1,670 11,434

Additional Information:

  • Average clicks per minute
  • Average keystrokes per minute
  • Most productive time range
  • Activity timeline visualization (optional)
  • Export button to CSV/Excel

Database Query:

  • Group activity events by task session (start/stop pairs)
  • Aggregate clicks and keystrokes per session
  • Calculate time differences

3. UI/UX ENHANCEMENTS

3.1 Task Row Display

Current Status: 🔶 Shows task name and duration only
Enhanced Requirements:

Each task in the task list should display:

Layout:

[Task Name]                    [Duration] [Clicks] [Keystrokes] [▶️] [📊] [🗑️]
────────────────────────────────────────────────────────────────────────────────
Design Mockups                 2h 34m      1,234     5,678      ▶️    📊    🗑️
Write Documentation           45m 12s       423      2,891      ▶️    📊    🗑️
Code Review                   00:15:34      89        456       ⏹️   📊    🗑️  ← (Active/Running)

Visual States:

  1. Not Running: Default background, all stats visible, Start button enabled
  2. Running (Active): Blue glow border, stats updating in real-time, Stop button visible
  3. Hover: Slight highlight, delete button appears
  4. Completed: Checkmark icon, final stats locked

3.2 Real-Time Updates

Current Status: ✅ Timer updates, clicks/keys update
Enhancement:

  • Add smooth counter animations when numbers increment
  • Consider throttling updates to every 1 second for performance
  • Show activity indicator (pulsing dot) when tracking is active

3.3 Project Sidebar Enhancements

Requirements:

  • Add project statistics preview (total tasks, total time)
  • Show "Active" badge on currently selected project
  • Add context menu (right-click) with options:
    • Rename Project
    • Delete Project
    • Export Project Data
    • Duplicate Project
  • Display project creation date on hover

3.4 Empty States

Requirements:

  • No projects: "Get started by creating your first project" with large "+ Create Project" button
  • No tasks in project: "No tasks yet. Add a task to start tracking your productivity."
  • No activity logged: "Start a task to begin tracking your activity"

3.5 Notifications & Feedback

Requirements:

  • Toast notifications for all actions (create, delete, start, stop)
  • Confirmation dialogs for destructive actions (delete)
  • Loading states during database operations
  • Success/error visual feedback

4. DATA PERSISTENCE & INTEGRITY

4.1 Session Management

Requirements:

  • Prevent data loss if app crashes during active tracking
  • Auto-save progress every 30 seconds when task is running
  • On app restart, check for incomplete tasks and offer to:
    • Resume tracking
    • Save and finalize (estimate end time)
    • Discard session

4.2 Database Schema Updates

Current Tables: projects, tasks, activity_events

Proposed Enhancements:

-- Add sessions table for better tracking
CREATE TABLE IF NOT EXISTS task_sessions (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  task_id INTEGER NOT NULL,
  start_time DATETIME NOT NULL,
  end_time DATETIME,
  duration_seconds INTEGER,
  total_clicks INTEGER DEFAULT 0,
  total_keystrokes INTEGER DEFAULT 0,
  status TEXT DEFAULT 'active', -- active, completed, interrupted
  FOREIGN KEY(task_id) REFERENCES tasks(id) ON DELETE CASCADE
);

-- Add soft delete for projects
ALTER TABLE projects ADD COLUMN deleted_at DATETIME NULL;
ALTER TABLE projects ADD COLUMN is_archived BOOLEAN DEFAULT 0;

5. TECHNICAL IMPLEMENTATION PRIORITIES

Phase 1 (Critical - Week 1)

  1. ✅ Fix uIOhook singleton management (COMPLETED)
  2. Add task delete functionality
  3. Add project delete functionality
  4. Implement task state management (can't start multiple tasks)
  5. Add confirmation dialogs

Phase 2 (Important - Week 2)

  1. Implement activity log/details modal
  2. Add session tracking to database
  3. Enhance task row UI with all buttons
  4. Add real-time stats updates
  5. Implement toast notifications

Phase 3 (Nice to Have - Week 3)

  1. Add export to CSV/Excel functionality
  2. Add charts and visualizations
  3. Implement project statistics dashboard
  4. Add keyboard shortcuts (Ctrl+N for new project, Space to start/stop)
  5. Add settings panel (theme, shortcuts, auto-save interval)

6. USER EXPERIENCE FLOW

Typical User Journey:

  1. Open App → Dashboard loads with project list
  2. Create Project → "Website Redesign" project created
  3. Select Project → Project becomes active, task area enabled
  4. Add Tasks → Create 3 tasks: "Research", "Design", "Development"
  5. Start Task → Click play on "Research", timer starts, activity tracked
  6. Work → User works normally, clicks/keys counted automatically
  7. Stop Task → Click stop, stats saved and displayed
  8. View Details → Click log icon to see detailed breakdown
  9. Switch Tasks → Start "Design" task, previous task remains stopped
  10. End Session → Close app, all data persisted

7. ACCESSIBILITY & USABILITY

Requirements:

  • Keyboard navigation support (Tab, Enter, Escape)
  • Screen reader support (ARIA labels)
  • Minimum touch target size: 44x44px for all buttons
  • Color contrast ratio: WCAG AA compliant
  • Focus indicators on all interactive elements
  • Tooltips on hover for all icon buttons

8. PERFORMANCE CONSIDERATIONS

Requirements:

  • Database queries optimized with indexes
  • Debounce activity event writes (batch inserts every 5 seconds)
  • Virtual scrolling for long task lists (100+ tasks)
  • Lazy loading of activity log data
  • Memory-efficient event listener management
  • Maximum 3% CPU usage during idle tracking

NOTES FOR DEVELOPERS

Files to Modify:

  • src/components/ProjectList.js - Add delete button, active state
  • src/components/TaskTracker.js - Enhance with all buttons and states
  • src/services/database.js - Add delete methods, session tracking
  • src/main.js - Add IPC handlers for new functionality
  • src/styles/*.css - Update for new UI elements

Testing Checklist:

  • Can create and delete projects
  • Can create and delete tasks
  • Only one task runs at a time
  • All data persists correctly
  • No data loss on app crash
  • Activity tracking accurate
  • UI responsive and smooth
  • Confirmation dialogs work
  • Toast notifications appear
  • Activity log displays correctly

Known Limitations:

  • System-wide tracking captures ALL activity (not app-specific)
  • Requires elevated permissions on some systems
  • Cannot track activity in virtual machines reliably
  • May need to whitelist in antivirus software