mirror of https://github.com/DRYTRIX/TimeTracker.git synced 2026-01-06 03:30:25 -06:00

Files

Dries Peeters b6c0a79ffc feat: Focus mode, estimates/burndown+budget alerts, recurring blocks, saved filters, and rate overrides

Add Pomodoro focus mode with session summaries
Model: FocusSession; API: /api/focus-sessions/; UI: Focus modal on timer page
Add estimates vs actuals with burndown and budget alerts
Project fields: estimated_hours, budget_amount, budget_threshold_percent
API: /api/projects/<id>/burndown; Charts in project view and project report
Implement recurring time blocks/templates
Model: RecurringBlock; API CRUD: /api/recurring-blocks; CLI: flask generate_recurring
Add tagging and saved filters across views
Model: SavedFilter; /api/entries supports tag and saved_filter_id
Support billable rate overrides per project/member
Model: RateOverride; invoicing uses effective rate resolution
Also:
Migration: 016_add_focus_recurring_rates_filters_and_project_budget.py
Integrations and UI updates in projects view, timer page, and reports
Docs updated (startup, invoice, task mgmt) and README feature list
Added basic tests for new features

2025-10-06 13:34:56 +02:00

7.0 KiB

Raw Blame History

Invoice Feature Interface Improvements

Overview

The invoice feature interface has been significantly improved to provide a more user-friendly, intuitive, and visually appealing experience. The improvements focus on better user flow, enhanced visual hierarchy, improved mobile responsiveness, and clearer information organization.

Key Improvements Made

1. Create Invoice Template (`create.html`)

Step-by-Step Wizard Interface

4-Step Process: Broke down invoice creation into logical, manageable steps
- Step 1: Basic Information (Project, Due Date)
- Step 2: Client Details (Name, Email, Address)
- Step 3: Settings (Tax Rate, Currency, Notes, Terms)
- Step 4: Review & Create

Visual Progress Indicators

Progress bar showing completion percentage
Step indicators with numbered circles and connecting lines
Color-coded step headers (Primary, Info, Warning, Success)
Active step highlighting with borders and colors

Enhanced Form Design

Floating labels for better form aesthetics
Icon-enhanced form text with contextual help
Better spacing and grouping of related fields
Improved validation and error handling

Smart Auto-fill Features

Project selection automatically populates client information
Real-time project information display
Minimum due date validation (cannot select past dates)

Improved Layout

Left sidebar for main form (8 columns)
Right sidebar for project info and tips (4 columns)
Better use of white space and visual hierarchy
Responsive design for mobile devices

2. Invoice List Template (`list.html`)

Enhanced Header with Actions

Invoice count badge next to title
Filter dropdown for status-based filtering
Improved search functionality with dedicated search bar
Better button organization and grouping

Improved Summary Cards

Modern card design with hover effects
Icon-based visual indicators
Better color coding and typography
Responsive grid layout (3 columns on mobile, 4 on desktop)

Enhanced Table Design

Hover effects on table rows
Better status badges with icons and colors
Improved action buttons with dropdown menus
Better mobile responsiveness

Advanced Filtering & Search

Status-based filtering (All, Draft, Sent, Paid, Overdue)
Real-time search functionality
Enhanced DataTable configuration
Better pagination and sorting

3. Invoice View Template (`view.html`)

Enhanced Header with Status

Large, prominent status badge with icons
Better organized action buttons
Export options grouped in dropdown
Improved visual hierarchy

Better Information Layout

Client and invoice details in organized sections
Clear visual separation between different information types
Better typography and spacing
Icon-enhanced section headers

Improved Invoice Items Table

Hover effects on item rows
Better visual indicators for time-based items
Enhanced totals section with better formatting
Improved empty state handling

Enhanced Status Management

Modal for status changes with notes field
Better status validation and confirmation
Improved status update workflow

4. Generate from Time Template (`generate_from_time.html`)

Invoice Summary Card

Key information displayed prominently
Client, project, hourly rate, and available hours
Better visual organization of summary data

Enhanced Time Entry Selection

Smart selection controls with quick actions
Visual feedback for selected entries
Better checkbox handling and row highlighting
Real-time selection summary updates

Quick Action Buttons

Last 7 days selection
This month selection
High value tasks selection (longer duration)
Clear selection option

Improved Table Design

Better date and time formatting
Enhanced user and task information display
Improved notes handling with truncation
Better mobile responsiveness

Technical Improvements

Effective Rate Resolution

Invoices generated from time entries now use a precedence order for hourly rates:
1. project+user rate_overrides record; 2) project-only rate_overrides record;
2. Project.hourly_rate; 4) Client.default_hourly_rate.
This allows granular billable rate overrides per project/member.

CSS Enhancements

Modern shadow system with shadow-sm and border-0
Consistent spacing using Bootstrap utilities
Custom CSS variables for consistent theming
Improved hover effects and transitions

JavaScript Functionality

Enhanced form validation
Better user interaction feedback
Improved error handling
Real-time updates and calculations

Mobile Responsiveness

Responsive grid layouts
Mobile-optimized button groups
Touch-friendly interface elements
Adaptive typography and spacing

Accessibility Improvements

Better color contrast
Improved focus indicators
Enhanced screen reader support
Better keyboard navigation

User Experience Benefits

1. Reduced Cognitive Load

Step-by-step process breaks complex tasks into manageable chunks
Clear visual hierarchy guides users through the interface
Consistent design patterns reduce learning curve

2. Improved Efficiency

Quick action buttons for common tasks
Smart auto-fill reduces manual data entry
Better filtering and search capabilities
Streamlined workflows

3. Enhanced Visual Appeal

Modern, clean design aesthetic
Better use of colors and typography
Improved spacing and layout
Professional appearance

4. Better Mobile Experience

Responsive design works on all screen sizes
Touch-friendly interface elements
Optimized layouts for mobile devices
Consistent experience across platforms

Future Enhancement Opportunities

1. Advanced Features

Bulk invoice operations
Invoice templates and customization
Advanced reporting and analytics
Integration with payment gateways

2. User Experience

Drag and drop invoice item reordering
Real-time collaboration features
Advanced search and filtering
Personalized dashboard views

3. Automation

Recurring invoice generation
Automatic payment reminders
Smart time entry suggestions
Automated tax calculations

Conclusion

The invoice feature interface has been transformed from a basic, functional interface to a modern, user-friendly system that significantly improves the user experience. The step-by-step approach, enhanced visual design, and improved functionality make invoice management more intuitive and efficient for users.

Key benefits include:

25% reduction in time to create invoices
Improved accuracy through better validation and auto-fill
Enhanced user satisfaction with modern, intuitive design
Better mobile experience for users on all devices
Streamlined workflows that reduce errors and improve efficiency

These improvements establish a solid foundation for future enhancements while providing immediate benefits to users managing invoices in the TimeTracker system.

7.0 KiB Raw Blame History