Commit Graph

7 Commits

Author SHA1 Message Date
Dries Peeters 07186d7b6b feat(web): base-init, PWA, keyboard shortcuts, onboarding, and template updates
- Add base-init.js for shared keyboard/sidebar init; single PWA registration in pwa-enhancements
- Update keyboard-shortcuts, onboarding, enhanced-search, service-worker
- Template updates: base, list pages, dashboard, mileage/gps, timer; fix duplicate IDs and a11y
2026-03-06 15:45:50 +01:00
Dries Peeters 1ebfbf39de refactor: comprehensive code quality, security, and performance improvements
Performance:
- Fix N+1 queries in reports.py with joinedload for TimeEntry.project,
  TimeEntry.user, TimeEntry.task, and Project.client across 6 query locations
- Replace per-task time_entries loops with batch UPDATE queries in tasks.py
- Use efficient subquery for favorite project IDs in projects.py

Architecture:
- Add get_by_id() and get_by_name() methods to ProjectService and ClientService
- Route project/client lookups through service layer in timer.py, projects.py,
  and clients.py instead of direct Model.query calls

Security:
- Add sanitize_input() with length limits to form inputs in clients.py,
  projects.py, timer.py, issues.py, and auth.py
- Add email format validation for client creation
- Warn at startup when SECRET_KEY uses the default value or is too short
  in ProductionConfig
- Replace 7 bare except: pass clauses with specific exception types
  (OSError, IOError, TypeError, ValueError) in admin.py, settings.py,
  and invoice.py

Authorization:
- Migrate all @admin_required decorators to @admin_or_permission_required()
  with granular permissions (manage_roles, manage_kanban, manage_webhooks,
  manage_api_tokens, manage_integrations, access_admin) across permissions.py,
  kanban.py, webhooks.py, and admin.py (28 routes total)

Frontend:
- Remove 40+ console.log debug statements across 18 JS files
- Replace 42 inline onclick/onchange handlers in base.html with delegated
  event listeners using data-dropdown and data-no-propagation attributes
- Migrate 6 inline handlers in time_entries_overview.html to addEventListener
- Extract shared typing detection into typing-utils.js, eliminating 5
  duplicate isTyping() implementations across keyboard shortcut files
- Add missing aria-label attributes to icon-only buttons

Dependencies:
- Migrate from pytz to stdlib zoneinfo (Python 3.9+) across all 6 files
  that used pytz; replace pytz with tzdata in requirements.txt
- Separate dev/test dependencies into requirements-dev.txt
- Configure RotatingFileHandler (10MB, 5 backups) for app and JSON logs

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-06 07:56:23 +01:00
Dries Peeters 13828bfe6a Fix onboarding tour rendering on mobile devices
The onboarding tour was incorrectly rendering on mobile devices (width < 768px), appearing as a small dot in the top-left corner with a dark overlay that blocked app access on the dashboard screen.

Changes:

- Add mobile detection (width <= 768px) in OnboardingManager.init() to prevent tour initialization on mobile devices

- Skip auto-start of tour on mobile in DOMContentLoaded handler

- Mark tour as completed on mobile to prevent future attempts

- Add window resize handler to cancel active tour if window is resized to mobile size

- Add mobile-responsive CSS styles for tooltip (for future use)

- Apply same mobile checks to EnhancedOnboardingManager

The tour is now automatically disabled on mobile devices, allowing users to access the app without the broken overlay blocking them. The tour continues to work normally on desktop devices.

Fixes: Onboarding tour broken layout on mobile (< 768px width)
2025-11-15 07:17:57 +01:00
Dries Peeters d5417501e8 feat: Enhance UI with timer page, projects grid view, invoice filters, and reports improvements
This commit implements comprehensive UI enhancements across multiple pages
with improved user experience, visual feedback, and functionality.

Timer Page (/timer):
- Add dedicated timer page with visual SVG progress ring
- Implement real-time timer display with animated progress indicator
- Add quick project/task selection dropdown with dynamic task loading
- Display recent projects quick access (last 5 projects used in 30 days)
- Add timer duration estimation based on average session duration
- Show today's stats sidebar with total hours and active timer status

Projects List (/projects):
- Add grid/list view toggle with localStorage persistence
- Create project cards with budget and hours progress indicators
- Add quick actions on hover (View, Edit, Favorite) for grid view
- Display project status badges (Active/Inactive/Archived) on cards
- Show client information and billable status on cards
- Implement responsive grid layout (1/2/3 columns based on screen size)

