Added the Percentage

[Rustix69]

Description

• Fixes : Show Completion Percentage Next to Filters in Dropdown #177

Added completion percentage display in Project and Tag filter dropdowns to help users quickly track task progress at a glance.

Key Features:

• Displays completion stats in format: {completed}/{total} ({percentage}%)
• Shows percentage for each project/tag directly in the dropdown menu
• Automatically updates when tasks are completed, deleted, or synced
• Performance optimized using useMemo hooks
• Excludes deleted tasks from calculations
• Fully backward compatible

Screenshot

Files Modified:

• frontend/src/components/utils/types.ts - Added FilterStats interface

• frontend/src/components/HomeComponents/Tasks/tasks-utils.ts - Added calculation functions

• frontend/src/components/ui/multiSelect.tsx - Enhanced to display stats

• frontend/src/components/HomeComponents/Tasks/Tasks.tsx - Integrated stats calculation

• Fixes: #(replace_with_the_issue_fixed)

Checklist

• Ran npx prettier --write . (for formatting)
• Ran gofmt -w . (for Go backend) - N/A (no backend changes)
• Ran npm test (for JS/TS testing)
• Added unit tests, if applicable - N/A (feature addition, existing tests pass)
• Verified all tests pass
• Updated documentation, if needed - N/A (UI enhancement, self-explanatory)

Additional Notes

Implementation Details:

• Stats are calculated dynamically using calculateProjectStats() and calculateTagStats() utility functions
• Percentage is rounded to 1 decimal place for precision
• Deleted tasks are excluded from both completed and total counts
• Uses React useMemo for efficient recalculation only when tasks/filters change
• Clean, maintainable code with JSDoc comments
• Zero linter errors
• Successfully builds without warnings (except existing chunk size warning)

[its-me-abhishek]

seems to be too convoluted. the UI elements inside ./ui must remain as - is to Avoid breaking changes. imo.. this feature can be implemented via Tailwind Classes, and a simple Round function inside that