feat: implement team management features and UI components#102
feat: implement team management features and UI components#102iamitprakash merged 4 commits intodevelopfrom
Conversation
- Removed output option from Next.js configuration. - Updated global styles to remove outlines and box shadows for a cleaner look. - Added new components for team management, including TeamActivity, TeamMembers, TeamTask, and TeamSearch. - Enhanced AppSidebar to include dynamic team links and actions. - Integrated collapsible functionality in NavMain for better navigation. - Introduced UnderConstruction component for future pages. - Created TeamActivityCard for displaying team activities. - Implemented a table for team members with dropdown actions for admin users.
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Summary by CodeRabbit
WalkthroughThis update introduces a new team page with a tabbed interface, adds several new React components for team activities, members, and tasks, and enhances the sidebar and main navigation to support nested and collapsible menu items. It also applies global CSS changes and updates the Next.js configuration. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TeamPage
participant TeamSearch
participant TeamTask
participant TeamActivity
participant TeamMembers
User->>TeamPage: Navigates to team page
TeamPage->>User: Renders tab triggers (Tasks, Activities, Members)
User->>TeamPage: Selects a tab
TeamPage->>TeamSearch: Renders search/filter bar (with tab context)
alt Tasks Tab
TeamPage->>TeamTask: Renders tasks table
else Activities Tab
TeamPage->>TeamActivity: Renders activities list
else Members Tab
TeamPage->>TeamMembers: Renders members table
end
sequenceDiagram
participant User
participant AppSidebar
participant NavMain
User->>AppSidebar: Opens sidebar
AppSidebar->>NavMain: Passes navigation items (with nested teams)
NavMain->>User: Renders collapsible menu with teams and sub-items
User->>NavMain: Expands/collapses teams submenu
NavMain->>User: Shows teams list and actions (Create, Join)
Suggested reviewers
Poem
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 (
|
There was a problem hiding this comment.
Actionable comments posted: 14
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (11)
app/globals.css(1 hunks)app/teams/[id]/page.tsx(1 hunks)components/UnderConstruction.tsx(1 hunks)components/app-sidebar.tsx(2 hunks)components/nav-main.tsx(1 hunks)components/teams/TeamAcitvityCard.tsx(1 hunks)components/teams/TeamActivity.tsx(1 hunks)components/teams/TeamMember.tsx(1 hunks)components/teams/TeamSearch.tsx(1 hunks)components/teams/TeamTask.tsx(1 hunks)next.config.ts(0 hunks)
💤 Files with no reviewable changes (1)
- next.config.ts
🧰 Additional context used
🧠 Learnings (1)
app/globals.css (2)
Learnt from: Hariom01010
PR: Real-Dev-Squad/todo-frontend#81
File: components/ui/dialog.tsx:46-48
Timestamp: 2025-07-10T16:15:32.947Z
Learning: outline-hidden is a valid utility class in Tailwind CSS v4 that hides the default browser focus outline while preserving accessibility in forced colors mode. It applies `outline: 2px solid transparent; outline-offset: 2px;` and is the recommended replacement for outline-none from v3 to maintain accessibility behavior.
Learnt from: Hariom01010
PR: Real-Dev-Squad/todo-frontend#81
File: components/ui/dialog.tsx:46-48
Timestamp: 2025-07-10T16:15:32.947Z
Learning: outline-hidden is a valid utility class in Tailwind CSS v4 and is the recommended way to hide the default browser outline, replacing the previous outline-none utility.
🧬 Code Graph Analysis (6)
components/teams/TeamTask.tsx (3)
lib/api/tasks/tasks.api.ts (1)
tasksApi(4-29)components/dashboard/DashboardTasksTable.tsx (1)
DashboardTasksTable(22-157)components/dashboard/DashboardTasksTableTabs.tsx (1)
DashboardTasksTableTabs(17-87)
components/teams/TeamMember.tsx (3)
components/ui/table.tsx (6)
Table(91-91)TableHeader(91-91)TableRow(91-91)TableHead(91-91)TableBody(91-91)TableCell(91-91)components/ui/avatar.tsx (2)
Avatar(47-47)AvatarFallback(47-47)components/ui/dropdown-menu.tsx (4)
DropdownMenu(213-213)DropdownMenuTrigger(215-215)DropdownMenuContent(216-216)DropdownMenuItem(219-219)
app/teams/[id]/page.tsx (2)
components/teams/TeamActivity.tsx (1)
TeamActivity(50-57)components/teams/TeamMember.tsx (1)
TeamMembers(48-96)
components/teams/TeamSearch.tsx (2)
components/ui/input.tsx (1)
Input(22-22)components/ui/button.tsx (1)
Button(49-49)
components/teams/TeamActivity.tsx (1)
components/teams/TeamAcitvityCard.tsx (1)
TeamActivityCard(12-37)
components/nav-main.tsx (2)
components/ui/sidebar.tsx (6)
SidebarMenu(680-680)SidebarMenuItem(684-684)SidebarMenuButton(683-683)SidebarMenuSub(686-686)SidebarMenuSubItem(688-688)SidebarMenuSubButton(687-687)components/ui/collapsible.tsx (3)
Collapsible(21-21)CollapsibleTrigger(21-21)CollapsibleContent(21-21)
🪛 Biome (1.9.4)
components/UnderConstruction.tsx
[error] 7-7: Alternative text title element cannot be empty
For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.
(lint/a11y/noSvgWithoutTitle)
components/teams/TeamMember.tsx
[error] 79-79: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-and-test (22.x)
🔇 Additional comments (4)
app/teams/[id]/page.tsx (1)
3-3: Import path is correct – no changes needed.The file
components/teams/TeamMember.tsxexports theTeamMemberscomponent, so importing{ TeamMembers }from@/components/teams/TeamMemberis accurate.components/app-sidebar.tsx (1)
41-56: Well-structured nested navigation implementation.The integration with the enhanced
NavMaincomponent looks good. The combination of dynamic team data mapping with static action items provides a clean user experience.components/teams/TeamSearch.tsx (1)
25-31: Clean conditional rendering logic.The activeTab-based conditional rendering is well-structured and easy to follow.
components/nav-main.tsx (1)
30-75: Excellent implementation of collapsible navigation.The enhancement to support nested menu items is well-structured:
- Clean separation between simple and complex navigation items
- Proper use of collapsible components with state management
- Good UX with
defaultOpenbased onisActivestatus- Smooth chevron rotation animation
- Type-safe implementation with optional properties
There was a problem hiding this comment.
Review by Korbit AI
Korbit automatically attempts to detect when you fix issues in new commits.
| Category | Issue | Status |
|---|---|---|
| Non-filtered Task Query ▹ view | ||
| Inefficient Dynamic Menu Generation ▹ view | ||
| Unclear TODO Comment Purpose ▹ view | ✅ Fix detected | |
| Missing Query State Handling ▹ view | ✅ Fix detected | |
| Inappropriate component dependencies ▹ view | ||
| Component functionality doesn't match its name ▹ view | ||
| Static Search Placeholder Text ▹ view | ||
| Unconstrained String Enum Type ▹ view | ✅ Fix detected | |
| Complex Conditional Rendering Logic ▹ view | ||
| Repetitive Style Configuration ▹ view |
Files scanned
| File Path | Reviewed |
|---|---|
| next.config.ts | ✅ |
| components/teams/TeamTask.tsx | ✅ |
| components/UnderConstruction.tsx | ✅ |
| components/teams/TeamAcitvityCard.tsx | ✅ |
| components/teams/TeamSearch.tsx | ✅ |
| components/app-sidebar.tsx | ✅ |
| components/teams/TeamActivity.tsx | ✅ |
| app/teams/[id]/page.tsx | ✅ |
| components/nav-main.tsx | ✅ |
| components/teams/TeamMember.tsx | ✅ |
Explore our documentation to understand the languages and file types we support and the files we ignore.
Check out our docs on how you can make Korbit work best for you and your team.
- Removed outline and box-shadow styles from global CSS for a cleaner look. - Replaced TeamSearch with TeamDashboardHeader in the team page for improved navigation. - Added TeamActivityCard component for displaying team activities. - Updated TeamMembers component to use unique IDs for keys and improved button styling. - Enhanced TeamTask component with loading and error states for better user experience. - Updated TODO comments for clarity on future API integrations.
)" This reverts commit 0b10fd3.
Date: 13 July 2025
Developer Name: @AnujChhikara
Issue Ticket Number
Description
Documentation Updated?
Under Feature Flag
Database Changes
Breaking Changes
Development Tested?
Screenshots
Screenshot 1
chrome_EdEYBCxhPp.mp4
Test Coverage
Screenshot 1
Additional Notes
Description by Korbit AI
What change is being made?
Implement comprehensive team management features and UI components, including tasks, activities, and member management for the team page, add a placeholder 'under construction' component, update navigation to accommodate team management, and modify the sidebar with a dummy dataset for team navigation links.
Why are these changes being made?
These changes enhance the team's ability to manage tasks, track activities, and organize team members through a cleaner and more interactive frontend interface. Dummy data is used for development purposes until backend integration is completed, enabling testing of navigation and user workflows. The upgraded UI components and navigation features improve user engagement and prepare the application for future backend connectivity.