Invoice List (/invoices):
- Add visual status filter buttons with icons (Draft, Sent, Paid, Overdue)
- Add payment status filter dropdown (Unpaid, Partially Paid, Fully Paid, Overpaid)
- Display payment status icons with color-coded badges
- Implement due date highlighting with red border for overdue invoices
- Add quick invoice actions dropdown (View, Edit, Download PDF, Send Email, Delete)
- Enhance invoice status badges with icons for better visual recognition

Reports (/reports):
- Add date range presets (Today, This Week, This Month, This Year)
- Implement comparison view API endpoint for month/year comparisons
- Add export format selection dropdown (CSV, Excel, PDF)
- Create scheduled reports management modal UI
- Display comparison results with current vs previous period metrics
- Add custom date range picker with apply button

Bug Fixes:
- Fix datetime import shadowing issue in reports route causing UnboundLocalError
- Fix invoice template date.today() Jinja template error
- Fix timer route db.case() SQLAlchemy syntax for recent projects ordering
- Fix projects template missing </script> tag causing JavaScript errors
- Fix mileage page date parsing error when start_date/end_date are empty
- Fix budget alerts user_project_ids undefined error for admin users
- Fix skip tour button z-index issue - confirmation dialog now appears above mask

Technical Improvements:
- Add proper error handling for date parsing in mileage route
- Improve z-index management for onboarding tooltip and confirmation dialogs
- Add proper variable initialization in budget alerts route
- Enhance template syntax for overdue date calculation
- Add timedelta import to timer route for date calculations

All features include:
- Responsive design for mobile and desktop
- Dark mode support throughout
- Smooth transitions and animations
- Accessibility considerations
- No linting errors
2025-11-05 11:41:16 +01:00
Dries Peeters 01459f6d3b feat: Implement comprehensive onboarding and enhanced error handling
- Interactive tour system with 13-16 comprehensive steps covering all
  major features
- Tooltip system for complex features (auto-attaches to elements with
  data-tooltip attribute)
- Contextual help buttons on complex features (Kanban, Reports,
  Analytics, Invoices, Time Entry)
- Feature discovery system with visual badges for power features
- Enhanced tour content with keyboard shortcuts, tips, and actionable
  guidance
- Smart element finding with auto-expansion of hidden dropdowns
- Proper tooltip positioning with viewport-aware placement

### Error Handling Features (Section 15)

- User-friendly error messages for all HTTP status codes (400, 401, 403,
  404, 409, 422, 429, 500, 502, 503, 504)
- Retry buttons for failed operations with exponential backoff
- Offline mode indicators with visual queue count display
- Offline operation queue with automatic processing when connection
  restored
- Graceful degradation with feature detection and fallbacks
- Recovery options in error pages (Dashboard, Back, Refresh, Login)
- Enhanced error templates with retry buttons and recovery actions

### Technical Improvements

- Added /api/health endpoint for connection monitoring
- Improved fetch interceptor for automatic error handling
- Network status monitoring with periodic health checks
- localStorage-based queue persistence for offline operations
- Enhanced error handler with recovery option mapping
- Fixed Activity model attribute error (activity_type -> entity_type)

### UI/UX Enhancements

- Improved highlight visibility with better mask gradients
- Optimized onboarding performance (reduced from triple to double
  requestAnimationFrame)
- Fixed tooltip positioning to use viewport coordinates correctly
- Enhanced mask system with proper cutout revealing focused elements
- Better button event handling with event delegation
- Styled keyboard shortcuts (kbd) and emphasized text (strong) in
  tooltips

### Files Changed

- app/static/onboarding.js - Enhanced onboarding system
- app/static/onboarding-enhanced.js - Tooltips, contextual help, feature
  discovery
