Unify buttons, cards, headers, toasts, and form treatments across the app so screens feel consistent and are easier to scan on desktop and mobile. Update the broader template set to use the shared UI primitives and responsive spacing patterns introduced in this refresh.
Implement the advertised 'Task tags and categorization' feature that was
listed in docs but missing from the task edit form.
- Add tags column to tasks table (String 500, comma-separated)
- Add tags field to task create and edit forms with validation
- Display tags as badges on task view page and list pages
- Add tags filter to main tasks list and My Tasks with AJAX support
- Include tags in task export (CSV) and data export
- Add tags to Task API (create, update, list with filter)
- Add tag_list property to Task model for convenient parsing
Also: fix(oidc) use domain instead of IP for HTTPS metadata fetch
to fix TLS SNI (Fixes#540)
When creating or editing a task, the description field relied entirely on the
Toast UI Editor from CDN. If that script failed to load (reverse proxy, CSP,
Firefox, or offline), users saw only an empty area and no way to enter a
description.
- Add fallback in create.html and edit.html: when window.toastui.Editor is
unavailable, show the existing textarea (remove 'hidden') and hide the
empty #description_editor div; set textarea min-height for usability.
- CHANGELOG: document fix under [Unreleased] -> Fixed.
- docs/TASK_MANAGEMENT_README: note fallback in Markdown Support section.
- Add '+ Add task' button in Kanban and Gantt headers linking to create
with project (and status for Kanban) pre-filled
- Support 'next' redirect after task create; validate to allowed paths
(/kanban, /gantt, /tasks, /projects) to avoid open redirects
- Honor Initial Status on create: TaskService and form now pass status
through; create form pre-fills status from query and hidden 'next'
- Per-column '+' on Kanban to add task into that column (status pre-set)
- Return user to same Kanban/Gantt view after creating a task
- Add @module_enabled decorator to all module routes (30+ route files)
- Protects routes for inventory, mileage, per_diem, project_templates,
gantt, kanban, weekly_goals, issues, time_entry_templates, reports,
custom_reports, scheduled_reports, invoice_approvals, recurring_invoices,
payments, payment_gateways, budget_alerts, analytics, integrations,
import_export, saved_filters, workflows, time_approvals, activity_feed,
recurring_tasks, team_chat, client_portal, kiosk, and more
- Ensures disabled modules are not accessible to users
- Fix indentation errors in route files
- Remove duplicate module_enabled imports incorrectly placed inside
function bodies in 8 files (import_export, client_portal, custom_reports,
integrations, kiosk, payment_gateways, scheduled_reports, team_chat)
- Move all imports to top of files for proper scope
- Fix Jinja2 template error in admin/settings.html
- Replace invalid loop.parent.loop.last with namespace-based approach
- Use Jinja2 namespace feature to track first item for comma placement
- Fixes UndefinedError when rendering module dependencies and names
- Fix JavaScript syntax error in admin/settings.html
- Remove orphaned closing braces causing parse errors
- Restores toggleCategory function availability
- Update task templates to include module visibility checks
- Add module_enabled checks to task creation and editing templates
This commit completes the module management system, allowing administrators
to globally enable/disable modules, with all routes properly protected and
UI elements conditionally rendered based on module status.
Implement a reusable form validation system that provides immediate,
contextual feedback to users with inline error messages and visual indicators.
Features:
- Real-time validation on input, blur, and submit events
- Inline error and success messages displayed near form fields
- Visual indicators for required vs optional fields (asterisks)
- Subtle validation styling with softer colors and smaller icons
- Phone number validation for tel/phone fields (7-15 digits, optional country code)
- Email, URL, number, date, and pattern validation support
- Debounced validation to reduce performance impact
- Form-level error messages on submit
- Automatic focus management for invalid fields
Technical improvements:
- Prevent duplicate initialization with form and field flags
- Smart message container insertion that respects existing form structure
- Better detection of existing required indicators to prevent duplicates
- Hidden messages take zero space (height: 0) to prevent layout shifts
- Graceful error handling with try-catch blocks
Styling:
- Subtle visual feedback with green-300/red-300 borders (softer than before)
- Smaller validation icons (0.875rem) and reduced padding (2rem)
- Reduced opacity for messages (0.75-0.85) for less intrusive appearance
- Lighter focus shadows (0.08 opacity) for subtle feedback
- Dark mode support with appropriate color adjustments
Applied to all forms:
- Projects (create/edit)
- Clients (create/edit)
- Tasks (create/edit)
- Invoices (create/edit)
- Payments (create/edit)
- Expenses, Mileage, Per Diem forms
- Time Entry (manual entry)
- Weekly Goals
Fixes:
- Prevent duplicate message containers and layout breaks
- Better insertion logic that respects existing help text
- Improved container detection to avoid duplicates
- Fixed required indicator duplication issues
- Enhanced form submission handler management
The validation system automatically initializes on forms with
data-validate-form attribute or novalidate attribute, providing
consistent validation UX across the application.
- Reduce global .btn:hover lift (no translate) and lighten shadow (0 2px 6px @ 0.08); trim overlay to 0.35
- Tone down .btn-primary/.btn-success/.btn-danger hover lift and shadows
- Align inline .btn:hover in templates (tasks view/edit/create, my_tasks, projects create)
- Preserve focus states and dark mode; no functional changes
Files:
- app/static/base.css
- app/templates/tasks/view.html
- app/templates/tasks/edit.html
- app/templates/tasks/create.html
- app/templates/tasks/my_tasks.html
- templates/projects/create.html
Features:
- Added shimmer effects and micro-interactions across all components
- Implemented gradient backgrounds and enhanced visual hierarchy
- Created smooth hover animations with cubic-bezier transitions
- Enhanced markdown editor with professional styling and dark mode support
- Improved task cards with animated progress bars and status badges
- Added responsive design optimizations for mobile devices
Technical improvements:
- Consolidated and optimized CSS across 6 template files
- Implemented consistent design system with unified color palette
- Added hardware-accelerated animations for 60fps performance
- Enhanced accessibility with proper focus states and contrast ratios
- Created modular CSS architecture with clear organization
Dark mode enhancements:
- Complete dark theme support across all modified components
- Smooth theme switching with no visual glitches
- Enhanced contrast and readability in dark mode
- Consistent color palette and gradient adaptations
Responsive design:
- Mobile-optimized touch interactions and spacing
- Unified breakpoint behavior across all pages
- Enhanced button sizes and hover states for mobile
Files modified:
- templates/clients/list.html - Enhanced client list with animated badges and cards
- templates/clients/view.html - Improved client details with shimmer effects
- app/templates/tasks/edit.html - Professional markdown editor styling
- app/templates/tasks/create.html - Enhanced task creation form
- app/templates/tasks/list.html - Modern task cards with animations
- templates/projects/view.html - Consistent project task styling
This commit transforms the TimeTracker into a modern, professional application with exceptional user experience in both light and dark modes.
models/user: add nullable full_name and display_name property (fallback to username)
migrations: add 002_add_user_full_name to introduce users.full_name
auth/profile: show and allow editing full_name; persist on POST
templates:
use display_name across navbar, dashboard greeting, tasks (list/view/edit/my/overdue), projects view, reports (user/project), invoices (creator and generate-from-time), and admin (dashboard/users)
keep username where appropriate (e.g., read-only admin form field)
reports:
aggregate/group by display_name in summaries
CSV export writes display_name instead of username
projects: get_user_totals returns display names when available
main/dashboard: replace inline Jinja in script with data attribute flag to satisfy linter
tasks/view: remove Jinja desc() usage; iterate over pre-ordered time_entries from route and slice to 5
fixes jinja2 UndefinedError: 'desc' is undefined
- Update app/templates/tasks/create.html and app/templates/tasks/edit.html
- Render project options as "Project (Client)" for clearer selection
- No backend changes required
✨ Major UI/UX Improvements:
- Redesign task management interface with modern card-based layout
- Implement responsive design optimized for all devices
- Add hover effects, smooth transitions, and modern animations
- Integrate Bootstrap 5 with custom CSS variables and styling
🎨 Enhanced Task Templates:
- tasks/list.html: Modern header, quick stats, advanced filtering, card grid
- tasks/view.html: Comprehensive task overview with timeline and quick actions
- tasks/create.html: Enhanced form with helpful sidebar and validation
- tasks/edit.html: Improved editing interface with current task context
- tasks/my_tasks.html: Personalized task view with task type indicators
🔧 Technical Improvements:
- Fix CSRF token errors by removing Flask-WTF dependencies
- Convert templates to use regular HTML forms matching route implementation
- Ensure proper form validation and user experience
- Maintain all existing functionality while improving interface
📱 Mobile-First Design:
- Responsive grid layouts that stack properly on mobile
- Touch-friendly buttons and interactions
- Optimized spacing and typography for all screen sizes
- Consistent design system across all task views
📊 Enhanced Features:
- Quick stats overview showing task distribution by status
- Advanced filtering with search, status, priority, project, and assignee
- Priority-based color coding and visual indicators
- Task timeline visualization for better project tracking
- Improved form layouts with icons and helpful guidance
📚 Documentation Updates:
- Update README.md with comprehensive task management feature descriptions
- Add new screenshot section for enhanced task interface
- Document modern UI/UX improvements and technical features
- Include usage examples and workflow descriptions
�� User Experience:
- Clean, professional appearance suitable for business use
- Intuitive navigation and clear visual hierarchy
- Consistent styling with existing application design
- Improved accessibility and usability across all devices
This commit represents a significant enhancement to the task management system,
transforming it from a basic interface to a modern, professional-grade
solution that matches contemporary web application standards.
- Add Task model with full CRUD operations, status tracking, and priority management
- Integrate tasks with existing projects and time entries via foreign key relationships
- Create new Flask routes (/tasks) with admin and user role-based access control
- Implement task status transitions (pending → in_progress → completed → cancelled)
- Add task filtering by status, priority, assignee, and project
- Create responsive Jinja2 templates for task listing, creation, editing, and viewing
- Integrate task selection in timer and manual time entry forms
- Add task management to project dashboards and navigation menus
- Implement automatic database migration system for seamless deployment
- Create migration scripts to add missing tables and columns
- Update startup script to detect and run migrations automatically
- Add comprehensive error handling and validation
- Include full documentation (TASK_MANAGEMENT_README.md)
- Update project structure and main README with new feature details
Database Changes:
- New 'tasks' table with indexes for performance
- Add 'task_id' column to 'time_entries' table
- Automatic migration detection and execution
Technical Implementation:
- SQLAlchemy relationships with proper backrefs and cascading
- Flask-Login integration for role-based access
- Bootstrap 5 responsive UI components
- Font Awesome icons for visual enhancement
- Comprehensive test coverage and error handling
This feature enables users to break down projects into manageable tasks,
track progress, assign work, and maintain better project organization.
Dries Peeters