Improve board task UI #3145
Improve board task UI #3145
Conversation
… controls - Replace separate refresh and columns buttons with single 'Columns & Data' button for table mode - Add comprehensive sorting options: name, ID, created date, progress, task count, group - Implement owner-only column visibility controls for workspace security - Create unified 'View Options' button for cards/groups modes with smart alerts - Add persistent settings with localStorage for user preferences - Include loading states and animations for better UX - Fix TypeScript compilation errors and update ViewSettings interface - Add proper internationalization keys for all new UI elements - Maintain backward compatibility while improving interface consistency Enhanced features: - Sort by IDs as requested, with ascending/descending toggle - Smart filtering with workload imbalance detection - Context-aware options based on current view mode - Drag-and-drop support for groups with visual feedback - Mobile-responsive design with proper touch interactions
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the ✨ Finishing Touches🧪 Generate Unit Tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @Adinorio, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request delivers a substantial upgrade to the task board user interface, transforming it from a basic data table into a dynamic and insightful management tool. By introducing new visual layouts, rich board-specific statistics, and customizable view options, it aims to provide users with a more intuitive and efficient way to monitor and interact with their task boards.
Highlights
- New UI Views for Task Boards: This pull request introduces two entirely new ways to visualize and manage task boards: 'Cards' view and 'Groups' view. These provide a more visual, interactive, and organized experience compared to the traditional table layout.
- Enhanced Board Statistics and Smart Alerts: Each task board now includes comprehensive statistics such as completion rates, active/overdue tasks, priority distribution, and workload analysis per assignee. The UI leverages these stats to display 'Smart Alerts' for urgent tasks, multiple overdue items, or workload imbalances, providing immediate insights into board health.
- Customizable View Settings: A new settings panel has been added, allowing users to dynamically control how task boards are displayed. This includes options for sorting (by name, progress, task count, etc.), managing column visibility in table mode, and overriding smart filters. These preferences are persisted locally for a consistent user experience.
- Improved Data Layer for UI Enrichment: The backend data fetching logic has been significantly enhanced with a new
getBoardStatsfunction. This function retrieves detailed task and list information for each board, calculating the various metrics and smart detection flags that power the new UI features.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
| const enhancedBoards: EnhancedBoard[] = await Promise.all( | ||
| rawData.map(async (board, index) => { | ||
| const boardStats = await getBoardStats(board.id); | ||
|
|
||
| // Sample group assignment based on board name or index | ||
| const groups = ['gaming', 'robotics', 'marketing', 'development', 'design']; | ||
| const groupId = groups[index % groups.length]; | ||
|
|
||
| return { | ||
| ...board, | ||
| href: `/${wsId}/tasks/boards/${board.id}`, | ||
| stats: boardStats, | ||
| groupId, | ||
| }; | ||
| }) | ||
| ); |
There was a problem hiding this comment.
Fetching board statistics introduces an N+1 query problem. Fetching boards and then making a separate DB call (getBoardStats) for each board results in many queries, slowing down page load time. Refactor data fetching to retrieve all board statistics in a single query.
| export const GROUP_COLORS = { | ||
| 'Gaming': '#10b981', // emerald | ||
| 'Robotics': '#3b82f6', // blue | ||
| 'Marketing': '#f59e0b', // amber | ||
| 'Development': '#8b5cf6', // violet | ||
| 'Design': '#ec4899', // pink | ||
| 'Research': '#06b6d4', // cyan | ||
| 'Sales': '#84cc16', // lime | ||
| 'Support': '#f97316', // orange | ||
| 'Finance': '#6366f1', // indigo | ||
| 'HR': '#14b8a6', // teal | ||
| 'Operations': '#ef4444', // red | ||
| 'Strategy': '#64748b', // slate | ||
| 'Default': '#6b7280' // gray | ||
| } as const; |
There was a problem hiding this comment.
Case-sensitivity mismatch between keys in GROUP_COLORS (e.g., 'Gaming') and groupId values in page.tsx (e.g., 'gaming') causes color lookup to fail. Make keys lowercase to ensure correct colors are applied.
| export const GROUP_COLORS = { | |
| 'Gaming': '#10b981', // emerald | |
| 'Robotics': '#3b82f6', // blue | |
| 'Marketing': '#f59e0b', // amber | |
| 'Development': '#8b5cf6', // violet | |
| 'Design': '#ec4899', // pink | |
| 'Research': '#06b6d4', // cyan | |
| 'Sales': '#84cc16', // lime | |
| 'Support': '#f97316', // orange | |
| 'Finance': '#6366f1', // indigo | |
| 'HR': '#14b8a6', // teal | |
| 'Operations': '#ef4444', // red | |
| 'Strategy': '#64748b', // slate | |
| 'Default': '#6b7280' // gray | |
| } as const; | |
| export const GROUP_COLORS = { | |
| 'gaming': '#10b981', // emerald | |
| 'robotics': '#3b82f6', // blue | |
| 'marketing': '#f59e0b', // amber | |
| 'development': '#8b5cf6', // violet | |
| 'design': '#ec4899', // pink | |
| 'research': '#06b6d4', // cyan | |
| 'sales': '#84cc16', // lime | |
| 'support': '#f97316', // orange | |
| 'finance': '#6366f1', // indigo | |
| 'hr': '#14b8a6', // teal | |
| 'operations': '#ef4444', // red | |
| 'strategy': '#64748b', // slate | |
| 'default': '#6b7280' // gray | |
| } as const; |
| // Sample group assignment based on board name or index | ||
| const groups = ['gaming', 'robotics', 'marketing', 'development', 'design']; | ||
| const groupId = groups[index % groups.length]; |
There was a problem hiding this comment.
Group assignment logic is hardcoded and based on the board's index. Replace with a permanent solution, storing board grouping information in the database.
| const [groups, setGroups] = useState<BoardGroup[]>([ | ||
| { id: 'gaming', name: 'Gaming', boards: [], color: GROUP_COLORS.Gaming, order: 1 }, | ||
| { id: 'robotics', name: 'Robotics', boards: [], color: GROUP_COLORS.Robotics, order: 2 }, | ||
| ]); |
There was a problem hiding this comment.
Initial groups are hardcoded. For production, fetch this data from an API or a configuration store.
| <Badge variant="secondary" className="text-xs bg-orange-100 text-orange-800"> | ||
| Overdue | ||
| </Badge> | ||
| )} | ||
| {stats.hasWorkloadImbalance && ( | ||
| <Badge variant="outline" className="text-xs border-blue-200 text-blue-700"> | ||
| Imbalanced | ||
| </Badge> |
There was a problem hiding this comment.
Styling for "Overdue" and "Imbalanced" badges uses hardcoded Tailwind CSS classes. Add overdue and imbalanced variants to the Badge component for maintainability.
| @@ -0,0 +1 @@ | |||
|
|
|||
There was a problem hiding this comment.
This file is empty. If it's no longer needed, remove it.
| const [isHovered, setIsHovered] = useState(false); | ||
|
|
||
| const progressColor = board.stats.completionRate >= 75 ? 'from-emerald-400 to-emerald-600' : | ||
| board.stats.completionRate >= 50 ? 'from-blue-400 to-blue-600' : | ||
| board.stats.completionRate >= 25 ? 'from-yellow-400 to-yellow-600' : 'from-gray-400 to-gray-600'; | ||
|
|
||
| const groupColor = board.groupId && GROUP_COLORS[board.groupId as keyof typeof GROUP_COLORS] | ||
| ? GROUP_COLORS[board.groupId as keyof typeof GROUP_COLORS] | ||
| : GROUP_COLORS.Default; | ||
|
|
||
| return ( | ||
| <Card | ||
| className={cn( | ||
| "group relative overflow-hidden transition-all duration-200", | ||
| "hover:shadow-lg hover:scale-[1.02]", | ||
| "border-l-4 bg-gradient-to-br from-card to-card/95", | ||
| isHovered && "shadow-lg scale-[1.02]" | ||
| )} | ||
| style={{ borderLeftColor: groupColor }} | ||
| onMouseEnter={() => setIsHovered(true)} | ||
| onMouseLeave={() => setIsHovered(false)} |
There was a problem hiding this comment.
isHovered state and onMouseEnter/onMouseLeave handlers are redundant. Achieve the same hover effect using only CSS with Tailwind's group and group-hover utilities.
| <DropdownMenuCheckboxItem | ||
| checked={settings.visibleColumns?.includes('board') ?? true} | ||
| onCheckedChange={(checked) => { | ||
| const columns = settings.visibleColumns || ['board', 'progress', 'tasks', 'status', 'last_updated', 'actions']; | ||
| const newColumns = checked | ||
| ? [...columns.filter(c => c !== 'board'), 'board'] | ||
| : columns.filter(c => c !== 'board'); | ||
| onSettingsChange({ ...settings, visibleColumns: newColumns }); | ||
| }} | ||
| > | ||
| Board Name | ||
| </DropdownMenuCheckboxItem> | ||
| <DropdownMenuCheckboxItem | ||
| checked={settings.visibleColumns?.includes('progress') ?? true} | ||
| onCheckedChange={(checked) => { | ||
| const columns = settings.visibleColumns || ['board', 'progress', 'tasks', 'status', 'last_updated', 'actions']; | ||
| const newColumns = checked | ||
| ? [...columns.filter(c => c !== 'progress'), 'progress'] | ||
| : columns.filter(c => c !== 'progress'); | ||
| onSettingsChange({ ...settings, visibleColumns: newColumns }); | ||
| }} | ||
| > | ||
| Progress | ||
| </DropdownMenuCheckboxItem> | ||
| <DropdownMenuCheckboxItem | ||
| checked={settings.visibleColumns?.includes('tasks') ?? true} | ||
| onCheckedChange={(checked) => { | ||
| const columns = settings.visibleColumns || ['board', 'progress', 'tasks', 'status', 'last_updated', 'actions']; | ||
| const newColumns = checked | ||
| ? [...columns.filter(c => c !== 'tasks'), 'tasks'] | ||
| : columns.filter(c => c !== 'tasks'); | ||
| onSettingsChange({ ...settings, visibleColumns: newColumns }); | ||
| }} | ||
| > | ||
| Tasks | ||
| </DropdownMenuCheckboxItem> | ||
| <DropdownMenuCheckboxItem | ||
| checked={settings.visibleColumns?.includes('status') ?? true} | ||
| onCheckedChange={(checked) => { | ||
| const columns = settings.visibleColumns || ['board', 'progress', 'tasks', 'status', 'last_updated', 'actions']; | ||
| const newColumns = checked | ||
| ? [...columns.filter(c => c !== 'status'), 'status'] | ||
| : columns.filter(c => c !== 'status'); | ||
| onSettingsChange({ ...settings, visibleColumns: newColumns }); | ||
| }} | ||
| > | ||
| Status | ||
| </DropdownMenuCheckboxItem> | ||
| <DropdownMenuCheckboxItem | ||
| checked={settings.visibleColumns?.includes('last_updated') ?? true} | ||
| onCheckedChange={(checked) => { | ||
| const columns = settings.visibleColumns || ['board', 'progress', 'tasks', 'status', 'last_updated', 'actions']; | ||
| const newColumns = checked | ||
| ? [...columns.filter(c => c !== 'last_updated'), 'last_updated'] | ||
| : columns.filter(c => c !== 'last_updated'); | ||
| onSettingsChange({ ...settings, visibleColumns: newColumns }); | ||
| }} | ||
| > | ||
| Last Updated | ||
| </DropdownMenuCheckboxItem> | ||
| <DropdownMenuCheckboxItem | ||
| checked={settings.visibleColumns?.includes('actions') ?? true} | ||
| onCheckedChange={(checked) => { | ||
| const columns = settings.visibleColumns || ['board', 'progress', 'tasks', 'status', 'last_updated', 'actions']; | ||
| const newColumns = checked | ||
| ? [...columns.filter(c => c !== 'actions'), 'actions'] | ||
| : columns.filter(c => c !== 'actions'); | ||
| onSettingsChange({ ...settings, visibleColumns: newColumns }); | ||
| }} | ||
| > | ||
| Actions | ||
| </DropdownMenuCheckboxItem> |
There was a problem hiding this comment.
Logic for handling column visibility changes is duplicated for each checkbox item. Refactor this into a single handler function that accepts the columnId and checked state as arguments.
| const handleRefresh = async () => { | ||
| // Trigger a page refresh or data refetch | ||
| window.location.reload(); | ||
| }; |
There was a problem hiding this comment.
Using window.location.reload() for a refresh provides a poor user experience. Use router.refresh() from next/navigation for a smoother refresh.
const handleRefresh = async () => {
// Trigger a data refetch using Next.js's built-in router
router.refresh();
};| {settings.viewMode === 'table' && ( | ||
| <div className="flex items-center gap-2"> | ||
| <Button | ||
| variant="outline" | ||
| size="sm" | ||
| onClick={handleRefresh} | ||
| className="flex items-center gap-2" | ||
| > | ||
| <RefreshCw className="h-4 w-4" /> | ||
| Refresh | ||
| </Button> | ||
|
|
||
| <Button | ||
| variant="outline" | ||
| size="sm" | ||
| className="flex items-center gap-2" | ||
| > | ||
| <Columns className="h-4 w-4" /> | ||
| Columns | ||
| </Button> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
This block of controls for the table view appears to be redundant. The ViewSettingsPanel component already contains a "Refresh Data" button and controls for column visibility when viewMode is 'table'.
Moved to another branch because this is not yet ready to be deleted