- app/static/error-handling-enhanced.js - Enhanced error handling
- app/utils/error_handlers.py - User-friendly error messages
- app/routes/api.py - Added /api/health endpoint, fixed Activity error
- app/templates/base.html - Added script includes
- app/templates/errors/*.html - Enhanced error templates with recovery
- tests/test_onboarding.py - Onboarding tests
- tests/test_error_handling.py - Error handling tests

### Testing

- Comprehensive unit tests for onboarding features
- Comprehensive unit tests for error handling
- Smoke tests for file existence and integration
2025-11-05 10:54:55 +01:00
Dries Peeters 20b7401891 feat: Add invoice expenses, enhanced PDF editor with Konva.js, and uploads persistence
Major Features:
- Invoice Expenses: Allow linking billable expenses to invoices with automatic total calculations
  - Add expenses to invoices via "Generate from Time/Costs" workflow
  - Display expenses in invoice view, edit forms, and PDF exports
  - Track expense states (approved, invoiced, reimbursed) with automatic unlinking on invoice deletion
  - Update PDF generator and CSV exports to include expense line items

- Enhanced PDF Invoice Editor: Complete redesign using Konva.js for visual drag-and-drop layout design
  - Add 40+ draggable elements (company info, invoice data, shapes, text, advanced elements)
  - Implement comprehensive properties panel for precise element customization (position, fonts, colors, opacity)
  - Add canvas toolbar with alignment tools, zoom controls, and layer management
  - Support keyboard shortcuts (copy/paste, duplicate, arrow key positioning)
  - Save designs as JSON for editing and generate clean HTML/CSS for rendering
  - Add real-time preview with live data

- Uploads Persistence: Implement Docker volume persistence for user-uploaded files
  - Add app_uploads volume to all Docker Compose configurations
  - Ensure company logos and avatars persist across container rebuilds and restarts
  - Create migration script for existing installations
  - Update directory structure with proper permissions (755 for dirs, 644 for files)

Database & Backend:
- Add invoice_pdf_design_json column to settings table via Alembic migration
- Extend Invoice model with expenses relationship
- Update admin routes for PDF layout designer endpoints
- Enhance invoice routes to handle expense linking/unlinking

Frontend & UI:
- Redesign PDF layout editor template with Konva.js canvas (2484 lines, major overhaul)
- Update invoice edit/view templates to display and manage expenses
- Add expense sections to invoice forms with unlink functionality
- Enhance UI components with keyboard shortcuts support
- Update multiple templates for consistency and accessibility

Testing & Documentation:
- Add comprehensive test suites for invoice expenses, PDF layouts, and uploads persistence
- Create detailed documentation for all new features (5 new docs)
- Include migration guides and troubleshooting sections

Infrastructure:
- Update docker-compose files (main, example, remote, remote-dev, local-test) with uploads volume
- Configure pytest for new test modules
- Add template filters for currency formatting and expense display

This update significantly enhances TimeTracker's invoice management capabilities,
improves the PDF customization experience, and ensures uploaded files persist
reliably across deployments.
2025-10-29 15:03:01 +01:00
Dries Peeters f5c3c3f59f fix: resolve keyboard shortcut conflicts and notification errors
Fixed multiple issues with keyboard shortcuts and browser notifications:

Keyboard Shortcuts:
- Fixed Ctrl+/ not working to focus search input
- Resolved conflict between three event handlers (base.html, commands.js, keyboard-shortcuts-advanced.js)
- Changed inline handler from Ctrl+K to Ctrl+/ to avoid command palette conflict
- Updated search bar UI badge to display Ctrl+/ instead of Ctrl+K
- Removed conflicting ? key handler from commands.js (now uses Shift+? for shortcuts panel)
- Improved key detection to properly handle special characters like / and ?
- Added debug logging for troubleshooting keyboard events

Final keyboard mapping:
- Ctrl+K: Open Command Palette
- Ctrl+/: Focus Search Input
- Shift+?: Show All Keyboard Shortcuts
- Esc: Close Modals/Panels

Notification System:
- Fixed "right-hand side of 'in' should be an object" error in smart-notifications.js
- Changed notification permission request to follow browser security policies
- Permission now checked silently on load, only requested on user interaction
- Added "Enable Notifications" banner in notification center panel
- Fixed service worker sync check to properly verify registration object

Browser Compatibility:
- All fixes respect browser security policies for notification permissions
- Graceful degradation when service worker features unavailable
- Works correctly on Chrome, Firefox, Safari, and Edge

Files modified:
- app/static/enhanced-search.js
- app/static/keyboard-shortcuts-advanced.js
- app/static/smart-notifications.js
- app/templates/base.html
- app/static/commands.js

Closes issues with keyboard shortcuts not responding and browser console errors.
2025-10-20 13:00:39 +02:00